/* =====================================================================
   TEMA ESCURO DO APP DA CLIENTE (igual a capa): roxo + rosa + vidro
   Carregado so no app da cliente (index.html). O painel continua claro.
   ===================================================================== */
body.client {
  --bg: #1d0548;
  --serif: "Montserrat", "Poppins", sans-serif;
  --neon: #ff4fe0;
  --surface: rgba(255, 255, 255, .06);
  --text: #f7f0fc;
  --muted: #bba9cf;
  --line: rgba(255, 255, 255, .13);
  --plum: #1a0630;
  --brand: #c77dff;
  --brand-dark: #f1dcff;
  --brand-soft: rgba(199, 125, 255, .16);
  --gold: #ff6fb5;          /* o destaque agora e rosa */
  --gold-light: #ffb8dc;
  --gold-soft: rgba(255, 111, 181, .14);
  --pink: #ff4fa3;
  --grad: linear-gradient(135deg, #6a1fb5 0%, #b23fd6 50%, #ff4fa3 100%);
  --grad-gold: linear-gradient(135deg, #ff86c4 0%, #ff4fa3 50%, #c43ad9 100%);
  --ok: #7ef0b4; --ok-soft: rgba(46, 204, 113, .16);
  --warn: #ffc980; --warn-soft: rgba(255, 170, 60, .14);
  --danger: #ff8a8a;
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .25);
  --shadow: 0 12px 34px rgba(0, 0, 0, .38);
  --shadow-lg: 0 22px 54px rgba(0, 0, 0, .5);
  --glass: linear-gradient(140deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 100%);
  --glass-border: rgba(255, 255, 255, .17);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(255, 255, 255, .04);
  background: #1d0548;
  color: var(--text);
  color-scheme: dark;
}
/* luzes roxas e rosas ao fundo: e o que faz o vidro parecer vidro */
body.client::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 420px at 0% 6%, rgba(214, 51, 255, .45), transparent 62%),
    radial-gradient(460px 400px at 100% 40%, rgba(255, 59, 196, .38), transparent 62%),
    radial-gradient(600px 480px at 15% 100%, rgba(122, 31, 230, .55), transparent 64%),
    linear-gradient(170deg, #1d0548 0%, #2e0a7a 48%, #45109a 100%);
}
@media (min-width: 520px) { body.client { background: #0a0213; } body.client .app { box-shadow: 0 0 80px rgba(178, 63, 214, .25); } }
body.client .app { background: transparent; }
body.client a { color: var(--gold-light); }

/* ---------- superficies de vidro ---------- */
body.client :is(.card, .svc-row, .list-item, .fact, .day, .time, .pill-cat, .pro-opt, details.acc, .footer, .icon-btn, .search input, .pro-card, .ticket) {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi), var(--shadow-sm);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  color: var(--text);
}
body.client .work img { border: 1px solid var(--glass-border); }
body.client .work span { color: var(--text); }
body.client :is(.svc-row, .day, .time, .pill-cat, .pro-opt):hover { border-color: rgba(255, 255, 255, .32); }

/* ---------- BOTOES DE VIDRO ---------- */
body.client .btn {
  position: relative; isolation: isolate; overflow: hidden;
  color: #fff; border: 1px solid rgba(255, 255, 255, .38);
  background: linear-gradient(135deg, rgba(178, 63, 214, .62) 0%, rgba(255, 79, 163, .50) 100%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -10px 18px rgba(40, 0, 60, .18), 0 10px 28px rgba(232, 67, 154, .30);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}
/* reflexo na metade de cima (o brilho do vidro) */
body.client .btn::before {
  content: ""; position: absolute; z-index: -1; left: 1px; right: 1px; top: 1px; height: 52%;
  border-radius: 15px 15px 40% 40% / 15px 15px 30% 30%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .02));
  pointer-events: none;
}
/* faixa de luz que passa ao tocar ou passar o mouse */
body.client .btn::after {
  content: ""; position: absolute; z-index: -1; top: -50%; bottom: -50%; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
}
body.client .btn:hover::after, body.client .btn:active::after { left: 120%; }
body.client .btn:hover { filter: brightness(1.08); }
body.client .btn.gold {
  background: linear-gradient(135deg, rgba(255, 111, 181, .78) 0%, rgba(196, 58, 217, .62) 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -10px 18px rgba(60, 0, 40, .16), 0 12px 30px rgba(255, 79, 163, .38);
}
body.client :is(.btn.glass, .btn.ghost) {
  background: linear-gradient(140deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .05));
  color: #fff; border-color: rgba(255, 255, 255, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 22px rgba(0, 0, 0, .25);
}
body.client .btn.wa {
  background: linear-gradient(135deg, rgba(37, 211, 102, .62), rgba(18, 140, 126, .55));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px rgba(37, 211, 102, .25);
}
body.client .btn:disabled { opacity: .45; filter: grayscale(.3); }
body.client .btn:disabled::after { display: none; }
body.client .icon-btn { color: #fff; }

/* ---------- barras ---------- */
body.client .appbar { background: rgba(29, 5, 72, .55); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
body.client .appbar.over { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.client .appbar.over.solid { background: rgba(29, 5, 72, .6); border-color: var(--line); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); }
body.client .appbar .logo-dark { display: none !important; }
body.client .appbar.over.solid .logo-light { display: block; }
body.client .appbar h1 { color: var(--text); }
body.client .tabbar {
  background: rgba(26, 6, 48, .55); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), var(--shadow-lg);
}
body.client .tabbar a { color: rgba(255, 255, 255, .55); }
body.client .tabbar a.sel { color: #fff; }
body.client .tabbar a.sel svg { color: var(--gold-light); filter: drop-shadow(0 0 8px rgba(255, 111, 181, .7)); }
body.client .action-bar { background: rgba(29, 5, 72, .62); border-top: 1px solid var(--line); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); }

/* ---------- capa ---------- */
body.client .hero { height: min(94vh, 700px); min-height: 560px; background: #1d0548; }
body.client .hero > img { object-position: center 6%; }
/* escurece so a parte de baixo: o rosto fica limpo */
body.client .hero::before { background: linear-gradient(180deg, rgba(29, 5, 72, .55) 0%, rgba(29, 5, 72, 0) 16%, rgba(29, 5, 72, 0) 58%, rgba(29, 5, 72, .74) 78%, #1d0548 100%); }
body.client .hero .txt { padding: 0 20px 22px; }
body.client .hero .sig { font-size: 1.75rem; color: var(--gold-light); text-shadow: 0 2px 12px rgba(255, 79, 163, .45); }
body.client .hero h2 { font-size: 1.6rem; margin: 2px 0 16px; text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
body.client .hero h2 em { color: var(--gold-light); }
body.client .sheet { background: transparent; margin-top: 0; border-radius: 0; padding-top: 0; }
.hl-row { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 0; scrollbar-width: none; }
.hl-row::-webkit-scrollbar { display: none; }
body.client .hl-row .chip-glass { flex: 0 0 auto; color: var(--text); background: var(--glass); border-color: var(--glass-border); box-shadow: var(--glass-hi); }

/* ---------- conteudo ---------- */
body.client .section-head h2 { color: var(--text); }
body.client .feature { border: 1px solid rgba(255, 255, 255, .14); }
body.client .feature::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(29, 5, 72, .92)); }
body.client .badge-gold { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); box-shadow: 0 4px 14px rgba(255, 79, 163, .45); }
body.client .go { background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .25); }
body.client .cat-bar { background: rgba(29, 5, 72, .7); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
body.client .pill-cat.sel { background: linear-gradient(135deg, rgba(178, 63, 214, .6), rgba(255, 79, 163, .5)); border-color: rgba(255, 255, 255, .35); color: #fff; }
body.client .svc-row .price { color: var(--gold-light); }
body.client .svc-row .add { background: rgba(255, 111, 181, .16); color: var(--gold-light); border: 1px solid rgba(255, 111, 181, .3); }
body.client .cat-title { color: var(--muted); }
body.client .search input::placeholder { color: var(--muted); }
body.client .ba { border: 1px solid rgba(255, 255, 255, .14); }
body.client .ba .lbl.r { color: #fff; }
body.client .pro-card { background: linear-gradient(140deg, rgba(178, 63, 214, .28), rgba(255, 79, 163, .12)); }
body.client .pro-card::after { background: radial-gradient(circle, rgba(255, 111, 181, .4), transparent 70%); }
body.client .pro-card img { border-color: var(--gold); }
body.client .footer { color: var(--muted); }
body.client .policy li::before { background: rgba(255, 111, 181, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb8dc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ---------- agendamento ---------- */
body.client .steps .s::before { background: rgba(255, 255, 255, .12); }
body.client .steps .s.done::before, body.client .steps .s.cur::before { background: var(--grad); }
body.client .steps .s.cur { color: #fff; }
body.client .svc-hero { background: #1d0548; }
body.client .svc-hero::after { background: linear-gradient(180deg, rgba(29, 5, 72, .5) 0%, rgba(0, 0, 0, 0) 30%, rgba(29, 5, 72, .6) 72%, #1d0548 100%); }
body.client .svc-hero .back { color: #fff; }
body.client .fact.gold { background: linear-gradient(140deg, rgba(255, 111, 181, .26), rgba(255, 111, 181, .08)); border-color: rgba(255, 111, 181, .35); }
body.client .day.sel, body.client .time.sel {
  background: linear-gradient(135deg, rgba(178, 63, 214, .75), rgba(255, 79, 163, .6)); border-color: rgba(255, 255, 255, .4); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 22px rgba(232, 67, 154, .35);
}
body.client .day.sel span { color: rgba(255, 255, 255, .8); }
body.client .day.off { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
body.client .pro-opt.sel { background: linear-gradient(135deg, rgba(178, 63, 214, .5), rgba(255, 79, 163, .35)); }
body.client .summary { background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
body.client .summary .total { border-top-color: rgba(255, 255, 255, .2); }
body.client .notice { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(255, 170, 60, .25); }

/* ---------- formularios ---------- */
body.client :is(input, select, textarea):not([type=checkbox]):not([type=range]) {
  background: rgba(255, 255, 255, .06); color: var(--text); border: 1px solid var(--glass-border);
}
body.client :is(input, select, textarea):focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255, 111, 181, .18); }
body.client label { color: var(--muted); }
body.client .check { color: var(--text); }
body.client .check input { accent-color: var(--pink); }

/* ---------- pagamento: o QR fica em caixa branca para o banco conseguir ler ---------- */
body.client .qr-box { background: #fff; border-color: rgba(255, 255, 255, .6); }
body.client .qr-demo { color: #6b5a7a; }
body.client .pix-code { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); color: var(--text); }

/* ---------- ingresso ---------- */
body.client .ticket .top { background: linear-gradient(135deg, rgba(106, 31, 181, .9), rgba(255, 79, 163, .75)); }
body.client .ticket.warn .top { background: linear-gradient(135deg, rgba(160, 90, 10, .85), rgba(255, 150, 60, .7)); }
body.client .ticket.bad .top { background: linear-gradient(135deg, rgba(120, 30, 60, .9), rgba(220, 70, 100, .7)); }
body.client .ticket .cut { background: transparent; }
body.client .ticket .cut::before, body.client .ticket .cut::after { display: none; }
body.client .ticket .cut i { border-top-color: rgba(255, 255, 255, .2); }

/* ---------- status e outros ---------- */
body.client :is(.b-cancelled, .b-no_show, .b-refund_needed, .b-expired) { background: rgba(255, 99, 99, .15); color: #ff9b9b; }
body.client .b-done { background: rgba(120, 160, 255, .15); color: #a9c1ff; }
body.client .b-rescheduled { background: rgba(199, 125, 255, .18); color: #e2c2ff; }
body.client .contact .ic { background: rgba(255, 111, 181, .14); color: var(--gold-light); }
body.client .contact a.row-link { color: var(--text); border-top-color: var(--line); }
body.client .sk { background: linear-gradient(90deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, .05) 100%); background-size: 200% 100%; }