/* =========================================================================
   MyTrener.ge — სასერტიფიკაციო გამოცდის მოდულის სტილები
   public/assets/exam/css/exam.css

   ეს არის ერთადერთი CSS ფაილი მთელი გამოცდის მოდულისთვის — ლენდინგი,
   checkout, გავლის გვერდი, შედეგი, სერტიფიკატი (ბრაუზერშიც და PDF-შიც).
   განზრახ არ გამოიყენება CSS custom properties (var(--x)), რადგან
   სერტიფიკატის PDF გენერირდება dompdf-ით, რომელსაც CSS ცვლადების
   მხარდაჭერა არ აქვს — ამიტომ ყველგან პირდაპირ ფერის კოდებია.
   ========================================================================= */

/* ---------- ქართული ფონტი (საჭიროა სერტიფიკატის PDF-ისთვის) ---------- */
@font-face {
    font-family: 'NotoGeo';
    src: url('/assets/fonts/NotoSansGeorgian-Regular.ttf') format('truetype');
    font-weight: normal;
}
@font-face {
    font-family: 'NotoGeo';
    src: url('/assets/fonts/NotoSansGeorgian-Bold.ttf') format('truetype');
    font-weight: bold;
}

/* ---------- საერთო კონტეინერები ---------- */
.exam-section{ background:#F8F9F9; padding:60px 0; }
.exam-card{
    background:#fff; border-radius:16px;
    box-shadow:0 4px 24px rgba(0,0,0,.06); padding:36px;
}
@media (max-width:575.98px){ .exam-card{ padding:20px; } }

.exam-gradient-text{
    background:linear-gradient(90deg,#FF008A,#0A67F2);
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.exam-badge-pill{
    display:inline-flex; align-items:center; gap:8px; padding:8px 18px;
    border-radius:30px; border:1.5px solid #FF008A; color:#242B3A;
    font-weight:600; font-size:14px; background:#fff;
}
.exam-badge-pill.exam-badge-pill-dark{
    background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.3); color:#fff;
}
.exam-badge-pill .dot{ width:8px; height:8px; border-radius:50%; background:#03C95A; }

/* ---------- ლენდინგი ---------- */
.exam-hero{
    background:linear-gradient(135deg,#13162a 0%,#181b3a 100%);
    border-radius:24px; padding:56px 40px; color:#fff; position:relative; overflow:hidden;
}
.exam-hero::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 80% 0%, rgba(255,0,138,.35), transparent 55%),
               radial-gradient(circle at 10% 100%, rgba(10,103,242,.30), transparent 55%);
    pointer-events:none;
}
.exam-hero > *{ position:relative; z-index:1; }
.exam-hero h1{ font-weight:700; font-size:2.4rem; color:var(--white); }
.exam-hero .lead{ color:#c7ccdb; font-size:1.05rem; }


.exam-stat-box{
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
    border-radius:14px; padding:20px; text-align:center;
}
.exam-stat-box .num{ font-size:1.8rem; font-weight:700; color:#fff; }
.exam-stat-box .label{ font-size:.8rem; color:#aab0c6; }

.exam-category-card{
    border:1px solid #ebeced; border-radius:14px; padding:20px; height:100%;
    transition:.2s; background:#fff;
}
.exam-category-card:hover{ border-color:#FF008A; box-shadow:0 6px 18px rgba(0,0,0,.06); }
.exam-category-card .num-badge{
    width:34px; height:34px; border-radius:10px; display:flex; align-items:center;
    justify-content:center; font-weight:700; color:#fff; flex-shrink:0;
    background:linear-gradient(135deg,#FF008A,#0A67F2);
}

/* ---------- checkout: ფასის ბლოკი ---------- */
.exam-price-box{
    border-radius:16px; padding:30px; text-align:center;
    background:linear-gradient(135deg,#FF008A,#0A67F2); color:#fff;
}
.exam-price-box .amount{ font-size:3rem; font-weight:800; line-height:1; }
.exam-price-box .amount sup{ font-size:1.3rem; }
.exam-price-box .exam-price-sub{ font-size:14px; opacity:.85; }

/* ---------- checkout: მარკეტინგული ბლოკი ("რატომ ეს გამოცდა") ---------- */
.exam-why-hero{
    background:linear-gradient(135deg,#13162a 0%,#181b3a 100%);
    border-radius:24px; padding:50px 44px; color:#fff; position:relative; overflow:hidden; margin-bottom:40px;
}
.exam-why-hero::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(circle at 85% 10%, rgba(255,0,138,.32), transparent 55%),
               radial-gradient(circle at 5% 90%, rgba(10,103,242,.28), transparent 55%);
    pointer-events:none;
}
.exam-why-hero > *{ position:relative; z-index:1; }
.exam-why-hero .exam-flag-badge{
    display:inline-flex; align-items:center; gap:8px; padding:7px 16px; border-radius:30px;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25);
    font-weight:600; font-size:13.5px; color:#fff; margin-bottom:18px;
}
.exam-why-hero h2{ font-weight:700; font-size:2rem; margin-bottom:18px; color: var(--white); }
.exam-why-hero p{ color:#c7ccdb; font-size:16px; line-height:1.75; margin-bottom:16px; max-width:900px; }
.exam-why-hero p strong{ color:#fff; }

.exam-why-feature{
    background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
    border-radius:16px; padding:22px; height:100%;
}
.exam-why-feature .icon{
    width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#FF008A,#0A67F2); font-size:20px; color:#fff; margin-bottom:14px;
}
.exam-why-feature h6{ color:#fff; font-weight:700; margin-bottom:8px; }
.exam-why-feature p{ color:#aab0c6; font-size:13.5px; line-height:1.6; margin:0; max-width:none; }

/* ---------- გამოცდის გავლის გვერდი ---------- */
.exam-take-wrap{ min-height:100vh; background:#F8F9F9; padding:24px 0 60px; }

.exam-topbar{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:#fff; border-radius:14px; padding:14px 20px; margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,.05); flex-wrap:wrap;
}
.exam-progress-wrap{ flex:1; min-width:200px; }
.exam-progress-track{ height:8px; border-radius:6px; background:#eef0f3; overflow:hidden; }
.exam-progress-fill{ height:100%; width:0; background:linear-gradient(90deg,#FF008A,#0A67F2); transition:width .3s ease; }
.exam-progress-label{ font-size:12.5px; color:#7D828C; margin-top:4px; }

.exam-timer{
    font-variant-numeric:tabular-nums; font-weight:700; font-size:20px; color:#242B3A;
    background:#f4f5f7; border-radius:10px; padding:8px 16px; display:flex; align-items:center; gap:8px;
}
.exam-timer.exam-timer-warn{ color:#fff; background:#E0342A; animation:examPulse 1s infinite; }
@keyframes examPulse{ 0%,100%{opacity:1;} 50%{opacity:.6;} }

.exam-question-card{ background:#fff; border-radius:16px; padding:32px; box-shadow:0 4px 24px rgba(0,0,0,.06); position:relative; }
.exam-question-num{ font-size:13px; font-weight:700; color:#FF008A; text-transform:uppercase; letter-spacing:.4px; }
.exam-question-text{ font-size:19px; font-weight:700; color:#242B3A; margin:10px 0 26px; line-height:1.5; }

.exam-option{
    display:flex; align-items:center; gap:14px; border:1.5px solid #ebeced; border-radius:12px;
    padding:16px 18px; margin-bottom:12px; cursor:pointer; transition:.15s; background:#fff;
}
.exam-option:hover{ border-color:#0A67F2; background:#f7faff; }
.exam-option.selected{ border-color:#FF008A; background:rgba(255,0,138,.06); }
.exam-option input{ display:none; }
.exam-option .letter{
    width:32px; height:32px; flex-shrink:0; border-radius:50%; display:flex; align-items:center;
    justify-content:center; font-weight:700; background:#f4f5f7; color:#242B3A; font-size:14px;
}
.exam-option.selected .letter{ background:#FF008A; color:#fff; }
.exam-option .text{ font-size:15.5px; color:#242B3A; }

.exam-nav-row{ display:flex; justify-content:space-between; align-items:center; margin-top:28px; gap:12px; flex-wrap:wrap; }
.exam-nav-row .side-btns{ display:flex; gap:10px; }

.exam-question-nav-grid{
    display:grid; grid-template-columns:repeat(10, 1fr); gap:6px; margin-top:20px;
}
@media (max-width: 767.98px){ .exam-question-nav-grid{ grid-template-columns:repeat(8,1fr); } }
.exam-qn{
    aspect-ratio:1/1; border-radius:6px; font-size:11px; display:flex; align-items:center; justify-content:center;
    background:#eef0f3; color:#7D828C; cursor:pointer; border:none; font-weight:600;
}
.exam-qn.answered{ background:#0A67F2; color:#fff; }
.exam-qn.skipped{ background:#F2A900; color:#fff; }
.exam-qn.current{ outline:2px solid #FF008A; outline-offset:1px; }

.exam-legend-dot{ display:inline-block; width:10px; height:10px; border-radius:2px; }
.exam-legend-dot.answered{ background:#0A67F2; }
.exam-legend-dot.skipped{ background:#F2A900; }

.exam-loading-overlay{
    display:flex; position:fixed; inset:0; background:rgba(255,255,255,.6); z-index:10001;
    align-items:center; justify-content:center;
}

/* ---------- watermark & anti-cheat ---------- */
.exam-watermark-layer{
    position:fixed; inset:0; pointer-events:none; z-index:9999;
    display:flex; flex-wrap:wrap; align-content:space-around; justify-content:space-around;
    opacity:.06; overflow:hidden;
}
.exam-watermark-layer span{
    transform:rotate(-28deg); font-size:13px; font-weight:700; color:#000; white-space:nowrap; margin:26px;
}
.exam-select-guard{ user-select:none; -webkit-user-select:none; -ms-user-select:none; }
.exam-warning-toast{
    display:none; position:fixed; bottom:24px; right:24px; background:#242B3A; color:#fff;
    padding:14px 20px; border-radius:12px; font-size:14px; max-width:320px; z-index:10000;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.exam-warning-toast.show{ display:block; }

/* ---------- შედეგები ---------- */
.exam-result-hero{ text-align:center; padding:20px; }
.exam-result-circle{
    width:170px; height:170px; border-radius:50%; margin:0 auto 16px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; color:#fff;
}
.exam-result-circle.pass{ background:linear-gradient(135deg,#03C95A,#0aa851); }
.exam-result-circle.fail{ background:linear-gradient(135deg,#E0342A,#b3241c); }
.exam-result-circle .pct{ font-size:2.6rem; font-weight:800; line-height:1; }

.exam-breakdown-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid #f1f1f3; }
.exam-breakdown-row .name{ flex:1; font-size:14px; color:#242B3A; }
.exam-breakdown-row .bar{ flex:1; height:8px; border-radius:6px; background:#eef0f3; overflow:hidden; }
.exam-breakdown-row .bar-fill{ height:100%; background:linear-gradient(90deg,#FF008A,#0A67F2); }
.exam-breakdown-row .val{ width:60px; text-align:right; font-size:13px; color:#7D828C; }

.exam-divider-top{ border-top:1px solid #eee; }
.exam-verify-icon{ font-size:2.4rem; }

/* ---------- სერტიფიკატი (ბრაუზერი + PDF, dompdf-თავსებადი) ---------- */
.exam-certificate{
    background:#fff; border:10px solid #12162a; border-radius:8px; padding:60px 70px;
    max-width:1000px; margin:0 auto; position:relative;
    font-family:'NotoGeo', sans-serif;
}
.exam-certificate .cert-inner-border{ border:1.5px solid #d8ae4c; border-radius:4px; padding:30px; }
.exam-certificate .cert-brand{ font-weight:700; color:#FF008A; font-size:14px; letter-spacing:1px; text-transform:uppercase; text-align:center; }
.exam-certificate h1{ font-size:2.4rem; color:#12162a; margin:14px 0 6px; text-align:center; }
.exam-certificate .cert-sub{ text-align:center; font-size:14px; color:#6b7280; }
.exam-certificate .cert-name{ font-size:2rem; font-weight:700; color:#12162a; margin:22px auto; border-bottom:2px solid #d8ae4c; display:table; padding-bottom:8px; text-align:center; }
.exam-certificate .cert-body-text{ max-width:640px; margin:0 auto; color:#3c4257; font-size:15px; line-height:1.7; text-align:center; }
.exam-certificate .cert-meta{ color:#6b7280; font-size:13.5px; margin-top:30px; text-align:center; }
.exam-certificate .cert-number{ font-family:monospace; letter-spacing:1px; }
.exam-certificate .cert-verify-line{ margin-top:6px; }

@media print{
    body *{ visibility:hidden; }
    .exam-certificate, .exam-certificate *{ visibility:visible; }
    .exam-certificate{ position:absolute; left:0; top:0; border-width:6px; }
    .no-print{ display:none !important; }
}




@media (max-width: 768px){
    .exam-hero h1, .exam-why-hero h2{
        font-size: 22px;
    }
    .exam-hero, .exam-why-hero{
        padding: 30px 10px;
    }
   .exam-why-feature {
        padding: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .exam-why-feature h6{
        font-size: 14px;
        text-align: center;
    }
    .exam-why-feature p {
        font-size: 11px;
        line-height: 1.2;
        text-align: center;
    }
}