/*
 * SK Mobile Layout — wersja kolorystyczna nr 2
 * Layout jest aktywny wyłącznie na ekranach do 768 px.
 */

@media (max-width: 768px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Zostawiamy nawigację motywu, ale ukrywamy jego zdublowany nagłówek. */
    .site-header,
    .site-header-inner,
    .inside-site-header,
    .header-widget,
    .site-branding,
    .top-bar,
    #top-bar,
    .top-bar-inner {
        display: none !important;
    }

    /* Pasek hamburgera motywu – kolor jest niezależny od ustawień motywu. */
    .main-navigation,
    .main-navigation .inside-navigation,
    #site-navigation,
    .site-navigation,
    #site-navigation .inside-navigation {
        background: var(--sk-menu-bg, #1D2D3E) !important;
        background-color: var(--sk-menu-bg, #1D2D3E) !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .main-navigation .menu-toggle,
    .main-navigation .menu-toggle span,
    .main-navigation button,
    .main-navigation a,
    .main-navigation .nav-search a,
    .main-navigation .search-item a,
    #site-navigation .menu-toggle,
    #site-navigation .menu-toggle span,
    #site-navigation button,
    #site-navigation a {
        color: #ffffff !important;
    }

    .main-navigation .menu-bar,
    .main-navigation .menu-toggle .menu-bar,
    #site-navigation .menu-bar,
    #site-navigation .menu-toggle .menu-bar {
        background: #ffffff !important;
    }

    .main-navigation svg,
    .main-navigation .nav-search svg,
    #site-navigation svg {
        fill: #ffffff !important;
        stroke: #ffffff !important;
    }

    /* Główny moduł wtyczki. */
    #sk-mobile-wrap,
    #sk-mobile-wrap * {
        box-sizing: border-box !important;
    }

    #sk-mobile-wrap {
        display: block !important;
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        z-index: 5 !important;
        font-family: 'Open Sans', Arial, sans-serif !important;
        color: var(--sk-header-text, #1C2B3B) !important;
    }

    /* Nagłówek. */
    #sk-mobile-header {
        width: 100% !important;
        padding: 13px 16px 14px !important;
        background: var(--sk-header-bg, #F4F1EC) !important;
        text-align: center !important;
    }

    #sk-mobile-header .sk-mobile-branding {
        display: block !important;
        max-width: 480px !important;
        margin: 0 auto !important;
        color: var(--sk-header-text, #1C2B3B) !important;
        text-decoration: none !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    #sk-mobile-header .sk-mobile-shield {
        display: block !important;
        width: 28px !important;
        height: 31px !important;
        margin: 0 auto 6px !important;
    }

    #sk-mobile-header .sk-mobile-shield svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    #sk-mobile-header .sk-mobile-shield svg path:first-child {
        fill: none !important;
        stroke: var(--sk-header-text, #1C2B3B) !important;
        stroke-width: 4 !important;
    }

    #sk-mobile-header .sk-mobile-shield svg path:last-child {
        fill: var(--sk-accent, #B74638) !important;
    }

    #sk-mobile-header .sk-mobile-title {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        font-family: 'Merriweather', Georgia, serif !important;
        font-size: clamp(19px, 5.5vw, 25px) !important;
        font-weight: 700 !important;
        line-height: 1.37 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-transform: none !important;
    }

    #sk-mobile-header .sk-mobile-title em {
        color: var(--sk-accent, #B74638) !important;
        font-style: italic !important;
        white-space: nowrap !important;
    }

    /* Dwukolumnowa siatka marek. */
    #sk-mobile-brands {
        width: 100% !important;
        padding: 12px 10px !important;
        background: var(--sk-section-bg, #203247) !important;
    }

    #sk-mobile-brands .sk-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        max-width: 560px !important;
        margin: 0 auto !important;
    }

    #sk-mobile-brands a {
        min-height: 62px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 9px !important;
        padding: 9px 11px !important;
        border: 1px solid var(--sk-button-border, #496782) !important;
        border-radius: 9px !important;
        background: var(--sk-button-bg, #314B63) !important;
        color: #ffffff !important;
        line-height: 1.2 !important;
        text-align: left !important;
        text-decoration: none !important;
        text-shadow: none !important;
        box-shadow: none !important;
        transition: transform .18s ease, filter .18s ease !important;
    }

    /* Ikony są SVG osadzonymi bezpośrednio w HTML – motyw ich nie ukryje. */
    #sk-mobile-brands .sk-brand-icon {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 29px !important;
        height: 29px !important;
        min-width: 29px !important;
        color: #e2eff9 !important;
        border: 1px solid rgba(226, 239, 249, .55) !important;
        border-radius: 8px !important;
    }

    #sk-mobile-brands .sk-brand-icon svg {
        display: block !important;
        width: 18px !important;
        height: 18px !important;
        fill: none !important;
        stroke: currentColor !important;
        stroke-width: 1.8 !important;
        stroke-linecap: round !important;
        stroke-linejoin: round !important;
    }

    #sk-mobile-brands .sk-brand-label {
        display: block !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        color: #ffffff !important;
        font-family: var(--sk-brand-font, 'Open Sans', Arial, sans-serif) !important;
        font-size: var(--sk-brand-font-size, 15px) !important;
        font-weight: 800 !important;
        line-height: 1.2 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
    }

    #sk-mobile-brands a b {
        display: block !important;
        flex: 0 0 auto !important;
        color: #d8e7f4 !important;
        font-size: 27px !important;
        line-height: .8 !important;
        font-family: Arial, sans-serif !important;
        font-weight: 400 !important;
    }

    #sk-mobile-brands a:hover,
    #sk-mobile-brands a:focus-visible,
    #sk-mobile-brands a:active {
        color: #ffffff !important;
        background: var(--sk-button-bg, #314B63) !important;
        filter: brightness(1.12) !important;
        transform: translateY(-1px) !important;
        outline: 2px solid #dbefff !important;
        outline-offset: 1px !important;
    }

    /* Baner. */
    #sk-mobile-banner {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden !important;
        line-height: 0 !important;
    }

    #sk-mobile-banner img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Kontakt. */
    #sk-mobile-cta {
        width: 100% !important;
        padding: 16px 12px 13px !important;
        background: var(--sk-cta-bg, #17283A) !important;
        text-align: center !important;
    }

    #sk-mobile-cta > a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 11px !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #ffffff !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

    #sk-mobile-cta .sk-phone-icon {
        display: inline-flex !important;
        width: 41px !important;
        height: 41px !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 41px !important;
        border: 1px solid var(--sk-cta-subtext, #A9C4DD) !important;
        border-radius: 50% !important;
    }

    #sk-mobile-cta .sk-phone-icon svg {
        width: 21px !important;
        height: 21px !important;
        fill: #ffffff !important;
    }

    #sk-mobile-cta .sk-phone-number {
        display: block !important;
        color: #ffffff !important;
        font-family: 'Open Sans', Arial, sans-serif !important;
        font-size: clamp(25px, 8.1vw, 35px) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        letter-spacing: .075em !important;
        white-space: nowrap !important;
    }

    #sk-mobile-cta .sk-cta-sub {
        display: block !important;
        margin-top: 9px !important;
        color: var(--sk-cta-subtext, #A9C4DD) !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        letter-spacing: .14em !important;
        text-transform: uppercase !important;
    }

    .sk-cta-animation-on #sk-mobile-cta > a {
        animation: sk-mobile-pulse 2.8s ease-in-out infinite !important;
    }

    .sk-cta-animation-on #sk-mobile-cta .sk-phone-icon {
        animation: sk-mobile-ring 2.8s ease-in-out infinite !important;
    }

    @keyframes sk-mobile-pulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.022); opacity: .9; }
    }

    @keyframes sk-mobile-ring {
        0%, 12%, 100% { transform: rotate(0deg); }
        4% { transform: rotate(-8deg); }
        8% { transform: rotate(8deg); }
    }

    @media (max-width: 390px) {
        #sk-mobile-brands a {
            min-height: 58px !important;
            gap: 7px !important;
            padding: 8px 9px !important;
        }

        #sk-mobile-brands .sk-brand-icon {
            width: 26px !important;
            height: 26px !important;
            min-width: 26px !important;
            border-radius: 7px !important;
        }

        #sk-mobile-brands .sk-brand-icon svg {
            width: 16px !important;
            height: 16px !important;
        }

        #sk-mobile-brands a b {
            font-size: 22px !important;
        }

        #sk-mobile-cta .sk-phone-icon {
            width: 35px !important;
            height: 35px !important;
            flex-basis: 35px !important;
        }

        #sk-mobile-cta .sk-phone-number {
            font-size: 24px !important;
            letter-spacing: .052em !important;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        #sk-mobile-wrap *,
        #sk-mobile-wrap *::before,
        #sk-mobile-wrap *::after {
            animation-duration: .01ms !important;
            animation-iteration-count: 1 !important;
            scroll-behavior: auto !important;
            transition-duration: .01ms !important;
        }
    }
}

@media (min-width: 769px) {
    #sk-mobile-wrap {
        display: none !important;
    }
}