/* ============================================================================
   24Safe customer-portal theme — the www.24safe.cz look (cz/schranky) layered
   on top of Bootstrap 5.

   Tokens are lifted from the marketing site's build/app.css:
     bg-blue-darkest #04153e (page)   bg-blue-darker #04153c (header)
     bg-blue-dark3   #032a57 (panels) text-blue      #0096d6 (accent)
     border-blue-light #5cbae9 (button frame)   glow #56cff4
   Buttons are the site's global-link-component: square 1px light-blue frame,
   UPPERCASE, blue arrow that slides in, glint strip on the frame. Page headers
   are the .page-banner band with the outlined glowing section word.
   Brand font is Adobe "proxima-nova"; Figtree (Google Fonts) is the fallback.
   ========================================================================== */

:root {
    --s24-navy: #04153e;          /* page background                */
    --s24-navy-deep: #04153c;     /* header                         */
    --s24-panel: #032a57;         /* panels / table cells / tiles   */
    --s24-panel-2: #062048;       /* inset surfaces inside a panel  */
    --s24-cyan: #0096d6;          /* accent                          */
    --s24-cyan-light: #5cbae9;    /* button frame                   */
    --s24-cyan-glow: #56cff4;     /* outline-title glow / focus     */
    --s24-line: rgba(92, 186, 233, .22);
    --s24-muted: #a9bcd6;
    --s24-danger: #f0616b;
    --s24-warning: #f2c14e;
    --s24-success: #3ccb8c;
    --s24-font: "proxima-nova", "Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
    --s24-arrow: url("/theme/images/components/ico-arrow-right-blue.svg");
    --s24-glint: url("/theme/images/components/button-border-shape.svg");
    /* www.24safe.cz motion (Tailwind): ease-in-out = cubic-bezier(.4,0,.2,1);
       arrow duration-500, glint strips duration-700, glow opacity .5s (CSS ease-in-out). */
    --s24-ease: cubic-bezier(.4, 0, .2, 1);

    /* Re-point Bootstrap's theme tokens at the 24Safe palette. */
    --bs-primary: #0096d6;
    --bs-primary-rgb: 0, 150, 214;
    --bs-link-color: #5cbae9;
    --bs-link-color-rgb: 92, 186, 233;
    --bs-link-hover-color: #ffffff;
    --bs-body-bg: #04153e;
    --bs-body-color: #ffffff;
    --bs-body-font-family: var(--s24-font);
    --bs-border-color: rgba(92, 186, 233, .22);
    --bs-secondary-color: #a9bcd6;
}

/* ----------------------------------------------------------------- base --- */
body {
    background-color: var(--s24-navy);
    color: #fff;
    font-family: var(--s24-font);
    font-size: 1rem;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.site-main {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

a {
    color: var(--s24-cyan-light);
    text-decoration: none;
}

    a:hover {
        color: #fff;
    }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--s24-font);
    color: #fff;
    font-weight: 600;
    text-wrap: balance;
}

/* In-page section heading (pages whose h1 lives in the banner). */
.page-title {
    color: #fff;
    font-size: 1.75rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin: 2rem 0 1rem;
}

hr {
    border-color: var(--s24-line);
    opacity: 1;
}

.text-muted {
    color: var(--s24-muted) !important;
}

:focus-visible {
    outline: 2px solid var(--s24-cyan-glow);
    outline-offset: 2px;
}

/* ----------------------------------------------------------- site header -- */
.site-header {
    background: var(--s24-navy-deep);
    position: sticky;
    top: 0;
    z-index: 1030;
    line-height: 1.75rem; /* the site's body line-height (28px) */
}

    .site-header .navbar {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* header__wrapper: container-fluid max-w-containerFluid (90%). */
    .site-header .site-header__inner {
        max-width: 90%;
        padding-left: 0;
        padding-right: 0;
    }

    .site-header .navbar-brand img {
        height: 49px;
        width: auto;
        display: block;
    }

    /* Site header__brand mr-10; no Bootstrap brand padding, so the header is
       py-4 + the 49px logo tall, as on the site. */
    .site-header .navbar-brand {
        margin-right: 2.5rem;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Site header__nav-link: text-menuItem (15px / line-height 1.75), px-2,
       the 2px underline as an in-flow block under the text (link 28.25px tall). */
    .site-header .nav-link {
        display: block;
        color: #fff;
        font-size: .9375rem;
        line-height: 1.75;
        font-weight: 600;
        text-transform: uppercase;
        padding: 0 .5rem;
    }

    /* Collapsed (hamburger) menu below 1750px: stacked links. */
    .site-header .navbar-collapse {
        padding: 1rem 0;
    }

        /* www.24safe.cz underline that grows in from the centre */
        .site-header .nav-link::after {
            content: "";
            display: block;
            border-bottom: 2px solid var(--s24-cyan);
            transform: scaleX(0);
            transition: transform .3s cubic-bezier(.4, 0, .2, 1);
        }

        .site-header .nav-link:hover {
            color: #fff;
        }

        /* header__nav-link--active: accent text + full underline. */
        .site-header .nav-link.active {
            color: var(--s24-cyan);
        }

            .site-header .nav-link:hover::after,
            .site-header .nav-link.active::after {
                transform: scaleX(1);
            }

    /* White hamburger on the dark header (the site's menu-toggle). */
    .site-header .navbar-toggler {
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        color: #fff;
    }

/* header__right-box: space-x-6, kept clear of the last nav item. */
.header-right {
    gap: 1.5rem;
}


.header-account {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    text-transform: uppercase;
    font-size: .9375rem;
    line-height: 1.75;
    font-weight: 600;
}

    .header-account:hover {
        color: #fff;
    }

    /* header__account span:after — underline grows in on hover. */
    .header-account__label::after {
        content: "";
        display: block;
        border-bottom: 2px solid var(--s24-cyan);
        transform: scaleX(0);
        transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    }

    .header-account:hover .header-account__label::after {
        transform: scaleX(1);
    }

.header-account__fa {
    border: 1px solid #fff;
    border-radius: 9999px;
    height: 33px;
    width: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .3s ease, color .3s ease;
}

    .header-account:hover .header-account__fa {
        border-color: var(--s24-cyan);
        color: var(--s24-cyan);
    }

    .header-account__fa svg {
        height: 1rem;
        width: auto;
    }

/* Site language button: text-xl, menuItem size from 2xl (1536px). */
.lang-switch .dropdown-toggle {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.75rem; /* text-xl's line-height, kept at the 2xl size too */
    padding: 0;
}

@media (min-width: 1536px) {
    .lang-switch .dropdown-toggle {
        font-size: .9375rem;
    }
}

/* Desktop menu from the site's 3xl breakpoint (1750px), hamburger below —
   www.24safe.cz shows its 7-item nav row only from there. Mirrors Bootstrap's
   .navbar-expand-* rules at a custom breakpoint (.navbar-expand-site). Item
   spacing is the site's lg:space-x-16 (4rem); with the site's own Proxima Nova
   kit loaded, the row fits from 1750px exactly as on the site. */
@media (min-width: 1750px) {
    .navbar-expand-site {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

        .navbar-expand-site .navbar-nav {
            flex-direction: row;
        }

        .navbar-expand-site .navbar-collapse {
            display: flex !important;
            flex-basis: auto;
            padding: 0;
        }

        .navbar-expand-site .navbar-toggler {
            display: none;
        }

    /* The site's desktop row: logo | nav | right box as flex siblings with
       justify-between (the collapse wrapper steps aside via display:contents),
       items 4rem apart (lg:space-x-16). When the row is too narrow the flex
       items shrink and the labels wrap onto two lines — exactly what
       www.24safe.cz does (e.g. at 1920px), header growing with them. */
    .navbar-expand-site .site-header__inner {
        flex-wrap: nowrap;
        justify-content: space-between;
    }

    .navbar-expand-site .navbar-collapse {
        display: contents !important;
    }

    .navbar-expand-site .navbar-brand {
        flex: 0 1 auto;
        min-width: 0;
    }

        .navbar-expand-site .navbar-brand img {
            max-width: 100%;
        }

    .navbar-expand-site .navbar-nav {
        flex: 0 1 auto;
        margin: 0;
    }

        .navbar-expand-site .navbar-nav .nav-item {
            display: flex;
        }

            .navbar-expand-site .navbar-nav .nav-item + .nav-item {
                margin-left: 4rem;
            }

    .navbar-expand-site .header-right {
        flex: 0 1 auto;
    }

        .navbar-expand-site .header-account {
            white-space: normal;
        }
}

    .lang-switch .dropdown-toggle {
        display: inline-flex;
        align-items: center;
    }

    .lang-switch .dropdown-toggle::after {
        content: none;
    }

.lang-switch__chevron {
    width: 1rem;
    height: 1rem;
    margin-left: .5rem;
}

.lang-switch .dropdown-menu {
    --bs-dropdown-bg: var(--s24-navy-deep);
    --bs-dropdown-link-color: #fff;
    --bs-dropdown-link-hover-bg: var(--s24-panel);
    --bs-dropdown-link-hover-color: var(--s24-cyan-light);
    --bs-dropdown-border-color: var(--s24-cyan);
    --bs-dropdown-border-width: 2px;
    --bs-dropdown-border-radius: .5rem;
    min-width: 5rem;
    text-transform: uppercase;
    font-weight: 600;
    font-size: .875rem;
    text-align: center;
}

/* ----------------------------------------------------------- page banner -- */
.page-banner {
    position: relative;
    z-index: 1;
    overflow-x: clip;
    overflow-y: visible;
    padding: 3.5rem 0 3.25rem;
    text-align: center;
    background:
        radial-gradient(60% 90% at 88% 40%, rgba(0, 150, 214, .30), transparent 70%),
        radial-gradient(40% 60% at 0% 0%, rgba(86, 207, 244, .16), transparent 70%),
        linear-gradient(180deg, #061c4e 0%, var(--s24-navy) 100%);
}

.page-banner__inner {
    position: relative;
}

/* ------------------------------------------------- floating hexagons --- */
/* www.24safe.cz .floating-hexagon: 371px-wide outline-hexagon art, xl+ only,
   above the content (z 60 on the site) but click-through. hexagons.js lifts
   the image 200px -> 0 as it scrolls into view. */
.floating-hexagons {
    display: none;
    position: absolute;
    width: 100%;
    max-width: 371px;
    pointer-events: none;
    z-index: 60;
}

    .floating-hexagons img {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
        will-change: transform;
    }

/* Banner: bottom-right, hanging a quarter below the banner (lg:-bottom-1/4). */
.floating-hexagons--banner {
    right: 0;
    bottom: -25%;
}

/* Page body: left edge, lower third, image pushed half off-screen (lg:-left-1/2). */
.floating-hexagons--side {
    left: 0;
    bottom: 33%;
}

    .floating-hexagons--side img {
        left: -50%;
    }

.site-body {
    position: relative;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    overflow-x: clip;
}

@media (min-width: 1280px) {
    .floating-hexagons {
        display: block;
    }
}

/* The site's .page-banner__bigTitle: transparent fill, 1px blue stroke, glow. */
.page-banner__kicker {
    font-size: clamp(2.9rem, 6.4vw, 5.75rem);
    line-height: 1;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px var(--s24-cyan);
    filter: drop-shadow(0 0 5px var(--s24-cyan-glow));
    opacity: .45;
    margin-bottom: .35rem;
    overflow-wrap: anywhere;
}

.page-banner__title {
    font-size: clamp(1.6rem, 3vw, 2.5rem);
    line-height: 1.22;
    font-weight: 600;
    margin: 0;
}

.page-banner__lead {
    max-width: 62ch;
    margin: .9rem auto 0;
    font-weight: 300;
    color: #e7eef8;
}

/* --------------------------------------------------------------- buttons -- */
/* www.24safe.cz global-link-component, 1:1: transparent square with a 1px
   light-blue frame, UPPERCASE white text, a blue arrow parked 24px left that
   slides home on hover, two glint strips on the frame (top-right, bottom-left)
   that slide apart, and the cyan outer glow (0 0 25px #27e3fc) fading in.
   The site has no filled variant — every CTA uses this one look; danger and
   dismiss buttons only swap the frame colour. */
.btn {
    --bs-btn-border-radius: 0;
    --s24-btn-frame: var(--s24-cyan-light);
    --s24-btn-glow: 0 0 25px rgba(39, 227, 252, 1);
    --s24-btn-glow-rest: 0 0 25px rgba(39, 227, 252, 0);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    min-width: 225px;
    border-radius: 0;
    border: 1px solid var(--s24-btn-frame);
    background-color: transparent;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: .02em;
    line-height: 1.25;
    padding: .75rem 1.25rem;
    /* The site fades a FIXED 25px shadow in (::after opacity .5s ease-in-out);
       animating only the shadow's alpha is the same visual — the blur never grows. */
    box-shadow: var(--s24-btn-glow-rest);
    transition: box-shadow .5s ease-in-out;
}

    .btn:hover,
    .btn:focus-visible,
    .btn:active,
    .btn.active,
    .btn:first-child:active {
        background-color: transparent !important;
        border-color: var(--s24-btn-frame) !important;
        color: #fff !important;
        box-shadow: var(--s24-btn-glow) !important;
    }

/* Arrow — every action button except the dismiss / link / icon ones. */
.btn::after {
    content: "";
    flex: none;
    width: 14px;
    height: .75rem; /* site h-3 */
    background: var(--s24-arrow) no-repeat center / contain;
    transform: translateX(-1.5rem);
    transition: transform .5s var(--s24-ease);
}

.btn:hover::after,
.btn:focus-visible::after {
    transform: translateX(0);
}

/* Glint strips: one pseudo-element spanning the frame carries both strips as
   background layers (the strip SVG is symmetric, so no rotation is needed);
   hover slides the top one left by half its width, the bottom one right by a
   third — the site's -translate-x-1/2 / translate-x-1/3 on .7s ease-in-out. */
.btn::before {
    content: "";
    position: absolute;
    inset: -.25rem 0;
    background-image: var(--s24-glint), var(--s24-glint);
    background-repeat: no-repeat;
    background-size: 144px 4px, 144px 4px;
    background-position: right 0 top 0, left 0 bottom 0;
    pointer-events: none;
    transition: background-position .7s var(--s24-ease);
}

.btn:hover::before,
.btn:focus-visible::before {
    background-position: right 72px top 0, left 48px bottom 0; /* -50% / +33.3% of 144px */
}

.btn-sm {
    min-width: 0;
    gap: 1.5rem;
    font-size: .875rem;
    padding: .5rem .9rem;
}

    .btn-sm::after {
        width: 12px;
        height: 10px;
        transform: translateX(-12px);
    }

    .btn-sm::before {
        background-size: 80px 3px, 80px 3px;
    }

    .btn-sm:hover::before,
    .btn-sm:focus-visible::before {
        background-position: right 40px top 0, left 26px bottom 0;
    }

.w-100.btn {
    min-width: 0;
}

/* Dismiss / back actions: white frame, no arrow. */
.btn-outline-light,
.btn-outline-secondary {
    --s24-btn-frame: rgba(255, 255, 255, .5);
    --s24-btn-glow: 0 0 25px rgba(255, 255, 255, .28);
    --s24-btn-glow-rest: 0 0 25px rgba(255, 255, 255, 0);
    justify-content: center;
    min-width: 0;
}

    .btn-outline-light::after,
    .btn-outline-secondary::after {
        content: none;
    }

/* Destructive actions: red frame and glow. */
.btn-danger,
.btn-outline-danger {
    --s24-btn-frame: var(--s24-danger);
    --s24-btn-glow: 0 0 25px rgba(240, 97, 107, .65);
    --s24-btn-glow-rest: 0 0 25px rgba(240, 97, 107, 0);
}

    .btn-danger::after,
    .btn-outline-danger::after {
        filter: hue-rotate(150deg) saturate(2.5) brightness(1.3);
    }

.btn-link {
    min-width: 0;
    border-color: transparent;
    text-transform: none;
    letter-spacing: 0;
    color: var(--s24-cyan-light);
    padding-left: 0;
    padding-right: 0;
}

    .btn-link::after,
    .btn-link::before {
        content: none;
    }

    .btn-link:hover,
    .btn-link:focus-visible {
        border-color: transparent !important;
        box-shadow: none !important;
    }

.btn:disabled,
.btn.disabled {
    opacity: .5;
}

/* ----------------------------------------------------------------- forms -- */
.form-control,
.form-select {
    border-radius: 0;
    border: 1px solid var(--s24-line);
    color: #fff;
    background-color: rgba(4, 21, 62, .65);
    padding: .75rem .9rem;
    font-size: 1rem;
}

    .form-control:focus,
    .form-select:focus {
        border-color: var(--s24-cyan-light);
        box-shadow: 0 0 0 3px rgba(86, 207, 244, .18);
        color: #fff;
        background-color: rgba(4, 21, 62, .85);
    }

    .form-control::placeholder {
        color: #7f93b2;
    }

.form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235cbae9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

    /* Native option list in the page palette (Chromium/Edge/Firefox honour it). */
    .form-select option {
        color: #fff;
        background: var(--s24-panel);
    }

.form-control-plaintext {
    color: #fff;
}

.form-label {
    color: var(--s24-muted);
    font-size: .8125rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}

label {
    color: #fff;
}

.form-check-input {
    border-radius: 0;
    background-color: transparent;
    border-color: var(--s24-cyan-light);
}

    .form-check-input:checked {
        background-color: var(--s24-cyan);
        border-color: var(--s24-cyan);
    }

.form-check-label {
    font-weight: 300;
}

.form-text {
    color: var(--s24-muted);
}

.field-validation-error,
.text-danger {
    color: #ff9aa1 !important;
}

/* ------------------------------------------------- panels (Bootstrap card) */
/* Forms sit on a square dark-blue panel — the site's .bg-blue-dark3 cells. */
.card,
.auth-card {
    background-color: var(--s24-panel);
    border: 0;
    border-radius: 0;
    box-shadow: none !important;
    color: #fff;
}

    .card .card-body {
        color: #fff;
        padding: 2rem;
    }

    .card h1,
    .card .h4 {
        font-size: 1.15rem;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

.panel {
    background-color: var(--s24-panel);
    padding: 2rem;
}

/* ---------------------------------------------------------------- tables -- */
/* Rows are the site's dark-blue cells separated by the page colour. */
.table {
    --bs-table-bg: var(--s24-panel);
    --bs-table-color: #fff;
    --bs-table-striped-bg: var(--s24-panel);
    --bs-table-striped-color: #fff;
    --bs-table-hover-bg: #073a72;
    --bs-table-hover-color: #fff;
    --bs-table-border-color: var(--s24-navy);
    color: #fff;
    font-variant-numeric: tabular-nums;
    border-collapse: separate;
    border-spacing: 0 2px;
}

    .table > :not(caption) > * > * {
        padding: 1rem;
        border-bottom-width: 0;
    }

    .table > thead > tr > th {
        --bs-table-bg: transparent;
        color: var(--s24-muted);
        font-weight: 400;
        text-transform: uppercase;
        font-size: .8125rem;
        letter-spacing: .06em;
        padding-top: 0;
        padding-bottom: .6rem;
    }

    .table td .btn + .btn {
        margin-left: .5rem;
    }

/* ---------------------------------------------------------------- modals -- */
/* Bootstrap modal in the site's palette (bank-transfer modal, legacy
   #bankTransferModal): square navy panel with the light-blue frame. */
.modal {
    --bs-modal-bg: var(--s24-navy);
    --bs-modal-color: #fff;
    --bs-modal-border-color: var(--s24-cyan-light);
    --bs-modal-border-radius: 0;
    --bs-modal-inner-border-radius: 0;
    --bs-modal-header-border-color: var(--s24-line);
    --bs-modal-footer-border-color: var(--s24-line);
    --bs-modal-padding: 1.5rem;
    --bs-modal-header-padding: 1.25rem 1.5rem;
}

    .modal .modal-title {
        font-size: 1.375rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .04em;
    }

.modal-backdrop {
    --bs-backdrop-bg: #020a1f;
    --bs-backdrop-opacity: .8;
}

/* Bank-transfer details (modal body + no-JS Transfer page). */
.transfer-info {
    color: var(--s24-muted);
    font-weight: 300;
    margin-bottom: 1.25rem;
}

.transfer-table th {
    color: var(--s24-muted);
    font-weight: 400;
    text-transform: uppercase;
    font-size: .8125rem;
    letter-spacing: .06em;
    white-space: nowrap;
}

.transfer-table td {
    font-weight: 600;
    word-break: break-all;
}

.transfer-qr {
    background: #fff;
    padding: .75rem;
    max-width: 100%;
    height: auto;
}

/* Payment/Status while the GoPay gate is being opened: spinner + message. */
.payment-opening {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.payment-opening__spinner {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 3px solid var(--s24-line);
    border-top-color: var(--s24-cyan-glow);
    border-radius: 50%;
    animation: payment-opening-spin .9s linear infinite;
}

@keyframes payment-opening-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .payment-opening__spinner { animation-duration: 2.4s; }
}

/* ---------------------------------------------------------------- alerts -- */
.alert {
    border-radius: 0;
    border: 1px solid;
    font-weight: 300;
    color: #fff;
    padding: 1rem 1.25rem;
}

    .alert h2,
    .alert .h5 {
        font-weight: 600;
    }

.alert-success {
    background-color: rgba(60, 203, 140, .10);
    border-color: rgba(60, 203, 140, .55);
}

.alert-danger {
    background-color: rgba(240, 97, 107, .10);
    border-color: rgba(240, 97, 107, .6);
}

.alert-warning {
    background-color: rgba(242, 193, 78, .10);
    border-color: rgba(242, 193, 78, .6);
}

.alert-info {
    background-color: rgba(0, 150, 214, .10);
    border-color: rgba(92, 186, 233, .55);
}

/* Empty-state / neutral notices. */
.alert-light {
    color: var(--s24-muted);
    background-color: transparent;
    border-color: var(--s24-line);
    text-align: center;
}

.badge.text-bg-secondary {
    background-color: var(--s24-panel-2) !important;
}

/* definition lists on detail / confirmation pages: label | value rows */
dl.row {
    margin: 1.25rem 0;
    --bs-gutter-x: 0;
}

    dl.row > dt,
    dl.row > dd {
        padding: .75rem 1rem;
        margin: 0;
        border-bottom: 1px solid var(--s24-line);
    }

dt {
    color: var(--s24-muted);
    font-weight: 400;
}

dl.row > dt {
    text-transform: uppercase;
    font-size: .8125rem;
    letter-spacing: .05em;
    display: flex;
    align-items: center;
}

dd {
    color: #fff;
}

dl.row > dd {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--s24-muted);
    --bs-breadcrumb-item-active-color: var(--s24-muted);
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ---------------------------------------------------------- site footer --- */
.site-footer {
    background: #000;
    color: #fff;
    padding: 4rem 0 1.75rem;
    flex-shrink: 0;
}

.site-footer__row {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 2.5rem;
}

.site-footer__logo {
    height: 46px;
    width: auto;
}

.site-footer h2 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
}

.site-footer a {
    color: #fff;
}

.footer-social {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
    margin: 2.5rem 0 0;
}

    .footer-social img {
        height: 22px;
        width: auto;
        transition: filter 1s ease;
    }

    .footer-social a:hover img {
        filter: invert(47%) sepia(75%) saturate(2738%) hue-rotate(168deg) brightness(90%) contrast(101%);
    }

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 1.1rem 2.75rem;
    justify-content: start;
}

.footer-menu a,
.footer-contact span {
    position: relative;
    font-size: .9375rem;
}

    .footer-menu a::after,
    .footer-contact a span::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        border-bottom: 2px solid var(--s24-cyan);
        transform: scaleX(0);
        transition: transform .3s ease;
    }

    .footer-menu a:hover::after,
    .footer-contact a:hover span::after {
        transform: scaleX(1);
    }

.site-footer__contact {
    justify-self: end;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

    .footer-contact a {
        display: inline-flex;
        align-items: center;
        gap: 1.1rem;
    }

    .footer-contact img {
        height: 20px;
        width: 20px;
        object-fit: contain;
    }

.footer-bottom {
    margin-top: 3rem;
    text-align: center;
    font-size: .8125rem;
    color: #6e7b92;
}

/* ---------------------------------------------- audit-pass refinements --- */
/* Hide the empty model-validation summary so forms don't show a blank red box
   before the user has submitted anything (ASP.NET renders the div either way). */
.validation-summary-valid {
    display: none;
}

.list-group-item {
    background-color: var(--s24-panel);
    border-color: var(--s24-line);
    color: #fff;
}

/* --------------------------------------------------- storefront picker --- */
/* "Výběr varianty schránky" from www.24safe.cz/cz/schranky: a row of tiles
   joined by 2px page-colour seams, each with a soft blue glow behind the box. */
.box-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 2px;
}

.box-type-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4rem;
    padding: 2.25rem 1.25rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(3, 42, 87, 0) 0%, var(--s24-panel) 100%);
}

    .box-type-card::before {
        content: "";
        position: absolute;
        inset: 22% 15% auto;
        height: 40%;
        background: radial-gradient(closest-side, rgba(0, 150, 214, .35), transparent);
        filter: blur(10px);
        pointer-events: none;
    }

.box-size {
    color: var(--s24-cyan);
}

/* Box facts (www.24safe.cz "bottom-table"): uppercase light caption above a
   dark-blue value cell, cells side by side. */
.box-specs {
    display: flex;
    gap: 2px;
    margin: 0;
}

.box-specs__cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

.box-specs dt {
    color: #fff;
    font-weight: 300;
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
    margin-bottom: .4rem;
}

.box-specs dd {
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    flex-wrap: wrap;
    padding: .75rem 1.25rem;
    background: var(--s24-panel);
    color: #fff;
    font-size: .9375rem;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.box-specs__axes {
    color: var(--s24-muted);
    font-size: .8125rem;
}

/* On the narrow catalogue tiles the three facts become label | value rows. */
.box-type-card .box-specs {
    position: relative;
    flex-direction: column;
    width: 100%;
    gap: 0;
}

    .box-type-card .box-specs__cell {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: .75rem;
        padding: .45rem 0;
        border-bottom: 1px solid var(--s24-line);
    }

    .box-type-card .box-specs dt {
        margin: 0;
        color: var(--s24-muted);
        font-size: .75rem;
        text-align: left;
    }

    .box-type-card .box-specs dd {
        flex: none;
        padding: 0;
        background: none;
        font-size: .875rem;
        justify-content: flex-end;
        text-align: right;
    }

    .box-type-card .box-specs__axes {
        display: none;
    }

.box-type-card__name {
    position: relative;
    font-size: 1.15rem;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.3;
    margin: 0;
}

.box-type-card__img {
    position: relative;
    display: block;
    max-width: 100%;
    height: 150px;
    object-fit: contain;
    margin: 0 auto;
    transition: transform .4s ease;
}

.box-type-card:hover .box-type-card__img {
    transform: translateY(-4px);
}

.box-type-card form {
    position: relative;
    margin: 0;
}

/* ----------------------------------------- My Account / rentals cards --- */
.my-account {
    max-width: 1040px;
    margin: 0 auto;
    transition: max-width .25s ease;
}

    /* Widened while an inline prolongation is open (site.js toggles the class). */
    .my-account.my-account--wide {
        max-width: 1200px;
    }

.account-identity {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .1rem;
}

.account-identity__name {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
}

.account-identity__email {
    color: var(--s24-muted);
    font-weight: 300;
}

.account-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    margin: 0 0 2.5rem;
}

    .account-links li {
        display: flex;
    }

        .account-links li + li::before {
            content: "";
            width: 1px;
            background: var(--s24-line);
            margin: .3rem 0;
        }

    .account-links a,
    .account-links__btn {
        color: var(--s24-cyan-light);
        font-size: .875rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        background: none;
        border: 0;
        padding: .25rem 1.4rem;
        cursor: pointer;
    }

        .account-links a:hover,
        .account-links__btn:hover {
            color: #fff;
        }

    .account-links form {
        margin: 0;
        display: flex;
    }

    /* Current section of the shared account menu (PT 2026-10-26). */
    .account-links a.account-links__item--active {
        color: #fff;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: .4rem;
    }

/* Owner / disponent group headings on the rentals page (PT 2026-10-26). */
.rental-group__title {
    color: #fff;
    font-size: 1.125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin: 2rem 0 1rem;
}

/* ---- box card: render | pictogram + number | body ---- */
.rental-card {
    display: grid;
    grid-template-columns: 230px 150px minmax(0, 1fr);
    background-color: var(--s24-panel);
    margin-bottom: 2px;
}

.rental-card__render {
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: radial-gradient(closest-side, rgba(0, 150, 214, .28), transparent) center / 90% 90% no-repeat, var(--s24-panel-2);
}

    .rental-card__render img {
        max-width: 100%;
        max-height: 150px;
        width: auto;
        height: auto;
    }

/* S24-55 — reservation cards: legacy `imgReserved` dimming. */
.rental-card__render--reserved img {
    opacity: .4;
}

.rental-card__glyph {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    padding: 1.25rem .6rem;
    border-right: 1px solid var(--s24-line);
}

.rental-card__badge {
    height: 44px;
    width: auto;
    display: block;
}

.rental-card__boxno,
.rental-card__site {
    color: var(--s24-muted);
    font-size: .8125rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

    .rental-card__boxno span,
    .rental-card__site span {
        display: block;
        color: #fff;
        font-size: 1.05rem;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
    }

.rental-card__body {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.6rem 1.9rem;
    min-width: 0;
}

.rental-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem 1.1rem;
}

.rental-card__title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 600;
    text-transform: uppercase;
}

.rental-card__rename {
    font-size: .875rem;
}

/* Inline rename form — hidden until the REPLACE_NAME_BOX link toggles it. */
.rental-card__rename-form {
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

    .rental-card__rename-form[hidden] {
        display: none;
    }

    .rental-card__rename-form input {
        flex: 1 1 180px;
        max-width: 320px;
    }

.rental-card__meta {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem 1.1rem;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

    .rental-card__meta dt {
        color: var(--s24-muted);
        font-weight: 300;
    }

    .rental-card__meta dd {
        color: #fff;
        font-weight: 600;
        margin: 0;
    }

        .rental-card__meta dd + dd {
            grid-column: 2;
        }

.rental-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .75rem;
    margin-top: auto;
}

.rental-card__expired-contact {
    flex-basis: 100%;
    color: #ffc2c6;
    font-size: .875rem;
    text-align: right;
}

    .rental-card__expired-contact a {
        color: inherit;
        text-decoration: underline;
    }

        .rental-card__expired-contact a:hover {
            color: #fff;
        }

/* ---- inline prolongation container — the shared #content-cart host lands
   here (site.js). Spans every card column. No display value on purpose: the
   native [hidden] attribute keeps closed containers out of the layout. ---- */
.rental-card__prolongation {
    grid-column: 1 / -1;
    min-width: 0;
    background: var(--s24-panel-2);
    border-top: 1px solid var(--s24-cyan-light);
    padding: 1.75rem 1.9rem;
}

.rental-expiry {
    padding: .6rem .9rem;
    font-size: .875rem;
    background: rgba(242, 193, 78, .14);
    color: #ffe3a1;
}

    .rental-expiry--danger {
        background: rgba(240, 97, 107, .16);
        color: #ffc2c6;
    }

/* ---- parity-todo badge — internal marker for known backend gaps. ---- */
.parity-todo {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .25rem;
    background: #6b5416;
    color: #ffd75e;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: help;
    vertical-align: middle;
}

.parity-todo-wrap {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    cursor: help;
}

/* ---- BOX ORDER CTA ---- */
.box-order {
    margin-top: 2.75rem;
}

/* The order CTA carries its arrow as an <img>; suppress the generated one. */
.box-order__btn::after {
    content: none;
}

.box-order__arrow {
    height: 12px;
    width: auto;
    transform: translateX(-1.5rem);
    transition: transform .5s var(--s24-ease);
}

.box-order__btn:hover .box-order__arrow {
    transform: translateX(0);
}

/* ----------------------------------------------------------- responsive --- */

@media (max-width: 1749.98px) {
    .site-header .nav-link {
        display: inline-block;
    }
}

@media (max-width: 1199.98px) {
    .rental-card {
        grid-template-columns: 180px 130px minmax(0, 1fr);
    }
}

@media (max-width: 991.98px) {
    .site-footer__row {
        grid-template-columns: 1fr;
    }

    .site-footer__contact {
        justify-self: start;
    }
}

@media (max-width: 767.98px) {
    .rental-card {
        grid-template-columns: 1fr;
    }

    .rental-card__glyph {
        flex-direction: row;
        justify-content: space-around;
        border-right: 0;
        border-bottom: 1px solid var(--s24-line);
    }

    .rental-card__body {
        padding: 1.4rem 1.25rem;
    }

    .rental-card__actions,
    .rental-card__expired-contact {
        justify-content: flex-start;
        text-align: left;
    }

    .rental-card__prolongation {
        padding: 1.4rem 1.25rem;
    }

    .page-banner {
        padding: 2.5rem 0;
    }

    .site-main {
        padding-top: 2rem;
        padding-bottom: 3.5rem;
    }

    .card .card-body,
    .panel {
        padding: 1.4rem 1.2rem;
    }

    .footer-menu {
        grid-auto-flow: row;
        grid-template-rows: none;
        grid-template-columns: 1fr 1fr;
    }

    .table td .btn + .btn {
        margin-left: 0;
        margin-top: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .btn,
    .btn::after,
    .btn::before,
    .box-type-card__img,
    .site-header .nav-link::after {
        transition: none !important;
    }
}