/*
 * Free public mock exam (/test-bhp-probny).
 *
 * Shared by the start screen, the exam itself and the result page. Kept in its own file
 * rather than inline <style> blocks so the three views stay consistent and the browser
 * can cache it between them - a visitor loads all three in one sitting.
 */

/*
 * The exam and result screens sit on the same tint as the start screen and run nearly the full
 * width of the window, like it. A narrow 800px column meant a bilingual question and its four
 * options did not fit on one screen, so the visitor scrolled to answer every single question.
 */
.mock-container { max-width: 1400px; margin: 0 auto; }
.mock-exam-section { background: #f6f8fd; padding-bottom: 34px; }
.mock-exam-section > .container { max-width: 100%; padding-left: 30px; padding-right: 30px; }

/* ---------- Disclaimer (carried over from the old practice page) ---------- */
.practice-disclaimer {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
    border-left: 5px solid #ca8a04;
    padding: 20px 25px;
    border-radius: 0 12px 12px 0;
    margin-bottom: 30px;
}
.practice-disclaimer p { font-size: 14px; color: #713f12; line-height: 1.6; font-weight: 600; margin: 0; }

/* ---------- Start screen ---------- */
.mock-start-card {
    background: #fff;
    border: 1px solid #e8eaf0;
    border-radius: 16px;
    padding: 35px;
}
.mock-start-title { font-size: 24px; font-weight: 800; color: #1a1f4e; margin-bottom: 10px; }
.mock-start-intro { font-size: 15px; color: #555; line-height: 1.65; margin-bottom: 25px; }

.mock-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}
.mock-fact {
    background: #f5f7fc;
    border: 1px solid #e8eaf0;
    border-radius: 12px;
    padding: 18px 10px;
    text-align: center;
}
.mock-fact-num { font-size: 26px; font-weight: 800; color: #242f67; line-height: 1.1; }
.mock-fact-label { font-size: 12px; color: #666; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.5px; }

.mock-rules-title { font-size: 17px; font-weight: 700; color: #1a1f4e; margin-bottom: 12px; }
.mock-rules { list-style: none; padding: 0; margin: 0 0 30px; }
.mock-rules li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 11px;
    font-size: 14.5px;
    color: #444;
    line-height: 1.6;
}
.mock-rules li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: #22c55e;
    font-weight: 800;
}

.mock-start-form { border-top: 1px solid #e8eaf0; padding-top: 25px; }
.mock-label { display: block; font-size: 15px; font-weight: 700; color: #1a1f4e; margin-bottom: 4px; }
.mock-label + .mock-label-help { margin-top: 0; }
.mock-label-help { font-size: 13px; color: #777; line-height: 1.55; margin-bottom: 12px; }
.mock-select {
    width: 100%;
    padding: 13px 16px;
    border: 2px solid #e8eaf0;
    border-radius: 10px;
    font-size: 15px;
    color: #333;
    background-color: #fff;
}
.mock-select:focus { border-color: #242f67; outline: none; box-shadow: none; }
.mock-start-btn { display: inline-block; margin-top: 20px; border: none; cursor: pointer; }
.mock-start-note { font-size: 13px; color: #777; margin-top: 14px; }

/* ---------- Start screen, built to look like the real exam ----------
 *
 * Two things were wrong with the old start screen. The headline and the thing that actually
 * starts the test were separate page sections, so the language picker and the Start button sat
 * below the fold behind four stat tiles and six rules - and it looked nothing like the exam it
 * is meant to rehearse.
 *
 * So this is the course player's quiz start screen (course_player/quiz/index.blade.php) rebuilt
 * for a public page: one white card, an underlined title, "label : value" fact rows, the same
 * flag tiles for the language and the same #2f57ef accent. Everything needed to begin fits on
 * one screen; the rules fold away underneath.
 */
/* Bootstrap's .container tops out at 1140px, which left the card floating in the middle of a
   wide screen, so the section carries no container at all - the card is the viewport. */
.mock-start-section { background: #f6f8fd; padding: 0; }
.mock-exam-card {
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e0e4eb;
    border-radius: 16px;
    padding: 15px 30px 25px;
    box-shadow: 0 6px 26px rgba(25, 35, 53, 0.06);
}

/* The exam's .quiz-title: centred, 600, with the same #C3C9DA rule under it. */
.mock-quiz-title {
    font-size: 24px;
    font-weight: 600;
    color: #192335;
    text-align: center;
    line-height: 1.35;
    margin: 0 0 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #c3c9da;
}
.mock-quiz-title .highlight { color: #2f57ef; }
.mock-quiz-lead {
    font-size: 15px;
    font-weight: 500;
    color: #6e798a;
    text-align: center;
    line-height: 1.6;
    margin: 0 auto 18px;
    max-width: 760px;
}

/*
 * The four facts, as tiles.
 *
 * These replaced the exam's "Duration : 15 min" label/value rows. On the course player those
 * rows sit in a sidebar next to the thing you came for; here they ARE the pitch - ten questions,
 * thirty minutes, sixty percent, nothing to pay - so they are set to be read across in one
 * glance rather than scanned down a column.
 *
 * The card no longer splits into two columns. That split existed only to keep the tall language
 * picker from pushing Start below the fold, and the picker is a dialog now.
 */
.mock-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin: 0 0 4px;
}
.mock-fact {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 18px 12px;
    border: 1px solid #e6eaf3;
    border-radius: 12px;
    background: #f8faff;
    text-align: center;
}
.mock-fact-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: #2f57ef;
}
.mock-fact-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #6e798a;
}

.mock-lang-fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.mock-lang-title {
    float: none;
    width: auto;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: #192335;
    margin-bottom: 4px;
}
.mock-lang-help {
    font-size: 13.5px;
    color: #6e798a;
    line-height: 1.55;
    margin: 0 0 14px;
}

/*
 * The language dialog.
 *
 * Everything here is opt-in: the .mock-modal class is added by script, so with JavaScript off
 * #mock-lang-modal is an ordinary block under the card - tiles visible, no backdrop, no second
 * button - and the Start button in the card submits the form the old way. With script, the
 * panel becomes a centred dialog that only opens once Start has been pressed.
 */
.mock-modal-backdrop,
.mock-modal-close,
.mock-modal-actions { display: none; }

.mock-modal {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mock-modal.is-open { display: flex; }
.mock-modal .mock-modal-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(25, 35, 53, 0.55);
}
.mock-modal .mock-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 20px 60px rgba(25, 35, 53, 0.28);
}
.mock-modal .mock-modal-close {
    display: block;
    position: absolute;
    top: 10px;
    right: 14px;
    border: 0;
    background: none;
    font-size: 30px;
    line-height: 1;
    color: #6e798a;
    cursor: pointer;
    padding: 4px 8px;
}
.mock-modal .mock-modal-close:hover { color: #192335; }
.mock-modal .mock-modal-actions { display: block; margin-top: 18px; }
.mock-modal .mock-modal-actions .mock-start-btn { width: 100%; }

/*
 * Flag tiles. Radios with the input visually hidden rather than clickable divs, so the choice
 * works with JavaScript off and the group is a real radio group for keyboard and screen-reader
 * users.
 */
.mock-lang-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 4px;
}
.mock-lang-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 10px;
    border: 2px solid #e0e4eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0;
    background: #fff;
}
.mock-lang-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.mock-lang-flag {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-bottom: 7px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.mock-lang-name { font-weight: 600; color: #192335; font-size: 14px; }
.mock-lang-option:hover { border-color: #2f57ef; background: #f8f9ff; transform: translateY(-3px); }
/* .selected is set by the script in the view; :has() covers browsers that never run it and the
   first paint before it does. Same rules on both, so they cannot disagree. */
.mock-lang-option:has(input:checked),
.mock-lang-option.selected {
    border-color: #2f57ef;
    background: #f0f4ff;
    box-shadow: 0 4px 15px rgba(47, 87, 239, 0.2);
}
.mock-lang-option:has(input:focus-visible) { outline: 2px solid #2f57ef; outline-offset: 3px; }

/* Centred, because the card is one column now and these two buttons are its focal point. */
.mock-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
/*
 * Both buttons are sized here rather than left to .eBtn, so the submit <button> and the
 * <a> next to it end up exactly the same height and their labels sit on the same line -
 * a button and a link do not agree on line-height or vertical padding on their own.
 */
.mock-actions .eBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    box-shadow: none;
}
.mock-actions .mock-start-btn { cursor: pointer; }
/* The exam's outline button. .gradient-border in style.css is a wrapper, not a button, so the
   flat blue-outline variant the course player uses is spelled out here. */
.mock-btn-outline {
    background: #fff;
    border: 2px solid #2f57ef;
    color: #2f57ef;
    transition: 0.3s;
}
.mock-btn-outline:hover,
.mock-btn-outline:focus { background: #2f57ef; color: #fff; }
.mock-exam-card .mock-start-note { font-size: 13px; color: #6e798a; margin: 12px 0 0; text-align: center; }

.mock-card-disclaimer {
    background: #fefce8;
    border-left: 4px solid #ca8a04;
    border-radius: 0 10px 10px 0;
    padding: 11px 16px;
    margin-bottom: 14px;
}
.mock-card-disclaimer p {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #713f12;
    line-height: 1.55;
    text-align: center;
}

/* Sits under the buttons now, so it gets a rule above it to separate the small print from
   the call to action, and its summary centres with everything else. */
.mock-rules-toggle { margin-top: 20px; border-top: 1px solid #eef0f6; padding-top: 6px; }
.mock-rules-toggle > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14.5px;
    font-weight: 600;
    color: #2f57ef;
    padding: 8px 0;
}
.mock-rules-toggle > summary::-webkit-details-marker { display: none; }
.mock-rules-toggle > summary::before {
    content: "\25B8";
    transition: transform 0.15s ease;
}
.mock-rules-toggle[open] > summary::before { transform: rotate(90deg); }
.mock-rules-toggle > summary:focus-visible { outline: 2px solid #2f57ef; outline-offset: 3px; }
.mock-rules-toggle .mock-rules { margin: 6px 0 0; }
.mock-rules-toggle .mock-rules li { color: #6e798a; font-size: 13.5px; margin-bottom: 8px; }

/* The tiles used to stretch to six across on a wide screen, which made sense when they ran the
   full width of the card. Inside a 620px dialog that would give "Українська" about 85px, so
   they stay at three across and two rows regardless of how wide the window is. */

@media (max-width: 575px) {
    /* Four tiles across is too narrow to read once "0 PLN" has to wrap. */
    .mock-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .mock-fact { padding: 14px 10px; }
    .mock-fact-value { font-size: 22px; }
}

@media (max-width: 767px) {
    .mock-exam-card { padding: 15px 18px 20px; }
    .mock-quiz-title { font-size: 20px; }
    .mock-lang-flag { width: 34px; height: 34px; }
    .mock-lang-name { font-size: 12px; }
    .mock-actions { flex-direction: column; gap: 10px; }
    .mock-actions .eBtn { width: 100%; text-align: center; }
    .mock-modal .mock-modal-panel { padding: 24px 18px; }
}

/* ---------- Timer bar ---------- */
/*
 * The site header (components/bhp/header.blade.php) is itself sticky at top:0 with
 * z-index 1000. A timer bar also pinned to top:0 therefore scrolled straight underneath
 * it and vanished - on a timed exam the clock is the one thing that must stay visible.
 *
 * So it stacks below the header instead: --bhp-header-h is measured from the real header
 * element at runtime and kept up to date on resize, because the header grows a row on
 * narrow screens and a hard-coded offset would be wrong on mobile. The fallback in the
 * var() keeps this sane if the script has not run yet.
 */
.mock-timer-bar {
    position: sticky;
    top: var(--bhp-header-h, 64px);
    z-index: 900;
    background: #fff;
    border-bottom: 1px solid #e8eaf0;
    box-shadow: 0 2px 10px rgba(26, 31, 78, 0.06);
    padding: 12px 0;
    margin-bottom: 25px;
}
.mock-timer-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 0 15px;
    flex-wrap: wrap;
}
.mock-timer {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #2f57ef;
    background: #f0f4ff;
    border-radius: 8px;
    padding: 6px 14px;
}
.mock-timer.warning { color: #b45309; background: #fffbeb; }
.mock-timer.danger  { color: #991b1b; background: #fef2f2; }
.mock-timer-label { font-size: 12px; color: #6e798a; text-transform: uppercase; letter-spacing: 0.5px; }
.mock-timer-progress { font-size: 14px; font-weight: 600; color: #192335; }

.q-progress { background: #e0e4eb; border-radius: 20px; height: 10px; overflow: hidden; flex-basis: 100%; }
.q-progress-bar {
    background: linear-gradient(to right, #2f57ef 0%, #c664ff 100%);
    height: 100%;
    border-radius: 20px;
    transition: width 0.35s ease;
}

/* ---------- Question cards ---------- */
.mock-q {
    background: #fff;
    border: 1px solid #e0e4eb;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: 0 6px 26px rgba(25, 35, 53, 0.06);
}
.mock-q.d-none { display: none; }
/* Category and "Question 1 / 10" share one line - they are both labels for the same card and
   stacking them cost two lines above every question. Wraps on a narrow screen. */
.mock-q-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-bottom: 14px;
}
.mock-q-category {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 4px;
    background: #f0f4ff;
    color: #2f57ef;
}
.mock-q-serial { font-size: 13px; font-weight: 600; color: #6e798a; }

/* The question stem.
   Polish on the line, translation directly underneath in the same block - deliberately the
   same shape as .mock-option-alt below, because a question and an answer should be read the
   same way. This replaced two tinted, separately-bordered cards (green "Polski:" above blue
   "English:"), which framed the stem as two things to read rather than one. The blue on the
   translation is the only marker left, and it matches the answers. */
.mock-q-text { font-size: 16.5px; font-weight: 600; color: #192335; line-height: 1.55; }
.mock-q-single { margin-bottom: 20px; }
.mock-q-alt {
    display: block;
    margin-top: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #2f57ef;
    line-height: 1.5;
}

/* ---------- Options ---------- */
.mock-options { margin-top: 18px; }
.mock-option { display: block; margin-bottom: 10px; cursor: pointer; }
.mock-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.mock-option-body {
    display: block;
    border: 2px solid #e0e4eb;
    border-radius: 10px;
    padding: 13px 17px;
    font-size: 15px;
    color: #192335;
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.mock-option:hover .mock-option-body { border-color: #2f57ef; background: #f8f9ff; }
.mock-option input:checked + .mock-option-body {
    border-color: #2f57ef;
    background: #f0f4ff;
    font-weight: 600;
}
.mock-option input:focus-visible + .mock-option-body { outline: 2px solid #2f57ef; outline-offset: 2px; }
.mock-option-letter { font-weight: 700; margin-right: 6px; color: #2f57ef; }
.mock-option-alt { display: block; font-size: 14px; color: #2f57ef; margin-top: 4px; padding-left: 22px; }

/* ---------- Navigation ----------
 * Same two button shapes as the course player: a flat blue-outline one and the site gradient. */
.mock-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.mock-btn {
    padding: 12px 30px;
    border-radius: 10px;
    border: 2px solid #2f57ef;
    background: #fff;
    color: #212529;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.mock-btn:hover { background: #2f57ef; color: #fff; }
.mock-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mock-btn:disabled:hover { background: #fff; color: #212529; }
.mock-btn-primary {
    border-color: transparent;
    color: #fff;
    background-image: linear-gradient(to right, #2f57ef 0%, #c664ff 51%, #c664ff 100%);
    background-size: 200% auto;
    transition: 0.5s;
}
.mock-btn-primary:hover { background-position: right center; color: #fff; }
.mock-btn-finish { background: #22c55e; border-color: #22c55e; color: #fff; }
.mock-btn-finish:hover { background: #16a34a; border-color: #16a34a; color: #fff; }

.mock-answered-note { font-size: 13px; color: #6e798a; text-align: center; margin-top: 16px; }

/* ---------- Result ---------- */
.mock-score-box {
    background: #fff;
    border: 2px solid #e0e4eb;
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    margin-bottom: 25px;
    box-shadow: 0 6px 26px rgba(25, 35, 53, 0.06);
}
.mock-score-box.pass { border-color: #22c55e; background: #f8fdfa; }
.mock-score-box.fail { border-color: #dc2626; background: #fffafa; }
.mock-score-number { font-size: 60px; font-weight: 800; line-height: 1.05; margin: 12px 0 4px; }
.mock-score-box.pass .mock-score-number { color: #22c55e; }
.mock-score-box.fail .mock-score-number { color: #dc2626; }
.mock-score-label { font-size: 15px; color: #6e798a; }
.mock-score-message { font-size: 18px; font-weight: 700; margin: 14px 0 4px; }
.mock-score-box.pass .mock-score-message { color: #166534; }
.mock-score-box.fail .mock-score-message { color: #991b1b; }

.mock-gate {
    background: #fff;
    border: 2px solid #2f57ef;
    border-radius: 16px;
    padding: 35px;
    margin-bottom: 25px;
    box-shadow: 0 6px 26px rgba(47, 87, 239, 0.1);
}
.mock-gate-title { font-size: 21px; font-weight: 700; color: #192335; margin-bottom: 10px; }
.mock-gate-text { font-size: 15px; color: #6e798a; line-height: 1.65; margin-bottom: 22px; }
.mock-input {
    width: 100%;
    padding: 13px 16px;
    border: 2px solid #e0e4eb;
    border-radius: 10px;
    font-size: 15px;
}
.mock-input:focus { border-color: #2f57ef; outline: none; }
.mock-consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 20px; }
.mock-consent input { margin-top: 3px; flex-shrink: 0; width: 18px; height: 18px; }
.mock-consent label { font-size: 13.5px; color: #6e798a; line-height: 1.6; }

.mock-review-title { font-size: 20px; font-weight: 700; color: #192335; margin: 35px 0 15px; }
.mock-review-q { border-left: 5px solid #e0e4eb; }
.mock-review-q.is-correct { border-left-color: #22c55e; }
.mock-review-q.is-wrong { border-left-color: #dc2626; }
/* No bottom margin: this now sits inside .mock-q-head, which owns the spacing. */
.mock-review-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
}
/* Category and badge group left, the counter sits out on the right. */
.mock-q-head .mock-q-serial { margin-left: auto; }
.mock-review-badge.is-correct { background: #f0fdf4; color: #166534; border: 1px solid #22c55e; }
.mock-review-badge.is-wrong { background: #fef2f2; color: #991b1b; border: 1px solid #dc2626; }
.mock-review-badge.is-skipped { background: #f5f5f5; color: #555; border: 1px solid #bbb; }
.mock-review-option { border: 2px solid #e0e4eb; border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; font-size: 15px; }
.mock-review-option.correct { border-color: #22c55e; background: #f0fdf4; color: #166534; font-weight: 600; }
.mock-review-option.chosen-wrong { border-color: #dc2626; background: #fef2f2; color: #991b1b; }
.mock-review-flag { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 6px; }

.mock-cta-row { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-top: 25px; }

/* Wide screens: the four options in two columns, so a whole bilingual question still fits on
   one screen instead of having to be scrolled through to answer.

   The question stem deliberately stays in ONE column here. It used to split into two side-by-side
   boxes at this width, which meant the stem read left-to-right while the options underneath read
   top-to-bottom - two different reading orders on the same card. Polish above, translation below,
   everywhere. */
@media (min-width: 1200px) {
    .mock-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
    .mock-options .mock-option { margin-bottom: 0; display: flex; }
    .mock-options .mock-option-body { flex: 1; }
    .mock-options .mock-review-option { margin-bottom: 0; }
}

@media (max-width: 640px) {
    .mock-start-card, .mock-q, .mock-gate { padding: 22px 18px; }
    .mock-facts { grid-template-columns: repeat(2, 1fr); }
    .mock-score-number { font-size: 46px; }
    .mock-timer { font-size: 19px; }
}