/* Polished photo-based clinic service selection. Everything scoped to Step 2. */ #face-service-picker { --fp-green:#16816c;--fp-dark:#123f36;--fp-muted:#758580; --fp-line:#e5eeea;--fp-bg:#f8fbf9; width:100%;min-width:0;color:var(--fp-dark);direction:rtl;font-family:inherit; } #face-service-picker *,#face-service-picker *::before,#face-service-picker *::after {box-sizing:border-box} #face-service-picker [hidden] {display:none!important} /* Step 2 becomes full-width; all other stages and their layouts are untouched. */ @media(min-width:992px){ #booking-flow:has(#services:not([hidden])) {max-width:1490px} #booking-flow:has(#services:not([hidden])) .booking-layout > .col-lg-8 {width:100%;max-width:100%;flex:0 0 100%} #booking-flow:has(#services:not([hidden])) #booking-aside {display:none!important} #booking-flow:has(#services:not([hidden])) .booking-content-panel {padding:10px;background:transparent;box-shadow:none;border:0} } #face-service-picker .face-picker__layout {direction:ltr;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:0;align-items:stretch;min-width:0;background:#fff;border:1px solid #e2ebe7;border-radius:28px;box-shadow:0 14px 48px #194a3c10;overflow:hidden} #face-service-picker .face-picker__visual {position:relative;direction:ltr;min-width:0;min-height:600px;background:linear-gradient(145deg,#eeefec,#f6f6f2);display:flex;align-items:center;justify-content:center} #face-service-picker .face-picker__visual-main {min-width:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative} #face-service-picker .face-picker__scenes {min-width:0;width:100%;flex:1;min-height:0;display:grid;place-items:center} #face-service-picker .face-picker__scene {position:relative;display:block;width:min(100%,590px);aspect-ratio:1086/1448;max-height:760px;overflow:visible;flex-shrink:0} #face-service-picker .face-picker__scene--profile {aspect-ratio:770/920;width:min(100%,630px)} #face-service-picker .face-picker__scene--neck {aspect-ratio:826/522;width:min(100%,620px)} #face-service-picker .face-picker__scene>img {width:100%;height:100%;object-fit:fill;display:block;pointer-events:none;user-select:none;border-radius:0} #face-service-picker .face-picker__regions {position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation} /* Facial-region rendering is defined at the end of this file. */ /* The view control floats over the image's left edge, like the design reference. */ #face-service-picker .face-picker__view-tabs {position:absolute;top:22px;left:17px;display:flex;flex-direction:column;gap:10px;z-index:2;width:92px} #face-service-picker .face-picker__view-tab {appearance:none;border:1px solid #dee8e4;background:#ffffffd9;color:#6f847e;font:inherit;font-size:.72rem;font-weight:800;line-height:1.3;border-radius:17px;cursor:pointer;padding:9px 5px;display:grid;gap:5px;justify-items:center;align-content:center;box-shadow:0 4px 12px #3153440b;transition:.15s ease} #face-service-picker .face-picker__view-tab:hover {border-color:#6fb59f;background:#fff} #face-service-picker .face-picker__view-tab.is-active {color:#106b5a;border-color:#2d9680;background:#eff8f4;box-shadow:0 0 0 1px #c3e5d8} #face-service-picker .face-picker__view-tab img {width:57px;height:65px;object-fit:cover;object-position:center 33%;border-radius:10px;display:block} #face-service-picker .face-picker__photo-caption {display:flex;align-items:center;justify-content:center;gap:7px;position:absolute;bottom:12px;left:50%;transform:translateX(-50%);padding:6px 13px;border-radius:999px;background:#fffffff2;color:#557469;font-size:.69rem;white-space:nowrap;max-width:96%;text-align:center;z-index:1;box-shadow:0 3px 10px #193a2e18} #face-service-picker .face-picker__pulse {width:7px;height:7px;flex-shrink:0;background:#1aa082;border-radius:50%} #face-service-picker .face-picker__details {direction:rtl;min-width:0;background:linear-gradient(135deg,#ffffff 48%,#fbfdfb);border-radius:25px;padding:clamp(15px,2.5vw,35px);display:flex;flex-direction:column;gap:20px;box-shadow:-10px 0 30px #f8fcfa50;z-index:1} #face-service-picker .face-picker__heading {text-align:right;padding:0 3px 8px;border-bottom:1px solid #edf3ef} #face-service-picker .face-picker__step {display:inline-flex;border-radius:99px;background:#eaf6f1;color:#266c5c;font-weight:800;font-size:.76rem;padding:7px 11px;margin-bottom:14px} #face-service-picker .face-picker__heading h2 {font-size:clamp(1.2rem,2vw,1.75rem);line-height:1.45;font-weight:900;color:#123b33;margin:0 0 10px} #face-service-picker .face-picker__heading p {margin:0;color:var(--fp-muted);font-size:.82rem;line-height:1.8} #face-service-picker .face-picker__services-box {background:#fff;border:1px solid #e9efec;border-radius:21px;padding:13px;box-shadow:0 5px 20px #164a3207;min-width:0} #face-service-picker .face-picker__area-head {display:flex;gap:13px;align-items:center;border-radius:15px;background:#f9fbf9;padding:10px 7px 14px;min-width:0;border-bottom:1px solid #e8eee9} #face-service-picker .face-picker__area-photo {width:79px;height:92px;object-fit:cover;object-position:50% 52%;border-radius:13px;flex:0 0 79px} #face-service-picker .face-picker__area-photo--forehead {object-position:50% 17%} #face-service-picker .face-picker__area-photo--eyes {object-position:50% 35%} #face-service-picker .face-picker__area-photo--cheeks {object-position:50% 50%} #face-service-picker .face-picker__area-photo--lips {object-position:50% 70%} #face-service-picker .face-picker__area-photo--jaw {object-position:50% 80%} #face-service-picker .face-picker__area-info {min-width:0;flex:1} #face-service-picker .face-picker__area-info small {display:block;font-size:.67rem;color:#16856e;font-weight:750;margin-bottom:3px} #face-service-picker .face-picker__area-info h3 {color:#153e34;font-size:1.2rem;font-weight:900;margin:0 0 4px} #face-service-picker .face-picker__area-info p {color:#6d8077;font-size:.72rem;line-height:1.6;margin:0} #face-service-picker .face-picker__all {font:inherit;cursor:pointer;flex-shrink:0;background:#fff;border:1px solid #d7e7df;border-radius:999px;color:#1d7b64;padding:7px 9px;font-size:.67rem;font-weight:800} #face-service-picker .face-picker__all[aria-pressed=true] {background:#17836e;color:#fff;border-color:#17836e} #face-service-picker .face-picker__options {display:grid;gap:9px;margin-top:12px;max-height:440px;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain} #face-service-picker .face-picker__service {width:100%;display:flex;gap:13px;align-items:center;border:1px solid #e5ece8;border-radius:16px;background:#fff;font:inherit;color:#153d34;text-align:right;padding:10px;cursor:pointer;min-width:0;transition:.15s ease} #face-service-picker .face-picker__service:hover {border-color:#67b7a1;background:#f9fdfb} #face-service-picker .face-picker__service.is-selected {border-color:#289985;background:#edf8f3;box-shadow:0 0 0 1px #beded4} #face-service-picker .face-picker__service-thumb {width:69px;height:70px;flex:0 0 69px;border-radius:13px;object-fit:cover;object-position:center 44%;background:#edf0ef} #face-service-picker .face-picker__service-thumb--eye {object-position:50% 37%} #face-service-picker .face-picker__service-thumb--cheek {object-position:50% 51%} #face-service-picker .face-picker__service-thumb--lips {object-position:50% 65%} #face-service-picker .face-picker__service-copy {display:grid;gap:6px;flex:1;min-width:0} #face-service-picker .face-picker__service-name {font-size:.91rem;font-weight:900} #face-service-picker .face-picker__service-desc {font-size:.73rem;line-height:1.5;font-weight:450;color:var(--fp-muted)} #face-service-picker .face-picker__service-mark {width:30px;height:30px;border:1px solid #d7e0dc;border-radius:9px;display:grid;place-items:center;font-size:1.3rem;color:#357561;background:#fff;flex:0 0 30px} #face-service-picker .face-picker__service.is-selected .face-picker__service-mark {background:#259681;border-color:#259681;color:white;font-size:1.05rem} #face-service-picker .face-picker__selected {border:1px solid #eaf0ec;border-radius:20px;padding:16px;background:#fbfdfb;box-shadow:0 4px 24px #22503c09} #face-service-picker .face-picker__selected-head {display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px} #face-service-picker .face-picker__selected-head strong {display:flex;align-items:center;gap:9px;color:#193d34;font-weight:900;font-size:.84rem} #face-service-picker .face-picker__count {display:inline-flex;align-items:center;justify-content:center;padding:4px 9px;border-radius:99px;background:#e8f5ee;color:#156d5b;font-size:.75rem} #face-service-picker .face-picker__clear {font:inherit;border:0;background:transparent;color:#ca4949;font-weight:800;font-size:.74rem;cursor:pointer} #face-service-picker .face-picker__clear:disabled {opacity:.35;cursor:not-allowed} #face-service-picker .face-picker__chips {display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:35px} #face-service-picker .face-picker__chip {display:inline-flex;align-items:center;gap:9px;border-radius:99px;background:#e8f6ef;color:#1a705d;font-size:.77rem;font-weight:800;padding:8px 12px} #face-service-picker .face-picker__chip button {font:inherit;font-size:1.05rem;line-height:1;cursor:pointer;color:inherit;border:0;background:transparent;padding:0} #face-service-picker .face-picker__empty {font-size:.8rem;color:#7f9389} #face-service-picker .face-picker__note {margin:0 2px;font-size:.68rem;line-height:1.6;color:#82958a} @media(max-width:991.98px){ #face-service-picker .face-picker__layout {grid-template-columns:minmax(0,1fr)} #face-service-picker .face-picker__visual {min-height:390px;height:auto} #face-service-picker .face-picker__scene {max-height:420px;width:min(100%,315px)} #face-service-picker .face-picker__scene--profile {width:min(100%,350px)} #face-service-picker .face-picker__scene--neck {width:min(100%,475px)} #face-service-picker .face-picker__details {border-radius:0;padding:20px} } @media(max-width:767.98px){ /* The mobile wizard already gives .booking-stage__body its own scrollbar and keeps .booking-action-row fixed below it. Do not alter that layout. */ #face-service-picker .face-picker__layout {border-radius:16px;overflow:visible} #face-service-picker .face-picker__visual {display:flex;flex-direction:column-reverse;min-height:0;padding:10px;background:#f5f8f6;border-radius:16px 16px 0 0} #face-service-picker .face-picker__view-tabs {position:static;display:flex;flex-direction:row;width:100%;gap:7px;justify-content:center;order:1;z-index:2;padding:0} #face-service-picker .face-picker__view-tab {flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;max-width:145px;padding:6px 5px;min-height:45px;font-size:.68rem;border-radius:11px} #face-service-picker .face-picker__view-tab img {width:31px;height:34px;border-radius:7px} #face-service-picker .face-picker__visual-main {order:2;flex:none} #face-service-picker .face-picker__scenes {flex:none;width:100%} #face-service-picker .face-picker__scene {height:clamp(195px,34vh,300px);width:auto;max-width:100%;aspect-ratio:1086/1448} #face-service-picker .face-picker__scene--profile {aspect-ratio:770/920} #face-service-picker .face-picker__scene--neck {height:auto;width:min(100%,360px);aspect-ratio:826/522} #face-service-picker .face-picker__photo-caption {position:static;transform:none;background:transparent;box-shadow:none;font-size:.63rem;padding:4px 0 2px} #face-service-picker .face-picker__details {gap:11px;padding:13px 10px;border-radius:0 0 16px 16px} #face-service-picker .face-picker__heading {padding:0 2px 8px} #face-service-picker .face-picker__step {margin-bottom:6px;padding:5px 9px;font-size:.69rem} #face-service-picker .face-picker__heading h2 {font-size:1.05rem;margin-bottom:4px} #face-service-picker .face-picker__heading p {font-size:.71rem} #face-service-picker .face-picker__services-box {padding:9px;border-radius:14px} #face-service-picker .face-picker__area-head {gap:9px;padding:7px 4px 9px} #face-service-picker .face-picker__area-photo {width:51px;height:58px;flex-basis:51px;border-radius:9px} #face-service-picker .face-picker__area-info h3 {font-size:.95rem} #face-service-picker .face-picker__area-info p {font-size:.66rem} #face-service-picker .face-picker__all {font-size:.63rem;padding:6px 8px} #face-service-picker .face-picker__options {gap:6px;margin-top:7px;max-height:none;overflow:visible} #face-service-picker .face-picker__service {min-height:58px;gap:9px;padding:6px;border-radius:12px} #face-service-picker .face-picker__service-thumb {width:45px;height:45px;flex-basis:45px;border-radius:9px} #face-service-picker .face-picker__service-name {font-size:.81rem} #face-service-picker .face-picker__service-desc {font-size:.66rem} #face-service-picker .face-picker__service-mark {width:25px;height:25px;flex-basis:25px;border-radius:7px;font-size:1rem} #face-service-picker .face-picker__selected {border-radius:14px;padding:10px} #face-service-picker .face-picker__note {font-size:.64rem} } @media(max-width:375px){ #face-service-picker .face-picker__view-tab {font-size:.61rem;gap:4px} #face-service-picker .face-picker__scene {height:clamp(165px,29vh,260px)} #face-service-picker .face-picker__heading h2 {font-size:.99rem} #face-service-picker .face-picker__area-photo {width:43px;height:52px;flex-basis:43px} #face-service-picker .face-picker__area-info p {font-size:.61rem} } @media(prefers-reduced-motion:reduce){#face-service-picker * {transition:none!important}} @media(max-width:767.98px){ /* Mobile: heading → three image views → portrait → service cards → chips. */ #face-service-picker .face-picker__layout {display:flex;flex-direction:column;gap:0} #face-service-picker .face-picker__details {display:contents} #face-service-picker .face-picker__heading {order:0;background:#fff;padding:12px 11px 8px} #face-service-picker .face-picker__visual {order:1;display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:0} #face-service-picker .face-picker__view-tabs {order:0} #face-service-picker .face-picker__visual-main {order:1} #face-service-picker .face-picker__services-box {order:2;border-radius:15px;margin:10px 9px 0} #face-service-picker .face-picker__selected {order:3;margin:10px 9px 0} #face-service-picker .face-picker__note {order:4;padding:10px 13px 12px} } /* Live Django layout compatibility — the self-contained preview has no website shell. */ @media (min-width: 992px) { #booking-flow:has(#services:not([hidden])) .booking-layout {width:100%; max-width:none; margin-inline:0;} #booking-flow:has(#services:not([hidden])) .booking-layout > .col-lg-8 { flex:0 0 100%; width:100%; max-width:none; min-width:0; } #booking-flow:has(#services:not([hidden])) .booking-content-panel {width:100%;max-width:none;min-width:0;} #booking-flow:has(#services:not([hidden])) .booking-stage__body {width:100%;min-width:0;} #booking-flow:has(#services:not([hidden])) .booking-action-row {margin-top:12px;} } @media (max-width: 991.98px) { #booking-flow #services .booking-stage__body {width:100%; min-width:0;} #booking-flow #services .face-picker {width:100%;max-width:100%;min-width:0;} } @media (max-width: 767.98px), (max-width: 991.98px) and (orientation: landscape) { /* Never alter .booking-stage or .booking-action-row: site booking-ui.css owns the fixed buttons. */ #booking-flow #services .booking-stage__body { flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } #booking-flow #services .face-picker__layout {max-width:100%;} } /* Desktop Step 2: expand the ACTUAL booking container + Bootstrap column. The JS applies .is-services-wide only while the services step is active. This fixes an overflowing 1000px child that cannot center within col-lg-8. */ @media (min-width: 992px) { #booking-flow.is-services-wide { box-sizing: border-box; width: calc(100% - 32px) !important; max-width: 1560px !important; margin-inline: auto !important; } #booking-flow.is-services-wide > .booking-layout { width: 100% !important; max-width: none !important; margin-inline: 0 !important; } #booking-flow.is-services-wide > .booking-layout > .col-lg-8 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0; } #booking-flow.is-services-wide #booking-aside { display: none !important; } #booking-flow.is-services-wide .booking-content-panel, #booking-flow.is-services-wide #services, #booking-flow.is-services-wide #services .booking-stage__body, #booking-flow.is-services-wide #face-service-picker { box-sizing: border-box; width: 100% !important; max-width: none !important; min-width: 0; } #booking-flow.is-services-wide #face-service-picker .face-picker__layout { box-sizing: border-box; width: 100% !important; min-width: 0 !important; max-width: none !important; margin-inline: auto; } } /* Thin, feathered treatment boundaries: a blurred underlay with a crisp 1px edge. This replaces the previous multi-pixel strokes and their thick drop shadows. The underlying path is decorative only; the top SVG path keeps all mouse, touch and keyboard behavior. SVG filtering uses viewBox coordinates. */ #face-service-picker .face-picker__zone-layer { pointer-events: none; } .face-picker__zone{ fill: rgba(255,255,255,0.05) !important; } #face-service-picker .face-picker__zone-halo { pointer-events: none; fill: rgba(250,255,253,.035); stroke: rgba(247,255,253,.38); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .39; transition: opacity .2s ease, fill .2s ease, stroke .2s ease; } #face-service-picker .face-picker__scene--front .face-picker__zone-halo { filter:url(#fp-zone-feather-front); } #face-service-picker .face-picker__scene--profile .face-picker__zone-halo { filter:url(#fp-zone-feather-profile); } #face-service-picker .face-picker__scene--neck .face-picker__zone-halo { filter:url(#fp-zone-feather-neck); } #face-service-picker .face-picker__zone { pointer-events: all; cursor: pointer; outline: none; fill: rgba(255,255,255,.008); stroke: rgba(255,255,255,.78); stroke-width: .95px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: none; transition: fill .2s ease, stroke .2s ease, stroke-width .2s ease; } #face-service-picker .face-picker__zone-layer:hover .face-picker__zone, #face-service-picker .face-picker__zone:focus-visible { fill: rgba(67,188,158,.07); stroke: rgba(255,255,255,.95); stroke-width: 1.08px; } #face-service-picker .face-picker__zone-layer:hover .face-picker__zone-halo, #face-service-picker .face-picker__zone-layer:focus-within .face-picker__zone-halo { opacity: .60; fill: rgba(69,188,160,.09); } #face-service-picker .face-picker__zone.is-active { fill: rgba(42,184,151,.13); stroke: rgba(237,255,249,.95); stroke-width: 1.12px; filter: none; } #face-service-picker .face-picker__zone-layer:has(> .face-picker__zone.is-active) .face-picker__zone-halo { fill: rgba(39,187,153,.20); stroke: rgba(73,211,176,.64); opacity: .72; } #face-service-picker .face-picker__zone:focus-visible { stroke: #0d9c80; stroke-width: 1.4px; } /* Frosted buttons: blur only the background, never blur the label or thumbnail. */ #face-service-picker .face-picker__view-tab, #face-service-picker .face-picker__service, #face-service-picker .face-picker__all, #face-service-picker .face-picker__chip, #booking-flow #services .booking-action-row .clinic-btn { -webkit-backdrop-filter:blur(7px) saturate(1.12); backdrop-filter:blur(7px) saturate(1.12); transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; } #face-service-picker .face-picker__view-tab { background:rgba(255,255,255,.84); border-radius:20px; box-shadow:0 6px 22px rgba(24,66,50,.09), inset 0 1px rgba(255,255,255,.85); } #face-service-picker .face-picker__view-tab.is-active { background:rgba(237,249,244,.92); box-shadow:0 0 0 1px rgba(37,151,126,.12),0 7px 20px rgba(24,66,50,.12); } #face-service-picker .face-picker__service { border-radius:19px; background:rgba(255,255,255,.86); box-shadow:0 5px 20px rgba(27,77,59,.045),inset 0 1px rgba(255,255,255,.72); } #face-service-picker .face-picker__service:hover { background:rgba(246,253,249,.95); box-shadow:0 8px 23px rgba(20,91,70,.09); } #face-service-picker .face-picker__service.is-selected { background:linear-gradient(115deg,rgba(234,249,242,.96),rgba(251,255,253,.88)); border-color:rgba(26,147,119,.78); box-shadow:0 6px 20px rgba(17,117,92,.08),inset 0 0 0 1px rgba(34,148,121,.12); } #face-service-picker .face-picker__selected, #face-service-picker .face-picker__services-box { border-radius:23px; box-shadow:0 7px 28px rgba(26,70,52,.045); } #face-service-picker .face-picker__chip { background:rgba(228,246,236,.88); box-shadow:0 2px 10px rgba(27,102,77,.055); } @media(max-width:767.98px){ #face-service-picker .face-picker__view-tab {border-radius:13px} #face-service-picker .face-picker__service {border-radius:14px} #face-service-picker .face-picker__services-box, #face-service-picker .face-picker__selected {border-radius:16px} } @media(prefers-reduced-motion:reduce){ #face-service-picker .face-picker__zone, #face-service-picker .face-picker__service, #face-service-picker .face-picker__view-tab {transition:none!important} } /* A gentle lifted finish on the navigation buttons without softening text. */ #booking-flow #services .booking-action-row .clinic-btn { box-shadow:0 7px 19px rgba(25,93,72,.10),inset 0 1px rgba(255,255,255,.12); } #booking-flow #services .booking-action-row .clinic-btn:hover:not(:disabled) { box-shadow:0 9px 23px rgba(25,93,72,.16); }