/* ============================================================
   DGTechQA — WhatsApp look for the phone app page.
   Follows the phone's Light / Dark setting like WhatsApp.
   Light: green top bar, white lists, #efeae2 chat wallpaper feel.
   Dark : #111b21 background, #202c33 bars, #00a884 accent.
   ============================================================ */
:root{
  color-scheme:light dark;
  /* WhatsApp LIGHT */
  --bg:#f0f2f5; --surface:#ffffff; --surface2:#f0f2f5; --surface3:#e9edef;
  --border:rgba(11,20,26,.10); --border2:rgba(11,20,26,.18);
  --text:#111b21; --muted:#667781; --dim:#8696a0;
  --fill:rgba(11,20,26,.06); --fill2:rgba(11,20,26,.10);
  --bar:#ffffff; --hdr:#008069; --hdr-text:#ffffff;
  --tint:#008069; --tint-soft:rgba(0,168,132,.12); --fab:#25d366;
  --bubble-out:#d9fdd3; --bubble-in:#ffffff; --wallpaper:#efeae2;
  --green:#008069; --blue:#027eb5; --purple:#7f66ff; --amber:#ffb02e; --orange:#ff7a3d; --red:#ea0038;
  --ios-green:#25d366; --ios-red:#ea0038; --ios-tint:#008069;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --ios-font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:var(--ios-font);
}
@media (prefers-color-scheme:dark){
  :root{
    /* WhatsApp DARK */
    --bg:#111b21; --surface:#202c33; --surface2:#1a252c; --surface3:#2a3942;
    --border:rgba(134,150,160,.18); --border2:rgba(134,150,160,.30);
    --text:#e9edef; --muted:#8696a0; --dim:#667781;
    --fill:rgba(134,150,160,.14); --fill2:rgba(134,150,160,.24);
    --bar:#202c33; --hdr:#202c33; --hdr-text:#e9edef;
    --tint:#00a884; --tint-soft:rgba(0,168,132,.20); --fab:#00a884;
    --bubble-out:#005c4b; --bubble-in:#202c33; --wallpaper:#0b141a;
    --green:#00a884; --blue:#53bdeb; --purple:#a58dff; --amber:#ffbc38; --orange:#ff8a50; --red:#f15c6d;
    --ios-green:#25d366; --ios-red:#f15c6d; --ios-tint:#00a884;
  }
}

html,body{background:var(--bg)!important;background-image:none!important;color:var(--text)!important;
  font-family:var(--ios-font)!important;font-size:16px;-webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;overscroll-behavior-y:auto}
body *{font-family:var(--ios-font)!important}
.fa,.fas,.far,.fab,[class^="fa-"],[class*=" fa-"]{font-family:"Font Awesome 6 Free","Font Awesome 6 Brands"!important}
button,a{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
input,textarea,select{font-size:17px!important;-webkit-user-select:text;user-select:text}
canvas#starfield,#starfield{display:none!important}

/* ---------- Top bar (WhatsApp green app bar) ---------- */
.app-header{background:var(--hdr)!important;
  border-bottom:none!important;box-shadow:0 1px 3px rgba(0,0,0,.25);
  padding:calc(10px + var(--sat)) 16px 10px!important;min-height:56px}
.header-logo{font-size:21px!important;font-weight:700!important;letter-spacing:-.2px;color:var(--hdr-text)!important}
.header-logo span{color:#25d366!important}
.hdr-btn{background:rgba(255,255,255,.16)!important;border:none!important;color:var(--hdr-text)!important;
  padding:7px 14px!important;font-weight:600!important;font-size:14px!important;border-radius:999px!important}
.hdr-btn.green{font-weight:600!important}
.status-bar{background:transparent!important;border:none!important;color:var(--muted)!important;
  font-size:12px!important;padding:8px 20px 0!important}
.s-dot.green{background:var(--ios-green)!important;box-shadow:none!important}
.tab-bar{display:none!important}

/* ---------- Content ---------- */
.tab-content{padding:8px 16px calc(100px + var(--sab))!important;animation:waFade .25s ease}
@keyframes waFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sec-label{font-size:13px!important;font-weight:400!important;color:var(--muted)!important;
  text-transform:uppercase!important;letter-spacing:-.08px!important;margin:22px 0 7px 16px!important}

/* Grouped (inset) cards like Settings */
.hero-card,.comm-card,.tool-card,.feature-card,.quick-card,.auth-card,.auth-link-item,.price-card,
.promo-strip,.terminal-box,.stat-box{background:var(--surface)!important;border:none!important;
  border-radius:12px!important;box-shadow:none!important}
.terminal-box{background:var(--surface)!important}
.term-head{background:var(--surface2)!important;border-color:var(--border)!important}
.hero-card::before{display:none!important}
.hero-eyebrow{background:var(--tint-soft)!important;border:none!important;color:var(--tint)!important;
  font-size:12px!important;font-weight:600!important}
.hero-title{font-size:34px!important;font-weight:700!important;letter-spacing:.37px;line-height:1.12!important;color:var(--text)}
.hero-title .blue,.hero-title .green{color:var(--tint)!important}
.hero-sub{font-size:17px!important;line-height:1.35!important;color:var(--muted)!important;letter-spacing:-.41px}
.tool-name,.qc-label,.fc-title,.price-name{font-size:17px!important;font-weight:400!important;letter-spacing:-.41px;color:var(--text)!important}
.tool-desc,.qc-sub,.fc-desc,.price-desc,.price-features li{font-size:14px!important;color:var(--muted)!important;line-height:1.3}
.tool-arrow,.ali-arrow{color:var(--dim)!important}
.tool-icon,.qc-icon,.fc-icon,.ali-icon{border-radius:8px!important}
.tool-card:active,.quick-card:active,.feature-card:active,.auth-link-item:active{background:var(--surface3)!important}
.stat-box strong{color:var(--tint)!important;font-size:22px!important;font-weight:600!important}
.stat-box span{font-size:11px!important;color:var(--muted)!important}
.tag,.tool-badge,.featured-badge{border-radius:6px!important;border:none!important;background:var(--fill)!important;color:var(--muted)!important;font-weight:600!important}
.tag.green,.tag.blue,.tag.purple{color:var(--tint)!important;background:var(--tint-soft)!important}
.price-card.featured{background:var(--surface)!important;box-shadow:0 0 0 2px var(--tint) inset!important}
.price-tag{color:var(--text)!important;font-weight:700!important}
.price-features li i{color:var(--ios-green)!important}
.promo-btn{background:var(--tint)!important;color:#fff!important;border-radius:999px!important}
.book-promo-card{background:var(--tint)!important;background-image:linear-gradient(160deg,#00a884,#005c4b)!important;border-radius:14px!important}
.book-promo-card::before{display:none}
.book-promo-btn{background:#fff!important;color:#008069!important;border-radius:999px!important;font-weight:600!important}
.book-promo-sub,.book-promo-title,.book-promo-eyebrow{color:#fff!important}
.book-promo-sub{opacity:.85}
.menu-profile-card{display:none}

/* Buttons */
.btn-primary-mob,.btn-auth,.btn-auth.blue,.btn-auth.green,.price-btn,.price-btn.blue-btn,.mbw-submit-btn{
  background:var(--tint)!important;background-image:none!important;color:#fff!important;border:none!important;box-shadow:none!important;
  border-radius:14px!important;padding:15px 16px!important;font-size:17px!important;font-weight:600!important;letter-spacing:-.41px}
.btn-outline-mob,.price-btn.outline-btn,.mbw-cancel-btn{background:var(--fill)!important;color:var(--tint)!important;border:none!important;
  border-radius:14px!important;padding:15px 16px!important;font-size:17px!important;font-weight:600!important}
.btn-primary-mob:active,.btn-auth:active,.price-btn:active,.mbw-submit-btn:active{opacity:.6;transform:none;transition:opacity .1s}
.btn-outline-mob:active,.mbw-cancel-btn:active{opacity:.5}
a{color:var(--tint)}
.auth-switch a,.mbw-otp-hint a{color:var(--tint)!important;font-weight:400!important}
.auth-logo{color:var(--text)!important;font-weight:700!important}
.auth-logo span{color:var(--tint)!important}
.auth-sub,.auth-switch{color:var(--muted)!important;font-size:15px!important}

/* Inputs */
.form-group label,.mbw-field label{font-size:13px!important;color:var(--muted)!important;font-weight:400!important;text-transform:uppercase;letter-spacing:-.08px}
.form-group input,.form-group select,.mbw-field input,.mbw-field select,.mbw-field textarea{
  background:var(--fill)!important;border:none!important;border-radius:10px!important;padding:12px 14px!important;color:var(--text)!important}
.form-group input:focus,.mbw-field input:focus{box-shadow:0 0 0 2px var(--tint)!important;border:none!important}
.form-group input::placeholder{color:var(--dim)!important}
.mbw-inline-btn{border:none!important;background:var(--tint-soft)!important;color:var(--tint)!important;border-radius:10px!important}
.mbw-inline-btn.solid{background:var(--tint)!important;color:#fff!important}

/* ---------- Bottom navigation (WhatsApp style, active pill) ---------- */
.bottom-nav{background:var(--bar)!important;
  border-top:.5px solid var(--border)!important;box-shadow:none!important;z-index:300!important;
  padding:8px 2px calc(6px + var(--sab))!important}
.bn-item{flex:1 1 0!important;min-width:0;padding:0!important;gap:3px!important;font-size:12px!important;font-weight:600!important;
  color:var(--muted)!important;white-space:nowrap;transition:transform .12s}
.bn-item i{font-size:18px!important;width:58px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:999px;transition:background .2s}
.bn-item.active{color:var(--text)!important}
.bn-item.active i{background:var(--tint-soft);color:var(--tint)}
.bn-item:active{transform:scale(.94)}

/* ---------- Sheets (Book website) ---------- */
.mbw-overlay{background:rgba(0,0,0,.4)!important}
.mbw-sheet{background:var(--bg)!important;border-radius:12px 12px 0 0!important}
.mbw-sheet-handle{background:var(--dim)!important;width:36px!important;height:5px!important}
.mbw-sheet-header,.mbw-sheet-actions{background:var(--bg)!important;border-color:var(--border)!important}
.mbw-sheet-header h3{font-size:17px!important;font-weight:600!important;color:var(--text)!important}
.mbw-sheet-body{background:var(--bg)}

/* Removed menu + desktop notice */
.menu-overlay,.menu-toggle-btn,.bn-more,.desktop-msg{display:none!important}
@media (min-width:769px){.mobile-app{display:block!important}}

/* ---------- Floating chat buttons sit above the tab bar ---------- */
#liveBubbleBtn,#botLauncher{right:14px!important;bottom:calc(78px + var(--sab))!important;width:52px!important;height:52px!important}
#botBubble{right:14px!important;bottom:calc(138px + var(--sab))!important}
#botPanel{bottom:calc(138px + var(--sab))!important}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- WhatsApp chat flavour ---------- */
.tab-content{background:transparent}
.hero-card{border-radius:14px!important}
.sec-label{color:var(--tint)!important;font-weight:600!important;text-transform:none!important;font-size:14px!important;letter-spacing:0!important}
.comm-card{border-radius:8px 14px 14px 14px!important;box-shadow:0 1px .5px rgba(11,20,26,.13)!important}
.comm-card:nth-child(even){background:var(--bubble-out)!important;border-radius:14px 8px 14px 14px!important}
.btn-primary-mob,.btn-auth,.btn-auth.blue,.btn-auth.green,.price-btn,.price-btn.blue-btn,.mbw-submit-btn{border-radius:999px!important}
.btn-outline-mob,.price-btn.outline-btn,.mbw-cancel-btn{border-radius:999px!important}
#liveBubbleBtn,#botLauncher{background:var(--fab)!important;color:#fff!important;box-shadow:0 4px 12px rgba(0,0,0,.3)!important}