/* =========================================================
   Pringles – "Počasti gejmera u sebi" – custom.css
   Pringles gaming promo – Konzum
   Colors: #da001a (red), #ffdc00 (yellow), #cd071e (red border)
   Font: Bebas Neue for headlines (similar to key visual)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face {
    font-family: 'One Night Sans Condensed';
    src: url('fonts/OneNightSans-Condensed.eot');
    src: url('fonts/OneNightSans-Condensed.eot?#iefix') format('embedded-opentype'),
        url('fonts/OneNightSans-Condensed.woff2') format('woff2'),
        url('fonts/OneNightSans-Condensed.woff') format('woff'),
        url('fonts/OneNightSans-Condensed.ttf') format('truetype'),
        url('fonts/OneNightSans-Condensed.svg#OneNightSans-Condensed') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'One Night Sans Extended';
    src: url('fonts/OneNightSans-Extended.eot');
    src: url('fonts/OneNightSans-Extended.eot?#iefix') format('embedded-opentype'),
        url('fonts/OneNightSans-Extended.woff2') format('woff2'),
        url('fonts/OneNightSans-Extended.woff') format('woff'),
        url('fonts/OneNightSans-Extended.ttf') format('truetype'),
        url('fonts/OneNightSans-Extended.svg#OneNightSans-Extended') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'One Night Sans Condensed';
    src: url('fonts/OneNightSans-CondensedBlack.eot');
    src: url('fonts/OneNightSans-CondensedBlack.eot?#iefix') format('embedded-opentype'),
        url('fonts/OneNightSans-CondensedBlack.woff2') format('woff2'),
        url('fonts/OneNightSans-CondensedBlack.woff') format('woff'),
        url('fonts/OneNightSans-CondensedBlack.ttf') format('truetype'),
        url('fonts/OneNightSans-CondensedBlack.svg#OneNightSans-CondensedBlack') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Barlow';
    src: url('fonts/Barlow-Regular.eot');
    src: url('fonts/Barlow-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Barlow-Regular.woff2') format('woff2'),
        url('fonts/Barlow-Regular.woff') format('woff'),
        url('fonts/Barlow-Regular.ttf') format('truetype'),
        url('fonts/Barlow-Regular.svg#Barlow-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'One Night Sans';
    src: url('fonts/OneNightSans-Black.eot');
    src: url('fonts/OneNightSans-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/OneNightSans-Black.woff2') format('woff2'),
        url('fonts/OneNightSans-Black.woff') format('woff'),
        url('fonts/OneNightSans-Black.ttf') format('truetype'),
        url('fonts/OneNightSans-Black.svg#OneNightSans-Black') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* ---------- Varijable ---------- */
:root{
  --pg-red:#da001a;
  --pg-red-dark:#cd071e;
  --pg-yellow:#ffdc00;
  --pg-black:#1a1a1a;
  --pg-white:#fff;
  --pg-gray-light:#f5f5f5;
  --pg-text:#1a1a1a;
}

html{
  scroll-behavior: smooth;
}

/* ---------- Osnovno ---------- */
html,body{height:100%}
body{
  font-family: 'Barlow', system-ui, -apple-system, Arial, sans-serif;
  color: var(--pg-text);
  font-size: 1.05rem;
  margin:0;
  background:#fff;
}
a, .btn, button, img{ transition: all .25s ease; }
img{ max-width:100%; height:auto; }

/* =========================================================
   NAVBAR
   ========================================================= */
.pg-topbar{
  background: var(--pg-red);
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.pg-logo{ height:32px; width:auto; }
.pg-topbar .navbar-nav .nav-link{
  color: var(--pg-white);
  font-family: 'Bebas Neue', 'Barlow', sans-serif;
  font-weight: bold;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: .6rem 1rem;
}
.pg-topbar .navbar-nav .nav-link:hover,
.pg-topbar .navbar-nav .nav-link:focus{
  color: var(--pg-yellow);
}
.navbar-dark .navbar-toggler{
  border-color: rgba(255,255,255,.4);
}

/* =========================================================
   HERO
   ========================================================= */
.pg-hero{
  position: relative;
  overflow:hidden;
  background: var(--pg-red);
  color: var(--pg-white);
  padding: 2rem 0 0 0;
}

.pg-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 70% 30%, rgba(255,220,0,.15), transparent 60%),
    radial-gradient(600px 400px at 30% 80%, rgba(0,0,0,.15), transparent 50%);
  z-index: 1;
  pointer-events:none;
}

.pg-hero .container{
  position: relative;
  z-index: 2;
}

/* Kicker: naslov kampanje */
.pg-kicker{
  margin-bottom: 1.5rem;
}
.pg-kicker .title{
  font-family:'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .8px;
  font-size: clamp(3.2rem, 5vw + 1.4rem, 6rem);
  line-height: 1.02;
  margin: 0;
  text-shadow: 2px 3px 6px rgba(0,0,0,.25);
}
.pg-kicker .title span{
  color: var(--pg-yellow);
}
.pg-kicker .date{
  font-family:'Barlow', sans-serif;
  font-weight: normal;
  font-size: clamp(1.1rem, 1vw + .8rem, 1.6rem);
  letter-spacing: .6px;
  opacity: .95;
  margin: .5rem 0 0 0;
}

/* Hero lead */
.pg-lead{
  font-size: 1.1rem;
  opacity: .95;
  margin: 1rem 0 1.5rem 0;
  max-width: 600px;
}

/* CTA Button */
.pg-btn{
  background: var(--pg-yellow);
  border: 0;
  color: var(--pg-black);
  font-family:'Bebas Neue', 'Barlow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: .85rem 2rem;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-size: 1.1rem;
}
.pg-btn:hover{
  transform: translateY(-2px);
  color: var(--pg-black);
  background: #ffe740;
  box-shadow: 0 12px 30px rgba(0,0,0,.22);
}

/* Hero images */
.pg-hero-visual{
  text-align:center;
  margin-top: 1.5rem;
}
.pg-hero-visual img{
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 32px rgba(0,0,0,.30));
}

/* Pass the Pringles logo */
.pg-pass-logo{
  max-width: 320px;
  margin: 1.5rem auto;
  display:block;
}

/* Proizvodi slika */
.pg-proizvodi{
  max-width: 340px;
  margin: 0 auto;
}

/* Igre slika */
.pg-igre{
  max-width: 480px;
  margin: 1rem auto;
}

/* =========================================================
   KAKO SUDJELOVATI
   ========================================================= */
.pg-how{
  background: var(--pg-white);
  color: var(--pg-text);
}
.pg-h2{
  font-family:'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .7px;
  font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.4rem);
  margin: 0 0 .5rem 0;
  color: var(--pg-red);
}
.pg-how-text{
  font-size: 1.08rem;
  line-height: 1.65;
}
.pg-how-text strong{
  color: var(--pg-red);
}
.pg-muted{
  opacity:.7;
  font-size:.92em;
}

/* =========================================================
   NAGRADE
   ========================================================= */
.pg-prizes-section{
  position: relative;
  background: var(--pg-red);
  color: var(--pg-white);
  overflow:hidden;
}
.pg-prizes-section::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(800px 500px at 20% 80%, rgba(255,220,0,.12), transparent 60%),
    radial-gradient(600px 400px at 80% 20%, rgba(0,0,0,.10), transparent 50%);
  pointer-events:none;
}
.pg-prizes-section .container{
  position:relative; z-index:1;
}
.pg-prizes-section .pg-h2{
  color: var(--pg-yellow);
}

/* Nagrada kartice */
.pg-prize-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1.5rem 1rem;
  text-align:center;
  height:100%;
  backdrop-filter: blur(4px);
  transition: transform .3s ease, box-shadow .3s ease;
}
.pg-prize-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.pg-prize-img{
  max-width: 100%;
  max-height: 220px;
  height: auto;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.30));
  margin-bottom: 1rem;
}
.pg-prize-qty{
  font-family:'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
  font-weight: bold;
  font-size: 2.2rem;
  color: var(--pg-yellow);
  line-height:1;
  margin-bottom: .25rem;
}
.pg-prize-name{
  font-family:'Bebas Neue', 'Barlow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: 1rem;
}

/* Full nagrade image (alternative) */
.pg-nagrade-full{
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.25));
}

/* =========================================================
   PRIJAVA (iframe)
   ========================================================= */
.pg-form{
  position: relative;
  background: var(--pg-black);
  color: #fff;
  overflow:hidden;
}
.pg-form::before{
  content:"";
  position:absolute;
  inset: -120px -120px auto -120px;
  height: 280px;
  background: radial-gradient(closest-side at 50% 50%, rgba(218,0,26,.35), rgba(218,0,26,0) 70%);
  pointer-events:none;
}
.pg-form-banner{
  display:inline-block;
  padding: .75rem 1.25rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  font-family:'Bebas Neue', 'Barlow', sans-serif;
  font-weight: bold;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.pg-form-wrap{
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.pg-form-frame{
  width: 100%;
  height: 900px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.pg-form a{ color:#fff; text-decoration: underline; }
.pg-form a:hover{ text-decoration: none; }

/* =========================================================
   FOOTER
   ========================================================= */
.pg-footer{
  background: var(--pg-black);
  color: rgba(255,255,255,.78);
}
.pg-links{
  list-style:none; padding:0; margin:0;
  display:flex; gap:1.25rem; flex-wrap:wrap;
}
.pg-links a{ color: rgba(255,255,255,.78); text-decoration:none; }
.pg-links a:hover{ text-decoration: underline; color: var(--pg-yellow); }
.pg-footer-info{
  font-size: .88rem;
  opacity: .7;
  margin-top: .5rem;
}

/* =========================================================
   SUBPAGES (Pravila / Dobitnici / GDPR)
   ========================================================= */
.pg-page-hero{
  position:relative;
  overflow:hidden;
  background: var(--pg-red);
  color:#fff;
}
.pg-page-hero::before{
  content:"";
  position:absolute;
  inset:-160px -120px auto -120px;
  height:340px;
  background: radial-gradient(closest-side at 50% 50%, rgba(255,220,0,.20), rgba(255,220,0,0) 70%);
  pointer-events:none;
}
.pg-page-hero--dark{
  background: var(--pg-black);
}
.pg-page-hero--dark::before{
  background: radial-gradient(closest-side at 50% 50%, rgba(218,0,26,.30), rgba(218,0,26,0) 70%);
}

.pg-page-title{
  font-family:'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-size: clamp(1.8rem, 1.4vw + 1.4rem, 2.6rem);
  margin: 0;
}
.pg-page-sub{
  opacity:.85;
  margin:.35rem 0 0 0;
}
.pg-back{
  color:#fff;
  text-decoration:underline;
  opacity:.9;
}
.pg-back:hover{
  opacity:1;
  text-decoration:none;
  color: var(--pg-yellow);
}

.pg-page-card{
  background:#fff;
  border-radius:16px;
  padding: 2rem 1.5rem;
  box-shadow:0 18px 42px rgba(0,0,0,.10);
  border:1px solid rgba(10,10,16,.06);
}
.pg-page-card h2{
  font-family:'Bebas Neue', 'Barlow', sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing:.6px;
  font-size: 1.3rem;
  margin: 2rem 0 .75rem 0;
  color: var(--pg-red);
}
.pg-page-card h3{
  font-family:'Barlow', sans-serif;
  font-weight:normal;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size:1.05rem;
  margin: 1.5rem 0 .75rem 0;
  color: var(--pg-red-dark);
}
.pg-page-card p,
.pg-page-card li{
  font-size:1.03rem;
  line-height: 1.65;
}
.pg-page-card a{
  color: var(--pg-red);
  text-decoration:underline;
}
.pg-page-card a:hover{
  text-decoration:none;
}
.pg-page-card ul{
  padding-left: 1.25rem;
}

/* Dobitnici tablica */
.pg-table{
  width:100%;
  border-collapse:collapse;
}
.pg-table th,
.pg-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.pg-table th{
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:.9rem;
  background: var(--pg-gray-light);
}

.pg-note{ opacity:.8; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px){
  .pg-hero{ padding: 1.5rem 0 0 0; }
  .pg-kicker .title{ font-size: clamp(2.6rem, 7vw, 4rem); }
  .pg-prize-img{ max-height: 160px; }
}

@media (max-width: 575.98px){
  .pg-prize-card{ padding: 1rem .75rem; }
  .pg-prize-img{ max-height: 130px; }
  .pg-page-card{ padding: 1.25rem 1rem; }
}