/* ====================================
   Root variables
   ==================================== */
:root {
  --yellow: #f7ec06;
  --pink:   #ff66c4;
  --blue:   #38b6ff;
  --ink:    #0a1430;

  /* shared content width for slider + sections */
  --page-width: min(1300px, 96vw);
  --page-trans: 1;
}

/* ====================================
   Global
   ==================================== */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: auto;
  min-height: 100%;
  overflow-y: auto;   /* page can scroll */
  overflow-x: hidden; /* no sideways scroll */
  font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  
}



.section {
  padding: 28px 0;
}

.section--no-pad {
  padding: 0;
}

/* ====================================
   Navigation
   ==================================== */
.nav--gradient {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  color: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}

.logo-img {
  height: 42px;
  width: auto;
  border-radius: 6px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.brand-text {
  font-weight: 800;
  letter-spacing: 0.2px;
}

.nav nav {
  display: flex;
  gap: 14px;
}

.nav nav a {
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
}

.nav nav a:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ====================================
   Buttons
   ==================================== */
.btn {
  background: var(--yellow);
  color: #111;
  border: none;
  padding: 8px 12px;
  border-radius: 12px;
  text-decoration: none;
  display: inline-block;
  font-weight: 800;
}

.btn-outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.95);
}

/* ====================================
   Hero Swiper
   ==================================== */
.hero-swiper {
  width: var(--page-width);
  height: 420px;
  margin: 14px auto;
  display: block;
  border-radius: 22px;
  overflow: hidden;
  background: #fbfcdc;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
   opacity: var(--page-trans);
}

.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide {
  height: 100%;
}

.hero-swiper .swiper-slide {
  display: grid;
  place-items: center;
  background: #fbfcdc;
}

.hero-swiper .swiper-slide img,
.slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  
}

/* arrows */
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next {
  color: #111;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
  top: 50%;
  transform: translateY(-50%);
}

.hero-swiper .swiper-button-prev {
  left: 10px;
}

.hero-swiper .swiper-button-next {
  right: 10px;
}

.hero-swiper .swiper-button-prev:after,
.hero-swiper .swiper-button-next:after {
  font-size: 18px;
  font-weight: 900;
}

/* bullets */
.hero-swiper .swiper-pagination {
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: auto !important;
}

.hero-swiper .swiper-pagination-bullet {
  background: rgba(0, 0, 0, 0.25);
}

.hero-swiper .swiper-pagination-bullet-active {
  background: #111;
}

/* ====================================
   Color slides
   ==================================== */
.slide-bg {
  display: grid;
  place-items: center;
  min-height: 320px;
}

.slide-bg--pink {
  background: linear-gradient(135deg, var(--pink), #ff9edb);
}

.slide-bg--blue {
  background: linear-gradient(135deg, var(--blue), #8ad4ff);
}

.slide-bg--yellow {
  background: linear-gradient(135deg, var(--yellow), #fff48a);
}

.slide-content {
  text-align: center;
  color: #0b1b3b;
  padding: 36px 10px;
}

.slide-title {
  font-size: 42px;
  margin: 6px 0;
}

.pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

.pill--blue {
  background: var(--blue);
}

.pill--pink {
  background: var(--pink);
}

.pill--navy {
  background: #0b1b3b;
}

.highlight-yellow {
  color: var(--yellow);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}

/* ====================================
   Grid & Cards
   ==================================== */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

}

.card {
  background: #fff;
  border: 1px solid #eaeef3;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  margin-right: 10px;
  
  padding: 1px;
}

.media-card {
	opacity: var(--page-trans); 
  padding: 0;
}

.media-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* cards below slider full width */
.below-slider > .container {
  width: var(--page-width);
 
  max-width: none;
  margin-inline: auto;
  padding-left: 0;
  padding-right: 0;
   height: auto;
  

   
}

/* ====================================
   Iframe cards
   ==================================== */
.iframe-card {
  padding: 0;
  overflow: hidden;
}

.iframe-wrap {
  position: relative;
  padding-top: 125%;
}

.iframe-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 16px;
  background: #fff;
}

/* fixed frame with scaled content */
.results-frame-wrapper {
  width: 500px;
  height: 550px;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
background: transparent;
   border-radius: 16px;
    opacity: var(--page-trans);   /* between 0 and 1 — adjust transparency */
}

.results-frame-wrapper iframe {
  width: 205%;
  height: 215%;
  border: none;
  transform: translateX(-70px) translatey(0px) scale(0.625);
  transform-origin: top left;
  
}

/* ====================================
   Footer
   ==================================== */
.footer {
  background: linear-gradient(90deg, var(--blue), var(--pink));
  color: #fff;
  margin-top: 24px;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.footer .links {
  display: flex;
  gap: 12px;
}

.footer .links a {
  color: #fff;
  text-decoration: none;
}

.footer .links a:hover {
  text-decoration: underline;
}

/* ====================================
   Responsive
   ==================================== */
@media (max-width: 980px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .iframe-wrap {
    padding-top: 160%;
  }

  .hero-swiper {
    width: 100%;
    height: 260px;
    margin: 10px auto;
    border-radius: 0;
    box-shadow: none;
  }

  .results-frame-wrapper {
    width: 100%;
    max-width: 510px;
  }
  .card {
    width: 100%;
    max-width: 510px;
  }
  
}

/* ====================================
   slider
   ==================================== */

/* MOBILE: make slider images fully fit the screen width */
@media (max-width: 768px) {
  /* let the slider stretch to full width of the screen */
  

  .hero-swiper {
    width: 100%;
    height: auto;          /* no fixed height */
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto 12px;
	margin-top: 16px;
  }

  .hero-swiper .swiper-wrapper,
  .hero-swiper .swiper-slide {
    height: auto;          /* let slides grow with image */
  }

  .hero-swiper .swiper-slide {
    display: block;
    background: transparent;
  }

  /* KEY PART: image scales nicely, no cropping */
  .hero-swiper .slide-img,
  .hero-swiper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;   /* show full image */
  }
  
  .results-frame-wrapper {
  width: 100%;
  height: 400px;
  overflow: hidden;
  border: 1px solid #ccc;
  position: relative;
background: transparent;
   border-radius: 16px;
    opacity: var(--page-trans);   /* between 0 and 1 — adjust transparency */
}

.results-frame-wrapper iframe {
  width: 310%;
  height: 300%;
  border: none;
  transform: translateX(-78px) translatey(0px) scale(0.46);
  transform-origin: top left;
  
}
  
  
}
/* Card slider sizing */
.media-card .media-swiper {
  width: 100%;
  aspect-ratio: 4 / 3;   /* change to 16/9 if you prefer */
  border-radius: 16px;
  overflow: hidden;
}

/* Ensure slides fill and crop gracefully */
.media-card .media-swiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.media-card .media-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* use contain if you want full image without crop */
  display: block;
}

/* Tidy controls for small card */
.media-card .media-swiper .swiper-button-prev,
.media-card .media-swiper .swiper-button-next {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.media-card .media-swiper .swiper-button-prev:after,
.media-card .media-swiper .swiper-button-next:after {
  font-size: 16px; font-weight: 900; color: #111;
}

.media-card .media-swiper .swiper-pagination-bullet {
  background: rgba(0,0,0,0.3);
}
.media-card .media-swiper .swiper-pagination-bullet-active {
  background: #111;
}

/* Mobile: keep it full width */
@media (max-width: 768px) {
  .media-card .media-swiper { aspect-ratio: 16 / 9; } /* optional tweak */
}

/* ================================
   MEDIA CARD (left/right) – slider/image fill
   ================================ */
.card.media-card{ padding:0; display:flex; }

.card.media-card .mcs{ width:100%; height:100%; aspect-ratio:auto; border-radius:16px; overflow:hidden; }
.card.media-card .mcs-slide{ position:absolute; inset:0; }
.card.media-card .mcs-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Swiper version inside media-card (if used) */
.media-card .media-swiper,
.media-card .media-swiper .swiper-wrapper,
.media-card .media-swiper .swiper-slide{
  height:100%; border-radius:16px; overflow:hidden;
}
.media-card .media-swiper .swiper-slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Fallback: plain <img> should also cover */
.card.media-card > img.media-img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:768px){
  .card.media-card{ display:block; }
  .card.media-card .mcs,
  .media-card .media-swiper,
  .card.media-card > img.media-img{
    height:56vw;
    min-height:520px;
    max-height:420px;
  }
}

@media (max-width:980px){
  .grid-3{ display:flex; flex-direction:column; gap:20px; }
  .results-frame-wrapper{ order:1; }
  .grid-3 > .media-card:first-of-type{ order:2; }
  .grid-3 > .media-card:last-of-type{ order:3; }
  .grid-3 > *{ width:100%; }
}
  .media-card .mcs {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
  }
  .media-card .mcs-slide {
    position: absolute; inset: 0;
    opacity: 0; transition: opacity .4s ease-in-out;
  }
  .media-card .mcs-slide.is-active { opacity: 1; }
  .media-card .mcs-slide img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .media-card .mcs-nav {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: space-between;
    pointer-events: none;
  }
  .media-card .mcs-btn {
    pointer-events: all;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.9); border: 0; cursor: pointer;
    box-shadow: 0 6px 14px rgba(0,0,0,.15);
    display: grid; place-items: center;
    margin: 8px;
  }
  .media-card .mcs-dots {
    position: absolute; left: 0; right: 0; bottom: 6px;
    display: flex; gap: 6px; justify-content: center;
  }
  .media-card .mcs-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(0,0,0,.3);
  }
  .media-card .mcs-dot.is-active { background: #111; }
  @media (max-width:768px){ .media-card .mcs { aspect-ratio: 16 / 9; } }


 .winning-grid-fixed {
    display: grid;
    gap: 20px;
    /* keep whatever grid layout you already had, or e.g.: */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .img-card {
    height: 450px;          /* show only 375px height */
    overflow: hidden;       /* hide the rest of the image */
  }

  .img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* fill the box */
    object-position: top;   /* keep the top part visible */
    display: block;
  }

/* FIX: 2 images side by side, total width 900px (desktop) */
.winning-grid-fixed {
    max-width: 1300px;    /* responsive: max 900px */
    width: 100%;         /* full width on smaller screens */
    margin: 0 auto;      /* center */
    display: flex;
    gap: 20px;
}

/* make the two cards equal width */
.img-card {
    flex: 1;
    padding: 0;
    overflow: hidden;
}

/* images auto-scale */
.img-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
	
}

/* MOBILE responsive: stack images */
@media (max-width: 768px) {
  .winning-grid-fixed {
      flex-direction: column;
      gap: 16px;
  }
}

/* ================================
   RAFFLE SECTION (scoped)
   ================================ */
.raffle-section{
  padding:32px 16px 40px;
  background:
    radial-gradient(900px 500px at 10% 10%, #6a2bf5 0%, transparent 60%),
    radial-gradient(700px 500px at 90% 0%, #ff6cab 0%, transparent 60%),
    linear-gradient(135deg, #4111a3, #f54ea2 50%, #ff7676);
  color:#1c1c1c;
  display:flex; justify-content:center;
}
.raffle-wrapper{ width:100%; max-width:900px; margin:0 auto; position:relative; }
.raffle-float{ position:absolute; border-radius:50%; filter:blur(20px); opacity:.5; z-index:0; pointer-events:none; }
.raffle-f1{ width:180px; height:180px; background:#ffdd57; top:-50px; left:-40px; transform:rotate(10deg); }
.raffle-f2{ width:220px; height:220px; background:#00e1ff; bottom:-60px; right:-30px; transform:rotate(-8deg); }

.raffle-logo{ display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.2); margin-bottom:14px; position:relative; z-index:1; }
.raffle-logo-text{ font-size:26px; font-weight:700; letter-spacing:.5px; }

.raffle-card{
  position:relative; z-index:1; background:#fff; border-radius:18px; padding:24px 22px 26px;
  box-shadow:0 20px 40px rgba(0,0,0,.15); overflow:hidden;
}
.raffle-card:before{
  content:""; position:absolute; inset:-2px; border-radius:20px; padding:2px;
  background:linear-gradient(90deg,#00d4ff,#ffe600);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; z-index:0; pointer-events:none;
}
.raffle-card h2{ margin:0 0 4px; text-align:center; font-weight:700; font-size:24px; }
.raffle-subtitle{ text-align:center; color:#6b7280; margin-bottom:20px; font-size:14px; }

.raffle-form{ display:grid; gap:16px; grid-template-columns:1fr 1fr; position:relative; z-index:1; }
.raffle-field{ display:flex; flex-direction:column; gap:6px; }
.raffle-field label{ font-weight:600; font-size:14px; color:#111827; }
.raffle-field input,
.raffle-field textarea{
  border:1px solid #e5e7eb; border-radius:12px; padding:10px 12px; font-size:16px; outline:none;
  transition:.2s border,.2s box-shadow; background:#fff;
}
.raffle-field input:focus,
.raffle-field textarea:focus{
  border-color:#7c3aed; box-shadow:0 0 0 4px rgba(124,58,237,.12);
}
.raffle-field textarea{
  min-height:120px;
  resize:vertical;
}
.raffle-span-2{ grid-column:span 2; }

.raffle-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; outline:none; cursor:pointer;
  background:linear-gradient(90deg,#7c3aed,#06b6d4); color:#fff; font-weight:700; font-size:16px;
  padding:10px 18px; border-radius:12px; box-shadow:0 10px 20px rgba(124,58,237,.25);
  transition:transform .05s ease-in-out, box-shadow .2s;
}
.raffle-btn:hover{ transform:translateY(-1px); }
.raffle-btn:active{ transform:translateY(0); box-shadow:0 6px 12px rgba(124,58,237,.20); }

.raffle-alert{ border-radius:12px; padding:10px 12px; font-size:14px; margin-bottom:14px; display:flex; align-items:flex-start; gap:8px; position:relative; z-index:1; }
.raffle-alert.ok{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.raffle-alert.bad{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
.raffle-tiny{ color:#6b7280; font-size:12px; margin-top:8px; text-align:left; }

/* ticket + scan button row */
.ticket-input-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.ticket-input-row textarea{
  flex:1;
}
.scan-btn{
  border:none;
  outline:none;
  cursor:pointer;
  border-radius:12px;
  padding:9px 12px;
  font-size:14px;
  font-weight:600;
  background:linear-gradient(90deg,#10b981,#22c55e);
  color:#fff;
  box-shadow:0 6px 14px rgba(16,185,129,.35);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.scan-btn span{
  font-size:16px;
}
.scan-btn:hover{
  filter:brightness(1.05);
}
.scan-btn:active{
  box-shadow:0 4px 10px rgba(16,185,129,.25);
}

@media (max-width:720px){
  .raffle-form{ grid-template-columns:1fr; }
  .raffle-span-2{ grid-column:auto; }
  .raffle-logo-text{ font-size:20px; }
  .raffle-section{ padding-inline:12px; }
}

/* scanner modal */
.scanner-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}
.scanner-modal-inner{
  background:#111827;
  border-radius:18px;
  padding:16px;
  width:90%;
  max-width:420px;
  color:#f9fafb;
  box-shadow:0 20px 40px rgba(0,0,0,.4);
}
.scanner-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.scanner-modal-title{
  font-size:16px;
  font-weight:600;
}
.scanner-close-btn{
  border:none;
  background:transparent;
  color:#f9fafb;
  font-size:20px;
  cursor:pointer;
}
#qr-reader{
  width:100%;
  min-height:260px;
  background:#000;
  border-radius:12px;
  overflow:hidden;
}

/* custom scan-more dialog */
.scan-more-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
color : #000000;
}
.scan-more-inner{
  background:#ffffff;
  border-radius:16px;
  padding:18px 20px;
  max-width:300px;
  width:90%;
  box-shadow:0 18px 40px rgba(0,0,0,.3);
  text-align:center;
}
.scan-more-text{
  font-size:16px;
  font-weight:600;
  margin-bottom:14px;
}
.scan-more-actions{
  display:flex;
  gap:10px;
  justify-content:center;
}
.scan-more-btn{
  flex:1;
  border:none;
  border-radius:10px;
  padding:8px 10px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.scan-more-btn.primary{
  background:linear-gradient(90deg,#10b981,#22c55e);
  color:#ffffff;
}
.scan-more-btn.secondary{
  background:#e5e7eb;
  color:#111827;
}

/* RESULT MODAL */
.result-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:11000;
color : #000000;
}
.result-modal-inner{
  background:#ffffff;
  border-radius:18px;
  padding:18px 20px 16px;
  max-width:420px;
  width:92%;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
  font-family:inherit;
}
.result-modal-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
  text-align:center;
}
.result-modal-body{
  max-height:340px;
  overflow-y:auto;
  padding-right:4px;
}
.result-group{
  margin-bottom:12px;
}
.result-group-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:4px;
}
.result-group.success .result-group-title{
  color:#16a34a;
}
.result-group.error .result-group-title{
  color:#b91c1c;
}
.result-item{
  display:flex;
  align-items:flex-start;
  gap:6px;
  font-size:14px;
  padding:4px 0;
}
.result-item-icon{
  flex:0 0 18px;
  font-size:16px;
  line-height:1.1;
}
.result-item-text{
  flex:1;
}
.result-ticket{
  font-weight:700;
}
.result-modal-footer{
  text-align:center;
  margin-top:10px;
}
.result-modal-close-btn{
  border:none;
  border-radius:999px;
  padding:8px 18px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  background:linear-gradient(90deg,#7c3aed,#06b6d4);
  color:#ffffff;
  box-shadow:0 8px 18px rgba(124,58,237,.25);
}
.result-modal-close-btn:hover{
  filter:brightness(1.05);
}

.hide{ display:none !important; }

/* BOTIKA card styles */
.winning-info-card .botika-schedule{ padding:16px 18px; }
.winning-info-card .bs-head{ text-align:center; margin-bottom:8px; }
.winning-info-card .bs-title{ margin:0 0 6px; font-size:22px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#14a3df; }
.winning-info-card .bs-note{ margin:0 0 12px; color:#7b8390; font-size:14px; }

.winning-info-card .bs-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:980px){ .winning-info-card .bs-grid{ grid-template-columns:1fr; } }

.winning-info-card .bs-badges{ margin-bottom:6px; }
.winning-info-card .bs-badge{ display:inline-flex; align-items:center; border:1px solid #cfe7f5; border-radius:3px; overflow:hidden; font-weight:700; font-size:13px; letter-spacing:.04em; color:#0c6ea1; }
.winning-info-card .bs-badge .b-left{ padding:7px 10px; background:#e8f6fd; }
.winning-info-card .bs-badge .b-right{ padding:7px 10px; background:#14a3df; color:#fff; }

.winning-info-card .bs-section-title{ color:#14a3df; font-weight:800; letter-spacing:.05em; text-transform:uppercase; margin:6px 0 8px; }
.winning-info-card .bs-content p{ margin:6px 0; color:#000000;font-weight:800;font-size:16px; }
.winning-info-card .bs-content strong{ font-weight:700; color:#000000;font-size:16px;  }
.winning-info-card .bs-muted{ color:#7b8390; }

.winning-info-card .iconline{ display:flex; align-items:center; gap:8px; margin:6px 0; color:#111827; }
.winning-info-card .ico{ width:18px; height:18px; flex:0 0 18px; background-size:contain; background-position:center; background-repeat:no-repeat; opacity:.9; }
.winning-info-card .ico.ico-pin{   background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="%2314a3df"><path d="M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5S10.62 6.5 12 6.5s2.5 1.12 2.5 2.5S13.38 11.5 12 11.5z"/></svg>'); }
.winning-info-card .ico.ico-phone{ background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="%2314a3df"><path d="M6.62 10.79a15.051 15.051 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V21a1 1 0 01-1 1C10.07 22 2 13.93 2 3a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z"/></svg>'); }

.winning-info-card .bs-divider{ height:1px; background:#eef2f6; margin:14px 0 10px; }
.winning-info-card .bs-seeall{ display:inline-flex; align-items:center; gap:6px; color:#14a3df; font-weight:700; letter-spacing:.04em; text-transform:uppercase; text-decoration:none; }
.winning-info-card .bs-seeall:after{ content:"›"; font-size:18px; line-height:1; }

/* Center the 3 blocks below the slider on mobile */
@media (max-width:980px){
  .grid-3{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;      /* center all three blocks horizontally */
  }

  /* keep your order: iframe in the middle, cards above/below */
  .results-frame-wrapper{ order: 2; }
  .grid-3 > .media-card:first-of-type{ order: 1; }
  .grid-3 > .media-card:last-of-type{ order: 3; }

  /* each block centered with a max width */
  .grid-3 > *{
    width: 100%;
    max-width: 520px;         /* adjust if you want them wider/narrower */
    margin: 0 auto;
  }
}