/* VetYab premium presentation layer
   Loaded after page CSS so existing markup, IDs and application behaviour stay intact. */
:root{
  --bg:#f7f6f1;--surface:#fffefb;--surface-2:#f0f3ef;--card:#fffefb;
  --ink:#102a35;--ink-dim:#3e5057;--muted:#718087;--line:#e2e7e2;--line-2:#cfd9d3;
  --brand:#087f67;--brand-strong:#066b57;--brand-soft:#e2f0ea;--brand-ink:#fff;
  --brand-2:#1b5f75;--brand-2-soft:#e6f0f3;--warn:#c58d31;--warn-soft:#fbf1de;
  --grad:linear-gradient(135deg,#087f67,#056b58);
  --grad-soft:linear-gradient(135deg,rgba(8,127,103,.13),rgba(27,95,117,.08));
  --mesh:radial-gradient(75% 55% at 95% 0,rgba(8,127,103,.10),transparent 62%),
         radial-gradient(60% 48% at 0 10%,rgba(197,141,49,.07),transparent 58%),var(--bg);
  --glass:rgba(255,254,251,.84);--pin-bg:#fffefb;
  --r-sm:12px;--r:16px;--r-lg:20px;--r-xl:28px;--radius:16px;--radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(16,42,53,.04),0 8px 24px -18px rgba(16,42,53,.22);
  --shadow:0 18px 44px -28px rgba(16,42,53,.34);
  --shadow-lg:0 32px 72px -36px rgba(16,42,53,.42);
  --shadow-brand:0 16px 34px -18px rgba(8,127,103,.58);
  --ease:cubic-bezier(.22,1,.36,1);--t:.25s var(--ease);--t-slow:.65s var(--ease);
  --ring:0 0 0 4px rgba(8,127,103,.17);
  --fs-3xl:2.15rem;
}
:root[data-theme="dark"]{
  --bg:#0b171b;--surface:#122126;--surface-2:#182b30;--card:#14252a;
  --ink:#eef5f1;--ink-dim:#c2d0ca;--muted:#8ea39b;--line:#243a3f;--line-2:#355057;
  --brand:#43c7a4;--brand-strong:#31ad8c;--brand-soft:rgba(67,199,164,.14);--brand-ink:#06231c;
  --brand-2:#70b6ca;--brand-2-soft:rgba(112,182,202,.13);--warn:#e0ad59;--warn-soft:rgba(224,173,89,.13);
  --mesh:radial-gradient(70% 52% at 96% 0,rgba(67,199,164,.13),transparent 62%),
         radial-gradient(55% 45% at 0 8%,rgba(224,173,89,.08),transparent 60%),var(--bg);
  --glass:rgba(18,33,38,.84);--pin-bg:#182b30;
  --shadow-sm:0 8px 24px -18px rgba(0,0,0,.55);--shadow:0 20px 48px -28px rgba(0,0,0,.72);
  --shadow-lg:0 34px 76px -36px rgba(0,0,0,.82);
}

html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
body{letter-spacing:-.006em;background:var(--bg)}
body::before{opacity:.95}
.container{max-width:1240px;padding-inline:clamp(18px,3vw,36px)}
h1,h2,h3,h4{letter-spacing:-.038em}
p{letter-spacing:-.012em}

/* Navigation and brand */
.nav{height:76px;background:color-mix(in srgb,var(--surface) 88%,transparent);border-bottom-color:color-mix(in srgb,var(--line) 82%,transparent)}
.nav__inner{height:76px}
.logo{display:inline-flex;align-items:center;font-size:1.55rem;letter-spacing:-.065em;position:relative}
.logo::before{content:"";width:31px;height:31px;margin-inline-end:.55rem;border:2px solid var(--brand);border-radius:11px 11px 14px 14px;transform:rotate(45deg);opacity:.14}
.logo::after{content:"•";position:absolute;inset-inline-start:10px;top:19px;color:var(--brand);font-size:1.3rem;line-height:1}
.nav__links{gap:2rem;font-size:.9rem;font-weight:600}
.nav__links a{position:relative;padding-block:.5rem}
.nav__links a::after{content:"";position:absolute;bottom:0;inset-inline:50%;height:2px;background:var(--brand);border-radius:99px;transition:inset var(--t)}
.nav__links a:hover::after{inset-inline:0}
.theme-btn,.notif__btn{box-shadow:var(--shadow-sm)}

/* Buttons and controls */
.btn{min-height:44px;border-radius:14px;padding:.78rem 1.4rem;letter-spacing:-.025em;box-shadow:none}
.btn--primary{background:var(--grad);box-shadow:var(--shadow-brand)}
.btn--primary:hover{box-shadow:0 18px 36px -18px rgba(8,127,103,.7);transform:translateY(-2px)}
.btn--ghost{background:color-mix(in srgb,var(--surface) 94%,transparent)}
.btn--lg{min-height:52px;border-radius:16px}
input,textarea,select{transition:border-color var(--t),box-shadow var(--t),background var(--t)}
.field input,.field textarea,.field select,.vp-field input,.vp-field textarea,.float input,.chat__in input{
  min-height:46px;border-radius:14px!important;background:var(--surface)!important;border-color:var(--line-2)!important
}
.field input:focus,.field textarea:focus,.field select:focus,.vp-field input:focus,.vp-field textarea:focus,.float input:focus,.chat__in input:focus{
  border-color:var(--brand)!important;box-shadow:var(--ring)!important;outline:0
}

/* Landing page */
.hero{padding:clamp(54px,7vw,96px) 0 64px;isolation:isolate}
.hero::before{content:"";position:absolute;width:520px;height:520px;inset-inline-end:-240px;top:-160px;border:1px solid color-mix(in srgb,var(--brand) 15%,transparent);border-radius:46% 54% 44% 56%;z-index:-1;transform:rotate(18deg)}
.hero__inner{grid-template-columns:1fr 1.02fr;gap:clamp(42px,6vw,84px)}
.badge{margin-bottom:1.2rem;border:0;padding:.5rem .9rem;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 24%,transparent)}
.hero h1{font-size:clamp(2.65rem,5.35vw,4.45rem);line-height:1.13;letter-spacing:-.065em;max-width:11ch}
.hero p{font-size:1.08rem;line-height:2;max-width:48ch}
.hero-search{max-width:530px;padding:.55rem;border-radius:18px;box-shadow:var(--shadow);background:var(--surface)}
.hero-search input{min-height:43px}
.hero-search .btn{min-height:46px}
.trust-row{gap:.7rem 1.35rem}
.trust-row span{padding:.35rem 0;font-weight:500}
.hero__visual{min-height:470px;align-items:center}
.blob{opacity:.16;filter:blur(70px)}
.hero-photo{max-width:550px;height:460px;border-radius:var(--r-xl);overflow:visible;isolation:isolate}
.hero-photo>img,.hero-slide{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;object-fit:cover;border-radius:var(--r-xl);opacity:0;transform:scale(1.025);transition:opacity 1s var(--ease),transform 7s linear;box-shadow:var(--shadow-lg)}
.hero-photo>img.hero-slide--on{opacity:1;transform:scale(1)}
.hero-photo__card{bottom:22px;inset-inline-start:-22px;max-width:88%;border-radius:18px;padding:1rem 1.1rem;animation:premiumFloat 5s var(--ease) infinite;border-color:color-mix(in srgb,var(--line) 70%,transparent)}
.hero-slides__dots{position:absolute;z-index:4;inset-inline-end:22px;bottom:22px;display:flex;gap:7px;padding:7px 9px;border-radius:999px;background:rgba(16,42,53,.36);backdrop-filter:blur(12px)}
.hero-slide-dot{width:7px;height:7px;border:0;border-radius:99px;background:rgba(255,255,255,.55);padding:0;cursor:pointer;transition:width var(--t),background var(--t)}
.hero-slide-dot.is-on{width:22px;background:#fff}
@keyframes premiumFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.trustbar{border:0;background:transparent;padding-bottom:24px}
.trustbar__inner{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--shadow-sm)}
.trustbar__item+ .trustbar__item{border-inline-start:1px solid var(--line)}
.trustbar__item strong{font-size:1.5rem}
.trust-photo{padding:88px 0 24px}
.trust-photo__inner{gap:72px}
.trust-photo__img{border-radius:28px;box-shadow:var(--shadow-lg);transform:rotate(-1deg)}
.trust-photo__text h2{font-size:clamp(1.8rem,3.3vw,2.85rem)}
.trust-photo__list li{padding:.6rem .75rem;border-radius:12px;background:color-mix(in srgb,var(--brand-soft) 65%,transparent)}
.services{margin-top:88px;padding:88px 0;background:color-mix(in srgb,var(--surface) 72%,transparent)}
.svc-grid{gap:18px}
.svc{align-items:flex-start;text-align:start;min-height:190px;border-radius:20px;padding:26px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.svc::after{content:"";position:absolute;width:80px;height:80px;inset-inline-end:-34px;bottom:-34px;border:1px solid color-mix(in srgb,var(--brand) 18%,transparent);border-radius:50%}
.svc:hover{transform:translateY(-7px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--brand) 48%,var(--line))}
.svc__ic{width:58px;height:58px;border-radius:17px}
.steps{padding:88px 0}
.step{border-radius:20px;box-shadow:var(--shadow-sm);padding:30px;position:relative}
.step__num{border-radius:15px;background:var(--brand-soft);color:var(--brand);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 20%,transparent)}
.reviews{padding:72px 0 96px}
.review-card{border-radius:20px;box-shadow:var(--shadow-sm);padding:28px}
.pwa__inner{border-radius:28px;padding:48px 56px;position:relative;overflow:hidden}
.pwa__inner::after{content:"";position:absolute;width:260px;height:260px;left:-80px;bottom:-160px;border:1px solid rgba(255,255,255,.23);border-radius:48%}
.footer{margin-top:24px}

/* Auth, onboarding and payment */
.auth-wrap{min-height:calc(100dvh - 76px);padding:54px 20px;background:radial-gradient(circle at 82% 20%,rgba(8,127,103,.11),transparent 32%),radial-gradient(circle at 12% 82%,rgba(197,141,49,.08),transparent 30%)}
.auth-card{border-radius:26px!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-lg)!important;padding:clamp(26px,4vw,42px)!important;background:color-mix(in srgb,var(--surface) 96%,transparent)!important;backdrop-filter:blur(18px)}
.auth-card::before{content:"";display:block;width:44px;height:4px;border-radius:99px;background:var(--brand);margin:0 0 24px auto}
.tabs,.tabs2{border:1px solid var(--line);padding:5px!important;border-radius:15px!important;background:var(--surface-2)!important}
.tab,.tab2{min-height:42px;border-radius:11px!important}
.tab--on,.tab2--on{background:var(--surface)!important;color:var(--brand)!important;box-shadow:var(--shadow-sm)!important}
.wz-steps{gap:8px}
.wz-step{padding:.6rem .25rem;border-radius:10px;background:var(--surface-2);border:0!important}
.wz-step--on{background:var(--brand-soft);color:var(--brand)}
.kyc-upload{border-radius:17px!important;padding:20px!important;background:var(--surface-2)!important}
.pay-wrap{background:var(--mesh)!important}
.pay-card{border-radius:26px!important;border:1px solid var(--line)!important;box-shadow:var(--shadow-lg)!important;padding:42px!important}

/* Panels and dashboards */
.panel-head{padding-top:44px}
.panel-head h1{font-size:clamp(1.7rem,3vw,2.35rem)}
.panel-grid{gap:24px;padding-block:26px}
.card,.stat,.consult,.pet,.req,.txn,.addr-row{background:var(--surface);border-color:var(--line);box-shadow:var(--shadow-sm)}
.card{border-radius:22px;padding:30px}
.card h2{font-size:1.26rem}
.card h2 .ic{padding:7px;width:36px!important;height:36px!important;border-radius:11px;background:var(--brand-soft)}
.stats{gap:18px}
.stat{border-radius:19px;padding:22px 24px;position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;width:58px;height:58px;inset-inline-end:-25px;bottom:-25px;border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);border-radius:50%}
.stat__num{font-size:2rem}
.consult,.pet,.req,.txn,.addr-row{border-radius:16px!important;padding:16px!important}
.consult:hover,.pet:hover,.req:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pill{min-height:34px;display:inline-flex;align-items:center}
.toggle__ui{width:48px;height:28px}
.modal{backdrop-filter:blur(12px);background:color-mix(in srgb,var(--overlay) 78%,transparent)}
.modal__box{border-radius:24px;padding:32px;box-shadow:var(--shadow-lg)}
.notif__panel{border-radius:18px!important;box-shadow:var(--shadow-lg)!important}

/* Public vet profile and legal */
.vp{padding-top:44px;gap:24px;max-width:1080px}
.vp-card{border-radius:22px;padding:30px;box-shadow:var(--shadow-sm)}
.vp-head{padding:36px;background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--brand-soft) 30%,var(--surface)))}
.vp-avatar{width:88px;height:88px;border-radius:24px!important;box-shadow:var(--shadow)}
.vp-map{border-radius:18px!important}
.legal{max-width:850px!important;margin-block:54px 96px!important;padding:clamp(28px,5vw,60px)!important;background:var(--surface);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow)}
.legal h1{font-size:clamp(2rem,4vw,3rem);padding-bottom:22px;border-bottom:1px solid var(--line)}
.legal h2{margin-top:2rem!important;color:var(--brand)}
.legal p{line-height:2.1}

/* Map: refined but structurally unchanged */
.map-layout{grid-template-columns:410px 1fr;height:calc(100dvh - 76px);background:var(--surface)}
.panel{padding:26px;background:var(--surface);border-color:var(--line)}
.map-cell{border-radius:24px 0 0 0;overflow:hidden;margin:10px 10px 10px 0;box-shadow:inset 0 0 0 1px var(--line)}
.addr-summary{border-radius:15px!important;background:var(--brand-soft)!important;border-color:color-mix(in srgb,var(--brand) 26%,transparent)!important}
.filterbar{border-radius:16px;margin:0 0 14px;padding:14px;background:var(--surface-2);border:1px solid var(--line)}
.filterbar__row{padding-bottom:4px}
.chip{min-height:38px;border-radius:12px;padding:.45rem .85rem}
.chip--on{box-shadow:var(--shadow-brand)}
.vet{border-radius:19px;padding:17px;box-shadow:var(--shadow-sm)}
.vet:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.vet__ava{border-radius:13px!important}
.searching-overlay{backdrop-filter:blur(18px)}

/* Progressive reveal motion */
.premium-ready [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.premium-ready [data-reveal].is-visible{opacity:1;transform:none}

/* Mobile system */
@media(max-width:900px){
  :root{--fs-3xl:1.9rem}
  .nav,.nav__inner{height:66px}
  .logo{font-size:1.3rem}.logo::before{width:27px;height:27px}.logo::after{top:16px;inset-inline-start:8px}
  .nav__right{gap:.45rem}.nav__right .btn{padding:.65rem .8rem;min-height:40px;font-size:.8rem}
  .container{padding-inline:18px}
  .hero{padding:38px 0 44px}
  .hero__inner{grid-template-columns:1fr;gap:36px}
  .hero__text{text-align:start}
  .hero h1{font-size:clamp(2.25rem,11vw,3.35rem);max-width:11ch}
  .hero p{font-size:1rem;margin-block:1rem 1.35rem}
  .hero-search{max-width:none;flex-wrap:wrap;padding:.5rem}.hero-search input{width:calc(100% - 50px)}.hero-search .btn{width:100%}
  .trust-row{gap:.35rem 1rem}
  .hero__visual{min-height:410px}
  .hero-photo{height:405px;max-width:none}
  .hero-photo__card{inset-inline:16px;bottom:16px;max-width:none;padding:.75rem}.app-mock__go{display:none}
  .hero-slides__dots{bottom:92px}
  .trustbar__inner{grid-template-columns:1fr 1fr;padding:18px}.trustbar__item{padding:10px}.trustbar__item+ .trustbar__item{border:0}
  .trust-photo{padding-top:56px}.trust-photo__inner{gap:28px}.trust-photo__img{transform:none}
  .services,.steps,.reviews{padding-block:56px}.services{margin-top:56px}
  .svc-grid{grid-template-columns:1fr 1fr;gap:12px}.svc{min-height:168px;padding:20px 16px}
  .steps__grid,.review-grid{grid-template-columns:1fr;gap:14px}
  .pwa__inner{padding:30px 24px}.pwa__art{display:none}
  .auth-wrap{min-height:calc(100dvh - 66px);padding:28px 14px}.auth-card{padding:26px 20px!important;border-radius:22px!important}
  .panel-grid{grid-template-columns:1fr!important;padding-inline:0!important}.stats{grid-template-columns:1fr 1fr;padding-inline:0}.card{padding:22px;border-radius:19px}
  .vp{padding-inline:14px}.vp-grid{grid-template-columns:1fr}.vp-head{padding:24px}.vp-head__main{align-items:flex-start}.vp-avatar{width:72px;height:72px}
  .legal{margin:24px 14px 82px!important;padding:26px 20px!important;border-radius:20px}
  .map-layout{grid-template-columns:1fr;grid-template-rows:min(37vh,320px) minmax(0,1fr);height:calc(100dvh - 66px)}
  .map-cell{margin:0;border-radius:0;min-height:0;touch-action:pan-x pan-y}.panel{min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 14px calc(78px + env(safe-area-inset-bottom))}.filterbar{padding:10px;margin-bottom:10px}
  .bottomnav{border-radius:20px 20px 0 0;padding:6px 8px env(safe-area-inset-bottom);box-shadow:0 -16px 36px -28px rgba(16,42,53,.5)}
  .bottomnav a{min-height:58px;border-radius:14px}.bottomnav a.on{background:var(--brand-soft)}
}
@media(max-width:520px){
  .svc-grid{grid-template-columns:1fr 1fr}.svc{min-height:155px}.svc__ic{width:50px;height:50px}
  .field-row,.field-row3,.vp-field-row{grid-template-columns:1fr!important}
  .stats{gap:10px}.stat{padding:18px 15px}.stat__num{font-size:1.65rem}
  .kyc-upload-grid{grid-template-columns:1fr 1fr}
  .nav__right>a.btn--ghost:last-child{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-photo>img,.hero-slide{transition:none}.premium-ready [data-reveal]{opacity:1;transform:none}.hero-photo__card{animation:none}
}