/* ==========================================================================
   IAB Exam Engine — Frontend Styles  v3.0
   ==========================================================================

   CUSTOMIZATION GUIDE
   ───────────────────
   This stylesheet uses a TWO-TIER CSS custom property system.

   TIER 1 — Base tokens  (raw values, e.g. colors, radii, spacing)
     Changing a base token cascades to every component that references it.

   TIER 2 — Component tokens  (semantic pointers into tier 1)
     e.g. --iab-btn-bg: var(--iab-clr-primary)
     Override a component token to change only that one component without
     touching the base token or anything else.

   ── HOW TO CUSTOMIZE ──────────────────────────────────────────────────

   Option A — Theme or custom CSS  (scoped to the exam widget only):

     .iab-exam-shell {
         --iab-clr-primary:   #e74c3c;
         --iab-btn-bg:        #e74c3c;
         --iab-btn-bg-hover:  #c0392b;
     }

   Option B — WordPress PHP filter  (applied globally via inline style):

     add_filter( 'iab_exam_engine_css_vars', function ( $vars ) {
         $vars['--iab-clr-primary']   = '#e74c3c';
         $vars['--iab-btn-bg']        = '#e74c3c';
         $vars['--iab-btn-bg-hover']  = '#c0392b';
         return $vars;
     } );

   Only properties prefixed with --iab- are accepted by the PHP filter.

   ── FULL TOKEN REFERENCE ──────────────────────────────────────────────
   See the :root block below. Every --iab-* variable is overridable.
   Tier 1 (base) tokens start after "BASE TOKENS".
   Tier 2 (component) tokens start after "COMPONENT TOKENS".

   ── SECTIONS ──────────────────────────────────────────────────────────
   00. Design tokens  (tier 1 base + tier 2 component)
   01. Shell & layout
   02. Header / hero
   03. Stat tiles
   04. Timer
   05. Alerts & banners
   06. Section headers
   07. Form & field elements
   08. Questions & choices
   09. Actions & submit bar
   10. Status badges
   11. Answer review cards
   12. Expiry overlay
   13. Responsive overrides
   ========================================================================== */


/* --------------------------------------------------------------------------
   00. Design tokens
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Samir_Khouaja_Maghribi";
    src: url("../fonts/Samir.Khouaja.Maghribi.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {

    /* ── TIER 1: BASE TOKENS ──────────────────────────────────────────── */

    /* Brand palette */
    --iab-clr-primary:          #0E5A38;
    --iab-clr-primary-hover:    #0A442A;
    --iab-clr-primary-active:   #083621;
    --iab-clr-primary-light:    #EAF5EE;
    --iab-clr-accent:           #B96A1C;   /* eyebrow / course label */

    /* Semantic — pass */
    --iab-clr-pass:             #1F7A4D;
    --iab-clr-pass-bg:          #E8F6EE;
    --iab-clr-pass-text:        #145534;

    /* Semantic — fail */
    --iab-clr-fail:             #B13A3A;
    --iab-clr-fail-bg:          #FBECEC;
    --iab-clr-fail-text:        #7C2222;

    /* Semantic — timed out */
    --iab-clr-timeout:          #e67e00;
    --iab-clr-timeout-bg:       #fff3e0;
    --iab-clr-timeout-text:     #7c4500;

    /* Semantic — warning (timer ≤60 s) */
    --iab-clr-warn:             #b45309;
    --iab-clr-warn-bg:          #fff8e6;
    --iab-clr-warn-border:      #e5a000;

    /* Surface & neutral */
    --iab-clr-surface:          #D8E5D9;
    --iab-clr-surface-alt:      #EFF5EE;
    --iab-clr-border:           rgba(14, 90, 56, 0.14);
    --iab-clr-border-strong:    rgba(14, 90, 56, 0.22);
    --iab-clr-text:             #142218;
    --iab-clr-text-muted:       #4F6155;
    --iab-clr-text-faint:       #6B7C71;
    --iab-title-color:          #111111;

    /* Border radii */
    --iab-r-xs:   6px;
    --iab-r-sm:   10px;
    --iab-r-md:   14px;
    --iab-r-lg:   20px;
    --iab-r-pill: 999px;

    /* Spacing scale */
    --iab-sp-2xs: 4px;
    --iab-sp-xs:  8px;
    --iab-sp-sm:  12px;
    --iab-sp-md:  14px;
    --iab-sp-lg:  24px;
    --iab-sp-xl:  36px;

    /* Elevation */
    --iab-shadow-sm: 0 1px 4px  rgba(29, 35, 39, 0.06);
    --iab-shadow-md: 0 4px 16px rgba(29, 35, 39, 0.08);
    --iab-shadow-lg: 0 12px 40px rgba(29, 35, 39, 0.10);

    /* Typography */
    --iab-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;


    /* ── TIER 2: COMPONENT TOKENS ─────────────────────────────────────── */
    /* These map each component's visual property to a base token.
       Override these to change one component without affecting others.   */

    /* — Shell — */
    --iab-shell-bg:             #D8E5D9;
    --iab-shell-border:         rgba(14, 90, 56, 0.18);
    --iab-shell-border-width:   1px;
    --iab-shell-radius:         var(--iab-r-lg);
    --iab-shell-shadow:         0 14px 38px rgba(8, 38, 23, 0.16);
    --iab-shell-pad:            var(--iab-sp-xl);
    --iab-shell-max-width:      860px;

    /* — Panel / card — */
    --iab-card-bg:              #EFF5EE;
    --iab-card-border:          rgba(14, 90, 56, 0.14);
    --iab-card-border-width:    1px;
    --iab-card-radius:          var(--iab-r-md);
    --iab-card-pad:             18px;
    --iab-card-shadow:          none;

    /* — Stat tile — */
    --iab-tile-bg:              #F7FAF7;
    --iab-tile-border:          rgba(14, 90, 56, 0.16);
    --iab-tile-radius:          var(--iab-r-md);
    --iab-tile-pad-y:           14px;
    --iab-tile-pad-x:           16px;
    --iab-tile-value-size:      1.375rem;
    --iab-tile-value-color:     var(--iab-clr-text);
    --iab-tile-label-size:      0.6875rem;
    --iab-tile-label-color:     var(--iab-clr-text-faint);
    --iab-summary-tile-width:   130px;
    --iab-summary-tile-height:  0;
    --iab-summary-offset-x:     0px;
    --iab-summary-offset-y:     24px;
    --iab-result-summary-tile-width:   var(--iab-summary-tile-width);
    --iab-result-summary-tile-height:  var(--iab-summary-tile-height);
    --iab-result-summary-tile-radius:  var(--iab-tile-radius);
    --iab-result-summary-tile-pad-y:   var(--iab-tile-pad-y);
    --iab-result-summary-tile-pad-x:   var(--iab-tile-pad-x);
    --iab-result-summary-tile-value-size: var(--iab-tile-value-size);
    --iab-result-summary-tile-label-size: var(--iab-tile-label-size);
    --iab-result-summary-offset-x:     var(--iab-summary-offset-x);
    --iab-result-summary-offset-y:     var(--iab-summary-offset-y);
    --iab-featured-image-max-width: 100%;
    --iab-featured-image-radius: 0px;

    /* — Submit button — */
    --iab-btn-bg:               var(--iab-clr-primary);
    --iab-btn-color:            #ffffff;
    --iab-btn-border:           transparent;
    --iab-btn-border-width:     0;
    --iab-btn-radius:           var(--iab-r-pill);
    --iab-btn-pad-y:            14px;
    --iab-btn-pad-x:            36px;
    --iab-btn-font-size:        0.9375rem;
    --iab-btn-font-weight:      800;
    --iab-btn-bg-hover:         var(--iab-clr-primary-hover);
    --iab-btn-color-hover:      #ffffff;
    --iab-btn-shadow-hover:     0 6px 16px rgba(14, 90, 56, 0.24);
    --iab-btn-bg-active:        var(--iab-clr-primary-active);
    --iab-btn-focus-ring:       var(--iab-clr-primary);
    --iab-btn-focus-offset:     3px;

    /* — Input field — */
    --iab-input-bg:             #FFFFFF;
    --iab-input-color:          var(--iab-clr-text);
    --iab-input-placeholder:    var(--iab-clr-text-faint);
    --iab-input-border:         var(--iab-clr-border-strong);
    --iab-input-border-width:   1.5px;
    --iab-input-radius:         var(--iab-r-sm);
    --iab-input-pad-y:          10px;
    --iab-input-pad-x:          13px;
    --iab-input-font-size:      0.9375rem;
    --iab-input-focus-border:   var(--iab-clr-primary);
    --iab-input-focus-ring:     rgba(14, 90, 56, 0.18);

    /* — Question card — */
    --iab-question-radius:      var(--iab-r-md);
    --iab-question-pad:         var(--iab-sp-lg);
    --iab-question-text-size:   1.0625rem;

    /* — Question number badge — */
    --iab-qnum-bg:              var(--iab-clr-primary);
    --iab-qnum-color:           #ffffff;
    --iab-qnum-radius:          var(--iab-r-pill);
    --iab-qnum-font-size:       0.6875rem;

    /* — Answer choice — */
    --iab-choice-bg:            var(--iab-clr-surface-alt);
    --iab-choice-border:        var(--iab-clr-border);
    --iab-choice-border-width:  1.5px;
    --iab-choice-radius:        var(--iab-r-md);
    --iab-choice-pad-y:         12px;
    --iab-choice-pad-x:         14px;
    --iab-choice-bg-hover:      var(--iab-clr-primary-light);
    --iab-choice-border-hover:  var(--iab-clr-primary);
    --iab-choice-bg-selected:   var(--iab-clr-primary-light);
    --iab-choice-border-selected: var(--iab-clr-primary);

    /* — Choice letter badge (A / B / C / D) — */
    --iab-choice-label-bg:      rgba(14, 90, 56, 0.12);
    --iab-choice-label-color:   var(--iab-clr-primary);
    --iab-choice-label-bg-sel:  var(--iab-clr-primary);
    --iab-choice-label-color-sel: #ffffff;
    --iab-choice-label-radius:  var(--iab-r-xs);

    /* — Timer — */
    --iab-timer-bg:             #F7FAF7;
    --iab-timer-border:         rgba(14, 90, 56, 0.24);
    --iab-timer-border-width:   2px;
    --iab-timer-radius:         var(--iab-r-md);
    --iab-timer-pad-y:          14px;
    --iab-timer-pad-x:          20px;
    --iab-timer-shadow:         var(--iab-shadow-md);
    --iab-timer-display-size:   2.125rem;
    --iab-timer-display-color:  var(--iab-clr-text);
    --iab-timer-label-color:    var(--iab-clr-text-muted);

    /* — Badge — */
    --iab-badge-pad-y:          4px;
    --iab-badge-pad-x:          12px;
    --iab-badge-font-size:      0.6875rem;
    --iab-badge-font-weight:    800;
    --iab-badge-radius:         var(--iab-r-pill);
    --iab-badge-pass-bg:        var(--iab-clr-pass-bg);
    --iab-badge-pass-color:     var(--iab-clr-pass-text);
    --iab-badge-fail-bg:        var(--iab-clr-fail-bg);
    --iab-badge-fail-color:     var(--iab-clr-fail-text);
    --iab-badge-timeout-bg:     var(--iab-clr-timeout-bg);
    --iab-badge-timeout-color:  var(--iab-clr-timeout-text);

    /* — Alert / notice — */
    --iab-alert-radius:         var(--iab-r-md);
    --iab-alert-pad-y:          12px;
    --iab-alert-pad-x:          16px;
    --iab-alert-border-width:   4px;
    --iab-alert-font-size:      0.9375rem;

    /* — Result banner — */
    --iab-banner-radius:        var(--iab-r-md);
    --iab-banner-pad-y:         16px;
    --iab-banner-pad-x:         20px;
    --iab-banner-icon-size:     30px;
    --iab-banner-font-size:     1rem;
    --iab-banner-font-weight:   600;

    /* — Answer review — */
    --iab-answer-radius:        var(--iab-r-sm);
    --iab-answer-pad-y:         10px;
    --iab-answer-pad-x:         13px;
    --iab-answer-label-size:    0.6875rem;
    --iab-answer-value-size:    0.9375rem;

    /* Certificate Hijri date font. The first font must be loaded by the site. */
    --iab-hijri-date-font: "Samir_Khouaja_Maghribi", "Noto Naskh Arabic", "Amiri", Arial, Tahoma, sans-serif;
}


/* --------------------------------------------------------------------------
   01. Shell & layout
   -------------------------------------------------------------------------- */

.iab-exam-shell {
    position: relative;            /* anchor for the expiry overlay */
    font-family: var(--iab-font);
    max-width: var(--iab-shell-max-width);
    margin-left: auto;
    margin-right: auto;
    background: var(--iab-shell-bg);
    border: var(--iab-shell-border-width) solid var(--iab-shell-border);
    border-top: 4px solid var(--iab-clr-border-strong); /* overridden by modifiers */
    border-radius: var(--iab-shell-radius);
    box-shadow: var(--iab-shell-shadow);
    padding: var(--iab-shell-pad);
    box-sizing: border-box;
}

/* Outcome accent — top border */
.iab-exam-shell--pass      { border-top-color: var(--iab-clr-pass); }
.iab-exam-shell--fail      { border-top-color: var(--iab-clr-fail); }
.iab-exam-shell--timed-out { border-top-color: var(--iab-clr-timeout); }

/* Inner panel / card */
.iab-exam-panel {
    background:    var(--iab-card-bg);
    border:        var(--iab-card-border-width) solid var(--iab-card-border);
    border-radius: var(--iab-card-radius);
    padding:       var(--iab-card-pad);
    box-shadow:    var(--iab-card-shadow);
}

/* Vertical stacks */
.iab-exam-form,
.iab-exam-question-stack {
    display: grid;
    gap: var(--iab-sp-md);
}


/* --------------------------------------------------------------------------
   02. Header / hero
   -------------------------------------------------------------------------- */

.iab-exam-header {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--iab-sp-lg);
    align-items: start;
    padding-bottom: var(--iab-sp-lg);
    margin-bottom: var(--iab-sp-lg);
    border-bottom: 1px solid var(--iab-clr-border);
}

.iab-exam-eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--iab-clr-accent);
    margin-bottom: 6px;
}

.iab-exam-title {
    margin: 0 0 10px;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--iab-title-color);
}

/* Force token-driven header colors to win over theme/Elementor heading styles. */
.iab-exam-shell .iab-exam-eyebrow { color: var(--iab-clr-accent) !important; }
.iab-exam-shell .iab-exam-title { color: var(--iab-title-color) !important; }

.iab-exam-description,
.iab-exam-description-text {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--iab-clr-text-muted);
}

.iab-exam-shell .iab-exam-description figure,
.iab-exam-shell .iab-exam-description .wp-block-image {
    max-width: var(--iab-featured-image-max-width);
    border-radius: var(--iab-featured-image-radius);
    overflow: hidden;
    margin-top: var(--iab-sp-md);
}

.iab-exam-shell .iab-exam-description img {
    display: block;
    width: 100% !important;
    max-width: var(--iab-featured-image-max-width) !important;
    height: auto;
    border-radius: var(--iab-featured-image-radius) !important;
    margin-top: var(--iab-sp-md);
}

.iab-exam-shell .iab-exam-description figure img,
.iab-exam-shell .iab-exam-description .wp-block-image img {
    margin-top: 0;
}


/* --------------------------------------------------------------------------
   03. Stat tiles
   -------------------------------------------------------------------------- */

.iab-exam-summary {
    display: flex;
    flex-direction: column;
    gap: var(--iab-sp-xs);
}

.iab-exam-summary--exam {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-top: var(--iab-summary-offset-y);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    --iab-summary-current-width: var(--iab-summary-tile-width);
    --iab-summary-current-height: var(--iab-summary-tile-height);
    --iab-summary-current-radius: var(--iab-tile-radius);
    --iab-summary-current-pad-y: var(--iab-tile-pad-y);
    --iab-summary-current-pad-x: var(--iab-tile-pad-x);
    --iab-summary-current-value-size: var(--iab-tile-value-size);
    --iab-summary-current-label-size: var(--iab-tile-label-size);
}

.iab-exam-summary--result {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-top: var(--iab-result-summary-offset-y);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    --iab-summary-current-width: var(--iab-result-summary-tile-width);
    --iab-summary-current-height: var(--iab-result-summary-tile-height);
    --iab-summary-current-radius: var(--iab-result-summary-tile-radius);
    --iab-summary-current-pad-y: var(--iab-result-summary-tile-pad-y);
    --iab-summary-current-pad-x: var(--iab-result-summary-tile-pad-x);
    --iab-summary-current-value-size: var(--iab-result-summary-tile-value-size);
    --iab-summary-current-label-size: var(--iab-result-summary-tile-label-size);
}

/*
   Header stats are full-width rows, not a right rail. This keeps long exam
   titles from changing where the score/question tiles visually sit.
*/
.iab-exam-header {
    grid-template-columns: 1fr;
}

/* Result page header with media:
   title first, media second, stats third. */
.iab-exam-header--with-media {
    grid-template-columns: 1fr;
    grid-template-areas:
        "content"
        "media"
        "summary";
}

.iab-exam-header--with-media .iab-exam-header__content {
    grid-area: content;
}

.iab-exam-header--with-media .iab-exam-summary--result {
    grid-area: summary;
    align-self: stretch;
}

.iab-exam-stat-tile {
    background:    var(--iab-tile-bg);
    border:        1px solid var(--iab-tile-border);
    border-radius: var(--iab-summary-current-radius, var(--iab-tile-radius));
    padding:       var(--iab-summary-current-pad-y, var(--iab-tile-pad-y)) var(--iab-summary-current-pad-x, var(--iab-tile-pad-x));
    width:         var(--iab-summary-current-width, var(--iab-summary-tile-width));
    min-height:    var(--iab-summary-current-height, var(--iab-summary-tile-height));
    box-sizing:    border-box;
    text-align:    center;
}

.iab-exam-summary--exam .iab-exam-stat-tile,
.iab-exam-summary--result .iab-exam-stat-tile {
    width: 100%;
    min-width: 0;
}

.iab-exam-stat-tile strong {
    display:       block;
    font-size:     var(--iab-summary-current-value-size, var(--iab-tile-value-size));
    font-weight:   800;
    color:         var(--iab-tile-value-color);
    line-height:   1.1;
    margin-bottom: 3px;
}

.iab-exam-stat-tile span {
    display:        block;
    font-size:      var(--iab-summary-current-label-size, var(--iab-tile-label-size));
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--iab-tile-label-color);
}

/* Result-page 3-up stat strip */
.iab-exam-result-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--iab-sp-sm);
}

.iab-exam-result-grid > article {
    background:    var(--iab-tile-bg);
    border:        1px solid var(--iab-tile-border);
    border-radius: var(--iab-tile-radius);
    padding:       16px;
    text-align:    center;
}

.iab-exam-result-grid > article span {
    display:        block;
    font-size:      var(--iab-tile-label-size);
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--iab-tile-label-color);
    margin-bottom:  5px;
}

.iab-exam-result-grid > article strong {
    display:     block;
    font-size:   1.5rem;
    font-weight: 800;
    color:       var(--iab-tile-value-color);
    line-height: 1;
}


/* --------------------------------------------------------------------------
   04. Timer
   -------------------------------------------------------------------------- */

.iab-exam-timer {
    position: sticky;
    top: 16px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iab-sp-md);
    padding:       var(--iab-timer-pad-y) var(--iab-timer-pad-x);
    background:    var(--iab-timer-bg);
    border:        var(--iab-timer-border-width) solid var(--iab-timer-border);
    border-radius: var(--iab-timer-radius);
    box-shadow:    var(--iab-timer-shadow);
    margin-bottom: var(--iab-sp-md);
}

.iab-exam-timer__label {
    font-size:      0.75rem;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--iab-timer-label-color);
}

.iab-exam-timer__display {
    font-size:           var(--iab-timer-display-size);
    font-weight:         800;
    font-variant-numeric: tabular-nums;
    letter-spacing:      0.02em;
    line-height:         1;
    color: var(--iab-timer-display-color);
}

/* Warning state (≤ 60 s) */
.iab-exam-timer--warning {
    background:   var(--iab-clr-warn-bg);
    border-color: var(--iab-clr-warn-border);
}
.iab-exam-timer--warning .iab-exam-timer__label   { color: var(--iab-clr-warn); }
.iab-exam-timer--warning .iab-exam-timer__display { color: var(--iab-clr-warn); }

/* Expired state */
.iab-exam-timer--expired {
    background:   var(--iab-clr-fail-bg);
    border-color: var(--iab-clr-fail);
}
.iab-exam-timer--expired .iab-exam-timer__label   { color: var(--iab-clr-fail-text); }
.iab-exam-timer--expired .iab-exam-timer__display { color: var(--iab-clr-fail); }


/* --------------------------------------------------------------------------
   05. Alerts & banners
   -------------------------------------------------------------------------- */

.iab-exam-alert {
    display:      flex;
    align-items:  flex-start;
    gap:          10px;
    padding:      var(--iab-alert-pad-y) var(--iab-alert-pad-x);
    border-radius: var(--iab-alert-radius);
    border-left:  var(--iab-alert-border-width) solid transparent;
    font-size:    var(--iab-alert-font-size);
    line-height:  1.55;
    margin-bottom: var(--iab-sp-md);
}

.iab-exam-alert-error {
    background:        var(--iab-clr-fail-bg);
    border-left-color: var(--iab-clr-fail);
    color:             var(--iab-clr-fail-text);
}

.iab-exam-alert-info {
    background:        var(--iab-clr-primary-light);
    border-left-color: var(--iab-clr-primary);
    color:             var(--iab-clr-primary-active);
}

.iab-exam-guard-warning[hidden] {
    display: none !important;
}

/* Result outcome banner */
.iab-exam-result-banner {
    display:       flex;
    align-items:   center;
    gap:           var(--iab-sp-sm);
    padding:       var(--iab-banner-pad-y) var(--iab-banner-pad-x);
    border-radius: var(--iab-banner-radius);
    margin-bottom: var(--iab-sp-md);
    font-weight:   var(--iab-banner-font-weight);
    font-size:     var(--iab-banner-font-size);
    line-height:   1.4;
}

.iab-exam-result-banner--pass      { background: var(--iab-clr-pass-bg);    color: var(--iab-clr-pass-text); }
.iab-exam-result-banner--fail      { background: var(--iab-clr-fail-bg);    color: var(--iab-clr-fail-text); }
.iab-exam-result-banner--timed-out { background: var(--iab-clr-timeout-bg); color: var(--iab-clr-timeout-text); }

.iab-exam-result-banner__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--iab-banner-icon-size);
    height:          var(--iab-banner-icon-size);
    border-radius:   50%;
    font-size:       0.875rem;
    font-weight:     900;
    flex-shrink:     0;
}

.iab-exam-result-banner--pass      .iab-exam-result-banner__icon { background: var(--iab-clr-pass);    color: #fff; }
.iab-exam-result-banner--fail      .iab-exam-result-banner__icon { background: var(--iab-clr-fail);    color: #fff; }
.iab-exam-result-banner--timed-out .iab-exam-result-banner__icon { background: var(--iab-clr-timeout); color: #fff; }

/* Optional media block shown on result page */
.iab-exam-result-media {
    padding: 0;
    overflow: hidden;
    border-radius: var(--iab-featured-image-radius);
}

.iab-exam-result-media--header {
    margin-top: var(--iab-sp-md);
    grid-area: media;
}

.iab-exam-result-media img {
    display: block;
    width: 100% !important;
    max-width: var(--iab-featured-image-max-width);
    height: auto;
    border-radius: var(--iab-featured-image-radius);
    margin: 0 auto;
}


/* --------------------------------------------------------------------------
   06. Section headers
   -------------------------------------------------------------------------- */

.iab-exam-section-head {
    display:        flex;
    align-items:    center;
    gap:            10px;
    margin-bottom:  var(--iab-sp-md);
    padding-bottom: 10px;
    border-bottom:  1px solid var(--iab-clr-border);
}

.iab-exam-section-head h3 {
    margin:         0;
    padding:        0;
    font-size:      0.8125rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--iab-clr-text-muted);
    border:         none;
    background:     transparent;
}


/* --------------------------------------------------------------------------
   07. Form & field elements
   -------------------------------------------------------------------------- */

.iab-exam-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--iab-sp-sm);
}

.iab-exam-field      { display: grid; gap: 5px; }
.iab-exam-field-full { grid-column: 1 / -1; }

.iab-exam-field__label {
    font-size:   0.8125rem;
    font-weight: 700;
    color:       var(--iab-clr-text);
    line-height: 1;
}

.iab-exam-field__optional {
    font-size:   0.75rem;
    font-weight: 400;
    color:       var(--iab-clr-text-faint);
    margin-left: 4px;
}

.iab-exam-field input[type="text"],
.iab-exam-field input[type="email"] {
    width:        100%;
    background:   var(--iab-input-bg);
    color:        var(--iab-input-color);
    border:       var(--iab-input-border-width) solid var(--iab-input-border);
    border-radius: var(--iab-input-radius);
    padding:      var(--iab-input-pad-y) var(--iab-input-pad-x);
    font-size:    var(--iab-input-font-size);
    font-family:  var(--iab-font);
    line-height:  1.4;
    transition:   border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing:   border-box;
}

.iab-exam-field input:focus {
    outline:      none;
    border-color: var(--iab-input-focus-border);
    box-shadow:   0 0 0 3px var(--iab-input-focus-ring);
}

.iab-exam-field input::placeholder { color: var(--iab-input-placeholder); }

.iab-exam-field small,
.iab-exam-question-head small {
    font-size: 0.8125rem;
    color:     var(--iab-clr-fail);
}


/* --------------------------------------------------------------------------
   08. Questions & choices
   -------------------------------------------------------------------------- */

.iab-exam-question-head {
    display:        flex;
    justify-content: space-between;
    align-items:    center;
    gap:            var(--iab-sp-sm);
    margin-bottom:  var(--iab-sp-sm);
}

/* Pill badge: Q1, Q2 … */
.iab-exam-question-number {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--iab-qnum-bg);
    color:           var(--iab-qnum-color);
    font-size:       var(--iab-qnum-font-size);
    font-weight:     800;
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    padding:         4px 11px;
    border-radius:   var(--iab-qnum-radius);
    line-height:     1.6;
}

/* Question text — scoped to avoid theme collisions */
.iab-exam-question > h3 {
    margin:     0 0 var(--iab-sp-md);
    font-size:  var(--iab-question-text-size);
    font-weight: 700;
    line-height: 1.5;
    color:       var(--iab-clr-text);
    border:      none;
    background:  transparent;
    padding:     0;
}

.iab-exam-choice-list {
    display: grid;
    gap:     var(--iab-sp-xs);
}

.iab-exam-choice {
    display:     grid;
    grid-template-columns: 18px 28px 1fr;
    gap:         10px;
    align-items: center;
    border:        var(--iab-choice-border-width) solid var(--iab-choice-border);
    border-radius: var(--iab-choice-radius);
    padding:       var(--iab-choice-pad-y) var(--iab-choice-pad-x);
    background:    var(--iab-choice-bg);
    cursor:        pointer;
    transition:    border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.iab-exam-choice:hover {
    border-color: var(--iab-choice-border-hover);
    background:   var(--iab-choice-bg-hover);
}

.iab-exam-choice:has(input[type="radio"]:checked) {
    border-color: var(--iab-choice-border-selected);
    background:   var(--iab-choice-bg-selected);
    box-shadow:   inset 0 0 0 1px var(--iab-choice-border-selected);
}

.iab-exam-choice input[type="radio"] {
    accent-color: var(--iab-clr-primary);
    width:        16px;
    height:       16px;
    flex-shrink:  0;
    cursor:       pointer;
    margin:       0;
}

/* Letter badge: A / B / C / D */
.iab-exam-choice-label {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           26px;
    height:          26px;
    border-radius:   var(--iab-choice-label-radius);
    background:      var(--iab-choice-label-bg);
    color:           var(--iab-choice-label-color);
    font-size:       0.6875rem;
    font-weight:     800;
    text-transform:  uppercase;
    flex-shrink:     0;
    transition:      background 0.12s ease, color 0.12s ease;
}

.iab-exam-choice:has(input[type="radio"]:checked) .iab-exam-choice-label {
    background: var(--iab-choice-label-bg-sel);
    color:      var(--iab-choice-label-color-sel);
}

.iab-exam-choice-text {
    font-size:   0.9375rem;
    line-height: 1.5;
    color:       var(--iab-clr-text);
}


/* --------------------------------------------------------------------------
   09. Actions & submit bar
   -------------------------------------------------------------------------- */

.iab-exam-actions {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--iab-sp-md);
    flex-wrap:       wrap;
    padding-top:     var(--iab-sp-md);
    border-top:      1px solid var(--iab-clr-border);
}

.iab-exam-actions__help {
    margin:      0;
    font-size:   0.875rem;
    color:       var(--iab-clr-text-muted);
    line-height: 1.5;
}

.iab-exam-flow-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--iab-sp-sm);
    border: 1px solid var(--iab-clr-border);
    border-radius: var(--iab-r-md);
    background: var(--iab-clr-surface-alt);
    padding: 12px 14px;
}

.iab-exam-flow-nav__meta {
    display: grid;
    gap: 3px;
}

.iab-exam-flow-nav__progress {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--iab-clr-text-muted);
}

.iab-exam-flow-nav__notice {
    font-size: 0.8125rem;
    color: var(--iab-clr-fail);
    min-height: 1.2em;
}

.iab-exam-flow-nav__actions {
    display: inline-flex;
    gap: 8px;
}

.iab-exam-flow-btn {
    appearance: none;
    border: none;
    border-radius: var(--iab-r-pill);
    background: var(--iab-btn-bg);
    color: var(--iab-btn-color);
    font-size: 0.8125rem;
    font-weight: 700;
    padding: 9px 16px;
    cursor: pointer;
}

.iab-exam-flow-btn:hover {
    background: var(--iab-btn-bg-hover);
}

.iab-exam-flow-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.iab-exam-flow-btn--secondary {
    background: transparent;
    color: var(--iab-clr-text);
    border: 1px solid var(--iab-clr-border-strong);
}

.iab-exam-button {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    border:          var(--iab-btn-border-width) solid var(--iab-btn-border);
    border-radius:   var(--iab-btn-radius);
    background:      var(--iab-btn-bg);
    color:           var(--iab-btn-color);
    padding:         var(--iab-btn-pad-y) var(--iab-btn-pad-x);
    font-size:       var(--iab-btn-font-size);
    font-weight:     var(--iab-btn-font-weight);
    font-family:     var(--iab-font);
    cursor:          pointer;
    white-space:     nowrap;
    transition:      background 0.15s ease, color 0.15s ease,
                     transform 0.1s ease, box-shadow 0.15s ease;
}

a.iab-exam-button,
a.iab-exam-button:visited {
    color: var(--iab-btn-color) !important;
    text-decoration: none;
}

.iab-exam-button:hover {
    background: var(--iab-btn-bg-hover);
    color:      var(--iab-btn-color-hover);
    box-shadow: var(--iab-btn-shadow-hover);
}

a.iab-exam-button:hover,
a.iab-exam-button:focus {
    color: var(--iab-btn-color-hover) !important;
    text-decoration: none;
}

.iab-exam-button:active {
    background: var(--iab-btn-bg-active);
    transform:  scale(0.98);
}

.iab-exam-button:focus-visible {
    outline:        3px solid var(--iab-btn-focus-ring);
    outline-offset: var(--iab-btn-focus-offset);
}


/* --------------------------------------------------------------------------
   10. Status badges
   -------------------------------------------------------------------------- */

.iab-status-badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    border-radius:   var(--iab-badge-radius);
    padding:         var(--iab-badge-pad-y) var(--iab-badge-pad-x);
    font-size:       var(--iab-badge-font-size);
    font-weight:     var(--iab-badge-font-weight);
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    white-space:     nowrap;
    line-height:     1;
}

.iab-status-badge--pass    { background: var(--iab-badge-pass-bg);    color: var(--iab-badge-pass-color); }
.iab-status-badge--fail    { background: var(--iab-badge-fail-bg);    color: var(--iab-badge-fail-color); }
.iab-status-badge--timeout { background: var(--iab-badge-timeout-bg); color: var(--iab-badge-timeout-color); }

/* Legacy selectors — backward compatibility */
.iab-exam-status { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--iab-badge-radius); padding: 6px 10px; font-size: 0.75rem; font-weight: 700; }
.iab-exam-status.is-pass { background: var(--iab-badge-pass-bg);  color: var(--iab-badge-pass-color); }
.iab-exam-status.is-fail { background: var(--iab-badge-fail-bg);  color: var(--iab-badge-fail-color); }


/* --------------------------------------------------------------------------
   11. Answer review cards
   -------------------------------------------------------------------------- */

/* Coloured left border shows correctness at a glance */
.iab-exam-question--correct   { border-left: 3px solid var(--iab-clr-pass); }
.iab-exam-question--incorrect { border-left: 3px solid var(--iab-clr-fail); }

.iab-exam-answer-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:        var(--iab-sp-sm);
    margin-top: var(--iab-sp-sm);
}

.iab-exam-answer-row__item {
    background:    var(--iab-clr-surface-alt);
    border:        1px solid var(--iab-clr-border);
    border-radius: var(--iab-answer-radius);
    padding:       var(--iab-answer-pad-y) var(--iab-answer-pad-x);
}

.iab-exam-answer-row__item--correct {
    border-color: rgba(26, 158, 78, 0.28);
    background:   rgba(230, 246, 236, 0.55);
}

.iab-exam-answer-row__label {
    display:        block;
    font-size:      var(--iab-answer-label-size);
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--iab-clr-text-faint);
    margin-bottom:  4px;
}

.iab-exam-answer-row__item--correct .iab-exam-answer-row__label {
    color: var(--iab-clr-pass-text);
}

.iab-exam-answer-row__value {
    font-size:   var(--iab-answer-value-size);
    color:       var(--iab-clr-text);
    font-weight: 500;
    line-height: 1.4;
}

/* ── Question explanation ────────────────────────────────────────────────── */
.iab-exam-explanation {
    margin-top:       var(--iab-sp-sm);
    padding:          var(--iab-sp-sm) var(--iab-sp-md);
    background:       #f8f9fb;
    border-left:      3px solid var(--iab-clr-primary);
    border-radius:    0 6px 6px 0;
}

.iab-exam-explanation__label {
    display:        block;
    font-size:      0.75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          var(--iab-clr-text-muted);
    margin-bottom:  4px;
}

.iab-exam-explanation__text {
    margin:      0;
    font-size:   0.9rem;
    color:       var(--iab-clr-text);
    line-height: 1.6;
}


/* --------------------------------------------------------------------------
   12. Expiry overlay
   -------------------------------------------------------------------------- */

.iab-exam-expired-overlay {
    position:               absolute;
    inset:                  0;
    border-radius:          inherit;
    background:             rgba(255, 255, 255, 0.93);
    backdrop-filter:        blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display:                flex;
    align-items:            center;
    justify-content:        center;
    z-index:                200;
}

.iab-exam-expired-message {
    text-align:  center;
    padding:     var(--iab-sp-xl) var(--iab-sp-lg);
    max-width:   380px;
}

.iab-exam-expired-icon  { display: block; font-size: 3.5rem; line-height: 1; margin-bottom: var(--iab-sp-sm); }
.iab-exam-expired-title { margin: 0 0 10px; font-size: 1.625rem; font-weight: 800; color: var(--iab-clr-text); }
.iab-exam-expired-text  { margin: 0; font-size: 0.9375rem; color: var(--iab-clr-text-muted); line-height: 1.65; }


/* --------------------------------------------------------------------------
   13. Responsive overrides
   -------------------------------------------------------------------------- */

@media (max-width: 782px) {
    .iab-exam-shell  { padding: var(--iab-sp-lg); }
    .iab-exam-title  { font-size: 1.625rem; }
    .iab-exam-result-grid { grid-template-columns: repeat(3, 1fr); }
    .iab-exam-answer-row  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .iab-exam-shell {
        padding:       var(--iab-sp-md);
        border-radius: var(--iab-r-md);
    }
    .iab-exam-header        { grid-template-columns: 1fr; }
    .iab-exam-summary       { flex-direction: row; flex-wrap: wrap; min-width: unset; margin-left: 0; }
    .iab-exam-summary--exam,
    .iab-exam-summary--result {
        grid-template-columns: 1fr;
        margin-top: var(--iab-sp-md);
    }
    .iab-exam-header--with-media {
        grid-template-areas:
            "content"
            "media"
            "summary";
    }
    .iab-exam-stat-tile     { flex: 1 1 80px; min-width: 80px; width: auto; }
    .iab-exam-grid          { grid-template-columns: 1fr; }
    .iab-exam-result-grid   { grid-template-columns: 1fr; }
    .iab-exam-answer-row    { grid-template-columns: 1fr; }
    .iab-exam-actions       { flex-direction: column; align-items: stretch; }
    .iab-exam-flow-nav      { flex-direction: column; align-items: stretch; }
    .iab-exam-flow-nav__actions { justify-content: stretch; }
    .iab-exam-flow-btn      { width: 100%; justify-content: center; }
    .iab-exam-button        { width: 100%; justify-content: center; padding: 14px; }
    .iab-exam-result-banner { flex-direction: column; align-items: flex-start; gap: 8px; }
    .iab-exam-timer         { top: 8px; padding: 11px 16px; }
    .iab-exam-timer__display { font-size: 1.625rem; }
}


/* --------------------------------------------------------------------------
   14. Polish & motion  (v3.1 refinement layer)
   --------------------------------------------------------------------------
   Additive refinements that layer on top of existing components WITHOUT
   altering any existing token defaults. Everything here only changes the
   visual polish, micro-interactions, and hierarchy. Safe to extend or
   override — the rules respect the same token system above.
   -------------------------------------------------------------------------- */

/* — Softer layered elevation for the shell and cards — */
.iab-exam-shell {
    transition: box-shadow 0.25s ease;
}

.iab-exam-panel {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* — Section headers: tighter, more modern — */
.iab-exam-section-head {
    align-items: baseline;
}

.iab-exam-section-head h3 {
    position: relative;
    padding-left: 12px;
}

.iab-exam-section-head h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 12px;
    background: var(--iab-clr-primary);
    border-radius: 2px;
    opacity: 0.75;
}

/* — Stat tiles: subtle top accent + refined type rhythm — */
.iab-exam-stat-tile,
.iab-exam-result-grid > article {
    position: relative;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.iab-exam-stat-tile:hover,
.iab-exam-result-grid > article:hover {
    transform: translateY(-1px);
    box-shadow: var(--iab-shadow-sm);
}

/* — Timer: urgency pulse + more confident display — */
.iab-exam-timer {
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.iab-exam-timer__display {
    font-feature-settings: "tnum" 1, "zero" 1;
}

@keyframes iab-timer-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.25); }
    50%      { box-shadow: 0 0 0 6px rgba(180, 83, 9, 0); }
}

.iab-exam-timer--warning {
    animation: iab-timer-pulse 1.6s ease-in-out infinite;
}

.iab-exam-timer--expired {
    animation: none;
}

/* — Buttons: softer press, consistent lift — */
.iab-exam-button {
    will-change: transform;
    letter-spacing: 0.01em;
}

.iab-exam-button:hover {
    transform: translateY(-1px);
}

.iab-exam-button:active {
    transform: translateY(0) scale(0.985);
}

.iab-exam-button:focus-visible {
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(14, 90, 56, 0.15);
}

.iab-exam-button[disabled],
.iab-exam-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.iab-exam-flow-btn {
    transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.iab-exam-flow-btn:hover { transform: translateY(-1px); }
.iab-exam-flow-btn:active { transform: translateY(0); }

/* — Inputs: smoother focus glow — */
.iab-exam-field input[type="text"],
.iab-exam-field input[type="email"] {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.iab-exam-field--error input[type="text"],
.iab-exam-field--error input[type="email"] {
    border-color: var(--iab-clr-fail);
    box-shadow: 0 0 0 3px rgba(177, 58, 58, 0.12);
}

/* — Choices: smoother selection and a subtle pop — */
.iab-exam-choice {
    transition: border-color 0.15s ease, background 0.15s ease,
                box-shadow 0.15s ease, transform 0.12s ease;
}

.iab-exam-choice:hover {
    transform: translateY(-1px);
}

.iab-exam-choice:active {
    transform: translateY(0);
}

.iab-exam-choice:has(input[type="radio"]:checked) {
    box-shadow: inset 0 0 0 1px var(--iab-choice-border-selected),
                0 2px 8px rgba(14, 90, 56, 0.08);
}

.iab-exam-choice:focus-within {
    box-shadow: 0 0 0 3px var(--iab-input-focus-ring);
}

.iab-exam-choice-label {
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.iab-exam-choice:has(input[type="radio"]:checked) .iab-exam-choice-label {
    transform: scale(1.05);
}

/* — Result banner: richer pass emphasis + icon motion — */
.iab-exam-result-banner {
    border: 1px solid transparent;
    box-shadow: var(--iab-shadow-sm);
}

.iab-exam-result-banner--pass {
    background: linear-gradient(135deg,
        var(--iab-clr-pass-bg) 0%,
        color-mix(in srgb, var(--iab-clr-pass-bg) 70%, #ffffff) 100%);
    border-color: color-mix(in srgb, var(--iab-clr-pass) 22%, transparent);
}

.iab-exam-result-banner--fail {
    border-color: color-mix(in srgb, var(--iab-clr-fail) 22%, transparent);
}

.iab-exam-result-banner--timed-out {
    border-color: color-mix(in srgb, var(--iab-clr-timeout) 22%, transparent);
}

.iab-exam-result-banner__icon {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* — Exam shell outcome accents: stronger top bar — */
.iab-exam-shell--pass,
.iab-exam-shell--fail,
.iab-exam-shell--timed-out {
    border-top-width: 5px;
}

/* — Answer review: clearer correct state, better rhythm — */
.iab-exam-question--correct,
.iab-exam-question--incorrect {
    border-left-width: 4px;
}

.iab-exam-answer-row__item {
    transition: background 0.18s ease, border-color 0.18s ease;
}

.iab-exam-answer-row__item--correct {
    border-color: color-mix(in srgb, var(--iab-clr-pass) 28%, transparent);
    background: color-mix(in srgb, var(--iab-clr-pass-bg) 65%, #ffffff);
    position: relative;
}

.iab-exam-answer-row__item--correct::before {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--iab-clr-pass);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 900;
    line-height: 1;
}

/* — Status badges: refined contrast w/ hairline border — */
.iab-status-badge {
    border: 1px solid transparent;
    backdrop-filter: saturate(1.05);
}

.iab-status-badge--pass    { border-color: color-mix(in srgb, var(--iab-clr-pass)    22%, transparent); }
.iab-status-badge--fail    { border-color: color-mix(in srgb, var(--iab-clr-fail)    22%, transparent); }
.iab-status-badge--timeout { border-color: color-mix(in srgb, var(--iab-clr-timeout) 22%, transparent); }

/* — Eyebrow: tighten rhythm next to heavy title — */
.iab-exam-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.iab-exam-eyebrow::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 2px;
    background: currentColor;
    opacity: 0.55;
    border-radius: 1px;
}

/* — Alerts: icon-like leading accent — */
.iab-exam-alert {
    border: 1px solid transparent;
    box-shadow: var(--iab-shadow-sm);
    align-items: center;
}

.iab-exam-alert-error { border-color: color-mix(in srgb, var(--iab-clr-fail) 22%, transparent); }
.iab-exam-alert-info  { border-color: color-mix(in srgb, var(--iab-clr-primary) 22%, transparent); }

/* — Expiry overlay: softer reveal — */
.iab-exam-expired-overlay {
    animation: iab-overlay-fade 0.22s ease-out;
}

@keyframes iab-overlay-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* — Flow nav: clearer hierarchy — */
.iab-exam-flow-nav {
    box-shadow: var(--iab-shadow-sm);
}

/* — Sticky submit on small screens for better UX — */
@media (max-width: 600px) {
    .iab-exam-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: var(--iab-shell-bg);
        padding: var(--iab-sp-md) 0 calc(var(--iab-sp-sm) + env(safe-area-inset-bottom, 0px));
        margin: 0 calc(-1 * var(--iab-sp-md));
        padding-left: var(--iab-sp-md);
        padding-right: var(--iab-sp-md);
        border-top: 1px solid var(--iab-clr-border);
        box-shadow: 0 -6px 14px rgba(8, 38, 23, 0.05);
    }
    .iab-exam-actions__help { text-align: center; }
    .iab-exam-section-head h3 { font-size: 0.75rem; }
    .iab-exam-title { letter-spacing: -0.01em; }
}

/* — Respect reduced-motion preference — */
@media (prefers-reduced-motion: reduce) {
    .iab-exam-shell,
    .iab-exam-panel,
    .iab-exam-choice,
    .iab-exam-button,
    .iab-exam-flow-btn,
    .iab-exam-field input,
    .iab-exam-stat-tile,
    .iab-exam-result-grid > article,
    .iab-exam-timer,
    .iab-exam-answer-row__item,
    .iab-exam-choice-label {
        transition: none !important;
        animation: none !important;
    }

    .iab-exam-choice:hover,
    .iab-exam-button:hover,
    .iab-exam-flow-btn:hover,
    .iab-exam-stat-tile:hover,
    .iab-exam-result-grid > article:hover {
        transform: none !important;
    }

    .iab-exam-timer--warning { animation: none !important; }
    .iab-exam-expired-overlay { animation: none !important; }
}

/* =========================================================================
   2.0 — True/False question rendering
   ========================================================================= */

.iab-exam-question-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--iab-clr-primary-soft, rgba(59, 130, 246, 0.12));
    color: var(--iab-clr-primary, #2563eb);
}

.iab-exam-choice-list--boolean {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

@media (max-width: 480px) {
    .iab-exam-choice-list--boolean {
        grid-template-columns: 1fr;
    }
}

.iab-exam-choice--boolean {
    justify-content: center;
    text-align: center;
    padding: 18px 12px;
    font-weight: 600;
    font-size: 1.05em;
    letter-spacing: 0.02em;
}

.iab-exam-choice--boolean .iab-exam-choice-text {
    text-transform: uppercase;
}

/* =========================================================================
   2.0 — Certificate + verification pages
   ========================================================================= */

.iab-certificate-shell,
.iab-verify-shell {
    max-width: 960px;
    margin: 0 auto;
}

.iab-certificate-lookup {
    display: grid;
    gap: var(--iab-sp-md);
}

.iab-certificate-lookup h2,
.iab-certificate-lookup p {
    margin: 0;
}

.iab-certificate-lookup h2 {
    color: var(--iab-title-color) !important;
}

.iab-certificate-lookup p {
    color: var(--iab-clr-text-muted);
}

.iab-certificate-lookup__form .iab-exam-actions {
    justify-content: flex-start;
    padding-top: 0;
    border-top: 0;
}

.iab-certificate {
    position: relative;
    margin: 24px 0;
    padding: 56px 48px;
    background: #fffdf7;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    text-align: center;
    color: #1f2937;
    font-family: Georgia, "Times New Roman", serif;
}

.iab-certificate-template {
    position: relative;
    width: min(100%, 1120px);
    margin: 24px auto;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    container-type: inline-size;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.iab-certificate-template__image {
    display: block;
    width: 100%;
    height: auto;
}

.iab-certificate-template__field {
    position: absolute;
    z-index: 2;
    transform: translate(-50%, -50%);
    max-width: 82%;
    text-align: center;
    line-height: 1.15;
    white-space: nowrap;
    overflow-wrap: normal;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

.iab-certificate-template__field--date,
.iab-certificate-template__field--code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 600;
    letter-spacing: 0.03em;
}

.iab-certificate-template__field--date,
.iab-certificate__date {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--iab-hijri-date-font);
    font-weight: 400;
    letter-spacing: 0;
}

.iab-certificate-template__field--link {
    font-family: Arial, Tahoma, sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.iab-certificate-template__qr {
    position: absolute;
    z-index: 2;
    display: block;
    transform: translate(-50%, -50%);
    line-height: 0;
}

.iab-certificate-template__qr img,
.iab-certificate__qr img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}

.iab-certificate__qr {
    width: 112px;
    height: 112px;
    margin: 24px auto 0;
}

.iab-hijri-date {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em;
    direction: ltr;
    unicode-bidi: isolate;
    white-space: nowrap;
    font-family: var(--iab-hijri-date-font);
    font-weight: 400;
    letter-spacing: 0;
}

.iab-hijri-date__month {
    direction: rtl;
    unicode-bidi: isolate;
}

.iab-certificate::before,
.iab-certificate::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    pointer-events: none;
}

.iab-certificate::after {
    inset: 22px;
    border-color: rgba(0, 0, 0, 0.08);
}

.iab-certificate__header {
    margin-bottom: 24px;
}

.iab-certificate__eyebrow {
    margin: 0 0 8px;
    font-size: 0.9em;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #6b7280;
}

.iab-certificate__issuer {
    margin: 0;
    font-size: 2.4em;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.iab-certificate__lead,
.iab-certificate__body {
    margin: 18px 0;
    font-size: 1.05em;
    color: #4b5563;
}

.iab-certificate__name {
    margin: 8px 0;
    font-size: 2.8em;
    font-weight: 700;
    color: var(--iab-clr-primary, #1d4ed8);
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
    display: inline-block;
    padding: 0 40px 12px;
}

.iab-certificate__course {
    margin: 12px 0 20px;
    font-size: 1.6em;
    font-weight: 600;
}

.iab-certificate__score {
    margin: 0 auto 28px;
    font-size: 1.1em;
    color: #374151;
}

.iab-certificate__footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px dashed rgba(0, 0, 0, 0.2);
    font-size: 0.85em;
    color: #4b5563;
}

@media (max-width: 640px) {
    .iab-certificate {
        padding: 36px 20px;
    }
    .iab-certificate__name {
        font-size: 2em;
        padding: 0 12px 10px;
    }
    .iab-certificate__course {
        font-size: 1.25em;
    }
    .iab-certificate__footer {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.iab-certificate__meta-label {
    display: block;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.72em;
    color: #6b7280;
    margin-bottom: 4px;
}

.iab-certificate__meta-value {
    display: block;
    word-break: break-all;
}

.iab-certificate__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 1.05em;
    letter-spacing: 0.06em;
}

.iab-certificate__actions {
    text-align: center;
}

.iab-exam-button--ghost {
    background: rgba(255, 255, 255, 0.72);
    color: var(--iab-clr-primary, #0e5a38);
    border: 1.5px solid rgba(14, 90, 56, 0.55);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

a.iab-exam-button--ghost,
a.iab-exam-button--ghost:visited {
    color: var(--iab-clr-primary, #0e5a38) !important;
}

.iab-exam-button--ghost:hover,
a.iab-exam-button--ghost:hover,
a.iab-exam-button--ghost:focus {
    background: #ffffff;
    color: var(--iab-btn-bg-hover, #0b6b3f) !important;
    border-color: var(--iab-btn-bg-hover, #0b6b3f);
    box-shadow: 0 8px 18px rgba(8, 38, 23, 0.12);
}

.iab-exam-shell a.iab-exam-button.iab-exam-button--ghost,
.iab-exam-shell a.iab-exam-button.iab-exam-button--ghost:visited,
.iab-certificate-shell a.iab-exam-button.iab-exam-button--ghost,
.iab-certificate-shell a.iab-exam-button.iab-exam-button--ghost:visited {
    background: #f8fffb !important;
    color: var(--iab-clr-primary, #0e5a38) !important;
    border-color: rgba(14, 90, 56, 0.72) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.iab-exam-shell a.iab-exam-button.iab-exam-button--ghost:hover,
.iab-exam-shell a.iab-exam-button.iab-exam-button--ghost:focus,
.iab-exam-shell a.iab-exam-button.iab-exam-button--ghost:active,
.iab-certificate-shell a.iab-exam-button.iab-exam-button--ghost:hover,
.iab-certificate-shell a.iab-exam-button.iab-exam-button--ghost:focus,
.iab-certificate-shell a.iab-exam-button.iab-exam-button--ghost:active {
    background: var(--iab-clr-primary, #0e5a38) !important;
    color: #ffffff !important;
    border-color: var(--iab-clr-primary, #0e5a38) !important;
}

.iab-exam-button--verify,
a.iab-exam-button--verify,
a.iab-exam-button--verify:visited {
    background: var(--iab-clr-primary, #0e5a38) !important;
    color: #ffffff !important;
    border-color: var(--iab-clr-primary, #0e5a38) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

.iab-exam-button--verify:hover,
.iab-exam-button--verify:focus,
a.iab-exam-button--verify:hover,
a.iab-exam-button--verify:focus {
    background: var(--iab-btn-bg-hover, #0b6b3f) !important;
    color: #ffffff !important;
    border-color: var(--iab-btn-bg-hover, #0b6b3f) !important;
}

/* Print styles — strip chrome, reset margins so the certificate fills the page. */
@media print {
    body * { visibility: hidden !important; }
    .iab-certificate-shell,
    .iab-certificate-shell * { visibility: visible !important; }
    .iab-certificate-shell {
        position: absolute;
        inset: 0;
        margin: 0;
        padding: 0;
    }
    .iab-certificate__actions,
    .iab-exam-alert { display: none !important; }
    .iab-certificate {
        box-shadow: none;
        margin: 0;
        page-break-inside: avoid;
    }
    .iab-certificate-template {
        width: 100%;
        max-width: 100%;
        box-shadow: none;
        margin: 0;
        page-break-inside: avoid;
    }
}

/* Result-page certificate callout */
.iab-exam-result-certificate {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    border-left: 6px solid var(--iab-clr-success, #16a34a);
}

.iab-exam-result-certificate__body { flex: 1 1 320px; }
.iab-exam-result-certificate__body h3 { margin: 0 0 8px; }
.iab-exam-result-certificate__hint { margin: 4px 0 0; font-size: 0.9em; color: #4b5563; }
.iab-exam-result-certificate__actions { flex: 0 0 auto; }

/* Verification page */
.iab-verify-form {
    margin-bottom: 24px;
}

.iab-verify-result {
    padding: 28px;
}

.iab-verify-result--valid {
    border-left: 6px solid var(--iab-clr-success, #16a34a);
}

.iab-verify-result--revoked {
    border-left: 6px solid var(--iab-clr-danger, #dc2626);
}

.iab-verify-badge {
    margin-bottom: 16px;
    font-size: 1.1em;
}

.iab-verify-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 24px;
    row-gap: 10px;
    margin: 0;
}

.iab-verify-details dt {
    font-weight: 600;
    color: #4b5563;
}

.iab-verify-details dd {
    margin: 0;
    color: #111827;
    word-break: break-word;
}

@media (max-width: 520px) {
    .iab-verify-details {
        grid-template-columns: 1fr;
        row-gap: 2px;
    }
    .iab-verify-details dd {
        margin-bottom: 8px;
    }
}

/* =========================================================================
   2.1 — Mobile hardening
   ========================================================================= */

.iab-exam-shell,
.iab-exam-shell * {
    box-sizing: border-box;
}

.iab-exam-shell {
    width: min(100%, var(--iab-shell-max-width));
    overflow-wrap: break-word;
}

.iab-exam-shell img,
.iab-exam-shell svg,
.iab-exam-shell video,
.iab-exam-shell canvas,
.iab-exam-shell iframe {
    max-width: 100%;
}

.iab-exam-title,
.iab-exam-question > h3,
.iab-exam-choice-text,
.iab-exam-answer-row__value,
.iab-certificate__code,
.iab-verify-details dd,
.iab-verify-details code {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.iab-exam-stat-tile strong,
.iab-exam-result-grid > article strong {
    overflow-wrap: anywhere;
}

.iab-status-badge {
    max-width: 100%;
    white-space: normal;
    line-height: 1.2;
}

.iab-exam-question-head {
    flex-wrap: wrap;
}

.iab-exam-choice--boolean {
    grid-template-columns: 18px minmax(0, max-content);
    justify-content: center;
}

@media (max-width: 720px) {
    .iab-exam-shell {
        width: 100%;
        max-width: 100%;
    }

    .iab-exam-header {
        gap: var(--iab-sp-md);
    }

    .iab-exam-title {
        font-size: clamp(1.45rem, 7vw, 1.9rem);
        line-height: 1.12;
    }

    .iab-exam-result-certificate {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .iab-exam-result-certificate__body {
        min-width: 0;
        flex-basis: auto;
    }

    .iab-exam-result-certificate__actions {
        display: grid;
        gap: var(--iab-sp-xs);
        width: 100%;
    }

    .iab-exam-result-certificate__actions .iab-exam-button {
        width: 100%;
        white-space: normal;
    }
}

@media (max-width: 600px) {
    .iab-exam-shell {
        --iab-shell-pad: 16px;
        --iab-card-pad: 14px;
        --iab-question-pad: 16px;
        --iab-btn-pad-x: 18px;
        --iab-timer-display-size: 1.5rem;
        padding: var(--iab-shell-pad);
        border-radius: 16px;
    }

    .iab-exam-panel {
        padding: var(--iab-card-pad);
        border-radius: 12px;
    }

    .iab-exam-header {
        padding-bottom: var(--iab-sp-md);
        margin-bottom: var(--iab-sp-md);
    }

    .iab-exam-summary--exam,
    .iab-exam-summary--result {
        gap: 10px;
    }

    .iab-exam-stat-tile,
    .iab-exam-result-grid > article {
        padding: 12px 10px;
    }

    .iab-exam-stat-tile strong,
    .iab-exam-result-grid > article strong {
        font-size: 1.15rem;
    }

    .iab-exam-stat-tile span,
    .iab-exam-result-grid > article span {
        letter-spacing: 0.06em;
    }

    .iab-exam-timer {
        position: sticky;
        top: max(8px, env(safe-area-inset-top, 0px));
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .iab-exam-timer__label {
        letter-spacing: 0.06em;
    }

    .iab-exam-choice {
        grid-template-columns: 16px 24px minmax(0, 1fr);
        gap: 8px;
        padding: 11px 12px;
    }

    .iab-exam-choice--boolean {
        grid-template-columns: 16px minmax(0, 1fr);
        justify-content: stretch;
        text-align: left;
    }

    .iab-exam-choice-label {
        width: 24px;
        height: 24px;
    }

    .iab-exam-flow-nav__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    /* Reset the older broad sticky rule, then apply sticky only to real exam submissions. */
    .iab-exam-actions {
        position: static;
        bottom: auto;
        z-index: auto;
        margin: 0;
        padding: var(--iab-sp-md) 0 0;
        box-shadow: none;
    }

    .iab-exam-form:has(input[name="iab_exam_action"][value="submit_exam"]) > .iab-exam-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: var(--iab-shell-bg);
        margin: 0 calc(-1 * var(--iab-shell-pad));
        padding: var(--iab-sp-md) var(--iab-shell-pad) calc(var(--iab-sp-sm) + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--iab-clr-border);
        box-shadow: 0 -6px 14px rgba(8, 38, 23, 0.05);
    }

    .iab-certificate-shell .iab-exam-actions,
    .iab-verify-shell .iab-exam-actions {
        position: static;
        margin: 0;
        padding: var(--iab-sp-md) 0 0;
        box-shadow: none;
    }

    .iab-certificate-template {
        margin: 16px auto;
        box-shadow: 0 8px 22px rgba(8, 38, 23, 0.08);
    }

    .iab-certificate {
        margin: 16px 0;
        padding: 30px 16px;
    }

    .iab-certificate__issuer {
        font-size: clamp(1.6em, 9vw, 2.1em);
    }

    .iab-certificate__name {
        max-width: 100%;
        font-size: clamp(1.65em, 10vw, 2em);
    }

    .iab-verify-result {
        padding: 18px;
    }
}

@media (max-width: 380px) {
    .iab-exam-shell {
        --iab-shell-pad: 12px;
        --iab-card-pad: 12px;
        border-radius: 12px;
    }

    .iab-exam-title {
        font-size: 1.35rem;
    }

    .iab-exam-eyebrow {
        letter-spacing: 0.08em;
    }

    .iab-exam-eyebrow::before {
        width: 12px;
    }

    .iab-exam-stat-tile strong,
    .iab-exam-result-grid > article strong {
        font-size: 1.05rem;
    }

    .iab-exam-button {
        white-space: normal;
        min-height: 46px;
    }
}