/* ===========================================================
   UFAPR888 — Bootstrap 5 theme (cloned from idea-bet.live)
   Custom styles layered on top of Bootstrap 5.3
   =========================================================== */

:root{
  --pr-purple:        #7a18d6;
  --pr-purple-2:      #a531ff;
  --pr-purple-3:      #c66bff;
  --pr-purple-dark:   #5a0fa6;
  --pr-grad:          linear-gradient(180deg,#9b30ff 0%,#7a18d6 100%);
  --pr-grad-h:        linear-gradient(90deg,#a531ff 0%,#7a18d6 100%);
  --pr-lav:           #f1e6ff;
  --pr-lav-border:    #c9a6f5;
  --pr-ink:           #2b1450;
}

*{ -webkit-tap-highlight-color: transparent; }

body{
  font-family:'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:#2b2b2b;
  background:#ffffff;
  overflow-x:hidden;
}

a{ text-decoration:none; }
img{ max-width:100%; height:auto; }

/* ---------- generic helpers ---------- */
.text-purple{ color:var(--pr-purple)!important; }
.fw-900{ font-weight:800; }

.btn-pill{ border-radius:999px; }

.btn-grad{
  background:var(--pr-grad-h);
  color:#fff;
  border:none;
  border-radius:999px;
  font-weight:600;
  padding:.65rem 2rem;
  box-shadow:0 6px 18px rgba(122,24,214,.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-grad:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 10px 26px rgba(122,24,214,.45); }

/* glossy 3D pill button (used in dark hero sections) */
.btn-gloss{
  display:inline-block;
  font-weight:700;
  color:#fff;
  padding:.7rem 3rem;
  border-radius:999px;
  background:linear-gradient(180deg,#b15bff 0%,#7a18d6 55%,#5a0fa6 100%);
  border:3px solid #d9b6ff;
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 2px 4px rgba(255,255,255,.5);
  text-shadow:0 2px 3px rgba(0,0,0,.4);
}
.btn-gloss:hover{ color:#fff; filter:brightness(1.07); }

/* ---------- top bar ---------- */
.topbar{
  background:#fff;
  border-bottom:1px solid #eee;
  font-size:.9rem;
  position:relative;
  z-index:1040;
}
.topbar .sound-btn{
  background:none;border:none;color:var(--pr-purple);font-size:1.2rem;line-height:1;
}
.topbar .marquee{
  overflow:hidden; white-space:nowrap; flex:1;
}
.topbar .marquee span{
  display:inline-block; padding-left:100%;
  animation:marquee 18s linear infinite; color:#444; font-weight:500;
}
@keyframes marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
.topbar .flag{ width:34px; }
.btn-login{
  border:2px solid var(--pr-purple); color:var(--pr-purple); background:#fff;
  border-radius:999px; font-weight:600; padding:.4rem 1.4rem;
}
.btn-login:hover{ background:var(--pr-lav); color:var(--pr-purple); }
.btn-register{
  background:#111; color:#fff; border-radius:999px; font-weight:600; padding:.4rem 1.4rem;
}
.btn-register:hover{ background:#000; color:#fff; }

/* ---------- header / logo band ---------- */
.headerband{
  background:
    linear-gradient(135deg,#ffffff 0%,#f6edff 55%,#efe2ff 100%);
  position:relative;
}
.headerband::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(60deg,rgba(165,49,255,.06) 25%,transparent 25.5%,transparent 75%,rgba(165,49,255,.06) 75%),
    linear-gradient(120deg,rgba(165,49,255,.06) 25%,transparent 25.5%,transparent 75%,rgba(165,49,255,.06) 75%);
  background-size:46px 80px;
}
.headerband::after{ content:""; position:absolute; inset:0; background:transparent; }
.headerband .container{ position:relative; z-index:2; }
.headerband .logo{ max-height:90px; }
.welcome{ font-weight:600; color:#3a3a3a; }
.welcome .swap{ color:var(--pr-purple); font-weight:700; }
.line-btns img{ max-height:48px; }

/* ---------- navbar ---------- */
.pr-nav{
  background:var(--pr-grad-h);
  box-shadow:0 4px 14px rgba(122,24,214,.35);
}
.pr-nav .navbar-nav .nav-link{
  color:#fff; font-weight:600; padding:.55rem 1rem; border-radius:999px; transition:.15s;
}
.pr-nav .navbar-nav .nav-link:hover{ background:rgba(255,255,255,.18); }
.pr-nav .navbar-nav .nav-link.active{ background:#fff; color:var(--pr-purple); }
.pr-nav .dropdown-menu{ border:none; box-shadow:0 10px 30px rgba(0,0,0,.15); border-radius:12px; }
.pr-nav .dropdown-item:active{ background:var(--pr-purple); }
.pr-nav .navbar-toggler{ border-color:rgba(255,255,255,.6); }
.pr-nav .navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-width='2.5' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- hero carousel ---------- */
.hero .carousel-item img{ width:100%; object-fit:cover; }

/* ---------- section heading pill ---------- */
.section-pill{
  background:var(--pr-lav);
  border:2px solid var(--pr-lav-border);
  border-radius:14px;
  color:var(--pr-ink);
  font-weight:700;
  text-align:center;
  padding:.9rem 1rem;
  font-size:clamp(1.05rem,2.5vw,1.5rem);
  box-shadow:0 4px 12px rgba(122,24,214,.12);
}

.lead-title{ color:var(--pr-purple); font-weight:800; }
.body-text{ color:#555; line-height:1.9; }

/* ---------- intro / info boxes ---------- */
.info-box{
  border:2px solid var(--pr-lav-border);
  border-radius:16px;
  padding:1.5rem 1.75rem;
  background:#fff;
  box-shadow:0 6px 18px rgba(122,24,214,.08);
}

/* ---------- wave divider ---------- */
.wave-cta{
  background:var(--pr-grad);
  position:relative; padding:2.5rem 0 2rem;
  border-radius:0;
}
.wave-cta::before,.wave-cta::after{
  content:""; position:absolute; left:0; right:0; height:24px;
  background-repeat:repeat-x; background-size:60px 24px;
}
.wave-cta::before{ top:0;
  background-image:radial-gradient(circle at 30px 24px,#fff 16px,transparent 17px);
}
.wave-cta::after{ bottom:0;
  background-image:radial-gradient(circle at 30px 0,#fff 16px,transparent 17px);
}

/* ---------- cards (providers / promos) ---------- */
.pr-card{
  border:3px solid var(--pr-lav-border);
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 16px rgba(122,24,214,.12);
}
.pr-card:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(122,24,214,.28); }
.pr-card img{ width:100%; display:block; }

/* article card */
.article-card{
  border:2px solid var(--pr-lav-border); border-radius:16px; overflow:hidden;
  background:#fff; height:100%; box-shadow:0 6px 16px rgba(122,24,214,.10);
  transition:transform .18s;
}
.article-card:hover{ transform:translateY(-5px); }
.article-card img{ width:100%; height:170px; object-fit:cover; }
.article-card .p-3{ color:#333; font-weight:600; font-size:.98rem; }

/* ---------- live casino purple section ---------- */
.live-section{
  background:var(--pr-grad-h);
  color:#fff; border-radius:24px; overflow:hidden;
  box-shadow:0 12px 30px rgba(122,24,214,.35);
}
.live-section h2{ font-weight:800; }
.live-section .body-text{ color:#f3e9ff; }

/* ---------- certifications ---------- */
.cert img{ max-height:54px; width:auto; margin-bottom:.75rem; }
.cert p{ font-size:.82rem; color:#666; line-height:1.65; }

/* ---------- footer ---------- */
.pr-footer{
  background:linear-gradient(135deg,#ffffff 0%,#f6edff 60%,#ece0ff 100%);
  position:relative; padding-top:3rem;
}
.pr-footer::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(60deg,rgba(165,49,255,.06) 25%,transparent 25.5%,transparent 75%,rgba(165,49,255,.06) 75%),
    linear-gradient(120deg,rgba(165,49,255,.06) 25%,transparent 25.5%,transparent 75%,rgba(165,49,255,.06) 75%);
  background-size:46px 80px;
}
.pr-footer .container{ position:relative; z-index:2; }
.pr-footer h5{ color:var(--pr-purple); font-weight:700; margin-bottom:1rem; }
.pr-footer a{ color:#555; display:block; padding:.25rem 0; }
.pr-footer a:hover{ color:var(--pr-purple); }
.pr-footer .about{ color:#555; font-size:.92rem; line-height:1.8; }
.copyright{ background:var(--pr-grad-h); color:#fff; text-align:center; padding:.9rem; font-weight:500; }

/* ---------- floating elements ---------- */
.float-rail{
  position:fixed; left:0; top:120px; z-index:1035; width:88px;
  display:flex; flex-direction:column; gap:6px;
}
.float-rail img{ width:100%; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.2); }
.float-rail .closer,.float-mascot .closer{
  position:absolute; top:-10px; right:-10px; width:26px; height:26px; border-radius:50%;
  background:var(--pr-purple); color:#fff; border:none; font-size:.9rem; line-height:1; z-index:2;
}
.float-mascot{
  position:fixed; right:0; bottom:90px; z-index:1035; width:150px;
}
.float-mascot img{ width:100%; }

@media (max-width:991px){
  .float-rail{ display:none; }
  .float-mascot{ width:110px; bottom:80px; }
}

/* ---------- mobile bottom bar ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:1050;
  background:var(--pr-grad-h);
  display:none;
  box-shadow:0 -4px 14px rgba(0,0,0,.2);
}
.mobile-bar a{
  flex:1; text-align:center; color:#fff; padding:.5rem 0; font-size:.72rem; font-weight:500;
}
.mobile-bar a i{ display:block; font-size:1.25rem; margin-bottom:2px; }
@media (max-width:991px){
  .mobile-bar{ display:flex; }
  body{ padding-bottom:64px; }
}

/* small screens: header line buttons stack */
@media (max-width:575px){
  .headerband .logo{ max-height:60px; }
  .line-btns{ display:none; }
}