/* ================================================
Ilana Eyal – Skin Quiz Frontend
Black & White Brand Aesthetic · RTL Hebrew
================================================ */

.isq-wrapper {
--isq-primary: #000000;
--isq-primary-dark: #000000;
--isq-primary-light: #333333;
--isq-accent: #F0F0F0;
--isq-accent-dark: #E0E0E0;
--isq-bg: #FAFAFA;
--isq-card: #FFFFFF;
--isq-text: #111111;
--isq-text-light: #555555;
--isq-border: #DDDDDD;
--isq-success: #4CAF50;
--isq-gold: #333333;
--isq-radius: 20px;
--isq-shadow-sm: 0 2px 8px rgba(0, 0, 0, .06);
--isq-shadow-md: 0 8px 24px rgba(0, 0, 0, .10);
--isq-shadow-lg: 0 20px 48px rgba(0, 0, 0, .14);
--isq-font: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

font-family: var(--isq-font);
direction: rtl;
color: var(--isq-text);
max-width: 100%;
margin: 0 auto;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.isq-wrapper *, .isq-wrapper *::before, .isq-wrapper *::after { box-sizing: border-box; }
.isq-wrapper button { font-family: var(--isq-font); }

.isq-inner {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
width: 100%;
}

/* PROGRESS BAR */
.isq-progress-wrap { max-width: 900px; margin: 0 auto 30px; padding: 24px 20px 0; }
.isq-progress-bar { height: 6px; background: var(--isq-accent); border-radius: 100px; overflow: hidden; }
.isq-progress-fill {
height: 100%;
background: linear-gradient(90deg, #555555, #000000);
border-radius: 100px;
transition: width .5s cubic-bezier(.22,1,.36,1);
width: 0%;
}
.isq-progress-text { text-align: center; font-size: .88rem; color: var(--isq-text-light); margin-top: 10px; font-weight: 500; }

/* SHARED STEP ANIMATION */
.isq-step { animation: isqSlide .5s cubic-bezier(.22,1,.36,1); }
@keyframes isqSlide { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes isqPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes isqShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes isqFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* LANDING */
.isq-landing { padding: 0 0 40px; }
.isq-landing-hero {
position: relative;
background: linear-gradient(155deg, #111111 0%, #222222 55%, #444444 100%);
color: #fff;
padding: 64px 32px 56px;
border-radius: var(--isq-radius);
overflow: hidden;
text-align: center;
box-shadow: var(--isq-shadow-lg);
}
.isq-landing-hero::before {
content: '';
position: absolute; top: -50%; right: -20%;
width: 70%; height: 140%;
background: radial-gradient(ellipse, rgba(255,255,255,.06) 0%, transparent 70%);
pointer-events: none;
}
.isq-landing-hero::after {
content: '';
position: absolute; bottom: 0; left: 0; width: 100%; height: 3px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
}
.isq-landing-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.3);
color: #FFFFFF;
padding: 6px 20px; border-radius: 100px;
font-size: .9rem; font-weight: 600; letter-spacing: .5px;
margin-bottom: 22px;
}
.isq-landing-hero h1 {
font-size: 2.4rem; font-weight: 800;
line-height: 1.3; margin: 0 auto 16px;
color: #fff; max-width: 640px;
}
.isq-landing-hero p {
font-size: 1.15rem; color: rgba(255,255,255,.85);
line-height: 1.65; max-width: 560px; margin: 0 auto 36px;
font-weight: 300;
}

.isq-btn-start, .isq-start-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
padding: 18px 48px;
font-size: 1.2rem; font-weight: 700;
background: #FFFFFF; color: #000000;
border: none; border-radius: 100px;
cursor: pointer; font-family: var(--isq-font);
transition: all .3s cubic-bezier(.22,1,.36,1);
box-shadow: 0 6px 20px rgba(255,255,255,.25);
min-height: 58px; position: relative; overflow: hidden;
text-decoration: none;
}
.isq-btn-start::before, .isq-start-btn::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
background-size: 200% 100%;
animation: isqShimmer 3s infinite linear;
pointer-events: none;
}
.isq-btn-start:hover, .isq-start-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(255,255,255,.35);
background: #F0F0F0;
}

.isq-landing-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 36px auto 0;
max-width: 900px; padding: 0 20px;
}
.isq-landing-feature {
background: var(--isq-card);
border: 1px solid var(--isq-border);
border-radius: var(--isq-radius);
padding: 24px 16px;
text-align: center;
transition: transform .3s, box-shadow .3s;
}
.isq-landing-feature:hover { transform: translateY(-4px); box-shadow: var(--isq-shadow-md); }
.isq-landing-feature-icon {
display: flex; align-items: center; justify-content: center;
width: 48px; height: 48px;
margin: 0 auto 12px;
background: #F0F0F0;
border-radius: 50%;
font-size: 0;
}
.isq-landing-feature h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; color: var(--isq-primary); }
.isq-landing-feature p { font-size: .85rem; color: var(--isq-text-light); margin: 0; }

/* QUESTIONS */
.isq-q-step { padding: 0 0 40px; }
.isq-q-title {
font-size: 1.6rem; font-weight: 800;
color: var(--isq-text); text-align: center;
margin: 0 auto 6px; max-width: 640px; line-height: 1.4;
}
.isq-q-subtitle {
text-align: center; color: var(--isq-text-light);
font-size: .95rem; margin: 0 auto 28px;
}
.isq-q-hint {
display: inline-flex; align-items: center; gap: 6px;
background: var(--isq-accent); color: var(--isq-primary);
padding: 5px 14px; border-radius: 100px;
font-size: .8rem; font-weight: 600;
margin-bottom: 20px;
}

.isq-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
max-width: 680px;
margin: 0 auto 28px;
}
.isq-option {
background: var(--isq-card);
border: 2px solid var(--isq-border);
border-radius: 16px;
padding: 16px 18px;
cursor: pointer;
transition: all .22s cubic-bezier(.22,1,.36,1);
display: flex; align-items: center; gap: 12px;
text-align: right;
user-select: none;
-webkit-tap-highlight-color: transparent;
position: relative;
}
.isq-option:hover {
border-color: #555555;
transform: translateY(-2px);
box-shadow: var(--isq-shadow-md);
}
.isq-option.selected {
border-color: var(--isq-primary);
background: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}
.isq-option.selected::after {
content: '';
position: absolute;
top: 10px; left: 10px;
width: 24px; height: 24px;
background: var(--isq-primary);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
animation: isqSlide .3s ease-out;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
background-size: 14px;
background-repeat: no-repeat;
background-position: center;
}
.isq-option-icon { font-size: 1.6rem; flex-shrink: 0; }
.isq-option-label { font-size: 1rem; font-weight: 600; color: var(--isq-text); line-height: 1.35; }

/* NAV BUTTONS */
.isq-nav { display: flex; justify-content: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.isq-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 36px;
font-size: 1.02rem; font-weight: 700;
border: none; border-radius: 100px;
cursor: pointer; font-family: var(--isq-font);
transition: all .25s cubic-bezier(.22,1,.36,1);
min-height: 52px;
text-decoration: none;
}
.isq-btn-primary {
background: var(--isq-primary); color: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.isq-btn-primary:hover:not(:disabled) {
background: #333333;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.isq-btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.isq-btn-secondary {
background: transparent; color: var(--isq-text-light);
border: 2px solid var(--isq-border);
}
.isq-btn-secondary:hover { background: var(--isq-accent); color: var(--isq-primary); }
.isq-btn-full { width: 100%; }

/* EMAIL STEP */
.isq-email-step { padding: 0 0 40px; }
.isq-email-card {
background: var(--isq-card);
border-radius: var(--isq-radius);
padding: 36px 32px;
box-shadow: var(--isq-shadow-md);
max-width: 540px; margin: 0 auto;
border: 1px solid var(--isq-border);
}
.isq-email-emoji { text-align: center; font-size: 3rem; margin-bottom: 10px; animation: isqFloat 3s ease-in-out infinite; }
.isq-email-title { font-size: 1.5rem; font-weight: 800; text-align: center; margin: 0 0 8px; color: var(--isq-text); }
.isq-email-subtitle { text-align: center; color: var(--isq-text-light); margin: 0 0 26px; }

.isq-input-group { margin-bottom: 16px; text-align: right; }
.isq-input-group label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; color: var(--isq-text); }
.isq-input-group input {
width: 100%; padding: 13px 16px;
border: 2px solid var(--isq-border);
border-radius: 12px;
font-size: 1rem; font-family: var(--isq-font);
background: var(--isq-bg);
transition: border-color .2s;
direction: rtl;
}
.isq-input-group input:focus {
outline: none;
border-color: var(--isq-primary);
background: #fff;
}
.isq-input-error { color: #d32f2f; font-size: .85rem; margin-top: 4px; display: none; }
.isq-input-group.error input { border-color: #d32f2f; }
.isq-input-group.error .isq-input-error { display: block; }

.isq-form-secure { text-align: center; font-size: .82rem; color: var(--isq-text-light); margin-top: 14px; }

/* LOADING */
.isq-loading { text-align: center; padding: 60px 20px; }
.isq-spinner {
display: inline-block;
width: 50px; height: 50px;
border: 4px solid var(--isq-accent);
border-top-color: var(--isq-primary);
border-radius: 50%;
animation: isqSpin 1s linear infinite;
margin-bottom: 20px;
}
@keyframes isqSpin { to { transform: rotate(360deg); } }
.isq-loading-text { color: var(--isq-text-light); font-size: 1.02rem; font-weight: 500; }

/* RESULTS */
.isq-results { padding: 0 0 60px; }
.isq-results-hero {
text-align: center;
background: linear-gradient(135deg, #F0F0F0 0%, #FAFAFA 100%);
padding: 40px 28px 36px;
border-radius: var(--isq-radius);
margin-bottom: 32px;
border: 1px solid var(--isq-border);
position: relative;
overflow: hidden;
}
.isq-results-title { font-size: 2rem; font-weight: 800; color: var(--isq-primary); margin: 0 0 8px; }
.isq-results-subtitle { color: var(--isq-text-light); font-size: 1.02rem; margin: 0; max-width: 500px; margin: 0 auto; }

.isq-primary-badge {
display: inline-flex; align-items: center; gap: 8px;
background: var(--isq-primary); color: #fff;
padding: 6px 18px; border-radius: 100px;
font-size: .9rem; font-weight: 700;
margin-bottom: 14px;
}

/* Category block */
.isq-cat-block {
background: var(--isq-card);
border: 1px solid var(--isq-border);
border-radius: var(--isq-radius);
padding: 28px 24px;
margin-bottom: 22px;
box-shadow: var(--isq-shadow-sm);
}
.isq-cat-block.isq-primary-rec {
border: 2px solid var(--isq-primary);
box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
background: linear-gradient(180deg, #FFFFFF 0%, #F8F8F8 100%);
}
.isq-cat-head { text-align: center; margin-bottom: 22px; }
.isq-cat-label {
font-size: 1.5rem; font-weight: 800;
color: var(--isq-primary); margin: 0 0 8px;
}
.isq-cat-desc {
color: var(--isq-text-light); font-size: .98rem;
max-width: 560px; margin: 0 auto; line-height: 1.6;
}

/* Kits grid */
.isq-kits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: 780px;
margin: 0 auto;
}

.isq-kit {
background: var(--isq-bg);
border: 2px solid var(--isq-border);
border-radius: 18px;
padding: 20px;
display: flex; flex-direction: column;
transition: all .25s;
position: relative;
overflow: hidden;
}
.isq-kit:hover {
transform: translateY(-3px);
box-shadow: var(--isq-shadow-md);
border-color: #555555;
}
.isq-kit-tier {
display: inline-block;
padding: 4px 14px; border-radius: 100px;
font-size: .78rem; font-weight: 700; letter-spacing: .5px;
margin-bottom: 12px; text-transform: uppercase; align-self: flex-start;
}
.isq-kit-tier.basic { background: var(--isq-accent); color: var(--isq-primary); }
.isq-kit-tier.premium {
background: #000000;
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}

.isq-kit-image {
width: 100%; aspect-ratio: 1;
background: #fff;
border-radius: 14px;
overflow: hidden;
margin-bottom: 14px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--isq-border);
}
.isq-kit-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.isq-kit-name {
font-size: 1.02rem; font-weight: 700;
color: var(--isq-text); margin: 0 0 6px;
line-height: 1.4; min-height: 2.8em;
}
.isq-kit-desc {
font-size: .85rem; color: var(--isq-text-light);
margin: 0 0 14px; line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.isq-kit-price { margin: auto 0 14px; }
.isq-kit-price .woocommerce-Price-amount { font-size: 1.25rem; font-weight: 800; color: var(--isq-primary); }
.isq-kit-price del { opacity: .55; margin-left: 6px; font-size: .95rem; }
.isq-kit-price ins { text-decoration: none; }

.isq-kit-btn {
display: block; text-align: center;
padding: 13px 18px;
border-radius: 100px;
font-size: .95rem; font-weight: 700;
text-decoration: none; transition: all .25s;
border: none; cursor: pointer; width: 100%;
font-family: var(--isq-font);
}
.isq-kit-btn.basic {
background: #fff; color: var(--isq-primary);
border: 2px solid var(--isq-primary);
}
.isq-kit-btn.basic:hover { background: var(--isq-primary); color: #fff; }
.isq-kit-btn.premium {
background: #000000;
color: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.isq-kit-btn.premium:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); background: #222222; }

.isq-kit-unavailable {
display: block; text-align: center;
padding: 13px 18px; border-radius: 100px;
background: var(--isq-border); color: var(--isq-text-light);
font-size: .88rem; font-weight: 600;
}

/* WhatsApp */
.isq-closing {
margin-top: 40px;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: #fff;
padding: 32px 28px;
border-radius: var(--isq-radius);
text-align: center;
box-shadow: 0 8px 24px rgba(18, 140, 126, .25);
}
.isq-closing h3 { margin: 0 0 8px; font-size: 1.4rem; font-weight: 800; color: #fff; }
.isq-closing p { margin: 0 0 20px; color: rgba(255,255,255,.9); font-size: 1rem; max-width: 480px; margin-left: auto; margin-right: auto; }
.isq-whatsapp-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 32px;
background: #fff; color: #128C7E;
border-radius: 100px;
font-weight: 700; font-size: 1.05rem;
text-decoration: none;
transition: all .25s;
box-shadow: 0 4px 14px rgba(0,0,0,.15);
}
.isq-whatsapp-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.2); }

.isq-cat-separator {
text-align: center; color: var(--isq-text-light);
font-size: .82rem; font-weight: 600;
margin: 10px 0 22px; padding: 0 16px;
display: flex; align-items: center; gap: 14px;
}
.isq-cat-separator::before, .isq-cat-separator::after {
content: ''; flex: 1; height: 1px; background: var(--isq-border);
}

/* Secondary recommendations header */
.isq-secondary-head {
text-align: center;
margin: 28px 0 20px;
}
.isq-secondary-head h3 {
font-size: 1.2rem; color: var(--isq-text);
font-weight: 700; margin: 0 0 4px;
}
.isq-secondary-head p {
color: var(--isq-text-light); font-size: .92rem; margin: 0;
}

/* Cart success toast */
.isq-toast {
position: fixed; top: 30px; left: 50%;
transform: translateX(-50%);
background: var(--isq-success); color: #fff;
padding: 14px 28px; border-radius: 100px;
font-weight: 700; z-index: 99999;
box-shadow: 0 8px 28px rgba(0,0,0,.2);
animation: isqSlide .3s ease-out;
}

/* RESPONSIVE */
@media (max-width: 768px) {
.isq-landing-hero { padding: 44px 22px 40px; border-radius: 16px; }
.isq-landing-hero h1 { font-size: 1.7rem; }
.isq-landing-hero p { font-size: 1rem; }
.isq-btn-start, .isq-start-btn { padding: 16px 32px; font-size: 1.05rem; }
.isq-landing-features { grid-template-columns: 1fr; }
.isq-q-title { font-size: 1.25rem; }
.isq-options { grid-template-columns: 1fr; gap: 10px; }
.isq-option { padding: 14px 16px; }
.isq-kits { grid-template-columns: 1fr; }
.isq-results-title { font-size: 1.55rem; }
.isq-email-card { padding: 26px 20px; }
.isq-cat-block { padding: 22px 16px; }
.isq-cat-label { font-size: 1.2rem; }
.isq-btn { padding: 13px 26px; font-size: .98rem; }
}

/* Elementor container override */
.elementor-widget-container .isq-wrapper,
.e-con-inner .isq-wrapper { width: 100% !important; max-width: 100% !important; }