/* ============================================================
   LUFFYBET — Bootstrap 5 rebuild
   Custom theme styles
   ============================================================ */
:root{
  --lb-maroon:#7a0020;
  --lb-maroon-dark:#640035;
  --lb-pink:#e3007d;
  --lb-red:#f5044e;
  --lb-green:#1ec51e;
  --lb-line:#06c755;
}

*{ box-sizing:border-box; }

body{
  font-family:'Kanit',sans-serif;
  background-color:var(--lb-maroon);
  color:#fff;
  margin:0;
  overflow-x:hidden;
}

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

/* ---------- Top provider strip (wood) ---------- */
.top-strip{
  background:url('../img/2022_03_wood02bg.webp') center/cover;
  padding:.35rem 0;
}
.top-strip .provider-icons{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1rem,4vw,3rem); flex-wrap:wrap;
}
.top-strip .provider-icons img{ height:46px; width:auto; transition:transform .2s; }
.top-strip .provider-icons img:hover{ transform:translateY(-3px) scale(1.08); }

/* ---------- Navbar ---------- */
.lb-navbar{
  background:linear-gradient(90deg,#c8005f 0%,#e3007d 35%,#f5044e 100%);
  box-shadow:0 3px 14px rgba(0,0,0,.4);
}
.lb-navbar .navbar-brand img{ height:56px; }
.lb-navbar .nav-link{
  color:#fff !important; font-weight:500; font-size:1rem;
  padding:.4rem .85rem !important; transition:color .15s;
}
.lb-navbar .nav-link:hover,.lb-navbar .nav-link.active{ color:#ffd84d !important; }
.lb-navbar .dropdown-menu{ border:none; }
.btn-img{ padding:0; border:none; background:none; }
.btn-img img{ height:46px; transition:transform .15s, filter .15s; }
.btn-img img:hover{ transform:scale(1.05); filter:brightness(1.07); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:radial-gradient(circle at 50% 40%, #ff6b66 0%, #f5044e 55%, #8c0033 100%);
  overflow:hidden;
  padding:2.5rem 0 3rem;
}
.hero .hero-char{
  position:absolute; bottom:0; max-height:92%; z-index:1;
  pointer-events:none; user-select:none;
}
.hero .hero-char.left{ left:0; }
.hero .hero-char.right{ right:0; }
.hero-inner{ position:relative; z-index:2; }
.hero-logo{ max-width:260px; margin:0 auto 1rem; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.hero-title{ font-weight:700; font-size:clamp(1.2rem,3vw,1.7rem); text-shadow:0 2px 6px rgba(0,0,0,.45); }
.hero-sub{ font-weight:300; margin-bottom:1.4rem; text-shadow:0 1px 4px rgba(0,0,0,.4); }

.login-card{
  max-width:420px; margin:0 auto;
}
.login-card .input-group-text{
  background:#fff; border:none; color:var(--lb-red); border-radius:30px 0 0 30px; padding:0 .9rem;
}
.login-card .form-control{
  border:none; border-radius:0 30px 30px 0; padding:.7rem 1rem; font-size:1rem;
}
.login-card .form-control:focus{ box-shadow:none; }
.forgot{ color:#fff; font-size:.9rem; display:inline-flex; align-items:center; gap:.3rem; }
.forgot:hover{ color:#ffd84d; }
.btn-line{
  background:var(--lb-line); color:#fff; font-weight:600; border-radius:30px;
  width:100%; padding:.7rem; border:none; display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.btn-line:hover{ background:#05b14c; color:#fff; }

/* ---------- Marquee ---------- */
.marquee{
  background:url('../img/2022_03_imgimgbg-provider-purple-1-result.webp') center/cover;
  padding:1rem 0; overflow:hidden;
}
.marquee-track{ display:flex; gap:2.2rem; width:max-content; animation:scroll-x 40s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track img{ height:62px; width:auto; filter:drop-shadow(0 3px 6px rgba(0,0,0,.3)); }
@keyframes scroll-x{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- Generic content section ---------- */
.section{ position:relative; padding:3rem 0; background-size:cover; background-position:center; }
.section .overlay{ position:absolute; inset:0; background:rgba(40,0,20,.55); z-index:0; }
.section .container{ position:relative; z-index:1; }
.section-title{ font-weight:700; font-size:clamp(1.3rem,3.4vw,2rem); text-shadow:0 2px 8px rgba(0,0,0,.5); }
.section p{ line-height:1.9; font-weight:300; }

/* ---------- Promotion ---------- */
.promo{
  background:url('../img/2023_11_DiamondCascade.webp') center/cover;
  position:relative; padding:3rem 0;
}
.promo-head{ max-width:340px; }
.feature-card img{ border-radius:14px; box-shadow:0 6px 16px rgba(0,0,0,.3); transition:transform .2s; }
.feature-card img:hover{ transform:translateY(-6px); }
.promo-list-img{ filter:drop-shadow(0 10px 24px rgba(0,0,0,.4)); }
.deco-gif{ position:absolute; z-index:3; pointer-events:none; }

/* ---------- Provider grid (games) ---------- */
.provider-grid img{
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:.4rem; transition:transform .15s, border-color .15s;
}
.provider-grid img:hover{ transform:translateY(-4px); border-color:var(--lb-pink); }

/* ---------- Footer ---------- */
.footer{ background:var(--lb-maroon); position:relative; padding:3rem 0 1.5rem; overflow:hidden; }
.footer h5{ color:#ffd84d; font-weight:600; }
.footer a{ color:#f3d6e0; display:inline-block; padding:.2rem 0; }
.footer a:hover{ color:#fff; }
.footer .social img{ height:42px; margin-right:.5rem; }
.footer .bank-img{ max-width:320px; }
.copyright{ background:var(--lb-maroon-dark); text-align:center; padding:.9rem 1rem; font-size:.9rem; }

/* ---------- Floating bottom nav (mobile) ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:1030;
  display:none; justify-content:space-around; align-items:center;
  background:linear-gradient(90deg,#c8005f,#f5044e); padding:.3rem .2rem;
  box-shadow:0 -3px 12px rgba(0,0,0,.4);
}
.bottom-nav a{ flex:1; text-align:center; color:#fff; font-size:.7rem; }
.bottom-nav a img{ height:34px; display:block; margin:0 auto .15rem; }

/* ---------- Floating LINE contact ---------- */
.float-contact{
  position:fixed; right:14px; bottom:14px; z-index:1040;
  background:#2ecc71; color:#fff; border-radius:30px; padding:.5rem 1rem;
  font-weight:600; display:inline-flex; align-items:center; gap:.4rem;
  box-shadow:0 4px 14px rgba(0,0,0,.4); animation:pulse 2s infinite;
}
.float-contact:hover{ color:#fff; background:#27b35c; }
.float-contact .dot{ width:10px; height:10px; background:#0f0; border-radius:50%; }
@keyframes pulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.05);} }

@media (max-width:768px){
  .hero .hero-char{ opacity:.25; max-height:60%; }
  .bottom-nav{ display:flex; }
  body{ padding-bottom:64px; }
  .float-contact{ bottom:72px; }
}