/* =========================================================================
   Skin Consultation widget – RTL, responsive, monochrome
   ========================================================================= */
:root{
	--sc-ink:#111111;
	--sc-ink-soft:#444444;
	--sc-line:#e6e6e6;
	--sc-card:#ffffff;
	--sc-bg:#f4f4f4;
	--sc-muted:#8a8a8a;
	--sc-shadow:0 18px 50px rgba(0,0,0,.20);
	--sc-radius:16px;
}

#skincon-root,#skincon-root *{box-sizing:border-box;}
#skincon-root{
	font-family:"Heebo","Assistant","Rubik",-apple-system,"Segoe UI",Arial,sans-serif;
	direction:rtl;
}

/* =========================================================================
   Theme-proofing — stop host themes (Hello/Elementor etc.) from styling our
   controls. Scoped to #skincon-root (ID) + !important on the few properties
   themes most often override (color, alignment, transform, shadow).
   ========================================================================= */
#skincon-root button,
#skincon-root input,
#skincon-root textarea,
#skincon-root a.skincon-inline-open{
	-webkit-appearance:none;appearance:none;
	margin:0;outline:none;
	font-family:inherit;line-height:normal;
	text-transform:none !important;letter-spacing:normal !important;
	text-decoration:none !important;text-shadow:none !important;min-height:0;
}
#skincon-root .skincon-btn,
#skincon-root .skincon-action,
#skincon-root .skincon-action.is-primary,
#skincon-root .skincon-fab,
#skincon-root .skincon-inline-open{
	background:var(--sc-ink) !important;
	background-image:none !important;
	color:#fff !important;
	border:none !important;
	text-align:center !important;
	box-shadow:none !important;
	width:auto;
}
#skincon-root .skincon-btn{width:100% !important;}
#skincon-root .skincon-fab{box-shadow:0 10px 30px rgba(0,0,0,.28) !important;}
/* keep the disabled state visibly grey despite the rule above */
#skincon-root .skincon-btn:disabled,
#skincon-root .skincon-btn[disabled]{background:#b6b6b6 !important;color:#fff !important;}
/* text / icon buttons stay transparent with dark text */
#skincon-root .skincon-back,
#skincon-root .skincon-skip,
#skincon-root .skincon-iconbtn,
#skincon-root .skincon-cam-side,
#skincon-root .skincon-cam-close{
	background:transparent !important;background-image:none !important;
	box-shadow:none !important;text-align:center !important;
}
#skincon-root .skincon-back,
#skincon-root .skincon-skip{color:var(--sc-ink) !important;width:100% !important;}
#skincon-root .skincon-iconbtn{color:var(--sc-ink) !important;}
#skincon-root .skincon-cam-side,
#skincon-root .skincon-cam-close{color:#fff !important;}
#skincon-root .skincon-shutter{
	background:rgba(255,255,255,.25) !important;border:5px solid #fff !important;
	box-shadow:none !important;
}
/* form fields: neutralise theme input theming */
#skincon-root .skincon-field input{
	background:#fff !important;color:var(--sc-ink) !important;
	box-shadow:none !important;text-align:right !important;
}

/* ---- Floating launcher ------------------------------------------------- */
.skincon-fab{
	position:fixed;
	bottom:22px;
	right:22px;
	z-index:2147483000;
	display:inline-flex;
	align-items:center;
	gap:10px;
	background:var(--sc-ink);
	color:#fff;
	border:none;
	border-radius:999px;
	padding:14px 22px;
	font-family:inherit;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	box-shadow:0 10px 30px rgba(0,0,0,.28);
	transition:transform .18s ease, box-shadow .18s ease;
}
.skincon-fab:hover{transform:translateY(-2px);box-shadow:0 14px 36px rgba(0,0,0,.34);}
.skincon-fab svg{width:22px;height:22px;flex:none;}
.skincon-fab.is-hidden{display:none;}

/* ---- Backdrop + panel -------------------------------------------------- */
.skincon-backdrop{
	position:fixed;inset:0;z-index:2147483001;
	background:rgba(0,0,0,.45);
	opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
}
.skincon-backdrop.is-open{opacity:1;visibility:visible;}

.skincon-panel{
	position:fixed;top:0;bottom:0;right:0;z-index:2147483002;
	width:40%;max-width:560px;min-width:360px;
	background:var(--sc-bg);
	box-shadow:var(--sc-shadow);
	transform:translateX(110%);
	transition:transform .32s cubic-bezier(.22,.61,.36,1);
	display:flex;flex-direction:column;
	overflow:hidden;
}
.skincon-panel.is-open{transform:translateX(0);}

@media (max-width:768px){
	.skincon-panel{width:100%;max-width:none;min-width:0;}
	.skincon-fab{bottom:16px;right:16px;padding:12px 18px;font-size:15px;}
}

/* ---- Header ------------------------------------------------------------ */
.skincon-head{
	flex:none;display:flex;align-items:center;justify-content:space-between;
	padding:16px 18px;background:var(--sc-bg);border-bottom:1px solid var(--sc-line);
}
.skincon-head .skincon-brand{font-size:20px;font-weight:800;letter-spacing:.5px;color:var(--sc-ink);}
.skincon-iconbtn{
	background:none;border:none;cursor:pointer;color:var(--sc-ink);
	width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
}
.skincon-iconbtn:hover{background:rgba(0,0,0,.06);}
.skincon-iconbtn svg{width:24px;height:24px;}
.skincon-head .skincon-spacer{width:40px;}

/* ---- Progress ---------------------------------------------------------- */
.skincon-progress{flex:none;height:4px;background:var(--sc-line);}
.skincon-progress span{display:block;height:100%;width:0;background:var(--sc-ink);transition:width .35s ease;}

/* ---- Body / scroll area ------------------------------------------------ */
.skincon-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:24px 22px 28px;}
.skincon-step{animation:scFade .3s ease;}
@keyframes scFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.skincon-qtitle{font-size:26px;line-height:1.25;font-weight:800;color:var(--sc-ink);text-align:center;margin:8px 0 6px;}
.skincon-qsub{font-size:15px;line-height:1.5;color:var(--sc-ink-soft);text-align:center;margin:0 0 18px;}

/* ---- Welcome ----------------------------------------------------------- */
.skincon-hero{aspect-ratio:1/1;width:100%;border-radius:var(--sc-radius);overflow:hidden;background:#ddd;margin-bottom:20px;}
.skincon-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.skincon-hero.is-empty{display:flex;align-items:center;justify-content:center;color:var(--sc-muted);font-size:14px;}
.skincon-welcome .skincon-qtitle{margin-top:4px;}

/* ---- Option list ------------------------------------------------------- */
.skincon-options{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.skincon-opt{
	display:flex;align-items:center;gap:14px;
	background:var(--sc-card);border:1.5px solid transparent;border-radius:var(--sc-radius);
	padding:16px 18px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;
	box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.skincon-opt:hover{box-shadow:0 4px 14px rgba(0,0,0,.08);}
.skincon-opt.is-sel{border-color:var(--sc-ink);}
.skincon-radio{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #c4c4c4;position:relative;transition:border-color .15s ease;}
.skincon-opt.is-sel .skincon-radio{border-color:var(--sc-ink);}
.skincon-opt.is-sel .skincon-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--sc-ink);}
.skincon-opt-label{flex:1;font-size:17px;font-weight:500;color:var(--sc-ink);text-align:right;}
.skincon-opt-thumb{flex:none;width:78px;height:60px;border-radius:10px;object-fit:cover;background:#eee;}

/* image-list: thumbnail on the left edge, label right */
.skincon-opt.is-imglist{padding:0;overflow:hidden;}
.skincon-opt.is-imglist .skincon-radio{margin-right:18px;}
.skincon-opt.is-imglist .skincon-opt-label{padding:18px 0;}
.skincon-opt.is-imglist .skincon-opt-thumb{width:96px;height:78px;border-radius:0;}

/* image-grid (skin type) */
.skincon-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.skincon-grid .skincon-opt{padding:0;overflow:hidden;}
.skincon-grid .skincon-radio{margin:0 14px;}
.skincon-grid .skincon-opt-label{padding:14px 0;font-size:16px;}
.skincon-grid .skincon-opt-thumb{width:78px;height:78px;border-radius:0;}

/* ---- Footer / nav ------------------------------------------------------ */
.skincon-foot{flex:none;padding:16px 22px 22px;background:var(--sc-bg);border-top:1px solid var(--sc-line);}
.skincon-btn{
	display:block;width:100%;border:none;cursor:pointer;border-radius:12px;
	background:var(--sc-ink);color:#fff;font-family:inherit;font-size:18px;font-weight:700;
	padding:16px;text-align:center;transition:opacity .15s ease,background .15s ease;
}
.skincon-btn:hover{opacity:.9;}
.skincon-btn[disabled]{background:#b6b6b6;cursor:not-allowed;opacity:1;}
.skincon-back{display:block;width:100%;margin-top:12px;background:none;border:none;cursor:pointer;
	font-family:inherit;font-size:15px;font-weight:700;color:var(--sc-ink);text-align:center;}
.skincon-back:hover{text-decoration:underline;}
.skincon-foot .skincon-note{font-size:13px;line-height:1.5;color:var(--sc-muted);text-align:center;margin:14px 0 0;}

/* ---- Selfie instructions ---------------------------------------------- */
.skincon-tips{display:grid;grid-template-columns:1fr 1fr;gap:18px 12px;margin:6px 0 18px;}
.skincon-tip{text-align:center;}
.skincon-tip svg{width:54px;height:54px;color:var(--sc-ink);}
.skincon-tip span{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--sc-ink-soft);}
.skincon-uploadbox{
	border:2px dashed #cfcfcf;border-radius:var(--sc-radius);background:var(--sc-card);
	padding:22px;text-align:center;color:var(--sc-ink-soft);
}
.skincon-fineprint{font-size:13px;line-height:1.55;color:var(--sc-muted);text-align:center;margin:4px 0 16px;}
.skincon-uploadbox .skincon-thumbprev{max-width:160px;max-height:160px;border-radius:12px;margin:0 auto 10px;display:block;}
.skincon-actionrow{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.skincon-action{
	display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
	border:1.5px solid var(--sc-ink);background:var(--sc-ink);color:#fff;
	border-radius:12px;padding:14px;font-family:inherit;font-size:16px;font-weight:700;
}
.skincon-action.is-primary{background:var(--sc-ink);color:#fff;}
.skincon-action svg{width:20px;height:20px;}
.skincon-skip{display:block;width:100%;margin-top:10px;background:none;border:none;cursor:pointer;
	font-family:inherit;font-size:15px;font-weight:700;color:var(--sc-ink);}

/* ---- Contact form ------------------------------------------------------ */
.skincon-field{margin-bottom:14px;text-align:right;}
.skincon-field label{display:block;font-size:14px;font-weight:700;color:var(--sc-ink);margin-bottom:6px;}
.skincon-field input{
	width:100%;border:1.5px solid var(--sc-line);border-radius:12px;background:#fff;
	padding:14px;font-family:inherit;font-size:16px;color:var(--sc-ink);direction:rtl;
}
.skincon-field input:focus{outline:none;border-color:var(--sc-ink);}
.skincon-hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden;}
.skincon-err{color:#b00020;font-size:14px;text-align:center;margin:8px 0 0;min-height:18px;}

/* ---- Camera modal ------------------------------------------------------ */
.skincon-cam{position:fixed;inset:0;z-index:2147483010;background:#000;display:flex;flex-direction:column;}
.skincon-cam video{flex:1;width:100%;object-fit:cover;transform:scaleX(-1);}
.skincon-cam canvas{display:none;}
.skincon-cam-overlay{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center;}
.skincon-cam-oval{width:62%;max-width:300px;aspect-ratio:3/4;border:3px solid rgba(255,255,255,.7);border-radius:50%;
	box-shadow:0 0 0 9999px rgba(0,0,0,.45);transition:border-color .2s ease;}
.skincon-cam-oval.is-good{border-color:#39d98a;}
.skincon-cam-hint{position:absolute;top:24px;left:0;right:0;text-align:center;color:#fff;font-size:16px;font-weight:700;
	text-shadow:0 1px 4px rgba(0,0,0,.6);padding:0 20px;}
.skincon-cam-bar{position:absolute;bottom:0;left:0;right:0;padding:22px;display:flex;align-items:center;justify-content:center;gap:30px;}
.skincon-shutter{width:74px;height:74px;border-radius:50%;border:5px solid #fff;background:rgba(255,255,255,.25);cursor:pointer;}
.skincon-shutter:disabled{opacity:.4;cursor:not-allowed;}
.skincon-cam-close{position:absolute;top:18px;right:18px;background:rgba(0,0,0,.4);border:none;border-radius:50%;
	width:42px;height:42px;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.skincon-cam-close svg{width:22px;height:22px;}
.skincon-cam-side{background:none;border:none;color:#fff;font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;}

/* ---- Thank you --------------------------------------------------------- */
.skincon-thanks{text-align:center;padding:30px 6px;}
.skincon-thanks .skincon-check{width:84px;height:84px;border-radius:50%;background:var(--sc-ink);color:#fff;
	display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
.skincon-thanks .skincon-check svg{width:42px;height:42px;}
.skincon-thanks h3{font-size:26px;font-weight:800;color:var(--sc-ink);margin:0 0 12px;}
.skincon-thanks p{font-size:16px;line-height:1.6;color:var(--sc-ink-soft);margin:0 auto;max-width:340px;}

/* ---- Inline shortcode button ------------------------------------------ */
.skincon-inline-open{
	display:inline-flex !important;align-items:center;gap:8px;
	background:var(--sc-ink) !important;background-image:none !important;color:#fff !important;
	border:none !important;border-radius:999px !important;padding:13px 26px;
	font-family:inherit;font-size:16px;font-weight:700;cursor:pointer;
	text-align:center !important;text-transform:none !important;text-decoration:none !important;
	box-shadow:none !important;-webkit-appearance:none;appearance:none;width:auto;
}

.skincon-spin{width:18px;height:18px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
	display:inline-block;vertical-align:middle;animation:scSpin .7s linear infinite;}
@keyframes scSpin{to{transform:rotate(360deg);}}

@media (prefers-reduced-motion:reduce){
	.skincon-panel,.skincon-backdrop,.skincon-progress span,.skincon-step,.skincon-fab{transition:none;animation:none;}
}