/* =========================================================
   eTutee – style.css (clean)
   Barve in tipografija
========================================================= */
:root{
  --ui:#C4007A;       /* primarna vijolična */
  --ui-dark:#8C0F6A;  /* temnejša vijolična */
  --accent:#E3A51A;   /* rumena */
  --text:#111;
  --ui-light:#E36FB7;
}

/* === Global box model (OBVEZNO) === */
*, *::before, *::after {
  box-sizing: border-box;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}


body{
  margin:0;
  color:var(--text);
  font-family:'Source Sans 3', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
}


.topnav,
.topnav a,
button,
.accordion,
.hero-statement,
.subjectsIntro,
.mission,
.mission2,
#miklavzBanner,
#xmasBanner2,
#splosniBanner {
  font-family: "Poppins", sans-serif;
}


/* === LOCAL FONTS (GDPR SAFE) === */

/* ===== POPPINS ===== */
@font-face{
  font-family:'Poppins';
  src:url('/assets/fonts/Poppins-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Poppins';
  src:url('/assets/fonts/Poppins-500.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Poppins';
  src:url('/assets/fonts/Poppins-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Poppins';
  src:url('/assets/fonts/Poppins-700.woff2') format('woff2');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ===== SOURCE SANS 3 ===== */
@font-face{
  font-family:'Source Sans 3';
  src:url('/assets/fonts/SourceSans3-400.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:'Source Sans 3';
  src:url('/assets/fonts/SourceSans3-600.woff2') format('woff2');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}


/* =========================================================
   TOP NAV (fiksni, vijoličen, z dropdowni)
========================================================= */
.topnav{
  background:var(--ui-dark);
  position:fixed; top:0; left:0; right:0;
  z-index:1000;
  overflow:visible;
}
.topnav::after{content:"";display:table;clear:both;}
.topnav a{
  float:left; display:block;
  color:#f2f2f2; text-align:center;
  padding:14px 16px; text-decoration:none;
  font-size:17px;
}
.topnav a:hover{ background:var(--accent); color:#000; }
.topnav a.active{ background:var(--ui); color:#fff; }
.topnav .icon{ display:none; }
.topnav a.right{ float:right; }
.topnav a.split{
  margin-left:24px; padding-left:24px;
  border-left:1px solid rgba(255,255,255,.35);
}

/* Dropdown (desktop) */
.dropdown{ float:left; position:relative; }
.dropdown .dropbtn{
  font-size:17px; border:0; outline:0; color:#fff;
  padding:14px 16px; background:transparent; font-family:inherit; cursor:pointer;
}
.dropdown-content{
  display:none; position:absolute; left:0; top:100%;
  min-width:220px; background:var(--ui-dark);
  z-index:9999; box-shadow:0 8px 16px rgba(0,0,0,.2);
}
.dropdown-content a{
  float:none; display:block; width:100%;
  padding:12px 16px; color:#fff; text-decoration:none; text-align:left; white-space:normal;
}
.dropdown-content a:hover{ background:var(--accent); color:#000; }
@media (hover:hover){ .dropdown:hover .dropdown-content{ display:block; } }

/* Mobilna pravila (hamburger) */
@media screen and (max-width:600px){
  .topnav a:not(:first-child){ display:none; }
  .topnav .dropdown{ display:none; }
  .topnav a.icon{ float:right; display:block; }
  .topnav a.split{ margin-left:0; padding-left:16px; border-left:none; }
}
@media screen and (max-width:600px){
  .topnav.responsive{ position:fixed; }
  .topnav.responsive .icon{ position:absolute; right:0; top:0; }
  .topnav.responsive a{ float:none; display:block; text-align:left; }
  .topnav.responsive .dropdown{ float:none; display:block; width:100%; }
  .topnav.responsive .dropbtn{
    width:100%; text-align:left; display:block; padding:14px 16px;
  }
  .topnav.responsive .dropdown-content{
    position:relative; top:0; left:0; min-width:100%; box-shadow:none; display:none;
  }
  .topnav.responsive .dropdown.open .dropdown-content{ display:block; }
  .topnav.responsive .dropdown-content a{
    position:relative; display:block; padding-left:32px; line-height:1.3;
  }
  .topnav.responsive .dropdown-content a::before{
    content:"–"; position:absolute; left:16px; top:50%; transform:translateY(-50%); opacity:.9;
  }
  .topnav.responsive .dropdown .dropbtn{ font-weight:700; }
}


/* =========================================================
   Badge pod logotipom
========================================================= */
#logo { position: relative; }
#black-friday{
  display:block; width:350px; height:214px;
  position:absolute; top:55px; left:-210px;
  background: transparent url('vsakdan.png') no-repeat center center/contain;
  z-index:2;
}
@media (max-width:1200px){
  #black-friday{ top:15px; width:300px; left:-200px; }
}
@media (max-width:992px){
  #black-friday{ width:250px; left:-120px; }
}
@media (max-width:768px){
  #black-friday{ width:220px; top:20px; left:-35px; }
}
@media (max-width:576px){
  #black-friday{ width:300px; top:200px; left:calc(50% - 150px); }
  .mission.black-friday{ margin-top:180px !important; }
}
@media (max-width:300px){
  #black-friday{ display:none; }
  .mission.black-friday{ margin-top:0 !important; }
}
@media (max-width:600px){
  #logo { position: relative; }
  #black-friday{
    position: static; display:block; width:280px; height:auto;
    aspect-ratio:350/214; background-size:contain; background-position:center;
    margin:12px auto 0; left:auto; top:auto;
  }
  .mission.black-friday{ margin-top:12px !important; }
}

/* =========================================================
   HERO fakti
========================================================= */
.facts ul{margin:0; padding:0;}
.facts ul>li{
  list-style:none; color:#333; text-transform:uppercase;
  font-size:1.1rem; line-height:1.1rem;
  padding-bottom:10px; text-align:right;
}
.facts ul>li b{ font-weight:700; }
@media (max-width:991px){
  .facts ul>li,
  .facts ul>li b{ font-size:.95rem; line-height:1.1rem; padding-bottom:6px; text-align:left; }
}

/* =========================================================
   “Okna” (mission / mission2)
========================================================= */
.mission, .mission2{
  text-align:center; padding:30px 0; margin-bottom:30px;
  border:6px solid var(--ui); border-radius:15px;
}
.mission{ background:var(--ui-dark); }
.mission2{ background:var(--ui); }
.mission p, .mission2 p{
  font-size:1.5rem; line-height:2rem; color:#fff; margin:0;
}
.mission p>strong, .mission2 p>strong{
  font-weight:700;
  background:linear-gradient(45deg, var(--accent) 0%, #f2cb13 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.mission button, .mission2 button{
  font-size:1.2rem; line-height:1.8rem;
  color:#fff; text-transform:uppercase;
  border-radius:10px; margin:18px 8px 0; padding:10px 22px;
  border:1px solid #fff;
  background:linear-gradient(45deg, var(--ui-dark) 0%, var(--ui) 100%);
  box-shadow:0 5px 16px rgba(0,0,0,.18);
}
.mission button:hover, .mission2 button:hover{
  color:#000; background:linear-gradient(45deg, var(--accent) 0%, #f2cb13 100%);
}
.mission button.gold, .mission2 button.gold{
  color:#000; border:0; background:linear-gradient(45deg, var(--accent) 0%, #f2cb13 100%);
}
.mission button.gold:hover, .mission2 button.gold:hover{ background:#fff; }
@media (max-width:991px){
  .mission p, .mission2 p{ font-size:1.25rem; line-height:1.55rem; }
  .mission button, .mission2 button{ font-size:1.05rem; padding:8px 16px; }
}

/* =========================================================
   “Naše stranke” (carousel s citati)
========================================================= */
.carousel .carousel-item figure{
  background:linear-gradient(45deg, var(--ui-dark) 0%, var(--ui) 100%);
  border-radius:15px; padding:30px; margin:0;
}
.carousel .carousel-item blockquote{
  color:#fff; font-weight:700; font-size:1.5rem; line-height:2rem; margin:0 0 .5rem 0;
}
.carousel .carousel-item footer{
  color:#fff; font-size:1rem; text-align:right;
}
@media (max-width:991px){
  .carousel .carousel-item blockquote{ font-size:1.25rem; line-height:1.6rem; }
}

/* =========================================================
   Kartice predmetov
========================================================= */
.subjectsIntro{
  text-align:center; text-transform:uppercase; font-weight:700;
  font-size:1.2rem; line-height:1.4rem; color:#333; padding:20px 0 10px;
}
.subjects .card{ border:0; box-shadow:0 6px 18px rgba(0,0,0,.06); border-radius:12px; overflow:hidden; }
.subjects .card-header{
  background:linear-gradient(45deg, var(--ui-dark) 0%, var(--ui) 100%);
  color:#fff; font-weight:700; font-size:1.2rem;
}
.subjects .card-body{
  background:linear-gradient(45deg, var(--accent) 0%, #f2cb13 100%);
  color:#333; font-size:1.05rem;
}
.subjects .card-body a{ color:var(--ui); }
.subjects .card-body a:hover{ color:#000; }

/* =========================================================
   Info blok
========================================================= */
.info{ color:#555; font-size:1.05rem; }
.info strong{
  font-weight:700;
  background:linear-gradient(45deg, var(--ui-dark) 0%, var(--ui) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* =========================================================
   Slike “photos”
========================================================= */
.photos .img-thumbnail{
  border:0; border-radius:14px; padding:0;
  box-shadow:0 8px 22px rgba(0,0,0,.12);
}

/* =========================================================
   FAQ akordeon
========================================================= */
.wrapper{ max-width:1000px; margin:0 auto; }
.faq{ max-width:920px; margin:14px auto; }
.accordion{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:18px 22px; border:0; border-radius:16px; cursor:pointer;
  text-align:left; line-height:1.35; color:#fff;
  background:linear-gradient(45deg, var(--ui-dark) 0%, var(--ui) 100%);
  font-weight:700;
}
.accordion i.fa-chevron-down{
  margin-left:auto; font-size:18px; transition:transform .2s ease;
}
.faq.active .accordion i.fa-chevron-down{ transform:rotate(180deg); }
.faq .pannel{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  padding:0 22px; margin-top:8px; border-radius:0 0 14px 14px;
  background:#fff; border-left:4px solid var(--ui); color:#222;
}
.faq-title { text-align:center; margin-bottom:12px; }
.faq.active .pannel{ padding:16px 22px; }
@media (max-width:600px){
  .faq{ max-width:100%; margin:10px auto; }
  .accordion{ padding:16px; }
  .faq .pannel{ padding:14px 16px; border-radius:0 0 12px 12px; }
}
@media (min-width:601px) and (max-width:820px){
  .wrapper{ max-width:680px; padding:0 16px; }
  .faq{ max-width:640px; }
  .accordion{ font-size:1.05rem; padding:16px 18px; }
}

/* =========================================================
   Newsletter + Footer (CLEAN)
========================================================= */
.et-footer-wrap{ margin-top:48px; }

/* Newsletter */
.et-footer-newsletter{
  background: linear-gradient(135deg, var(--ui) 0%, var(--ui-light) 100%);
  color:#fff; padding:55px 0; border-radius:18px 18px 0 0;
}
.et-footer-newsletter .et-container{
  display:flex; align-items:center; justify-content:space-between; gap:28px;
}
.et-container{ max-width:1180px; margin:0 auto; padding:0 16px; }

.et-nl-text{ flex:1 1 auto; min-width:0; }
.et-nl-text h3{ margin:0 0 8px; font-size:1.6rem; }
.et-nl-text p{ margin:0 0 6px; opacity:.95; }
.et-nl-bullets{
  display:flex; gap:18px; margin:10px 0 0; padding:0; list-style:none;
  opacity:.9; flex-wrap:wrap; font-size:.85rem; line-height:1.4;
}

/* Newsletter obrazec (DESKTOP) */


.et-nl-form input{
  flex:0 1 360px; max-width:420px; width:100%;
  height:52px; padding:0 18px; border-radius:28px; border:1px solid rgba(0,0,0,.35);
  background:#fff; color:#111; outline:0; box-shadow:none; aspect-ratio:auto;
  font-size:16px;
}
.et-nl-form button{
  display:flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 22px; border-radius:28px; white-space:nowrap;
  text-transform:uppercase; font-size:1.05rem; font-weight:700; text-align:center;
  color:#fff; border:1px solid #fff;
  background:linear-gradient(45deg, var(--ui-dark) 0%, var(--ui) 100%);
  box-shadow:0 5px 16px rgba(0,0,0,.18); cursor:pointer; transition:all .2s ease;
  touch-action: manipulation;
}
.et-nl-form button:active{
  transform: scale(0.98);
  opacity: 0.9;
}

.et-nl-form button:hover{
  color:#000; background:linear-gradient(45deg, var(--accent) 0%, #f2cb13 100%);
}
.visually-hidden{ position:absolute; left:-10000px; }


/* Newsletter (MOBILE) */
@media (max-width:900px){
  .et-footer-newsletter .et-container{
    flex-direction:column; align-items:stretch;
  }
  .et-nl-form{
    margin-left:0; width:100%; flex-direction:column; gap:10px;
  }
  .et-nl-form input,
  .et-nl-form button{ width:100%; max-width:100%; }
}

/* Footer */
.et-footer{
  background: linear-gradient(135deg, var(--ui-dark) 0%, var(--ui) 70%);
  color:#fff; padding:28px 0 10px; border-radius:0;
  box-shadow: 0 -8px 22px rgba(0,0,0,.12) inset; /* optična ločnica od newsletterja */
}
.et-footer-grid{
  display:grid; grid-template-columns:1.2fr repeat(4, 1fr);
  gap:26px; align-items:start; padding-top:24px;
}
.et-footer h4{ margin:0 0 10px; font-size:1.05rem; }
.et-footer ul{ margin:0; padding:0; list-style:none; }
.et-footer a{ color:#fff; text-decoration:none; opacity:.95; }
.et-footer a:hover{ opacity:1; text-decoration:underline; }
.et-muted{ opacity:.9; }
.et-logo{ max-width:210px; height:auto; margin-bottom:10px; }

.et-trust li{ display:flex; align-items:center; gap:10px; margin:8px 0; }
.et-trust i{ width:18px; text-align:center; }

.et-social li{ margin:8px 0; }
.et-social i{ width:18px; }

.et-sep{ border:0; height:1px; background:rgba(255,255,255,.25); margin:18px 0 14px; }

.et-footer__payments{
  display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:center; margin-bottom:10px;
}
.et-footer__payments .et-pay{
  height:2.2rem; width:auto; display:inline-block;
  filter: brightness(0) invert(1); opacity:.95;
}
.et-footer__payments .et-pay:hover{ opacity:1; }
.et-footer__payments i.fab{
  font-size:2.2rem; line-height:2.2rem; opacity:.95;
}
.et-footer__payments i.fab:hover{ opacity:1; }
.et-footer__payments i.et-svg{
  display:inline-block; height:2.2rem; width:3rem; background:center/contain no-repeat; opacity:.95;
}
.et-footer__payments i.et-svg.maestro{ background-image:url('https://etutee.eu/assets/maestro_.svg'); }
.et-footer__payments i.et-svg.sepa{ background-image:url('https://etutee.eu/assets/sepa_.svg'); }
.et-footer__payments i.et-svg:hover{ opacity:1; }

.et-copy{ text-align:center; font-size:.9rem; opacity:.95; padding-bottom:8px; }

@media (max-width:980px){
  .et-footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .et-footer-grid{ grid-template-columns:1fr; }
}

/* =========================================================
   Hero: odstrani separatorje med CTA linki (če obstajajo)
========================================================= */
.mission.black-friday a::before,
.mission.black-friday a::after,
.mission.black-friday a + a::before{
  content:none !important; display:none !important;
}
.mission.black-friday .col-md-12.col-lg-10{ font-size:0; }
.mission.black-friday .col-md-12.col-lg-10 button{
  font-size:1.2rem; line-height:1.8rem;
}
.mission.black-friday a{
  display:inline-block; color:inherit; text-decoration:none;
}

/* =========================================================
   Payments – FA6 + SVG (NEW, FIXED)
========================================================= */

.et-footer__payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px;
    padding: 20px 0 25px;
}

/* FA6 ikone */
.pay-icon {
    font-size: 2.6rem !important;
    color: #ffffff !important;
    opacity: 0.92;
    transition: opacity .2s ease, transform .2s ease;
}

.pay-icon:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Maestro + SEPA (SVG ikone) */
.pay-svg {
    height: 40px;
    width: auto;
    opacity: 0.92;
    filter: invert(1); /* naredi white na temnem */
    transition: opacity .2s ease, transform .2s ease;
}

.pay-svg:hover {
    opacity: 1;
    transform: scale(1.05);
}

@media (max-width: 480px) {
    .pay-icon { font-size: 2.2rem !important; }
    .pay-svg { height: 32px; }
}

.pay-svg {
    height: 40px;
    width: auto;
    opacity: 0.92;
    transition: 0.2s ease;
    filter: brightness(0) invert(1);
}
.pay-svg:hover {
    opacity: 1;
    transform: scale(1.05);
}

.pay-svg.sepa {
    height: 25px !important;    /* zmanjšaj višino */
    width: auto !important;
    transform: none !important; /* izklopi scale */
}

/* =========================================================
   NEWSLETTER – FINAL STABLE FIX (MailerLite safe)
========================================================= */
@media (min-width: 901px){

  /* 1. Prepiši MailerLite flex */
  .et-footer-newsletter form.et-nl-form{
    display: grid !important;
    grid-template-columns: 460px auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 16px !important;
    row-gap: 6px !important;
    align-items: center !important;
  }

  /* 2. Email */
  .et-footer-newsletter input[type="email"]{
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
  }

  /* 3. Gumb */
  .et-footer-newsletter button{
    grid-column: 2 !important;
    grid-row: 1 !important;
    white-space: nowrap !important;
  }
}

/* --- MailerLite checkbox SAFE layout --- */
.et-footer-newsletter .et-nl-checkbox{
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  column-gap: 10px !important;
  align-items: center !important;
  padding-left: 18px !important;
}

.et-footer-newsletter .et-nl-checkbox input{
  grid-column: 1 !important;
  grid-row: 1 !important;
}


.et-footer-newsletter .et-nl-checkbox span{
  grid-column: 2 !important;
  grid-row: 1 !important;
}
.et-footer-newsletter .et-nl-checkbox{
  font-size: 0.80em !important;
}

/* Hero statement */

.hero-statement {
  font-size: 2rem;          /* osnovna velikost */
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 10px !important;
}

.hero-statement strong {
  font-size: 2.4rem;        /* dodatno poudari 98 % */
  font-weight: 700;
}

.hero-note {
  font-size: 1.3rem !important;      /* manjše besedilo */
  font-style: italic;    /* italic */
  opacity: 0.55;         /* bolj umirjeno */
  margin-top: 0px !important;      /* več razmika od naslova */
  text-align: center;
}


/* =========================
   METRIKE – OKVIRČKI
========================= */

.stats-section {
  padding: 60px 20px 20px;
  background: #ffffff;
}

.stats-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.stat-box {
  border: 3px solid #8c0a6b;
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* številke */
.stat-number {
  font-size: 56px;
  font-weight: 900;        /* enako poudarjene vse tri */
  letter-spacing: 0.8px;  /* vizualna moč */
  color: #f5c400;         /* rumena za vse */
  margin-bottom: 18px;
  line-height: 1;
  will-change: contents;
}

/* tekst pod številkami */
.stats-section .stat-text {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.45;
  color: #333;
}

.stats-section .stat-text strong {
  font-weight: 700;
  font-size: 1.05em;
  color: #8c0a6b;
}

/* ta del .stat-number je izkljucno za stetje od nic do vrednosti */
.stat-number {
  will-change: contents;
}

/* 📱 Mobile */
@media (max-width: 900px) {
  .stats-container {
    grid-template-columns: 1fr;
  }

  .stat-number {
    font-size: 48px;
  }
}


/* review setting */
/* 1. Zakleni višino carousel-a */
.carousel-inner {
  height: 320px;
  overflow: hidden;
}

/* 2. Naj vsak slide zapolni to višino */
.carousel-item {
  height: 100%;
}

/* 3. Odstrani privzete margine, ki povzročajo skakanje */
.carousel-item figure,
.carousel-item blockquote {
  margin: 0;
}

/* 4. Vsebino lepo centriraj znotraj */
.carousel-item figure {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}