/* ================================================================
   PRUVODCE.CSS — Wizard Layout & Components
   ================================================================ */

/* Wizard-specific CSS variables (not used outside of pruvodce) */
:root {
    --color-wizard-nav-bg:       var( --color-primary );
    --color-wizard-tab-active:   var( --color-accent-gold );
    --color-wizard-tab-inactive: rgba( 255, 255, 255, 0.6 );
    --color-doc-preview-bg:      #FFFFFF;
    --color-wizard-body-bg:      #EDE9E1;
    --color-input-focus-bg:      rgba( 196, 162, 101, 0.04 );
}


/* ================================================================
   0. STRIPE OVERRIDE — Reduced top padding for wizard page
   ================================================================ */

.stripe-wizard {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    background: var( --color-wizard-body-bg );
}

.stripe-wizard .container-wide,.pruvodce .container-wide {
    padding: 60px 0;
    max-width: none;
}
.stripe-wizard .container-wide h1, .pruvodce .container-wide h1,
.stripe-wizard .container-wide p, .pruvodce .container-wide p {
    padding: 0 20px;
}

.stripe-wizard > a#pruvodce,
.tab__content > a[ name="pruvodce" ],
.wiz-steps [id^="tab__content"] > a[ name="pruvodce" ] {
    display: block;
    height: 0;
    overflow: hidden;
}


/* ================================================================
   1. LAYOUT — Two-column grid (form | document preview)
   ================================================================ */

.wiz-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
}

/* Desktop preview column — hidden on mobile, shown via slide panel */
.wiz-preview-col {
    display: none;
}

/* Mobile preview overlay — full-screen slide panel */
.wiz-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba( 0, 0, 0, 0 );
    pointer-events: none;
    transition: background 0.3s;
}

.wiz-preview-overlay.open {
    background: rgba( 0, 0, 0, 0.5 );
    pointer-events: auto;
}

.wiz-preview-panel {
    position: fixed;
    top: 8px;
    right: 0;
    bottom: 8px;
    width: 90vw;
    max-width: 480px;
    background: var( --color-bg-white );
    transform: translateX( calc( 100% - 10px ) );
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: visible; /* allow peek tab to protrude left */
    box-shadow: -4px 0 10px rgba( 0, 0, 0, 0.25 );
    border-radius: var( --radius-card );
}

.wiz-preview-overlay.open .wiz-preview-panel {
    transform: translateX( 0 );
}

.wiz-preview-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var( --color-text-light );
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.wiz-preview-close:hover {
    background: var( --color-bg-light-gray );
    color: var( --color-text-dark );
}

.wiz-preview-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Label in mobile slide panel: rounded top corners to match panel */
.wiz-preview-panel-body .wiz-document-label {
    border-radius: 12px 12px 0 0;
}

/* Document in mobile slide panel: no outer border (panel is the container) */
.wiz-preview-panel-body .wiz-document {
    border-left: none;
    border-right: none;
    border-bottom: none;
}


/* ================================================================
   2. PROGRESS BAR (reused by complexity meter)
   ================================================================ */

/* Progress bar track */
.wiz-progress {
    flex: 1;
    height: 8px;
    background: rgba( 196, 162, 101, 0.2 );
    border-radius: var( --radius-sm );
    overflow: hidden;
    position: relative;
}

.wiz-progress-bar {
    background: linear-gradient( 90deg, var( --color-accent-gold ), var( --color-accent-gold-light ) );
    height: 100%;
    border-radius: var( --radius-sm );
    transition: width 0.4s ease;
    min-width: 4px;
}


/* ================================================================
   3. DOCUMENT CHIPS (top-level doc type tabs)
   ================================================================ */

.wiz-doc-tabs {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 4px;
    scrollbar-width: none;
    padding: 20px 24px 0;
    background: linear-gradient( to bottom, var( --color-wizard-nav-bg ) calc( 100% - 3px ), var( --color-wizard-body-bg ) calc( 100% - 3px ) );
    border-bottom: none;
    margin-bottom: 0;
    align-items: flex-end;
    border-radius: 12px 12px 0 0;
}

.wiz-doc-tabs::-webkit-scrollbar {
    display: none;
}

.wiz-doc-tab {
    padding: 14px 24px 16px;
    border-radius: 10px 10px 0 0;
    border: 1px solid rgba( 255, 255, 255, 1 );
    border-bottom: none;
    background: rgba( 255, 255, 255, 0.08 );
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;
    color: #B0B8C8;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.25s ease, background-color 0.25s ease;
    text-decoration: none;
    flex-shrink: 0;
    position: relative;
}

.wiz-doc-tab a {
    color: inherit;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    /* Expand hit-area to full tab padding */
    margin: -14px -24px -16px;
    padding: 14px 24px 16px;
}

.wiz-doc-tab:hover {
    background: rgba( 255, 255, 255, 0.14 );
    color: #ffffff;
}

.wiz-doc-tab.active {
    background: var( --color-wizard-body-bg );
    color: var( --color-primary );
    font-weight: 600;
    border-color: transparent;
}


.wiz-doc-tab.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.wiz-doc-tab.completed {
    background: rgba( 196, 162, 101, 0.15 );
    color: var( --color-accent-gold-light );
}

.wiz-doc-tab .tabicon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    opacity: 0.7;
}

.wiz-doc-tab.active .tabicon {
    opacity: 1;
}


/* ================================================================
   4. ACTIVITY TABS — submenu navigation (Vyplnit / Zkontrolovat / ...)
   ================================================================ */

/* Hide radio inputs — state only */
.wiz-tab-chips input[ type=radio ] {
    display: none;
}

/* ---- Full container ---- */
.wiz-tab-chips {
    background: var( --color-wizard-body-bg );
    border-bottom: 2px solid var( --color-border-light );
}

/* ---- Mobile toggle header (hidden on desktop) ---- */
.wiz-tab-chips-toggle {
    display: none;
}

/* ---- Items row (desktop: horizontal flex) ---- */
.wiz-tab-chips-items {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 14px 28px;
    gap: 0;
    max-width: 600px;
}

.wiz-tab-chips-items::-webkit-scrollbar {
    display: none;
}

/* Connecting line between tabs */
.wiz-tab-connector {
    flex: 1;
    min-width: 16px;
    height: 1px;
    background: var( --color-border-light );
}

/* Tab label */
.wiz-tab-chips label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    user-select: none;
    padding: 0 4px;
}

/* Icon circle */
.wiz-tab-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var( --color-bg-light-gray );
    color: var( --color-text-light );
    font-size: 15px;
    border: 2px solid var( --color-border-light );
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
    line-height: 1;
}

/* Label text */
.wiz-tab-chips label span:not( .wiz-tab-icon ) {
    font-size: 11px;
    font-weight: 500;
    color: var( --color-text-light );
    transition: color 0.2s, font-weight 0.2s;
}

/* Hover */
.wiz-tab-chips label:hover .wiz-tab-icon {
    border-color: var( --color-accent-gold );
    color: var( --color-accent-gold );
}

.wiz-tab-chips label:hover span:not( .wiz-tab-icon ) {
    color: var( --color-primary );
}

/* Active tab */
.wiz-tab-chips input[ type=radio ]:checked + label .wiz-tab-icon {
    background: var( --color-accent-gold );
    border-color: var( --color-accent-gold );
    color: #fff;
}

.wiz-tab-chips input[ type=radio ]:checked + label span:not( .wiz-tab-icon ) {
    color: var( --color-primary );
    font-weight: 700;
}

/* ---- Tab content visibility ---- */
.tab__content {
    display: none;
}

.tab__content.active {
    display: block;
}

/* ================================================================
   4b. ACTIVITY TABS — mobile (collapsible)
   ================================================================ */

@media ( max-width: 767px ) {

    .wiz-tab-chips {
        border-bottom: none;
        background: var( --color-bg-white );
    }

    /* Collapsed toggle header */
    .wiz-tab-chips-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 16px;
        cursor: pointer;
        border-bottom: 1px solid var( --color-border-light );
        user-select: none;
    }

    .wiz-tab-chips-badge {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        background: var( --color-accent-gold );
        color: #fff;
        padding: 3px 9px;
        border-radius: 20px;
        flex-shrink: 0;
    }

    .wiz-tab-chips-info {
        flex: 1;
        font-size: 12px;
        font-weight: 500;
        color: var( --color-text-light );
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .wiz-tab-chips-chevron {
        font-size: 10px;
        color: var( --color-text-light );
        transition: transform 0.2s;
        flex-shrink: 0;
    }

    .wiz-tab-chips.open .wiz-tab-chips-chevron {
        transform: rotate( 180deg );
    }

    /* Items: hidden by default, vertical when open */
    .wiz-tab-chips-items {
        display: none;
        flex-direction: column;
        align-items: stretch;
        padding: 8px 16px 12px;
        gap: 0;
        border-bottom: 1px solid var( --color-border-light );
    }

    .wiz-tab-chips.open .wiz-tab-chips-items {
        display: flex;
    }

    /* Vertical connector */
    .wiz-tab-connector {
        width: 1px;
        min-width: unset;
        height: 14px;
        flex: none;
        margin-left: 17px; /* align with centre of icon */
        background: var( --color-border-light );
    }

    /* Vertical tab label */
    .wiz-tab-chips label {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: var( --radius-sm );
        transition: background 0.15s;
    }

    .wiz-tab-chips label span:not( .wiz-tab-icon ) {
        font-size: 14px;
    }

    /* Active tab gets a white card */
    .wiz-tab-chips input[ type=radio ]:checked + label {
        background: #fff;
        box-shadow: 0 1px 6px rgba( 0, 0, 0, 0.08 );
    }

    .wiz-tab-icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
        flex-shrink: 0;
    }

    .wiz-tab-chips-doc-link {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: var( --radius-sm );
        text-decoration: none;
        color: inherit;
        font-size: 14px;
        transition: background 0.15s;
    }

    .wiz-tab-chips-doc-link:hover {
        background: #fff;
    }
}


/* ================================================================
   5. FORM ELEMENTS — step title, dots, fields
   ================================================================ */

/* Step indicator — "Krok X z Y" */
.wiz-step-indicator {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var( --color-text-light );
    margin-bottom: var( --space-xs );
}

/* Step title */
.wiz-step-title {
    font-family: var( --font-heading );
    font-size: 22px;
    font-weight: 700;
    color: var( --color-primary );
    margin-top: var( --space-lg );
    margin-bottom: var( --space-sm );
    text-align: left;
}

/* Step indicator dots — numbered circles inside form card (light background) */
.wiz-step-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: var( --space-sm );
    flex-wrap: wrap;
    overflow: visible;
}

.wiz-step-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: var( --color-bg-light-gray );
    color: var( --color-text-light );
    /* reset button element defaults */
    border: none;
    padding: 0;
    cursor: pointer;
}

.wiz-step-dot:not( button ) {
    cursor: default;
}

.wiz-step-dot.done {
    background: var( --color-accent-gold );
    color: #fff;
    cursor: pointer;
}

button.wiz-step-dot:hover {
    background: var( --color-primary );
    color: #fff;
    box-shadow: 0 0 0 3px rgba( 196, 162, 101, 0.25 );
}

.wiz-step-dot.current {
    background: var( --color-primary );
    color: #fff;
    box-shadow: 0 0 0 3px rgba( 196, 162, 101, 0.45 );
    font-size: 12px;
    width: 30px;
    height: 30px;
    cursor: default;
}

.wiz-step-dot[ data-tooltip ] {
    position: relative;
}

.wiz-step-dot[ data-tooltip ]::after {
    content: attr( data-tooltip );
    position: absolute;
    top: calc( 100% + 8px );
    left: 50%;
    transform: translateX( -50% );
    background: var( --color-primary );
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: 10;
}

.wiz-step-dot[ data-tooltip ]:hover::after {
    opacity: 1;
}

.wiz-step-connector {
    flex: 0 0 10px;
    height: 2px;
    background: var( --color-border-light );
    flex-shrink: 0;
}

.wiz-step-connector.done {
    background: var( --color-accent-gold );
}


/* Navigation row — mobile: fixed bottom bar */
.wiz-next-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var( --space-md );

    /* Mobile: fixed bottom bar */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var( --space-sm ) var( --space-md );
    background: var( --color-bg-white );
    border-top: 1px solid var( --color-border-light );
    box-shadow: 0 -2px 8px rgba( 0, 0, 0, 0.06 );
    z-index: 100;
}

/* CTA (next/submit) always pinned to right — works whether prevStep exists or not */
.wiz-next-step input[ type=submit ][ name=nextStep ],
.wiz-next-step input[ type=submit ][ name^=nextStep ],
.wiz-next-step input[ type=submit ][ name^=finishDoc ] {
    margin-left: auto;
}

/* Prev button — secondary/outlined style */
.prevStep {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border-radius: var( --radius-sm );
    border: 1.5px solid var( --color-border-light );
    background: var( --color-bg-white );
    color: var( --color-text-medium );
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

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

/* Next/submit button fills remaining width on mobile */
.wiz-next-step .btn,
.wiz-next-step .nextStep,
.wiz-next-step button[type=submit] {
    flex: 1;
}


/* ================================================================
   6. ACTIVITY TAB CONTENT — payment, download, submission
   ================================================================ */

/* Payment status badges — use global .alert.alert-warning / .alert.alert-success */

/* Payment card */
.card-form {
    background: var( --color-bg-white );
    border-radius: var( --radius-card );
    padding: var( --space-xl );
    border-left: 4px solid var( --color-accent-gold );
    box-shadow: var( --shadow-card );
    margin: 10px;
    margin-right: 20px;
}

.card-form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var( --space-sm ) 0;
    border-bottom: 1px solid var( --color-border-light );
}

.card-form-row:last-child {
    border-bottom: none;
}

.card-form-label {
    color: var( --color-text-medium );
    font-size: 14px;
}

.card-form-value {
    font-weight: 600;
    color: var( --color-primary );
    font-size: 14px;
}

/* Order summary cream block */
.card-form-summary {
    background: var( --color-bg-cream );
    border-radius: var( --radius-sm );
    padding: var( --space-md ) var( --space-md ) var( --space-xs );
    margin-bottom: var( --space-md );
}

.card-form-summary-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var( --color-text-light );
    margin-bottom: var( --space-xs );
}

.card-form-summary .card-form-row {
    border-bottom-color: rgba( 0, 0, 0, 0.07 );
}

/* Total row — larger price emphasis */
.card-form-row--total .card-form-value {
    font-size: 18px;
    color: var( --color-primary );
}

/* Toggle switch — optional upsell (e.g. lawyer correction) */
.wiz-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
    flex-shrink: 0;
}

.wiz-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.wiz-toggle-slider {
    position: absolute;
    inset: 0;
    background: var( --color-border-light );
    border-radius: 24px;
    transition: background 0.2s ease;
}

.wiz-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: var( --shadow-sm );
}

.wiz-toggle-switch input:checked + .wiz-toggle-slider {
    background: var( --color-accent-gold );
}

.wiz-toggle-switch input:checked + .wiz-toggle-slider::before {
    transform: translateX( 20px );
}

/* Trust signals row below CTA */
.wiz-trust-bar {
    display: flex;
    justify-content: center;
    gap: var( --space-lg );
    margin-top: var( --space-md );
    flex-wrap: wrap;
}

.wiz-trust-item {
    font-size: 12px;
    color: var( --color-text-light );
    display: flex;
    align-items: center;
    gap: 5px;
}

.wiz-trust-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.card-form-footer {
    text-align: center;
    margin-top: var( --space-lg );
    font-size: 13px;
    color: var( --color-text-light );
}

/* Consent checkbox wrapper */
.wiz-checkbox {
    display: flex;
    gap: var( --space-md );
    align-items: flex-start;
    padding: var( --space-md );
    background: var( --color-bg-cream );
    border-radius: var( --radius-sm );
    margin: var( --space-md ) 0;
}

.wiz-checkbox .small {
    font-size: 13px;
    color: var( --color-text-light );
    margin-top: 4px;
}

/* Download buttons row */
.wiz-download {
    display: flex;
    gap: var( --space-md );
    flex-wrap: wrap;
    margin: var( --space-lg ) 0;
}

/* Download links as icon cards */
.wiz-download a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var( --space-sm ) var( --space-md );
    min-width: 100px;
    text-decoration: none;
}

.wiz-download a img {
    width: 64px;
    height: 64px;
    object-fit: none;
    object-position: left center;
    display: block;
}

.wiz-download a.btn-disabled {
    pointer-events: none;
}

.wiz-download a.btn-disabled img {
    object-position: right center;
}

/* Hint text below download buttons */
.wiz-download-hint {
    font-size: 13px;
    color: var( --color-text-light );
    margin: 0 0 var( --space-md );
}

.wiz-download-hint--locked {
    color: var( --color-text );
    background: var( --color-bg-cream );
    border-left: 3px solid var( --color-primary );
    padding: var( --space-sm ) var( --space-md );
    border-radius: 0 6px 6px 0;
    font-size: 14px;
}

/* Submission card */
.wiz-submission {
    background: var( --color-bg-white );
    border-radius: var( --radius-card );
    padding: var( --space-xl );
    margin-bottom: var( --space-lg );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
}

/* Document list */
.wiz-doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wiz-doc-list li {
    display: flex;
    align-items: center;
    gap: var( --space-sm );
}

/* ================================================================
   7a. PERSON CARDS — numbered cards for persons/children in wizard
   ================================================================ */

.persons-list {
    display: flex;
    flex-direction: column;
    gap: var( --space-md );
    margin-bottom: var( --space-md );
}

.wiz-person-card {
    padding: 0;
    overflow: hidden;
}

.wiz-person-card-header {
    display: flex;
    align-items: center;
    gap: var( --space-md );
    padding: var( --space-md ) var( --space-lg );
    background: var( --color-bg-cream );
    border-bottom: 1px solid var( --color-border-light );
}

.wiz-person-card-title {
    flex: 1;
    font-weight: 600;
    color: var( --color-primary );
}

.wiz-person-card .person {
    padding: var( --space-lg );
}

.wiz-add-person {
    margin-top: var( --space-sm );
}


/* ================================================================
   7. DOCUMENT PREVIEW
   ================================================================ */

.wiz-document {
    background: var( --color-doc-preview-bg );
    border: 1px solid var( --color-border-light );
    border-top: none;
    padding: 32px 28px;
    font-size: 13px;
    line-height: 1.7;
    color: var( --color-text-dark );
    box-shadow: inset 0 2px 8px rgba( 0, 0, 0, 0.04 ), 0 2px 12px rgba( 0, 0, 0, 0.08 );
    border-radius: 0 0 12px 12px;
    min-height: 400px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.wiz-document-label {
    background: var( --color-primary );
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 14px var( --space-lg );
    margin-bottom: 0;
    border-radius: 0;
}

#documentClip {
    /* No overflow here — scrollbar belongs to .wiz-preview-col, not inside the paper */
    overflow-y: visible;
}

/* ================================================================
   7b. DOCUMENT CONTENT STYLES (preview in browser)
   export.css is only loaded for PDF/DOCX export, so we duplicate
   the relevant typographic rules here for the on-screen preview.
   ================================================================ */

.wiz-document .documentContent,
.wiz-document .documentContent p,
.wiz-document .documentContent div,
.wiz-document .documentContent li,
.wiz-document .documentContent pre {
    font-family: "Times New Roman", Times, serif;
    font-size: 11pt;
    line-height: 1.55;
    color: #222;
}

.wiz-document .documentContent pre {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/* Court address block — right-aligned, normal weight, same font */
.wiz-document .court {
    text-align: right;
}

.wiz-document .court h4 {
    font-family: "Times New Roman", Times, serif;
    font-weight: normal;
    font-size: 11pt;
    line-height: 1.5;
    text-align: right;
    margin: 0;
}

/* Main document title */
.wiz-document .documentContent h1 {
    font-family: "Times New Roman", Times, serif;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    margin: 20px 0 12px;
}

/* Party/section headings (Účastník 1, etc.) */
.wiz-document .documentContent h2 {
    font-family: "Times New Roman", Times, serif;
    font-size: 11pt;
    font-weight: bold;
    text-align: left;
    margin: 14px 0 4px;
}

/* Roman numeral section markers and their sub-titles — centered */
.wiz-document .documentContent h3,
.wiz-document .documentContent .paragraph {
    font-family: "Times New Roman", Times, serif;
    font-size: 11pt;
    font-weight: bold;
    text-align: center;
    margin: 14px 0 4px;
}

/* ================================================================ */

/* Highlighted element in the document (JS-driven focus) */
.highlight {
    background: yellow;/*rgba( 196, 162, 101, 0.2 );*/
    border-radius: 3px;
    transition: background 0.3s;
}

/* Info box inserted via JS before the first blurred section — flows naturally in the document */
.blur-paywall-info {
    background: var( --color-bg-cream );
    border-left: 3px solid var( --color-primary );
    border-radius: 0 6px 6px 0;
    padding: var( --space-sm ) var( --space-md );
    margin: var( --space-sm ) 0;
    font-size: 14px;
    font-weight: 600;
    color: var( --color-text );
}


/* ================================================================
   8. DIALOGS — no overrides needed, global styles apply
   ================================================================ */

/* Wizard-specific dialog adjustments if needed */
.wiz-dialog {
    /* intentionally empty — rely on global .dialog styles */
}


/* ================================================================
   9. SAVE PANEL
   ================================================================ */

.wiz-save-panel {
    margin-bottom: var( --space-md );
}

/* Mobile save panel — shown by default, hidden on desktop */
.wiz-save-panel.mobile {
    display: block;
}

/* Desktop save panel — hidden on mobile, shown on desktop */
.wiz-save-panel.desktop {
    display: none;
}

.wiz-save-panel .save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.wiz-save-alert {
    background: var( --color-warning-bg );
    border-left: 3px solid var( --color-warning );
    padding: var( --space-sm ) var( --space-md );
    border-radius: 0 6px 6px 0;
    font-size: 13px;
    color: var( --color-warning );
    margin-bottom: var( --space-md );
}

/* Hide the arrow image in the redesigned save alert */
.wiz-save-alert .arrow {
    display: none;
}


/* ================================================================
   11. PREVIEW BELOW INDICATOR (mobile)
   ================================================================ */

.wiz-preview-below {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: var( --space-md );
    color: var( --color-text-light );
    font-size: 13px;
    cursor: pointer;
    margin-top: var( --space-md );
}

.wiz-preview-below img {
    width: 16px;
    height: auto;
    opacity: 0.5;
}


/* ================================================================
   12. PEEK TAB (mobile — fixed right edge button)
   ================================================================ */

#wizPreviewPeek {
    position: absolute;
    left: -17px;
    top: 50%;
    transform: translateX( -100% ) translateY( -50% ) rotate( -90deg );
    transform-origin: right center;
    background: var( --color-primary );
    color: var( --color-bg-white );
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: -2px 0 8px rgba( 0, 0, 0, 0.2 );
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: background 0.2s;
    pointer-events: auto; /* always clickable even when overlay has pointer-events:none */
}

#wizPreviewPeek:hover {
    background: var( --color-primary-light );
}


/* ================================================================
   13. MISC / UTILITY
   ================================================================ */

/* Show/hide toggles */
.show_hide {
    cursor: pointer;
}

/* Waiting spinner — hidden by default, shown by JS */
#waiting {
    display: none;
}

/* Float-right utility */
.float-right {
    float: right;
    margin-left: var( --space-md );
}

/* Wizard steps container */
.wiz-steps {
    position: relative;
}


/* ================================================================
   14. ADDITIONAL COMPONENTS
   ================================================================ */

/* Step header wrapper */
.wiz-step-header {
    margin-bottom: var( --space-lg );
    padding: var( --space-md ) var( --space-xl ) 0;
}

/* Agreement checkbox row (used in payment tab) */
.wiz-agreement {
    display: flex;
    align-items: flex-start;
    gap: var( --space-sm );
    padding: var( --space-sm ) 0;
}

.wiz-agreement input[ type=checkbox ] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: var( --color-accent-gold );
}

.wiz-agreement label {
    font-size: 14px;
    color: var( --color-text-dark );
    cursor: pointer;
}

/* Navigation actions wrapper (CTA buttons in activity tabs) */
.wiz-nav-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: var( --space-lg );
    margin-top: var( --space-lg );
    border-top: 1px solid var( --color-border-light );
}

/* Submission step card (used in odeslani tab) */
.wiz-submission-step {
    background: var( --color-bg-white );
    border-radius: var( --radius-card );
    padding: var( --space-lg );
    margin-bottom: var( --space-md );
    border: 1px solid var( --color-border-light );
}

/* .wiz-submission-step uses h4 — global h4 style (18px, Inter, 600) applies directly */

.wiz-submission-step ul {
    padding-left: var( --space-lg );
    margin: 0;
}

.wiz-submission-step li {
    padding: var( --space-xs ) 0;
    line-height: 1.6;
}


/* ================================================================
   15. RESPONSIVE — Mobile only (max 767px)
   ================================================================ */

@media ( max-width: 767px ) {

    /* Ensure peek tab is visible on mobile */
    #wizPreviewPeek {
        display: block;
    }

    /* Step header: remove own horizontal padding — container now provides it */
    .wiz-step-header {
        padding-left: 0;
        padding-right: 0;
    }


}


/* ================================================================
   16. RESPONSIVE — Tablet (768px+)
   ================================================================ */

@media ( min-width: 768px ) {

    /* Hide mobile save panel, show desktop save panel */
    .wiz-save-panel.mobile {
        display: none;
    }

    .wiz-save-panel.desktop {
        display: block;
    }

    /* Larger step title on tablet */
    .wiz-step-title {
        font-size: 26px;
    }

    /* Na /pruvodce je uživatel v dokumentech — skrýt redundantní odkaz */
    #yourDocsLink { display: none !important; }

}


/* ================================================================
   17. RESPONSIVE — Desktop (1024px+)
   ================================================================ */

@media ( min-width: 1024px ) {

    /* Hide mobile slide panel on desktop — preview is shown in wiz-preview-col instead */
    .wiz-preview-overlay {
        display: none;
    }

    /* Wizard content needs no max-width constraint on desktop for full-width layout */
    .pruvodce .content {
        max-width: none;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    /* BUG 1: Global .stripe has overflow:hidden which blocks sticky doc-tabs */
    .pruvodce .stripe {
        overflow: visible;
    }

    /* BUG 4: .stripe-fullwidth uses transform:translateX(-50%) for full-width layout,
       but CSS transform creates a new containing block that breaks position:sticky.
       On desktop the container is already max-width:none so the transform is not needed. */
    .pruvodce .stripe.stripe-fullwidth {
        width: 100%;
        left: auto;
        transform: none;
    }

    /* BUG 3: Global .container has max-width:860px which constrains wizard width */
    .pruvodce .container {
        max-width: none;
        padding: 0;
    }

    /* Document chips become sticky header bar on desktop, rounded top corners */
    .wiz-doc-tabs {
        position: sticky;
        top: 0;
        z-index: 200;
        padding: 0 var( --space-xl );
        padding-top: 20px;
        align-items: center;
        margin-bottom: 0;
        border-radius: 12px 12px 0 0;
    }

    .stripe-wizard {
        background: var( --color-wizard-body-bg );
    }

    .wiz-progress {
        flex: 1;
        margin-bottom: 0;
    }

    /* Two-column grid layout — wizard body with padding */
    .wiz-layout {
        display: grid;
        grid-template-columns: 50fr 50fr;
        gap: var( --space-lg );
        align-items: start;
        padding: var( --space-lg );
        border-radius: 0 0 12px 12px;
    }

    /* Postup tab: narrower right column (complexity widget) */
    .stripe-wizard:has( form.general ) .wiz-layout {
        grid-template-columns: 75fr 25fr;
    }

    /* Step header: padding only — card styling provided by wiz-form-col */
    .wiz-step-header {
        padding: var( --space-xl ) var( --space-2xl ) var( --space-md );
        margin-bottom: 0;
    }

    /* Form content: middle part of the white card — no radius on either side */
    .wiz-form-content {
        padding-bottom: var( --space-md );
        border-radius: 0;
        box-shadow: none;
    }

    /* Preview column: JS-driven sticky via initPreviewSticky() in pruvodce.js
       (CSS sticky broken by body overflow-x:hidden causing overflow-y:auto on body,
       which intercepts the sticky containing block) */
    .wiz-preview-col {
        display: block;
        position: relative;
        top: 0;
        align-self: start;
        padding: 0;
        background: transparent;
        min-width: 0; /* prevent column from growing when content is wider */
    }

    /* Document preview card: rounded corners */
    .wiz-document-label {
        border-radius: 12px 12px 0 0;
    }

    /* White paper: fixed height + scrollbar — document scrolls inside the paper */
    .wiz-document {
        max-height: calc( 100vh - 52px - 40px - 44px ); /* minus doc-tabs, topbar, label */
        overflow-y: auto;
    }

    /* Hide page title above the wizard block */
    .pruvodce .stripe > h1,
    .pruvodce .stripe > h2 {
        display: none;
    }

    /* Desktop: navigation buttons are static — card styling provided by wiz-form-col */
    .wiz-next-step {
        position: static;
        background: transparent;
        border-radius: 0;
        border-left: none;
        box-shadow: none;
        padding: var( --space-md ) var( --space-2xl ) var( --space-xl );
        border-top: 1px solid var( --color-border-light );
        margin-top: 0;
    }

    /* Desktop: next button does not need to fill full width */
    .wiz-next-step .btn,
    .wiz-next-step .nextStep,
    .wiz-next-step button[type=submit] {
        flex: 0 0 auto;
    }

    /* Hide mobile-only preview elements on desktop */
    #wizPreviewPeek {
        display: none;
    }

    .wiz-preview-below {
        display: none;
    }

    /* Larger step title on desktop */
    .wiz-step-title {
        font-size: 26px;
    }

}

/* ================================================================
   10. SETTINGS (POSTUP) TAB OVERRIDES
   ================================================================ */

/* Next-step bar: transparent (empty on Postup page, STEPNO=0) */
.general .wiz-next-step {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border-left: none;
}

/* Form content gold-border & wiz-wizard-block shadow: remove for Postup page */
.general .wiz-form-content {
    border-left: none;
}

.stripe-wizard:has( form.general ) .wiz-wizard-block {
    box-shadow: none;
    border-radius: 0;
}

/* Container itself: transparent so cards stand alone */
.general .wiz-form-content {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

/* .card wrapper: transparent spacer between standalone cards */
.general .wiz-form-content .card {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: var( --space-lg );
}

/* Submission block: light card with gold accent border */
.general .wiz-form-content .wiz-submission {
    background: var( --color-bg-white );
    border: 1px solid var( --color-border-light );
    border-top: 3px solid var( --color-accent-gold );
    box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.06 );
    border-radius: 10px;
    padding: var( --space-xl );
    margin-bottom: 0;
    color: var( --color-text-dark );
    overflow: hidden;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Heading inside submission card — decorative separator (font/color/align from global h3) */
.wiz-submission h3 {
    border-bottom: 1px solid var( --color-border-light );
    padding-bottom: var( --space-xs );
}

/* Paragraph text inside light card */
.general .wiz-form-content .wiz-submission > p {
    color: var( --color-text-medium );
    font-size: 14px;
    margin-bottom: var( --space-md );
}

/* Doc list separators on light bg */
.general .wiz-form-content .wiz-doc-list li {
    gap: var( --space-sm );
    align-items: center;
}

/* Badge overrides in doc list: no pill-button look */
.wiz-doc-list .badge {
    background: transparent;
    padding: 0 2px;
    border-radius: 0;
}

.wiz-doc-list .badge-success {
    color: var( --color-success );
    font-weight: 700;
    font-size: 12px;
}

/* Document icon inside submission doc-list buttons */
.doc-btn-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    opacity: 0.75;
    margin-right: 4px;
    flex-shrink: 0;
}

/* Note text below the doc list */
.wiz-submission-note {
    font-size: 12px;
    color: var( --color-text-light );
    font-style: italic;
    margin-top: var( --space-sm );
    margin-bottom: 0;
    padding-left: var( --space-xs );
}

/* Submission body: doc list + icon side by side */
.submission-body {
    display: flex;
    align-items: center;
    gap: var( --space-lg );
}

.submission-body .wiz-doc-list {
    flex: 1;
    margin: 0;
}

/* Visualization image: vertically centered, to the right of doc list */
.submission-visual {
    float: none;
    flex-shrink: 0;
    height: 72px;
    width: auto;
    opacity: 0.6;
    display: block;
}

@media ( max-width: 767px ) {
    /* Hide decorative submission icon — prevents horizontal overflow on mobile */
    .submission-visual {
        display: none;
    }
}

/* Back button uses existing .prevStep class (defined in section 5 above) */

/* Toolbar above the settings grid — back button lives here (full-width row) */
.wiz-settings-toolbar {
    background: var( --color-wizard-body-bg );
    padding: var( --space-md ) var( --space-lg ) 0;
}

/* Settings right-col: transparent wrapper — complexity boxes float directly in sidebar */
.wiz-document.settings {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    border-radius: 0;
}

@media ( min-width: 900px ) {

    /* Settings right-col: remove top border that .wiz-document base rule would add */
    .wiz-document.settings {
        border-top: none;
    }

}


/* ================================================================
   18. MOBILE STICKY BOTTOM BAR
   ================================================================ */

/* Hidden on desktop — shown only on mobile via media query */
.wiz-mobile-bar {
    display: none;
}

@media ( max-width: 767px ) {

    /* Top header + footer hidden on /pruvodce — replaced by sticky bottom bar */
    body.pruvodce .header,
    body.pruvodce footer.footer,
    body.pruvodce .copyright {
        display: none;
    }

    /* Sticky bottom bar */
    .wiz-mobile-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var( --color-primary );
        align-items: center;
        padding: 0 12px;
        z-index: 150;
        box-shadow: 0 -2px 10px rgba( 0, 0, 0, 0.25 );
        gap: 0;
    }

    /* Combined logo + hamburger — one big button */
    .wiz-mobile-bar-start {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        background: none;
        border: none;
        padding: 6px 8px 6px 4px;
        cursor: pointer;
        color: rgba( 255, 255, 255, 0.85 );
        user-select: none;
    }

    .wiz-mobile-bar-logo-img {
        height: 26px;
        width: auto;
        display: block;
        opacity: 0.9;
    }

    .wiz-mobile-bar-menu-icon {
        font-size: 20px;
        line-height: 1;
    }

    .wiz-mobile-bar-nav {
        margin-left: auto;
        display: flex;
        gap: 6px;
        align-items: center;
    }

    /* Compact prev/next inside bar */
    .wiz-mobile-bar-nav .prevStep {
        padding: 7px 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .wiz-mobile-bar-nav .cta {
        padding: 9px 14px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Hide original wiz-next-step on mobile — buttons are in sticky bar */
    .wiz-next-step {
        display: none !important;
    }

    /* Extra bottom padding so form content isn't hidden behind sticky bar */
    .stripe-wizard {
        padding-bottom: 72px;
    }

}


/* ================================================================
   19a. WIZARD MOBILE MENU OVERLAY
   ================================================================ */

.wiz-mob-menu {
    display: none;
}

@media ( max-width: 767px ) {

    .wiz-mob-menu.open {
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 56px; /* height of mobile bar */
        z-index: 145; /* below mobile bar (150), above page content */
        flex-direction: column;
        overflow: hidden;
        background: var( --color-wizard-body-bg );
    }

    .wiz-mob-menu-header {
        flex-shrink: 0;
    }

    .wiz-mob-menu-body {
        flex: 1;
        overflow-y: auto;
        padding: var( --space-md ) var( --space-md ) var( --space-lg );
        display: flex;
        flex-direction: column;
        gap: var( --space-sm );
    }

    .wiz-mob-menu-logo {
        display: block;
        text-align: center;
    }

    .wiz-mob-menu-logo img {
        height: 34px;
        width: auto;
    }

    .wiz-mob-menu-overview {
        margin-bottom: var( --space-xs );
    }

    .wiz-mob-menu-docs,
    .wiz-mob-menu-actions {
        display: flex;
        flex-direction: column;
        gap: var( --space-xs );
    }

    .wiz-mob-menu-tile {
        display: flex;
        align-items: center;
        gap: var( --space-sm );
        text-decoration: none;
        color: var( --color-text-dark );
    }

    .wiz-mob-menu-tile:hover {
        color: var( --color-primary );
        background: var( --color-bg-card-hover );
    }

    .wiz-mob-menu-tile .tabicon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        opacity: 0.7;
    }

    .wiz-mob-menu-tile .wiz-tab-icon {
        font-size: 20px;
        flex-shrink: 0;
        width: 24px;
        text-align: center;
    }

    .wiz-mob-menu-nav-links {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 4px 0;
    }

    .wiz-mob-menu-nav-links a {
        padding: 10px var( --space-md );
        color: var( --color-text-medium );
        text-decoration: none;
        font-size: 15px;
    }

    .wiz-mob-menu-nav-links a:hover {
        color: var( --color-primary );
    }

    /* Skrýt plovoucí prvky nad overlayem */
    body.wiz-menu-open #wizPreviewPeek,
    body.wiz-menu-open .chat_widget_btn {
        display: none !important;
    }

}


/* ================================================================
   19. COMPLEXITY SIDEBAR WIDGETS
   ================================================================ */

/* Progress bar wrapper with label row below */
.wiz-complexity-meter {
    margin-top: var( --space-sm );
}

.wiz-complexity-meter .wiz-progress {
    height: 8px;
    margin-bottom: var( --space-xs );
}

.wiz-complexity-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var( --color-text-light );
    letter-spacing: 0.2px;
}

/* Document names list in sidebar — no border, compact */
#docNamesList.wiz-doc-list li {
    font-size: 13px;
    color: var( --color-text-dark );
    gap: var( --space-xs );
}

#docNamesList.wiz-doc-list li::before {
    content: "📄";
    font-size: 12px;
    flex-shrink: 0;
}

/* "Naše cena" — highlighted large price */
.wiz-our-price {
    font-size: 20px;
    font-weight: 700;
    color: var( --color-accent-gold-dark );
}

/* "~" approximation prefix */
.wiz-price-approx {
    color: var( --color-text-light );
    font-weight: 400;
}

/* Payment logos row */
.card-formment-logos {
    max-width: 150px;
    margin-top: var( --space-xs );
    display: block;
}

/* Compact card-form boxes inside the complexity sidebar */
#complexityHolder .card-form {
    padding: var( --space-md ) var( --space-lg );
    margin-bottom: var( --space-sm );
}

#complexityHolder .card-form-label {
    white-space: nowrap;
    font-size: 13px;
}

#complexityHolder .card-form-value {
    font-size: 13px;
    text-align: right;
}

#complexityHolder .wiz-our-price {
    font-size: 17px;
}

/* Card title inside complexity sidebar boxes */
.wiz-complexity-title {
    font-size: 13px;
    font-weight: 700;
    color: var( --color-primary );
    margin-bottom: var( --space-sm );
    padding-bottom: var( --space-xs );
    border-bottom: 1px solid var( --color-border-light );
    display: flex;
    align-items: center;
    gap: 6px;
}

.wiz-complexity-title .wiz-infobox-icon {
    font-size: 15px;
    flex-shrink: 0;
    opacity: 0.85;
}


/* ================================================================
   19. INFO SIDEBAR BOXES — visually distinct from form cards
   ================================================================ */

/* Right-column .card-form boxes: passive status displays, not interactive forms. */
.wiz-preview-col .card-form {
    background: var( --color-bg-cream );
    border-top: none;
    border-left: none;
    border-radius: var( --radius-sm );
    padding: var( --space-md ) var( --space-lg );
    overflow: hidden;
}

.wiz-preview-col .wiz-complexity-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    font-weight: 700;
    background: var( --color-primary );
    margin: calc( -1 * var( --space-md ) ) calc( -1 * var( --space-lg ) ) var( --space-md );
    padding: var( --space-sm ) var( --space-lg );
    border-bottom: none;
}

.address_warning {
    color: red;
    display: none;
}


/* ================================================================
   20. SUBMISSION STEPS — numbered step cards on Odeslat tab
   ================================================================ */

/* Wrapper resets the counter */
.wiz-submission-steps {
    counter-reset: wiz-step;
}

/* Each step card increments the counter and gets a gold left accent */
.wiz-submission-steps .wiz-submission-step {
    counter-increment: wiz-step;
    border: 1px solid var( --color-border-light );
    border-left: 3px solid var( --color-accent-gold );
}

/* Step heading row: number circle + title side by side */
.wiz-submission-steps .wiz-submission-step h4 {
    display: flex;
    align-items: center;
    gap: var( --space-sm );
    margin-bottom: var( --space-sm );
}

/* Numbered circle using CSS counter */
.wiz-submission-steps .wiz-submission-step h4::before {
    content: counter( wiz-step );
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var( --color-accent-gold );
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}


/* ================================================================
   20b. MULTIFIELD ITEMS — opakující se položky (majetek, dluhy, …)
   ================================================================ */
.vertical_margin {
    margin-bottom: var( --space-sm );
}

/* List container — resets CSS counter for auto-numbering */
.multifield-list  {
    display: flex;
    flex-direction: column;
    gap: var( --space-sm );
    margin-bottom: var( --space-xs );
    counter-reset: multifield-counter;
}

/* Item row: number badge + field + delete icon */
.multifield-item {
    display: flex;
    align-items: flex-start;
    gap: var( --space-sm );
    counter-increment: multifield-counter;
    background: var( --color-bg-light-gray );
    border: 1px solid var( --color-border-light );
    border-radius: var( --radius-sm );
    padding: var( --space-sm ) var( --space-sm );
}

/* Number badge */
.multifield-item::before {
    content: counter( multifield-counter );
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    min-width: 26px;
    background: #fff;
    border: 1px solid var( --color-border-light );
    border-radius: var( --radius-xs );
    font-size: 12px;
    font-weight: 700;
    color: var( --color-text-light );
    margin-top: 7px;
    flex-shrink: 0;
}

/* Field inside the card takes all remaining width */
.multifield-item .field-group {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

/* Delete × icon — top-right, red on hover */
.multifield-item .multifield-delete {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 5px;
    background: none;
    border: none;
    padding: 3px 6px;
    cursor: pointer;
    color: #bbb;
    font-size: 17px;
    line-height: 1;
    border-radius: var( --radius-xs );
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
    display: inline-block;
}

.multifield-item .multifield-delete:hover {
    color: #c0392b;
    background: rgba( 192, 57, 43, 0.09 );
}

/* Add button row — icon circle + label */
.multifield-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var( --space-xs );
    margin-bottom: var( --space-lg );
    border-bottom: 1px solid var( --color-border-light );
    padding-bottom: var( --space-lg );
}

a.addItem {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var( --color-text-light );
    text-decoration: none;
    padding: 4px 0;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s;
}

a.addItem::before {
    content: "+";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    background: var( --color-accent-gold );
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

a.addItem:hover {
    color: var( --color-text );
}

/* Item count badge — shown next to add button */
.multifield-count {
    font-size: 12px;
    color: var( --color-text-light );
    background: var( --color-bg-light-gray );
    border: 1px solid var( --color-border-light );
    border-radius: 10px;
    padding: 2px 9px;
    white-space: nowrap;
}

/* Empty state — dashed placeholder when list has no items */
.multifield-list.is-empty {
    border: 2px dashed var( --color-border-light );
    border-radius: var( --radius-sm );
    padding: var( --space-md );
    justify-content: center;
    align-items: center;
    min-height: 60px;
    gap: 0;
    background: none;
}

.multifield-list.is-empty::after {
    content: attr( data-empty-label );
    color: var( --color-text-light );
    font-size: 13px;
    text-align: center;
}

/* Table-mode derived items (ownership radio rows) — no card, keep table look */
table.options .multifield-item {
    background: none;
    border: none;
    border-left: none;
    border-radius: 0;
    padding: 0;
    display: table-row;
}

table.options .multifield-item::before {
    display: none;
}


/* ================================================================
   21. COLLAPSIBLE DESCRIPTIONS — details/summary pattern
   ================================================================ */

/* Field-level description — always visible */
div.field-description {
    font-size: 12px;
    color: var( --color-text-light );
    line-height: 1.5;
    margin-top: var( --space-xs );
}

/* Group-level explanation (multifield header) — collapsible */
details.description,
details.field-explanation {
    margin-top: var( --space-xs );
    margin-bottom: var( --space-xs );
}

details.description > summary,
details.field-explanation > summary {
    font-size: 12px;
    font-weight: 500;
    color: var( --color-text-light );
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 0;
    transition: color 0.15s;
}

details.description > summary:hover,
details.field-explanation > summary:hover {
    color: var( --color-primary );
}

/* Hide default browser triangle */
details.description > summary::-webkit-details-marker,
details.field-explanation > summary::-webkit-details-marker {
    display: none;
}

/* Custom arrow — rotates when open */
details.description > summary::before,
details.field-explanation > summary::before {
    content: '▶';
    font-size: 8px;
    display: inline-block;
    transition: transform 0.2s;
    color: var( --color-accent-gold );
    flex-shrink: 0;
}

details.description[open] > summary::before,
details.field-explanation[open] > summary::before {
    transform: rotate( 90deg );
}

/* Content of group-level description */
details.description > .field-desc-body {
    font-size: 13px;
    color: var( --color-text-medium );
    line-height: 1.5;
    margin-top: var( --space-xs );
    padding: var( --space-sm ) var( --space-md );
    background: var( --color-bg-cream );
    border-radius: 0 6px 6px 6px;
    border-left: 3px solid var( --color-accent-gold );
}

/* Content of field-level explanation (collapsible) */
details.field-explanation > .field-desc-body {
    font-size: 12px;
    color: var( --color-text-light );
    line-height: 1.5;
    margin-top: var( --space-xs );
    padding: var( --space-sm ) var( --space-md );
    background: var( --color-bg-cream );
    border-radius: 0 6px 6px 6px;
    border-left: 3px solid var( --color-border-light );
}

details.field-explanation > .field-desc-body ul {
    margin: var( --space-xs ) 0 0 0;
    padding-left: var( --space-lg );
}

details.field-explanation > .field-desc-body li {
    padding: 2px 0;
}

/* ================================================================
   22. TOGGLER — CSS checkbox hack pro "zobrazit podrobnosti" v explanation
   ================================================================ */

/* Hidden checkbox — funkce je přes <label for="id"> */
input.toggler {
    display: none;
}

/* Výchozí stav: obsah skrytý (checkbox je při načtení checked = collapsed) */
p.toggle {
    display: none;
    margin-top: var( --space-xs );
    padding: var( --space-xs ) var( --space-sm );
    background: var( --color-bg-white );
    border-left: 2px solid var( --color-border-light );
    border-radius: 0 4px 4px 4px;
    font-size: 13px;
    color: var( --color-text-medium );
    line-height: 1.5;
}

/* Po kliknutí (unchecked) → obsah se zobrazí */
input.toggler:not( :checked ) ~ p.toggle {
    display: block;
}

/* Label — kurzor + styling jako klikací odkaz */
label.toggler {
    cursor: pointer;
    color: var( --color-primary );
    font-size: 13px;
    font-style: italic;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

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


/* ================================================================
   23. MISC
   ================================================================ */

.wiz-document .highlight {
    display: inline-block;
    min-width: 1em;
}


/* ================================================================
   24. BULK PAYMENT OVERLAY
   ================================================================ */

.bulk-trigger {
    position: relative;
    margin: var( --space-md ) 0 var( --space-sm );
    background: var( --color-bg-cream );
    border: 1.5px solid var( --color-border-gold );
    border-radius: var( --radius-card );
    padding: var( --space-md );
    text-align: center;
}

.bulk-trigger-badge {
    position: absolute;
    top: -13px;
    right: var( --space-md );
    background: var( --color-accent-gold );
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 20px;
}

.bulk-trigger a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var( --space-xs );
    font-size: 15px;
    font-weight: 700;
    color: var( --color-accent-gold-dark );
    text-decoration: none;
}

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

.bulk-trigger-icon {
    font-size: 18px;
    line-height: 1;
}

.bulk-trigger-arrow {
    font-weight: 400;
    opacity: 0.7;
}

#bulkPaymentOverlay {
    display: none;
}

.bulk-overlay {
    position: fixed;
    inset: 0;
    background: var( --color-wizard-body-bg );
    z-index: 1100;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.bulk-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
}

.bulk-header {
    background: var( --color-bg-white );
    border-bottom: 1px solid var( --color-border-light );
    padding: 14px var( --space-md );
    display: flex;
    align-items: center;
    gap: var( --space-sm );
    flex-shrink: 0;
}

.bulk-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var( --color-border-light );
    background: none;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var( --color-text-medium );
}

.bulk-back:hover {
    border-color: var( --color-accent-gold );
    color: var( --color-accent-gold );
}

.bulk-header h1 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.bulk-body {
    flex: 1;
    overflow-y: auto;
    padding: var( --space-md ) var( --space-md ) 0;
}

.bulk-intro {
    font-size: 14px;
    color: var( --color-text-medium );
    margin-bottom: var( --space-md );
    padding-bottom: var( --space-md );
    border-bottom: 1px solid var( --color-border-light );
}

/* Document card */
.bulk-doc-card {
    background: var( --color-bg-white );
    border: 1.5px solid var( --color-border-light );
    border-radius: var( --radius-card );
    margin-bottom: var( --space-sm );
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.bulk-doc-card--included {
    border-color: var( --color-primary );
}

.bulk-doc-card--paid {
    border-color: var( --color-accent-gold );
    opacity: 0.7;
    pointer-events: none;
}

.bulk-doc-card--pending {
    border-color: var( --color-border-light );
    opacity: 0.7;
    pointer-events: none;
}

.bulk-doc-status--pending {
    color: var( --color-text-light );
    font-weight: 600;
}

.bulk-doc-main {
    padding: var( --space-md );
    display: flex;
    align-items: center;
    gap: var( --space-sm );
    cursor: pointer;
}

.bulk-doc-card--paid .bulk-doc-main,
.bulk-doc-card--pending .bulk-doc-main {
    cursor: default;
}

.bulk-doc-check {
    width: 24px;
    height: 24px;
    border-radius: var( --radius-xs );
    flex-shrink: 0;
    border: 2px solid var( --color-border-light );
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: transparent;
    transition: all 0.2s ease;
}

.bulk-doc-card--included .bulk-doc-check {
    border-color: var( --color-primary );
    background: var( --color-primary );
    color: white;
}

.bulk-doc-card--paid .bulk-doc-check {
    border-color: var( --color-accent-gold );
    background: rgba( 196, 162, 101, 0.15 );
    color: var( --color-accent-gold );
}

.bulk-doc-info {
    flex: 1;
}

.bulk-doc-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

.bulk-doc-status {
    font-size: 12px;
    color: var( --color-text-light );
}

.bulk-doc-status--paid {
    color: var( --color-accent-gold );
    font-weight: 600;
}

.bulk-doc-price {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/* Lawyer toggle inside doc card */
.bulk-lawyer-row {
    padding: 0 var( --space-md ) var( --space-md );
    display: none;
}

.bulk-doc-card--included .bulk-lawyer-row {
    display: block;
}

.bulk-lawyer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var( --color-bg-cream );
    border-radius: var( --radius-sm );
    cursor: pointer;
    transition: background 0.2s ease;
}

.bulk-lawyer-toggle:hover {
    background: var( --color-bg-warm-sand );
}

.bulk-lawyer-toggle--active {
    background: rgba( 196, 162, 101, 0.1 );
}

.bulk-lawyer-left {
    display: flex;
    align-items: center;
    gap: var( --space-sm );
    font-size: 13px;
}

.bulk-lawyer-label {
    font-weight: 500;
}

.bulk-lawyer-price {
    font-size: 12px;
    color: var( --color-text-light );
}

.bulk-lawyer-toggle--active .bulk-lawyer-price {
    color: var( --color-accent-gold );
    font-weight: 600;
}

.bulk-toggle-switch {
    width: 40px;
    height: 22px;
    border-radius: 11px;
    background: var( --color-border-light );
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.bulk-toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: white;
    transition: left 0.2s ease;
    box-shadow: var( --shadow-sm );
}

.bulk-lawyer-toggle--active .bulk-toggle-switch {
    background: var( --color-accent-gold );
}

.bulk-lawyer-toggle--active .bulk-toggle-switch::after {
    left: 20px;
}

/* Hidden real checkboxes */
.bulk-hidden-check {
    display: none;
}

/* Sticky footer (content + summary + submit) */
.bulk-footer {
    flex-shrink: 0;
    background: var( --color-bg-white );
    border-top: 1px solid var( --color-border-light );
    padding: var( --space-md );
    margin-top: var( --space-sm );
}

.bulk-footer-lines {
    font-size: 13px;
    color: var( --color-text-medium );
    margin-bottom: var( --space-xs );
}

.bulk-footer-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 3px 0;
}

.bulk-footer-line--discount {
    margin-top: var( --space-xs );
    padding: 6px 10px;
    background: var( --color-success-bg );
    border-radius: var( --radius-xs );
    color: var( --color-success );
    font-weight: 700;
    font-size: 14px;
}

.bulk-footer-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 20px;
    font-weight: 700;
    padding-top: var( --space-sm );
    margin-top: var( --space-xs );
    border-top: 2px solid var( --color-text-dark );
    margin-bottom: var( --space-md );
}

.screen-content {
    margin: 5px;
    margin-right: 20px;
}

/* Desktop: wider layout */
@media ( min-width: 768px ) {
    .bulk-header {
        padding: var( --space-md ) var( --space-xl );
    }
    .bulk-header h1 {
        font-size: 22px;
    }
    .bulk-body {
        padding: var( --space-lg ) var( --space-xl ) 0;
    }
    .bulk-footer {
        padding: var( --space-md ) var( --space-xl );
    }
    .bulk-doc-main {
        padding: var( --space-md ) var( --space-lg );
    }
    .bulk-lawyer-row {
        padding: 0 var( --space-lg ) var( --space-md );
    }
    .screen-content {
        margin: 0;
        margin-right: 0;
    }
}