/**
 * ClassiPress App Menu – Styles
 * Version: 4.0.0 – Overlay Edition
 *
 * ═══════════════════════════════════════════════════════════════════════════
 * FILOZOFIA UKŁADU (v4 vs poprzednie wersje)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * STARE PODEJŚCIE (v3.x) — BŁĘDNE:
 *   • Chowało header.header lub elementy nav ClassiPress
 *   • Dodawało padding-top na header lub html
 *   • Powodowało: baner znikał / podwójny odstęp / "przeciekanie" banera
 *
 * NOWE PODEJŚCIE (v4.0) — OVERLAY:
 *   • CPAM NIE dotyka żadnego elementu ClassiPress
 *   • Górny pasek CPAM: position:fixed, leży NA WIERZCHU wszystkiego
 *   • Jedyna zmiana layoutu: JS dodaje padding-top/bottom do #content
 *     (.off-canvas-content) – to przesuwa CAŁĄ stronę pod pasek,
 *     ale BANER jest position:absolute (w stosunku do header.header
 *     który ma position:relative przy has-header-image) – więc
 *     padding na #content NIE przesuwa banera = baner zajmuje
 *     swoje naturalne miejsce
 *   • Na stronie głównej (.home-cover hero) baner rozciąga się na
 *     cały header.header łącznie z hero, tekst hero ma własny
 *     padding-top z motywu – wszystko gra
 *   • Na innych stronach ClassiPress SAM ukrywa .top-bar na mobile
 *     (max-width:39.9375em), więc header jest minimalnej wysokości
 *     i baner jest tam ledwo widoczny – to zachowanie MOTYWU,
 *     nie wtyczki
 *
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ════════════════════════════════════════════════════════════════════════════
   Design Tokens
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Kolory – nadpisywane inline z PHP */
    --cpam-bg:           rgba(255, 255, 255, 0.93);
    --cpam-bg-solid:     #ffffff;
    --cpam-text:         #333333;
    --cpam-active:       #ff6200;
    --cpam-center-bg:    #ff6200;
    --cpam-center-color: #ffffff;

    /* Wymiary */
    --cpam-bar-height:    60px;
    --cpam-sidebar-w:     300px;

    /* Z-index: ClassiPress sticky header = 9999, WP admin bar = 99999 */
    --cpam-z-bar:         100001;
    --cpam-z-sidebar:     100002;
    --cpam-z-overlay:     100000;

    /* Odstępy */
    --cpam-gap-xs: 4px;
    --cpam-gap-sm: 8px;
    --cpam-gap-md: 16px;
    --cpam-gap-lg: 24px;

    /* Animacje */
    --cpam-dur-fast:   150ms;
    --cpam-dur-base:   300ms;
    --cpam-ease:       cubic-bezier(0.25, 1, 0.5, 1);
    --cpam-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Cienie */
    --cpam-shadow-bar:     0 2px 12px rgba(0, 0, 0, 0.09);
    --cpam-shadow-fab:     0 8px 20px rgba(255, 98, 0, 0.38);
    --cpam-shadow-sidebar: 8px 0 32px rgba(0, 0, 0, 0.16);
}

/* ════════════════════════════════════════════════════════════════════════════
   Reset – wyłącznie dla elementów CPAM
   ════════════════════════════════════════════════════════════════════════════ */

.cpam-wrapper,
.cpam-wrapper *,
.cpam-overlay {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.cpam-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ════════════════════════════════════════════════════════════════════════════
   DESKTOP ≥ 1024px – CPAM całkowicie nieaktywny
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {
    .cpam-wrapper,
    .cpam-top-bar,
    .cpam-bottom-bar,
    .cpam-sidebar,
    .cpam-overlay {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   GÓRNY PASEK
   position:fixed – leży NA WIERZCHU ClassiPress, nic nie zmienia
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

    .cpam-top-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: calc(var(--cpam-bar-height) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);

        background: var(--cpam-bg);
        color: var(--cpam-text);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
        box-shadow: var(--cpam-shadow-bar);

        z-index: var(--cpam-z-bar);
        will-change: transform;
        transition: transform var(--cpam-dur-base) var(--cpam-ease);

        /* Gwarantuje widoczność */
        display: block !important;
        visibility: visible !important;
    }

    .cpam-top-bar.cpam-hidden {
        transform: translateY(-100%);
    }

    /* Kontener wewnątrz paska */
    .cpam-top-bar .cpam-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 0 var(--cpam-gap-md);
    }

    /* Przyciski toggle (hamburger / avatar) */
    .cpam-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        background: none;
        border: none;
        color: var(--cpam-text);
        cursor: pointer;
        font-size: 26px;
        padding: 0;
        transition: color var(--cpam-dur-fast) ease,
                    transform var(--cpam-dur-fast) var(--cpam-ease-spring);
    }

    .cpam-toggle:active {
        transform: scale(0.86);
        color: var(--cpam-active);
    }

    /* Logo / nazwa serwisu */
    .cpam-brand {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 var(--cpam-gap-sm);
        font-size: 18px;
        font-weight: 800;
        letter-spacing: -0.4px;
        color: var(--cpam-text);
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: opacity var(--cpam-dur-fast) ease;
    }

    .cpam-brand:active { opacity: 0.45; }

    .cpam-logo {
        display: block;
        max-height: 38px;
        max-width: 150px;
        object-fit: contain;
    }

    /* Avatar zalogowanego użytkownika */
    .cpam-avatar {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid transparent;
        transition: border-color var(--cpam-dur-fast);
    }

    .cpam-toggle:active .cpam-avatar {
        border-color: var(--cpam-active);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   DOLNY PASEK / DOCK
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

    .cpam-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: calc(var(--cpam-bar-height) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);

        background: var(--cpam-bg);
        color: var(--cpam-text);
        backdrop-filter: saturate(180%) blur(18px);
        -webkit-backdrop-filter: saturate(180%) blur(18px);
        border-top: 1px solid rgba(0, 0, 0, 0.07);

        z-index: var(--cpam-z-bar);
        will-change: transform;
        transition: transform var(--cpam-dur-base) var(--cpam-ease);

        display: block !important;
        visibility: visible !important;
    }

    .cpam-bottom-bar.cpam-hidden {
        transform: translateY(100%);
    }

    .cpam-bottom-bar .cpam-container {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 100%;
        padding: 0 4px;
    }

    /* Ikony */
    .cpam-icon-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        flex: 1;
        height: var(--cpam-bar-height);
        min-width: 0;
        padding: 0 2px;
        color: var(--cpam-text);
        text-decoration: none;
        font-size: 24px;
        opacity: 0.6;
        position: relative;
        transition: color var(--cpam-dur-fast) ease,
                    opacity var(--cpam-dur-fast) ease;
    }

    .cpam-icon-btn.cpam-active {
        color: var(--cpam-active);
        opacity: 1;
    }

    /* Dot pod aktywną ikoną */
    .cpam-icon-btn.cpam-active::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 50%;
        transform: translateX(-50%);
        width: 4px;
        height: 4px;
        background: var(--cpam-active);
        border-radius: 50%;
    }

    .cpam-icon-btn i {
        margin-bottom: 2px;
        line-height: 1;
        transition: transform var(--cpam-dur-fast) var(--cpam-ease-spring);
    }

    .cpam-icon-btn:active i {
        transform: scale(0.82);
    }

    .cpam-label {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.2px;
        line-height: 1.1;
        text-align: center;
    }

    /* ── FAB (centrum) ── */

    .cpam-icon-btn.cpam-center {
        flex: 1.3;
        opacity: 1;
    }

    .cpam-icon-btn.cpam-center::after {
        display: none;
    }

    .cpam-icon-btn.cpam-center i {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: -22px;
        left: 50%;
        transform: translateX(-50%);
        width: 56px;
        height: 56px;
        margin-bottom: 0;
        font-size: 24px;
        background: linear-gradient(135deg, var(--cpam-center-bg), var(--cpam-active));
        color: var(--cpam-center-color);
        border-radius: 50%;
        border: 3px solid var(--cpam-bg-solid);
        box-shadow: var(--cpam-shadow-fab);
        transition: transform var(--cpam-dur-fast) var(--cpam-ease-spring),
                    box-shadow var(--cpam-dur-fast) ease;
    }

    .cpam-icon-btn.cpam-center:active i {
        transform: translateX(-50%) scale(0.88);
        box-shadow: 0 4px 10px rgba(255, 98, 0, 0.2);
    }

    .cpam-center .cpam-label {
        margin-top: 32px;
        opacity: 0.75;
        color: var(--cpam-text);
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   OFF-CANVAS SIDEBARS
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

    .cpam-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        width: var(--cpam-sidebar-w);
        max-width: 85vw;
        background: var(--cpam-bg-solid);
        z-index: var(--cpam-z-sidebar);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
        transition: transform var(--cpam-dur-base) var(--cpam-ease);
        will-change: transform;
    }

    .cpam-sidebar::-webkit-scrollbar { display: none; }
    .cpam-sidebar { -ms-overflow-style: none; scrollbar-width: none; }

    .cpam-sidebar-left {
        left: 0;
        transform: translateX(-100%);
        box-shadow: var(--cpam-shadow-sidebar);
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .cpam-sidebar-right {
        right: 0;
        transform: translateX(100%);
        box-shadow: calc(-1 * var(--cpam-shadow-sidebar));
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .cpam-sidebar.cpam-open {
        transform: translateX(0);
    }

    /* Wnętrze */
    .cpam-sidebar-inner {
        padding: var(--cpam-gap-lg);
    }

    /* Nagłówek sidebara */
    .cpam-sidebar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--cpam-gap-lg);
        padding-bottom: var(--cpam-gap-md);
        border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    }

    .cpam-sidebar-title {
        font-size: 21px;
        font-weight: 800;
        color: var(--cpam-text);
        letter-spacing: -0.3px;
    }

    .cpam-sidebar-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: rgba(0, 0, 0, 0.05);
        border: none;
        border-radius: 50%;
        color: var(--cpam-text);
        font-size: 17px;
        cursor: pointer;
        flex-shrink: 0;
        transition: background var(--cpam-dur-fast) ease,
                    transform var(--cpam-dur-fast) var(--cpam-ease-spring);
    }

    .cpam-sidebar-close:active {
        background: rgba(0, 0, 0, 0.1);
        transform: scale(0.85);
    }

    /* Menu list */
    .cpam-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cpam-menu li { margin-bottom: 2px; }

    /* Podmenu WordPress */
    .cpam-menu .sub-menu {
        margin: 2px 0 6px var(--cpam-gap-lg);
        padding: 0;
    }

    .cpam-menu .sub-menu a {
        font-size: 14px;
        font-weight: 500;
        padding: 9px 12px;
        opacity: 0.8;
    }

    .cpam-menu a {
        display: flex;
        align-items: center;
        padding: 12px 14px;
        color: var(--cpam-text);
        text-decoration: none;
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        transition: background var(--cpam-dur-fast) ease,
                    padding-left var(--cpam-dur-fast) ease;
    }

    .cpam-menu a:hover,
    .cpam-menu a:focus  { background: rgba(0, 0, 0, 0.04); }
    .cpam-menu a:active { background: rgba(0, 0, 0, 0.08); padding-left: 20px; }

    .cpam-menu a i {
        margin-right: var(--cpam-gap-md);
        font-size: 20px;
        width: 20px;
        text-align: center;
        color: var(--cpam-active);
        flex-shrink: 0;
    }

    .cpam-menu-hint {
        margin-top: var(--cpam-gap-md);
        padding: var(--cpam-gap-sm) var(--cpam-gap-md);
        font-size: 12px;
        color: #aaa;
        background: rgba(0, 0, 0, 0.025);
        border-radius: 8px;
        border: 1px dashed rgba(0, 0, 0, 0.08);
        line-height: 1.5;
    }

    /* User info box */
    .cpam-user-info {
        display: flex;
        align-items: center;
        gap: var(--cpam-gap-md);
        padding: var(--cpam-gap-md);
        background: rgba(0, 0, 0, 0.03);
        border-radius: 16px;
        margin-bottom: var(--cpam-gap-lg);
        border: 1px solid rgba(0, 0, 0, 0.04);
    }

    .cpam-user-info img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .cpam-user-details {
        display: flex;
        flex-direction: column;
        gap: 3px;
        overflow: hidden;
        flex: 1;
    }

    .cpam-user-details strong {
        display: block;
        font-size: 15px;
        font-weight: 700;
        color: var(--cpam-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cpam-user-details span {
        display: block;
        font-size: 12px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   OVERLAY
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {

    .cpam-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        z-index: var(--cpam-z-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--cpam-dur-base) var(--cpam-ease),
                    visibility var(--cpam-dur-base) var(--cpam-ease);
    }

    .cpam-overlay.cpam-active {
        opacity: 1;
        visibility: visible;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   WIDGETY CZATÓW / FLOAT BUTTONS – podniesienie nad dolny pasek
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {
    #tawkchat-minified-iframe-element,
    #tidio-chat-iframe,
    .fb_dialog,
    [id^="crisp-chatbox"],
    .zsiq_floatmain,
    .back-to-top,
    #scrollUp,
    #go-to-top,
    [class*="back-to-top"],
    [class*="floating-btn"] {
        bottom: calc(var(--cpam-bar-height) + env(safe-area-inset-bottom, 0px) + 16px) !important;
        z-index: 99990 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   MAŁE EKRANY (< 360px)
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 359px) {
    .cpam-label { font-size: 9px; }
    .cpam-icon-btn.cpam-center i { width: 50px; height: 50px; top: -20px; }
    .cpam-sidebar-title { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ════════════════════════════════════════════════════════════════════════════ */

.cpam-toggle:focus-visible,
.cpam-icon-btn:focus-visible,
.cpam-menu a:focus-visible,
.cpam-sidebar-close:focus-visible {
    outline: 2px solid var(--cpam-active);
    outline-offset: 2px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .cpam-wrapper *,
    .cpam-overlay {
        transition-duration: 0.01ms !important;
        animation-duration:  0.01ms !important;
    }
}

/* Usunięcie domyślnych marginesów motywu nad banerem w widoku mobilnym */
@media (max-width: 1023px) {
    body.home #content,
    body.home .off-canvas-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Jeśli pasek ma idealnie leżeć na banerze (efekt szkła) */
    .cpam-top-bar {
        background: rgba(255, 255, 255, 0.95); /* Lekkie wzmocnienie tła */
    }
}