/* ═══════════════════════════════════════════════════════════════════════════
   SEVWAS customer app — v3 design layer (Figma "Customer · Mobile")
   Builds on the shared tokens/components in crm-v3.css (cx-*). Everything
   customer-specific is prefixed app3-. Plain CSS, never purged.
   ═══════════════════════════════════════════════════════════════════════════ */

body.sevwas-web { background: var(--cx-bg) !important; color: var(--cx-ink); }
body.sevwas-web .sevwas-light-section { background: transparent; }
.app3 { max-width: 560px; margin: 0 auto; padding: 0 16px; }
.app3-wide { max-width: 1080px; margin: 0 auto; padding: 0 16px; }
.app3-serif { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; letter-spacing: -.2px; }
.app3 h1, .app3 h2, .app3 h3, .app3 h4 { color: var(--cx-ink); }

/* ─── Top bar (slim) ──────────────────────────────────────────────────────── */
/* Solid (not backdrop-blurred) bars: a full-width blur re-renders everything that
   scrolls under it every frame, which is what made the bars judder on iPhones.
   Each bar sits on its own GPU layer so it never repaints while the page moves.
   Safe-area padding lives ONLY here (and on the tab bar) — never on <body>. */
.app3-topbar { position: sticky; top: 0; z-index: 50; background: #F6F4EF; border-bottom: 1px solid rgba(17,17,17,.07); padding-top: env(safe-area-inset-top); transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; }
.app3-topbar-in { max-width: 1080px; margin: 0 auto; height: 52px; padding: 0 16px; display: flex; align-items: center; gap: 10px; }
.app3-topbar .brand-logo { height: 30px !important; width: auto; }
.app3-topbar-links { display: none; gap: 4px; margin-left: 18px; }
.app3-topbar-links a { padding: 8px 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--cx-ink-2); }
.app3-topbar-links a.is-on, .app3-topbar-links a:hover { color: var(--cx-ink); background: rgba(17,17,17,.05); }
@media (min-width: 768px) { .app3-topbar-links { display: flex; } }
.app3-round { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--cx-line); color: var(--cx-ink); flex-shrink: 0; }
.app3-round svg { width: 18px; height: 18px; stroke-width: 20; }
.app3-avatar { width: 38px; height: 38px; border-radius: 999px; background: #ECE7DD; color: var(--cx-ink); font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.app3-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Bottom tab bar (Home · Search · Bookings · Profile) ─────────────────── */
.app3-tabbar { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-top: 1px solid rgba(17,17,17,.08); box-shadow: 0 -4px 16px rgba(17,17,17,.04); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; }
.app3-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 4px; font-size: 11px; font-weight: 600; color: #8A857B; transition: color .2s; }
.app3-tabbar a svg { width: 23px; height: 23px; stroke-width: 1.7 !important; }
.app3-tabbar a.is-on { color: var(--cx-gold-ink); font-weight: 800; }
.app3-tabbar a.is-on svg { stroke-width: 2.1 !important; }
.app3-tabbar a .dot { position: absolute; margin-left: 18px; margin-top: -2px; width: 8px; height: 8px; border-radius: 9px; background: #B34D45; border: 2px solid #fff; }
@media (min-width: 768px) { .app3-tabbar { display: none; } }
.app3-tab-spacer { height: calc(78px + env(safe-area-inset-bottom)); }
@media (min-width: 768px) { .app3-tab-spacer { height: 24px; } }

/* ─── Page header (‹ Title) ───────────────────────────────────────────────── */
.app3-ph { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 14px 0 12px; }
.app3-ph h1 { text-align: center; font-family: 'Inter', sans-serif !important; font-weight: 800; font-size: 17px; letter-spacing: -.2px; }
.app3-back { width: 38px; height: 38px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--cx-ink); }
.app3-back svg { width: 22px; height: 22px; }
.app3-back:active { background: rgba(17,17,17,.06); }

/* ─── Home ────────────────────────────────────────────────────────────────── */
.app3-home-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 18px; }
.app3-loc { display: inline-flex; flex-direction: column; }
.app3-loc small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--cx-ink-3); }
.app3-loc select { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0 16px 0 0; font-size: 15px; font-weight: 800; color: var(--cx-ink); outline: none; background-image: linear-gradient(45deg, transparent 50%, var(--cx-ink) 50%), linear-gradient(135deg, var(--cx-ink) 50%, transparent 50%); background-position: right 4px top 9px, right 0 top 9px; background-size: 4px 4px; background-repeat: no-repeat; }
.app3-greet { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 34px; line-height: 1.08; color: var(--cx-ink); margin: 14px 0 16px; letter-spacing: -.3px; }
.app3-greet span { color: var(--cx-gold); }
.app3-section { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 0 12px; }
.app3-section h2 { font-family: 'Inter', sans-serif !important; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.app3-section a { font-size: 13px; font-weight: 700; color: var(--cx-gold-ink); }

/* Salon card (list row) */
.app3-salon { position: relative; display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--cx-line); border-radius: 18px; padding: 10px; box-shadow: var(--cx-shadow); transition: transform .18s var(--cx-ease); }
.app3-salon:active { transform: scale(.985); }
.app3-tile { position: relative; width: 92px; height: 92px; flex-shrink: 0; border-radius: 14px; overflow: hidden; background: #EFE9DE; display: flex; align-items: center; justify-content: center; }
.app3-tile::before { content: ""; position: absolute; right: -18px; top: -18px; width: 62px; height: 62px; border-radius: 999px; background: rgba(201,162,74,.22); }
.app3-tile::after { content: ""; position: absolute; left: -14px; bottom: -14px; width: 44px; height: 44px; border-radius: 999px; background: rgba(17,17,17,.06); }
.app3-tile b { position: relative; z-index: 1; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 40px; font-weight: 600; color: var(--cx-gold-ink); }
.app3-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.app3-salon-body { flex: 1; min-width: 0; }
.app3-salon-name { font-weight: 800; font-size: 15.5px; color: var(--cx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px; }
.app3-stars { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: var(--cx-ink-3); }
.app3-stars i { font-style: normal; color: var(--cx-gold); letter-spacing: 1px; font-size: 11px; }
.app3-stars b { color: var(--cx-ink); font-weight: 800; }
.app3-salon-meta { font-size: 12.5px; color: var(--cx-ink-2); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app3-from { display: inline-flex; margin-top: 7px; font-size: 11.5px; font-weight: 800; color: var(--cx-gold-ink); background: var(--cx-gold-wash); border-radius: 8px; padding: 3px 8px; }
.app3-open { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; margin-left: 6px; }
.app3-open.is-open { background: var(--cx-green-wash); color: var(--cx-green); }
.app3-open.is-closed { background: #EFECE6; color: var(--cx-ink-3); }
.app3-heart { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #6F6A61; z-index: 3; transition: transform .2s var(--cx-ease); }
.app3-heart svg { width: 22px; height: 22px; }
.app3-heart.is-on { color: #C0473F; }
.app3-heart.is-on svg { fill: currentColor; }
.app3-heart:active { transform: scale(.8); }
@keyframes app3-pop { 40% { transform: scale(1.35); } }
.app3-heart.pop { animation: app3-pop .35s var(--cx-ease); }

/* Promo banner */
.app3-promo { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(120deg, #C9A24A 0%, #B98E33 55%, #9E7826 100%); border-radius: 18px; padding: 16px 18px; color: #1A1406; box-shadow: 0 10px 24px rgba(168,126,37,.3); margin-top: 16px; }
.app3-promo::after { content: ""; position: absolute; right: -30px; top: -40px; width: 140px; height: 140px; border-radius: 999px; background: rgba(255,255,255,.14); }
.app3-promo b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.app3-promo small { display: block; font-size: 12px; opacity: .8; margin-top: 2px; }
.app3-promo-code { position: relative; z-index: 1; flex-shrink: 0; background: #141414; color: #E9CF86; font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 8px 14px; border-radius: 999px; }

/* How it works */
.app3-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.app3-step { background: #fff; border: 1px solid var(--cx-line); border-radius: 16px; padding: 12px; box-shadow: var(--cx-shadow); }
.app3-step i { font-style: normal; width: 26px; height: 26px; border-radius: 999px; background: var(--cx-black); color: #E9CF86; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.app3-step b { display: block; margin-top: 8px; font-size: 13px; font-weight: 800; color: var(--cx-ink); }
.app3-step span { display: block; margin-top: 2px; font-size: 11.5px; color: var(--cx-ink-3); line-height: 1.35; }

/* Category tiles (Explore) */
.app3-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.app3-cat { display: flex; flex-direction: column; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--cx-line); border-radius: 18px; padding: 16px 6px 12px; box-shadow: var(--cx-shadow); font-size: 13px; font-weight: 700; color: var(--cx-ink); transition: transform .15s; }
.app3-cat:active { transform: scale(.95); }
.app3-cat i { font-style: normal; width: 44px; height: 44px; border-radius: 999px; background: var(--cx-gold-wash); color: var(--cx-gold-ink); display: inline-flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-weight: 700; }

/* Feature row (package / popular) */
.app3-feat { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--cx-line); border-radius: 16px; padding: 10px 12px; box-shadow: var(--cx-shadow); }
.app3-feat-ic { position: relative; width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; background: #EFE9DE; display: flex; align-items: center; justify-content: center; color: var(--cx-gold-ink); font-size: 22px; overflow: hidden; }
.app3-feat-ic::after { content: ""; position: absolute; right: -10px; top: -10px; width: 30px; height: 30px; border-radius: 99px; background: rgba(201,162,74,.25); }
.app3-price { font-weight: 800; color: var(--cx-gold-ink); }
.app3-strike { color: var(--cx-ink-3); text-decoration: line-through; font-size: 12px; margin-left: 6px; }

/* Dark CTA card */
.app3-dark-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: radial-gradient(130% 160% at 100% 0%, #2B2418 0%, #141414 60%); color: #fff; border-radius: 18px; padding: 16px 18px; margin-top: 18px; box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.app3-dark-cta b { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 21px; font-weight: 600; color: #E9CF86; }
.app3-dark-cta small { display: block; font-size: 12px; color: rgba(255,255,255,.65); margin-top: 2px; }

/* Blog / tip cards */
.app3-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
.app3-strip::-webkit-scrollbar { display: none; }
.app3-strip > * { scroll-snap-align: start; flex-shrink: 0; }
.app3-tip { width: 260px; background: #fff; border: 1px solid var(--cx-line); border-radius: 18px; overflow: hidden; box-shadow: var(--cx-shadow); }
.app3-tip-img { position: relative; height: 130px; background: #EFE9DE; overflow: hidden; }
.app3-tip-img img { width: 100%; height: 100%; object-fit: cover; }
.app3-tip-tag { position: absolute; left: 10px; top: 10px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--cx-black); color: #E9CF86; padding: 4px 9px; border-radius: 999px; }
.app3-tip-body { padding: 12px 14px 14px; }
.app3-tip-body b { display: block; font-size: 14.5px; font-weight: 800; color: var(--cx-ink); line-height: 1.3; }
.app3-tip-body small { display: block; font-size: 11.5px; color: var(--cx-ink-3); margin-top: 4px; }

/* Sticky bottom bar (Total + CTA) */
.app3-sticky { position: fixed; z-index: 65; left: 0; right: 0; bottom: 0; background: #fff; transform: translateZ(0); -webkit-transform: translateZ(0); border-top: 1px solid rgba(17,17,17,.07); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
.app3-sticky-in { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.app3-sticky-total small { display: block; font-size: 11px; color: var(--cx-ink-3); font-weight: 600; }
.app3-sticky-total b { display: block; font-size: 22px; font-weight: 800; color: var(--cx-ink); letter-spacing: -.4px; line-height: 1.1; }
.app3-sticky .cx-btn { flex: 1; height: 52px; font-size: 16px; }
.app3-sticky-spacer { height: calc(96px + env(safe-area-inset-bottom)); }

/* ─── Salon detail ────────────────────────────────────────────────────────── */
.app3-hero { position: relative; height: 230px; margin: 0 -16px; overflow: hidden; background: #EDE6DA; display: flex; align-items: center; justify-content: center; }
.app3-hero::before { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border-radius: 999px; background: rgba(201,162,74,.22); }
.app3-hero::after { content: ""; position: absolute; left: -50px; bottom: -70px; width: 180px; height: 180px; border-radius: 999px; background: rgba(17,17,17,.06); }
.app3-hero b { position: relative; z-index: 1; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 96px; font-weight: 600; color: var(--cx-gold-ink); line-height: 1; }
.app3-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.app3-hero-shade { position: absolute; inset: 0; z-index: 3; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 40%, rgba(0,0,0,.15)); }
.app3-hero-btn { position: absolute; z-index: 4; top: 14px; width: 40px; height: 40px; border-radius: 999px; background: rgba(17,17,17,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.app3-hero-btn svg { width: 20px; height: 20px; }
.app3-hero-btn.is-on { color: #FF8A80; }
.app3-hero-btn.is-on svg { fill: currentColor; }
.app3-hero-dots { position: absolute; z-index: 4; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.app3-hero-dots i { width: 6px; height: 6px; border-radius: 9px; background: rgba(255,255,255,.55); }
.app3-hero-dots i.on { width: 18px; background: #fff; }
.app3-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600; font-size: 32px; line-height: 1.05; color: var(--cx-ink); letter-spacing: -.3px; }
.app3-amen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.app3-amen span { font-size: 12.5px; font-weight: 600; color: var(--cx-ink-2); background: #fff; border: 1px solid var(--cx-line-strong); border-radius: 999px; padding: 6px 13px; }
.app3-svc { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--cx-line); border-radius: 16px; padding: 12px 14px; box-shadow: var(--cx-shadow); transition: border-color .2s, background .2s; }
.app3-svc + .app3-svc { margin-top: 8px; }
.app3-svc b { font-weight: 800; color: var(--cx-ink); font-size: 14.5px; }
.app3-svc small { display: block; font-size: 12px; color: var(--cx-ink-3); margin-top: 2px; }
.app3-add { width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--cx-gold-wash); color: var(--cx-gold-ink); font-size: 20px; font-weight: 600; line-height: 1; transition: background .2s, color .2s, transform .2s var(--cx-ease); }
.app3-svc.is-on { border-color: var(--cx-gold); background: #FFFCF5; }
.app3-svc.is-on .app3-add { background: var(--cx-black); color: #E9CF86; transform: rotate(45deg); }
.app3-review { background: #fff; border: 1px solid var(--cx-line); border-radius: 16px; padding: 12px 14px; }
.app3-review + .app3-review { margin-top: 8px; }

/* ─── Booking stepper ─────────────────────────────────────────────────────── */
.app3-stepper { display: grid; grid-template-columns: repeat(4, 1fr); position: relative; margin: 4px 0 18px; }
.app3-stepper::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 15px; height: 2px; background: repeating-linear-gradient(90deg, #CFC9BD 0 4px, transparent 4px 8px); }
.app3-stepper-fill { position: absolute; left: 12.5%; top: 15px; height: 2px; background: var(--cx-black); transition: width .4s var(--cx-ease); }
.app3-stepper > div { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.app3-stepper i { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 13px; font-weight: 800; background: var(--cx-bg); border: 1.5px solid #CFC9BD; color: var(--cx-ink-3); transition: all .3s; }
.app3-stepper span { font-size: 11.5px; font-weight: 600; color: var(--cx-ink-3); }
.app3-stepper .is-done i, .app3-stepper .is-cur i { background: var(--cx-black); border-color: var(--cx-black); color: #fff; }
.app3-stepper .is-cur span { color: var(--cx-ink); font-weight: 800; }
.app3-check { width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #CFC9BD; background: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.app3-svc.is-on .app3-check { background: var(--cx-black); border-color: var(--cx-black); }
.app3-svc.is-on .app3-check::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.app3-dates { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
.app3-dates::-webkit-scrollbar { display: none; }
.app3-date { flex-shrink: 0; width: 62px; height: 70px; border-radius: 14px; background: #fff; border: 1px solid var(--cx-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; transition: all .2s; }
.app3-date small { font-size: 11px; font-weight: 600; color: var(--cx-ink-3); }
.app3-date b { font-size: 15px; font-weight: 800; color: var(--cx-ink); }
.app3-date.is-on { background: var(--cx-black); border-color: var(--cx-black); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.app3-date.is-on small { color: #E9CF86; }
.app3-date.is-on b { color: #fff; }
.app3-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.app3-slot { height: 44px; border-radius: 12px; background: #fff; border: 1px solid var(--cx-line-strong); font-size: 14px; font-weight: 600; color: var(--cx-ink); transition: all .15s; }
.app3-slot.is-on { background: var(--cx-black); border-color: var(--cx-black); color: #fff; font-weight: 800; }
.app3-slot:disabled { background: #ECE9E2; border-color: transparent; color: #B4AFA5; text-decoration: line-through; }
.app3-slot-label { font-size: 15px; font-weight: 800; color: var(--cx-ink); margin: 16px 0 8px; }
.app3-field-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--cx-ink-2); margin: 14px 0 6px; }
.app3-input { width: 100%; height: 52px; border-radius: 14px; border: 1px solid var(--cx-line-strong); background: #fff; padding: 0 16px; font-size: 16px; color: var(--cx-ink); outline: none; transition: border-color .2s, box-shadow .2s; }
textarea.app3-input { height: auto; min-height: 92px; padding: 12px 16px; resize: none; }
.app3-input:focus { border-color: var(--cx-gold); box-shadow: 0 0 0 3px rgba(201,162,74,.18); }
.app3-radio { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 16px; border-radius: 14px; background: #fff; border: 1px solid var(--cx-line-strong); font-size: 14.5px; font-weight: 600; color: var(--cx-ink); transition: all .2s; cursor: pointer; }
.app3-radio i { width: 20px; height: 20px; border-radius: 99px; border: 1.5px solid #CFC9BD; flex-shrink: 0; transition: all .2s; }
.app3-radio.is-on { background: #F6EEDC; border-color: var(--cx-gold); font-weight: 800; }
.app3-radio.is-on i { border: 6px solid var(--cx-gold-ink); }
.app3-info { display: flex; align-items: flex-start; gap: 10px; border-radius: 14px; padding: 12px 14px; background: #F1EADB; font-size: 12.5px; color: var(--cx-ink-2); }
.app3-info i { width: 22px; height: 22px; border-radius: 99px; background: var(--cx-gold); color: #1A1406; font-style: normal; font-weight: 900; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app3-summary { background: #fff; border: 1px solid var(--cx-line); border-radius: 18px; padding: 4px 16px; box-shadow: var(--cx-shadow); }
.app3-summary > div { padding: 12px 0; }
.app3-summary > div + div { border-top: 1px solid var(--cx-line); }
.app3-summary small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-ink-3); }
.app3-summary b { display: block; font-size: 15px; font-weight: 800; color: var(--cx-ink); margin-top: 3px; }
.app3-summary span { display: block; font-size: 12.5px; color: var(--cx-ink-2); margin-top: 1px; }
.app3-bill-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--cx-ink-2); padding: 4px 0; }
.app3-bill-row.is-total { border-top: 1px solid var(--cx-line); margin-top: 6px; padding-top: 12px; font-size: 17px; font-weight: 800; color: var(--cx-ink); }
.app3-promo-box { display: flex; align-items: center; gap: 10px; border: 1.5px dashed rgba(17,17,17,.18); border-radius: 14px; padding: 6px 6px 6px 14px; background: #fff; }
.app3-promo-box input { flex: 1; min-width: 0; border: 0; outline: none; font-size: 15px; font-weight: 700; text-transform: uppercase; background: transparent; height: 40px; }
.app3-promo-box button { color: var(--cx-gold-ink); font-weight: 800; font-size: 14px; padding: 8px 12px; }

/* ─── Success (booking confirmed) ─────────────────────────────────────────── */
.app3-success-ring { position: relative; width: 132px; height: 132px; margin: 28px auto 0; border-radius: 999px; background: #EFE6D2; display: flex; align-items: center; justify-content: center; animation: app3-ring 1s var(--cx-ease) both; }
.app3-success-ring > span { width: 92px; height: 92px; border-radius: 999px; background: linear-gradient(180deg, #D3AE57, #C29A3F); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 24px rgba(168,126,37,.35); }
.app3-success-ring svg { width: 46px; height: 46px; stroke: #1A1406; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: app3-tick .5s .45s var(--cx-ease) forwards; }
@keyframes app3-ring { from { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.06); } to { transform: none; opacity: 1; } }
@keyframes app3-tick { to { stroke-dashoffset: 0; } }
.app3-confetti { position: absolute; width: 8px; height: 8px; border-radius: 9px; animation: app3-float 3s ease-in-out infinite; }
@keyframes app3-float { 50% { transform: translateY(-10px); } }
.app3-ref { display: inline-block; margin-top: 12px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--cx-gold-ink); background: #F1E6CC; padding: 6px 16px; border-radius: 999px; }

/* ─── Login / OTP ─────────────────────────────────────────────────────────── */
.app3-otp { display: flex; justify-content: center; gap: 8px; }
.app3-otp input { width: 46px; height: 56px; border-radius: 14px; border: 1.5px solid var(--cx-line-strong); background: #fff; text-align: center; font-size: 22px; font-weight: 800; color: var(--cx-ink); outline: none; transition: border-color .2s, box-shadow .2s; }
.app3-otp input:focus { border-color: var(--cx-gold); box-shadow: 0 0 0 3px rgba(201,162,74,.2); }
.app3-or { display: flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 700; color: var(--cx-ink-3); margin: 18px 0; }
.app3-or::before, .app3-or::after { content: ""; flex: 1; height: 1px; background: rgba(17,17,17,.1); }

/* ─── Account ─────────────────────────────────────────────────────────────── */
.app3-me { display: flex; align-items: center; gap: 14px; }
.app3-me-av { position: relative; width: 70px; height: 70px; border-radius: 999px; background: #ECE6DA; color: var(--cx-gold-ink); font-family: 'Cormorant Garamond', Georgia, serif; font-size: 32px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.app3-me-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app3-badge { display: inline-block; margin-top: 6px; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cx-gold-ink); background: #F1E6CC; padding: 3px 9px; border-radius: 999px; }
.app3-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--cx-line); border-radius: 18px; padding: 14px 4px; box-shadow: var(--cx-shadow); margin-top: 16px; text-align: center; }
.app3-stats > * + * { border-left: 1px solid var(--cx-line); }
.app3-stats b { display: block; font-size: 22px; font-weight: 800; color: var(--cx-ink); }
.app3-stats span { font-size: 11.5px; color: var(--cx-ink-3); }
.app3-upcoming { position: relative; background: #fff; border: 1px solid var(--cx-line); border-radius: 16px; padding: 14px 16px 14px 20px; box-shadow: var(--cx-shadow); overflow: hidden; display: block; }
.app3-upcoming::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--cx-gold); }
.app3-link { display: flex; align-items: center; gap: 12px; width: 100%; background: #fff; border: 1px solid var(--cx-line); border-radius: 14px; padding: 13px 14px; font-size: 14.5px; font-weight: 600; color: var(--cx-ink); }
.app3-link + .app3-link { margin-top: 8px; }
.app3-link-ic { width: 30px; height: 30px; border-radius: 999px; background: #F1EADB; color: var(--cx-gold-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app3-link-ic svg { width: 15px; height: 15px; stroke-width: 24; }
.app3-link em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--cx-gold-ink); }
.app3-link > svg.chev { width: 18px; height: 18px; color: #9C978D; flex-shrink: 0; margin-left: auto; }
.app3-link em + svg.chev { margin-left: 4px; }

/* Notifications */
.app3-note { display: flex; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--cx-line); }
.app3-note-ic { width: 42px; height: 42px; border-radius: 999px; background: #F1EADB; color: var(--cx-gold-ink); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 800; }
.app3-note b { font-size: 14.5px; font-weight: 800; color: var(--cx-ink); }
.app3-note p { font-size: 13px; color: var(--cx-ink-2); margin-top: 2px; line-height: 1.4; }
.app3-note small { font-size: 11px; color: var(--cx-ink-3); white-space: nowrap; }
.app3-note .unread { width: 7px; height: 7px; border-radius: 9px; background: var(--cx-gold); display: inline-block; margin-left: 6px; }

/* Payment */
.app3-pay-card { position: relative; overflow: hidden; background: radial-gradient(130% 160% at 100% 0%, #2B2418 0%, #121212 60%); color: #fff; border-radius: 20px; padding: 18px 20px; box-shadow: 0 14px 30px rgba(0,0,0,.22); }
.app3-pay-card small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #E9CF86; }
.app3-pay-card b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.6px; margin-top: 4px; }
.app3-pay-card span { display: block; font-size: 12.5px; color: rgba(255,255,255,.65); margin-top: 4px; }

/* Onboarding splash (first visit) */
.app3-onb { position: fixed; inset: 0; z-index: 200; background: radial-gradient(140% 90% at 50% 20%, #3A2E1C 0%, #1B150D 55%, #120E08 100%); color: #fff; display: flex; flex-direction: column; padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); transition: opacity .45s, transform .45s; }
.app3-onb[hidden] { display: none; }
.app3-onb.is-out { opacity: 0; transform: scale(1.03); pointer-events: none; }
.app3-onb-slides { flex: 1; position: relative; overflow: hidden; }
.app3-onb-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: 0; transform: translateX(30px); transition: opacity .5s, transform .5s var(--cx-ease); }
.app3-onb-slide.on { opacity: 1; transform: none; }
.app3-onb-orb { width: 210px; height: 210px; border-radius: 999px; background: radial-gradient(circle at 40% 35%, rgba(201,162,74,.38), rgba(201,162,74,.12) 60%, transparent 70%); display: flex; align-items: center; justify-content: center; margin-bottom: 34px; animation: app3-breathe 4s ease-in-out infinite; }
.app3-onb-orb svg { width: 72px; height: 72px; color: #D9B25A; }
@keyframes app3-breathe { 50% { transform: scale(1.05); } }
.app3-onb h2 { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600; font-size: 40px; line-height: 1.08; color: #E9CF86; }
.app3-onb h2 span { color: #fff; }
.app3-onb p { margin-top: 12px; font-size: 14px; color: rgba(255,255,255,.7); max-width: 280px; }
.app3-onb-dots { display: flex; justify-content: center; gap: 8px; margin: 18px 0 22px; }
.app3-onb-dots i { width: 7px; height: 7px; border-radius: 9px; background: rgba(255,255,255,.25); transition: all .3s; }
.app3-onb-dots i.on { background: #D9B25A; width: 20px; }
.app3-onb .cx-btn { width: 100%; height: 54px; font-size: 16px; }
.app3-onb-skip { display: block; text-align: center; margin-top: 14px; font-size: 14px; color: rgba(255,255,255,.65); }

/* Chips in the customer app sit on the cream canvas */
.sevwas-web .cx-chip { height: 38px; padding: 0 18px; }
.sevwas-web .cx-search input { height: 50px; border-radius: 16px; }

/* Desktop polish */
@media (min-width: 768px) {
  .app3-salon-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .app3-salon-grid > * + * { margin-top: 0 !important; }
}
.sevwas-web [hidden] { display: none !important; }
.app3-me-av { overflow: visible; }
.app3-me-av img { border-radius: 999px; z-index: 2; }
.app3-stats > a { display: block; }

/* ═══ Desktop website layout ═════════════════════════════════════════════════
   Everything below is scoped to min-width media queries, so phones (<768px)
   render exactly as before. Pages opt in with a width modifier on .app3:
     app3--wide (listing/grids) · app3--mid (two-pane detail) · app3--narrow
   and a few layout hooks (app3-2col, app3-book-grid, …) that are plain blocks
   on phones. */
.app3-lg-only { display: none; }

@media (min-width: 768px) {
  .app3.app3--wide { max-width: 960px; padding: 0 24px; }
}

@media (min-width: 1024px) {
  .app3-lg-only { display: block; }
  /* 1080px matches the top bar and salon detail (.app3-wide) so edges line up */
  .app3.app3--wide, .app3.app3--mid { max-width: 1080px; padding: 0 16px; }
  .app3.app3--narrow { max-width: 780px; padding: 0 16px; }
  .app3.app3--ty { max-width: 680px; padding: 8px 48px 40px; margin-top: 40px; background: #fff; border: 1px solid var(--cx-line); border-radius: 28px; box-shadow: 0 18px 44px rgba(17,17,17,.06); }

  /* Page header: left-aligned website title instead of a centred app bar */
  .app3-ph { padding: 30px 0 22px; gap: 12px; }
  .app3-ph h1 { text-align: left; font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600; font-size: 36px; letter-spacing: -.4px; line-height: 1.05; }
  .app3-ph > .text-center { text-align: left; }
  .app3-ph > .text-center p { font-size: 13.5px !important; margin-top: 4px; }
  .app3-back { border: 1px solid var(--cx-line); background: #fff; }

  /* Typography & spacing */
  .app3-section { margin: 36px 0 16px; }
  .app3-section h2 { font-size: 22px; }
  .app3-section a { font-size: 14px; }
  .app3-dark-cta { margin-top: 40px; padding: 22px 28px; border-radius: 22px; }
  .app3-dark-cta b { font-size: 24px; }
  .app3-dark-cta small { font-size: 13px; }
  .app3-slot-label { font-size: 16px; margin: 24px 0 10px; }

  /* Salon cards → vertical image cards in a 3-column grid */
  .app3--wide .app3-salon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .app3--wide .app3-salon-grid .app3-salon { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 20px; }
  .app3--wide .app3-salon-grid .app3-tile { width: 100%; height: 200px; border-radius: 0; }
  .app3--wide .app3-salon-grid .app3-tile::before { width: 160px; height: 160px; right: -40px; top: -50px; }
  .app3--wide .app3-salon-grid .app3-tile::after { width: 120px; height: 120px; left: -30px; bottom: -40px; }
  .app3--wide .app3-salon-grid .app3-tile b { font-size: 72px; }
  .app3--wide .app3-salon-grid .app3-salon-body { padding: 14px 16px 16px; }
  .app3--wide .app3-salon-grid .app3-salon-name { font-size: 17px; padding-right: 0; }
  .app3--wide .app3-salon-grid .app3-stars { font-size: 13px; margin-top: 5px; }
  .app3--wide .app3-salon-grid .app3-salon-meta { font-size: 13px; margin-top: 4px; }
  .app3--wide .app3-salon-grid .app3-heart { top: 12px; right: 12px; width: 38px; height: 38px; background: rgba(255,255,255,.92); box-shadow: 0 4px 12px rgba(0,0,0,.12); }

  /* Salon listing toolbar: search + city filter in one row, chips + sort below */
  .app3-list-top { display: flex; align-items: center; gap: 14px; }
  .app3-list-top > form:first-child { flex: 1; min-width: 0; }
  .app3-list-filter-btn { display: none !important; }
  .app3-list-filter { display: flex !important; align-items: center; gap: 10px; width: 420px; flex-shrink: 0; margin: 0 !important; padding: 0 !important; background: transparent; border: 0; box-shadow: none; }
  .app3-list-filter > label { display: none; }
  .app3-list-filter > .flex { flex: 1; }
  .app3-list-filter select.app3-input, .app3-list-filter .cx-btn { height: 50px !important; border-radius: 16px; }
  .app3-list-filter > a { margin: 0 !important; white-space: nowrap; }
  .app3-list-sub { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 18px 0 22px; }
  .app3-list-sub > .cx-chips { margin-top: 0; flex-wrap: wrap; overflow: visible; flex: 1; min-width: 0; }
  .app3-list-sub > div { margin: 0; flex-shrink: 0; gap: 14px; }

  /* Booking flow: steps left, sticky summary right */
  .app3-book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
  .app3-book-side { position: sticky; top: 76px; }
  .app3-book-main .app3-stepper { margin-top: 0; }
  .app3-book-main .cx-chips.-mx-4 { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
  .app3-svc-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .app3-svc-list .app3-svc + .app3-svc { margin-top: 0; }
  .app3-book-main .app3-dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0; padding: 2px 0 6px; overflow: visible; }
  .app3-book-main .app3-date { width: auto; }
  .app3-book-main .app3-slots { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .app3-book-main .app3-input { max-width: 100%; }
  .app3-side-card { background: #fff; border: 1px solid var(--cx-line); border-radius: 22px; padding: 20px; box-shadow: 0 14px 34px rgba(17,17,17,.07); }
  .app3-side-card h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 24px; color: var(--cx-ink); line-height: 1.1; }
  .app3-side-card .app3-side-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--cx-ink-2); padding: 5px 0; }
  .app3-side-card .app3-side-row b { color: var(--cx-ink); font-weight: 700; text-align: right; }
  .app3-side-card hr { border: 0; border-top: 1px solid var(--cx-line); margin: 12px 0; }

  /* Sticky CTA bar placed inside a side column becomes part of the card */
  .app3-book-side .app3-sticky-spacer, .app3-2col-side .app3-sticky-spacer { display: none; }
  .app3-book-side .app3-sticky, .app3-2col-side .app3-sticky { position: static; z-index: auto; background: transparent; transform: none; -webkit-transform: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--cx-line); margin-top: 16px; padding: 16px 0 0; }
  .app3-book-side .app3-sticky-in, .app3-2col-side .app3-sticky-in { max-width: none; }

  /* Any other sticky CTA bar (salon detail): align to the page width */
  .app3-sticky-in { max-width: 1080px; padding: 0 16px; }
  .app3-sticky-total { margin-right: auto; }
  .app3-sticky .cx-btn { flex: 0 0 auto; min-width: 220px; }
  .app3-book-side .app3-sticky .cx-btn, .app3-2col-side .app3-sticky .cx-btn { flex: 1; min-width: 0; }
  .app3-book-side .app3-sticky-in, .app3-2col-side .app3-sticky-in { padding: 0; }

  /* Generic two-pane: main + side (booking detail, pay, account) */
  .app3-2col { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; align-items: start; }
  .app3-2col-side { position: sticky; top: 76px; }
  .app3-2col-side > .app3-slot-label:first-child { margin-top: 0; }
  .app3-2col--acct { grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto 1fr; }
  .app3-2col--acct > .app3-2col-main { grid-column: 1; grid-row: 1; }
  .app3-2col--acct > .app3-2col-side { grid-column: 2; grid-row: 1 / span 2; }
  .app3-2col--acct > .app3-2col-extra { grid-column: 1; grid-row: 2; }
  .app3-2col--acct .app3-2col-side > .app3-section:first-child { margin-top: 0; }
  .app3-acct-recent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .app3-acct-recent > * { margin-top: 0 !important; }

  /* My bookings: card grid */
  .app3-bk-seg { max-width: 520px; }
  .app3-bk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .app3-bk-list > * { margin-top: 0 !important; }
  .app3-bk-list > .cx-card { grid-column: 1 / -1; max-width: 560px; width: 100%; justify-self: center; }

  /* Notifications: roomier list */
  .app3-note { padding: 18px 12px; border-radius: 14px; }
  .app3-note b { font-size: 15.5px; }
  .app3-note p { font-size: 14px; }
  .app3-notes-seg { max-width: 460px; }

  /* Explore services */
  .app3-explore-search { max-width: 640px; }
  .app3--wide .app3-cats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .app3--wide .app3-cat { padding: 22px 10px 16px; font-size: 14px; }
  .app3-explore-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 32px; align-items: start; }

  /* Saved salons / empty states */
  .app3--wide #saved-empty { max-width: 560px; margin: 24px auto 0; }

  /* Blog list */
  .app3-blog-head { max-width: none; }
  .app3-blog-head .app3-title { font-size: 44px; }
  .app3-blog-head > p.text-\[13\.5px\] { max-width: 640px; font-size: 15px; }
  .app3-blog-head .cx-search { display: block; max-width: 520px; }
  .app3-blog-head .cx-chips { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; }
  #blog-grid { gap: 22px; }
  #blog-grid .blog-grid-card { flex-direction: column; padding: 0 !important; overflow: hidden; border-radius: 20px; }
  #blog-grid .blog-grid-card > span:first-child { width: 100%; height: 190px; border-radius: 0; }
  #blog-grid .blog-grid-card > span:last-child { padding: 14px 16px 18px; }
  #blog-grid .blog-grid-card b { font-size: 16.5px; }

  /* Reschedule / cancel sheet → centred dialog */
  .app3-sheet { align-items: center; }
  .app3-sheet > .relative { max-width: 480px; border-radius: 26px; }

  /* Thank-you */
  .app3--ty .app3-summary { box-shadow: none; }
}

@media (min-width: 1280px) {
  .app3-bk-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Hover states (desktop pointers only) */
@media (min-width: 1024px) and (hover: hover) {
  .app3-salon, .app3-feat, .app3-cat, .app3-link, .app3-upcoming, .app3-bk-list > a, .blog-grid-card, .app3-acct-recent > a { transition: transform .2s var(--cx-ease), box-shadow .2s, border-color .2s; }
  .app3-salon:hover, .app3-feat:hover, .app3-cat:hover, .app3-bk-list > a:hover, .blog-grid-card:hover, .app3-upcoming:hover, .app3-acct-recent > a:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(17,17,17,.10); border-color: rgba(201,162,74,.45); }
  .app3-link:hover { border-color: rgba(201,162,74,.45); background: #FFFCF5; }
  .app3-note:hover { background: rgba(255,255,255,.7); }
  .app3-svc:hover { border-color: rgba(201,162,74,.5); }
  .app3-date:not(:disabled):not(.is-on):hover, .app3-slot:not(:disabled):not(.is-on):hover { border-color: var(--cx-gold); }
  .app3-dark-cta:hover { box-shadow: 0 16px 34px rgba(0,0,0,.26); }
  .app3-back:hover { background: #fff; border-color: var(--cx-line-strong); }
  .cx-chip:hover { border-color: var(--cx-gold); }
}

/* ═══ Shell: smooth scroll, no stuck bars, no zoom quirks (customer app only) ══ */
/* A stable min-height: 100dvh changes while Safari's toolbar collapses, which
   re-lays-out the whole page mid-scroll. svh never changes during a scroll. */
body.sevwas-web { min-height: 100vh; min-height: 100svh; }
/* Installed app: no rubber-band at the top/bottom — the bars stay put instead
   of being dragged along with the bounce (refresh lives in the top bar). */
@media (display-mode: standalone) {
  html:has(body.sevwas-web), body.sevwas-web { overscroll-behavior-y: none; }
}
/* Flat, near-opaque "glass" cards on the cream canvas look identical without a
   backdrop blur, but each blurred card is re-composited on every scroll frame.
   (Full-screen dimmers for open sheets keep theirs — they don't scroll.) */
.sevwas-web :is(.card-glass, .glass, .glass-sm, .glass-strong, .glass-light, .glass-secondary-sm, .btn-glass, .btn-glass-secondary),
.sevwas-web .sticky[class*="backdrop-blur"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* Page-load animations: never hide content for long. The old stagger kept cards
   invisible for up to ~0.9s and the hero's delayed fade-ups flashed (visible →
   blank → fade in). Short, delay-free, and filled from the first frame. */
.sevwas-web .stagger > * { animation-duration: .28s; animation-fill-mode: both; }
.sevwas-web .stagger > *:nth-child(n) { animation-delay: 0s; }
.sevwas-web .stagger > *:nth-child(2) { animation-delay: .03s; }
.sevwas-web .stagger > *:nth-child(3) { animation-delay: .06s; }
.sevwas-web .stagger > *:nth-child(n+4) { animation-delay: .09s; }
.sevwas-web .animate-fade-in, .sevwas-web .animate-fade-in-up { animation-duration: .3s !important; animation-delay: 0s !important; animation-fill-mode: both !important; }

/* iOS zooms the page when a focused field is under 16px — keep them at 16px
   on iOS only (Android/desktop keep their designed sizes). */
@supports (-webkit-touch-callout: none) {
  .sevwas-web :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not(.otp-digit):not(.app3-otp input), select, textarea) { font-size: 16px !important; }
}
/* Interactive bits: no double-tap-zoom delay even inside scroll strips. */
.sevwas-web :is(a, button, input, select, textarea, label, summary, [role=button]) { touch-action: manipulation; }

/* Sheets / popups: always fit the VISIBLE screen on iPhone (vh ≠ visible height
   while Safari's toolbars show) and scroll inside without dragging the page. */
.sevwas-web .max-h-\[92vh\] { max-height: 92vh; max-height: 92dvh; }
.sevwas-web .max-h-\[86vh\] { max-height: 86vh; max-height: 86dvh; }
.sevwas-web .fixed.inset-0 .overflow-y-auto, .sevwas-web .fixed.inset-0.overflow-y-auto { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.app3-sheet > .relative { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* Below-the-fold blocks: skip layout/paint until they're near the viewport. */
.sevwas-web > footer, .sevwas-web #install-guide { content-visibility: auto; contain-intrinsic-size: auto 420px; }

/* ═══ Install the Sevwas App — glowing pills that expand into steps ═════════ */
@property --ig-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@media (display-mode: standalone) { #install-guide { display: none !important; } }
.ig-head { text-align: center; margin-bottom: 22px; }
.ig-badge { display: inline-flex; width: 42px; height: 42px; border-radius: 14px; align-items: center; justify-content: center; background: var(--cx-gold-wash, #F6EEDC); color: var(--cx-gold-ink, #8A6A1F); margin-bottom: 10px; }
.ig-badge svg { width: 22px; height: 22px; }
.ig-sub { font-size: 14px; color: var(--cx-ink-2, #5E5A52); margin: 8px auto 0; max-width: 34rem; line-height: 1.5; }
.ig-list { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
@media (min-width: 768px) { .ig-list { grid-template-columns: 1fr 1fr; align-items: start; gap: 16px; } }

.ig-item { position: relative; isolation: isolate; border-radius: 34px; background: #fff; border: 1px solid rgba(200,162,74,.28); transition: border-radius .35s var(--cx-ease, cubic-bezier(.22,1,.36,1)), border-color .3s, box-shadow .3s; }
/* Rotating gold light that travels around the pill's edge (collapsed only) */
.ig-item::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--ig-angle), rgba(200,162,74,0) 0deg, rgba(200,162,74,0) 220deg, #E9CF86 285deg, #C8A24A 320deg, rgba(200,162,74,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ig-orbit 3.6s linear infinite paused; transition: opacity .3s; }
/* Soft breathing halo behind the pill (opacity-only → compositor, cheap) */
.ig-item::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 4px rgba(200,162,74,.10), 0 6px 26px rgba(200,162,74,.38); opacity: .35; animation: ig-breathe 2.8s ease-in-out infinite paused; transition: opacity .3s; }
.ig-item.ig-live::before, .ig-item.ig-live::after { animation-play-state: running; }
.ig-item.is-open { border-radius: 24px; border-color: rgba(200,162,74,.55); box-shadow: 0 14px 34px rgba(17,17,17,.07); }
.ig-item.is-open::before, .ig-item.is-open::after { opacity: 0; animation: none; }
@keyframes ig-orbit { to { --ig-angle: 360deg; } }
@keyframes ig-breathe { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }

.ig-pill { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 10px 14px 10px 10px; border-radius: 34px; background: transparent; border: 0; text-align: left; color: var(--cx-ink, #111); cursor: pointer; font: inherit; }
.ig-pill:focus-visible { outline: 2px solid var(--cx-gold, #C8A24A); outline-offset: 3px; }
.ig-logo { width: 46px; height: 46px; flex-shrink: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.ig-logo svg { width: 24px; height: 24px; display: block; }
.ig-logo--apple { background: #111; color: #fff; }
.ig-logo--apple svg { width: 22px; height: 22px; margin-top: -2px; }
.ig-logo--android { background: #E8F5EC; color: #3DDC84; }
.ig-logo--android svg { width: 28px; height: 28px; color: #2BB56B; }
.ig-txt { flex: 1; min-width: 0; }
.ig-txt b { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.2px; color: var(--cx-ink, #111); }
.ig-txt small { display: block; font-size: 12.5px; color: var(--cx-ink-3, #8A857B); margin-top: 1px; }
.ig-tag { display: inline-block; margin-left: 8px; vertical-align: 1px; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1; color: var(--cx-gold-ink, #8A6A1F); background: var(--cx-gold-wash, #F6EEDC); padding: 4px 7px; border-radius: 999px; }
.ig-chev { width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #F4F1EA; color: var(--cx-ink-2, #5E5A52); transition: transform .35s var(--cx-ease, cubic-bezier(.22,1,.36,1)), background .2s; }
.ig-chev svg { width: 16px; height: 16px; }
.ig-item.is-open .ig-chev { transform: rotate(180deg); background: #111; color: #E9CF86; }

/* Smooth height animation without measuring: 0fr → 1fr grid row */
.ig-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .38s var(--cx-ease, cubic-bezier(.22,1,.36,1)), visibility 0s linear .38s; }
.ig-item.is-open .ig-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .38s var(--cx-ease, cubic-bezier(.22,1,.36,1)), visibility 0s; }
.ig-panel-in { overflow: hidden; min-height: 0; }
.ig-steps { list-style: none; margin: 0; padding: 2px 16px 16px; counter-reset: ig; }
.ig-steps li { counter-increment: ig; position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; font-size: 14px; line-height: 1.5; color: var(--cx-ink-2, #3F3B35); }
.ig-steps li + li { border-top: 1px dashed rgba(17,17,17,.09); }
.ig-steps li::before { content: counter(ig); width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px; border-radius: 999px; background: #111; color: #E9CF86; font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ig-steps strong { color: var(--cx-ink, #111); font-weight: 700; }
/* Inline UI icons ("tap this") drawn like the real system buttons */
.ig-ui { display: inline-flex; align-items: center; justify-content: center; vertical-align: -6px; width: 26px; height: 24px; margin: 0 2px; border-radius: 7px; background: #F1EFEA; border: 1px solid rgba(17,17,17,.08); }
.ig-ui svg { width: 16px; height: 16px; }
.ig-ui--ios { color: #007AFF; }
.ig-ui--droid { color: #3C4043; }
.ig-note { margin: 0 16px 16px; padding: 10px 12px; border-radius: 14px; background: #F6F1E6; font-size: 12.5px; color: var(--cx-ink-2, #5E5A52); line-height: 1.45; }
.ig-now { margin: 0 16px 16px; display: none; }
.ig-now.is-ready { display: flex; }

@media (min-width: 1024px) and (hover: hover) {
  .ig-pill:hover .ig-chev { background: #ECE7DD; }
  .ig-item.is-open .ig-pill:hover .ig-chev { background: #111; }
}
@media (prefers-reduced-motion: reduce) {
  .ig-item::before, .ig-item::after { animation: none !important; }
  .ig-item::after { opacity: .6; }
  .ig-panel, .ig-item.is-open .ig-panel, .ig-chev, .ig-item { transition: none !important; }
}

/* ── Floating, see-through pill tab bar (matches the CRM) ─────────────────── */
@media (max-width: 767px) {
  .app3-tabbar {
    left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px));
    bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) - 6px));
    gap: 2px; padding: 6px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 10px 30px rgba(17, 17, 17, 0.16), 0 2px 6px rgba(17, 17, 17, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    transform: translate3d(0, 0, 0);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app3-tabbar { background: rgba(255, 255, 255, 0.96); }
  }
  .app3-tabbar a { border-radius: 999px; padding: 7px 0 6px; transition: color .15s, background-color .15s; }
  .app3-tabbar a:active { background: rgba(17, 17, 17, 0.05); }
  .app3-tabbar a.is-on { background: rgba(201, 162, 74, 0.18); }
  .app3-tab-spacer { height: calc(96px + env(safe-area-inset-bottom)); }
}