/* A+ Esthetic — premium customer experience
   Luxury visual layer only: no booking, wallet, record or auth business logic changes. */

:root{
  --lux-ink:#171612;
  --lux-ink-2:#24211b;
  --lux-ivory:#f6f2e9;
  --lux-ivory-2:#fbf8f1;
  --lux-paper:rgba(255,255,255,.92);
  --lux-gold:#c7a05a;
  --lux-gold-2:#9d7839;
  --lux-gold-pale:#f2e4c5;
  --lux-line:rgba(80,66,43,.13);
  --lux-muted:#7f786d;
  --lux-shadow:0 22px 60px rgba(43,34,20,.08);
  --lux-shadow-soft:0 10px 30px rgba(43,34,20,.055);
}

html,body{background:var(--lux-ivory)!important}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* ---------- App shell ---------- */
.core-shell{
  position:relative;
  isolation:isolate;
  min-height:100dvh;
  padding-bottom:126px;
  background:
    radial-gradient(circle at 92% 2%,rgba(199,160,90,.16),transparent 25rem),
    radial-gradient(circle at 0 34%,rgba(255,255,255,.92),transparent 23rem),
    linear-gradient(180deg,#f8f5ee 0%,#f3efe6 100%);
}
.core-shell:before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background-image:linear-gradient(rgba(61,49,31,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(61,49,31,.014) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(to bottom,black,transparent 70%);
}

.core-header{
  height:64px;
  width:calc(100% - 24px);
  margin:10px 12px 0;
  padding:0 11px;
  grid-template-columns:44px 1fr 44px;
  position:sticky;
  top:10px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:21px;
  background:rgba(255,255,255,.76);
  box-shadow:0 10px 30px rgba(42,33,20,.075),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}
.core-brand strong{font:500 20px/1.05 Georgia,"Times New Roman",serif;letter-spacing:-.025em;color:var(--lux-ink)}
.core-brand span{margin-top:5px;color:var(--lux-gold-2);font-size:7px;letter-spacing:.25em}
.core-icon-btn{
  width:40px;height:40px;
  border:1px solid rgba(77,62,39,.12);
  background:rgba(255,255,255,.82);
  color:var(--lux-ink);
  box-shadow:0 5px 15px rgba(36,29,18,.045);
}
.core-icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.core-main{width:min(760px,100%);padding:24px 16px 38px}
.page-head,.canonical-book-intro,.wallet-page-head{margin:6px 2px 22px}
.page-head .eyebrow,.canonical-book-intro>span,.wallet-page-head>span{
  gap:10px;color:var(--lux-gold-2);font-size:9px;font-weight:850;letter-spacing:.19em
}
.page-head .eyebrow:before,.canonical-book-intro>span:before,.wallet-page-head>span:before{width:31px;background:linear-gradient(90deg,var(--lux-gold),rgba(199,160,90,.25))}
.page-head h1,.canonical-book-intro h1,.wallet-page-head h1{
  margin:10px 0 8px;
  font:500 clamp(34px,8vw,48px)/.98 Georgia,"Times New Roman",serif;
  letter-spacing:-.047em;
  color:var(--lux-ink)
}
.page-head p,.canonical-book-intro p,.wallet-page-head p{max-width:520px;color:var(--lux-muted);font-size:13px;line-height:1.55}

/* ---------- Floating bottom navigation ---------- */
.core-nav{
  left:12px;right:12px;bottom:10px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:24px;
  padding:7px;
  background:rgba(22,21,18,.94);
  box-shadow:0 18px 44px rgba(20,18,13,.24),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(24px) saturate(130%);
  -webkit-backdrop-filter:blur(24px) saturate(130%);
}
.nav-btn{
  position:relative;
  min-height:55px;
  gap:5px;
  padding:7px 2px 6px;
  color:rgba(255,255,255,.57);
  border-radius:17px;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.nav-btn:active{transform:scale(.96)}
.nav-btn>span:first-child{width:24px;height:24px;display:grid;place-items:center;font-size:0}
.nav-btn>span:first-child svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.nav-btn>span:last-child{font-size:8px;font-weight:750;letter-spacing:.01em}
.nav-btn.is-active{
  color:#221e17;
  background:linear-gradient(145deg,#f3e3bf,#d4ad67);
  box-shadow:0 8px 18px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.55);
}
.nav-btn.is-active:after{content:"";position:absolute;top:4px;width:18px;height:2px;border-radius:99px;background:rgba(76,54,21,.38)}

/* ---------- Surfaces ---------- */
.card,.review-cta,.appointment-row,.review-row,.referral-row,.record-row,.wallet-row,.wallet-identity-panel,.book-my-appointments{
  border-color:var(--lux-line);
  box-shadow:var(--lux-shadow-soft);
}
.card{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:var(--lux-paper);
  padding:20px;
  margin-bottom:15px;
  backdrop-filter:blur(12px);
}
.card h2{font-size:25px;letter-spacing:-.025em}
.section-title{margin:29px 3px 12px}
.section-title h2{font-size:24px;letter-spacing:-.02em}
.section-title small{
  min-width:29px;height:29px;display:grid;place-items:center;
  padding:0 8px;border:1px solid var(--lux-line);border-radius:999px;
  background:rgba(255,255,255,.7);font-size:9px;color:#746c60
}

.field{gap:7px;margin-bottom:14px}
.field>span{font-size:10px;color:#5f584d;letter-spacing:.025em}
.field input,.field select,.field textarea{
  min-height:51px;
  border:1px solid rgba(75,62,40,.14);
  border-radius:15px;
  background:rgba(255,255,255,.95);
  padding:13px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.field textarea{min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:#c69c50;
  background:#fff;
  box-shadow:0 0 0 4px rgba(199,160,90,.10),0 8px 20px rgba(53,41,22,.045)
}
.primary,.secondary,.danger,.text-btn{
  min-height:49px;border-radius:15px;padding:13px 16px;font-size:12px;font-weight:800;letter-spacing:.01em
}
.primary{
  background:linear-gradient(135deg,#d7b56f 0%,#b88c3c 100%);
  color:#fff;
  box-shadow:0 12px 26px rgba(163,117,40,.22),inset 0 1px 0 rgba(255,255,255,.26)
}
.primary:active,.secondary:active{transform:translateY(1px)}
.primary:disabled{opacity:.42;box-shadow:none}
.secondary{background:rgba(255,255,255,.88);border-color:rgba(72,59,38,.14);color:var(--lux-ink)}
.danger{background:#fff7f5;border-color:#efd7d1}

.notice{border-radius:16px;padding:13px 14px;background:#fff9ec;border-color:#e8d6ae;box-shadow:0 7px 20px rgba(61,47,23,.035)}
.empty{
  min-height:92px;display:grid;place-items:center;padding:25px 16px;
  color:#8a8277;font-size:12px;
  border:1px dashed rgba(87,70,42,.16);border-radius:19px;background:rgba(255,255,255,.42)
}

/* ---------- Appointments / booking ---------- */
.appointment-feature{
  min-height:156px;
  padding:22px;
  border-radius:27px;
  background:
    radial-gradient(circle at 90% 15%,rgba(230,200,139,.20),transparent 11rem),
    linear-gradient(135deg,#171713 0%,#29251e 58%,#171510 100%);
  box-shadow:0 22px 50px rgba(25,22,16,.20);
}
.appointment-feature:after{
  content:"A+";position:absolute;right:18px;bottom:-17px;color:rgba(229,198,137,.08);
  font:500 86px/1 Georgia,serif;letter-spacing:-.08em
}
.appointment-feature .eyebrow{color:#dec387}
.appointment-feature .appointment-time{font-size:30px;margin-top:17px;letter-spacing:-.025em}
.appointment-feature .appointment-meta{font-size:12px;color:rgba(255,255,255,.70)}
.appointment-row{
  position:relative;
  grid-template-columns:62px minmax(0,1fr);
  gap:14px;
  padding:14px;
  border-radius:19px;
  background:rgba(255,255,255,.86);
  transition:transform .18s ease,box-shadow .18s ease
}
.appointment-row:active{transform:scale(.994)}
.date-box{
  width:62px;min-height:68px;border-radius:17px;padding:10px 5px;
  background:linear-gradient(145deg,#faf4e8,#f1e3c7);border:1px solid rgba(164,127,58,.13)
}
.date-box b{font-size:24px}.date-box span{font-size:8px;letter-spacing:.08em;color:#8b682c}
.row-title{font-size:14px;line-height:1.3}.row-sub{font-size:11px;line-height:1.5;color:#81796e}
.status{margin-top:7px;padding:5px 9px;font-size:9px;border:1px solid rgba(75,62,42,.05)}

/* Canonical booking flow */
.book-embedded-canonical .book-flow,.book-flow{
  --book-ink:#171612;--book-muted:#777066;--book-paper:#f8f4eb;--book-card:#fff;--book-gold:#b9924d;--book-line:rgba(72,58,37,.13);--book-soft:#eee6d7;
  border:1px solid rgba(72,58,37,.10);
  border-radius:29px;
  padding:26px 20px;
  background:
    radial-gradient(circle at 96% 0,rgba(199,160,90,.10),transparent 18rem),
    rgba(255,255,255,.91);
  box-shadow:var(--lux-shadow)
}
.book-progress{margin-bottom:29px}
.book-progress-dot{width:36px;height:36px;border-color:rgba(76,61,38,.13);box-shadow:0 5px 14px rgba(42,33,20,.035)}
.book-progress-dot.is-active,.book-progress-dot.is-done{background:linear-gradient(145deg,#26231d,#11110f);box-shadow:0 7px 18px rgba(22,20,16,.18)}
.book-step-head>span{color:#a9803c}.book-step-head h2{font-size:clamp(29px,7vw,40px)}.book-step-head p{font-size:13px}
.book-choice-card{
  border-color:rgba(76,61,38,.12);border-radius:20px;padding:18px;
  background:linear-gradient(160deg,#fff,#fcfaf5);
  box-shadow:0 9px 24px rgba(44,34,20,.035)
}
.book-choice-card:active{transform:scale(.985);border-color:#c8a35d}
.book-treatment-icon{width:47px;height:47px;border-radius:15px;background:linear-gradient(145deg,#fbf5e8,#f1e1c1);color:#9b7533}
.book-staff-card{min-height:116px}.book-staff-avatar{border:2px solid #f1e6d1;box-shadow:0 7px 18px rgba(42,33,20,.07)}
.book-back{border-radius:999px;padding:9px 14px;background:#faf7f0;font-size:11px}
.book-date-chip{border-color:rgba(75,61,40,.13);border-radius:19px;background:linear-gradient(160deg,#fff,#fbf8f2)}
.book-date-chip.is-active{background:linear-gradient(145deg,#27231c,#15130f);box-shadow:0 12px 26px rgba(25,21,15,.19)}
.book-time-panel{border-radius:22px;border-color:rgba(75,61,40,.12);background:linear-gradient(180deg,#fff,#faf7f0)}
.book-slot{border-radius:13px;background:#f8f4eb;border-color:rgba(75,61,40,.12);transition:.15s}
.book-slot:active{background:#201d18;color:#fff;transform:scale(.97)}
.book-primary{min-height:52px;border-radius:15px;background:linear-gradient(135deg,#22201b,#11110e);box-shadow:0 12px 26px rgba(22,20,16,.18)}
.book-summary{border-radius:18px;background:#f8f3e9}
.book-my-appointments{border-radius:23px;background:rgba(255,255,255,.87)}

/* ---------- Reviews ---------- */
.review-cta{
  position:relative;overflow:hidden;
  padding:23px;border-radius:27px;
  background:
    radial-gradient(circle at 90% 5%,rgba(231,199,133,.22),transparent 12rem),
    linear-gradient(140deg,#1a1915,#2a261f 68%,#1a1814);
  color:#fff;border:0;box-shadow:0 22px 50px rgba(25,22,16,.18)
}
.review-cta:after{content:"★";position:absolute;right:17px;bottom:-17px;font-size:96px;color:rgba(230,198,133,.075)}
.review-cta .eyebrow{color:#dec183}.review-cta h2{color:#fff!important}.review-cta .row-sub{max-width:460px;color:rgba(255,255,255,.67)}
.review-cta .primary{background:linear-gradient(135deg,#e1c27e,#b8893a);box-shadow:0 10px 25px rgba(0,0,0,.18)}
.review-row{padding:16px;border-radius:19px;background:rgba(255,255,255,.86)}
.review-row-head strong{color:#b38635;letter-spacing:1px}

/* ---------- Referrals / friends ---------- */
.route-friends .core-main>.card:first-of-type{
  background:
    radial-gradient(circle at 96% 5%,rgba(199,160,90,.15),transparent 13rem),
    linear-gradient(155deg,#fff,#fbf6ec);
}
.route-friends .core-main>.card:first-of-type:before{
  content:"↗";position:absolute;right:18px;top:13px;width:43px;height:43px;border-radius:14px;
  display:grid;place-items:center;background:#1e1c17;color:#daba76;font-size:20px
}
.referral-row{padding:15px;border-radius:19px;background:rgba(255,255,255,.86)}

/* ---------- Wallet ---------- */
.aplus-member-card{
  min-height:238px;border-radius:30px;padding:23px;
  background:
    radial-gradient(circle at 85% 7%,rgba(232,204,149,.22),transparent 15rem),
    linear-gradient(130deg,#0d1317 0%,#19242b 55%,#0d1215 100%);
  box-shadow:0 28px 65px rgba(13,18,21,.28),inset 0 0 0 1px rgba(255,255,255,.08)
}
.aplus-member-card:before{background:linear-gradient(112deg,transparent 38%,rgba(227,198,142,.10) 46%,transparent 59%)}
.aplus-member-card:after{right:-50px;top:-52px;width:205px;height:205px;border-color:rgba(239,214,166,.22)}
.member-card-logo{width:148px}.member-card-tier{border-color:rgba(238,211,159,.35);background:rgba(239,216,170,.08);color:#ecd39f}
.member-card-name{margin:34px 0 29px}.member-card-name strong{font-size:27px}
.member-card-bottom>div:first-child strong{font-size:31px}.member-card-bottom strong{color:#fff}
.wallet-identity-panel{border-radius:25px;padding:18px;background:rgba(255,255,255,.89)}
.wallet-qr-frame{border-radius:22px;padding:9px;box-shadow:0 12px 28px rgba(37,29,18,.08)}
.wallet-qr-fallback{background:linear-gradient(145deg,#121b20,#27383f);color:#e4c58a}
.wallet-provider{
  min-height:67px;border-radius:17px;background:linear-gradient(145deg,#181816,#292620);border:0;color:#fff;
  box-shadow:0 10px 23px rgba(26,23,18,.14)
}
.wallet-provider-icon{background:#fff;color:#111;border-radius:12px}.wallet-provider small{color:rgba(255,255,255,.52)}.wallet-provider i{color:#d8ba7b}
.wallet-ledger{gap:9px}.wallet-ledger-row{border-radius:17px;background:rgba(255,255,255,.86);box-shadow:0 7px 20px rgba(42,33,20,.035)}
.wallet-ledger-mark{border-radius:13px}.wallet-legal-note{margin-top:17px}

/* ---------- Patient records ---------- */
.upload-box.record-composer{
  border-radius:27px;
  border-color:rgba(79,63,40,.13);
  background:rgba(255,255,255,.90);
  box-shadow:var(--lux-shadow)
}
.record-composer-head{padding:19px;background:linear-gradient(145deg,#fffdf8,#f6eddb);border-bottom-color:rgba(86,69,42,.10)}
.record-composer-mark{width:44px;height:44px;background:linear-gradient(145deg,#25221c,#11110e);color:#e2c47f;box-shadow:0 9px 22px rgba(24,21,16,.18)}
.record-composer form{padding:18px}
.record-file-picker{border-color:#cbb178;background:linear-gradient(145deg,#fdfaf3,#f8f0df);border-radius:18px}
.record-file-icon{background:#fff;border-color:rgba(99,76,36,.13)}
.records-empty{border-radius:22px;background:rgba(255,255,255,.56)}
.record-row.record-polished{border-radius:20px;background:rgba(255,255,255,.87);box-shadow:0 9px 25px rgba(42,33,20,.04)}
.record-type-icon{background:linear-gradient(145deg,#faf4e8,#f1e2c5)}

/* ---------- Settings sheet ---------- */
.settings-overlay{
  background:rgba(17,15,12,.48);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px)
}
.settings-card{
  width:min(620px,100%);
  margin:0 auto;
  border-radius:30px 30px 0 0;
  padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#fff,#f8f4ec);
  box-shadow:0 -24px 70px rgba(18,15,10,.20)
}
.settings-head h2{font-size:28px;letter-spacing:-.03em}.settings-user{border:1px solid rgba(79,63,40,.10);background:linear-gradient(145deg,#f8f3e9,#fff);border-radius:18px;padding:15px}
.settings-link{min-height:52px;padding:15px 4px;border-color:rgba(80,64,41,.10);font-size:12px}.settings-link span{font-size:19px;color:#a98c57}
.settings-card .danger{margin-top:18px!important;min-height:51px}

/* ---------- Login ---------- */
.login-shell{
  position:relative;overflow:hidden;
  min-height:100dvh;
  padding:34px 18px max(34px,env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 80% 10%,rgba(220,187,118,.23),transparent 18rem),
    radial-gradient(circle at 8% 92%,rgba(199,160,90,.12),transparent 19rem),
    linear-gradient(145deg,#171713,#28241d 58%,#12110e)
}
.login-shell:before{content:"A+";position:absolute;right:-25px;top:4vh;color:rgba(232,205,151,.05);font:500 190px/1 Georgia,serif;letter-spacing:-.12em}
.login-card{
  position:relative;
  width:min(440px,100%);
  padding:29px 27px 27px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:31px;
  background:rgba(255,255,255,.94);
  box-shadow:0 32px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(20px)
}
.login-logo[data-real-logo="1"]{margin-bottom:27px}.login-brand-logo{width:min(220px,70%);max-height:78px}.login-logo[data-real-logo="1"] span{font-size:7px;letter-spacing:.31em}
.login-card h1{font-size:37px;letter-spacing:-.04em}.login-card>p{font-size:12px;margin-bottom:22px}.login-card .primary{min-height:53px}

/* ---------- Motion ---------- */
.core-main>*{animation:luxRise .32s cubic-bezier(.2,.75,.25,1) both}
.core-main>*:nth-child(2){animation-delay:.025s}.core-main>*:nth-child(3){animation-delay:.05s}.core-main>*:nth-child(4){animation-delay:.075s}
@keyframes luxRise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* ---------- Native/mobile tuning ---------- */
html.aplus-android .core-shell{padding-bottom:118px}
html.aplus-android .core-nav{padding-bottom:7px;bottom:10px}
html.aplus-android .settings-card{padding-bottom:22px}

@media(max-width:540px){
  .core-main{padding:21px 13px 34px}
  .core-header{width:calc(100% - 20px);margin-left:10px;margin-right:10px}
  .core-nav{left:10px;right:10px;border-radius:22px}
  .nav-btn{min-height:53px;border-radius:16px}
  .page-head h1,.canonical-book-intro h1,.wallet-page-head h1{font-size:39px}
  .card{padding:17px;border-radius:22px}
  .appointment-feature{padding:20px;border-radius:24px}.appointment-feature .appointment-time{font-size:27px}
  .book-embedded-canonical .book-flow,.book-flow{padding:22px 14px;border-radius:24px}
  .book-choice-card{border-radius:18px}.book-time-panel{padding:15px}
  .aplus-member-card{min-height:224px;padding:20px;border-radius:25px}.member-card-name{margin:29px 0 25px}
  .wallet-identity-panel{border-radius:22px;padding:15px}
  .record-composer-head{padding:17px 15px}.record-composer form{padding:15px}
}
@media(max-width:380px){
  .core-main{padding-left:11px;padding-right:11px}
  .nav-btn>span:last-child{font-size:7px}
  .nav-btn>span:first-child svg{width:19px;height:19px}
  .appointment-row{grid-template-columns:57px 1fr}.date-box{width:57px}
  .member-card-number strong{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
  .core-main>*,.nav-btn,.book-choice-card,.book-slot{animation:none!important;transition:none!important}
}