/* ==========================================================================
   S·I SKIN MATCH™ — DIGITAL BIOMETRIC COSMETIC EVALUATION FOR MEN
   Treatment-match questionnaire · ink, sand and bronze, same language as the home page
   ========================================================================== */

:root {
  --sm-bg: #141312;
  --sm-surface: #1E1D1B;
  --sm-surface-2: #282624;
  --sm-border: rgba(169, 123, 82, 0.28);
  --sm-border-subtle: rgba(237, 230, 220, 0.12);
  --sm-text: #EDE6DC;
  --sm-text-muted: #A8A196;
  --sm-bronze: #A97B52;
  --sm-amber: #D9A441;
  --sm-green: #22C55E;
  --sm-green-glow: rgba(34, 197, 94, 0.25);
  --sm-gold-glow: rgba(217, 164, 65, 0.2);
}

/* Entry Banners & Triggers in Main Page */
.skin-match-hero-btn {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--bronze);
  cursor: pointer;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}
.skin-match-hero-btn:hover {
  background: var(--ink);
  color: var(--sand);
  border-color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(28, 27, 26, 0.15);
}

.skin-match-entry-card {
  background: #1C1B1A url('assets/black-texture.jpg') center/cover;
  border: 1px solid var(--bronze);
  border-radius: 4px;
  padding: clamp(24px, 4vw, 36px);
  margin: 24px 0 32px;
  color: #F5F1EA;
  box-shadow: 0 16px 36px rgba(28, 27, 26, 0.15);
  position: relative;
  overflow: hidden;
}
.skin-match-entry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #D9A441, var(--bronze), transparent);
}
.skin-match-entry-badge {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: #D9A441;
  font-weight: 700;
  margin-bottom: 12px;
  display: inline-block;
}
.skin-match-entry-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 768px) {
  .skin-match-entry-grid {
    grid-template-columns: 1fr;
  }
}
.skin-match-entry-h3 {
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 800;
  color: #F5F1EA;
  margin-bottom: 8px;
}
.skin-match-entry-p {
  font-size: 15px;
  line-height: 1.6;
  color: #DFD7CC;
  max-width: 60ch;
  margin: 0;
}
.skin-match-open-btn {
  background: #D9A441;
  color: #1C1B1A;
  font-weight: 700;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(217, 164, 65, 0.3);
  transition: all 0.25s ease;
}
.skin-match-open-btn:hover {
  background: #E5B252;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(217, 164, 65, 0.45);
}

/* ---------- modal ---------- */
.sm-modal{
  --smb:var(--x-body,"IBM Plex Sans Hebrew","Assistant",system-ui,sans-serif);
  --smd:var(--x-display,"Bellefair","Frank Ruhl Libre",Georgia,serif);
  --smt:var(--x-tech,"Archivo","Helvetica Neue",Arial,sans-serif);
  --ink:#0E0B09;--card:#16110E;--sand:#EDE6DC;--soft:#D8CEC1;--dim:#A99C8C;--mute:#958A7C;--bronze:#C4946A;--amber:#D9A441;
  --line:rgba(237,230,220,.12);--line2:rgba(237,230,220,.22);
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:clamp(0px,3vw,32px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;
  font-family:var(--smb);color:var(--sand);direction:rtl;text-align:right;-webkit-font-smoothing:antialiased}
.sm-modal.is-active{opacity:1;visibility:visible}
.sm-modal[hidden]{display:none!important}
html.sm-lock,html.sm-lock body{overflow:hidden}
.sm-modal *{box-sizing:border-box}
.sm-backdrop{position:absolute;inset:0;background:rgba(8,6,5,.78);backdrop-filter:blur(14px) saturate(.8);-webkit-backdrop-filter:blur(14px) saturate(.8)}
.sm-dialog{position:relative;width:min(1040px,100%);height:min(760px,100%);display:flex;flex-direction:column;overflow:hidden;outline:none;
  background:radial-gradient(70% 50% at 100% 0%,rgba(196,148,106,.10),transparent 70%),radial-gradient(60% 50% at 0% 100%,rgba(86,100,114,.10),transparent 70%),var(--ink);
  border:1px solid var(--line2);border-radius:28px;box-shadow:0 50px 120px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(237,230,220,.06);
  transform:translateY(14px) scale(.985);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.sm-modal.is-active .sm-dialog{transform:none}

/* header */
.sm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,3vw,30px);border-bottom:1px solid var(--line)}
.sm-brand{display:flex;align-items:center;gap:14px}
.sm-brand-arch{width:20px;height:auto;color:var(--bronze);flex:none}
.sm-brand-en{margin:0 0 2px;font:500 10.5px/1.2 var(--smt);letter-spacing:.32em;color:var(--bronze);text-align:right}
.sm-brand-he{margin:0;font:400 15px/1.3 var(--smb);color:var(--soft);letter-spacing:0}
.sm-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;cursor:pointer;background:transparent;color:var(--sand);border:1px solid var(--line2);transition:background .2s,border-color .2s}
.sm-x svg{width:14px;height:14px}
.sm-x:hover{background:rgba(237,230,220,.06);border-color:var(--sand)}

/* body: main (right in RTL) + side panel */
.sm-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 320px}
.sm-main{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:clamp(22px,3.4vw,40px) clamp(20px,3.6vw,48px) 36px;scrollbar-width:thin;scrollbar-color:rgba(237,230,220,.18) transparent}
.sm-side{border-inline-start:1px solid var(--line);padding:26px 26px 22px;display:flex;flex-direction:column;gap:18px;background:linear-gradient(180deg,rgba(237,230,220,.025),transparent 60%);min-height:0;overflow-y:auto}

/* progress */
.sm-progress{margin-bottom:clamp(22px,3vw,34px)}
.sm-progress[hidden]{display:none}
.sm-prog-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;min-height:30px}
.sm-count{font:400 12px var(--smt);letter-spacing:.2em;color:var(--mute)}
.sm-count b{font-weight:500;color:var(--sand)}
.sm-back{font:400 13.5px var(--smb);color:var(--dim);background:none;border:0;padding:4px 2px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.sm-back:hover{color:var(--sand)}
.sm-back[hidden]{display:none}
.sm-seg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sm-seg li{height:2px;border-radius:2px;background:rgba(237,230,220,.12);position:relative;overflow:hidden}
.sm-seg li::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,var(--bronze),var(--amber));transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sm-seg li.done::after{transform:scaleX(1)}
.sm-seg li.now::after{transform:scaleX(.35)}

/* question */
.sm-q,.sm-res{animation:smIn .45s cubic-bezier(.16,1,.3,1) both}
@keyframes smIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sm-eyebrow{margin:0 0 10px;font:500 12.5px/1.4 var(--smb);color:var(--bronze);letter-spacing:.02em}
.sm-eyebrow span{margin-inline-start:12px;font:500 10.5px var(--smt);letter-spacing:.24em;color:var(--mute);text-transform:uppercase}
.sm-q-title{margin:0 0 10px;font:400 clamp(28px,3.4vw,40px)/1.12 var(--smd);color:var(--sand);text-wrap:balance;outline:none}
.sm-q-desc{margin:0 0 clamp(20px,2.6vw,28px);font:300 16px/1.6 var(--smb);color:var(--dim)}
.sm-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sm-opt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:14px;align-items:flex-start;padding:18px 18px 18px 20px;border-radius:18px;
  border:1px solid var(--line);background:linear-gradient(160deg,rgba(237,230,220,.045),rgba(14,11,9,.2));text-align:right;
  transition:border-color .25s,background .25s,transform .25s}
.sm-opt:hover{border-color:rgba(196,148,106,.55);background:linear-gradient(160deg,rgba(237,230,220,.07),rgba(14,11,9,.2));transform:translateY(-1px)}
.sm-opt:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sm-opt.is-on{border-color:var(--amber);background:linear-gradient(160deg,rgba(217,164,65,.12),rgba(14,11,9,.25))}
.sm-opt-mark{flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;border:1px solid rgba(237,230,220,.4);display:grid;place-items:center;transition:border-color .2s}
.sm-opt-mark::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.sm-opt.is-on .sm-opt-mark{border-color:var(--amber)}
.sm-opt.is-on .sm-opt-mark::after{transform:scale(1)}
.sm-opt-body{display:flex;flex-direction:column;gap:5px;min-width:0}
.sm-opt-body strong{font:500 16.5px/1.35 var(--smb);color:var(--sand)}
.sm-opt-body span{font:300 14px/1.55 var(--smb);color:var(--dim)}

/* loading */
.sm-loading{min-height:340px;display:grid;place-items:center;align-content:center;gap:18px;color:var(--dim);font:300 16px var(--smb)}
.sm-loading p{margin:0}
.sm-loading svg{width:34px;height:auto;fill:none;stroke:var(--bronze);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:70;stroke-dashoffset:70;animation:smDraw 1.1s ease-in-out infinite alternate}
@keyframes smDraw{to{stroke-dashoffset:0}}

/* result */
.sm-res-title{margin:0 0 12px;font:400 clamp(32px,4vw,48px)/1.06 var(--smd);color:var(--sand);text-wrap:balance;outline:none}
.sm-res-desc{margin:0 0 22px;max-width:56ch;font:300 17px/1.65 var(--smb);color:var(--soft)}
.sm-why{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 0;border-block:1px solid var(--line);margin-bottom:26px}
.sm-why-k{font:400 13px var(--smb);color:var(--mute)}
.sm-why ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sm-why li{font:400 13.5px var(--smb);color:var(--sand);border:1px solid var(--line2);border-radius:999px;padding:5px 13px}
.sm-h4{margin:0 0 6px;font:500 13px var(--smb);color:var(--bronze);letter-spacing:.02em}
.sm-steps{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
.sm-steps li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line)}
.sm-steps .n{flex:none;font:400 12px var(--smt);letter-spacing:.14em;color:var(--bronze);min-width:20px}
.sm-steps .t{font:300 14.5px/1.55 var(--smb);color:var(--dim)}
.sm-steps .t strong{display:block;font-weight:500;font-size:15.5px;color:var(--sand);margin-bottom:2px}
.sm-perks{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
.sm-perks li{display:flex;align-items:center;gap:8px;font:400 14px var(--smb);color:var(--soft)}
.sm-perks svg{width:15px;height:15px;color:var(--amber);flex:none}
.sm-note{margin:0 0 22px;padding:12px 16px;border-radius:14px;background:rgba(196,148,106,.08);border:1px solid rgba(196,148,106,.22);font:300 14.5px/1.6 var(--smb);color:var(--soft)}
.sm-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.sm-btn{display:inline-flex;align-items:center;gap:10px;font:500 15.5px var(--smb);text-decoration:none;cursor:pointer;border-radius:999px;padding:14px 26px;border:1px solid var(--sand);background:var(--sand);color:var(--ink);transition:transform .25s,background .25s}
.sm-btn:hover{background:#fff;transform:translateY(-1px)}
.sm-btn.ghost{background:transparent;color:var(--sand);border-color:var(--line2)}
.sm-btn.ghost:hover{border-color:var(--sand);background:rgba(237,230,220,.05)}
.sm-btn:focus-visible,.sm-x:focus-visible,.sm-back:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.sm-wa-dot{width:8px;height:8px;border-radius:50%;background:#2FB45A;box-shadow:0 0 0 4px rgba(47,180,90,.16)}
.sm-fine{margin:0;font:300 12.5px/1.6 var(--smb);color:var(--mute);max-width:62ch}

/* side panel */
.sm-face{position:relative;width:100%;max-width:230px;margin:0 auto}
.sm-face svg{width:100%;height:auto;display:block}
.sm-face-arch{stroke:rgba(196,148,106,.45);stroke-width:1}
.sm-face-arch-in{stroke:rgba(196,148,106,.18)}
.sm-face-line path{stroke:rgba(237,230,220,.5);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.sm-zone{opacity:0;transition:opacity .6s ease}
.sm-zone.is-on{opacity:1}
.sm-dots circle{fill:rgba(237,230,220,.25);transition:fill .4s}
.sm-dots circle.is-on{fill:var(--amber)}
.sm-profile{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sm-profile li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.sm-profile .n{font:400 11px var(--smt);letter-spacing:.12em;color:var(--mute)}
.sm-profile .k{font:400 13.5px var(--smb);color:var(--dim)}
.sm-profile .v{font:400 13.5px var(--smb);color:var(--mute);text-align:left}
.sm-profile li.is-now .n,.sm-profile li.is-now .k{color:var(--sand)}
.sm-profile li.is-set .n{color:var(--bronze)}
.sm-profile li.is-set .v{color:var(--sand)}
.sm-side-note{margin:auto 0 0;font:300 12.5px/1.6 var(--smb);color:var(--mute)}

/* tablet & phone */
@media (max-width:900px){
  .sm-body{grid-template-columns:1fr}
  .sm-side{display:none}
  .sm-opts,.sm-steps{grid-template-columns:1fr}
}
@media (max-width:640px){
  .sm-modal{padding:0;place-items:end stretch}
  .sm-dialog{width:100%;height:100%;border-radius:0;border:0}
  .sm-head{padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px}
  .sm-brand-he{font-size:14px}
  .sm-main{padding:20px 18px calc(28px + env(safe-area-inset-bottom,0px))}
  .sm-opt{padding:15px 16px;border-radius:16px}
  .sm-q-title{font-size:28px}
  .sm-cta .sm-btn{flex:1 1 100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .sm-modal,.sm-dialog,.sm-opt,.sm-seg li::after,.sm-zone{transition:none}
  .sm-q,.sm-res,.sm-loading svg{animation:none}
  .sm-loading svg{stroke-dashoffset:0}
}