/* ================================================================== */
/* ESSA Cookie Consent — Banner CSS v2.0.8                            */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* CSS VARIABLES (dziedziczone przez wszystkie elementy wewnątrz)      */
/* --ecc-primary jest ustawiane inline na #ecc-banner z PHP            */
/* ------------------------------------------------------------------ */
#ecc-banner {
    --ecc-primary:  #1687F3;
    --ecc-bg:       #ffffff;
    --ecc-surface:  #f4f5f7;
    --ecc-text:     #1a1a2e;
    --ecc-muted:    #6b7280;
    --ecc-border:   #e2e4e9;
    --ecc-radius:   14px;
    --ecc-shadow:   0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    --ecc-z:        9999990;
    font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:      15px;
    line-height:    1.5;
    box-sizing:     border-box;
}
#ecc-banner *, #ecc-banner *::before, #ecc-banner *::after {
    box-sizing: inherit;
}

/* ------------------------------------------------------------------ */
/* BANNER WRAPPER                                                       */
/* ------------------------------------------------------------------ */
#ecc-banner {
    position:   fixed;
    z-index:    var(--ecc-z);
    display:    none;
    align-items: flex-end;
    justify-content: center;
    padding:    16px;
    pointer-events: none;
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}
#ecc-banner.ecc-banner--in {
    opacity:   1;
    transform: translateY(0);
}

.ecc-banner--bottom { bottom: 0; left: 0; right: 0; }
.ecc-banner--top    { top: 0;    left: 0; right: 0; align-items: flex-start; transform: translateY(-20px); }
.ecc-banner--center { inset: 0; align-items: center; }

.ecc-banner--top.ecc-banner--in    { transform: translateY(0); }
.ecc-banner--center.ecc-banner--in { transform: translateY(0); }

/* ------------------------------------------------------------------ */
/* OVERLAY (tylko dla center)                                           */
/* ------------------------------------------------------------------ */
.ecc-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: -1;
}
.ecc-banner--center .ecc-overlay { display: block; }

/* ------------------------------------------------------------------ */
/* BOX                                                                  */
/* ------------------------------------------------------------------ */
.ecc-box {
    background:    var(--ecc-bg);
    border-radius: var(--ecc-radius);
    box-shadow:    var(--ecc-shadow);
    border:        1px solid var(--ecc-border);
    padding:       24px 28px;
    max-width:     800px;
    width:         100%;
    pointer-events: all;
}

/* ------------------------------------------------------------------ */
/* MAIN VIEW                                                            */
/* ------------------------------------------------------------------ */
.ecc-main {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 18px;
}
.ecc-icon {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
}
.ecc-content { flex: 1; }
.ecc-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--ecc-text);
    line-height: 1.3;
}
.ecc-desc {
    margin: 0;
    font-size: 13px;
    color: var(--ecc-muted);
    line-height: 1.6;
}
.ecc-desc a {
    color: var(--ecc-primary);
    text-decoration: underline;
}
.ecc-desc a:hover { opacity: 0.8; }

/* ------------------------------------------------------------------ */
/* ACTIONS                                                              */
/* ------------------------------------------------------------------ */
.ecc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 4px;
}

/* ------------------------------------------------------------------ */
/* BUTTONS                                                              */
/* ------------------------------------------------------------------ */
.ecc-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         10px 20px;
    border-radius:   8px;
    font-size:       14px;
    font-weight:     600;
    cursor:          pointer;
    border:          2px solid transparent;
    white-space:     nowrap;
    font-family:     inherit;
    line-height:     1;
    text-decoration: none;
    outline:         none;
    transition:      background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

/* Primary */
.ecc-btn--primary {
    background: var(--ecc-primary);
    color: #fff;
    border-color: var(--ecc-primary);
}
.ecc-btn--primary:hover {
    background: color-mix(in srgb, var(--ecc-primary) 85%, #000);
    border-color: color-mix(in srgb, var(--ecc-primary) 85%, #000);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ecc-btn--primary:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ecc-primary) 40%, transparent);
}

/* Outline */
.ecc-btn--outline {
    background:   transparent;
    color:        var(--ecc-text);
    border-color: var(--ecc-border);
}
.ecc-btn--outline:hover {
    background:   var(--ecc-surface);
    border-color: #9ca3af;
    color:        var(--ecc-text);
}
.ecc-btn--outline:focus-visible {
    box-shadow: 0 0 0 3px rgba(100,100,100,0.2);
}

/* Ghost */
.ecc-btn--ghost {
    background:      transparent;
    color:           var(--ecc-muted);
    border-color:    transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-left:    8px;
    padding-right:   8px;
}
.ecc-btn--ghost:hover {
    color:           var(--ecc-text);
    background:      transparent;
    border-color:    transparent;
}

/* ------------------------------------------------------------------ */
/* PREFERENCES VIEW                                                     */
/* ------------------------------------------------------------------ */
.ecc-categories {
    border-top: 1px solid var(--ecc-border);
    margin: 14px 0 18px;
}
.ecc-cat {
    padding: 13px 0;
    border-bottom: 1px solid var(--ecc-border);
}
.ecc-cat:last-child { border-bottom: none; }

.ecc-cat__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}
.ecc-cat__name {
    font-weight: 600;
    font-size: 14px;
    color: var(--ecc-text);
    cursor: default;
}
.ecc-cat__desc {
    margin: 0;
    font-size: 12px;
    color: var(--ecc-muted);
    line-height: 1.55;
    padding-right: 56px;
}
.ecc-badge-always {
    font-size:    11px;
    font-weight:  600;
    color:        var(--ecc-muted);
    background:   var(--ecc-surface);
    border:       1px solid var(--ecc-border);
    padding:      3px 10px;
    border-radius: 20px;
    white-space:  nowrap;
    flex-shrink:  0;
}

/* ------------------------------------------------------------------ */
/* TOGGLE SWITCH                                                        */
/* ------------------------------------------------------------------ */
.ecc-switch {
    position:    relative;
    display:     inline-block;
    cursor:      pointer;
    flex-shrink: 0;
}
.ecc-switch__input {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}
.ecc-switch__track {
    display:       block;
    width:         44px;
    height:        24px;
    background:    #c9cdd4;
    border-radius: 12px;
    position:      relative;
    transition:    background 0.2s;
}
.ecc-switch__track::after {
    content:       '';
    position:      absolute;
    top:           3px;
    left:          3px;
    width:         18px;
    height:        18px;
    background:    #fff;
    border-radius: 50%;
    transition:    transform 0.2s, box-shadow 0.2s;
    box-shadow:    0 1px 4px rgba(0,0,0,0.25);
}
.ecc-switch__input:checked + .ecc-switch__track {
    background: var(--ecc-primary);
}
.ecc-switch__input:checked + .ecc-switch__track::after {
    transform: translateX(20px);
}
.ecc-switch:hover .ecc-switch__track {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ecc-primary) 20%, transparent);
}
.ecc-switch__input:focus-visible + .ecc-switch__track {
    outline: 2px solid var(--ecc-primary);
    outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* SERVICE TAGS                                                         */
/* ------------------------------------------------------------------ */
.ecc-cat__services {
    margin: 6px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.ecc-service-tag {
    display:       inline-block;
    font-size:     11px;
    font-weight:   600;
    padding:       2px 8px;
    border-radius: 20px;
    background:    var(--ecc-surface);
    border:        1px solid var(--ecc-border);
    color:         var(--ecc-muted);
    white-space:   nowrap;
}

/* ------------------------------------------------------------------ */
/* REVOKE BUTTON                                                        */
/* ------------------------------------------------------------------ */
#ecc-revoke {
    position:        fixed;
    bottom:          18px;
    left:            18px;
    z-index:         9999989;
    width:           46px;
    height:          46px;
    border-radius:   50%;
    background:      #ffffff;
    border:          2px solid #1687F3; /* fallback, JS nadpisze prawdziwym kolorem */
    cursor:          pointer;
    font-size:       20px;
    display:         none;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 2px 12px rgba(0,0,0,0.18);
    padding:         0;
    line-height:     1;
    transition:      transform 0.2s, box-shadow 0.2s;
    user-select:     none;
    -webkit-tap-highlight-color: transparent;
}
#ecc-revoke:hover {
    transform:  scale(1.12);
    box-shadow: 0 4px 18px rgba(0,0,0,0.25);
}
#ecc-revoke:active {
    transform: scale(0.96);
}

/* ------------------------------------------------------------------ */
/* IFRAME PLACEHOLDER                                                   */
/* ------------------------------------------------------------------ */
.ecc-iframe-ph {
    display:         flex;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    background:      var(--ecc-surface, #f4f5f7);
    border:          2px dashed var(--ecc-border, #e2e4e9);
    border-radius:   10px;
    padding:         24px 16px;
    min-height:      180px;
    font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.ecc-iframe-inner { max-width: 320px; }
.ecc-iframe-icon  { font-size: 28px; margin-bottom: 8px; }
.ecc-iframe-inner p { margin: 0 0 14px; font-size: 13px; color: #555; line-height: 1.5; }
.ecc-iframe-btn {
    padding:       9px 18px;
    background:    #1687F3;
    color:         #fff;
    border:        none;
    border-radius: 7px;
    cursor:        pointer;
    font-size:     13px;
    font-weight:   600;
    font-family:   inherit;
    transition:    background 0.2s;
}
.ecc-iframe-btn:hover { background: #1070cc; }

/* ------------------------------------------------------------------ */
/* BRANDING                                                             */
/* ------------------------------------------------------------------ */
.ecc-branding-inner {
    text-align:    center;
    margin-top:    14px;
    padding-top:   10px;
    border-top:    1px solid var(--ecc-border);
    font-size:     11px;
    color:         var(--ecc-muted);
}
.ecc-branding-inner a {
    color:           var(--ecc-primary);
    text-decoration: none;
    font-weight:     600;
}
.ecc-branding-inner a:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* RESPONSIVE                                                           */
/* ------------------------------------------------------------------ */
@media (max-width: 600px) {
    #ecc-banner { padding: 0; }

    .ecc-banner--bottom .ecc-box { border-radius: 16px 16px 0 0; }
    .ecc-banner--top    .ecc-box { border-radius: 0 0 16px 16px; }

    .ecc-box    { padding: 20px 16px; max-height: 85vh; overflow-y: auto; }
    .ecc-main   { gap: 10px; }
    .ecc-icon   { font-size: 26px; }

    .ecc-actions { flex-direction: column; align-items: stretch; }
    .ecc-btn     { text-align: center; width: 100%; }
    .ecc-btn--ghost { width: auto; align-self: center; }

    .ecc-cat__desc { padding-right: 0; }
}