/* ============================================ */
/* RUQYA DIAGNOSIS TOOL - FINAL v2.2            */
/* ============================================ */

/* ===== Colors & Variables ===== */
:root {
    --primary: #00a8a8;
    --primary-dark: #008585;
    --alert-bg: #FFF9C4;
    --alert-text: #F57F17;
}

/* ===== Main Container: flat & full width ===== */
.ruqya-container {
    font-family: 'Tajawal', sans-serif;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: auto !important;
    direction: rtl;
    box-sizing: border-box;
}

/* ================================================== */
/* MOBILE WIDTH EXPANSION                             */
/* ONLY 2 NUMBERS YOU MAY EVER ADJUST:                */
/*   margin-left  = expand LEFT  (empty side)         */
/*   margin-right = expand RIGHT (menu side!)         */
/* ================================================== */
@media (max-width: 768px) {
    .ruqya-container {
        margin-left: -43px !important;
        margin-right: -50px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ===== Progress Bar ===== */
.ruqya-progress-bar { background: #eee; border-radius: 10px; height: 20px; overflow: hidden; }
.ruqya-progress { background: var(--primary); color: white; text-align: center; line-height: 20px; font-size: 0.8em; transition: width 0.5s; }
.ruqya-progress-steps { display: flex; justify-content: space-between; font-size: 0.8em; color: #888; margin-top: 8px; }
.ruqya-step.active { color: var(--primary); font-weight: bold; }

/* ===== Alert Note & Audio ===== */
.ruqya-alert-note {
    background: var(--alert-bg);
    color: var(--alert-text);
    padding: 15px;
    border-radius: 10px;
    border-right: 5px solid var(--alert-text);
    margin: 20px 0;
    font-weight: bold;
    text-align: center;
}

.ruqya-audio-wrapper { margin-bottom: 20px; }

.ruqya-section-header { font-weight: bold; color: var(--primary-dark); margin-bottom: 15px; font-size: 1.1em; }

/* ===== Questions ===== */
.ruqya-question-group { background: white; padding: 15px; border-radius: 12px; border: 1px solid #eee; margin: 0 0 15px; }
fieldset.ruqya-question-group { min-width: 0; }
.ruqya-question-text { font-weight: 500; padding: 0; }
.ruqya-options { display: flex; gap: 10px; margin-top: 10px; }
.ruqya-option { flex: 1; border: 1px solid var(--primary); text-align: center; border-radius: 8px; cursor: pointer; color: var(--primary); padding: 10px; transition: background 0.3s, color 0.3s; }
.ruqya-option:hover { background: rgba(0,168,168,0.08); }
.ruqya-option:has(input:checked) { background: var(--primary); color: white; }
.ruqya-option:has(input:focus-visible) { outline: 3px solid var(--primary-dark); outline-offset: 2px; }
.ruqya-option input { position: absolute; opacity: 0; }

/* ===== Buttons ===== */
.ruqya-button { background: var(--primary); color: white; border: none; width: 100%; padding: 15px; border-radius: 10px; cursor: pointer; font-weight: bold; font-size: 1.1em; font-family: inherit; transition: background 0.3s; }
.ruqya-button:hover { background: var(--primary-dark); }
.ruqya-button:focus-visible { outline: 3px solid var(--primary-dark); outline-offset: 2px; }
.ruqya-button-secondary { background: #95a5a6; margin-top: 10px; }
.ruqya-button-secondary:hover { background: #7f8c8d; }
.ruqya-form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ruqya-form-actions .ruqya-button { flex: 1; margin-top: 10px; }

/* ===== Result Boxes ===== */
.ruqya-result-box { padding: 15px; border-radius: 15px; margin-top: 20px; border: 2px solid; }
.ruqya-positive { background: #E0F7FA; border-color: #4DC0B5; color: #006064; }
.ruqya-negative { background: #FFEBEE; border-color: #FF8A80; color: #B71C1C; }
.ruqya-treatment-box { background: white; padding: 15px; margin-top: 15px; border-radius: 8px; border-right: 5px solid var(--primary); box-shadow: 0 4px 10px rgba(0,0,0,0.05); color: #333; }
.ruqya-treatment-box h4 { margin: 0 0 10px; color: var(--primary-dark); }
.ruqya-treatment-box ul { margin: 0; padding-right: 20px; }
.ruqya-treatment-box li { margin-bottom: 6px; }

/* ===== Score Bars (theme-proof) ===== */
.ruqya-scores { background: white; border-radius: 10px; padding: 12px !important; margin: 15px 0; }
.ruqya-score-row { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px; width: 100% !important; margin-bottom: 12px; color: #333; }
.ruqya-score-row:last-child { margin-bottom: 0; }
.ruqya-score-label { flex: 0 1 auto !important; max-width: 95px; font-size: 13px !important; line-height: 1.3; font-weight: bold; }
.ruqya-score-track { flex: 1 1 auto !important; min-width: 40px !important; display: block !important; background: #e8e8e8 !important; border-radius: 6px; height: 12px !important; overflow: hidden; }
.ruqya-score-fill { display: block !important; height: 12px !important; background: var(--primary); border-radius: 6px; transition: width 0.8s ease; }
.ruqya-score-pct { flex: 0 0 38px !important; font-size: 12px !important; text-align: left; color: #555; }

/* ===== Disclaimer ===== */
.ruqya-disclaimer {
    background: #F5F5F5;
    color: #555;
    border: 1px dashed #bbb;
    border-radius: 10px;
    padding: 15px;
    margin-top: 20px;
    font-size: 0.9em;
    line-height: 1.7;
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .ruqya-progress, .ruqya-score-fill, .ruqya-option, .ruqya-button { transition: none; }
}

/* ===== Print: show result only ===== */
@media print {
    body * { visibility: hidden; }
    #ruqyaStep3, #ruqyaStep3 * { visibility: visible; }
    #ruqyaStep3 { position: absolute; right: 0; top: 0; width: 100%; }
    #btnPrintResult, #btnRestart { display: none !important; }
    .ruqya-container { box-shadow: none; }
}

/* ===== Mobile (Responsive) ===== */
@media (max-width: 600px) {
    .ruqya-main-title { font-size: 1rem !important; margin-bottom: 12px; text-align: center; line-height: 1.5; }
    .ruqya-section-header { font-size: 0.85rem !important; margin-bottom: 12px; color: var(--primary); }

    .ruqya-question-text { font-size: 0.8rem !important; line-height: 1.4; }
    .ruqya-option { padding: 10px 4px !important; font-size: 0.75rem !important; }
    .ruqya-button { padding: 12px; font-size: 0.9rem; }
    .ruqya-alert-note { font-size: 0.75rem; padding: 8px; }
    .ruqya-step { font-size: 0.65rem; }
.ruqya-result-box { padding: 12px; }
    .ruqya-result-box h3 { font-size: 0.95rem; }
    .ruqya-result-box p { font-size: 0.85rem; }
    .ruqya-disclaimer { font-size: 0.78em; }
}