/* ==========================================================
   Broadwater Peroxide Training Theme
   Primary: #0061AE
   Layout: top header + module cards (max tile width 300px)
   ========================================================== */

:root{
    --brand:#0061AE;
    --brand-600:#005396;
    --brand-700:#00457C;
    --brand-100:#E7F1FB;

    --text:#0F172A;
    --muted:#475569;
    --muted-2:#64748B;

    --bg:#F6F8FB;
    --surface:#FFFFFF;
    --surface-2:#F1F5F9;
    --border:#E2E8F0;

    --success:#16A34A;
    --warning:#F59E0B;
    --danger:#DC2626;
    --info:#0EA5E9;

    --shadow-sm:0 1px 2px rgba(2,8,23,.06);
    --shadow-md:0 10px 25px rgba(2,8,23,.08);
    --shadow-lg:0 18px 55px rgba(2,8,23,.12);

    --radius-sm:10px;
    --radius-md:14px;
    --radius-lg:18px;

    --maxw:1200px;

    --focus:0 0 0 4px rgba(0,97,174,.22);
}

/* ---------- Base ---------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text);
    background:var(--bg);
    line-height:1.5;
}

a{ color:var(--brand); text-decoration:none; }
a:hover{ text-decoration:underline; }

img{ max-width:100%; height:auto; display:block; }

/* ---------- Layout ---------- */
.wrapper{
    max-width:var(--maxw);
    margin:0 auto;
    padding:24px 18px;
}

@media (max-width: 640px){
    .wrapper{ padding:18px 14px; }
}

/* ---------- Header (top header only) ---------- */
header{
    position: sticky;
    top:0;
    z-index: 50;
    background:rgba(255,255,255,.88);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border);
    padding:16px 18px;
}

header h1{
    margin:0;
    font-size:1.25rem;
    font-weight:800;
    letter-spacing:-.02em;
    display:flex;
    align-items:center;
    gap:10px;
}

header h1::before{
    content:"";
    width:10px;
    height:26px;
    border-radius:999px;
    background:var(--brand);
    box-shadow:var(--shadow-sm);
}

header .header-row{
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Left + Right take equal space so the center stays centered */
header .header-left,
header .header-right{
    flex: 1 1 0;
    display: flex;
    align-items: center;
}

/* Logos on the left */
header .header-left{
    justify-content: flex-start;
    gap: 12px;
}

/* Center column */
header .header-center{
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Actions on the right */
header .header-right{
    justify-content: flex-end;
}

/* Optional: tidy logo scaling */
header .header-left img{
    height: 44px;      /* consistent height */
    width: auto;       /* maintain aspect ratio */
    display: block;
}

/* Optional: make the title behave nicely */
header .header-center h1{
    margin: 0;
    line-height: 1;
    white-space: nowrap;
}

.header-actions{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.header-user{
    color:var(--muted-2);
    font-weight:400;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

/* ---------- Top nav ---------- */
.top-nav{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

.top-nav a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:2px 10px;
    border-radius:4px;
    border:1px solid var(--border);
    background:rgba(255,255,255,0.6);
    color:var(--text);
    text-decoration:none;
    font-weight:400;
    box-shadow:var(--shadow-sm);
}

.top-nav a:hover{
    background:var(--surface-2);
    text-decoration:none;
}

.top-nav a.is-active{
    border-color:rgba(0,97,174,0.28);
    background:rgba(0,97,174,0.10);
    color:var(--brand-700);
}

.top-nav a i.ph{
    color:var(--brand);
    font-size:1.1em;
}

/* ---------- Page header ---------- */
.page-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.page-head h2{
    margin:0;
    font-size:1.25rem;
    letter-spacing:-.02em;
}

.page-head p{
    margin:6px 0 0;
    color:var(--muted);
}

/* ---------- Buttons ---------- */
button,
input[type="button"],
input[type="submit"],
.btn{
    appearance:none;
    border:1px solid transparent;
    border-radius:4px;
    padding:10px 14px;
    background:var(--brand);
    color:#fff;
    font-weight:400;
    cursor:pointer;
    box-shadow:var(--shadow-sm);
    transition:transform 120ms ease, background 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    line-height:1.1;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.btn:hover{
    background:var(--brand-600);
    transform:translateY(-1px);
    box-shadow:var(--shadow-md);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active,
.btn:active{
    transform:translateY(0);
    box-shadow:var(--shadow-sm);
}

button:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
.btn:focus{
    outline:none;
    box-shadow:var(--focus);
}

.btn-secondary{
    background:var(--surface);
    border-color:var(--border);
    color:var(--text);
}
.btn-secondary:hover{ background:var(--surface-2); }

.btn-danger{ background:var(--danger); }
.btn-danger:hover{ background:#B91C1C; }

.btn-sm{
    padding:7px 10px;
    border-radius:10px;
    font-size:.92rem;
}

/* Disabled buttons */
button:disabled,
.btn:disabled{
    opacity:0.7;
    cursor:not-allowed;
}

/* ---------- Forms ---------- */
label{
    color:var(--text);
    font-weight:700;
    display:inline-block;
    margin-bottom:6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea{
    width:100%;
    max-width:520px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    box-shadow:0 1px 0 rgba(2,8,23,.03);
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:rgba(0,97,174,.55);
    box-shadow:var(--focus);
}

.form-row{ margin-bottom:14px; }

/* ---------- Alerts ---------- */
.alert{
    padding:12px 14px;
    border-radius:12px;
    border:1px solid var(--border);
    background:var(--surface);
    box-shadow:var(--shadow-sm);
    color:var(--text);
}

.alert-info{ border-color:rgba(14,165,233,.35); background:rgba(14,165,233,.10); }
.alert-success{ border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.10); }
.alert-warning{ border-color:rgba(245,158,11,.35); background:rgba(245,158,11,.12); }
.alert-danger{ border-color:rgba(220,38,38,.35); background:rgba(220,38,38,.10); }

/* ---------- Cards ---------- */
.card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:16px;
}

.card + .card{ margin-top:16px; }

/* ---------- Module dashboard (tiles max 300px wide) ---------- */
.modules-grid{
    display:grid;
    gap:16px;
    margin-top:16px;

    /* Max 300px tile width */
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px));

    /* Center the grid when there is extra space */
    justify-content:center;
}

.module-card{
    width:100%;
    max-width:300px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-md);
    position:relative;
    display:flex;
    flex-direction:column;
    min-height: 300px;
}

/* Hero: your images are 300x320 — keep them crisp */
.module-hero{
    height: 190px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top center;
    background-color: #0b1220;
    position:relative;
}

.module-hero::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(2,8,23,.05) 0%, rgba(2,8,23,.70) 100%);
}

.module-body{
    padding:14px 16px 16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
}

.module-title{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.module-title h3{
    margin:0;
    font-size:1.05rem;
    letter-spacing:-.02em;
    line-height:1.2;
}

.module-title h3 i.ph{
    color:var(--brand);
    margin-right:6px;
}

.module-desc{
    margin:0;
    color:var(--muted);
    font-size:0.95rem;
}

.module-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--muted-2);
    font-weight:400;
    font-size:.92rem;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(0,97,174,.12);
    color:var(--brand-700);
    border:1px solid rgba(0,97,174,.18);
    font-weight:400;
    font-size: 11px;
    white-space:nowrap;
}

/* Progress bar */
.progress{
    height:10px;
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:999px;
    overflow:hidden;
}

.progress > span{
    display:block;
    height:100%;
    width:0%;
    background: linear-gradient(90deg, var(--brand) 0%, #2B8CE6 100%);
}

/* Actions */
.module-actions{
    margin-top:auto;
    display:flex;
    gap:10px;
}

.module-actions .btn{
    width:100%;
}

/* Locked overlay */
.module-card.is-locked{
    filter: grayscale(.15);
}

.module-lock{
    position:absolute;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(2,8,23,.62);
    backdrop-filter: blur(2px);
    z-index:5;
}

.module-card.is-locked .module-lock{
    display:flex;
}

.module-lock .lock-inner{
    text-align:center;
    color:#fff;
    padding:14px 16px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(2,8,23,.35);
    box-shadow: var(--shadow-lg);
    max-width: 260px;
}

.module-lock i.ph{
    font-size: 2.2rem;
    margin-bottom: 6px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,.35));
}

/* ---------- Tables ---------- */
.table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
}

.table th,
.table td{
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    text-align:left;
}

.table th{
    background:var(--surface-2);
    font-weight:800;
}

.table tr:last-child td{ border-bottom:0; }

/* ---------- Phosphor icons ---------- */
i.ph{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    vertical-align:-0.12em;
    font-size:1.1em;
}

/* ---------- Snackbar (your JS uses #snackbar) ---------- */
#snackbar{
    visibility:hidden;
    min-width:260px;
    max-width:min(520px, calc(100vw - 40px));
    background:rgba(15,23,42,.92);
    color:#fff;
    border-radius:14px;
    padding:12px 14px;
    position:fixed;
    z-index:9999;
    left:50%;
    bottom:26px;
    transform:translateX(-50%);
    box-shadow:var(--shadow-lg);
    border:1px solid rgba(255,255,255,.12);
}

#snackbar.show{
    visibility:visible;
    animation: snack-in 220ms ease-out, snack-out 220ms ease-in 2.8s;
}

@keyframes snack-in{
    from{ transform:translate(-50%, 10px); opacity:0; }
    to{ transform:translate(-50%, 0); opacity:1; }
}

@keyframes snack-out{
    from{ transform:translate(-50%, 0); opacity:1; }
    to{ transform:translate(-50%, 10px); opacity:0; }
}

/* ==========================================================
   FIX: legacy dashboard tiles -> max 300px and grid layout
   Applies to current markup: .peroxide_wrapper > .step_container > .step
   ========================================================== */

.peroxide_wrapper{
    display: grid;
    gap: 16px;
    margin-top: 16px;

    /* tiles sized 260–300px, auto-wrap into a grid */
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px));

    /* center the grid when there is spare space */
    justify-content: center;
}

/* each tile constrained to 300px */
.step_container{
    width: 100%;
    max-width: 300px;
}

/* stop the background image repeating across the whole row */
.step{
    width: 100%;
    max-width: 300px;          /* belt-and-braces */
    background-repeat: no-repeat !important;
    background-position: center top !important;

    /* choose ONE of these depending on look you prefer */

    /* Option A (recommended): fill the tile nicely (may crop edges) */
    background-size: cover !important;

    /* Option B: show the entire image (no cropping, may leave empty space) */
    /* background-size: contain !important;
       background-color: #0b1220; */
}
/* ==========================================================
   Locked overlay (Phosphor) for legacy tiles
   Markup: .step_container > .step_overlay
   ========================================================== */

.step_container{
    position: relative; /* REQUIRED so overlay positions over tile */
}

/* Full overlay layer */
.step_overlay{
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(2, 8, 23, 0.62);
    backdrop-filter: blur(2px);

    border-radius: 18px; /* matches your tile radius */
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 10px 25px rgba(2,8,23,.25);
}

/* Inner panel */
.step_overlay .lock_inner{
    text-align: center;
    color: #fff;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(2,8,23,0.35);
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 18px 55px rgba(2,8,23,.35);
    max-width: 240px;
}

/* Icon */
.step_overlay .lock_inner i.ph{
    font-size: 2.4rem;
    line-height: 1;
    display: block;
    margin-bottom: 8px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.35));
}

/* Text */
.step_overlay .lock_title{
    font-weight: 900;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
}

.step_overlay .lock_sub{
    font-weight: 700;
    opacity: 0.92;
    font-size: 0.95rem;
}

.step{
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    min-height: 260px; /* ensures there is something to overlay */
}
/* ==========================================================
   Legacy tiles: improve typography + add real progress bar
   Applies to: .step_container / .step markup
   ========================================================== */

/* Make the tile a predictable layout and ensure overlay stacking works */
.step_container { position: relative; }

.step{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    min-height: 320px;
    display: flex;
    flex-direction: column;

    /* your tiles are max 300 wide already; keep background nice */
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important; /* switch to contain if you prefer */
}

/* Add a dark gradient so text is readable on any image */
.step::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
            180deg,
            rgba(2,8,23,0.10) 0%,
            rgba(2,8,23,0.35) 38%,
            rgba(2,8,23,0.85) 100%
    );
    pointer-events:none;
    z-index:0;
}

/* Ensure tile content sits above gradient */
.step > *{
    position: relative;
    z-index: 1;
}

/* Title area */
.step .title{
    padding: 14px 14px 6px 14px;
}

.step .title h3{
    margin: 0;
    color: #fff;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}

/* Description */
.step .content{
    padding: 0 14px 10px 14px;
}

.step .descr{
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    text-shadow: 0 2px 14px rgba(0,0,0,0.35);

    /* prevent huge blocks making tiles uneven */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Progress bar with % label inside */
.progressbar{
    margin: 10px 14px 0 14px;
    height: 16px;
    border-radius: 999px;
    background: #87A3AA;
    border: 1px solid rgba(255,255,255,0.20);
    overflow: hidden;
    position: relative;
}

.progressbar_fill{
    position:absolute;
    inset:0;
    width:0%;
    background: linear-gradient(90deg, var(--brand) 0%, #2B8CE6 100%);
}

.progressbar_label{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Duration line (with icon) */
.step .duration{
    margin: 10px 14px 0 14px;
    display:flex;
    align-items:center;
    gap: 8px;
    color: rgba(255,255,255,0.90);
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.step .duration i.ph{
    font-size: 1.05rem;
    color: rgba(255,255,255,0.95);
}

/* Footer button area */
.step .footer{
    margin-top: auto;
    padding: 14px;
}

.step .footer input.button {
    width: 100%;
    border: 0;
    border-radius: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--brand-700);
}
/* ==========================================================
   NEW tile styling (step tiles)
   Goal: progress + duration pinned to bottom of tile
   ========================================================== */

.step_container{
    position: relative;
    width: 100%;
    max-width: 300px;
}

/* Make the tile a vertical layout */
.step{
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    min-height: 340px;

    display: flex;
    flex-direction: column;

    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important; /* change to contain if you prefer */
}

/* Readability overlay */
.step::after{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
            180deg,
            rgba(2,8,23,0.10) 0%,
            rgba(2,8,23,0.28) 35%,
            rgba(2,8,23,0.88) 100%
    );
    pointer-events:none;
    z-index:0;
}

/* Ensure content is above overlay */
.step > *{
    position: relative;
    z-index: 1;
}

/* Title */
.step .title{
    padding: 14px 14px 6px 14px;
}

.step .title h3{
    margin: 0;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 14px rgba(0,0,0,0.45);
}

/* Description (flexes) */
.step .content{
    padding: 0 14px 10px 14px;
    /* This makes the content area take available height,
       so meta + footer can sit at the bottom */
    flex: 1 1 auto;
}

.step .descr{
    margin: 0;
    color: rgba(255,255,255,0.88);
    font-weight: 650;
    font-size: 0.95rem;
    line-height: 1.35;
    text-shadow: 0 2px 14px rgba(0,0,0,0.35);

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Bottom meta wrapper: pinned above the footer */
.tile_meta_bottom{
    margin-top: auto;          /* <-- pins this block to the bottom */
    padding: 0 14px 10px 14px; /* space above footer */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Progress bar with % label inside */
.progressbar{
    height: 24px;
    border-radius: 999px;
    background: #87A3AA;
    border: 1px solid rgba(255,255,255,0.20);
    overflow: hidden;
    position: relative;
}

.progressbar_fill{
    position:absolute;
    inset:0;
    width:0%;
    background: linear-gradient(90deg, var(--brand) 0%, #2B8CE6 100%);
}

.progressbar_label{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

/* Duration line */
.step .duration {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.90);
    font-weight: 850;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
/* ==========================================================
   Step/Lesson pages (new system)
   ========================================================== */
.lesson_shell{
    display:flex;
    justify-content:center;
    margin-top: 12px;
}

.lesson_card{
    width: min(980px, 100%);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;

    display: flex;
    flex-direction: column;
    min-height: 575px;
}

.lesson_top{
    padding: 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(0,97,174,.06), rgba(255,255,255,0));
}

.lesson_kicker{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom: 8px;
}

.lesson_h2{
    margin: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.lesson_sub{
    margin: 8px 0 0;
    color: var(--muted);
    font-weight: 600;
}

.lesson_content{
    padding: 16px;
}
.lesson_hero_wrap{
    border-radius: 16px;
    overflow: hidden;               /* ensures the crop follows the radius */
    box-shadow: var(--shadow-sm);   /* shadow follows the rounded shape */
}

.lesson_hero{
    width: 100%;
    height: 600px;

    background-image: url('/assets/images/step1_0.jpg'); /* optional if inline */
    background-size: cover;          /* crop to fill */
    background-position: left bottom;/* align bottom-left */
    background-repeat: no-repeat;

    /* optional: fallback fill while image loads */
    background-color: #fff;
}


.lesson_img{
    width: 100%;
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
}

.lesson_video_wrap{
    display:flex;
    justify-content:center;
}

.lesson_video{
    width: min(900px, 100%);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    background: #000;
    max-height: 500px;
}

.lesson_note{
    margin: 12px 0 0;
    color: var(--muted);
    font-weight: 600;
    text-align: center;
}

.lesson_html p{
    color: var(--muted);
}

.lesson_controls{
    margin-top: auto;
    padding: 16px;
    border-top: 1px solid var(--border);
    display:grid;
    grid-template-columns: 1fr minmax(200px, 420px) 1fr;
    gap: 12px;
    align-items:center;
}

.lesson_controls_left{ display:flex; justify-content:flex-start; }
.lesson_controls_right{ display:flex; justify-content:flex-end; }

.lesson_controls_middle .progressbar{
    margin: 0;
    height: 24px;
}

@media (max-width: 760px){
    .lesson_controls{
        grid-template-columns: 1fr;
    }
    .lesson_controls_left,
    .lesson_controls_right{
        justify-content: center;
    }
}
/* Step page internal two-column layout (used in steps.php HTML) */
.step_layout{
    display: grid;
    grid-template-columns: 2fr 3fr; /* ~40/60 */
    gap: 16px;
    align-items: start;
}

.step_col{ min-width: 0; }

.step_img{
    width: 100%;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 10px;
}

.step_text{
    color: var(--muted);
    font-weight: 600;
    line-height: 1.45;
}

.step_text_strong{
    color: var(--text);
    font-weight: 700;
}

@media (max-width: 760px){
    .step_layout{ grid-template-columns: 1fr; }
}
.complete_hero_wrap{
    border-radius: 16px;
    overflow: hidden;               /* clips image + overlay to radius */
    box-shadow: var(--shadow-sm);   /* shadow follows radius */
}

.complete_hero{
    height: 600px;
    position: relative;

    background-size: cover;         /* crop to fill */
    background-position: left bottom; /* ✅ bottom-left anchor */
    background-repeat: no-repeat;
}

/* overlay */
.complete_hero::after{
    content:"";
    position:absolute;
    inset:0;
    background: rgba(2,8,23,0.45);
    z-index: 0;
    pointer-events: none;
}

/* badge */
.complete_badge{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;

    z-index: 1;
    color:#fff;
    font-weight: 950;
    letter-spacing: 0.08em;
    font-size: 2.4rem;
    text-shadow: 0 12px 35px rgba(0,0,0,0.45);
}


/* Center media (e.g., an image) inside the right column */
.step_col_media_center{
    display: flex;
    flex-direction: column;
    align-items: center;   /* centers children horizontally */
}

/* Optional: ensure images don't exceed column width */
.step_col_media_center img{
    max-width: 100%;
    height: auto;
}
/* ==========================================================
   Gallery interaction (polished + aligned)
   Used by step.php for type === 'gallery'
   ========================================================== */

.gallery{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Frame container */
.gallery_frame{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}

/* Image */
.gallery_img{
    display: block;
    /*width: calc(100% - 100px);*/
    height: auto;
    margin: 0 auto;
    user-select: none;
    -webkit-user-drag: none;
    cursor: pointer; /* indicates interaction */
    background: #fff; /* helpful if PNG has transparent areas */
}

/* Navigation buttons */
.gallery_btn{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.22);
    background: rgba(2,8,23,0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(2px);
    transition: transform 120ms ease, background 120ms ease, opacity 120ms ease;
}

.gallery_btn i.ph{
    font-size: 1.25rem;
    line-height: 1;
}

.gallery_btn:hover{
    background: rgba(2,8,23,0.72);
    transform: translateY(-50%) scale(1.03);
}

.gallery_btn:active{
    transform: translateY(-50%) scale(0.98);
}

.gallery_btn:disabled{
    opacity: 0.35;
    cursor: not-allowed;
    transform: translateY(-50%);
}

.gallery_btn_left{ left: 12px; }
.gallery_btn_right{ right: 12px; }

/* Put 1/4 ABOVE the instruction text */
.gallery_meta{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
}

.gallery_counter{
    order: 1;
    justify-self: auto;   /* neutralise previous grid settings */
    text-align: center;
}

.gallery_text{
    order: 2;
    justify-self: auto;   /* neutralise previous grid settings */
    text-align: center;
    max-width: 740px;
    font-weight: 600;
}

.gallery_spacer{
    display: none;        /* no longer needed */
}




/* Mobile: stack counter above text, keep arrows slightly smaller */
@media (max-width: 760px){
    .gallery_meta{
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 8px;
        padding: 0;
    }

    .gallery_counter{ justify-self: center; }

    .gallery_btn{
        width: 42px;
        height: 42px;
    }
}

/* Optional: if you want a subtle hint under the image area */
.gallery_hint{
    margin-top: 6px;
    color: var(--muted-2);
    font-weight: 650;
    text-align: center;
}

.data_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 8px;
    background: var(--surface-2);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    font-size: 1rem;
}
.data_table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.data_table tr:last-child td { border-bottom: 0; }
.data_table .first {
    font-weight: 800;
    background: var(--surface);
    min-width: 120px;
}
.data_table .rest {
    color: var(--text);
    font-weight: 600;
    position: relative;
    cursor: pointer;
    transition: background 120ms;
}
.data_table .hint-hover {
    background: #E6F6FB;
}
.data_table .rest.hint-hover:hover,
.data_table .first.hint-hover:hover {
    background: #B6E3F7;
}

.hint_box {
    position: absolute;
    z-index: 100;
    min-width: 220px;
    max-width: 340px;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 14px 16px;
    font-size: 1rem;
    pointer-events: none;
    opacity: 0.97;
    transition: opacity 120ms;
    line-height: 1.45;
}
.hint_box h2 {
    margin: 0 0 6px 0;
    font-size: 1.08rem;
    font-weight: 900;
    color: var(--brand);
}
.hint_box p {
    margin: 0;
    color: var(--muted);
}
.firstaid_icons{
    display: grid;
    grid-template-columns: repeat(2, 150px);
    gap: 12px;
    justify-content: center;
}

.fa_icon{
    width: 150px;
    height: 150px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.fa_icon i.ph{ font-size: 1.6rem; }

.fa_icon:hover{
    background: #FFF;
    border-color: rgba(0,97,174,0.25);
}
/* ==========================================================
   Multi-gallery (two clickable images/galleries on one step)
   Used by type === 'multi_gallery'
   ========================================================== */

.multi_gallery{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.multi_gallery_grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    margin-top: 8px;
}

/* Make each gallery feel like a card */
.gallery_compact{
    background: var(--surface-2);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery_compact .gallery_frame{
    margin-bottom: 8px;
}

.gallery_compact .gallery_meta{
    margin-top: 0;
}

/* On small screens stack vertically */
@media (max-width: 760px){
    .multi_gallery_grid{
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
/* ==========================================================
   YES/NO scenario layout
   - Question on the left
   - Buttons below
   - Image on the right
   ========================================================== */

.yesno_grid{
    display: grid;
    grid-template-columns: 360px 1fr; /* left fixed, right flexible */
    gap: 18px;
    align-items: start;
}

/* Left side becomes a vertical stack */
.yesno_left{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Buttons stacked (or make them side-by-side if you prefer) */
.yesno_buttons{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
}

/* Make buttons full width for a clear choice UI */
.yesno_btn{
    width: 100%;
    justify-content: center;
}

/* Selected state */
.yesno_btn.is-selected{
    box-shadow: var(--focus);
    outline: none;
}

/* Feedback block */
.yesno_feedback{
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2);
}

.yesno_feedback_title{
    font-weight: 900;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.yesno_feedback_body p{
    margin: 0 0 10px;
    color: var(--muted);
    font-weight: 650;
}
.yesno_feedback_body p:last-child{
    margin-bottom: 0;
}

/* Right side image */
.yesno_right{
    min-width: 0;
}

.yesno_img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

/* Optional: if you want image not too huge */
.yesno_right .yesno_img{
    max-height: 520px;
    object-fit: contain; /* or 'cover' if you want it to fill */
    background: #0b1220;
}

/* Mobile: stack */
@media (max-width: 900px){
    .yesno_grid{
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   Exam question layout
   ========================================================== */

/* Optional: constrain width so it's not too wide */
.exam_full{
    width: 90%;
}
#examForm {
    margin: 12px;
    width: 100%;
}

/* Stack all answer options vertically */
.exam_options{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

/* Each option = full-width clickable card */
.exam_option{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 150ms ease;
    font-weight: 400;
}

/* Make entire label clickable (input hidden visually but functional) */
.exam_option input{
    margin-right: 10px;
}

/* Hover effect */
.exam_option:hover{
    background: var(--brand-100);
    border-color: rgba(0,97,174,0.25);
}

/* Selected state */
.exam_option input:checked + span{
    font-weight: 500;
}

.exam_option input:checked{
    accent-color: var(--brand);
}

/* Optional stronger highlight for selected option */
.exam_option:has(input:checked){
    border-color: var(--brand);
    box-shadow: var(--focus);
}
#examForm #submitBtn{
    margin-top: 12px;

}