@charset "utf-8";
 :root{
    --paper:#FFFFFF;
    --cream:#FAF7F0;
    --card:#F5F1E6;
    --ink:#1B2233;
    --ink-soft:#3A4257;
    --gold:#C8912E;
    --gold-deep:#9C6E1E;
    --gold-tint:#FBEDCB;
    --slate:#6B7280;
    --line:rgba(27,34,51,0.10);
  }
  *{ box-sizing:border-box; }
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.font-display{ font-family:'Fraunces', serif; letter-spacing:-0.01em; color:var(--ink); }
  a{ text-decoration:none; }
  .eyebrow{
    font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-deep); font-weight:700;
  }
  .text-slate{ color:var(--slate) !important; }
  .text-ink{ color:var(--ink) !important; }

  .btn-gold{
    background:var(--gold); color:#fff; font-weight:700; border:none;
    padding:0.7rem 1.6rem; border-radius:999px; transition:.15s ease;
  }
  .btn-gold:hover{ background:var(--gold-deep); color:#fff; transform:translateY(-1px); }
  .btn-outline-ink{
    border:1px solid rgba(27,34,51,0.25); color:var(--ink);
    padding:0.68rem 1.5rem; border-radius:999px; font-weight:600; transition:.15s ease;
  }
  .btn-outline-ink:hover{ border-color:var(--gold); background:var(--gold-tint); color:var(--ink); }

  /* ---------- Navbar ---------- */
  .navbar-1{
    background:rgba(255,255,255,0.9);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .navbar-1 .nav-link{ color:var(--slate); font-weight:500; margin:0 0.6rem; }
  .navbar-1 .nav-link:hover, .navbar-1 .nav-link.active{ color:var(--ink); }
  .brand-mark{
    width:36px; height:36px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #FFEBB0, var(--gold) 55%, var(--gold-deep) 100%);
    display:inline-flex;
  }
	.navbar .navbar-brand img{
	 width: 150px!important;
		height: auto;
	}
  .brand-name{ font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem; color:var(--ink); }

  /* ---------- Ball motif ---------- */
  .ball{
    --size:44px; width:var(--size); height:var(--size); border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    font-family:'Fraunces', serif; font-weight:700; font-size:0.95rem; color:#fff;
    background:radial-gradient(circle at 32% 28%, #FFE9A8 0%, var(--gold) 45%, var(--gold-deep) 100%);
    box-shadow: inset 0 -5px 8px rgba(0,0,0,0.15), 0 5px 12px rgba(156,110,30,0.25);
    flex:0 0 auto;
  }
  .ball.ball-sm{ --size:38px; font-size:0.85rem; }
  .ball.ball-ghost{
    background:radial-gradient(circle at 32% 28%, #3A4257 0%, #1B2233 100%);
    color:#fff;
    box-shadow: inset 0 -5px 8px rgba(0,0,0,0.25), 0 5px 12px rgba(27,34,51,0.2);
  }

  /* ================= HERO SLIDER (image slider) ================= */
  #heroSlider{ margin-top:76px; }
  #heroSlider .carousel-item{
    height:60vh; min-height:460px;
    position:relative; overflow:hidden;
    background:var(--cream); /* fallback shown while image loads / if missing */
  }
  #heroSlider .carousel-item.active,
  #heroSlider .carousel-item-next,
  #heroSlider .carousel-item-prev{
    display:flex;
    align-items:center;
  }

  .slide-bg-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
  }
  .slide-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(11,15,26,0.78) 0%, rgba(11,15,26,0.55) 42%, rgba(11,15,26,0.18) 75%, rgba(11,15,26,0.05) 100%);
    z-index:1;
  }
  #heroSlider .container{
    position:relative;
    z-index:2;
  }

  #heroSlider h1{
    font-size:clamp(2.1rem, 4.4vw, 3.4rem);
    line-height:1.08; font-weight:600;
    color:#fff;
  }
  #heroSlider .slide-lead{ color:rgba(255,255,255,0.82); font-size:1.05rem; max-width:32rem; }
  #heroSlider .eyebrow{ color:var(--gold); }
  #heroSlider .carousel-indicators{ bottom:1.75rem; }
  #heroSlider .carousel-indicators [data-bs-target]{
    width:8px; height:8px; border-radius:50%; background-color:var(--gold-deep);
    opacity:.35; border:none;
  }
  #heroSlider .carousel-indicators .active{ opacity:1; }
  #heroSlider .carousel-control-prev, #heroSlider .carousel-control-next{ width:5%; opacity:.7; }
  #heroSlider .carousel-control-prev-icon, #heroSlider .carousel-control-next-icon{
    width:2.2rem; height:2.2rem;
    background-color:rgba(27,34,51,0.6);
    border-radius:50%; padding:0.5rem; background-size:1.1rem;
  }

  section{ padding:4.5rem 0; }
  .section-cream{ background:var(--cream); }


  /* ================= TICKET TYPES CAROUSEL ================= */
  .ticket-viewport{
    overflow:hidden;
    --ticket-gap:1.25rem;
    --cards-per-view:1;
  }
  @media (min-width:576px){ .ticket-viewport{ --cards-per-view:2; } }
  @media (min-width:992px){ .ticket-viewport{ --cards-per-view:3; } }
  @media (min-width:1200px){ .ticket-viewport{ --cards-per-view:4; } }

  .ticket-track{
    display:flex;
    gap:var(--ticket-gap);
    transition:transform .45s cubic-bezier(0.22,1,0.36,1);
    will-change:transform;
  }
  .ticket-card{
    flex:0 0 calc((100% - var(--ticket-gap) * (var(--cards-per-view) - 1)) / var(--cards-per-view));
    background:var(--paper);
    border:1px solid var(--line); border-radius:16px; padding:1.6rem;
    
  }
  /*.ticket-card:hover{
    transform:translateY(-4px);
    border-color:var(--gold);
    box-shadow:0 14px 28px rgba(27,34,51,0.08);
  }*/
  .ticket-icon{
    width:48px; height:48px; border-radius:12px;
    background:var(--gold-tint); color:var(--gold-deep);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:1.25rem; margin-bottom:1rem;
  }
  .ticket-price{ font-family:'Fraunces', serif; font-size:1.4rem; font-weight:600; color:var(--gold-deep); }

  .scroller-controls{ display:flex; gap:0.6rem; }
  .scroller-btn{
    width:42px; height:42px; border-radius:50%;
    border:1px solid var(--line); background:var(--paper); color:var(--ink);
    display:inline-flex; align-items:center; justify-content:center; transition:.15s ease;
  }
  .scroller-btn:hover{ border-color:var(--gold); color:var(--gold-deep); }
  .scroller-btn:disabled{
    opacity:0.35;
    cursor:not-allowed;
    border-color:var(--line);
    color:var(--ink);
  }
  .scroller-btn:disabled:hover{ border-color:var(--line); color:var(--ink); }

  /* ================= DRAW CARDS ================= */
  .card-draw{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:16px;
    padding:1.75rem;
    height:100%;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .card-draw:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(27,34,51,0.08); }
  .draw-amount{ font-family:'Fraunces', serif; font-size:1.8rem; font-weight:600; color:var(--gold-deep); }
  .countdown{ display:flex; gap:0.6rem; }
  .countdown .unit{
    background:var(--cream); border:1px solid var(--line); border-radius:8px;
    padding:0.4rem 0.65rem; text-align:center; min-width:52px;
  }
  .countdown .unit .num{ font-family:'Fraunces', serif; font-size:1.1rem; font-weight:600; color:var(--ink); display:block; }
  .countdown .unit .lbl{ font-size:0.62rem; color:var(--slate); text-transform:uppercase; letter-spacing:0.08em; }

  /* ---------- Trust strip ---------- */
  .trust-icon{
    width:52px; height:52px; border-radius:50%;
    background:var(--gold-tint); color:var(--gold-deep);
    display:inline-flex; align-items:center; justify-content:center; font-size:1.4rem;
  }

  /* ---------- Results ---------- */
  .result-row{
    background:var(--paper); border:1px solid var(--line);
    border-radius:16px; padding:1.5rem;
  }
  .result-balls{ display:flex; flex-wrap:wrap; gap:0.5rem; }

  /* ---------- Checker ---------- */
  .checker-card{
    background:var(--paper); border:1px solid var(--line);
    border-radius:20px; padding:2.5rem;
  }
  .form-control, .form-select{
    background:var(--cream); border:1px solid var(--line); color:var(--ink);
    padding:0.65rem 0.9rem; border-radius:10px;
  }
  .form-control:focus, .form-select:focus{
    background:var(--paper); color:var(--ink); border-color:var(--gold);
    box-shadow:0 0 0 3px var(--gold-tint);
  }
  .form-control::placeholder{ color:var(--slate); }
  .form-label{ color:var(--slate); font-size:0.85rem; font-weight:500; margin-bottom:0.4rem; }

  /* ---------- App CTA ---------- */
  .cta-band{
    background:linear-gradient(135deg, var(--cream) 0%, #F1E7CE 100%);
    border-radius:24px; border:1px solid var(--line); padding:3.5rem;
  }

  /* ---------- Footer ---------- */
  footer{ background:var(--cream); border-top:1px solid var(--line); padding:3.5rem 0 1.5rem; }
  footer a.footer-link{ color:var(--slate); display:block; margin-bottom:0.6rem; font-size:0.92rem; }
  footer a.footer-link:hover{ color:var(--gold-deep); }
  footer h6{ color:var(--ink); font-size:0.85rem; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:1.1rem; }

  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
    outline:2px solid var(--gold); outline-offset:2px;
  }

  /* ---------- Floating WhatsApp button ---------- */
  .whatsapp-float{
    position:fixed;
    right:1.5rem;
    bottom:1.5rem;
    z-index:1050;
    width:58px; height:58px;
    border-radius:50%;
    background:#25D366;
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:1.7rem;
    box-shadow:0 10px 24px rgba(37,211,102,0.4);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .whatsapp-float:hover{
    color:#fff;
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 14px 30px rgba(37,211,102,0.5);
  }
  .whatsapp-float::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    background:#25D366;
    animation:wa-pulse 2.2s ease-out infinite;
    z-index:-1;
  }
  @keyframes wa-pulse{
    0%{ transform:scale(1); opacity:0.55; }
    100%{ transform:scale(1.7); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .whatsapp-float::before{ animation:none; }
  }
.prize-list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.5rem 1.25rem;
  font-size:0.875rem;
}
.prize-list li{
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--slate);
}
.prize-list-heading{
  font-weight:600;
  color:var(--ink);
  grid-column:1 / -1;
}
.prize-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold);
  flex-shrink:0;
}

.btn-whatsapp{
    background:#25D366; color:#fff; font-weight:700; border:none;
    padding:0.7rem 1.6rem; border-radius:999px; transition:.15s ease;
  }
  .btn-whatsapp:hover{ background:#1FB855; color:#fff; transform:translateY(-1px); }

/* ---------- Daily tickets ---------- */
  .daily-card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    height:100%;
    display:flex;
    flex-direction:column;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .daily-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 30px rgba(27,34,51,0.10);
  }
  .daily-card-img{
    position:relative;
    height:170px;
    overflow:hidden;
    background:var(--cream);
  }
  .daily-card-img img{
    width:100%; height:100%;
    object-fit:cover;
    transition:transform .4s ease;
  }
  .daily-card:hover .daily-card-img img{ transform:scale(1.06); }
  .daily-day-badge{
    position:absolute; top:12px; left:12px;
    color:#fff; font-size:0.72rem; font-weight:700;
    padding:0.3rem 0.75rem; border-radius:999px;
    letter-spacing:0.02em;
  }
  .daily-card-body{
    padding:1.4rem;
    flex:1;
    display:flex;
    flex-direction:column;
  }
  .daily-prize-pill{
    background:linear-gradient(135deg, var(--gold), var(--gold-deep));
    color:#fff; font-weight:700; text-align:center;
    padding:0.5rem; border-radius:20px; margin:0.9rem 0;
  }
  .daily-meta{
    display:flex; align-items:center; gap:0.4rem;
    color:var(--slate); font-size:0.83rem; margin-bottom:1.1rem;
  }
