/* Theme overlay: loaded after the existing application CSS. Media retain their colors. */
/* Change the brand color here. Derived ink and hover colors follow it. */
:root {
    --mh-brand: #0085c1;
    --mh-on-brand: #ffffff;
}
:root, html[data-theme="light"] {
    --mh-bg: #f5f5f5;
    --mh-surface: #f5f5f5;
    --mh-card: #ffffff;
    --mh-text: #000000;
    --mh-muted: #515151;
    --mh-border: #515151;
    --mh-accent: #005b85;
    --mh-accent: color-mix(in srgb, var(--mh-brand) 68%, black);
    --mh-nav: rgba(255, 255, 255, .9);
    --mh-menu: #ffffff;
    --mh-price-card: #e8e8e8;
    --mh-story: #ffffff;
    --mh-shadow: 0 8px 28px rgba(25, 45, 60, .12);
}
html[data-theme="dark"] {
    --mh-bg: #000000;
    --mh-surface: #000000;
    --mh-card: #363636;
    --mh-text: #ffffff;
    --mh-muted: #cbcbcb;
    --mh-border: #cbcbcb;
    --mh-accent: #63c5f2;
    --mh-accent: color-mix(in srgb, var(--mh-brand) 50%, white);
    --mh-nav: rgba(48, 48, 48, .9);
    --mh-menu: #303030;
    --mh-price-card: #363636;
    --mh-story: #cbcbcb;
    --mh-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}
html[data-theme] body { background: var(--mh-bg); color: var(--mh-text); }
html[data-theme] :is(#about, #ContactForm, #smartDevices, #supportedBrands) {
    background: var(--mh-surface) !important;
    color: var(--mh-text);
}
html[data-theme] :is(#smart, #services, #servicesVideo, #carousel) {
    background-color: var(--mh-bg);
    color: var(--mh-text);
}
html[data-theme] #pageCards { background: var(--mh-surface); border-bottom-color: var(--mh-border); }
html[data-theme] #pageCards .page-card {
    background: var(--mh-surface);
    color: var(--mh-text);
}
html[data-theme] #pageCards .page-card:nth-child(even) { background: var(--mh-card); }
html[data-theme] :is(#contact .contact-card, #contact .contact-card-index, #prices .prices-card .card, #smartDevices .device-card) {
    background: var(--mh-card) !important;
    color: var(--mh-text) !important;
    box-shadow: var(--mh-shadow);
    border-color: var(--mh-border);
}
html[data-theme] #prices .section-bg { background: var(--mh-surface); }
html[data-theme] #prices .price-icon { background: var(--mh-surface) !important; }
html[data-theme] #prices .price-value { color: #fff; }
html[data-theme] :is(#ContactForm, #prices) .text-white { color: var(--mh-text) !important; }
html[data-theme] :is(#ContactForm, .navbar) .form-control {
    background: var(--mh-card);
    color: var(--mh-text);
    border-color: var(--mh-border);
}
html[data-theme] #ContactForm .form-control::placeholder { color: var(--mh-muted); opacity: 1; }
html[data-theme] #ContactForm :is(.btn-minus, .btn-plus) { background: var(--mh-card); color: var(--mh-text); }
html[data-theme] :is(#about, #ContactForm, #smart, #services, #smartDevices) .text-primary { color: var(--mh-accent) !important; }
html[data-theme] .navbar.bg-dark {
    background: var(--mh-nav) !important;
    opacity: 1;
    border-bottom: 1px solid rgba(128, 128, 128, .3);
}
html[data-theme] .navbar-dark .navbar-nav .nav-link { color: var(--mh-text); }
html[data-theme] .navbar-dark .navbar-nav .nav-link:hover { color: var(--mh-accent); }
html[data-theme] .navbar .btn-outline-light { color: var(--mh-text); border-color: var(--mh-border); }
html[data-theme] .navbar .hamburger-inner,
html[data-theme] .navbar .hamburger-inner::before,
html[data-theme] .navbar .hamburger-inner::after { background-color: var(--mh-text); }
html[data-theme] :is(button, a, select, input, textarea):focus-visible {
    outline: 3px solid var(--mh-accent);
    outline-offset: 3px;
}
/* Keep readable white labels over the unmodified hero footage and blue buttons. */
html[data-theme] .v-header { color: #fff; }
html[data-theme] .btn-primary { color: #fff; }
@media (min-width: 768px) {
    html[data-theme] #pageCards .page-card:nth-child(odd) {
        background: linear-gradient(90deg, var(--mh-surface) 50%, var(--mh-card) 50%);
    }
    html[data-theme] #pageCards .page-card:nth-child(even) {
        background: linear-gradient(90deg, var(--mh-card) 50%, var(--mh-surface) 50%);
    }
}

html[data-theme] .navbar-dark .navbar-nav .nav-link.active { color: var(--mh-accent); }

/* Central brand controls for interactive components. */
html[data-theme] .btn-primary,
html[data-theme] .bg-primary {
    background-color: var(--mh-brand) !important;
    border-color: var(--mh-brand);
    color: var(--mh-on-brand) !important;
}
html[data-theme] .btn-primary:hover,
html[data-theme] .btn-primary:focus {
    background-color: var(--mh-brand) !important;
    background-color: color-mix(in srgb, var(--mh-brand) 82%, black) !important;
    border-color: var(--mh-brand);
}
html[data-theme] .text-primary { color: var(--mh-accent) !important; }
html[data-theme] .navbar #magic-line,
html[data-theme] .navbar .nav-link.active::after { background: var(--mh-brand) !important; }
html[data-theme] .navbar .navbar-collapse { background: transparent; }

/* Own interface details also follow the brand; external logos and media do not. */
html[data-theme] :is(#smart, #services) .services-title,
html[data-theme] .tool-element .tool-element-content { color: var(--mh-accent); }
html[data-theme] .tool-element .tool-element-content { background: var(--mh-card); }
html[data-theme] .tool-element .tool-element-content:hover {
    background: var(--mh-brand);
    color: var(--mh-on-brand);
}
html[data-theme] .tooltip-element .tooltip-box,
html[data-theme] .tooltip-element .tooltip-box::before {
    background: var(--mh-brand);
    color: var(--mh-on-brand);
}
/* Purpose cards retain white backgrounds in both themes. */
html[data-theme] #ContactForm .cc-selector .teszt,
html[data-theme] #ContactForm .cc-selector-2 .teszt { color: #000000; }
html[data-theme] #ContactForm input[type="checkbox"]::before,
html[data-theme] #ContactForm .cc-selector input:checked + .teszt,
html[data-theme] #ContactForm .cc-selector-2 input:checked + .teszt {
    background-color: var(--mh-brand);
    color: var(--mh-on-brand);
}
html[data-theme] #ContactForm .arrow-down { border-top-color: var(--mh-brand); }
html[data-theme] #ContactForm .arrow-up { border-bottom-color: var(--mh-brand); }
html[data-theme] #ContactForm { --form-control-color: var(--mh-brand); --form-control-disabled: var(--mh-muted); }

/* The monochrome logo uses readable theme ink without altering its shape. */
html[data-theme="light"] :is(.navbar-brand, #ContactForm) img[src$="myhome-gray.png"] { filter: brightness(0) invert(.317647); }
html[data-theme="dark"] :is(.navbar-brand, #ContactForm) img[src$="myhome-gray.png"] { filter: brightness(0) invert(1); }
/* Integration copy and rich-text blocks inherit the theme rather than legacy backgrounds. */
html[data-theme] .smart-integration-section { background: var(--mh-surface) !important; color: var(--mh-text); }
html[data-theme] #about :is(p, h2, h3, li, span)[style*="color"] { color: inherit !important; }
html[data-theme] #about h2 { color: var(--mh-accent); }
html[data-theme] #supportedBrands .text-white { color: var(--mh-text) !important; }
html[data-theme] #ContactForm .bg-white { background: var(--mh-card) !important; }
html[data-theme] #prices .price-value { color: var(--mh-on-brand) !important; }

/* Approved palette: distinct surfaces, including previously hard-coded detail cards. */
html[data-theme] .service-card { background: var(--mh-card); color: var(--mh-text); }
html[data-theme] #smart { background: var(--mh-story); color: #000000; }
html[data-theme] #prices { background: var(--mh-bg); }
html[data-theme="light"] #prices { background: #ffffff; }
html[data-theme="dark"] #prices { background: #303030; }
html[data-theme] #prices .section-bg { background: transparent; }
html[data-theme] #prices .prices-card .card { background: var(--mh-price-card) !important; }
html[data-theme] #prices .price-icon { background: #ffffff !important; }
html[data-theme] #services .contact-card,
html[data-theme] #services .contact-card-index { background: var(--mh-card) !important; color: var(--mh-text); }
html[data-theme] .navbar .hamburger { padding: 10px; min-width: 44px; min-height: 44px; }
html[data-theme] .navbar .hamburger-box { width: 24px; height: 20px; }
html[data-theme] .navbar .hamburger-inner,
html[data-theme] .navbar .hamburger-inner::before,
html[data-theme] .navbar .hamburger-inner::after { width: 24px; height: 2px; }
html[data-theme] .navbar .hamburger-inner::before { top: -7px; }
html[data-theme] .navbar .hamburger-inner::after { bottom: -7px; }
@media (max-width: 991.98px) {
    html[data-theme] .navbar .navbar-collapse {
        background: var(--mh-menu);
        top: 100%; max-height: calc(100dvh - 60px); overflow-y: auto;
        box-shadow: var(--mh-shadow);
    }
    html[data-theme] #carousel > .carousel > .back-button {
        position: absolute; top: 70px; left: 8px; margin: 0;
        z-index: 1020;
    }
}

/* Inactive legacy carousels must not leave an invisible Back control above the page. */
html[data-theme] #carousel > .carousel:not(:has(.carousel-item.active)) > .back-button {
    visibility: hidden; pointer-events: none;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Keep the existing desktop hotspots within the narrower illustration. */
    html[data-theme] #map-img .tooltip-element { width: min(300px, 20%) !important; }
    html[data-theme] #map-img .lottie { max-width: 100%; }
}

/* Navigation belongs to the open detail panel, never to the category overview. */
html[data-theme] #carousel > .carousel:not(:has(.carousel-item.active)) > .carousel-indicators {
    visibility: hidden; pointer-events: none;
}
html[data-theme] #carousel .carousel-indicators li { cursor: pointer; }
html[data-theme] #prices .splide__pagination__page.is-active {
    background-color: transparent !important;
}

/* Center each mobile category card within its half of the grid. */
html[data-theme] #serviceMobileIcons .tool-element-content {
    margin-inline: auto;
    max-width: 100%;
}

@media (max-width: 767.98px) {
    html[data-theme] #serviceMobileIcons .tool-element-content > img {
        height: 60px;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }
}

@media (max-width: 767.98px) {
    /* A stable square surface in both idle and hover states. */
    html[data-theme] #serviceMobileIcons .tool-element-content,
    html[data-theme] #serviceMobileIcons .tool-element-content:hover {
        width: min(165px, 100%);
        aspect-ratio: 1;
        padding: 12px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    html[data-theme] #serviceMobileIcons .tool-element-content > img {
        flex-shrink: 0;
    }
    html[data-theme] #serviceMobileIcons .tool-element-content > p {
        margin: 0 !important;
        font-size: 14px;
        line-height: 1.3;
    }
    html[data-theme] #serviceMobileIcons .tool-element-content:hover > img,
    html[data-theme] #serviceMobileIcons .tool-element-content:focus-within > img {
        filter: brightness(0) invert(1);
    }
    html[data-theme] #serviceMobileIcons .tool-element-content:focus-within {
        background: var(--mh-brand);
        color: var(--mh-on-brand);
    }
}

/* Price cards keep their desktop depth; badges get a smaller matching shadow. */
html[data-theme] #prices {
    --mh-price-shadow-ink: 19, 19, 19;
    --mh-price-card-shadow: var(--mh-shadow);
    --mh-price-badge-shadow: 8px 8px 20px color-mix(in srgb, var(--mh-brand) 30%, transparent);
}
html[data-theme="dark"] #prices {
    --mh-price-shadow-ink: 203, 203, 203;
    --mh-price-badge-shadow: 8px 8px 20px color-mix(in srgb, var(--mh-brand) 38%, transparent);
    --mh-price-card-shadow: 0 8px 28px rgba(var(--mh-price-shadow-ink), .22);
}
html[data-theme] #prices .prices-wrapper .prices-container .prices-card .card {
    box-shadow: var(--mh-price-card-shadow);
}
html[data-theme] #prices .prices-wrapper .prices-container .prices-card .card .price-value {
    box-shadow: var(--mh-price-badge-shadow);
}
@media (min-width: 992px) {
    html[data-theme] #prices { --mh-price-card-shadow: 30px 30px 100px rgba(var(--mh-price-shadow-ink), .433785); }
}

/* Separate compact preference rows in the collapsed navigation. */

    html[data-theme][data-nav="compact"] .navbar .nav-preference { padding-top: 8px; padding-bottom: 8px; }
    html[data-theme][data-nav="compact"] .navbar .nav-preference:last-child { margin-bottom: 8px; }
    html[data-theme][data-nav="compact"] .navbar .nav-preference [data-theme-selector] { width: auto; min-width: 110px; max-width: 100%; }


/* Shared grid column fits the language form and sizes the theme row identically. */

    html[data-theme][data-nav="compact"] .navbar .navbar-nav { display: grid; grid-template-columns: 1fr max-content; }
    html[data-theme][data-nav="compact"] .navbar .navbar-nav > .nav-item:not(.nav-preference) { grid-column: 1 / -1; }
    html[data-theme][data-nav="compact"] .navbar .nav-preference { grid-column: 2; justify-content: flex-end; }
    html[data-theme][data-nav="compact"] .navbar .nav-preference-language form { width: 100%; }
    html[data-theme][data-nav="compact"] .navbar .nav-preference-language select { width: auto; min-width: 0; flex: 1 1 auto; }
    html[data-theme][data-nav="compact"] .navbar .nav-preference-theme [data-theme-selector] { width: 0; min-width: 0; flex: 1 1 0; max-width: none; }



    html[data-theme][data-nav="compact"] .navbar .nav-preference { min-width: 180px; }


/* Closed preference controls share the translucent navigation surface. */
html[data-theme] .navbar .nav-preference select.form-control {
    background-color: transparent !important;
    text-align: center;
    text-align-last: center;
}
html[data-theme] .navbar .nav-preference select.form-control option {
    background-color: var(--mh-menu);
    color: var(--mh-text);
}

    html[data-theme][data-nav="compact"] .navbar .navbar-collapse { background: var(--mh-nav); }


/* Hotspot descriptions: compact cards instead of stretched circular bubbles. */
html[data-theme] .tooltip-element .tooltip-box {
    display: block;
    width: clamp(230px, 30vw, 390px); min-width: 0; min-height: 0;
    max-width: calc(100vw - 48px); max-height: min(70vh, 640px);
    overflow-y: auto; aspect-ratio: auto;
    padding: 28px; border-radius: 24px;
    font-size: 14px; line-height: 1.5;
    border: 1px solid rgba(255, 255, 255, .28);
    background: linear-gradient(145deg, rgba(255,255,255,.12), transparent 60%), var(--mh-brand);
    box-shadow: 0 16px 40px rgba(0,0,0,.24), 0 0 24px color-mix(in srgb, var(--mh-brand) 28%, transparent);
    transform: translateY(8px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
html[data-theme] .tooltip-element .tooltip-box::before { display: none; }
html[data-theme] .tooltip-element:hover .tooltip-box,
html[data-theme] .tooltip-element:focus-within .tooltip-box {
    opacity: 1; visibility: visible; transform: translateY(0); z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
    html[data-theme] .tooltip-element .tooltip-box { transition: none; transform: none; }
}

html[data-theme] .tooltip-element .tooltip-title { font-size: 20px; line-height: 1.25; }

/* Image-relative desktop hotspots; the sidebar and mobile icons stay independent. */
html[data-theme] #map-img .room-hotspot { position: absolute; width: 40px !important; height: 40px; transform: translate(-50%, -50%); }
html[data-theme] .room-hotspot-button { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--mh-brand); box-shadow: 0 2px 12px #0004; position: relative; }
html[data-theme] .room-hotspot-button .mh-png-icon { width: 22px; height: 22px; }
html[data-theme] .room-hotspot-button::after { content: ""; position: absolute; inset: -5px; border: 2px solid var(--mh-brand); border-radius: 50%; animation: room-hotspot-pulse 3s ease-out infinite; pointer-events: none; }
html[data-theme] .room-hotspot-button:focus-visible { outline: 3px solid var(--mh-brand); outline-offset: 5px; }
html[data-theme] .room-hotspot .tooltip-box { left: 0; top: 48px; transform: translateY(8px); width: max-content; max-width: min(390px, calc(100vw - 32px)); padding: 16px 22px; text-align: center; }
html[data-theme] .room-hotspot .tooltip-box:has(.tooltip-content) { width: 390px; }
html[data-theme] .room-hotspot .hotspot-label { font-size: 15px; font-weight: 700; line-height: 1.4; }
html[data-theme] .room-hotspot .tooltip-content { margin-top: 18px; }
@keyframes room-hotspot-pulse { 0% { transform: scale(.9); opacity: .55; } 75%, 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html[data-theme] .room-hotspot-button::after { animation: none; opacity: .35; } }

html[data-theme] #map-img > .room-image { position: absolute; inset: 0; width: 100%; object-fit: cover; object-position: center; }

/* Smaller themed hotspot faces; retain a comfortable pointer target. */
html[data-theme] .room-hotspot-button { background: transparent; box-shadow: none; }
html[data-theme] .room-hotspot-button::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--mh-card); box-shadow: 0 2px 10px #0003; }
html[data-theme] .room-hotspot-button .mh-png-icon { position: relative; width: 17px; height: 17px; color: var(--mh-accent); }
html[data-theme] .room-hotspot-button::after { inset: 1px; border-width: 1px; }

/* Restore the dotted pulse around the compact, themed marker. */
html[data-theme] .room-hotspot-button::after { inset: -7px; border: 0; background: var(--mh-brand); -webkit-mask: url('/uploads/images/generated/css-ac6dd79a41666bae.png') center / contain no-repeat; mask: url('/uploads/images/generated/css-ac6dd79a41666bae.png') center / contain no-repeat; animation: room-hotspot-dotted-pulse 2.4s ease-in-out infinite; }
@keyframes room-hotspot-dotted-pulse {
    0%, 100% { transform: scale(.85); opacity: .45; }
    50% { transform: scale(1.18); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme] .room-hotspot-button::after { animation: none; transform: none; opacity: .7; } }

/* Light-theme hero preview: a white veil in place of the dark video overlay. */
html[data-theme="light"] .v-header:not(.play) .layer-bg { background: rgba(255, 255, 255, .35) !important; opacity: 1 !important; }
html[data-theme="light"] .v-header:not(.play) .title { color: #000; }
html[data-theme="light"] #header .theme-hero { position: relative; }
html[data-theme="light"] #header .theme-hero::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .35); pointer-events: none; }
html[data-theme="light"] #header .theme-hero .hero-texts { color: #000 !important; }
html[data-theme="light"] #header .theme-hero .arrow .lottie { filter: brightness(0); }

/* Contain horizontal card gestures while preserving vertical scroll. */
html[data-theme] #carousel .service-card, html[data-theme] #priceCards .prices-card { overscroll-behavior-x: contain; }

/* Alternate section surfaces after moving brands below the device list. */
html[data-theme] #supportedBrands { background: var(--mh-story) !important; color: #000; }
html[data-theme] #supportedBrands .text-white { color: #000 !important; }

/* Tablet-width phones in landscape keep the card Back control in normal flow. */
@media (min-width: 768px) and (max-width: 991.98px) {
    html[data-theme] #carousel .service-card .card-header .back-button {
        position: static; display: inline-flex; align-items: center;
        margin: 0; min-height: 44px;
    }
}

html[data-theme] .btn-primary { background-color: color-mix(in srgb, var(--mh-brand) 85%, black) !important; }
html[data-theme] .btn-primary:hover { background-color: color-mix(in srgb, var(--mh-brand) 72%, black) !important; }
html[data-theme] .link--arrowed:focus-visible { outline: 3px solid var(--mh-accent); outline-offset: 4px; }

@media (min-width: 768px) and (max-width: 991.98px) {
    html[data-theme] #carousel .service-card .card-header { padding-top: 2rem; }
}

/* Bound the absolutely positioned room layer before measuring its hotspots. */
html[data-theme] #map-img { left: 0; right: 0; width: 100%; overflow: hidden; }
@media (min-width: 768px) and (max-width: 991.98px) { html[data-theme] #carousel { overflow: hidden !important; } }

/* PNG masks keep rasterized interface icons responsive to the shared brand color. */
.mh-png-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--mh-png) center / contain no-repeat; mask: var(--mh-png) center / contain no-repeat; }
.mh-png-back { position: relative; background-color: transparent; background-size: contain; background-repeat: no-repeat; -webkit-mask: none; mask: none; }
.mh-png-back::after { content: ""; position: absolute; inset: 0; background: var(--mh-brand); -webkit-mask: var(--mh-png) center / contain no-repeat; mask: var(--mh-png) center / contain no-repeat; }
html[data-theme] .tool-element-content > .mh-png-icon { color: var(--mh-accent); }
html[data-theme] .tool-element-content:hover > .mh-png-icon, html[data-theme] .tool-element-content:focus-within > .mh-png-icon { color: var(--mh-on-brand); }
html[data-theme] .room-hotspot-button > .mh-png-icon { position: relative; width: 17px !important; height: 17px !important; color: var(--mh-accent); }
html[data-theme] #ContactForm .teszt > .mh-png-icon { color: #000; }
html[data-theme] #ContactForm input:checked + .teszt > .mh-png-icon { color: #fff; }
.lottie.mh-png-scroll { position: relative; width: 80px; height: 80px; aspect-ratio: 1; color: var(--mh-brand); }
.lottie.mh-png-scroll::before, .lottie.mh-png-scroll::after { content: ""; position: absolute; inset: 0; background: currentColor; }
.lottie.mh-png-scroll::before { -webkit-mask: url('/uploads/images/generated/css-ac6dd79a41666bae.png') center / contain no-repeat; mask: url('/uploads/images/generated/css-ac6dd79a41666bae.png') center / contain no-repeat; animation: room-hotspot-dotted-pulse 2.4s ease-in-out infinite; }
.lottie.mh-png-scroll::after { -webkit-mask: url('/uploads/images/generated/scroll-arrow.png') center / contain no-repeat; mask: url('/uploads/images/generated/scroll-arrow.png') center / contain no-repeat; }
html[data-theme="light"] .hero .mh-png-scroll { color: #000; }
html[data-theme="dark"] .hero .mh-png-scroll { color: #fff; }
@media (prefers-reduced-motion: reduce) { .lottie.mh-png-scroll::before { animation: none; } }

/* Raster replacements retain the original SVG contain behaviour inside their layout boxes. */
img[src$="/uploads/images/icons/GUI/dot-line-02.png"],
img[src$="/uploads/images/icons/GUI/dot-line.png"],
img[src$="/uploads/images/icons/GUI/scroll-downl-light.png"],
img[src$="/uploads/images/icons/contact/facebook.png"],
img[src$="/uploads/images/icons/contact/instagram.png"],
img[src$="/uploads/images/icons/contact/mail.png"],
img[src$="/uploads/images/icons/contact/map-pin.png"],
img[src$="/uploads/images/icons/icon/carousel-active.png"],
img[src$="/uploads/images/icons/logo/android-logo.png"],
img[src$="/uploads/images/icons/logo/apple-logo.png"],
img[src$="/uploads/images/icons/logo/araknis-logo.png"],
img[src$="/uploads/images/icons/logo/benq-logo.png"],
img[src$="/uploads/images/icons/logo/cisco-logo.png"],
img[src$="/uploads/images/icons/logo/control4-logo.png"],
img[src$="/uploads/images/icons/logo/doorbird-logo.png"],
img[src$="/uploads/images/icons/logo/dsc-logo.png"],
img[src$="/uploads/images/icons/logo/luma-logo.png"],
img[src$="/uploads/images/icons/logo/microsoft-intune-logo.png"],
img[src$="/uploads/images/icons/logo/myhome-gray.png"],
img[src$="/uploads/images/icons/logo/p55-logo.png"],
img[src$="/uploads/images/icons/logo/pakedge-logo.png"],
img[src$="/uploads/images/icons/logo/samsung-logo.png"],
img[src$="/uploads/images/icons/logo/sonos-logo.png"],
img[src$="/uploads/images/icons/logo/triad-logo.png"],
img[src$="/uploads/images/icons/logo/webex-logo.png"],
img[src$="/uploads/images/icons/logo/windows-logo.png"],
img[src$="/uploads/images/icons/logo/zoom-logo.png"],
img[src$="/uploads/images/icons/pattern/blue_pattern-01.png"],
img[src$="/uploads/images/icons/pattern/blue_pattern-02.png"],
img[src$="/uploads/images/icons/pattern/gray-pattern-bg-02.png"],
img[src$="/uploads/images/icons/pattern/gray-pattern-bg-03.png"],
img[src$="/uploads/images/icons/pattern/gray_pattern-01.png"],
img[src$="/uploads/images/icons/services/bulb-icon.png"],
img[src$="/uploads/images/icons/services/entertainment-icon.png"],
img[src$="/uploads/images/icons/services/lock-icon.png"],
img[src$="/uploads/images/icons/services/smart-speaker-icon.png"],
img[src$="/uploads/images/icons/services/tv-icon.png"],
img[src$="/uploads/images/icons/services/wifi-icon.png"],
img[src$="/uploads/price-cards/5QPGEiV5L2Z7ofvbGsfdNGdVyBFkUrsbYAXlJSet.png"],
img[src$="/uploads/price-cards/9IpaOK0GzvL0ISN3Fj6wSMoXqGiHifvPu3UBDDz5.png"],
img[src$="/uploads/price-cards/EhOcm14IW2aPS4O8tZYKQXFXvPKW3TWWicviu3wp.png"],
img[src$="/uploads/price-cards/Ft8toaak5km3cvsf0GJQRZiEoX5HHXWd4w43Ub0D.png"],
img[src$="/uploads/price-cards/IB84EzpoO2Ez55ljebourF21e5Al9VI2Fd83HX8p.png"],
img[src$="/uploads/price-cards/SfadblWYzCCuHMyMFTFbLUEHLjKCn5gLtPY46vmM.png"],
img[src$="/uploads/price-cards/f6nfxNde780lMXV5vl7cPu2JXHCyCARhTXwczT2g.png"],
img[src$="/uploads/price-cards/goh2MioNtmuqAHafr7r7Dau7WjR4QEahXN5qMkJn.png"],
img[src$="/uploads/price-cards/i2iK0pXiD5uKpYskAu4vgKC7Dia7ZIjrigMudZQw.png"],
img[src$="/uploads/price-cards/mOHXLIn5eQC221ABG6Ho6NJ2fRuTkr6sHTPPmFj0.png"],
img[src$="/uploads/price-cards/rs2smoXsx9CeAxcgCL7zpFPhoyivpAp8kF6LAzTS.png"],
img[src$="/uploads/price-cards/z2HmjNss4mvpL1EetkitXz8wJsxNdsMf7nvsGbpn.png"] { object-fit: contain; }
html[data-theme] img[src$="/icons/contact/facebook.png"], html[data-theme] img[src$="/icons/contact/instagram.png"], html[data-theme] img[src$="/icons/contact/mail.png"] { width: 40px; height: auto; }
/* The scroll indicator is 80px tall; its hit area must reserve the same height. */
html[data-theme] .arrow { bottom: clamp(32px, 7vh, 72px); z-index: 3; }
html[data-theme] .arrow .link--arrowed { display: block; width: 80px; height: 80px; line-height: normal; }
html[data-theme] .arrow .mh-png-scroll { width: 80px; height: 80px; margin: 0; }

/* Let intrinsic proportions drive decorative images after responsive constraints. */
html[data-theme] img[src*="/icons/pattern/"] { width: auto; height: auto; object-position: top right; }
html[data-theme] #supportedBrands .supported-brand img { width: auto; height: 40px; object-fit: contain; }
html[data-theme] #prices .prices-card .card-header { background: transparent; }

/* Keep the home contact card inside the map section instead of overlapping the preceding section. */
html[data-theme] #contact .contact-card-index { top: 32px; bottom: auto; }
html[data-theme] #contact #map.index { min-height: 600px; }

/* High-density PNG pixels must not change the original decoration layout size. */
html[data-theme] img[src$="/uploads/images/icons/pattern/blue_pattern-01.png"] { width: 658.0px; height: auto; }
html[data-theme] img[src$="/uploads/images/icons/pattern/blue_pattern-02.png"] { width: 216.0px; height: auto; }
html[data-theme] img[src$="/uploads/images/icons/pattern/gray-pattern-bg-02.png"] { width: 750.0px; height: auto; }
html[data-theme] img[src$="/uploads/images/icons/pattern/gray-pattern-bg-03.png"] { width: 530.0px; height: auto; }
html[data-theme] img[src$="/uploads/images/icons/pattern/gray_pattern-01.png"] { width: 177.0px; height: auto; }

html[data-theme] #services > img[src$="/pattern/gray-pattern-bg-03.png"] { top: auto; bottom: 0; transform: translate(0, 47%); }

/* Leave clearance for the fixed navigation in the full-map home view. */
html[data-theme] #contact .contact-card-index { top: 80px; }
/* A rotated decoration must use its own aspect ratio, without a wide letterboxed image box. */
html[data-theme] #supportedBrands img.supported-bg-pattern { width: auto; height: 951px; max-height: 100%; object-position: center; }

/* Match the dedicated contact page to the home map card. */
html[data-theme] #contact .contact-card { top: 80px; bottom: auto; right: 8%; transform: none; }
html[data-theme] #contact .contact-card .contact-brand { text-transform: none; }
html[data-theme] #contact #map { min-height: 600px; }
@media (max-width: 991.98px) {
    html[data-theme] #contact .contact-card { right: auto; left: 50%; transform: translateX(-50%); }
}

/* Desktop detail cards share a width regardless of translated text length. */
@media (min-width: 992px) {
    html[data-theme] #carousel .carousel-caption .service-card { width: 37.5%; }
}

/* Mobile layouts do not need a hero section scroll indicator. */
@media (max-width: 991.98px) {
    html[data-theme] .arrow { display: none !important; }
}

/* Contact cards stay over the map in both mobile orientations. */
@media (max-width: 991.98px) {
    html[data-theme] #contact :is(.contact-card, .contact-card-index) {
        position: absolute !important;
        top: 60px; bottom: auto; left: 5%; right: auto;
        transform: none; width: 90%;
        padding: 36px 24px !important;
    }
    html[data-theme] #contact #map,
    html[data-theme] #contact #map.index { height: max(100vh, 720px); min-height: 720px !important; }
}
@media (max-width: 991.98px) and (orientation: landscape) {
    html[data-theme] #contact :is(.contact-card, .contact-card-index) {
        top: 60px; left: auto; right: 3%; width: 36%;
        padding: 20px 16px !important;
    }
    html[data-theme] #contact :is(.contact-card, .contact-card-index) h2 { font-size: 22px; margin-bottom: 8px !important; }
    html[data-theme] #contact :is(.contact-card, .contact-card-index) .contact-brand { font-size: 18px; margin-bottom: 8px !important; }
    html[data-theme] #contact :is(.contact-card, .contact-card-index) > .mb-5 { margin-bottom: 16px !important; font-size: 13px; line-height: 1.5; }
    html[data-theme] #contact :is(.contact-card, .contact-card-index) > img { max-width: 90px !important; }
    html[data-theme] #contact :is(.contact-card, .contact-card-index) a img { width: 28px; max-width: 28px !important; height: auto; }
    html[data-theme] #contact #map,
    html[data-theme] #contact #map.index { height: max(100vh, 360px); min-height: 360px !important; }
}

/* The first mobile screen fills the visible viewport behind the transparent navigation. */
@media (max-width: 991.98px) {
    html[data-theme] .v-header,
    html[data-theme] #header .mobile-fullscreen-hero {
        height: 100vh;
        height: 100dvh;
        min-height: 0;
    }
    html[data-theme] .v-header { position: relative; }
    html[data-theme] .v-header .fullscreen-video-wrap { top: 0; height: 100%; }
}

/* Use the available landscape width instead of nested desktop gutters. */
@media (min-width: 768px) and (max-width: 991.98px) {
    html[data-theme] #pageCards .page-card > .col-md-6 { padding: 24px !important; }
    html[data-theme] #pageCards .page-card > .col-md-6 > .row > .col-md-9 { flex: 0 0 100%; max-width: 100%; }
    html[data-theme] #pageCards .page-card video { display: block; width: 100%; height: auto; }
}
@media (max-width: 991.98px) {
    html[data-theme] #smartDevices #deviceList .device-card { height: auto; max-width: 92%; }
    html[data-theme] #smartDevices #deviceList .device-card .card-body { padding: 28px 24px !important; overflow: visible !important; }
    html[data-theme] #smartDevices #deviceList .device-card .card-body > .row { height: auto !important; }
    html[data-theme] #smartDevices #deviceList .device-card .card-title { font-size: clamp(24px, 3.2vw, 32px); line-height: 1.25; }
}

/* Collapse navigation before translated labels would wrap. */

    html[data-theme][data-nav="compact"] .navbar > .container-fluid { flex-wrap: wrap; }
    html[data-theme][data-nav="compact"] .navbar .navbar-toggler { display: block; }
    html[data-theme][data-nav="compact"] .navbar .navbar-collapse { flex-basis: 100%; flex-grow: 1; position: absolute; right: 0; top: 100%; width: min(85vw, 480px); max-height: calc(100dvh - 48px); overflow-y: auto; border-bottom-left-radius: 16px; background: var(--mh-nav); padding-bottom: 16px; }
    html[data-theme][data-nav="compact"] .navbar .navbar-collapse:not(.show):not(.collapsing) { display: none !important; }
    html[data-theme][data-nav="compact"] .navbar .navbar-collapse.show { display: block !important; }
    html[data-theme][data-nav="compact"] .navbar .nav-link { margin: 12px 20px; padding: 12px 8px !important; }
    html[data-theme][data-nav="compact"] .navbar #magic-line { display: none; }


    html[data-theme][data-nav="expanded"] .navbar .navbar-toggler { display: none; }
    html[data-theme][data-nav="expanded"] .navbar .navbar-collapse { display: flex !important; }
    html[data-theme][data-nav="expanded"] .navbar .navbar-nav { flex-wrap: nowrap; }
    html[data-theme][data-nav="expanded"] .navbar .nav-link { white-space: nowrap; }

/* Device cards remain in document flow when their text needs more height. */
@media (min-width: 992px) {
    html[data-theme] #smartDevices #deviceList .device { padding: 0 8%; margin-bottom: 80px; }
    html[data-theme] #smartDevices #deviceList .device > .col-md-12 { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: center; }
    html[data-theme] #smartDevices #deviceList .device .device-image { grid-column: 3 / 11; grid-row: 1; height: 100%; min-height: 440px; max-width: none; float: none; }
    html[data-theme] #smartDevices #deviceList .device .device-card { grid-column: 1 / 7; grid-row: 1; position: relative; top: auto; bottom: auto; left: auto; right: auto; width: 100%; max-width: none; margin: 40px 0; padding: 32px; min-width: 0; }
    html[data-theme] #smartDevices #deviceList .device:nth-child(odd):not(:first-child) .device-image { grid-column: 1 / 9; }
    html[data-theme] #smartDevices #deviceList .device:nth-child(odd):not(:first-child) .device-card { grid-column: 5 / 11; }
    html[data-theme] #smartDevices #deviceList .device-card .card-body { padding: 0 !important; overflow: visible !important; }
    html[data-theme] #smartDevices #deviceList .device-card .card-body > .row { height: auto !important; }
    html[data-theme] #smartDevices #deviceList .device-card .card-title { font-size: clamp(24px, 2vw, 32px); line-height: 1.25; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    html[data-theme] #smartDevices #deviceList .device > .col-md-12 { display: block; }
    html[data-theme] #smartDevices #deviceList .device .device-image { height: 420px; min-height: 0; }
    html[data-theme] #smartDevices #deviceList .device .device-card { width: 92%; margin: -48px auto 0; }
}
/* Form controls must fit the available column, including translated captions. */
html[data-theme] #ContactForm .number-input { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 8px; width: 100%; }
html[data-theme] #ContactForm .number-input input.rooms { width: 100%; min-width: 0; margin: 0; }
html[data-theme] #ContactForm .number-input :is(.btn-minus, .btn-plus) { display: flex; align-items: center; justify-content: center; padding: 0; }
html[data-theme] #ContactForm .cc-selector > div { display: flex; flex-direction: column; }
html[data-theme] #ContactForm .cc-selector .teszt { flex: 1; }
html[data-theme] #ContactForm .cc-selector label.visa { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 136px; height: 100%; }
html[data-theme] #ContactForm .cc-selector label.visa > div { display: flex; align-items: center; justify-content: center; height: 58px !important; flex: 0 0 58px; }
html[data-theme] #ContactForm .cc-selector label.visa p { min-height: 36px; display: flex; align-items: center; justify-content: center; line-height: 1.35; }
html[data-theme] #ContactForm .g-recaptcha { min-width: 0; max-width: 100%; }
@media (max-width: 1199.98px) {
    html[data-theme] #ContactForm #contactForm > .row > .col-md-9 { flex: 0 0 100%; max-width: 100%; }
    html[data-theme] #ContactForm :is(.box-shadow-left, .box-shadow-right) { padding: 32px 24px !important; }
    html[data-theme] #ContactForm .box-shadow-left h3 { margin-top: 16px !important; }
    html[data-theme] #ContactForm .cc-selector > .col-md-2 { flex: 0 0 180px; max-width: 50%; }
}
@media (max-width: 991.98px) {
    html[data-theme] #ContactForm :is(.box-shadow-left, .box-shadow-right) { flex: 0 0 100%; max-width: 100%; }
}

html[data-theme] #smartDevices .device-card .card-body > .row { margin-left: 0; margin-right: 0; }
html[data-theme] #smartDevices .device-card .card-body > .row > .col { padding-left: 0; padding-right: 0; min-width: 0; }

@media (min-width: 992px) and (max-width: 1199.98px) {
    html[data-theme] #prices .price-icon { width: 50px; height: 50px; }
    html[data-theme] #prices .price-attribute > .col { min-width: 0; }
}

/* Keep desktop navigation readable without wasting width on gutters. */
@media (min-width: 1200px) and (max-width: 1499.98px) {
    html[data-theme] .navbar .nav-link { padding-left: 10px !important; padding-right: 10px !important; }
    html[data-theme] .navbar .nav-preference { padding-left: 8px !important; padding-right: 8px !important; }
}

/* The same intrinsic layout is used for measuring and displaying desktop links. */
html[data-theme][data-nav="expanded"] .navbar > .container-fluid { flex-wrap: nowrap; }
html[data-theme][data-nav="expanded"] .navbar .navbar-collapse {
    position: static; flex-basis: auto; width: auto; max-height: none; overflow: visible;
    background: transparent; border-radius: 0; padding: 0; box-shadow: none;
}
html[data-theme][data-nav="expanded"] .navbar .navbar-nav { display: flex; flex-direction: row; flex-wrap: nowrap; }
html[data-theme][data-nav="expanded"] .navbar .nav-link { margin: 0; padding: 16px 10px !important; white-space: nowrap; }
html[data-theme][data-nav="expanded"] .navbar .nav-preference { min-width: 0; padding: 0 8px !important; margin: 0; }
html[data-theme][data-nav="expanded"] .navbar .nav-preference form { width: auto; }
html[data-theme][data-nav="expanded"] .navbar .nav-preference select { width: auto; min-width: 0; flex: none; }
html[data-theme][data-nav="expanded"] .navbar .nav-link.active::after { display: none; }
html[data-theme][data-nav="compact"] .navbar .navbar-nav { flex-direction: column; }
html[data-theme] .navbar.mh-nav-measure { position: fixed !important; top: -10000px !important; width: max-content !important; visibility: hidden !important; pointer-events: none !important; }
html[data-theme] .navbar.mh-nav-measure .navbar-collapse { display: flex !important; position: static !important; width: auto !important; flex-basis: auto !important; padding: 0 !important; }
html[data-theme] .navbar.mh-nav-measure .navbar-nav { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; width: max-content !important; }
html[data-theme] .navbar.mh-nav-measure .nav-link { margin: 0 !important; padding: 16px 10px !important; white-space: nowrap !important; }
html[data-theme] .navbar.mh-nav-measure .nav-preference { min-width: 0 !important; padding: 0 8px !important; margin: 0 !important; }
html[data-theme] .navbar.mh-nav-measure .nav-preference form { width: auto !important; }
html[data-theme] .navbar.mh-nav-measure .nav-preference select { width: auto !important; min-width: 0 !important; flex: none !important; }
html[data-theme] .navbar.mh-nav-measure .navbar-toggler { display: none !important; }

html[data-theme] .navbar.mh-nav-measure > .container-fluid { flex-wrap: nowrap !important; width: max-content !important; }

/* The brand never gives up its width to navigation links. */
html[data-theme] .navbar > .container-fluid > form { flex: 0 0 auto; }
html[data-theme] .navbar .navbar-brand { flex: 0 0 auto; width: 110px; min-width: 110px; }
html[data-theme] .navbar .navbar-brand img { display: block; width: 110px !important; max-width: none !important; height: 20px !important; object-fit: contain; }
html[data-theme] .navbar.mh-nav-measure .navbar-nav > li { flex: 0 0 auto !important; }
/* A normal active-link underline avoids the legacy animated marker becoming a flex item. */
html[data-theme] .navbar #magic-line { display: none !important; }
html[data-theme][data-nav="expanded"] .navbar .nav-link.active { box-shadow: inset 0 -4px var(--mh-brand); }

/* Both navigation layouts share one header height. */
html[data-theme] .navbar { height: 60px; min-height: 60px; }
html[data-theme] .navbar > .container-fluid { height: 100%; align-items: center; }
html[data-theme][data-nav="expanded"] .navbar .navbar-collapse,
html[data-theme][data-nav="expanded"] .navbar .navbar-nav,
html[data-theme][data-nav="expanded"] .navbar .nav-item { height: 100%; align-items: center; }
html[data-theme][data-nav="expanded"] .navbar .nav-link { height: 100%; display: flex; align-items: center; }
html[data-theme] .navbar.mh-nav-measure { height: 60px !important; }

html[data-theme][data-nav="compact"] .navbar .navbar-collapse { width: min(calc(100vw - 24px), 340px); }

/* Keep home media filling its column across desktop and landscape breakpoints. */
html[data-theme] #pageCards .page-card-media > .row > .col-md-9 { flex: 0 0 100%; max-width: 100%; }
html[data-theme] #pageCards .page-card-media video { display: block; width: 100%; height: auto; }
@media (min-width: 768px) {
    html[data-theme] #pageCards .page-card > .page-card-media { padding: clamp(24px, 3vw, 48px) !important; }
}

/* Balance home media with its text and let links size to their actual lines. */
html[data-theme] #pageCards .page-card-media video { max-width: 420px; margin-inline: auto; }
html[data-theme] #pageCards .page-card .page-button { min-height: 0; height: auto; display: inline-flex !important; align-items: center; padding-block: 10px; line-height: 1.4; max-width: 100%; }
/* Keep map cards clear of the navigation and preserve complete email addresses. */
html[data-theme] #contact :is(.contact-card, .contact-card-index) { top: 92px; width: 380px; max-width: 90%; }
html[data-theme] #contact :is(.contact-card, .contact-card-index) a[href^="mailto:"] { white-space: nowrap; }
@media (max-width: 991.98px) and (orientation: portrait) {
 html[data-theme] #contact :is(.contact-card, .contact-card-index) { width: 90%; }
}
@media (max-width: 991.98px) and (orientation: landscape) {
 html[data-theme] #contact :is(.contact-card, .contact-card-index) { width: max(40%, 300px); max-width: 55%; }
}

/* Stacked home sections use a full-width call to action. */
@media (max-width: 767.98px) {
    html[data-theme] #pageCards .page-card .page-button { display: flex !important; width: 100%; justify-content: center; text-align: center; }
}

/* Reserve a visible map area beside or below the content-sized contact overlay. */
html[data-theme] #contact[data-map-layout="side"] :is(.contact-card, .contact-card-index) { width: clamp(300px, 38vw, 380px); max-width: 46%; left: auto; right: 3%; transform: none; }
html[data-theme] #contact[data-map-layout="stacked"] :is(.contact-card, .contact-card-index) { width: 90%; max-width: 480px; left: 50%; right: auto; transform: translateX(-50%); padding: 28px 20px !important; }
html[data-theme] #contact[data-map-layout="stacked"] :is(.contact-card, .contact-card-index) > .mb-5 { margin-bottom: 24px !important; }

/* Center brand artwork without letting its fixed height overflow padded cards. */
html[data-theme] #supportedBrands .supported-brand { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 10px 12px !important; }
html[data-theme] #supportedBrands .supported-brand img { display: block; flex: 0 1 auto; width: auto; height: auto; max-height: 40px; max-width: 80%; margin: 0 !important; object-fit: contain; }
@media (max-width: 991.98px) {
 html[data-theme] #supportedBrands .supported-brand img { max-height: 34px; }
}

/* Keep the support heading clear of the viewport edge at smaller desktop widths. */
@media (min-width: 992px) {
    html[data-theme] #header .support-hero .desktop-hero:not(.hero-center) {
        width: calc(100% - 48px);
    }
}

/* Three compact, comparable plans on tablet and smaller desktop screens. */
@media (min-width: 768px) and (max-width: 1199.98px) {
 html[data-theme] #prices .prices-wrapper .prices-container .prices-card { padding: 0 8px !important; top: 0 !important; }
 html[data-theme] #prices .prices-wrapper .prices-container .prices-card .card { padding: 12px 0 !important; }
 html[data-theme] #prices .prices-wrapper .prices-container .prices-card .card-header { padding: 12px; }
 html[data-theme] #prices .prices-wrapper .prices-container .prices-card .card h3 { font-size: 28px !important; margin: 12px 0 !important; }
 html[data-theme] #prices .prices-wrapper .prices-container .prices-card .card-body { padding: 16px; }
 html[data-theme] #prices .prices-wrapper .prices-container .prices-card .price-value span { font-size: 20px; }
 html[data-theme] #prices .prices-wrapper .prices-container .prices-card .price-icon { width: 36px; height: 36px; }
 html[data-theme] #prices .prices-wrapper .prices-container .prices-card .price-attribute { margin: 0; padding: 8px 0; font-size: 14px; line-height: 1.4; }
 html[data-theme] #prices .price-attribute > .col-auto { padding: 0 10px 0 0; }
 html[data-theme] #prices .price-attribute > .col { padding: 0; min-width: 0; }
}

/* Align the section boundary with the bottom of the fixed 60px navigation. */
#smartDevices { scroll-margin-top: 60px; }