/* ============================================================
   WHANMHOO569 — Bootstrap 5 hybrid theme
   Custom skin layered on top of Bootstrap 5.3
   ============================================================ */

:root {
  --wh-bg:        #f7e3ee;
  --wh-orange:    #f7951e;
  --wh-orange-2:  #f15a24;
  --wh-magenta:   #ec1c8e;
  --wh-pink:      #ff5ba6;
  --wh-purple:    #6d2c91;
  --wh-purple-2:  #45176b;
  --wh-gold:      #ffcf3f;
  --wh-grad-orange: linear-gradient(180deg, #ffb43d 0%, #f7951e 45%, #f15a24 100%);
  --wh-grad-purple: linear-gradient(180deg, #9b4dd6 0%, #6d2c91 55%, #45176b 100%);
  --wh-grad-pink:   linear-gradient(135deg, #ff6fb5 0%, #ec1c8e 50%, #7b2cbf 100%);
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: 'Kanit', system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--wh-bg);
  color: #2a2238;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5 { font-weight: 600; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }

.section { padding: 56px 0; position: relative; }
.section-title {
  text-align: center;
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  margin-bottom: .25rem;
  background: var(--wh-grad-pink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-sub {
  text-align: center;
  color: #6b5b78;
  margin-bottom: 2.2rem;
}

/* ---------- buttons ---------- */
.btn-wh {
  border: none; border-radius: 999px; color:#fff !important;
  font-weight: 600; padding: .55rem 1.4rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
  display: inline-flex; align-items: center; gap: .45rem;
}
.btn-wh:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,.25); color:#fff; }
.btn-wh-orange { background: var(--wh-grad-orange); }
.btn-wh-purple { background: var(--wh-grad-purple); }
.btn-wh-pink   { background: var(--wh-grad-pink); }
.btn-wh-lg     { padding: .8rem 2.2rem; font-size: 1.1rem; }

/* ---------- navbar ---------- */
.wh-navbar {
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(120, 30, 110, .10);
  padding-top: .35rem; padding-bottom: .35rem;
}
.wh-navbar .navbar-brand img { height: 46px; }
.wh-navbar .nav-link {
  font-weight: 500; color: #4a2a55 !important;
  margin: 0 .35rem; position: relative;
}
.wh-navbar .nav-link:hover,
.wh-navbar .nav-link.active { color: var(--wh-magenta) !important; }
.wh-navbar .nav-link.active::after {
  content:""; position:absolute; left:.5rem; right:.5rem; bottom:-2px; height:3px;
  border-radius:3px; background: var(--wh-grad-orange);
}
.navbar-toggler { border-color: rgba(236,28,142,.4); }

/* ---------- hero ---------- */
.wh-hero {
  background: linear-gradient(180deg,#ffd9ec 0%, var(--wh-bg) 100%);
  padding-top: 0;
}
.wh-hero .hero-img {
  width: 100%; display: block; border-radius: 0 0 18px 18px;
  box-shadow: 0 18px 40px rgba(109,44,145,.20);
}
.wh-hero-cta { margin-top: -34px; position: relative; z-index: 3; }

/* ---------- providers ---------- */
.wh-providers {
  background: var(--wh-grad-purple);
  border-radius: 28px;
  color:#fff;
}
.wh-providers .section-title { background: linear-gradient(135deg,#ffd86b,#ff9a3d); -webkit-background-clip:text; background-clip:text; }
.provider-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 14px 8px 10px;
  text-align: center;
  transition: transform .18s ease, background .18s ease;
  height: 100%;
}
.provider-card:hover { transform: translateY(-5px) scale(1.02); background: rgba(255,255,255,.14); }
.provider-card img { width: 78px; height: 78px; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.provider-card span { display:block; margin-top:.4rem; font-size:.78rem; color:#ffe6f4; }

/* ---------- promotions carousel ---------- */
.wh-promo .carousel-inner { border-radius: 20px; box-shadow: 0 14px 30px rgba(109,44,145,.22); }
.wh-promo .carousel-item img { width: 100%; }
.wh-promo .carousel-indicators [data-bs-target] { background-color: var(--wh-magenta); }

/* ---------- features / services ---------- */
.feature-card {
  background:#fff; border-radius: 20px; overflow:hidden; height:100%;
  box-shadow: 0 10px 24px rgba(109,44,145,.12);
  border: 2px solid #ffe1f0;
  transition: transform .18s ease, box-shadow .18s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(236,28,142,.22); }
.feature-card .fc-img { background: linear-gradient(180deg,#fff3fa,#ffe1f0); padding: 18px; text-align:center; }
.feature-card .fc-img img { height: 168px; object-fit: contain; }
.feature-card .fc-body { padding: 16px 18px 22px; }
.feature-card .fc-body h5 { font-size: 1.02rem; color:#5a2a6b; }

.perk-card {
  background:#fff; border-radius: 16px; padding: 18px 18px;
  height:100%; border-left: 6px solid var(--wh-magenta);
  box-shadow: 0 6px 16px rgba(109,44,145,.10);
}
.perk-card .ic { width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;color:#fff;font-size:1.3rem;flex:0 0 auto;
  background: var(--wh-grad-orange); }

/* ---------- article ---------- */
.wh-article { background:#fff; border-radius: 24px; box-shadow: 0 12px 30px rgba(109,44,145,.10); }
.wh-article h2 { color: var(--wh-purple); font-size: clamp(1.3rem,3vw,1.8rem); margin-top: 1.6rem; }
.wh-article h3 { color: var(--wh-magenta); font-size: clamp(1.1rem,2.4vw,1.4rem); margin-top: 1.4rem; }
.wh-article p  { color:#4a4153; line-height: 1.95; }
.wh-article ul { line-height: 1.9; color:#4a4153; }

/* ---------- banks ---------- */
.wh-banks { text-align:center; }
.wh-banks img { max-width: 300px; width: 100%; image-rendering: auto; }

/* ---------- footer ---------- */
.wh-footer { background: var(--wh-purple-2); color:#e9d6f3; padding-top: 48px; }
.wh-footer a { color:#e9d6f3; }
.wh-footer a:hover { color: var(--wh-gold); }
.wh-footer h6 { color:#fff; font-weight:600; margin-bottom: 1rem; }
.wh-footer .foot-logo { height: 64px; }
.wh-footer .social-row img { width: 40px; height:40px; }
.wh-copyright { background: rgba(0,0,0,.22); color:#cdb6dc; font-size:.85rem; padding: 14px 0; text-align:center; }

/* ---------- floating side buttons ---------- */
.wh-float {
  position: fixed; right: 0; top: 38%; z-index: 1040;
  display:flex; flex-direction: column; gap: 6px;
  background: rgba(109,44,145,.85); padding: 8px 6px; border-radius: 14px 0 0 14px;
}
.wh-float a { display:block; line-height:0; transition: transform .15s ease; }
.wh-float a:hover { transform: scale(1.12); }
.wh-float img { width: 34px; height: 34px; }

/* ---------- mascot ---------- */
.wh-mascot { position: fixed; left: 14px; bottom: 14px; z-index: 1039; text-align:center; }
.wh-mascot img { width: 110px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); }
.wh-mascot .tag {
  display:inline-block; margin-top:-12px; background: var(--wh-grad-pink); color:#fff;
  font-size:.72rem; padding:2px 12px; border-radius:999px; font-weight:600;
}

/* ---------- back to top ---------- */
.wh-top {
  position: fixed; right: 16px; bottom: 16px; z-index: 1041;
  width: 46px; height:46px; border-radius:50%; border:none; color:#fff;
  background: var(--wh-grad-orange); box-shadow: 0 6px 14px rgba(0,0,0,.3);
  display:none; place-items:center; font-size:1.2rem;
}

/* ---------- modal ---------- */
.modal-content.wh-modal { border:none; border-radius: 22px; overflow:hidden; }
.wh-modal .modal-header { background: var(--wh-grad-purple); color:#fff; border:none; }
.wh-modal .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.wh-modal .form-control { border-radius: 12px; padding:.7rem 1rem; }

@media (max-width: 991.98px) {
  .wh-navbar .navbar-nav { margin: .5rem 0; }
  .wh-mascot img { width: 84px; }
  .wh-float img { width: 28px; height:28px; }
}

/* ============================================================
   เพิ่มเติม: offcanvas menu / footer badge / hero CTA spacing /
             mobile bottom action bar (login/register)
   ============================================================ */
/* offcanvas เมนูมือถือ (offset) — desktop bootstrap คืนเป็น navbar ปกติเอง */
.wh-offcanvas .offcanvas-title{ color:var(--wh-magenta,#ec1c8e); font-weight:700; }
.wh-offcanvas .nav-link{ color:#2a2238; }
.wh-offcanvas .nav-link:hover,.wh-offcanvas .nav-link.active{ color:var(--wh-magenta,#ec1c8e); }

/* footer เมนูแบบ badge */
.footer-badges{ display:flex; flex-wrap:wrap; gap:8px; }
.foot-badge{ display:inline-block; padding:5px 12px; border-radius:999px; font-size:.82rem; line-height:1.3;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; transition:.15s; }
.foot-badge:hover{ background:var(--wh-magenta,#ec1c8e); border-color:var(--wh-magenta,#ec1c8e); color:#fff; }

/* hero CTA: กันปุ่มติดกัน + เว้นระยะบนมือถือ */
.wh-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* MOBILE BOTTOM ACTION BAR */
.mobile-actionbar{ position:fixed; left:0; right:0; bottom:0; z-index:1055; display:flex; gap:8px;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg, rgba(42,34,56,.9), rgba(42,34,56,.98));
  border-top:1px solid rgba(236,28,142,.4); box-shadow:0 -6px 20px rgba(0,0,0,.4); backdrop-filter:blur(6px); }
.mab-btn{ flex:1; text-align:center; padding:11px 8px; border-radius:10px; font-weight:700; font-size:.95rem; line-height:1.1; color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.3); }
.mab-login{ background:linear-gradient(180deg,#ff9d4d,#f4761a); }
.mab-register{ background:linear-gradient(180deg,#a05cc6,#6d2c91); }
.mab-btn:active{ transform:translateY(1px); color:#fff; }
@media (max-width:991.98px){
  body{ padding-bottom:72px; }
  .wh-float{ bottom:84px !important; }
  .wh-top{ bottom:84px !important; }
}