body { font-family: DejaVu Sans, sans-serif; }

/* Simple modern site nav (replaces the old header-area / mainmenu-area
   stack visually — the include structure in header.blade.php is
   unchanged, this just re-skins it). No logo/site-branding-area —
   dropped per request.

   Kept as an external stylesheet (not an inline <style> in
   header.blade.php) on purpose: a large inline <style> block full of
   unrelated { } pairs made Blade's directive-scanning regex pathologically
   slow while compiling header.blade.php (multi-minute hangs / memory
   exhaustion on every page). An external .css file is never touched by
   the Blade compiler at all. */
.header-area, .mainmenu-area {
    background: #fff;
    box-shadow: none;
}
.header-area { border-bottom: 1px solid #eef0f3; padding: 8px 0; }
.header-area .user-menu { display: none; }
.header-area ul.list-unstyled { margin: 0; }
.header-area ul.list-unstyled li a {
    color: #6b7280;
    font-size: 13px;
    padding: 4px 8px;
}
.header-area ul.list-unstyled li a:hover { color: #22497d; }

.mainmenu-area {
    border-top: 1px solid #eef0f3;
    border-bottom: 1px solid #eef0f3;
}
.mainmenu-area .nav.navbar-nav > li > a {
    color: #1f2937;
    font-weight: 500;
    font-size: 14px;
    padding: 12px 16px;
}
.mainmenu-area .nav.navbar-nav > li.active > a,
.mainmenu-area .nav.navbar-nav > li > a:hover {
    color: #22497d;
    background: transparent;
}

/* style.css's .navbar-toggle is styled for the old dark navbar (white bars,
   white border) — invisible (white-on-white) against this light header.
   Only shows below Bootstrap 3's own 768px breakpoint, so it went
   unnoticed until an actual small-viewport check. */
.navbar-toggle { border-color: #d1d5db; }
.navbar-toggle .icon-bar { background-color: #374151; }
.navbar-toggle:hover, .navbar-toggle:focus { background-color: #f4f6f9; }

/* ---- Shared modern skin for all @extends('layouts.app') pages ----
   Re-skins the existing WooCommerce/Bootstrap-3 classes already used
   across the site's content pages, so every page looks consistent
   with the new header/footer/landing without rewriting each page's
   markup or touching its PHP logic. */

body { background: #f7f8fa; color: #1f2937; }

/* Sticky footer: header.blade.php/footer.blade.php don't wrap the page in
   a single "main content" element (header-area, mainmenu-area, the
   per-page content, and footer-bottom-area are all direct children of
   <body>) — making <body> a flex column and pushing the last child down
   with margin-top: auto works without needing to touch that structure. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; min-height: 100vh; }
.footer-bottom-area {
    /* style.css ships a black .footer-bottom-area (background:#000,
       color:#fff) from the old dark-footer theme — override it to match
       the light footer on the landing page. */
    background: #fff;
    color: #9ca3af;
    margin-top: auto;
    padding: 20px 0;
    text-align: center;
}
.footer-bottom-area .copyright {
    font-size: 13px;
    color: #9ca3af;
}

.zigzag-bottom { display: none; }

/* style.css ships .single-product-area { position:relative; overflow:hidden }
   — meant to clip the (now display:none) decorative zigzag on a short hero
   section. On a tall page (e.g. TestPage.blade.php's 15-question exam form)
   that same overflow:hidden clips real content instead, since this element
   is also a flex child of <body> now (see the sticky-footer rule below) and
   flex items only keep min-height:auto — "don't shrink below content" —
   when their overflow is the default `visible`; any other value make them
   eligible to be sized/clipped smaller than their content. */
.single-product-area {
    padding: 32px 0 56px;
    overflow: visible;
}

.product-content-right, .woocommerce {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 28px 32px;
}

.section-title, .info_product {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 20px;
}
.sidebar-title { font-size: 16px; font-weight: 600; color: #1f2937; }

/* Cabinet left sidebar */
.left-menu {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 8px 0;
}
.left-menu ul { list-style: none; margin: 0; padding: 0; }
.left-menu hr { border: none; border-top: 1px solid #eef0f3; margin: 0; }
.left-menu li a { display: block; padding: 12px 20px; text-decoration: none; }
.left-menu li a h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}
.left-menu li a:hover { background: #f4f6f9; }
.left-menu li a:hover h3 { color: #22497d; }

/* Tables */
table, .shop_table, .table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
table th, table td, .shop_table th, .shop_table td {
    border: 1px solid #eef0f3;
    padding: 10px 12px;
    text-align: left;
}
table thead th, .shop_table thead th {
    background: #f7f8fa;
    color: #6b7280;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid #e5e9f0;
}

/* Accordions (Corpus B / law-enforcement program breakdown) */
.panel-group .panel {
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: none;
    overflow: hidden;
}
.panel-default > .panel-heading {
    background: #fff;
    border-bottom: 1px solid #eef0f3;
    padding: 0;
}
.panel-title a {
    display: block;
    padding: 14px 18px;
    color: #1f2937;
    font-weight: 600;
    text-decoration: none;
}
.panel-title a:hover { color: #22497d; }
.panel-body { padding: 16px 18px; }

/* Forms (register / forgot-password / reset-password / order) */
.woocommerce-billing-fields h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
}
.woocommerce-billing-fields label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}
.input-text, .woocommerce-billing-fields input[type="text"],
.woocommerce-billing-fields input[type="password"],
.woocommerce-billing-fields input[type="email"],
.woocommerce-billing-fields select,
textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    margin-bottom: 16px;
}
.input-text:focus, textarea:focus {
    outline: none;
    border-color: #22497d;
    box-shadow: 0 0 0 3px rgba(34,73,125,.12);
}

.button, input[type="submit"], .place-order input, #place_order {
    display: inline-block;
    background: #22497d;
    color: #fff !important;
    border: none;
    border-radius: 6px;
    padding: 11px 24px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.button:hover, input[type="submit"]:hover, #place_order:hover { background: #1d3f6e; }

.btn-outline {
    display: inline-block;
    background: #fff;
    color: #374151 !important;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 10px 23px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}
.btn-outline:hover { background: #f4f6f9; text-decoration: none; }

/* Results detail page (ResultCurrentTestPageWeb.blade.php) — pass/fail hero,
   results table with per-row status badges, and the per-question breakdown
   (ResultCurrentTestPageLaw.blade.php) reusing the exam's .question_name
   card look. */
.result-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 20px;
    border: 1px solid #e5e9f0;
}
.result-hero.pass { background: #f0fdf4; border-color: #bbf7d0; }
.result-hero.fail { background: #fef2f2; border-color: #fecaca; }
.result-hero-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.result-hero.pass .result-hero-icon { background: #dcfce7; color: #16a34a; }
.result-hero.fail .result-hero-icon { background: #fee2e2; color: #dc2626; }
.result-hero-title { font-size: 18px; font-weight: 700; color: #1f2937; }
.result-hero.pass .result-hero-title { color: #166534; }
.result-hero.fail .result-hero-title { color: #991b1b; }
.result-hero-sub { font-size: 13px; color: #6b7280; margin-top: 3px; }

.result-summary-text { color: #374151; line-height: 1.6; margin: 0 0 24px; }

.result-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 24px; }
.result-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.result-table th, .result-table td {
    border: 1px solid #eef0f3;
    padding: 11px 14px;
    text-align: left;
}
.result-table thead th {
    background: #f7f8fa;
    color: #6b7280;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 2px solid #e5e9f0;
}
.result-table th.count, .result-table td.count { text-align: center; }
.result-table tbody tr:hover { background: #f8fafc; }
.result-table tr.result-row-total td { font-weight: 700; background: #f7f8fa; }
.result-table tr.result-row-nopass td { color: #9ca3af; }
.result-cell-badge {
    display: inline-block;
    min-width: 26px;
    padding: 2px 10px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
}
.result-cell-badge.ok { background: #dcfce7; color: #166534; }
.result-cell-badge.bad { background: #fee2e2; color: #991b1b; }
.result-cell-badge.muted { background: #f3f4f6; color: #6b7280; margin-left: 8px; font-size: 12px; }

.result-actions { display: flex; gap: 12px; margin-bottom: 20px; }
.result-print-date { font-size: 12px; color: #9ca3af; text-align: right; }

.result-answer {
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
    font-size: 14px;
    color: #374151;
}
.result-answer-right { border-color: #86efac; background: #f0fdf4; color: #166534; font-weight: 600; }
.result-answer-mistake { border-color: #fca5a5; background: #fef2f2; color: #991b1b; font-weight: 600; }
.result-answer-default { color: #6b7280; }

/* Test-info pages (CategoryBViewPageBlock.blade.php, EnforcementViewPageBlock.blade.php,
   OlkInfoPage.blade.php) — the "Купить"/"Начать" call-to-action at the
   bottom of each, and the "Инструкция" link (-> /manual) at the top. */
.test-page-header { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.test-buy-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid #eef0f3; }
.test-buy-price { font-size: 14px; color: #6b7280; margin: 0 0 14px; }
.test-buy-owned { color: #166534; font-size: 14px; margin: 0 0 14px; }

/* ОЛК test-info page (OlkInfoPage.blade.php) — simple description card,
   no law/program breakdown table (see PageController::Olk's own comment). */
.test-info-card { background: #fff; border: 1px solid #e5e9f0; border-radius: 10px; padding: 28px 32px; max-width: 720px; }
.test-info-card p { color: #374151; line-height: 1.7; margin: 0 0 14px; }
.test-info-card p:last-of-type { margin-bottom: 0; }

/* Manual page (ManualPage.blade.php) — the actual instructional text lives
   in Manual::content (translations table, editable via /admin/data/manuals),
   this only styles whatever semantic HTML that field contains. */
.manual-download { margin-bottom: 28px; }
.manual-intro { font-size: 15px; color: #374151; line-height: 1.7; margin: 0 0 28px; }
.manual-steps { list-style: none; margin: 0; padding: 0; counter-reset: manual-step; }
.manual-step {
    counter-increment: manual-step;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 20px;
}
.manual-step h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 12px;
}
.manual-step h2::before {
    content: counter(manual-step);
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #22497d;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.manual-step p { color: #374151; line-height: 1.7; margin: 0 0 14px; }
.manual-step p:last-child { margin-bottom: 0; }
.manual-figure { margin: 16px 0 0; }
.manual-figure img {
    width: 100%;
    max-width: 720px;
    display: block;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
.manual-figure + p { margin-top: 16px; }
.manual-figure figcaption { font-size: 12px; color: #9ca3af; margin-top: 8px; }

.alert-danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.alert-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

/* Pagination */
.pagination { display: flex; gap: 4px; padding: 0; margin: 20px 0 0; list-style: none; }
.pagination .page-link {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #e5e9f0;
    border-radius: 6px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
}
.pagination .page-item.active .page-link { background: #22497d; border-color: #22497d; color: #fff; }

/* Test-taking page (TestPage.blade.php) — questions are shown one at a
   time via JS show/hide (see the script at the bottom of that file);
   this only re-skins the existing markup/classes, nothing structural.

   The law title + timer, the progress bar + questions, and the nav/submit
   row used to be Bootstrap floated columns (col-md-9/col-md-3/col-md-12)
   with no clearfix between them or their siblings, and no .row wrapper at
   that nesting level to supply one. Since their container (.woocommerce)
   has its own card background/border (see below), that collapsed the
   card's box around only the non-floated content, leaving the floated
   progress bar/questions/buttons visually rendering *below* the card's
   bottom edge, outside its border, on the plain page background — exactly
   the "not in the box" artifacts reported. .exam-header-row (flex) and
   .exam-section (plain block, no float) replace those columns. */
.exam-section { width: 100%; }
.exam-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.exam-law-title { margin: 0; }
.exam-timer-box {
    text-align: center;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 14px 20px;
    flex-shrink: 0;
}
.exam-timer-box .exam-timer-label { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: .04em; }
.exam-timer-box #demo { margin: 4px 0 0; font-size: 22px; color: #22497d; }
.exam-progress { margin: 4px 0 20px; }
.exam-progress-bar {
    height: 6px;
    background: #eef0f3;
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 8px;
}
.exam-progress-fill {
    height: 100%;
    width: 0%;
    background: #22497d;
    border-radius: 999px;
    transition: width .2s ease;
}
.exam-progress-text { font-size: 13px; color: #6b7280; }
.question_name {
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 20px;
}
.question_name .question-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px;
}
/* .answer-option is a <label> wrapping its own radio (see TestPage.blade.php)
   rather than a plain div paired with a separately-`for`-linked label, so
   clicking anywhere in the box — not just the dot or the text — selects the
   answer. Matches the ОЛК test page's .olk-answer pattern. */
.question_name .answer-option {
    display: block;
    border: 1px solid #e5e9f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
.question_name .answer-option:hover { border-color: #22497d; background: #f8fafc; }
.question_name .answer-option:has(input:checked) { border-color: #22497d; background: #eef2f8; }
.question_name .input-check { margin-right: 10px; }
.question_name .form-check-label { font-size: 14px; color: #374151; cursor: pointer; }
.exam-nav { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 24px; }
.exam-nav button, .exam-nav input[type="submit"] {
    padding: 11px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
}
.exam-nav .exam-prev { background: #fff; color: #374151; border: 1px solid #d1d5db; }
.exam-nav .exam-prev:hover { background: #f4f6f9; }
.exam-nav .exam-prev:disabled { opacity: .4; cursor: not-allowed; }
.exam-nav .exam-next { background: #22497d; color: #fff; }
.exam-nav .exam-next:hover { background: #1d3f6e; }
/* #examSubmit lives in the .exam-nav flex row alongside Prev/Next (not a
   sibling below it) so the final-question "Сохранить результат" button
   stays on the same line as "Назад" instead of dropping underneath —
   render() below shows only one of #examNext/#examSubmit at a time. */
#form_test input[type="submit"] { display: none; }
#form_test input[type="submit"].exam-visible { display: inline-block; }
.pagination .page-link:hover { border-color: #22497d; color: #22497d; }

/* ---- Responsive: mobile/tablet ----
   Bootstrap 3's grid (col-md-*, the navbar-toggle collapse) already reflows
   at its own breakpoints, but the custom card/table/exam styles above were
   all written against a fixed desktop layout — this tightens padding, wraps
   wide tables so they scroll instead of overflowing the viewport, and stacks
   the exam header/nav so they stay usable on a phone during a real test. */
@media (max-width: 991px) {
    .product-content-right, .woocommerce {
        padding: 22px 18px;
    }
}

@media (max-width: 767px) {
    .container { padding-left: 16px; padding-right: 16px; }

    .product-content-right, .woocommerce {
        padding: 18px 14px;
        border-radius: 8px;
    }
    .section-title, .info_product { font-size: 19px; }

    /* Wide data tables (available-tests law breakdown, results detail,
       report views) scroll horizontally instead of blowing out the page
       width on a phone. */
    table, .shop_table, .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .exam-header-row { gap: 12px; }
    .exam-law-title { font-size: 18px; }
    .exam-timer-box { width: 100%; padding: 10px 16px; }
    .question_name { padding: 18px 16px; }
    .question_name .question-title { font-size: 15px; margin-bottom: 14px; }
    .exam-nav { flex-wrap: wrap; }
    .exam-nav button, .exam-nav input[type="submit"] { flex: 1 1 auto; padding: 12px 16px; }
    #form_test input[type="submit"].exam-visible { width: 100%; }

    .result-hero { flex-direction: column; align-items: flex-start; text-align: left; }
    .result-actions { flex-direction: column; }
    .result-actions .button, .result-actions .btn-outline { width: 100%; text-align: center; }

    .manual-step { padding: 16px; }
    .manual-step h2 { font-size: 15px; }
}

@media (max-width: 480px) {
    .question_name { padding: 14px 12px; }
    .question_name .answer-option { padding: 10px 12px; }
}