/* Opakovaně použitelné komponenty a interakční vrstvy. */

.brand-card-menu {
    width: 100%;
    max-width: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.985);
    transition: opacity 160ms ease, transform 160ms ease;
}

.brand-card-menu nav > a:not(.brand-menu-link) {
    display: none;
}

.brand-logo-slot {
    width: 100%;
    min-height: 3.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 1.82rem;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

.brand-logo--honda {
    max-height: 1.48rem;
}

.brand-logo--audi {
    max-height: 1.56rem;
}

.brand-logo--vw {
    max-height: 1.94rem;
}

.brand-card:focus-within:not(.is-closing) .brand-card-menu,
.brand-card.is-open .brand-card-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
    .brand-card:not(.is-closing):hover .brand-card-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }
}

.header-sos-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(0.985);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.header-sos {
    position: relative;
}

.header-sos-trigger,
.header-sos-mobile {
    display: inline-flex;
    align-items: center;
}

.header-sos-mobile {
    width: auto;
    gap: 0.58rem;
    min-width: 5.2rem;
    padding-left: 0.78rem;
    padding-right: 0.78rem;
}

.header-sos-phone-icon,
.header-sos-car-icon {
    display: block;
    width: auto;
    height: 1.06rem;
    flex: 0 0 auto;
}

@media (hover: hover) and (pointer: fine) {
    .header-sos::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        height: 14px;
    }

    .header-sos:hover .header-sos-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .header-sos:hover .header-sos-trigger {
        background: rgba(179, 32, 37, 0.82);
    }
}

.header-sos-menu a:hover {
    background: #f1f5f9;
}

.header-sos-menu > p {
    display: none;
}

.header-sos-menu > p::before {
    content: "Servis po nehodě";
    display: block;
    font-size: 0.7rem;
    line-height: 1.1;
    text-transform: none;
}

.header-sos-menu > p::before {
    content: none;
    display: none;
}

.hero-glass-card {
    background: rgba(20, 28, 40, 0.20);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 18px 40px rgba(8, 13, 21, 0.12);
}

.hero-glass-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.003));
    pointer-events: none;
    transition: opacity 300ms ease;
}

.hero-glass-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(247, 244, 239, 0.82);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
}

.hero-glass-card:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 24px 54px rgba(8, 13, 21, 0.16);
}

.hero-glass-card:hover::before {
    opacity: 0;
}

.hero-glass-card:hover::after {
    opacity: 1;
}

.hero-card-icon {
    filter: brightness(0) invert(1);
    transition: filter 300ms ease;
}

.hero-glass-card:hover .hero-card-icon {
    filter: brightness(0) saturate(100%) invert(15%) sepia(96%) saturate(3322%) hue-rotate(344deg) brightness(84%) contrast(96%);
}
.vehicle-dynamic-badge {
    background-color: var(--badge-bg, #151b23) !important;
    color: var(--badge-color, #fff) !important;
    border-color: var(--badge-bg, #151b23) !important;
}