/*!
 * beautifyque — نظام تصميم الأدوات التفاعلية.
 * اتجاه بصري: سبا فاخر ناعم (وردي/كريمي دافئ) بخط عربي أنيق وحركات لطيفة.
 * يُحمّل على صفحات الأدوات فقط. RTL.
 */

:root {
    --bq-cream: #fdf6f3;
    --bq-cream-2: #fbeee9;
    --bq-blush: #f9e0da;
    --bq-rose: #f4c7c0;
    --bq-coral: #f63a3a;
    --bq-coral-2: #ff7a6b;
    --bq-wine: #b12a4b;
    --bq-plum: #2c1820;
    --bq-plum-2: #8a6f78;
    --bq-gold: #caa46a;
    --bq-line: #f1e2dc;
    --bq-card: #ffffff;
    --bq-shadow: 0 18px 50px -18px rgba(150, 55, 70, .30);
    --bq-shadow-sm: 0 8px 26px -12px rgba(150, 55, 70, .22);
    --bq-grad: linear-gradient(120deg, #f63a3a 0%, #ff7a6b 55%, #ff9a6b 100%);
    --bq-grad-wine: linear-gradient(120deg, #b12a4b 0%, #f63a3a 100%);
    --bq-display: 'El Messiri', 'Tajawal', 'Segoe UI', serif;
}

/* ===== أرضية الصفحة + أوربs متدرّجة للأجواء ===== */
.bq-tool-page {
    position: relative;
    background:
        radial-gradient(120% 90% at 90% -10%, var(--bq-blush) 0%, transparent 45%),
        radial-gradient(90% 70% at -10% 110%, var(--bq-cream-2) 0%, transparent 50%),
        var(--bq-cream);
    overflow: hidden;
}
.bq-tool-page::before,
.bq-tool-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
    z-index: 0;
    pointer-events: none;
}
.bq-tool-page::before { width: 360px; height: 360px; top: -80px; inset-inline-start: -90px; background: var(--bq-rose); }
.bq-tool-page::after { width: 300px; height: 300px; bottom: -70px; inset-inline-end: -70px; background: #ffd9c2; }
.bq-tool-page > * { position: relative; z-index: 1; }

/* ===== الرأس (intro) ===== */
.bq-tool-page .binduz-er-category-intro { background: transparent; padding-top: 30px; }
.bq-tool-page .binduz-er-category-heading h1 {
    font-family: var(--bq-display);
    font-weight: 700;
    font-size: clamp(30px, 5vw, 46px);
    color: var(--bq-plum);
    letter-spacing: -.5px;
    margin-bottom: 12px;
}
.bq-tool-page .binduz-er-category-heading > p {
    color: var(--bq-plum-2);
    font-size: 17px;
    line-height: 1.9;
    max-width: 620px;
}
.bq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(246, 58, 58, .10);
    color: var(--bq-wine);
    font-weight: 800;
    font-size: 12.5px;
    letter-spacing: .3px;
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 14px;
}
.bq-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bq-coral); }

/* ===== البطاقة الأساسية للأدوات ===== */
.skinquiz-card, .quiz-card, .cost-card {
    max-width: 700px;
    margin: 0 auto;
    background: var(--bq-card);
    border: 1px solid var(--bq-line);
    border-radius: 26px;
    padding: 38px 34px;
    box-shadow: var(--bq-shadow);
    animation: bqRise .6s cubic-bezier(.2, .8, .2, 1) both;
    position: relative;
    overflow: hidden;
}
.skinquiz-card::before, .quiz-card::before, .cost-card::before {
    content: '';
    position: absolute; top: 0; inset-inline-start: 0; right: 0;
    height: 5px;
    background: var(--bq-grad);
}
.binduz-er-skinquiz-section, .binduz-er-quiz-section, .binduz-er-cost-section { padding: 20px 0 80px; }

/* ===== شريط التقدّم ===== */
.skinquiz-progress, .quiz-progress {
    height: 10px; border-radius: 50px;
    background: var(--bq-blush); overflow: hidden;
}
.skinquiz-progress span, .quiz-progress span {
    display: block; height: 100%; width: 0;
    background: var(--bq-grad); border-radius: 50px;
    box-shadow: 0 0 12px rgba(246, 58, 58, .4);
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.skinquiz-progress-text, .quiz-progress-text {
    margin: 10px 0 24px; color: var(--bq-plum-2);
    font-size: 13px; font-weight: 800; letter-spacing: .3px;
}

/* ===== السؤال + الخيارات ===== */
.skinquiz-question, .quiz-question {
    font-family: var(--bq-display);
    font-size: clamp(21px, 3.5vw, 27px);
    font-weight: 700; color: var(--bq-plum);
    line-height: 1.6; margin: 0 0 24px;
}
.skinquiz-options, .quiz-options { display: flex; flex-direction: column; gap: 13px; }
.skinquiz-opt, .quiz-opt {
    position: relative;
    width: 100%; text-align: start;
    padding: 17px 20px 17px 52px;
    border: 1.5px solid var(--bq-line);
    border-radius: 16px;
    background: linear-gradient(var(--bq-card), var(--bq-card)) padding-box;
    color: var(--bq-plum);
    font-family: inherit; font-size: 16.5px; font-weight: 600;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
    animation: bqRise .5s ease both;
}
.skinquiz-opt::after, .quiz-opt::after {
    content: '';
    position: absolute; inset-inline-start: 18px; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--bq-rose);
    transition: .18s ease;
}
.skinquiz-opt:hover, .quiz-opt:hover {
    border-color: var(--bq-coral);
    background: linear-gradient(120deg, #fff6f4, #fff);
    transform: translateX(-3px);
    box-shadow: var(--bq-shadow-sm);
}
.skinquiz-opt:hover::after, .quiz-opt:hover::after {
    border-color: var(--bq-coral);
    background: radial-gradient(circle, var(--bq-coral) 42%, transparent 46%);
}
.skinquiz-back, .quiz-back, .skinquiz-restart, .quiz-restart {
    margin-top: 22px; background: none; border: 0;
    color: var(--bq-plum-2); font-weight: 800; font-size: 14px; cursor: pointer;
    transition: color .15s;
}
.skinquiz-back:hover, .quiz-back:hover, .skinquiz-restart:hover, .quiz-restart:hover { color: var(--bq-coral); }

/* ===== شاشة النتيجة ===== */
#quiz-result { text-align: center; animation: bqRise .6s cubic-bezier(.2, .8, .2, 1) both; }
.skinquiz-result-badge, .quiz-result-badge {
    width: 96px; height: 96px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 46px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fff, var(--bq-blush));
    box-shadow: 0 0 0 8px rgba(246, 58, 58, .08), var(--bq-shadow-sm);
    animation: bqPop .55s .1s both;
}
.skinquiz-result-title, .quiz-result-title {
    font-family: var(--bq-display);
    font-size: clamp(24px, 4vw, 30px); font-weight: 700;
    color: var(--bq-plum); margin: 0 0 12px;
}
.skinquiz-result-title span, .quiz-result-title span {
    background: var(--bq-grad-wine);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: var(--bq-wine);
}
.skinquiz-result-desc, .quiz-result-desc {
    color: #5a4750; font-size: 16.5px; line-height: 1.95;
    max-width: 560px; margin: 0 auto 24px;
}
.skinquiz-tips, .skinquiz-recs, .quiz-tips, .quiz-recs {
    text-align: start;
    background: linear-gradient(135deg, #fff, #fdf3f0);
    border: 1px solid var(--bq-line);
    border-radius: 18px; padding: 20px 24px;
    margin: 0 auto 16px; max-width: 570px;
}
.skinquiz-tips h3, .skinquiz-recs h3, .quiz-tips h3, .quiz-recs h3 {
    font-family: var(--bq-display); font-size: 18px; font-weight: 700;
    color: var(--bq-plum); margin: 0 0 12px;
}
.skinquiz-tips ul, .quiz-tips ul { margin: 0; padding-inline-start: 22px; color: #4f3f47; line-height: 2.1; }
.skinquiz-recs ul, .quiz-recs ul { margin: 0; list-style: none; padding: 0; }
.skinquiz-recs li, .quiz-recs li { padding: 10px 0; border-bottom: 1px solid var(--bq-line); }
.skinquiz-recs li:last-child, .quiz-recs li:last-child { border-bottom: 0; }
.skinquiz-recs a, .quiz-recs a {
    color: var(--bq-wine); font-weight: 700; text-decoration: none;
    display: inline-flex; transition: .15s;
}
.skinquiz-recs a:hover, .quiz-recs a:hover { color: var(--bq-coral); transform: translateX(-3px); }

/* ===== أزرار CTA + مشاركة ===== */
.skinquiz-cta, .quiz-btn, .cost-btn {
    display: inline-block; text-decoration: none;
    font-weight: 800; font-size: 15px; padding: 13px 26px;
    border-radius: 50px; transition: transform .18s ease, box-shadow .18s ease, filter .18s;
}
.quiz-actions, .cost-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 20px; }
.quiz-btn.solid, .cost-btn.solid {
    background: var(--bq-grad); color: #fff;
    box-shadow: 0 12px 26px -10px rgba(246, 58, 58, .6);
}
.quiz-btn.solid:hover, .cost-btn.solid:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.04); }
.quiz-btn.ghost, .cost-btn.ghost { background: #fff0ee; color: var(--bq-wine); }
.quiz-btn.ghost:hover, .cost-btn.ghost:hover { background: #ffe4e0; transform: translateY(-2px); }
.skinquiz-cta { color: var(--bq-coral); font-weight: 800; padding: 6px 0; }
.skinquiz-cta:hover { text-decoration: underline; }

.skinquiz-share, .quiz-share, .cost-share {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px; margin-bottom: 18px;
}
.skinquiz-share > span, .quiz-share > span, .cost-share > span { color: var(--bq-plum-2); font-weight: 800; font-size: 14px; }
.sh {
    padding: 10px 18px; border-radius: 50px; border: 0; color: #fff;
    font-weight: 700; font-size: 13.5px; cursor: pointer; text-decoration: none;
    transition: transform .15s ease, filter .15s;
}
.sh:hover { transform: translateY(-2px); filter: brightness(1.05); }
.sh.wa { background: #25d366; } .sh.fb { background: #1877f2; } .sh.tw { background: #111; } .sh.copy { background: var(--bq-plum-2); }
.skinquiz-disclaimer, .quiz-disclaimer { color: #b6a3ab; font-size: 12.5px; margin: 8px 0 0; }

/* ===== كتلة جمع الإيميل (اختبار البشرة) ===== */
.skinquiz-email {
    background: var(--bq-grad-wine);
    border: 0; border-radius: 20px;
    padding: 26px 24px; margin: 0 auto 18px; max-width: 570px;
    text-align: center; color: #fff;
    box-shadow: 0 16px 36px -14px rgba(177, 42, 75, .6);
}
.skinquiz-email h3 { font-family: var(--bq-display); margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #fff; }
.skinquiz-email > p { margin: 0 0 16px; color: rgba(255, 255, 255, .92); font-size: 14.5px; }
.skinquiz-email-row { display: flex; gap: 8px; max-width: 430px; margin: 0 auto; }
.skinquiz-email-row input {
    flex: 1 1 auto; min-width: 0; padding: 13px 16px; border: 0; border-radius: 12px;
    font-size: 15px; background: rgba(255, 255, 255, .96);
}
.skinquiz-email-row input:focus { outline: 3px solid rgba(255, 255, 255, .5); }
.skinquiz-email-row button {
    flex: 0 0 auto; background: #fff; color: var(--bq-wine); border: 0; border-radius: 12px;
    padding: 0 20px; font-weight: 800; font-size: 15px; cursor: pointer; transition: transform .15s;
}
.skinquiz-email-row button:hover { transform: translateY(-1px); }
.skinquiz-email-row button:disabled { opacity: .7; cursor: default; }
.skinquiz-email-note { display: block; margin-top: 10px; color: rgba(255, 255, 255, .78); font-size: 11.5px; line-height: 1.6; }
.skinquiz-email-msg { margin-top: 12px; font-size: 14px; font-weight: 800; min-height: 18px; color: #fff; }
.skinquiz-email-msg.ok { color: #d7ffe9; } .skinquiz-email-msg.err { color: #ffe0dc; }

/* ===== الحاسبة ===== */
.cost-field { margin-bottom: 20px; }
.cost-field label { display: block; font-family: var(--bq-display); font-weight: 700; color: var(--bq-plum); margin-bottom: 9px; font-size: 16px; }
.cost-field select {
    width: 100%; padding: 15px 44px 15px 16px;
    border: 1.5px solid var(--bq-line); border-radius: 14px;
    font-size: 16px; font-family: inherit; color: var(--bq-plum);
    background-color: #fffdfc;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b12a4b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: left 16px center;
    -webkit-appearance: none; appearance: none; cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}
.cost-field select:focus { outline: 0; border-color: var(--bq-coral); box-shadow: 0 0 0 4px rgba(246, 58, 58, .12); }
#cost-calc-btn {
    width: 100%; margin-top: 6px; border: 0; border-radius: 14px;
    background: var(--bq-grad); color: #fff; padding: 16px;
    font-family: var(--bq-display); font-size: 18px; font-weight: 700; cursor: pointer;
    box-shadow: 0 14px 30px -10px rgba(246, 58, 58, .55); transition: transform .18s, filter .18s;
}
#cost-calc-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
#cost-calc-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
#cost-result { margin-top: 28px; text-align: center; border-top: 1px dashed var(--bq-rose); padding-top: 26px; animation: bqRise .5s both; }
.cost-result-label { color: var(--bq-plum-2); font-weight: 800; font-size: 14px; }
.cost-result-range {
    font-family: var(--bq-display); font-size: clamp(28px, 6vw, 40px); font-weight: 700;
    margin: 8px 0 6px; line-height: 1.3; direction: rtl;
    background: var(--bq-grad-wine);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--bq-wine);
}
.cost-disclaimer {
    background: #fff5ef; border: 1px solid #ffe0c9; border-radius: 12px;
    padding: 13px 18px; color: #9a6a3b; font-size: 13px; line-height: 1.85; text-align: start; margin: 16px 0 20px;
}

/* ===== شبكة مركز الأدوات ===== */
.binduz-er-tools-section { padding: 20px 0 80px; }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 26px; max-width: 980px; margin: 0 auto; }
.tool-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
    background: var(--bq-card); border: 1px solid var(--bq-line);
    border-radius: 24px; padding: 32px 28px; text-decoration: none;
    box-shadow: var(--bq-shadow-sm); position: relative; overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: bqRise .55s ease both;
}
.tool-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--bq-grad); transform: scaleX(0); transform-origin: inline-start; transition: transform .3s ease; }
.tool-card:hover { transform: translateY(-6px); box-shadow: var(--bq-shadow); border-color: var(--bq-rose); }
.tool-card:hover::before { transform: scaleX(1); }
.tool-card-emoji {
    width: 62px; height: 62px; display: flex; align-items: center; justify-content: center;
    font-size: 32px; border-radius: 18px;
    background: radial-gradient(circle at 30% 25%, #fff, var(--bq-blush));
    box-shadow: inset 0 0 0 1px rgba(246, 58, 58, .12);
}
.tool-card-name { font-family: var(--bq-display); font-size: 21px; font-weight: 700; color: var(--bq-plum); line-height: 1.45; }
.tool-card-desc { color: #6d5860; font-size: 14.5px; line-height: 1.85; flex: 1 1 auto; }
.tool-card-cta { margin-top: 4px; color: var(--bq-coral); font-weight: 800; font-size: 15px; }
.tool-card:hover .tool-card-cta { color: var(--bq-wine); }

@keyframes bqRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes bqPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }

@media (max-width: 575px) {
    .skinquiz-card, .quiz-card, .cost-card { padding: 26px 18px; border-radius: 20px; }
    .skinquiz-opt, .quiz-opt { font-size: 15.5px; padding: 15px 16px 15px 46px; }
    .skinquiz-email-row { flex-direction: column; }
    .skinquiz-email-row button { padding: 13px; }
}
@media (prefers-reduced-motion: reduce) {
    .skinquiz-card, .quiz-card, .cost-card, #quiz-result, #cost-result, .tool-card,
    .skinquiz-opt, .quiz-opt, .skinquiz-result-badge, .quiz-result-badge { animation: none !important; }
}