/* components.css — propriétaire : core (ordre de chargement = ordre de la cascade, voir index.html) */
/* ============================ Buttons ============================ */
.btn{text-decoration:none;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:var(--r-md);font-weight:600;font-size:var(--fs-base);white-space:nowrap;transition:background var(--dur-fast),transform var(--dur-instant),box-shadow var(--dur-fast),color var(--dur-fast);user-select:none}
.btn:active{transform:scale(.97)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--c-primary);color:var(--c-on-primary)}
.btn-primary:not([disabled]):hover,.btn-primary:not([disabled]):active{background:var(--c-primary-hover)}
.btn-secondary{background:var(--c-primary-soft);color:var(--c-on-primary-soft)}
.btn-outline{box-shadow:inset 0 0 0 1.5px var(--c-line-strong);color:var(--c-ink)}
.btn-outline:hover{background:var(--c-sunken)}
.btn-ghost{color:var(--c-primary);padding:0 12px}
.btn-ghost:hover{background:var(--c-primary-soft)}
.btn-mimoza{background:var(--c-mimoza);color:var(--c-on-mimoza);box-shadow:var(--sh-stamp)}
.btn-mimoza:active{box-shadow:1px 1px 0 var(--c-ink);transform:translate(2px,2px)}
.btn-sm{height:36px;padding:0 12px;font-size:var(--fs-sm)}
.btn-sm::after{content:"";position:absolute;inset:-6px 0}
.btn-lg{height:56px;padding:0 24px;font-size:var(--fs-lg)}
.btn-block{width:100%}
.btn .ic{width:20px;height:20px}
.btn-sm .ic{width:18px;height:18px}
.link{color:var(--c-primary);font-weight:600;font-size:var(--fs-sm);display:inline-flex;align-items:center;gap:4px;min-height:40px}
.link .ic{width:16px;height:16px}

/* ============================ Chips / segmented ============================ */
.chips{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px var(--gutter);scrollbar-width:none;-webkit-mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent);mask:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent)}
.chips::-webkit-scrollbar{display:none}
.chips.wrap{flex-wrap:wrap;overflow:visible;-webkit-mask:none;mask:none;padding:0}
.chip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;background:var(--c-surface);box-shadow:inset 0 0 0 1px var(--c-line);font-size:var(--fs-sm);font-weight:600;color:var(--c-ink);transition:background var(--dur-fast),color var(--dur-fast),box-shadow var(--dur-fast),transform var(--dur-instant);position:relative}
.chip::after{content:"";position:absolute;inset:-4px 0}
.chip .ic{width:18px;height:18px}
.chip:active{transform:scale(.96)}
.chip[aria-pressed="true"],.chip.on{background:var(--c-ink);color:var(--c-bg);box-shadow:none}
.chip .cnt{font-size:var(--fs-xs);color:var(--c-ink-3)}
.chip.on .cnt,.chip[aria-pressed="true"] .cnt{color:var(--c-line)}
.chip.ai{box-shadow:inset 0 0 0 1.5px var(--c-primary)}
.chip.sq{border-radius:var(--r-sm)}
.seg{--n:2;--i:0;position:relative;display:grid;grid-template-columns:repeat(var(--n),1fr);height:44px;padding:4px;border-radius:var(--r-md);background:var(--c-sunken)}
.seg::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n));border-radius:10px;background:var(--c-surface);box-shadow:var(--sh-1);transform:translateX(calc(var(--i) * 100%));transition:transform var(--dur-base) var(--ease-out)}
.seg button{position:relative;z-index:1;font-size:var(--fs-sm);font-weight:600;color:var(--c-ink-2);display:flex;align-items:center;justify-content:center;gap:6px;border-radius:10px}
.seg button[aria-pressed="true"]{color:var(--c-ink)}
.seg button .ic{width:18px;height:18px}

/* ============================ Cards ============================ */
.card{background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:16px}
:root[data-theme="dark"] .card{box-shadow:none}
.sect{margin-top:32px}
.sect-h{display:flex;align-items:baseline;justify-content:space-between;padding:0 var(--gutter);margin-bottom:12px;gap:12px}
.sect-h .link{min-height:0}
.list{display:grid;gap:12px;padding:0 var(--gutter)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 var(--gutter)}

/* Service card */
.svc{position:relative;background:var(--c-surface);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:14px 14px 10px 18px;overflow:hidden;cursor:pointer;transition:transform var(--dur-instant),box-shadow var(--dur-fast);animation:rise var(--dur-base) var(--ease-out) both}
.svc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c-primary)}
.svc:active{transform:scale(.985);box-shadow:var(--sh-2)}
.svc-top{display:flex;gap:14px;align-items:flex-start}
.svc-main{flex:1;min-width:0}
.svc-main .t-sm{margin-top:2px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.svc-main .t-xs{margin-top:4px;display:flex;align-items:center;gap:4px}
.svc-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--c-line)}
.svc.sel{box-shadow:0 0 0 2px var(--c-mimoza),var(--sh-2)}
.km{display:inline-flex;align-items:center;gap:3px;color:var(--c-ink-2);font-size:var(--fs-sm);white-space:nowrap;font-variant-numeric:tabular-nums}
.km .ic{width:14px;height:14px}

/* Lek price */
.lek-p{font-variant-numeric:tabular-nums;white-space:nowrap}
.lek-p b{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);letter-spacing:-.01em}
.lek-p .lek{font-weight:600;font-size:.8em}
.lek-p .unit{font-size:var(--fs-sm);color:var(--c-ink-2);font-weight:400}
.lek-p.sm b{font-size:var(--fs-lg)}
.lek-p.xs b{font-size:var(--fs-base)}
.falas{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 10px;border-radius:999px;background:var(--c-primary-soft);color:var(--c-on-primary-soft);font-size:var(--fs-xs);font-weight:600}

/* Object card */
.obj{cursor:pointer;position:relative;transition:transform var(--dur-instant);animation:rise var(--dur-base) var(--ease-out) both;min-width:0}
.obj:active{transform:scale(.985)}
.obj-pic{position:relative;margin-bottom:16px}
.obj .pic{box-shadow:var(--sh-1)}
.price-tag{position:absolute;left:-4px;bottom:-10px;background:var(--c-mimoza);color:var(--c-on-mimoza);border-radius:var(--r-xs);padding:3px 8px;box-shadow:var(--sh-stamp);transform:rotate(-2deg);z-index:2}
.price-tag .lek-p b{font-size:var(--fs-base)}
.price-tag .lek-p .unit{color:var(--c-on-mimoza);opacity:.85;font-size:var(--fs-xs);font-weight:600}
.obj-b h3{font-size:var(--fs-base);font-weight:600;line-height:1.3}
.obj-b .t-sm{margin-top:2px}
.cond{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--c-ink-2)}
.cond i{width:8px;height:8px;border-radius:50%;background:var(--c-success)}
.ribbon{position:absolute;top:10px;right:10px;background:var(--c-shega-soft);color:var(--c-shega-text);font-size:var(--fs-xs);font-weight:700;padding:3px 8px;border-radius:var(--r-xs);display:inline-flex;gap:4px;align-items:center;z-index:2}
.ribbon .ic{width:12px;height:12px}
.obj .fav{position:absolute;top:6px;left:6px;z-index:2;background:rgb(var(--c-ink-rgb) / .28);color:#fff}
:root[data-theme="dark"] .obj .fav{background:rgb(0 0 0 / .4)}

/* Pseudo-photo */
.pic{position:relative;aspect-ratio:4/3;border-radius:var(--r-window);overflow:hidden;display:grid;place-items:center;background:radial-gradient(130% 100% at 28% 12%,hsl(var(--h) var(--pic-s) var(--pic-l1)),hsl(var(--h) calc(var(--pic-s) - 15%) var(--pic-l2)));color:hsl(var(--h) 40% var(--pic-ink))}
.pic::after{content:"";position:absolute;left:22%;right:22%;bottom:13%;height:9%;border-radius:50%;background:hsl(var(--h) 30% 15% / .18)}
.pic .pic-ic{width:46%;height:46%;stroke-width:1.15;position:relative;z-index:1;transform:rotate(var(--rot,-6deg))}
.pic .pic-win{position:absolute;inset:0;width:100%;height:100%;opacity:.12;color:hsl(var(--h) 40% var(--pic-ink))}
.pic.person{background:radial-gradient(120% 100% at 30% 10%,var(--a-bg),var(--c-sunken))}
.pic.person::after{display:none}
.pic.person.big{grid-template-rows:1fr auto}.pic.person.big .av{align-self:end}
.person-cap{position:relative;z-index:1;align-self:start;margin-top:10px;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--a-fg, var(--c-ink))}
.pic.person .pic-win{color:var(--c-ink);opacity:.05}

/* Fav */
.fav{width:40px;height:40px;border-radius:999px;display:grid;place-items:center;color:var(--c-ink-3);flex:none;position:relative}
.fav::after{content:"";position:absolute;inset:-4px}
.fav.on .ic{fill:var(--c-shega);stroke:var(--c-shega);animation:pop var(--dur-base) var(--ease-spring)}
.fav.on{color:var(--c-shega)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}

/* Rating */
.rt{display:inline-flex;align-items:center;gap:3px;font-size:var(--fs-sm);white-space:nowrap}
.rt .ic{width:14px;height:14px;fill:var(--c-mimoza);stroke:var(--c-mimoza-text);stroke-width:1.5}
.rt b{font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums}
.rt span{color:var(--c-ink-3)}
.newb{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:var(--r-xs);background:var(--c-jargavan-soft);color:var(--c-jargavan);font-size:var(--fs-xs);font-weight:700}

/* Avatar + trust ring */
.av{--s:40px;position:relative;flex:none;width:var(--s);height:var(--s);border-radius:50%;margin:5px}
.av .av-i{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:var(--a-bg);color:var(--a-fg);font-family:var(--font-display);font-weight:700;font-size:calc(var(--s) * .36);letter-spacing:-.02em}
.av::before{content:"";position:absolute;inset:-4.5px;border-radius:50%;border:2.5px solid transparent}
.av.tr-new::before{border:2px dashed var(--c-line-strong)}
.av.tr-active::before{border-color:var(--c-primary) var(--c-primary) var(--c-line) var(--c-line);transform:rotate(-45deg)}
.av.tr-confirmed::before,.av.tr-expert::before{border-color:var(--c-primary)}
.av.tr-expert::after{content:"";position:absolute;inset:-10px;border-radius:50%;background:repeating-conic-gradient(from -7deg,var(--c-mimoza) 0 14deg,transparent 14deg 90deg);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));mask:radial-gradient(closest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px))}
.av-ok{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%;background:var(--c-success);color:var(--c-surface);border:2px solid var(--c-surface);display:grid;place-items:center;z-index:1}
.av-ok .ic{width:10px;height:10px;stroke-width:3.5}
.av-on{position:absolute;right:-1px;top:-1px;width:12px;height:12px;border-radius:50%;background:var(--c-success);border:2px solid var(--c-surface);z-index:1}
.av.s32{--s:32px;margin:3px}.av.s32 .av-ok{width:14px;height:14px;right:-4px;bottom:-4px}.av.s32 .av-ok .ic{width:8px;height:8px}
.av.s56{--s:56px}.av.s88{--s:88px;margin:8px}.av.s88 .av-ok{width:24px;height:24px}.av.s88 .av-ok .ic{width:13px;height:13px}
.av.waving{animation:none}
.wave{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:999px;color:var(--c-jargavan);font-size:var(--fs-sm);font-weight:600;margin-left:auto;position:relative}
.wave::after{content:"";position:absolute;inset:-6px 0}
.wave:hover{background:var(--c-jargavan-soft)}
.wave .ic{width:18px;height:18px;transform-origin:70% 85%}
.wave.go .ic{animation:wave 600ms var(--ease-spring) 1}
.wave.done{color:var(--c-ink-3);pointer-events:none}
@keyframes wave{0%,100%{transform:rotate(0)}15%{transform:rotate(14deg)}35%{transform:rotate(-12deg)}55%{transform:rotate(14deg)}75%{transform:rotate(-8deg)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Status badge */
.st{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:999px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
.st .ic{width:13px;height:13px}
.st-pending{background:var(--c-mimoza-soft);color:var(--c-mimoza-text)}
.st-confirmed{background:var(--c-primary-soft);color:var(--c-on-primary-soft)}
.st-in_progress{background:var(--c-jargavan-soft);color:var(--c-jargavan)}
.st-completed{background:var(--c-sunken);color:var(--c-ink-2)}
.st-cancelled{background:var(--c-shega-soft);color:var(--c-shega-text)}

/* ============================ Logo ============================ */
.logo{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;color:var(--c-primary);font-size:24px;line-height:1;display:inline-flex;align-items:baseline;font-variation-settings:"opsz" 48;white-space:nowrap}
.logo-e{position:relative;display:inline-block}
.logo-e i{position:absolute;top:-.02em;width:.17em;height:.21em;border-radius:.09em .09em .025em .025em;background:var(--c-mimoza);box-shadow:.035em .035em 0 var(--c-ink)}
.logo-e i:first-of-type{left:.035em}.logo-e i:last-of-type{left:.275em}
.appicon{width:64px;height:64px;border-radius:16px;background:var(--c-primary);display:grid;place-items:center;flex:none;box-shadow:var(--sh-2)}
.appicon .logo-e{font-family:var(--font-display);font-weight:800;font-size:44px;line-height:1;color:var(--c-mimoza);transform:translateY(-3px)}
.appicon .logo-e i{box-shadow:none}

/* ============================ Façade (signature 1) ============================ */
.win{fill:var(--c-line);transition:fill var(--dur-slow)}
.win.on{fill:var(--c-mimoza)}
.win.flash{animation:winOn var(--dur-slow) var(--ease-out) forwards}
.win.seq{animation:winOn var(--dur-slow) var(--ease-out) both;animation-delay:var(--d)}
@keyframes winOn{0%{fill:var(--c-line)}40%{fill:var(--c-mimoza);transform:scale(1.08)}100%{fill:var(--c-mimoza)}}
.win{transform-box:fill-box;transform-origin:center}
.facade-wall{fill:var(--c-surface);stroke:var(--c-ink);stroke-width:2}
.facade-rail{stroke:var(--c-ink);stroke-width:2;fill:none}