/* ================================================================
   ROZVOD-PORADNA.CZ — Design System CSS
   v2.0 — 2026 Redesign
   Nahrazuje: style.css, ai.css, tabs.css
   ================================================================ */


/* ================================================================
   0. SELF-HOSTED FONTS (GDPR-safe, no Google CDN)
   ================================================================ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url( '/fonts/inter-latin-ext.woff2' ) format( 'woff2' );
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url( '/fonts/inter-latin.woff2' ) format( 'woff2' );
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url( '/fonts/playfair-latin-ext.woff2' ) format( 'woff2' );
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url( '/fonts/playfair-latin.woff2' ) format( 'woff2' );
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ================================================================
   1. CSS VARIABLES
   ================================================================ */
:root {
    /* Primary Colors */
    --color-primary:       #1B2A4A;
    --color-primary-light: #2A3F6B;

    /* Accent Colors */
    --color-accent-gold:       #C4A265;
    --color-accent-gold-light: #D4B87A;
    --color-accent-gold-dark:  #A8884F;

    /* Background Colors */
    --color-bg-cream:       #F5F3EE;
    --color-bg-white:       #FFFFFF;
    --color-bg-light-gray:  #F3F4F6;
    --color-bg-warm-sand:   #F7F3EC;
    --color-bg-section-alt: #F0EBE1;
    --color-bg-card-hover:  #FAF7F2;
    --color-bg-navy-subtle: #E8EAF0;

    /* Text Colors */
    --color-text-dark:   #2D2D2D;
    --color-text-medium: #4B5563;
    --color-text-light:  #6B7280;

    /* Status Colors */
    --color-success:    #2D6A4F;
    --color-success-bg: #ECFDF5;
    --color-error:      #DC2626;
    --color-error-bg:   #FEF2F2;
    --color-warning:    #D97706;
    --color-warning-bg: #FFFBEB;

    /* Border Colors */
    --color-border-light: #D1D5DB;
    --color-border-gold:  rgba( 196, 162, 101, 0.3 );

    /* Typography */
    --font-heading: 'Playfair Display', serif;
    --font-body:    'Inter', sans-serif;

    /* Spacing Scale */
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Border Radius Scale */
    --radius-xs:   6px;
    --radius-sm:   8px;
    --radius-card: 12px;

    /* Box Shadows */
    --shadow-card: 0 2px 12px rgba( 0, 0, 0, 0.08 );
    --shadow-sm:   0 1px 3px rgba( 0, 0, 0, 0.2 );
}


/* ================================================================
   2. CSS RESET
   ================================================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    scroll-behavior: smooth;
}


/* ================================================================
   3. BASE TYPOGRAPHY
   ================================================================ */
body {
    font-family: var( --font-body );
    font-size: 16px;
    line-height: 1.6;
    color: var( --color-text-dark );
    background: var( --color-bg-light-gray );
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var( --font-heading );
    font-weight: 700;
    line-height: 1.2;
    color: var( --color-primary );
    margin: 0 0 var( --space-md ) 0;
}

h1 { font-size: 32px; line-height: 1.2; }
h2 { font-size: 26px; line-height: 1.3; text-align: center; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.4; }
h4 { font-family: var( --font-body ); font-size: 18px; font-weight: 600; line-height: 1.4; }
h5 { font-family: var( --font-body ); font-size: 16px; font-weight: 600; line-height: 1.5; }
h6 { font-family: var( --font-body ); font-size: 14px; font-weight: 600; line-height: 1.5; }

p {
    margin: 0 0 var( --space-md ) 0;
    color: var( --color-text-medium );
    line-height: 1.6;
}

a {
    color: var( --color-primary );
    text-decoration: none;
}

a:hover {
    color: var( --color-accent-gold );
}

ul, ol {
    padding-left: var( --space-lg );
    margin: 0 0 var( --space-md ) 0;
}

li {
    margin-bottom: var( --space-xs );
    color: var( --color-text-medium );
}

strong, b {
    font-weight: 600;
    color: var( --color-text-dark );
}

em, i {
    font-style: italic;
}

/* ================================================================
   4. BASE ELEMENTS
   ================================================================ */
img {
    max-width: 100%;
    height: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: var( --space-xl );
}

th, td {
    padding: 10px 14px;
    border: 1px solid var( --color-border-light );
    text-align: left;
}

th {
    background: var( --color-bg-cream );
    color: var( --color-text-dark );
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid var( --color-border-light );
}

tr:nth-child( even ) td {
    background: var( --color-bg-cream );
}

tr:hover td {
    background: #EEF0F3;
}

td a {
    color: var( --color-primary );
    text-decoration: underline;
}

hr {
    border: none;
    border-top: 1px solid var( --color-border-light );
    margin: var( --space-lg ) 0;
}

input, textarea, select, button {
    font-family: var( --font-body );
}

textarea {
    width: 100%;
    box-sizing: border-box;
}

details summary {
    cursor: pointer;
}

/* ================================================================
   5. UTILITY CLASSES
   ================================================================ */
.hidden   { display: none !important; }
.center   { text-align: center; }
.right    { text-align: right; }
.left     { text-align: left; }
.clear    { clear: both; }
.clearfix::after { content: ''; display: table; clear: both; }

/* Spacing utilities */
.mt-sm  { margin-top: var( --space-sm ); }
.mt-md  { margin-top: var( --space-md ); }
.mt-lg  { margin-top: var( --space-lg ); }
.mt-xl  { margin-top: var( --space-xl ); }
.mt-2xl { margin-top: var( --space-2xl ); }

.text_block {
    max-width: 720px;
    margin: 0 auto;
}

/* Mobile-first: desktop items hidden, mobile items shown */
.nomobile  { display: none; }
.nodesktop { display: block; }

.anchor {
    display: block;
    height: 0;
    visibility: hidden;
}

/* Show only on mobile (hidden on desktop) — opposite of .nomobile */
.mobile { display: block; }

/* Small/disclaimer text */
.smaller {
    font-size: 12px;
    color: var( --color-text-light );
    line-height: 1.5;
}

/* Red text (required fields, warnings) */
.red { color: var( --color-error ); }

/* Inline image */
img.inline {
    display: inline-block;
    vertical-align: middle;
}

/* Dev / test indicator */
.test {
    background: var( --color-error );
    color: white;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    height: 1px;
}

.text-dark   { color: var( --color-text-dark ); }
.text-medium { color: var( --color-text-medium ); }
.text-light  { color: var( --color-text-light ); }
.text-small   { font-size: 14px; line-height: 1.5; }
.text-caption { font-size: 12px; line-height: 1.4; }


/* ================================================================
   6. BUTTONS
   ================================================================ */
.btn {
    display: inline-block;
    padding: 14px 32px;
    font-family: var( --font-body );
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1;
}

.btn-primary {
    background: var( --color-primary );
    color: var( --color-bg-white );
    border-color: var( --color-primary );
}

.btn-primary:hover {
    background: var( --color-primary-light );
    border-color: var( --color-primary-light );
    color: var( --color-bg-white );
}

.btn-accent {
    background: var( --color-accent-gold );
    color: var( --color-bg-white );
    border-color: var( --color-accent-gold );
}

.btn-accent:hover {
    background: var( --color-accent-gold-dark );
    border-color: var( --color-accent-gold-dark );
    color: var( --color-bg-white );
}

.btn-outlined-primary {
    background: var( --color-bg-white );
    color: var( --color-primary );
    border-color: var( --color-primary );
}

.btn-outlined-primary:hover {
    background: var( --color-primary );
    color: var( --color-bg-white );
}

.btn-outlined-gold {
    background: var( --color-bg-white );
    color: var( --color-accent-gold );
    border-color: var( --color-accent-gold );
}

.btn-outlined-gold:hover {
    background: var( --color-accent-gold );
    color: var( --color-bg-white );
}

.btn-ghost {
    background: transparent;
    color: var( --color-primary );
    text-decoration: underline;
    border-color: transparent;
    padding: 14px 0;
}

.btn-ghost:hover {
    color: var( --color-accent-gold );
}

.btn-small {
    padding: 10px 20px;
    font-size: 14px;
}

.btn-full {
    width: 100%;
    display: block;
}

.btn-with-icon::after {
    content: ' →';
    margin-left: 8px;
}

.btn-disabled,
.btn-disabled:hover {
    background: var( --color-border-light );
    color: var( --color-text-light );
    border-color: var( --color-border-light );
    cursor: not-allowed;
}

/* .cta — backward-compat alias pro .btn.btn-outlined-primary */
.cta {
    display: inline-block;
    padding: 14px 32px;
    font-family: var( --font-body );
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    border: 2px solid var( --color-primary );
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    line-height: 1;
    background: var( --color-bg-white );
    color: var( --color-primary );
}

.cta:hover {
    background: var( --color-primary );
    color: var( --color-bg-white );
}

.cta.reverse {
    background: var( --color-accent-gold );
    color: white;
    border-color: var( --color-accent-gold );
}

.cta.reverse:hover {
    background: var( --color-accent-gold-dark );
    border-color: var( --color-accent-gold-dark );
    color: white;
}

.cta.white {
    background: var( --color-primary );
    color: white;
    border-color: var( --color-primary );
}

.cta.white:hover {
    background: var( --color-primary-light );
    border-color: var( --color-primary-light );
    color: white;
}

.cta.small {
    padding: 10px 20px;
    font-size: 14px;
}

.cta.disabled,
.cta.disabled:hover {
    background: var( --color-border-light );
    color: var( --color-text-light );
    border-color: var( --color-border-light );
    cursor: not-allowed;
}


/* ================================================================
   7. FORMS
   ================================================================ */
.form-group {
    margin-bottom: var( --space-lg );
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var( --color-text-dark );
    margin-bottom: 8px;
}

/* Global form element styles — applies to ALL inputs sitewide */
input[ type=text ],
input[ type=email ],
input[ type=tel ],
input[ type=number ],
input[ type=date ],
input[ type=password ],
select,
textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var( --color-border-light );
    border-radius: 8px;
    font-size: 16px;
    color: var( --color-text-dark );
    background: var( --color-bg-white );
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

input[ type=text ]:focus,
input[ type=email ]:focus,
input[ type=tel ]:focus,
input[ type=number ]:focus,
input[ type=date ]:focus,
input[ type=password ]:focus,
select:focus,
textarea:focus {
    border-color: var( --color-accent-gold );
    border-left: 3px solid var( --color-accent-gold );
    padding-left: 11px;
    outline: none;
    box-shadow: 0 0 0 3px rgba( 196, 162, 101, 0.12 );
    background: var( --color-input-focus-bg );
}

input[ type=date ] {
    width: auto;
    max-width: 180px;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

select {
    cursor: pointer;
}

/* Input state modifiers */
input.error, input.invalid,
select.error, select.invalid,
textarea.error, textarea.invalid {
    border-color: var( --color-error );
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var( --color-bg-light-gray );
    color: var( --color-text-light );
    cursor: not-allowed;
}

.wiz-toggle-switch input:disabled + .wiz-toggle-slider {
    opacity: 0.4;
}

.wiz-toggle-switch:has( input:disabled ) {
    cursor: not-allowed;
}

.form-error {
    font-size: 12px;
    color: var( --color-error );
    margin-top: 4px;
}

.field_error {
    display: none;
    font-size: 12px;
    color: var( --color-error );
    margin-top: 4px;
}

.field_error.visible {
    display: block;
}


/* ================================================================
   FormRenderer output classes — used by FormRenderer.php sitewide
   ================================================================ */

/* .dataField is a JS hook class placed on inputs — no CSS styling here */

.formInput {
    display: block;
}

.formInput > label {
    margin-top: var( --space-lg );
    margin-bottom: var( --space-sm );
}

/* Radio group container (table mode) */
.nowrap {
    display: flex;
    flex-direction: column;
    gap: var( --space-xs );
    margin-bottom: var( --space-xs );
}

.nowrap label {
    font-size: 16px;
    font-weight: 400;
    color: var( --color-text-dark );
}

/* Explanatory text above a field */
.explanation {
    font-size: 15px;
    color: var( --color-text-medium );
    line-height: 1.5;
    background: var( --color-bg-cream );
    border-left: 3px solid var( --color-border-gold );
    padding: var( --space-sm ) var( --space-md );
    border-radius: 0 6px 6px 0;
    margin-bottom: var( --space-lg );
}

.explanation:empty {
    display: none;
}


/* ================================================================
   Semantic form structure — replaces .singleLine, .description,
   .template, .templateField (table-mode still uses .formInput, .nowrap)
   ================================================================ */

.field-group {
    margin-bottom: var( --space-lg );
}

.field-group > label,
fieldset legend {
    font-size: 16px;
    font-weight: 700;
    color: var( --color-primary );
    margin-bottom: var( --space-sm );
    display: block;
    letter-spacing: 0.2px;
}

.field-group > small,
fieldset > small {
    font-size: 13px;
    color: var( --color-text-light );
    line-height: 1.4;
    margin-top: 4px;
    padding-left: 2px;
    display: block;
}

.field-group > small:empty,
fieldset > small:empty {
    display: none;
}

fieldset {
    border: none;
    padding: 0;
    margin: 0 0 var( --space-lg ) 0;
}

fieldset legend {
    padding: 0;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: var( --space-xs );
    margin-bottom: var( --space-xs );
}

.template-selector {
    margin-bottom: var( --space-sm );
}

.template-selector > label {
    font-size: 12px;
    font-weight: 500;
    color: var( --color-text-light );
    font-style: italic;
}

.template-selector > select {
    font-size: 16px;
}

small .warn,
.field-desc-body .warn {
    color: var( --color-warning, #D97706 );
    font-weight: 600;
    margin-right: 4px;
}

/* ================================================================
   RADIO BUTTON — custom styled per style guide
   ================================================================ */
.radio-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.radio-wrapper input[ type="radio" ] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var( --color-border-light );
    border-radius: 50%;
    background: var( --color-bg-white );
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.radio-wrapper input[ type="radio" ]:checked {
    border-color: var( --color-accent-gold );
    background: radial-gradient( circle, var( --color-accent-gold ) 40%, var( --color-bg-white ) 40% );
}

.radio-wrapper span {
    cursor: pointer;
}

.radio-wrapper input[ type="radio" ]:checked + span {
    font-weight: 600;
    color: var( --color-primary );
}

/* Shared input/select/textarea base */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="password"],
textarea,
select {
    font-family: var( --font-body );
}

/* Honeypot anti-spam field — musí být mimo viewport, ne display:none (boti by ho přeskočili) */
.hp_field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}


/* ================================================================
   8. CARDS
   ================================================================ */
.card {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-lg );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
}

.card-elevated {
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.1 );
}

.card-gold-top {
    border-top: 3px solid var( --color-accent-gold );
}

/* Info/callout box — cream background with gold border */
.info-box {
    background: var( --color-bg-cream );
    border-radius: 12px;
    padding: var( --space-xl );
    margin: var( --space-xl ) 0;
    border: 1px solid var( --color-border-gold );
}

.card-header {
    background: var( --color-primary );
    color: white;
    padding: 16px 24px;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
    margin: calc( -1 * var( --space-lg ) ) calc( -1 * var( --space-lg ) ) var( --space-lg );
}

/* Spacing: badge uvnitř karty má mezeru nahoře */
.card .badge {
    margin-top: var( --space-sm );
    margin-bottom: var( --space-xs );
    display: inline-block;
}

.card-content {
    padding: 0;
}

.question-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: border-color 0.2s ease;
    border: 1px solid var( --color-border-light );
    text-decoration: none;
}

.question-card:hover {
    border-color: var( --color-accent-gold );
}

.question-card::after {
    content: '→';
    color: var( --color-accent-gold );
    font-size: 20px;
    flex-shrink: 0;
    margin-left: var( --space-md );
}

.stat-card {
    text-align: center;
}

.stat-number {
    font-size: 42px;
    font-weight: 700;
    color: var( --color-primary );
    font-family: var( --font-heading );
    line-height: 1;
}

.stat-label {
    font-size: 14px;
    color: var( --color-text-medium );
    margin-top: 8px;
}

/* Stat cards on navy background (statistiky/achievements sekce) */
.stripe-navy .stat-number {
    color: var( --color-accent-gold );
    font-size: 36px;
}

.stripe-navy .stat-label {
    color: rgba( 255, 255, 255, 0.8 );
}

/* Mobile: zlatá tečka jako oddělovač mezi staty (kromě posledního) */
.stripe-navy .stat-card:not( :last-child )::after {
    content: '•';
    display: block;
    color: var( --color-accent-gold );
    font-size: 20px;
    text-align: center;
    margin-top: var( --space-lg );
}

.pricing-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pricing-label {
    font-size: 16px;
    color: var( --color-text-dark );
}

.pricing-value {
    font-size: 20px;
    font-weight: 700;
    color: var( --color-primary );
}

/* .box — backward-compat alias pro .card */
.box {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-lg );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
    margin-bottom: var( --space-lg );
}


/* ================================================================
   9. BADGES & PILLS
   ================================================================ */
.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-radius: 24px;
    line-height: 1.4;
}

.badge-gold {
    background: rgba( 196, 162, 101, 0.12 );
    color: var( --color-accent-gold-dark );
    border: 1px solid rgba( 196, 162, 101, 0.3 );
}

.badge-outlined {
    background: transparent;
    color: var( --color-primary );
    border: 1px solid var( --color-border-light );
    border-radius: 24px;
}

.badge-success {
    background: var( --color-success-bg );
    color: var( --color-success );
    border-radius: 24px;
}

.badge-category {
    background: transparent;
    color: var( --color-accent-gold );
    padding: 4px 0;
}

.badge-count {
    background: var( --color-primary );
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var( --color-border-light );
    border-radius: 24px;
    font-size: 12px;
    font-weight: 500;
    color: var( --color-primary );
    text-decoration: none;
    background: var( --color-bg-white );
}


/* ================================================================
   10. ALERTS
   ================================================================ */
.alert {
    padding: 16px;
    border-radius: 8px;
    border-left: 4px solid var( --color-primary );
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: var( --space-md );
}

.alert-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1.4;
}

.alert-content {
    flex: 1;
}

.alert-title {
    font-weight: 600;
    margin-bottom: 4px;
    color: var( --color-text-dark );
}

.alert-success {
    background: var( --color-success-bg );
    border-left-color: var( --color-success );
}

.alert-success .alert-icon { color: var( --color-success ); }
.alert-success .alert-title { color: var( --color-success ); }

.alert-warning {
    background: var( --color-warning-bg );
    border-left-color: var( --color-warning );
}

.alert-warning .alert-icon { color: var( --color-warning ); }
.alert-warning .alert-title { color: var( --color-warning ); }

.alert-error {
    background: var( --color-error-bg );
    border-left-color: var( --color-error );
}

.alert-error .alert-icon { color: var( --color-error ); }
.alert-error .alert-title { color: var( --color-error ); }


/* ================================================================
   11. SEPARATORS
   ================================================================ */
.separator-gold {
    width: 60px;
    height: 2px;
    background: var( --color-accent-gold );
    margin: var( --space-lg ) auto;
}

.separator-full {
    width: 100%;
    height: 1px;
    background: var( --color-border-light );
    margin: var( --space-lg ) 0;
}

.separator-dot {
    text-align: center;
    color: var( --color-accent-gold );
    font-size: 24px;
    margin: var( --space-lg ) 0;
}


/* ================================================================
   11b. DIVIDERS
   ================================================================ */
.divider-line {
    width: 100%;
    height: 1px;
    background: var( --color-border-light );
    margin: var( --space-xl ) 0;
}

.divider-gold {
    width: 60px;
    height: 3px;
    background: var( --color-accent-gold );
    margin: var( --space-lg ) auto;
    border-radius: 2px;
}

.divider-band {
    width: 100%;
    padding: var( --space-lg ) 20px;
    background: var( --color-bg-cream );
    text-align: center;
    font-size: 14px;
    color: var( --color-text-medium );
}

.divider-ornament {
    text-align: center;
    color: var( --color-accent-gold );
    font-size: 28px;
    letter-spacing: 12px;
    margin: var( --space-lg ) 0;
    opacity: 0.6;
}

.divider-cream-band {
    background: var( --color-bg-cream );
    padding: var( --space-md ) 20px;
    border-top: 1px solid var( --color-border-light );
    border-bottom: 1px solid var( --color-border-light );
}


/* ================================================================
   12. BACKGROUNDS
   ================================================================ */
.bg-white { background: var( --color-bg-white ); }
.bg-cream { background: var( --color-bg-cream ); }

.bg-navy {
    background: var( --color-primary );
    color: white;
}

.bg-navy h1,
.bg-navy h2,
.bg-navy h3,
.bg-navy h4 { color: white; }

.bg-navy p,
.bg-navy li { color: rgba( 255, 255, 255, 0.85 ); }

.bg-gradient {
    background: linear-gradient( to bottom, var( --color-bg-cream ), var( --color-bg-white ) );
}


/* ================================================================
   13. ICONS
   ================================================================ */
.icon         { display: inline-block; }
.icon-16      { font-size: 16px; }
.icon-24      { font-size: 24px; }
.icon-32      { font-size: 32px; }
.icon-gold    { color: var( --color-accent-gold ); }
.icon-green   { color: var( --color-success ); }
.icon-primary { color: var( --color-primary ); }
.icon-white   { color: white; }


/* ================================================================
   14. LINKS
   ================================================================ */
a.link-default {
    color: var( --color-primary );
    text-decoration: underline;
}

a.link-default:hover {
    color: var( --color-accent-gold );
}

a.link-default:visited {
    color: #6B4C8A;
}

a.link-arrow::after {
    content: ' →';
    margin-left: 4px;
}


/* ================================================================
   15. LAYOUT
   ================================================================ */
.container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
}

.container-wide {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}
.container-wide p, .container-wide h1, .container-wide h2 {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.content {
    background: var( --color-bg-white );
}

@media ( min-width: 1200px ) {
    .content {
        max-width: 1200px;
        margin: 16px auto;
        border-radius: 12px;
        box-shadow: 0 4px 32px rgba( 0, 0, 0, 0.08 );
    }
}

.stripe {
    width: 100%;
    padding: var( --space-2xl ) 20px;
    margin-bottom: var( --space-lg );
}

/* Non-fullwidth stripes vypadají jako karty s rounded corners a shadow */
.stripe:not( .stripe-fullwidth ) {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
    overflow: hidden;
}

/* Fullwidth stripes — přes celou šířku obrazovky (viewport) */
.stripe-fullwidth {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX( -50% );
}

.stripe-cream { background: var( --color-bg-cream ); }
.stripe-white { background: var( --color-bg-white ); }
.stripe-navy  { background: var( --color-primary ); }
.stripe-hero  { padding-top: var( --space-3xl ); padding-bottom: var( --space-3xl ); }

.stripe-navy h1,
.stripe-navy h2,
.stripe-navy h3,
.stripe-navy h4 { color: white; }

.stripe-navy p,
.stripe-navy li { color: rgba( 255, 255, 255, 0.85 ); }

.row {
    display: flex;
    flex-wrap: wrap;
    gap: var( --space-lg );
}

.columns {
    display: grid;
    gap: var( --space-lg );
}

/* On mobile, all column layouts stack to 1 column */
.columns-2,
.columns-3,
.columns-4 {
    grid-template-columns: 1fr;
}

.column {
    flex: 1;
    min-width: 0;
}


/* ================================================================
   16. HEADER & MENU
   ================================================================ */
.header {
    padding: 16px 32px;
    position: relative;
    z-index: 100;
    background: var( --color-bg-white );
}

.header > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.sitename {
    font-family: var( --font-body );
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: var( --color-primary );
    letter-spacing: 0.5px;
}

.beta {
    background: var( --color-accent-gold );
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-left: 6px;
    vertical-align: middle;
}

/* Mobile: full-screen overlay menu */
.menu {
    display: none;
    position: fixed;
    inset: 0;
    background: var( --color-primary );
    z-index: 1100;
    padding: 24px;
    flex-direction: column;
    overflow-y: auto;
}

.menu-logo {
    display: block;
    margin-bottom: 8px;
}

.menu-logo img {
    height: 56px;
    width: auto;
}

.menu.open {
    display: flex;
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 60px 0 0 0;
    display: block;
}

.menu ul li {
    border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
    margin: 0;
}

.menu ul li a,
.menu ul li a.em {
    display: block;
    color: white;
    padding: 16px 0;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease;
}

.menu ul li a:hover,
.menu ul li a.em {
    color: var( --color-accent-gold );
}

/* User email button in nav (pruvodce) */
.userMailBtn {
    background: var( --color-accent-gold );
    color: white;
    border-radius: 6px;
    padding: 8px 16px;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
    font-size: inherit;
}

.userMailBtn:hover {
    background: var( --color-accent-gold-dark );
    color: white;
}

/* Yourlink — initially hidden */
#yourDocsLink {
    display: none;
}

#yourDocsLink a {
    background: var( --color-accent-gold );
    color: white !important;
    border-radius: 6px;
    padding: 8px 16px !important;
    font-weight: 600;
}

#yourDocsLink a:hover {
    background: var( --color-accent-gold-dark );
    color: white !important;
}

.closeMenuButton {
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 32px;
    color: white;
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    user-select: none;
    background: none;
    border: none;
    padding: 0;
}

.closeMenuButton:hover {
    color: var( --color-accent-gold );
}

.menuToggler {
    font-size: 28px;
    color: var( --color-primary );
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    user-select: none;
    display: block;
}

.menuToggler:hover {
    color: var( --color-accent-gold );
}

/* Mobile header — quick "Vaše dokumenty" button, perfectly centered via absolute */
.header-docs-mobile {
    position: absolute;
    left: 50%;
    transform: translateX( -50% );
    white-space: nowrap;
}

/* Mobile: docs button is in header, suppress it from the overlay menu */
#yourDocsLink { display: none !important; }

/* Mobile: menší boční padding headeru → logo vlevo, hamburger vpravo, prostor pro button */
@media ( max-width: 767px ) {
    .header { padding-left: 12px; padding-right: 12px; }
}

/* Flash message */
.msg {
    background: var( --color-accent-gold );
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    margin: 12px 0;
    font-weight: 500;
    display: none;
}

/* Flag icon in header */
.flag {
    width: 32px;
    height: auto;
}


/* ================================================================
   17. HERO
   ================================================================ */
.hero {
    background: var( --color-primary );
    background-size: cover;
    background-position: center top;
    position: relative;
}

.hero .header {
    position: relative;
    z-index: 1;
    background: transparent;
    margin-bottom: 0;
}

/* Header elements inside hero get white color */
.hero .sitename { color: white; }
.hero .menuToggler { color: white; }
.hero .menu a { color: rgba( 255, 255, 255, 0.9 ); }
.hero .menu a:hover { color: var( --color-accent-gold ); }

.hero-content {
    position: relative;
    z-index: 1;
    padding: var( --space-3xl ) 0;
    text-align: center;
}

.hero-title {
    font-family: var( --font-heading );
    font-size: 36px;
    font-weight: 700;
    color: white;
    margin-bottom: var( --space-md );
}

.hero-subtitle {
    font-size: 18px;
    color: rgba( 255, 255, 255, 0.85 );
    margin-bottom: var( --space-xl );
}

.hero-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: var( --space-sm );
    justify-content: center;
    margin-top: var( --space-lg );
}

.hero-benefits .pill {
    border-color: rgba( 255, 255, 255, 0.3 );
    background: rgba( 255, 255, 255, 0.1 );
    color: white;
}

.hero-benefits .pill:hover {
    background: rgba( 255, 255, 255, 0.2 );
    border-color: rgba( 255, 255, 255, 0.5 );
    color: white;
}

/* Hero trust items — statické indikátory důvěry (ne interaktivní) */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var( --space-xs ) var( --space-lg );
    justify-content: center;
    margin-top: var( --space-lg );
}

.hero-trust span {
    color: rgba( 255, 255, 255, 0.85 );
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* Číslovaný krok (Jak to funguje) */
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var( --color-accent-gold );
    color: white;
    font-family: var( --font-heading );
    font-size: 22px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var( --space-md );
    flex-shrink: 0;
}

/* Dekorativní uvozovka před citací */
.endorsement-text::before {
    content: '\201C';
    font-family: var( --font-heading );
    font-size: 72px;
    line-height: 0.7;
    color: var( --color-accent-gold );
    opacity: 0.5;
    display: block;
    margin-bottom: var( --space-sm );
}

/* Ikona v kartě */
.card-icon {
    font-size: 36px;
    margin-bottom: var( --space-sm );
    display: block;
    color: var( --color-accent-gold );
}

/* Hero varianty */
.hero-dark    { background: var( --color-primary ); }
.hero-light   { background: var( --color-bg-cream ); }
.hero-accent  { background: var( --color-accent-gold ); }

/* Hero content helpers */
.hero-overline {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var( --color-accent-gold );
    margin-bottom: var( --space-sm );
}

.hero-description {
    font-size: 18px;
    color: rgba( 255, 255, 255, 0.85 );
    max-width: 600px;
    margin: 0 auto var( --space-xl );
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var( --space-md );
    justify-content: center;
    margin-top: var( --space-xl );
}

.btn-hero-primary {
    background: var( --color-accent-gold );
    color: white;
    border: 2px solid var( --color-accent-gold );
    padding: 16px 40px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.btn-hero-primary:hover {
    background: var( --color-accent-gold-dark );
    border-color: var( --color-accent-gold-dark );
    color: white;
}

.btn-hero-secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba( 255, 255, 255, 0.5 );
    padding: 16px 40px;
    font-size: 17px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s ease;
}

.btn-hero-secondary:hover {
    border-color: white;
    background: rgba( 255, 255, 255, 0.1 );
    color: white;
}

/* CTA tlačítko v hero — bílý rámeček pro kontrast s cream sekcí pod ním */
.hero .btn-accent {
    box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.25 );
}

.hero .btn-accent:hover {
    box-shadow: 0 0 0 3px rgba( 255, 255, 255, 0.4 );
}

/* Step cards — "Jak to funguje" layout */
.step-card {
    text-align: center;
}

.step-card .card-icon {
    margin-bottom: var( --space-xs );
}

.step-card .step-number {
    margin: 0 auto var( --space-md );
}


/* ================================================================
   18. FOOTER + COPYRIGHT + CHAT BUBBLE
   ================================================================ */
footer.footer {
    background: var( --color-primary );
    color: white;
    padding: var( --space-2xl ) 20px;
    margin-top: 0;
    padding: 64px;
    /* Footer přes celou šířku obrazovky (viewport) */
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX( -50% );
}

.footer .row {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-menu {
    display: flex;
    flex-wrap: wrap;
    gap: var( --space-xl );
    width: 100%;
}

.footer-menu ul.column {
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 140px;
}

.footer-menu ul.column.logo {
    display: flex;
    align-items: flex-start;
    min-width: auto;
}

.footer-menu ul.column.logo img {
    width: 60px;
    height: auto;
}

.footer-menu ul li {
    margin-bottom: 8px;
    color: rgba( 255, 255, 255, 0.75 );
}

.footer-menu ul li a {
    color: rgba( 255, 255, 255, 0.75 );
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.footer-menu ul li a:hover {
    color: var( --color-accent-gold );
}

.footer-menu ul li.coltitle {
    color: white;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
    opacity: 1;
}

.copyright {
    background: var( --color-primary );
    border-top: 1px solid rgba( 255, 255, 255, 0.1 );
    padding: 16px 20px;
    text-align: center;
    font-size: 13px;
    color: rgba( 255, 255, 255, 0.5 );
}

.copyright a {
    color: rgba( 255, 255, 255, 0.7 );
    text-decoration: none;
}

.copyright a:hover {
    color: var( --color-accent-gold );
}

.copyright-links {
    margin-bottom: 10px;
}

.copyright-links a {
    margin: 0 10px;
    color: rgba( 255, 255, 255, 0.7 );
    text-decoration: none;
}

.copyright-links a:hover {
    color: var( --color-accent-gold );
}

/* Chat bubble */
.chat_widget_btn {
    position: fixed;
    bottom: 64px;
    right: 28px;
    z-index: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var( --color-primary );
    color: #fff;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 18px rgba( 27, 42, 74, 0.35 );
    transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
    white-space: nowrap;
}

.chat_widget_btn:hover {
    background: var( --color-primary-light );
    transform: translateY( -2px );
    box-shadow: 0 6px 24px rgba( 27, 42, 74, 0.45 );
    color: #fff;
    text-decoration: none;
}


/* ================================================================
   19. DIALOGS
   ================================================================ */
.dlgdim {
    position: fixed;
    inset: 0;
    background: rgba( 0, 0, 0, 0.55 );
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.dialog {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-xl );
    max-width: 560px;
    width: calc( 100vw - 40px );
    box-shadow: 0 8px 32px rgba( 0, 0, 0, 0.2 );
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    z-index: 1001;
    max-height: 90vh;
    overflow-y: auto;
}

.dialog h2,
.dialog h3 {
    margin-bottom: var( --space-md );
    padding-right: 32px;
}

.closeBtn {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 28px;
    color: var( --color-text-light );
    cursor: pointer;
    line-height: 1;
    background: none;
    border: none;
}

.closeBtn:hover {
    color: var( --color-error );
}

/* Dialog form row layout (label + value pairs) */
.formCol {
    display: inline-block;
    min-width: 120px;
    vertical-align: middle;
}

.secondCol {
    vertical-align: middle;
}

/* Floated image in dialogs (e.g. icon left of text) */
.leftimg {
    float: left;
    margin: 0 var( --space-md ) var( --space-sm ) 0;
    width: 48px;
    height: auto;
}

/* Footer section inside dialogs */
.dialog .footer {
    margin-top: var( --space-lg );
    padding-top: var( --space-md );
    border-top: 1px solid var( --color-border-light );
    font-size: 13px;
    color: var( --color-text-light );
    text-align: center;
}

.dialog .footer img {
    vertical-align: middle;
}


/* ================================================================
   20. BREADCRUMBS
   ================================================================ */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    font-size: 14px;
    color: var( --color-text-light );
    padding: var( --space-md ) 0;
    list-style: none;
    margin: 0;
}

.breadcrumb a {
    color: var( --color-text-medium );
    text-decoration: none;
    transition: color 0.15s ease;
}

.breadcrumb a:hover {
    color: var( --color-accent-gold );
}

.breadcrumb .separator {
    color: var( --color-text-light );
    margin: 0 4px;
}

.breadcrumb li + li::before {
    content: '›';
    color: var( --color-text-light );
    margin-right: 4px;
}


/* ================================================================
   21. WIZARD / TABS
   ================================================================ */
.tabs {
    display: flex;
    border-bottom: 2px solid var( --color-border-light );
    margin-bottom: var( --space-xl );
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tab {
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var( --color-text-light );
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: all 0.2s ease;
    text-decoration: none;
    flex-shrink: 0;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.tab:hover {
    color: var( --color-primary );
}

.tab.active,
.tab.current {
    color: var( --color-primary );
    border-bottom-color: var( --color-accent-gold );
}

.tab.completed {
    color: var( --color-success );
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Wizard progress indicator */
.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: var( --space-lg ) 0;
    flex-wrap: wrap;
    gap: 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var( --color-text-light );
}

.wizard-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var( --color-border-light );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    background: white;
    flex-shrink: 0;
}

.wizard-step.active .wizard-step-number {
    border-color: var( --color-accent-gold );
    background: var( --color-accent-gold );
    color: white;
}

.wizard-step.completed .wizard-step-number {
    border-color: var( --color-success );
    background: var( --color-success );
    color: white;
}

.wizard-step.active,
.wizard-step.completed {
    color: var( --color-primary );
}

.wizard-connector {
    height: 2px;
    width: 40px;
    background: var( --color-border-light );
    flex-shrink: 0;
}

.wizard-connector.completed {
    background: var( --color-success );
}


/* ================================================================
   22. WIZARD FORMS
   ================================================================ */
.wizard-form {
    max-width: 720px;
    margin: 0 auto;
}

.wizard-section {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-xl );
    margin-bottom: var( --space-lg );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
}

.wizard-section-title {
    font-family: var( --font-heading );
    font-size: 20px;
    font-weight: 600;
    color: var( --color-primary );
    margin-bottom: var( --space-lg );
    padding-bottom: var( --space-sm );
    border-bottom: 1px solid var( --color-border-light );
}

.wizard-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var( --space-lg ) 0;
    margin-top: var( --space-xl );
    border-top: 1px solid var( --color-border-light );
    gap: var( --space-md );
}

.field-help {
    font-size: 13px;
    color: var( --color-text-light );
    margin-top: 4px;
}

.field-error {
    font-size: 13px;
    color: var( --color-error );
    margin-top: 4px;
}


/* ================================================================
   26. PAGE-SPECIFIC — CZ
   ================================================================ */

/* O nás — timeline */
.timeline {
    position: relative;
    padding-left: 40px;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var( --color-accent-gold );
}

.timeline-item {
    position: relative;
    margin-bottom: var( --space-xl );
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -33px;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var( --color-accent-gold );
    border: 3px solid var( --color-bg-white );
}

.timeline-year {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var( --color-accent-gold );
    margin-bottom: 4px;
}

/* Service box */
.service-box {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-xl );
    text-align: center;
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
}

.service-box-icon {
    font-size: 48px;
    margin-bottom: var( --space-md );
    display: block;
}

/* FAQ */
.faq-item {
    border: 1px solid var( --color-border-light );
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
}

.faq-question {
    padding: 16px 20px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var( --color-primary );
    font-family: var( --font-body );
    font-size: 16px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}

.faq-question::after {
    content: '+';
    font-size: 24px;
    font-weight: 300;
    color: var( --color-accent-gold );
    flex-shrink: 0;
    margin-left: var( --space-md );
}

.faq-item.open .faq-question::after,
.faq-question[aria-expanded="true"]::after {
    content: '−';
}

.faq-answer {
    display: none;
    padding: 0 20px var( --space-md );
    color: var( --color-text-medium );
    line-height: 1.7;
}

.faq-item.open .faq-answer,
.faq-answer.open {
    display: block;
}

/* Payment */
.payment-box {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-xl );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
    border-top: 3px solid var( --color-accent-gold );
    text-align: center;
}

.payment-price {
    font-family: var( --font-heading );
    font-size: 48px;
    font-weight: 700;
    color: var( --color-primary );
    line-height: 1;
    margin-bottom: 8px;
}

.payment-price-note {
    font-size: 14px;
    color: var( --color-text-light );
    margin-bottom: var( --space-xl );
}

/* Endorsement */
.endorsement-card {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-xl );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
    border-left: 4px solid var( --color-accent-gold );
}

.endorsement-text {
    font-size: 17px;
    line-height: 1.7;
    color: var( --color-text-dark );
    font-style: italic;
    margin-bottom: var( --space-md );
}

.endorsement-author {
    font-weight: 600;
    color: var( --color-primary );
    margin-bottom: 2px;
}

.endorsement-role {
    font-size: 14px;
    color: var( --color-text-light );
}

/* Endorsement stripe — distinctive section */
.endorsement-stripe .endorsement-card {
    border-left: 4px solid var( --color-accent-gold );
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.1 );
    max-width: 800px;
    margin: 0 auto;
}

.endorsement-featured {
    padding: var( --space-2xl ) 20px;
    margin-top: var( --space-lg );
    margin-bottom: var( --space-lg );
}

/* Indikátor externího odkazu (přidáváno přes JS) */
.ext-link-icon {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-left: 0.25em;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E" ) no-repeat center / contain;
    mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E" ) no-repeat center / contain;
    opacity: 0.7;
}

.endorsement-stripe .endorsement-card .author-photo {
    border: 3px solid var( --color-accent-gold );
}

/* Endorsement — style-guide varianty */
.endorsement {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-xl );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
    position: relative;
}

.endorsement::before {
    content: '\201C';
    font-family: var( --font-heading );
    font-size: 80px;
    line-height: 0.7;
    color: var( --color-accent-gold );
    opacity: 0.3;
    position: absolute;
    top: var( --space-lg );
    left: var( --space-lg );
}

.endorsement-featured {
    background: var( --color-primary );
    border-radius: 12px;
    padding: var( --space-xl );
    color: white;
}

.endorsement-featured .endorsement-text {
    color: rgba( 255, 255, 255, 0.9 );
}

.endorsement-featured .endorsement-author {
    color: var( --color-accent-gold );
}

.endorsement-featured .endorsement-role {
    color: rgba( 255, 255, 255, 0.65 );
}

.endorsement-featured .author-photo {
    border: 3px solid var( --color-accent-gold );
}

.endorsement-featured a {
    color: inherit;
}

.endorsement-featured a:hover {
    color: var( --color-accent-gold );
}

.endorsement-stars {
    display: flex;
    gap: 2px;
    margin-bottom: var( --space-sm );
    color: var( --color-accent-gold );
    font-size: 0.9rem;
}


.endorsement-strip {
    background: var( --color-bg-cream );
    padding: var( --space-xl ) 20px;
    border-top: 1px solid var( --color-border-light );
    border-bottom: 1px solid var( --color-border-light );
}

/* Announcement banner */
.announcement {
    background: linear-gradient( 135deg, var( --color-primary ) 0%, var( --color-primary-light ) 100% );
    color: white;
    padding: var( --space-xl );
    border-radius: 12px;
    margin-bottom: var( --space-xl );
}

.announcement h2,
.announcement h3 {
    color: var( --color-accent-gold );
}

.announcement p {
    color: rgba( 255, 255, 255, 0.85 );
}

/* Author stripe */
.author-stripe {
    background: var( --color-bg-cream );
    border-radius: 12px;
    padding: var( --space-xl );
    display: flex;
    gap: var( --space-xl );
    align-items: center;
    margin: var( --space-xl ) 0;
}

.author-photo {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-info h3 {
    font-size: 18px;
    margin-bottom: var( --space-xs );
}

.author-info p {
    font-size: 14px;
    margin-bottom: var( --space-xs );
    color: var( --color-text-light );
}

.author-info p:first-of-type {
    font-weight: 500;
    color: var( --color-text-medium );
}

.author-info .badge {
    margin-bottom: var( --space-xs );
    display: inline-block;
}

.author-info .mt-sm {
    font-size: 12px;
}

/* Expert box */
.expert-box {
    background: var( --color-primary );
    color: white;
    border-radius: 12px;
    padding: var( --space-xl );
    margin-bottom: var( --space-lg );
}

.expert-box h3 {
    color: var( --color-accent-gold );
}

.expert-box p {
    color: rgba( 255, 255, 255, 0.85 );
}

.expert-box a { color: var( --color-accent-gold ); }
.expert-box a:hover { color: white; }

/* When .author-stripe is nested inside .expert-box, remove its own bg/margin */
.expert-box .author-stripe {
    background: transparent;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.expert-box .author-info h3 { color: var( --color-accent-gold ); }
.expert-box .author-info p { color: rgba( 255, 255, 255, 0.85 ); }

/* Expert compact — inline author line for QA answer */
.expert-compact {
    display: flex;
    align-items: center;
    gap: var( --space-sm );
    margin-bottom: var( --space-md );
    padding-bottom: var( --space-md );
    border-bottom: 1px solid var( --color-border-light );
}

.expert-compact-photo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var( --color-accent-gold );
}

.expert-compact-info {
    font-size: 13px;
    line-height: 1.4;
    color: var( --color-text-medium );
}

.expert-compact-name {
    font-weight: 700;
    color: var( --color-primary );
}

/* Author stripe inside navy section */
.stripe-navy .author-stripe {
    background: transparent;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

.stripe-navy .author-stripe .author-info h3 { color: white; }
.stripe-navy .author-stripe .author-info p { color: rgba( 255, 255, 255, 0.85 ); }
.stripe-navy .author-stripe .author-photo {
    border: 3px solid var( --color-accent-gold );
}

.stripe-navy .author-stripe .link-default { color: var( --color-accent-gold ); }
.stripe-navy .author-stripe .link-default:hover { color: white; }

/* Announcement close button */
.announcement { position: relative; }

.announcement-close {
    position: absolute;
    top: var( --space-sm );
    right: var( --space-md );
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.announcement-close:hover { opacity: 1; }

/* Contact cards */
.contact-cards {
    display: grid;
    gap: var( --space-md );
    margin-bottom: var( --space-lg );
}

.contact-card {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-lg );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
    border: 1px solid var( --color-border-light );
    display: flex;
    align-items: center;
    gap: var( --space-md );
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.contact-card:hover {
    box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.1 );
    border-color: rgba( 196, 162, 101, 0.4 );
}

.contact-card--chat {
    border: 2px solid var( --color-accent-gold );
    background: rgba( 196, 162, 101, 0.04 );
}

.contact-card__icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba( 196, 162, 101, 0.12 );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var( --color-accent-gold );
}

.contact-card__icon svg { width: 20px; height: 20px; }
.contact-card__icon--chat  { color: var( --color-accent-gold ); }
.contact-card__icon--email { color: var( --color-primary ); }
.contact-card__icon--phone { color: var( --color-primary ); }
.contact-card__icon--fb    { color: #1877f2; }

.contact-card__label {
    font-size: 12px;
    font-weight: 600;
    color: var( --color-text-light );
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.contact-card__value {
    font-size: 14px;
    font-weight: 600;
    color: var( --color-primary );
    word-break: break-all;
}

.contact-card__value a { color: var( --color-primary ); }
.contact-card__value a:hover { color: var( --color-accent-gold ); }

.contact-card__note {
    font-size: 12px;
    color: var( --color-text-light );
}

.contact-card__content {
    font-size: 14px;
    color: var( --color-text-medium );
    line-height: 1.5;
}

/* Trust badges */
.trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var( --space-md );
    margin-top: var( --space-md );
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var( --color-text-medium );
    font-weight: 500;
}

.trust-badge__icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var( --color-bg-cream );
    display: flex;
    align-items: center;
    justify-content: center;
    color: var( --color-accent-gold );
    flex-shrink: 0;
}

.trust-badge__icon svg { width: 18px; height: 18px; }

/* Inline odkaz s ikonou (LinkedIn, web) v profilech osob */
.profile-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}
.profile-link svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Contact help widget */
.contact-help-widget {
    background: var( --color-bg-cream );
    border-radius: 12px;
    padding: var( --space-xl );
    margin: var( --space-xl ) 0;
    border: 1px solid var( --color-border-gold );
}

.contact-help-widget h3 {
    font-family: var( --font-heading );
    font-size: 22px;
    color: var( --color-primary );
    margin-bottom: var( --space-lg );
}

/* Complexity sidebar widget */
.complexityHolder {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-lg );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
    text-align: center;
    border-top: 3px solid var( --color-accent-gold );
}

.complexityHolder h3 {
    font-size: 16px;
    margin-bottom: var( --space-md );
}

.complexityHolder img {
    max-width: 100%;
    height: auto;
    margin-bottom: var( --space-sm );
}

.complexityLevel {
    font-family: var( --font-heading );
    font-size: 36px;
    font-weight: 700;
    color: var( --color-primary );
    line-height: 1;
    margin-bottom: 4px;
}

.complexityName {
    font-size: 14px;
    color: var( --color-text-medium );
    margin-bottom: var( --space-md );
}

.divorceParams {
    list-style: none;
    padding: 0;
    margin: var( --space-md ) 0 0;
    text-align: left;
}

.divorceParams li {
    padding: 8px 0;
    border-bottom: 1px solid var( --color-border-light );
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.divorceParams li:last-child {
    border-bottom: none;
}

.divorceParams .value {
    font-weight: 600;
    color: var( --color-primary );
}

.divorceParams .param {
    color: var( --color-text-medium );
}

.divorceParams .strong {
    font-weight: 700;
    color: var( --color-primary );
}


/* Info-links divider band */
.info-links-band {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var( --space-md ) var( --space-xl );
    padding: var( --space-lg ) 20px;
}

.info-links-band a {
    color: var( --color-primary );
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.15s ease;
}

.info-links-band a:hover {
    color: var( --color-accent-gold );
}


/* ================================================================
   27. MEXICO SPECIFIC
   ================================================================ */
/* MX header layout */
.header-mx {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    position: relative;
    z-index: 100;
}

.logo-mx {
    text-align: right;
    flex-shrink: 0;
}

.sitename-mx {
    font-family: var( --font-heading );
    font-size: 20px;
    font-weight: 700;
    color: var( --color-primary );
    letter-spacing: 0.5px;
}

.sitename_sub-mx {
    font-size: 9px;
    color: var( --color-text-light );
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Invisible home link in MX header (fills space between menu and logo) */
.home-link {
    flex: 1;
    opacity: 0;
    min-height: 44px;
    display: block;
}

/* MX mobile menu: show inline on mobile (overrides .menu { display: none }) */
.menu.mx.mobile {
    display: block;
    position: static;
    background: var( --color-bg-cream );
    padding: 8px 0;
    border-bottom: 1px solid var( --color-border-light );
    inset: unset;
}

.menu.mx.mobile ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 0;
}

.menu.mx.mobile ul li {
    border-bottom: none;
}

.menu.mx.mobile ul li a {
    color: var( --color-primary );
    font-size: 14px;
    padding: 8px 12px;
    display: block;
}

.mx-document-info {
    background: var( --color-bg-cream );
    border-radius: 12px;
    padding: var( --space-xl );
    margin-bottom: var( --space-lg );
    border: 1px solid var( --color-border-gold );
}

/* MX maintenance notice */
.maintenance-notice {
    text-align: center;
    padding: var( --space-3xl ) var( --space-lg );
    max-width: 600px;
    margin: 0 auto;
}

.maintenance-notice h1 {
    font-size: 36px;
    margin-bottom: var( --space-lg );
}


/* ================================================================
   28. ADMIN
   ================================================================ */
.admin-wrapper {
    padding: var( --space-lg );
}

/* Admin container — potlačit centrování h1/h2/h3 z container-wide, přepsat editorial font */
.admin-content h1,
.admin-content h2,
.admin-content h3 {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    font-family: var( --font-body );
    font-style: normal;
    color: var( --color-text-dark );
}

.admin-stats-overview h2 {
    text-align: center;
}



/* Admin nav — active item */
.menu ul li a.active {
    font-weight: 600;
    background: rgba( 27, 42, 74, 0.08 );
}

/* Admin search/filter bar */
.search,
.admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var( --space-sm );
    margin-bottom: var( --space-lg );
    padding: var( --space-md ) var( --space-lg );
    background: var( --color-bg-cream );
    border-radius: 8px;
}

.search form,
.admin-filters form {
    display: flex;
    flex-wrap: wrap;
    gap: var( --space-sm );
    align-items: center;
    width: 100%;
}

.search input,
.search select,
.admin-filters input,
.admin-filters select {
    width: auto;
    max-width: 260px;
    padding: 8px 12px;
    font-family: var( --font-body );
    font-size: 14px;
    border: 1px solid var( --color-border-light );
    border-radius: 6px;
    background: white;
    color: var( --color-text-dark );
}

.search button,
.admin-filters button {
    padding: 8px 16px;
    background: var( --color-primary );
    color: white;
    border: none;
    border-radius: 6px;
    font-family: var( --font-body );
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.search button:hover,
.admin-filters button:hover {
    background: var( --color-primary-light );
}

/* Admin stat cards */
.admin-stats {
    display: flex;
    gap: var( --space-md );
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var( --space-xl );
}

.admin-stat {
    background: var( --color-bg-white );
    border-radius: 8px;
    padding: var( --space-md ) var( --space-lg );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
    text-align: center;
    min-width: 120px;
}

.admin-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var( --color-primary );
    font-family: var( --font-heading );
}

/* Admin stats — table + chart layout */
.admin-stats-layout {
    display: flex;
    gap: var( --space-xl );
    align-items: flex-start;
    flex-wrap: wrap;
}

.admin-stats-table-wrap {
    flex: 0 0 auto;
}

.admin-stats-table {
    width: auto;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.admin-stats-table th,
.admin-stats-table td {
    padding: 6px 14px;
    border: 1px solid var( --color-border-light );
    white-space: nowrap;
}

.admin-stats-table th {
    background: var( --color-bg-cream );
    font-weight: 600;
}

.admin-stats-chart {
    flex: 1 1 300px;
    min-width: 0;
}

/* Admin funnel box */
.admin-funnel {
    display: flex;
    align-items: center;
    gap: var( --space-lg );
    padding: var( --space-md ) var( --space-lg );
    background: var( --color-bg-cream );
    border-radius: 8px;
    border: 1px solid var( --color-border-light );
    flex-wrap: wrap;
}

.admin-funnel-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var( --color-text-light );
    white-space: nowrap;
}

.admin-funnel-steps {
    display: flex;
    align-items: center;
    gap: var( --space-md );
    flex-wrap: wrap;
}

.admin-funnel-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.admin-funnel-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var( --color-primary );
    line-height: 1;
}

.admin-funnel-name {
    font-size: 0.75rem;
    color: var( --color-text-light );
}

.admin-funnel-step-highlight .admin-funnel-value {
    color: var( --color-accent-gold-dark );
}

.admin-funnel-arrow {
    font-size: 1.2rem;
    color: var( --color-text-light );
    margin-top: -10px;
}

/* Monitor page */
body.monitor {
    font-size: 13px;
    padding: 16px;
    background: white;
    font-family: monospace;
}


/* ================================================================
   29. RESPONSIVE — TABLET (768px+)
   ================================================================ */
@media ( min-width: 768px ) {
    /* Visibility */
    .nomobile  { display: block; }
    .nodesktop { display: none; }

    /* Chat widget — on desktop no sticky bottom menu, move closer to edge */
    .chat_widget_btn { bottom: 28px; }

    /* Typography */
    h1 { font-size: 40px; }
    h2 { font-size: 32px; }

    /* Layout */
    .columns-2 { grid-template-columns: repeat( 2, 1fr ); }
    .columns-3 { grid-template-columns: repeat( 3, 1fr ); }

    /* Menu — horizontal desktop nav */
    .menu {
        display: flex;
        position: static;
        background: transparent;
        padding: 0;
        flex-direction: row;
        align-items: center;
        gap: 0;
        overflow-y: visible;
    }

    .menu ul {
        display: flex;
        flex-direction: row;
        margin: 0;
        align-items: center;
    }

    .menu ul li {
        border-bottom: none;
    }

    .menu ul li a {
        color: var( --color-primary );
        font-size: 14px;
        font-weight: 500;
        padding: 8px 14px;
        border-radius: 6px;
        transition: color 0.15s ease, background 0.15s ease;
    }

    .menu ul li a:hover {
        color: var( --color-accent-gold );
        background: rgba( 196, 162, 101, 0.06 );
    }

    .menu ul li a.em {
        color: var( --color-accent-gold );
    }

    #yourDocsLink a {
        padding: 8px 16px !important;
    }

    .closeMenuButton    { display: none; }
    .menuToggler        { display: none; }
    .menu-logo          { display: none; }
    .header-docs-mobile { display: none !important; }
    #yourDocsLink       { display: list-item !important; }

    /* Hero */
    .hero-title { font-size: 52px; }

    /* Footer */
    footer.footer {
        margin-top: 0;
    }

    .footer-menu {
        flex-wrap: nowrap;
    }

    /* Stat karty na navy pozadí: skrýt mobilní tečku, zobrazit zlatý vertikální oddělovač */
    .stripe-navy .stat-card:not( :last-child )::after {
        display: none;
    }

    .stripe-navy .stat-card:not( :last-child ) {
        border-right: 2px solid rgba( 196, 162, 101, 0.4 );
        padding-right: var( --space-lg );
    }

    .stripe-navy .stat-number {
        font-size: 28px;
    }

    /* Contact cards — 2 columns inside full-width stripe */
    .stripe-fullwidth .contact-cards {
        grid-template-columns: repeat( 2, 1fr );
    }

    .stripe-fullwidth .contact-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: var( --space-xl ) var( --space-md );
        gap: var( --space-sm );
    }

    .stripe-fullwidth .contact-card__icon {
        width: 52px;
        height: 52px;
        min-width: 52px;
        margin-bottom: var( --space-xs );
    }

    .stripe-fullwidth .contact-card__label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var( --color-text-light );
    }

    .stripe-fullwidth .contact-card__value {
        font-size: 14px;
        font-weight: 600;
        color: var( --color-primary );
        word-break: break-all;
    }

    .stripe-fullwidth .contact-card__note {
        font-size: 11px;
        color: var( --color-text-light );
    }

    .stripe-fullwidth .contact-card__content {
        font-size: 13px;
        line-height: 1.5;
        color: var( --color-text-medium );
    }

    .stripe-fullwidth .trust-badges {
        justify-content: center;
        margin-top: var( --space-xl );
        gap: var( --space-xl );
    }

    /* Author stripe */
    .author-stripe {
        flex-direction: row;
    }

    /* MX menu: hide mobile variant, show desktop variant */
    .mobile          { display: none; }
    .menu.mx.mobile  { display: none; }
}


/* ================================================================
   29. RESPONSIVE — DESKTOP (1024px+)
   ================================================================ */
@media ( min-width: 1024px ) {
    /* Typography */
    h1 { font-size: 48px; }
    h2 { font-size: 36px; }

    /* Layout */
    .container {
        padding: 0;
    }

    .columns-4 {
        grid-template-columns: repeat( 4, 1fr );
    }

    /* Hero */
    .hero-title { font-size: 60px; }

    /* Contact cards — 4 columns on desktop */
    .stripe-fullwidth .contact-cards {
        grid-template-columns: repeat( 4, 1fr );
    }

}


/* ================================================================
   30. ACCESSIBILITY
   ================================================================ */
:focus-visible {
    outline: 2px solid var( --color-accent-gold );
    outline-offset: 3px;
    border-radius: 4px;
}

/* Skip-link for keyboard users */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect( 0, 0, 0, 0 );
    white-space: nowrap;
    border: 0;
}

/* Respektuj preferenci redukce pohybu */
@media ( prefers-reduced-motion: reduce ) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.question-page {
    padding: var( --space-lg ) 0;
}

.back_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var( --color-text-medium );
    font-size: 14px;
    text-decoration: none;
    margin-bottom: var( --space-lg );
    transition: color 0.2s ease;
}

.back_link:hover {
    color: var( --color-accent-gold );
}


/* ================================================================
   ROZCESTNÍK — sloupec (K0)
   ================================================================ */
/* Rozcestník — sloupec */
.rozcestnik-col {
    text-align: center;
}

.rozcestnik-col .qa-list {
    text-align: left;
}


/* ================================================================
   QA LIST (K1 — used globally e.g. in rozcestnik widget)
   ================================================================ */
.qa-list {
    display: grid;
    gap: var( --space-sm );
}

.qa-list-item {
    background: var( --color-bg-white );
    border-radius: 12px;
    padding: var( --space-md ) var( --space-lg );
    border: 1px solid var( --color-border-light );
    cursor: pointer;
    transition: border-color 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    gap: var( --space-md );
}

.qa-list-item:hover {
    border-color: var( --color-accent-gold );
}

.qa-list-item-title {
    font-weight: 600;
    color: var( --color-primary );
    margin-bottom: 2px;
}

.qa-list-item::after {
    content: '→';
    color: var( --color-accent-gold );
    font-size: 18px;
    flex-shrink: 0;
}


/* ================================================================
   BREADCRUMB — home icon (M6)
   ================================================================ */
.breadcrumb li.breadcrumb-home::before {
    content: '🏠 ';
}


/* ================================================================
   LEGAL QUALITY INDICATOR (I3 — dotaz-pravnikovi form)
   ================================================================ */
.legal_quality_indicator {
    margin-top: var( --space-sm );
}

.legal_quality_bar_wrap {
    height: 4px;
    background: var( --color-border-light );
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 6px;
}

.legal_quality_bar_fill {
    height: 100%;
    width: var( --quality-width, 0% );
    border-radius: 2px;
    transition: width 0.3s ease, background-color 0.3s ease;
    background: var( --color-border-light );
}

.legal_quality_bar_fill.short  { background: #e74c3c; }
.legal_quality_bar_fill.medium { background: #f39c12; }
.legal_quality_bar_fill.good   { background: var( --color-primary ); }
.legal_quality_bar_fill.great  { background: #27ae60; }

.legal_quality_text {
    font-size: 13px;
    color: var( --color-text-light );
    min-height: 18px;
    transition: color 0.3s ease;
}

.legal_quality_text.short  { color: #e74c3c; }
.legal_quality_text.medium { color: #f39c12; }
.legal_quality_text.good   { color: var( --color-primary ); }
.legal_quality_text.great  { color: #27ae60; }


/* ================================================================
   ADMIN — detail page utilities
   ================================================================ */

/* UID detail — header block with left gold accent */
.admin-uid-header {
    border-left: 4px solid var( --color-accent-gold );
    padding: var( --space-md ) var( --space-lg );
    margin-bottom: var( --space-md );
    background: var( --color-bg-white );
    border-radius: 0 8px 8px 0;
    box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.06 );
}

.admin-uid-header h2 {
    font-size: 1.5rem;
    margin-bottom: var( --space-xs );
}

.admin-uid-meta {
    display: flex;
    align-items: center;
    gap: var( --space-md );
    flex-wrap: wrap;
    margin-top: var( --space-sm );
}

/* Toolbar divider */
.admin-toolbar-divider {
    width: 1px;
    height: 20px;
    background: var( --color-border-light );
    flex-shrink: 0;
}

.admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var( --space-sm );
    margin-bottom: var( --space-lg );
    padding: var( --space-sm ) var( --space-md );
    background: var( --color-bg-cream );
    border-radius: 8px;
    border: 1px solid var( --color-border-light );
}

.card-tinted {
    background: var( --color-bg-cream );
}

/* Admin — document tiles: bílé pozadí pro kontrast vůči stránce */
.admin-content .card-tinted {
    background: var( --color-bg-white );
}

/* Doc download row — always side by side, never wrap */
.card-tinted .row {
    flex-wrap: nowrap;
    gap: var( --space-sm );
    align-items: flex-start;
}

.card-tinted .row > a,
.card-tinted .row > div {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.card-tinted .row .text-light {
    font-size: 0.8rem;
    word-break: break-word;
}

/* Document download links — compact inline row */
.doc-download-links {
    display: flex;
    gap: var( --space-sm );
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var( --space-sm );
}

.doc-download-links .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.doc-unavailable {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

.doc-icon-sm {
    font-size: 18px;
    line-height: 1;
    display: inline-block;
}

.doc-icon {
    display: block;
    font-size: 64px;
    line-height: 1;
    margin-bottom: var( --space-sm );
}

.doc-icon-disabled {
    opacity: 0.3;
}


/* Admin — hide "Vaše dokumenty" nav item (always, regardless of media query) */
body.admin #yourDocsLink,
body.admin #yourDocsLinkMobile {
    display: none !important;
}

/* Admin — clickable toolbar triggers (non-button) */
.admin-toolbar .dlg_toggle {
    cursor: pointer;
}

/* Admin — email display in toolbar */
.admin-email {
    font-size: 1rem;
    font-weight: 600;
    color: var( --color-text-dark );
    letter-spacing: 0.01em;
}

/* ================================================================
   DOCUMENT PREVIEW — blur for unpaid content
   ================================================================ */
.blur {
    filter: blur( 4px );
    user-select: none;
}

.blur_small {
    filter: blur( 2px );
    user-select: none;
}