/* Salon card: the ONE place that styles a salon card (drawn by card.js). Used by the city finders, the home page and the list pages. */
:root{--bg:#fbf9f6;--card:#fff;--ink:#1d1b20;--mute:#6a6570;--line:#ebe6df;--accent:#6d2f5a;--accent2:#a24a86;--yes:#1f7a4d;--no:#b3402f;--unk:#8a857d;--r:16px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-bottom:20px}
.sc{display:grid;grid-template-columns:60px minmax(0,1fr);gap:14px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);color:inherit;transition:transform .18s,box-shadow .18s,border-color .18s;animation:rise .45s ease-out both;min-width:0;position:relative}
.sc-hit{position:absolute;inset:0;z-index:3;border-radius:inherit}
.sc .tl.book{position:relative;z-index:4;text-decoration:none;color:inherit;cursor:pointer}
.sc .tl.book:hover{border-color:var(--accent);box-shadow:0 6px 16px -10px #6d2f5a88}
.sc.ph{grid-column:1/-1;grid-template-columns:fit-content(40%) minmax(0,1fr);align-items:stretch;gap:20px}.sc.ph .pic{display:block;width:auto;height:auto;max-width:100%;max-height:380px;border-radius:12px;align-self:start;background:#f6f1f4}.sc .inf{min-width:0;display:flex;flex-direction:column}
.sc.ph.wide{grid-template-columns:minmax(0,1fr);gap:14px}.sc.ph.wide .pic{width:100%;max-height:260px;object-fit:contain}.sc.ph.wide .tiles{flex:none;min-height:0;contain:none}
.sc:not(.ph){display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));align-content:start;gap:8px;--s:90px}.sc:not(.ph) .inf,.sc:not(.ph) .tiles{display:contents}.sc:not(.ph) .ico{width:100%;height:auto;aspect-ratio:1;padding:16%;border-radius:18px}.sc:not(.ph) .hd{grid-column:2/-1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:0 6px}.sc:not(.ph) .hd .addr{margin:3px 0 0}.sc:not(.ph) .tl{width:auto;height:auto;aspect-ratio:1}
.sc:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px #6d2f5a77;border-color:#dccfe2}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ic{width:100%;height:100%;display:block}
.ic .m{fill:var(--m)}.ic .d{fill:var(--d)}.ic .l{fill:var(--l)}.ic .w{fill:#fff}.ic .b{fill:var(--b)}.ic .g{fill:var(--g)}.ic .s{fill:none;stroke:var(--m);stroke-width:2.4;stroke-linecap:round}
.t-hair{--m:#8e4a7c;--d:#4f2146;--l:#fff3fa}
.t-barber{--m:#d64545;--b:#2f6db5;--d:#7d8794}
.t-nails{--m:#e0527a;--d:#3d2a40}
.t-beauty{--m:#e0556f;--d:#3d3340;--g:#d9a441}
.t-massage{--m:#4fa583;--d:#2c6a52;--l:#d9efe4}
.sc .ico{position:relative;width:60px;height:60px;padding:9px;border-radius:18px;box-shadow:inset 0 0 0 1px #0000000d}
.sc h3{margin:0;font-size:24px;line-height:1.2;overflow-wrap:anywhere}
.vbadge{display:inline-block;margin:4px 0 6px;padding:3px 10px;border-radius:999px;background:#e6f4ec;color:var(--yes);font-size:12px;font-weight:700;line-height:1.5}
.sc .addr{margin:3px 0 8px;font-size:13px;color:var(--mute);overflow-wrap:anywhere}
.sc a.addr{display:block;width:fit-content;max-width:100%;position:relative;z-index:4;color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.sc a.addr:hover{color:var(--accent2)}.sc .addr.km{margin-top:-6px}
.sc .q{font-size:12.5px;color:#3c3842;font-style:italic;margin:0 0 8px;overflow-wrap:anywhere}
.sc .q.hint{font-style:normal;font-size:13.5px;color:var(--accent)}
.sc .tiles{display:grid;grid-template-columns:repeat(var(--c,3),var(--s,72px));grid-auto-rows:var(--s,72px);gap:8px;justify-content:space-between;align-content:center;margin-top:6px}
.sc.ph .tiles{flex:1;min-height:92px;contain:size}
.sc .tl{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--s,72px)*.04);padding:calc(var(--s,72px)*.06);border-radius:calc(var(--s,72px)*.16);border:1px solid var(--line);text-align:center;overflow:hidden;min-width:0}
.sc .tl .ti{width:calc(var(--s,72px)*.38);height:calc(var(--s,72px)*.38);display:block;flex:none}.sc .tl .ti svg{width:100%;height:100%;display:block}
.sc .tl b{font-size:clamp(10px,calc(var(--s,72px)*.135),15px);line-height:1.15;font-weight:600;overflow-wrap:anywhere}
.sc .tl small{font-size:clamp(9px,calc(var(--s,72px)*.11),12px);line-height:1.1;opacity:.8}
.sc .tl .bd{position:absolute;top:calc(var(--s,72px)*.06);right:calc(var(--s,72px)*.06);width:calc(var(--s,72px)*.2);height:calc(var(--s,72px)*.2);border-radius:50%;background:currentColor;display:flex;align-items:center;justify-content:center}
.sc .tl .bd svg{width:70%;height:70%;color:#fff}
.sc .tl.yes{color:var(--yes);border-color:#bfe0cd;background:#f1faf5}
.sc .tl.no{color:var(--no);border-color:#efc9c2;background:#fdf4f2}
.sc .tl.unknown{color:var(--unk);background:#f6f4f0}
.sc .tl.cat{border-color:transparent}
.sc .tl.pf{color:var(--accent);border-color:#e2cfdb;background:#faf3f7}
.sc .tl .ring{width:calc(var(--s,72px)*.4);height:calc(var(--s,72px)*.4);border-radius:50%;background:conic-gradient(var(--accent2) calc(var(--p)*1%),#eadde5 0);display:flex;align-items:center;justify-content:center;flex:none}
.sc .tl .ring i{width:76%;height:76%;border-radius:50%;background:#faf3f7;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:calc(var(--s,72px)*.12);color:var(--accent)}
.morebtn{display:block;margin:6px auto 30px;padding:12px 26px;border:1.5px solid var(--accent);border-radius:999px;background:#fff;color:var(--accent);font-weight:600;cursor:pointer}
@media(max-width:760px){
 .grid{grid-template-columns:minmax(0,1fr)}
 .sc{padding:14px;gap:12px;grid-template-columns:52px minmax(0,1fr)}
 .sc .ico{width:52px;height:52px;padding:7px;border-radius:15px}
 .sc.ph{grid-template-columns:minmax(0,1fr);gap:12px}.sc.ph .pic{width:100%;max-height:none}.sc.ph .tiles{flex:none;min-height:0;contain:none}
 .sc:not(.ph) .hd{grid-column:2/-1}
}
@media(prefers-reduced-motion:reduce){.sc{animation:none!important;transition:none!important}}

/* card-only listings and the "this is my salon" dialog */
.sc.card-only{cursor:default}.sc.card-only .tl.unknown{background:#f4f1ec;color:#6a6570}.sc.card-only .tl.claim{background:#6d2f5a;color:#fff;border:0;cursor:pointer;font:inherit}
.sc.card-only .tl em{display:block;font-style:normal;font-size:11px;opacity:.8}
.ss-dlg{position:fixed;inset:0;background:rgba(20,16,24,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px}
.ss-box{position:relative;background:#fff;color:#1d1b20;border-radius:18px;max-width:460px;width:100%;padding:24px 22px;box-shadow:0 30px 60px -20px #0006}
.ss-box h3{margin:0 0 10px;font-size:20px}.ss-box p{margin:8px 0;font-size:15px;line-height:1.5}
.ss-x{position:absolute;right:12px;top:8px;border:0;background:none;font-size:28px;line-height:1;cursor:pointer;color:#6a6570}
.ss-code{font:700 24px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-align:center;background:#f6eef3;color:#6d2f5a;border-radius:12px;padding:14px;margin:12px 0}
.ss-act{display:flex;flex-direction:column;gap:8px}.ss-act .btn{display:block;text-align:center;padding:11px 14px;border-radius:999px;background:#6d2f5a;color:#fff;text-decoration:none;font-weight:600;border:0;cursor:pointer;font:inherit}
.ss-act .btn.alt{background:#f6eef3;color:#6d2f5a}.ss-fine{color:#6a6570;font-size:13px!important}

.ss-act .btn.danger{background:#fff;color:#b3402f;border:1.5px solid #e6c9c3}

/* facts from the salon's own site, and the "+N more" tile that keeps the tile grid a full rectangle (card.js layoutTiles) */
.sc .tl.fx{color:#2f5d85;border-color:#cddbe9;background:#eef4fa}
.sc .tl.tilemore{margin:0;padding:0;height:100%;width:100%;align-self:stretch;justify-self:stretch;box-sizing:border-box;cursor:pointer;font:inherit;background:#faf3f7;color:var(--accent);border-color:#e2cfdb;position:relative;z-index:4}
.sc .tl.tilemore b{font-size:calc(var(--s,72px)*.28);line-height:1}
.sc.ph .tiles.open{contain:none;flex:none;min-height:0}