/* ============================================================
   Pringles — "Božić je dobio upgrade" (Konzum, 2.–30.11.2026.)
   Izgled usklađen s KV vizualom. Bez cookieja / vanjskih fontova.
   ============================================================ */
:root{
  --red:#D81E05; --red-dark:#B41804; --red-deep:#8E1104; --maroon:#5E0C03;
  --yellow:#FFC20E; --yellow-dark:#E7A800;
  --ink:#2A1712; --white:#fff;
  --radius:16px; --wrap:1120px;
  --shadow:0 18px 44px rgba(0,0,0,.25);
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--red); color:#fff;
  font-family:'Poppins',system-ui,Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:#fff}
.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 18px}

/* ---------- NAV ---------- */
.site-nav{position:sticky; top:0; z-index:50; background:rgba(142,17,4,.92);
  backdrop-filter:saturate(1.2) blur(4px)}
.site-nav .wrap{display:flex; align-items:center; justify-content:space-between; height:56px}
.site-nav .brand{color:#fff; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; font-size:1.05rem}
.site-nav nav{display:flex; align-items:center; gap:20px}
.site-nav nav a{color:#fff; text-decoration:none; font-weight:600; font-size:.95rem}
.site-nav nav a:hover{text-decoration:underline}
.nav-cta{background:var(--yellow); color:var(--ink)!important; padding:7px 15px;
  border-radius:999px; font-weight:800!important}
.nav-cta:hover{background:#fff; text-decoration:none!important}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block; text-decoration:none; font-weight:800; cursor:pointer;
  padding:15px 36px; border-radius:999px; font-size:1.05rem; transition:.15s}
.btn-yellow{background:var(--yellow); color:var(--ink)}
.btn-yellow:hover{background:#fff; transform:translateY(-1px)}

/* ---------- HERO ---------- */
.hero{position:relative; overflow:hidden; text-align:center; padding:34px 0 48px;
  background:
    linear-gradient(145deg, var(--maroon) 0 18%, transparent 18.2% 82%, var(--maroon) 82% 100%),
    radial-gradient(130% 90% at 50% 8%, var(--red) 0 58%, var(--red-deep) 100%);
}
.hero .wrap{position:relative; z-index:1}
.hero-top{display:flex; justify-content:flex-end; margin-bottom:10px}
.hero-top img{width:150px; height:auto}
.hero-titles{display:flex; flex-direction:column; align-items:center; gap:6px; margin:4px 0 6px}
.hero-titles .t1{width:min(78%,640px)}      /* BOŽIĆ JE (žuti) */
.hero-titles .t2{width:min(74%,600px)}      /* DOBIO UPGRADE (bijeli) */
.hero-prizes{width:min(100%,920px); margin:6px auto 22px; filter:drop-shadow(0 20px 36px rgba(0,0,0,.35))}
.hero-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero .dates{font-weight:700; margin:16px auto 0; font-size:1.02rem}
.hero .dates b{color:var(--yellow)}

/* ---------- KORACI (pills) ---------- */
.steps-sec{padding:40px 0 10px}
.steps{display:grid; grid-template-columns:1fr; gap:26px; max-width:980px; margin:0 auto}
.step{text-align:center}
.pill{display:flex; align-items:center; gap:14px; background:var(--yellow); color:var(--ink);
  border-radius:999px; padding:12px 26px 12px 12px; box-shadow:0 10px 22px rgba(0,0,0,.18);
  width:fit-content; margin:0 auto; max-width:100%}
.pill .n{flex:none; width:46px; height:46px; border-radius:50%; background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.5rem}
.pill .ptxt{font-weight:900; font-size:1.35rem; line-height:1; text-transform:uppercase;
  letter-spacing:.01em; text-align:left}
.step .sub{margin:12px 0 0; font-weight:600; color:#fff; font-size:.98rem}

/* ---------- NAGRADE ---------- */
.prizes-sec{padding:44px 0 50px}
.prizes{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:980px; margin:0 auto;
  align-items:start}
.prize{text-align:center; padding:6px 8px}
.prize .qty{font-weight:900; font-size:clamp(2.2rem,7vw,3.2rem); line-height:1; color:#fff}
.prize .plabel{font-weight:700; margin:6px 0 14px; font-size:1.02rem}
.prize .pic{height:92px; display:flex; align-items:flex-end; justify-content:center}
.prize .pic img{max-height:92px; width:auto}

/* ---------- SMS + QR ---------- */
.sms-sec{padding:14px 0 54px}
.sms-card{max-width:820px; margin:0 auto; text-align:center}
.sms-text p{margin:0 0 12px; font-size:1.02rem}
.sms-text .big{font-weight:700}
.sms-text b{color:var(--yellow)}

/* ---------- PRIJAVA (forma) ---------- */
#prijava{padding:52px 0 60px}
.sec-title{text-align:center; font-weight:900; font-size:clamp(1.7rem,5.5vw,2.6rem);
  margin:0 0 6px; text-transform:uppercase}
.sec-title .y{color:var(--yellow)}
.form-intro{text-align:center; max-width:620px; margin:0 auto 24px; color:#ffe}
/* ≥880px: iframe prelazi Bootstrap 'md' prag (768px) pa se na desktopu
   prikaže i drop-zona za fotografiju (inače skrivena klasom d-md-block). */
.form-card{max-width:880px; margin:0 auto; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:10px 10px 4px; overflow:hidden}
#forma-iframe{width:100%; border:0; display:block; min-height:120px}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--maroon); color:#f3d9d3; padding:30px 0; font-size:.9rem}
.footer-row{display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:center;
  align-items:center; text-align:center}
.footer-row b{color:#fff}
.footer-row a{color:#fff; text-decoration:underline; font-weight:600}
.footer-legal{max-width:900px; margin:18px auto 0; text-align:center; color:#e8b7ae;
  font-size:.8rem; line-height:1.5}
.footer-legal a{color:#fff}

/* ---------- USKI MOBITEL: zbijena navigacija ---------- */
@media (max-width:460px){
  .site-nav .wrap{height:auto; min-height:52px; padding-top:6px; padding-bottom:6px; gap:10px}
  .site-nav .brand{font-size:.95rem; letter-spacing:.1em}
  .site-nav nav{gap:12px}
  .site-nav nav a{font-size:.85rem}
  .nav-cta{padding:6px 12px}
}

/* ---------- DESKTOP ---------- */
@media (min-width:820px){
  .hero{padding:40px 0 58px}
  .steps{grid-template-columns:repeat(3,1fr); gap:20px; align-items:start}
  .sms-text p{font-size:1.05rem}
}

/* ============================================================
   PRAVILA / DOBITNICI — sadržajne stranice (bijela podloga)
   ============================================================ */
.doc{background:#fff; color:#2b211c}
.doc .wrap{max-width:820px}
.doc h1{font-weight:900; font-size:clamp(1.8rem,5vw,2.4rem); margin:0 0 6px; color:#2b211c}
.doc .doc-sub{color:#6c5b52; margin:0 0 28px}
.doc h2{font-weight:800; font-size:1.25rem; margin:30px 0 8px; color:var(--red-dark)}
.doc p, .doc li{color:#352a24}
.doc a{color:var(--red)}
.doc .rjesenje{margin-top:40px; padding:22px 24px; background:#fff6ee;
  border-left:5px solid var(--red); border-radius:0 12px 12px 0}
.doc .rjesenje h2{margin-top:0; color:var(--ink)}
.doc .rjesenje p{margin:2px 0}
.doc .back{display:inline-block; margin:34px 0 0; font-weight:700; text-decoration:none; color:var(--red)}
.dobitnici-empty{text-align:center; color:#6c5b52; background:#fff6ee;
  border-radius:var(--radius); padding:48px 24px; max-width:620px; margin:10px auto 0}
.doc .site-nav{background:var(--red)}