/* ===== آفاق للتوجيه الدراسي — Frontend Styles ===== */
/* Brand: Blue #1a3a8f | Gold #f5a623 */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
    --afaq-blue: #1a3a8f;
    --afaq-blue2: #2251c5;
    --afaq-gold: #f5a623;
    --afaq-gold2: #e8941a;
    --afaq-green: #00a86b;
    --text: #1e2a3a;
    --gray: #667;
}

#mao-app{
    direction:rtl; font-family:'Segoe UI',Arial,sans-serif;
    max-width:800px; margin:30px auto; padding:0 16px 60px; color:var(--text);
}

/* Steps */
.mao-step{display:none;animation:maoIn .35s ease}
.mao-step.active{display:block}
@keyframes maoIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Card */
.mao-card{
    background:#fff; border-radius:18px; padding:28px 30px;
    box-shadow:0 4px 24px rgba(26,58,143,.1); margin-bottom:20px;
}

/* Intro / Cover */
.mao-intro{
    text-align:center;
    background:linear-gradient(135deg,var(--afaq-blue),var(--afaq-blue2));
    color:#fff;
}
.mao-logo-img{height:70px;margin-bottom:14px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.25))}
.mao-intro h2{font-size:22px;line-height:1.5;margin-bottom:10px}
.mao-intro p{font-size:15px;opacity:.9;line-height:1.8}
.mao-tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.mao-tags span{background:rgba(245,166,35,.25);border:1px solid rgba(245,166,35,.5);border-radius:20px;padding:5px 14px;font-size:13px}

/* Fields */
.mao-field{margin-bottom:16px}
.mao-field label{display:block;font-size:13px;font-weight:700;color:#444;margin-bottom:5px}
.mao-field input,.mao-field select{
    width:100%;padding:12px 16px;border:2px solid #e0e7f0;border-radius:10px;
    font-size:15px;font-family:inherit;direction:rtl;background:#fafbff;
    transition:border-color .2s;
}
.mao-field input:focus,.mao-field select:focus{outline:none;border-color:var(--afaq-blue);background:#fff}

/* Buttons */
.mao-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:13px 28px;border-radius:10px;font-size:16px;font-weight:700;
    font-family:inherit;cursor:pointer;border:none;transition:all .2s;text-decoration:none;
}
.mao-btn-primary{background:linear-gradient(135deg,var(--afaq-blue),var(--afaq-blue2));color:#fff}
.mao-btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(26,58,143,.3)}
.mao-btn-secondary{background:#f0f4fb;color:#333}
.mao-btn-secondary:hover{background:#e0e8f5}
.mao-btn-outline{background:transparent;color:var(--afaq-blue);border:2px solid var(--afaq-blue)}
.mao-btn-outline:hover{background:var(--afaq-blue);color:#fff}
.mao-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
#mao-start-btn{width:100%;margin-top:8px;font-size:17px;padding:16px}
#mao-verify-btn{width:100%;font-size:17px;padding:15px}

/* Code input */
#mao-code-input{
    letter-spacing:4px;font-size:22px;text-align:center;
    font-family:monospace;font-weight:bold;color:var(--afaq-blue)
}

/* Progress */
.mao-progress-wrap{margin-bottom:16px}
.mao-progress-info{display:flex;justify-content:space-between;font-size:13px;color:var(--gray);margin-bottom:6px}
.mao-q-cat-badge{background:rgba(26,58,143,.1);color:var(--afaq-blue);border-radius:20px;padding:2px 12px;font-size:12px;font-weight:bold}
.mao-progress-bar{background:#e0e8f8;border-radius:20px;height:10px;overflow:hidden}
#mao-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--afaq-blue),var(--afaq-gold));border-radius:20px;transition:width .4s ease}

/* Question Card */
.mao-q-card{border-top:4px solid var(--afaq-blue)}
.mao-q-text{font-size:19px;font-weight:700;color:var(--afaq-blue);margin-bottom:22px;line-height:1.6}

/* Options */
.mao-options{display:flex;flex-direction:column;gap:12px}
.mao-option{
    padding:14px 18px;border:2px solid #dde8f8;border-radius:12px;
    cursor:pointer;font-size:15px;line-height:1.6;
    transition:all .2s;background:#f8faff;
    display:flex;align-items:flex-start;gap:12px;
}
.mao-option:hover{border-color:var(--afaq-blue);background:#eef3ff}
.mao-option.selected{border-color:var(--afaq-blue);background:#e6eeff;box-shadow:0 0 0 3px rgba(26,58,143,.12)}
.opt-letter{
    width:28px;height:28px;border-radius:50%;background:#e0e8f5;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;flex-shrink:0;color:var(--afaq-blue)
}
.mao-option.selected .opt-letter{background:var(--afaq-blue);color:#fff}

/* Nav */
.mao-nav{display:flex;justify-content:space-between;margin-top:10px}

/* Loading */
.mao-loading-card{text-align:center;padding:40px 30px}
.mao-loading-card h3{font-size:20px;color:var(--afaq-blue);margin-top:8px;margin-bottom:24px}
.mao-loading-steps{text-align:right;display:inline-block}
.loading-step{color:#bbb;margin-bottom:10px;font-size:15px;padding:8px 14px;border-radius:8px;transition:all .3s}
.loading-step.active{color:var(--afaq-blue);font-weight:700;background:#eef2ff}
.loading-step.done{color:var(--afaq-green)}
/* Spin the logo via CSS */
.mao-loading-card img{animation:maoPulse 1.5s ease-in-out infinite}
@keyframes maoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* Results */
.mao-results-header{text-align:center;margin-bottom:20px}
.mao-results-header img{margin-bottom:10px}
.mao-results-header h2{font-size:24px;color:var(--afaq-blue)}
.mao-results-header p{color:var(--gray);margin-top:6px;font-size:15px}

/* Chart */
.mao-chart-box{background:#fff;border-radius:18px;padding:24px 28px;box-shadow:0 4px 24px rgba(26,58,143,.1);margin-bottom:20px}
.mao-chart-box h3{color:var(--afaq-blue);margin-bottom:16px;font-size:16px}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.bar-label{width:90px;font-size:13px;text-align:right;flex-shrink:0;color:#555}
.bar-bg{flex:1;background:#e8eef8;border-radius:20px;height:26px;overflow:hidden}
.bar-fill{
    background:linear-gradient(90deg,var(--afaq-blue),var(--afaq-gold));
    height:100%;border-radius:20px;
    display:flex;align-items:center;justify-content:flex-end;padding-left:8px;
    font-size:11px;color:#fff;font-weight:700;min-width:24px;transition:width .8s ease;
}

/* Sections */
.mao-section{background:#fff;border-radius:18px;overflow:hidden;margin-bottom:16px;box-shadow:0 2px 14px rgba(26,58,143,.08)}
.mao-section-header{
    background:linear-gradient(135deg,var(--afaq-blue),var(--afaq-blue2));
    color:#fff;padding:13px 22px;font-size:17px;font-weight:700;
    display:flex;align-items:center;gap:10px;
}
.mao-section-body{padding:20px 24px;line-height:2;font-size:15px;color:#333;white-space:pre-wrap}

/* Actions */
.mao-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}

/* Footer brand */
.mao-footer-brand{text-align:center;margin-top:24px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--gray);font-size:13px}
.mao-footer-brand a{color:var(--afaq-blue);font-weight:bold;text-decoration:none}

/* Error */
.mao-error{background:#fff0f0;border:2px solid #f55;color:#c00;border-radius:12px;padding:14px 18px;margin-top:12px;font-size:14px}

/* Print */
@media print{
    .mao-nav,.mao-actions,#mao-step-info,#mao-step-quiz,#mao-step-loading,#mao-step-code{display:none!important}
    .mao-card,.mao-section,.mao-chart-box{box-shadow:none;border:1px solid #ddd}
    .mao-section-header,.mao-intro{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* Mobile */
@media(max-width:600px){
    .mao-card{padding:18px 16px}
    .mao-q-text{font-size:16px}
    .mao-btn{font-size:14px;padding:11px 16px}
    .mao-actions{flex-direction:column}
    .mao-actions .mao-btn{width:100%}
}

/* ── Afaq Logo ── */
.mao-logo-img {
    max-width: 220px;
    height: auto;
    margin: 0 auto 16px;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.15));
}
.mao-logo-img-sm {
    max-width: 140px;
    height: auto;
    margin: 0 auto 14px;
    display: block;
}

/* ── Access Code Step ── */
.mao-access-error {
    background: #fff0f0;
    border: 2px solid #e00;
    color: #c00;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    font-weight: bold;
    text-align: center;
}
.mao-cat-badge {
    background: #e8f4fb;
    color: #005b99;
    padding: 2px 12px;
    border-radius: 20px;
    font-size: 13px;
}

/* ── Footer Brand ── */
.mao-footer-brand {
    text-align: center;
    padding: 20px 16px;
    font-size: 13px;
    color: #888;
    border-top: 1px solid #eee;
    margin-top: 10px;
}
.mao-footer-brand a { color: #1a5ba0; text-decoration: none; font-weight: bold; }

/* ═══════════════════════════════════════════
   قسم المشاركة — v5.5
   ═══════════════════════════════════════════ */
.mao-share-box {
    background: linear-gradient(135deg, rgba(212,168,75,.08), rgba(78,201,176,.06));
    border: 1.5px solid rgba(212,168,75,.35);
    border-radius: 16px;
    padding: 28px 24px;
    margin: 24px 0;
    text-align: center;
}
.mao-share-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #d4a84b;
    margin-bottom: 20px;
}
.mao-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.mao-btn-share {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: opacity .2s, transform .15s;
    font-family: inherit;
}
.mao-btn-share:hover { opacity: .85; transform: translateY(-1px); }

.mao-btn-gold     { background: rgba(212,168,75,.13); color: #d4a84b; border-color: rgba(212,168,75,.4); }
.mao-btn-teal     { background: rgba(78,201,176,.11); color: #4ec9b0; border-color: rgba(78,201,176,.4); }
.mao-btn-whatsapp { background: rgba(37,211,102,.1);  color: #25d366; border-color: rgba(37,211,102,.4); }

.mao-copy-toast {
    display: inline-block;
    margin-top: 14px;
    background: #4ec9b0;
    color: #0d0f14;
    padding: 7px 22px;
    border-radius: 20px;
    font-size: .85rem;
    font-weight: 700;
}