/* Impersonation bar */

.impersonation-bar {
    background-color: #f0ad4e;
    color: #fff;
    text-align: center;
    padding: 0.5rem;
    font-weight: bold;
}

/* Top bar */

.topbar-section {
    background-color: var(--primary-color);
    color: white;
}

    .topbar-section .navbar {
        padding: 0;
    }

    .topbar-section .navbar-nav .nav-item {
        display: flex;
        align-items: center;
    }

    .topbar-section .nav-link {
        color: white;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    .topbar-section .navbar-toggler {
        padding-top: 0;
        padding-bottom: 0;
    }

    .topbar-section .navbar-toggler-icon {
        width: 0.5em;
        height: 0.5em;
    }

    .topbar-section label {
        padding: 0;
        font-size: inherit;
    }

    .topbar-section select {
        padding-top: 0;
        padding-bottom: 0;
        padding-left: 0.5rem;
        font-size: 0.75rem;
        border-radius: 0.1875rem;
    }

@media (min-width: 576px) {
    .topbar-section .navbar-nav .nav-item + .nav-item::before {
        content: "|";
        display: inline-block;
        margin-bottom: 0.25rem;
    }
}

/* Account bar */

.accountbar-account {
    background: linear-gradient(180deg, var(--grey-color), var(--grey-color-dark));
    border-radius: var(--border-radius);
    color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.accountbar-account a {
    color: white;
}

    .accountbar-account .accountbar-link {
        display: flex;
        line-height: 1.125rem;
    }

        .accountbar-account .accountbar-link > span {
            font-size: 0.9375rem;
        }

/* Menu bar */

/* One padding value for both levels, so a submenu entry's text always lines up under its
   parent's. The wide selector below repeats it because Bootstrap's own
   .navbar-expand-sm .navbar-nav .nav-link outweighs .menubar-section .nav-link. */
.menubar-section {
    --menu-pad: 0.5rem;
    background-color: var(--primary-color);
    color: white;
}
    .menubar-section .navbar {
        padding: 0;
    }

    .menubar-section .nav-link {
        color: white;
        padding-right: var(--menu-pad);
        padding-left: var(--menu-pad);
    }

        .menubar-section .nav-link:hover {
            background-color: var(--primary-color-dark);
        }

        /* Hover and current page share one colour, so neighbouring items merged into one dark
           block. Only the current item carries the line, lighter than either state. Inset, not
           a border, which widens the item and shifts the bar by 2px on every page change. */
        .menubar-section .nav-link.active {
            background-color: var(--primary-color-dark);
            box-shadow: inset 0 1px 0 var(--primary-color-light), inset 0 -1px 0 var(--primary-color-light);
        }

@media (min-width: 576px) {
    /* From here the items stand side by side, so the edges that touch a neighbour are the
       vertical ones. Below this width the collapsed list stacks them and the rule above holds. */
    .menubar-section .nav-link.active {
        box-shadow: inset 1px 0 0 var(--primary-color-light), inset -1px 0 0 var(--primary-color-light);
    }
}

@media (min-width: 992px) {
    .menubar-section {
        --menu-pad: 1.5rem;
    }

    .menubar-section .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: var(--menu-pad);
        padding-left: var(--menu-pad);
    }
}

/* Menu dropdowns — the panel wears the colour the bar turns on hover and sits flush under it,
   so an open item reads as the bar growing downward and no gap opens for the pointer to fall
   through. Inside, the two colours swap roles: dark is the surface, the bar's green the hover. */
.menubar-section .has-submenu {
    position: relative;
}

.menubar-section .nav-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1030;
    min-width: 100%;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background-color: var(--primary-color-dark);
    /* Sets the panel off from the bar, which turns the same colour while it is open. */
    border-top: 1px solid white;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    /* visibility flips only after the fade, so the panel can still be seen while closing */
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s 0.12s;
}

    /* Panels open flush left under their parent. Only one that would run off the right edge
       flips, and site.js decides that per panel by measuring — a fixed rule for the trailing
       item flipped it even with room to spare. */
    .menubar-section .has-submenu.opens-left .nav-submenu {
        right: 0;
        left: auto;
    }

    .menubar-section .nav-submenu a {
        display: block;
        padding: 0.375rem var(--menu-pad);
        /* the rule the current entry carries; transparent elsewhere, less its width on the
           padding, so every label starts on the same line as its parent's */
        border-left: 0.1875rem solid transparent;
        padding-left: calc(var(--menu-pad) - 0.1875rem);
        color: white;
        text-decoration: none;
        /* The panel's containing block is the parent item, only a few characters wide, so
           shrink-to-fit would break every entry over two lines. The width follows the text. */
        white-space: nowrap;
    }

        /* Two signals rather than two shades of one: the pointer fills, the current page is
           marked, so both stay readable on the same entry. A --primary-color fill here also ran
           into the bar's own colour and the panel appeared to grow out of the neighbour. */
        .menubar-section .nav-submenu a:hover {
            background-color: var(--primary-color-light);
        }

        .menubar-section .nav-submenu a.active {
            border-left-color: var(--primary-color-light);
        }

    /* Smaller and dimmer than the label it follows — a note, not a second word. */
    .menubar-section .nav-submenu .menu-external {
        margin-left: 0.375rem;
        font-size: 0.75rem;
        vertical-align: middle;
        opacity: 0.7;
    }

    /* Divides the pages of this site from the two that leave it. */
    .menubar-section .nav-submenu-split {
        margin-top: 0.25rem;
        padding-top: 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.25);
    }

.menubar-section .has-submenu.is-open > .nav-submenu,
.menubar-section .has-submenu:focus-within > .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* Keeps the parent lit while the pointer is down in the panel, which .nav-link:hover cannot. */
.menubar-section .has-submenu.is-open > .nav-link,
.menubar-section .has-submenu:focus-within > .nav-link {
    background-color: var(--primary-color-dark);
}

/* Hover opens on pointer devices only; touch goes through the tap handler in site.js. */
@media (hover: hover) and (pointer: fine) {
    .menubar-section .has-submenu:hover > .nav-submenu {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s;
    }

    .menubar-section .has-submenu:hover > .nav-link {
        background-color: var(--primary-color-dark);
    }

    .menubar-section .has-submenu:hover .menu-chev {
        transform: rotate(180deg);
    }
}

/* Below the navbar's breakpoint the bar becomes the toggler's vertical list, where a floating
   panel would cover the items underneath — so it joins the flow, and display, not opacity,
   decides whether it is there. Phones never get here (mobile layout), a narrow window does. */
@media (max-width: 575.98px) {
    .menubar-section .nav-submenu {
        position: static;
        display: none;
        padding-left: var(--menu-pad);
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .menubar-section .has-submenu.is-open > .nav-submenu,
    .menubar-section .has-submenu:hover > .nav-submenu,
    .menubar-section .has-submenu:focus-within > .nav-submenu {
        display: block;
    }

    /* Room is scarce here, so entries may wrap after all. */
    .menubar-section .nav-submenu a {
        white-space: normal;
    }
}

/* Submenu marker — shared with the mobile overlay, which loads this file too, so both
   levels carry the same shape and the same flip. */
.menu-chev {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 0.375rem;
    border-right: 0.25rem solid transparent;
    border-left: 0.25rem solid transparent;
    border-top: 0.3125rem solid currentcolor;
    vertical-align: 0.125em;
    transition: transform 0.15s;
}

.menubar-section .has-submenu.is-open .menu-chev,
.menubar-section .has-submenu:focus-within .menu-chev {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .menubar-section .nav-submenu,
    .menu-chev {
        transition: none;
    }
}

/* Footer */

.footer-wrapper {
    background: linear-gradient(180deg, var(--primary-color), var(--primary-color-dark));
    color: white;
}

.footer-links {
    border-bottom: 1px solid var(--primary-color-dark);
}

    .footer-links h2 {
        color: white;
        margin-bottom: 0.875rem;
    }

    .footer-links ul {
        padding-left: 0;
    }

    .footer-links li {
        margin-bottom: 0.625rem;
    }

        .footer-links li > div {
            align-content: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

    .footer-links a {
        color: white;
        text-decoration: none;
    }

    .footer-links .icon {
        color: var(--primary-color-dark);
        font-size: 1.25rem;
        margin-right: 0.75rem;
    }

    /* Sibling of the number, not a child: the number keeps the ellipsis of `li > div`,
       the icons keep their width when the column gets narrow. */
    .footer-links .footer-messengers {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 0.375rem;
        margin-left: 0.5rem;
    }

.footer-copyright {
    border-top: 1px solid var(--primary-color-light);
    line-height: 6rem;
    text-align: center;
}

@media (min-width: 1400px) {
    .footer-links .row > div:not(:first-child) {
        padding-left: 3.125rem;
    }
}

@media (min-width: 768px) {
    .footer-links .row {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }

    .footer-links .row > div:not(:last-child) {
        border-right: 1px solid var(--primary-color-light);
    }

    .footer-links .row > div:not(:first-child) {
        border-left: 1px solid var(--primary-color-dark);
    }
}

/* Banners */

.banners-wrapper {
    background-color: #d0d1d1;
    border-top: 1px solid var(--grey-color-border);
    /* Upward shadow: the bar is sticky, so it has to read as a layer above the content */
    box-shadow: 0 -2px 8px rgb(0 0 0 / 0.06);
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .banners-wrapper {
        position: sticky;
        bottom: 0;
        z-index: 10;
    }
}

/* White tile per banner — uploaded artwork comes with arbitrary backgrounds
   (grey ones would otherwise melt into the bar), the border keeps every edge visible */
.banner {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 96px;
    background-color: #fff;
    border: 1px solid var(--grey-color-border);
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    .banner:hover {
        border-color: var(--primary-color-light);
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
        transform: translateY(-2px);
    }

.banner-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0.625rem;
}

    .banner-link img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
    }

@media (max-width: 767.98px) {
    .banners-wrapper {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }

        /* Wraps to 3 x 2 instead of scrolling horizontally: the component caps the pool at
           6 banners, so every tile fits on screen and none depends on the user swiping.
           Gutter is tightened from --spacer, which is oversized next to 60px tiles. */
        .banners-wrapper .row {
            --bs-gutter-x: 0.75rem;
            --bs-gutter-y: 0.75rem;
        }

    .banner {
        height: 60px;
    }

    .banner-link {
        padding: 0.375rem;
    }
}

/* Bootstrap */

.btn-primary {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-color-dark);
    --bs-btn-hover-border-color: var(--primary-color-dark);
    --bs-btn-active-bg: var(--primary-color-dark);
    --bs-btn-active-border-color: var(--primary-color-dark);
    --bs-btn-disabled-bg: var(--primary-color);
    --bs-btn-disabled-border-color: var(--primary-color);
}

.btn-secondary {
    --bs-btn-bg: var(--secondary-color);
    --bs-btn-border-color: var(--secondary-color);
    --bs-btn-hover-bg: var(--secondary-color-dark);
    --bs-btn-hover-border-color: var(--secondary-color-dark);
    --bs-btn-active-bg: var(--secondary-color-dark);
    --bs-btn-active-border-color: var(--secondary-color-dark);
    --bs-btn-disabled-bg: var(--secondary-color);
    --bs-btn-disabled-border-color: var(--secondary-color);
}

.btn-grey {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--grey-color);
    --bs-btn-border-color: var(--grey-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--grey-color-dark);
    --bs-btn-hover-border-color: var(--grey-color-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--grey-color-dark);
    --bs-btn-active-border-color: var(--grey-color-dark);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--grey-color);
    --bs-btn-disabled-border-color: var(--grey-color);
}

.btn-dark {
    --bs-btn-bg: var(--grey-color-dark);
    --bs-btn-border-color: var(--grey-color-dark);
}

/* The label was #997d08 on #ffcc00 — 2.6:1, and worse on hover; dark grey holds 7.3/5.7/7.4:1.
   The border is load-bearing too: #ffcc00 on the sand notes panel is 1.04:1, so a borderless
   button would separate by saturation alone. The focus ring goes dark for the same reason. */
.btn-warning {
    --bs-btn-color: var(--grey-color-dark);
    --bs-btn-bg: #ffcc00;
    --bs-btn-border-color: #6b5700;
    --bs-btn-hover-color: var(--grey-color-dark);
    --bs-btn-hover-bg: #e1b507;
    --bs-btn-hover-border-color: #6b5700;
    --bs-btn-focus-shadow-rgb: 60, 60, 59;
    --bs-btn-active-color: var(--grey-color-dark);
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #6b5700;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--grey-color-dark);
    --bs-btn-disabled-bg: #ffcc00;
    --bs-btn-disabled-border-color: #6b5700;
}

.btn-form-control {
    display: block;
    width: 100%;
    font-size: 0.875rem;
    text-align: start;

    --bs-btn-bg: #fff;
    --bs-btn-color: var(--grey-color);
    --bs-btn-border-color: var(--grey-color-border);
    --bs-btn-hover-color: var(--grey-color);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--grey-color-border);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: var(--grey-color-border);
    --bs-btn-disabled-color: var(--grey-color);
    --bs-btn-disabled-bg: var(--bs-secondary-bg);
    --bs-btn-disabled-border-color: var(--bs-secondary-bg);
}

    .btn-form-control:after {
        position: absolute;
        right: 0.875rem;
        top: 45%;
    }

.btn-group-xs > .btn, .btn-xs {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-border-radius: var(--border-radius);
}

.btn-group-sm > .btn, .btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.875rem;
    --bs-btn-font-size: 0.75rem;
    --bs-btn-border-radius: var(--border-radius);
}

.bl-btn {
    min-width: 100px;
}

.bl-lg-btn {
    --bs-btn-padding-y: 0.46875rem;
    position: relative;
    width: min(100%, 260px);
    font-size: 0.75rem;
    border-radius: 5px;
}

    .bl-lg-btn.btn-grey {
        filter: drop-shadow(0 0 10px rgba(0,0,0,0.2));
        background-image: linear-gradient(0deg, var(--grey-color-dark) 0%, var(--grey-color) 100%);
    }

        .bl-lg-btn.btn-grey:hover {
            filter: none;
            background-image: linear-gradient(0deg, var(--grey-color-dark) 0%, var(--grey-color-dark) 100%);
        }

    .bl-lg-btn.btn-primary {
        filter: drop-shadow(0 0 10px rgba(0,0,0,0.2));
        background-image: linear-gradient(0deg, var(--primary-color-dark) 0%, var(--primary-color) 100%);
    }

        .bl-lg-btn.btn-primary:hover {
            filter: none;
            background-image: linear-gradient(0deg, var(--primary-color-dark) 0%, var(--primary-color-dark) 100%);
        }

    .bl-lg-btn.btn-secondary {
        background-image: linear-gradient(0deg, var(--secondary-color-dark) 0%, var(--secondary-color) 100%);
    }

        .bl-lg-btn.btn-secondary:hover {
            background-image: linear-gradient(0deg, var(--secondary-color-dark) 0%, var(--secondary-color-dark) 100%);
        }

    .bl-lg-btn img {
        position: absolute;
        top: 49%;
        transform: translateY(-50%);
        left: 10px;
    }

.form-control-xs {
    min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: var(--border-radius);
}

/* The password reveal from PasswordToggleTagHelper. It has to read as the right-hand end of the
   field, not as a button beside it — on the dark header bar an outlined button is a loose grey
   box. Colour tokens fall back for the admin host, which does not define them. */
.password-toggle {
    /* .k-font-icon is inline-flex with vertical-align:middle, so it centres on the text
       baseline rather than in the button. */
    display: flex;
    align-items: center;
    /* The field's own background and border, minus the edge between the two: the toggle is the
       right-hand end of the input, not a control docked to it. */
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--grey-color-border, var(--bs-border-color));
    border-left: 0;
    color: var(--grey-color-text, var(--bs-body-color));
}

/* One field, one focus ring. Bootstrap paints border colour and glow on the input alone, which
   cuts the outline off right between the field and its toggle. Moved to the group: the glow
   needs a radius of its own there, since .input-group has none and the shadow would otherwise
   be a square halo around rounded content. #86b7fe is Bootstrap's own focus border — it hard-
   codes it in .form-control:focus and exposes no token for it (--bs-focus-ring-color is the
   translucent glow, not the border). */
.input-group:has(.password-toggle):focus-within {
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color, rgba(13, 110, 253, 0.25));
}

.input-group:has(.password-toggle):focus-within .form-control,
.input-group:has(.password-toggle):focus-within .password-toggle {
    border-color: #86b7fe;
}

.input-group:has(.password-toggle) .form-control:focus {
    box-shadow: none;
}

/* Barely darker, per the house rule that hover darkens — a grey fill would undo the point of
   matching the field in the first place. */
.password-toggle:hover {
    background-color: color-mix(in srgb, var(--bs-body-bg) 94%, #000);
    color: var(--grey-color-text, var(--bs-body-color));
}

/* Bootstrap's input-group radii key on :last-child / :not(:last-child). A password manager
   injects its own node into the group a second into the page, and both rules then miss: the
   field keeps its right rounding and the button loses its own, which is the square box hanging
   off a rounded field. Set explicitly on both, and !important because a (0,5,0) vendor selector
   whose match depends on sibling position cannot be outranked reliably any other way.
   The radius is the field's own --bs-border-radius, not our --border-radius: the two differ by
   a hair (0.375rem against 0.3125rem) and the seam has to line up with the input's left end. */
.input-group > .form-control:has(~ .password-toggle) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .password-toggle {
    border-top-right-radius: var(--bs-border-radius) !important;
    border-bottom-right-radius: var(--bs-border-radius) !important;
}

/* The header quick login is a compact row: a default-sized toggle would stretch the password
   field past the username input beside it. */
.input-group:has(.form-control-xs) .password-toggle {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.extra-small {
    font-size: 0.75rem;
}

.bl-modal .modal-content {
    border-radius: 1.25rem;
    padding: 3.125rem;
}

.bl-modal .modal-header {
    border: none;
    padding: 0 0 0.5rem 0;
    flex-direction: column;
    align-items: normal;
}
    .bl-modal .modal-header .modal-header-logo {
        display: flex;
        justify-content: center;
        margin-bottom: 1.25rem;
    }

    .bl-modal .modal-header .modal-header-logo img {
        max-height: 220px;
    }

    .bl-modal .modal-header .btn-close {
        --bs-btn-close-bg: none;
        width: auto;
        height: auto;
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 1.25rem;
        color: var(--primary-color);
        opacity: 1;
        z-index: 1;
    }

        .bl-modal .modal-header .btn-close:hover {
            color: var(--primary-color-dark);
        }

.bl-modal .modal-body {
    padding: 0;
}

.bl-modal .modal-footer {
    border: none;
    padding: 1rem 0 0 0;
    justify-content: flex-start;
    gap: 10px;
}

    .bl-modal .modal-footer > * {
        margin: 0;
    }

#noLicenseModal .btn-close {
    color: white;
}

#noLicenseModal .modal-content {
    text-align: center;
    background-color: var(--primary-color);
    color: white;
}

#noLicenseModal h4 {
    color: white;
}

#noLicenseModal .modal-footer {
    justify-content: center;
}

#noLicenseModal .btn {
    background-color: white;
    color: var(--primary-color);
}

.form-switch .form-check-input {
    width: 3.125rem;
    height: 1.875rem;
}

.status-switch input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E");
    background-color: #db0712;
    border-color: #db0712;
}

.status-switch input:checked {
    background-color: #53b04f;
    border-color: #53b04f;
}

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

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

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

@media (max-width: 576px) {
    .bl-modal .modal-content {
        padding: 1.25rem;
    }

    .modal-footer {
        flex-direction: column;
    }

    /* The confirm modals put the primary first, so it leads the desktop row. Stacked, that
       order would place it above Cancel; the confirming tap belongs at the bottom. */
    .modal-footer-confirm {
        flex-direction: column-reverse;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .bl-modal .modal-lg {
        max-width: none;
        margin: var(--bs-modal-margin);
    }

    .bl-modal br {
        display: none;
    }
}

/* Click-to-load placeholder for third-party embeds */
.embed-consent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    text-align: center;
    background-color: #f6f6f6;
}

    .embed-consent p {
        max-width: 36rem;
        margin: 0;
    }

/* A ratio box would clip the text on phones; aspect-ratio lets the content grow it instead. */
.video-consent {
    aspect-ratio: 16 / 9;
    background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), url('/images/video.png') center / cover;
}

/* Forms */

.validation-summary-errors {
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--bs-form-invalid-border-color);
    border-radius: .25rem;
    color: var(--bs-form-invalid-color);
    background-color: rgba(var(--bs-danger-rgb),.1);
}

    .validation-summary-errors > ul {
        margin: 0;
    }

.validation-summary-valid {
    display: none;
}

.field-validation-error:not(.k-tooltip) {
    color: var(--bs-form-invalid-color);
}

:is(.field-validation-valid, .field-validation-error):not(:empty) {
    margin-top: 0.25rem;
}

:is(.field-validation-valid, .field-validation-error) {
    display: block;
    font-size: 0.875em;
    width: 100%;
}

.filter-switch .form-check-input {
    width: 150px;
    height: 2.125rem;
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.filter-switch input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.filter-switch {
    position: relative;
    display: inline-block;
}

.switch-text::after {
    color: #fff;
    content: attr(data-label-off);
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-size: 0.875rem;
    text-transform: uppercase;
}

.filter-switch input:checked + .switch-text::after {
    content: attr(data-label-on);
    color: #fff;
}

/* Offers */
/* Icon-only link: the global underline would run under the badge and, next to the number's
   own tel: link, read as one continuous rule across the line. */
.messenger-link {
    text-decoration: none;
}

.main-buttons-wrapper {
    color: white;
}

/* Icon and label are one centred group — an icon pinned to the left edge with the label
   centred independently over the full width runs into longer labels. */
.main-button-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    /* min-height, not a line-height doing duty as the box height: next to the icon the label
       can wrap, and every wrapped line would inherit that height. */
    min-height: 3.75rem;
    padding: 0.25rem 0.75rem;
    background: linear-gradient(180deg, var(--grey-color), var(--grey-color-dark));
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    font-size: 1.5rem;
    line-height: 1.25;
    text-decoration: none;
    text-align: center;
}

    .main-button-link.main-btn-primary:hover {
        background-image: linear-gradient(0deg, var(--primary-color-dark) 0%, var(--primary-color) 100%);
    }

    .main-button-link.main-btn-secondary:hover {
        background-image: linear-gradient(0deg, var(--secondary-color-dark) 0%, var(--secondary-color) 100%);
    }

    .main-button-link.main-btn-grey:hover {
        background-image: linear-gradient(0deg, #252423 0%, #424240 100%);
    }

/* Only where the buttons sit one per grid column: evens the row out, so one wrapped label lifts
   all of them instead of leaving a single tall one. Two stacked in the same column — the Service
   sidebar — would each take the full column height and run out under the footer. */
.main-buttons-wrapper .main-button-link,
.subnav-buttons-wrapper .main-button-link {
    height: 100%;
}

/* Sub-navigation of a section as a row of buttons — the account pages have always used it,
   BBC and Service & Info took it over from them in place of their navigate-on-change select. */
.subnav-buttons-wrapper {
    color: white;
    margin-bottom: 1.875rem;
}

    .subnav-buttons-wrapper .main-button-link {
        gap: 0.5rem;
        min-height: 2.5rem;
        padding: 0.25rem 0.5rem;
        font-size: 1.125rem;
    }

        .subnav-buttons-wrapper .main-button-link.active {
            background-image: linear-gradient(0deg, var(--primary-color-dark) 0%, var(--primary-color) 100%);
        }

        .subnav-buttons-wrapper .main-button-link .icon {
            font-size: 1.25rem;
        }

.section-header {
    width: 100%;
    color: white;
    padding: 0 1.25rem;
    display: flex;
    justify-content: space-between;
}

    .section-header .title {
        line-height: 3.75rem;
        font-size: 1.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .section-header .options {
        display: flex;
        align-items: center;
    }

.header-primary {
    background: linear-gradient(180deg, var(--primary-color), var(--primary-color-dark));
}

    /* White carets, deliberately against the mockups: their gradient-tinted carets measure
       1.1-1.8:1 and vanish where the gradient reaches that value, white lands at 7.2-8.5:1.
       Do not "correct" this back. The yellow notes header is the exception, see offer-grid.css. */
    .header-primary .btn-collapse {
        color: #fff;
    }

.header-secondary {
    background: linear-gradient(180deg, var(--secondary-color), var(--secondary-color-dark));
}

    .header-secondary .btn-collapse {
        color: #fff;
    }

.header-grey {
    background: linear-gradient(180deg, var(--grey-color), var(--grey-color-dark));
}

    .header-grey .btn-collapse {
        color: #fff;
    }

.btn-collapse {
    transition: transform .35s ease;
}

/* Bootstrap puts `collapsed` on the trigger, and the trigger is the whole bar - not the
   caret. Same shape as .notes-header.collapsed in offer-grid.css, which already worked
   this way. */
.section-header.collapsed .btn-collapse,
.bl-collapse.collapsed .btn-collapse {
    transform: rotate(180deg);
}

/* Collapse bars are anchors around the whole strip, so the bar is the click target, not the 35px
   caret. The `a` scope keeps the collapse-less .section-header bars (imprint, privacy, forms)
   untouched; the colour reset fights `a:hover`, which beats .section-header's own white. */
a.section-header,
a.section-header:hover,
a.bl-collapse,
a.bl-collapse:hover {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

    /* One affordance for the whole strip, in place of a caret-only hover. Works across all
       three .header-* gradients and the flat /License bar with a single declaration. */
    a.section-header:hover,
    a.bl-collapse:hover {
        filter: brightness(1.1);
    }

.section-body {
    padding: 1.875rem;
    background-color: white;
}

.bl-card {
    padding: 1.25rem;
    background-color: #f6f6f6;
    border: 1px solid var(--grey-color-border);
    border-radius: 0.625rem;
}

.offer-form .bl-card {
    padding-bottom: 2rem;
}

.offer-form .row {
    --bs-gutter-x: 5px;
}

.offer-form label:not(.form-check-label) {
    white-space: nowrap;
    padding-top: calc(.375rem + var(--bs-border-width));
    padding-bottom: calc(.375rem + var(--bs-border-width));
    margin-bottom: 0;
    line-height: 1.5;
}

/* Body size rather than the 0.875rem that `p` in _layout.css hands every paragraph: this one
   opens its section and is the first thing read on the page. */
.section-text {
    margin-bottom: 1.25rem;
    font-size: 1rem;
}

    /* Where nothing follows, the card's own padding is already the spacing. In the other 21
       views a chart, a form or a validation summary comes next and still needs separating. */
    .section-text:last-child {
        margin-bottom: 0;
    }

.section-body .bl-card {
    margin-bottom: 1.25rem;
}

.quantity-col {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .quantity-col select {
        max-width: 65px;
    }

.volume-type-col {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .volume-type-col select {
        max-width: 195px;
    }

.team-col > div {
    height: 35px;
    display: flex;
    align-items: center;
}

.section-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 1.875rem;
}

.confirm-form .form-label-col {
    padding-right: 5px;
}

.confirm-form .form-full-col {
    padding-left: 35px;
}

@media (max-width: 576px) {
    .section-header {
        padding: 0 0.75rem;
    }

    .section-body {
        padding: 0.75rem;
    }

    .section-text {
        margin-bottom: 0.75rem;
    }

    .section-buttons {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 10px;
        margin-top: 1rem;
    }

    .bl-card, .offer-form .bl-card {
        padding: 0.75rem;
    }
}

/* "{Label}: {Value}" on one line, deliberately against the delivered mockup.
   !important because .d-flex has to stay for the 155px label column from
   768px up; 767.98px so no third layout sits between this one and the desktop. */
@media (max-width: 767.98px) {
    .confirm-form .bl-card > div {
        display: block !important;
    }

    .confirm-form .form-label-col,
    .confirm-form .form-full-col,
    .confirm-form .form-label-col .col-form-label,
    .confirm-form .form-full-col .form-control-plaintext {
        display: inline;
        padding: 0;
    }
}

@media (min-width: 768px) {
    .form-label-col {
        flex: 0 0 155px;
        text-align: end;
    }

    .form-full-col {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .form-half-col {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .form-gap-col {
        flex: 0 0 60px;
        text-align: center;
    }
}

@media (min-width: 992px) {
    .phone-col {
        width: 55.7%;
    }

    .volume-type-col {
        gap: 35px;
    }
}

@media (min-width: 1200px) {
    .phone-col {
        width: 54.7%;
    }
}

@media (min-width: 1400px) {
    .phone-col {
        width: 54%;
    }
}

.radio-card {
    height: 100%;
    padding: 0 1.875rem;
    border-radius: 0.625rem;
    text-align: center;
    background-color: #f6f6f6;
    cursor: pointer;
    color: var(--grey-color-text);
}

    .radio-card.primary-card input[type="radio"] {
        accent-color: var(--primary-color);
    }

    .radio-card.primary-card:has(input:checked) {
        color: white;
        background-color: var(--primary-color);
    }

    .radio-card.secondary-card input[type="radio"] {
        accent-color: var(--secondary-color);
    }

    .radio-card.secondary-card:has(input:checked) {
        color: white;
        background-color: var(--secondary-color);
    }

    .radio-card .card-header, .radio-card .card-footer {
        background-color: inherit;
        padding: 1.5rem 1rem;
    }

    .radio-card .card-header, .radio-card .card-body {
        border-bottom: 1px solid var(--grey-color-border);
    }

    .radio-card.primary-card:has(input:checked) .card-header, .radio-card.primary-card:has(input:checked) .card-body {
        border-bottom: 1px solid #68a19a;
    }

    .radio-card.secondary-card:has(input:checked) .card-header, .radio-card.secondary-card:has(input:checked) .card-body {
        border-bottom: 1px solid #4a0b00;
    }

    .radio-card .card-body, .radio-card .card-footer {
        border-top: 1px solid white;
    }

    .radio-card.primary-card:has(input:checked) .card-body, .radio-card.primary-card:has(input:checked) .card-footer {
        border-top: 1px solid #11342e;
    }

    .radio-card.secondary-card:has(input:checked) .card-body, .radio-card.secondary-card:has(input:checked) .card-footer {
        border-top: 1px solid #bc4e4a;
    }

.ship-tabs {
    --circle-size: 50px;
    --tab-gap: 35px;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 10px;
    margin: 0;
    border-radius: 10px;
    background-color: #ededed;
    border: 1px solid var(--grey-color-border);
}

.tab-item {
    flex: 1;
    text-align: center;
    position: relative;
}

    .tab-item:not(:last-child)::after {
        display: none;
        content: '';
        position: absolute;
        left: calc(50% + var(--circle-size) / 2 + 25px);
        right: calc(-50% + var(--circle-size) / 2 + 25px - var(--tab-gap));
        top: 45%;
        height: 1px;
        background-color: var(--grey-color-text);
    }

    .tab-item > div {
        cursor: pointer;
    }

.tab-icon {
    position: relative;
    width: var(--circle-size);
    height: var(--circle-size);
    margin: 0 auto 5px auto;
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-item .active .tab-icon {
    background-color: var(--primary-color);
}

    .tab-icon img {
        position: absolute;
    }

.tab-item .icon-active, .tab-item .active .icon-default {
    opacity: 0;
}

.tab-item .active .icon-active {
    opacity: 1;
}

.tab-text {
    font-size: 0.875rem;
    line-height: 1.2;
    word-break: break-word;
}

.tab-content-text {
    font-size: 0.875rem;
    text-align: center;
    padding: 0 3rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .ship-tabs {
        column-gap: var(--tab-gap);
    }

    .tab-item:not(:last-child)::after {
        display: block;
    }

    #ship-form .col-form-label {
        text-align: right;
    }
}

.profile-form .row {
    --bs-gutter-x: 0.5rem;
}

.image-uploader-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.image-uploader {
    width: 100%;
    max-width: 260px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid var(--grey-color);
}

.photo-avatar {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.photo-rect {
    aspect-ratio: 3 / 2;
}

/* logos must stay uncropped inside the rectangular frame */
.photo-rect .image-uploader-img {
    object-fit: contain;
}

.image-uploader-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-uploader-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.875rem;
    text-align: center;
    padding: 0.5rem;
}

.image-uploader-label {
    width: min(100%, 260px);
}

@media (max-width: 576px) {
    /* every large button spans its card on phones - the submit inside the form,
       the password link and the uploader buttons in the sidebar cards alike */
    .bl-lg-btn {
        width: 100%;
    }

    .image-uploader-label {
        width: 100%;
    }
}

@media (min-width: 576px) {
    .profile-form .col-form-label {
        text-align: end;
    }
}

.bl-collapse {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 10px;
    font-size: 1.125rem;
    padding: 10px;
    color: white;
    background-color: var(--primary-color);
    margin-bottom: calc(var(--spacer) / 2 );
}

    .collapse-wrapper.deactivated {
        pointer-events: none;
    }

    .collapse-wrapper {
        scroll-margin-top: 10px;
    }

/* Target of the "book modules" link on the licences list — same offset as the wizard steps. */
#license-request {
    scroll-margin-top: 10px;
}

    .bl-collapse.disabled {
        background-color: var(--grey-color-light-border);
        pointer-events: none;
    }

    .bl-collapse .title {
        padding-left: 1rem;
    }

    /* 12.6:1 — white on the dark green circle. The glyph keeps its own declaration although the
       bar carries the anchor: make the caret the anchor again and the global `a { color:
       var(--primary-color) }` beats the inherited white and paints dark on dark green, 1.7:1. */
    .bl-collapse .btn-collapse {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 35px;
        width: 35px;
        border-radius: 50%;
        background-color: var(--primary-color-dark);
        color: #fff;
        font-size: 0.5rem;
    }

    .bl-collapse.disabled .btn-collapse {
        color: var(--grey-color-light-border);
        background-color: #bbbcbc;
        cursor: auto;
    }

        .bl-collapse.disabled .btn-collapse:hover {
            color: var(--grey-color-light-border);
        }

.license-list-container {
    padding-top: calc(var(--spacer) / 2 );
    padding-bottom: var(--spacer);
}

.license-item {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ededed;
    padding: 2rem;
    border-radius: var(--border-radius);
}

    .license-item.active {
        color: white;
        background-color: var(--primary-color);
    }

.license-category {
    cursor: pointer;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    border: 1px solid transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

    /* Centering needs this off — in the tariff tiles the growing description
       pushes price and button to the bottom, here it would pin content to the top */
    .license-category .license-description {
        flex-grow: 0;
    }

    /* Same hover affordance as .banner — keep the two in sync */
    .license-category:hover {
        border-color: var(--primary-color-light);
        box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
        transform: translateY(-2px);
    }

    .license-category .license-title {
        font-size: 1.5rem;
    }

.license-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 220px;
}

.license-icon {
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .license-icon img {
        max-height: 100px;
    }

.license-title {
    font-size: 1.875rem;
}

.license-description {
    flex-grow: 1;
}

.license-item .icon-active, .license-item.active .icon-default {
    display: none;
}

.license-item.active .icon-active {
    display: block;
}

.license-desc-list {
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

    .license-desc-list li {
        position: relative;
        padding-left: 30px;
        margin-bottom: 1rem;
    }

        /* The tick ships as a single file; the colour comes from background-color through the
           mask, which saves a second file differing only in its fill. */
        .license-desc-list li:after {
            content: "";
            width: 21px;
            height: 20px;
            position: absolute;
            top: 0px;
            left: 0px;
            background-color: var(--primary-color);
            -webkit-mask: url(../images/check.svg) no-repeat center / contain;
            mask: url(../images/check.svg) no-repeat center / contain;
        }

        .active .license-desc-list li:after {
            background-color: #fff;
        }

.license-price {
    font-size: 1.875rem;
    color: var(--primary-color);
    background-color: #d9dfde;
    padding: 0.5rem;
    text-align: center;
}

.active .license-price {
    color: white;
    background-color: #407067;
}

/* Match the tile's 2rem bottom padding so the button sits evenly between price bar and edge */
.license-item .select-btn {
    margin-top: 2rem;
}

.active .select-btn {
    color: var(--primary-color);
    background-color: white;
}

.no-options {
    padding: 80px 0;
    text-align: center;
    color: #d5d5d5;
}

.confirm-table-wrapper {
    background-color: #ededed;
    font-size: 1.25rem;
    padding: 1rem;
}

.confirm-hint {
    background-color: #ededed;
    padding: 1rem;
}

/* Own classes rather than the mt- and justify-content- utilities: phones need a wider gap and
   the other alignment here, and Bootstrap's utilities are !important — the mobile sheet could
   not override either. */
.confirm-actions {
    margin-top: 0.5rem;
}

.confirm-consent {
    justify-content: flex-end;
}

    .confirm-table-wrapper .table {
        --bs-table-color: var(--grey-color);
        --bs-table-bg: #ededed;
        --bs-table-border-color: #dddddd;
    }

        .confirm-table-wrapper .table tr > td:last-child {
            text-align: right;
        }

    .confirm-table-wrapper .price {
        font-size: 1.25rem;
        color: var(--primary-color);
        margin: 0;
    }

    .confirm-table-wrapper .discount {
        font-size: 1rem;
        color: var(--secondary-color);
        margin: 0;
    }

    .confirm-table-wrapper .description {
        font-size: 1rem;
    }

    .confirm-table-wrapper .license-desc-list, .confirm-table-wrapper .license-desc-list li {
        margin: 0;
    }

        .confirm-table-wrapper .license-desc-list li:after {
            top: 2px;
            width: 15px;
            height: 15px;
            background-size: cover;
        }

/* Three columns need 359px of min-content at 1.25rem, a 390px phone offers 341px — and a table
   overgrows its container instead of wrapping, so the amount was clipped with no way to scroll
   to it. Rows become blocks: label and value share a line, the amount goes below. */
@media (max-width: 767.98px) {
    .confirm-table-wrapper .table,
    .confirm-table-wrapper .table tbody,
    .confirm-table-wrapper .table tr,
    .confirm-table-wrapper .table td {
        display: block;
    }

    /* Border and padding move from the cells to the row - stacked cells would each
       draw their own separator, giving three lines per row instead of one. */
    .confirm-table-wrapper .table td {
        padding: 0;
        border: 0;
    }

    .confirm-table-wrapper .table tr {
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--bs-table-border-color);
    }

    .confirm-table-wrapper .table tr:last-child {
        border-bottom: 0;
    }

    .confirm-table-wrapper .table td:first-child,
    .confirm-table-wrapper .table td:nth-child(2) {
        display: inline;
    }

    /* The empty placeholder cells of the total row would otherwise leave gaps. */
    .confirm-table-wrapper .table td:empty {
        display: none;
    }
}

/* ---- License Comparison Table ---- */

.license-comparison {
    overflow-x: auto;
}

.license-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    color: var(--grey-color-text);
    table-layout: fixed;
    line-height: normal;
}

    .license-table th,
    .license-table td {
        text-align: center;
        vertical-align: middle;
        border-color: white;
        border-width: 2px;
    }

        .license-table td {
            height: 50px;
        }

            .license-table td:first-child,
            .license-table th:first-child {
                padding: 0 1rem;
                text-align: left;
                width: 20%;
                overflow: hidden;
            }

    .license-table thead th {
        background-color: var(--primary-color);
        color: white;
        border-color: white;
        border-width: 2px;
        height: 100px;
    }

    .license-table thead th {
        font-weight: normal;
        font-size: 1.125rem;
    }

    .license-table .plan-name {
        display: block;
    }

    .license-table .plan-price {
        font-size: 0.75rem;
        color: #85b7af;
        display: block;
        margin-top: 0.25rem;
    }

    .license-table tbody tr {
        background-color: var(--grey-color-light-border);
    }

    .license-table tbody tr:nth-child(odd) {
        background-color: #ededed;
    }

    .license-table .feature-sub {
        font-size: 0.625rem;
        display: block;
    }

    .license-table tfoot td {
        padding: 0.75rem 0.5rem;
        border: none;
    }

.license-footnotes {
    display: flex;
    gap: 17%;
    font-size: 0.75rem;
    color: var(--grey-color-text);
    text-align: center;
    margin-left: 31%;
}

.license-table--prices tbody tr {
    background-color: #e9efee;
}

    .license-table--prices tbody tr:nth-child(odd) {
        background-color: #cad7d5;
    }

.license-flex-header {
    margin-top: 1.5rem;
}

    .license-flex-header .title {
        font-size: 1.25rem;
        color: var(--primary-color);
    }

    .license-flex-header .subtitle {
        font-size: 0.875rem;
        color: var(--grey-color-text);
    }

.license-flex {
    display: flex;
    gap: 2px;
    margin-top: 0.75rem;
}

    .license-flex__item {
        background-color: var(--primary-color);
        color: white;
        font-size: 1.125rem;
        text-align: center;
        padding: 0.75rem 2rem;
    }

        .license-flex__item .plan-name {
            display: block;
        }

        .license-flex__item .plan-price {
            font-size: 0.75rem;
            color: #85b7af;
            display: block;
            margin-top: 0.25rem;
        }

.icon-check-circle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #49ae49;
    background-image: url(../images/check.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    vertical-align: middle;
}

/* News */

.news-body * {
    font-family: inherit !important;
}

.news-image-container {
    text-align: center;
}

.news-image-container img {
    max-height: 200px;
}

/* Premium indicator (e.g., on gated period buttons) */
.premium-icon {
    height: 18px;
    width: auto;
    vertical-align: middle;
    margin-right: 4px;
}

/* Bootstrap tooltips (opt-in via data-bs-toggle). Absolute size: the phone root is
   14px, so the relative default would render below the form text the hint explains. */
.tooltip {
    --bs-tooltip-font-size: 14px;
    --bs-tooltip-max-width: 320px;
    --bs-tooltip-bg: var(--primary-color-dark);
}

/* For triggers sitting on a dark brand surface, where the default bubble is the surface.
   Opt in per trigger with data-bs-custom-class; the arrow follows the same variable. */
.tooltip-on-dark {
    --bs-tooltip-bg: white;
    --bs-tooltip-color: var(--grey-color-text);
    --bs-tooltip-opacity: 1;
}

/* iOS Safari auto-zooms on focus below a 16px computed font-size and never zooms back out,
   cutting off the form's right edge. Scoped by pointer, not viewport width: iPads take the
   desktop layout via UA sniffing, so a max-width query would miss them. */
@media (pointer: coarse) {
    .form-control, .form-control-xs, .form-select, textarea, .k-input-inner, .iti__search-input, .topbar-section select {
        font-size: 16px;
    }

    /* No zoom risk itself (buttons don't trigger it) — sized to match the real
       controls it imitates next to in the grid filter rows. */
    .btn-form-control {
        font-size: 16px;
    }
}

/* Hold numbering in the ship form: "Raum 1 / Luke 1" is noise on the single-hold barges most of
   them are. The number sits in every block from the start and is only revealed once a second
   hold exists, so the clone script never has to re-label blocks it already created. */
.hold-number {
    display: none;
    margin-left: 0.25em;
}

#holds-list.has-multiple-holds .hold-number {
    display: inline;
}

/* Icon-only row actions (edit / delete / photo): a bare <a><img></a> gave no sign of being
   clickable. The square holds the hit area whatever the glyph's aspect ratio, and only the frame
   appears on hover. Kept off the JS hooks (.open-modal), which also sit on text buttons. */
.grid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

    .grid-action:hover,
    .grid-action:focus-visible {
        background-color: var(--grey-color-light);
        border-color: var(--grey-color-border);
    }

    /* The two actions that change something answer in the site's own colours, not the neutral
       grey: green for the safe one, red for the irreversible one. Both tints sit at the same
       lightness (93 % / 92 %) so neither shouts louder; the green is .license-table--prices'. */
    .grid-action.grid-action-edit:hover,
    .grid-action.grid-action-edit:focus-visible {
        background-color: #e9efee;
        border-color: var(--primary-color);
    }

    .grid-action.grid-action-delete:hover,
    .grid-action.grid-action-delete:focus-visible {
        background-color: #f6e7e6;
        border-color: var(--secondary-color);
    }

    /* The photo cell renders a disabled <a> with no href when a ship has none;
       it must not pretend to be pressable. */
    .grid-action:not([href]) {
        cursor: default;
    }

        .grid-action:not([href]):hover {
            background-color: transparent;
            border-color: transparent;
        }

/* Icons like globe.svg ship in grey only and sometimes sit on a dark ground. brightness(0)
   flattens them to black, invert(1) to white, whatever the source tone — no second file. */
.icon-invert {
    filter: brightness(0) invert(1);
}

/* Eyebrow over a 3rem headline: at body size and colour the date read as the article's first line. */
.news-date {
    margin-bottom: 0.25rem;
    color: var(--primary-color-light);
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
}

/* ---- Upcoming price change notice ---- */

/* Bootstrap's stock alert-info blue sits outside the site palette. Only colour and the
   left rule are set; spacing and layout stay Bootstrap's, like every other alert here. */
.alert-price-change {
    border: 1px solid var(--primary-color-light);
    border-left-width: 4px;
    background-color: #e9efee;
    color: var(--primary-color-dark);
}

    .alert-price-change .k-icon {
        /* Optical alignment with the first line of text rather than the box. */
        margin-top: 0.15rem;
        color: var(--primary-color);
    }

    .alert-price-change a {
        color: var(--primary-color-dark);
        font-weight: 600;
    }

    /* The link keeps its underline at rest and hover only recolours: an underline that
       appears on hover alone would hide that the link is the point of the notice. */
    .alert-price-change a:hover {
        color: var(--primary-color);
    }

/* The notice in the booking confirmation carries the same words in less room —
   it sits under a table that already ends in a total. */
.alert-price-change.is-compact {
    font-size: 0.875rem;
    padding: 0.6rem 0.75rem;
}

/* ---- Price change page ---- */

/* Sets the announced values apart from the page heading, so a visitor who
   arrived from the notice sees at once which date the table refers to. */
.price-change-lead {
    margin-bottom: 1.5rem;
    color: var(--grey-color-text);
}

    .price-change-lead .date {
        color: var(--primary-color-dark);
        font-weight: 600;
    }

/* ---- Cookie consent (lib/consent, CookieConsent v3) ---- */

/* Our tokens on the library's variables. The z-index sits above the mobile overlay (1040),
   which otherwise wins the tie as #cc-main is appended last, and below Bootstrap's backdrop (1050). */
:root {
    --cc-z-index: 1045;
    --cc-font-family: DINish, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --cc-modal-border-radius: 1.25rem;
    --cc-btn-border-radius: var(--border-radius);
    --cc-primary-color: var(--grey-color-dark);
    --cc-secondary-color: var(--grey-color-text);
    --cc-link-color: var(--primary-color);
    --cc-btn-primary-bg: var(--primary-color);
    --cc-btn-primary-hover-bg: var(--primary-color-dark);
    --cc-btn-secondary-bg: var(--grey-color);
    --cc-btn-secondary-color: #fff;
    --cc-btn-secondary-hover-bg: var(--grey-color-dark);
    --cc-btn-secondary-hover-color: #fff;
    --cc-btn-secondary-hover-border-color: var(--grey-color-dark);
    --cc-toggle-on-bg: var(--primary-color);
    --cc-toggle-off-bg: var(--grey-color);
    --cc-toggle-readonly-bg: var(--grey-color-light);
    --cc-separator-border-color: var(--grey-color-light);
    --cc-cookie-category-block-bg: #f3f3f3;
    --cc-cookie-category-block-border: var(--grey-color-light-border);
    --cc-cookie-category-block-hover-bg: var(--grey-color-light);
    --cc-cookie-category-block-hover-border: var(--grey-color-light-border);
    --cc-footer-bg: #f3f3f3;
    --cc-footer-border-color: var(--grey-color-light-border);
    --cc-overlay-bg: rgba(0, 0, 0, 0.5);
}

/* The library's shadow falls downwards, so a bottom bar reads as the page's foot rather
   than as an overlay. Instead: a grey band with a shadow upwards, the content on it as a
   card framed like a hovered .banner tile. */
#cc-main .cm--bar {
    background: var(--grey-color-light);
    box-shadow: 0 -0.5rem 2rem rgba(0, 0, 0, 0.3);
    padding: 1rem 1.5rem;
}

#cc-main .cm--bar .cm__body {
    background: #fff;
    border: 1px solid var(--primary-color-light);
    border-radius: var(--border-radius);
    padding: 0.5em 1rem 0.9em;
}

/* Below 640 px the library forces the body's padding to 0 !important; the texts and buttons
   bring their own side padding there, only the bottom needs restoring. */
@media (max-width: 640px) {
    #cc-main .cm--bar {
        padding: 0.75rem;
    }

    #cc-main .cm--bar .cm__body {
        padding-bottom: 0.75rem !important;
    }
}

/* The preferences modal's close button in the .bl-modal style: no box, the Fontello X in
   green. The library's SVG is hidden, not replaced — its markup stays intact for the a11y label. */
#cc-main .pm__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
}

    #cc-main .pm__close-btn:hover {
        background: transparent;
    }

    #cc-main .pm__close-btn span {
        display: none;
    }

    #cc-main .pm__close-btn::before {
        content: '\e800';
        font-family: "fontello";
        font-size: 1.25rem;
        color: var(--primary-color);
    }

    #cc-main .pm__close-btn:hover::before {
        color: var(--primary-color-dark);
    }

/* The library's 42 px buttons stay: the bar is dismissed without aiming, so it gets touch
   size on every width, unlike the site's .btn-sm. */
#cc-main .cm__btn,
#cc-main .pm__btn {
    font-weight: normal;
}

/* ---- Support launcher ---- */

/* The way to the chat for visitors who declined it. Below the mobile overlay (1040), so the
   open menu covers it; the consent bar (1045) sits above both. */
.support-launcher {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1035;
    min-height: 44px;
    padding: 0.375rem 1.25rem;
    border: 1px solid #fff;
    border-radius: var(--border-radius);
    background: var(--primary-color);
    color: #fff;
    font-size: 0.875rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

    .support-launcher:hover {
        background: var(--primary-color-dark);
    }

/* Same touch size as the consent bar's buttons, not the site's .btn-sm. */
#supportModal .modal-footer .btn {
    min-height: 44px;
    padding-inline: 1.25rem;
}