/* =========================================================
   Webstudio GDPR — Public Banner Styles
   All selectors prefixed with #wsgdpr-banner or specific IDs
   for high specificity (beats theme styles without !important).
   ========================================================= */

/* ---------- CSS vars fallbacks ---------- */
:root {
    --wsgdpr-banner-bg:          #ffffff;
    --wsgdpr-banner-color:       #1a1a1a;
    --wsgdpr-banner-radius:      12px;
    --wsgdpr-banner-font-size:   14px;
    --wsgdpr-btn-accept-bg:      rgb(76, 34, 188);
    --wsgdpr-btn-accept-color:   #ffffff;
    --wsgdpr-btn-accept-radius:  8px;
    --wsgdpr-btn-reject-bg:      #f3f4f6;
    --wsgdpr-btn-reject-color:   #374151;
    --wsgdpr-btn-reject-radius:  8px;
    --wsgdpr-btn-settings-bg:    transparent;
    --wsgdpr-btn-settings-color: #6b7280;
    --wsgdpr-btn-settings-radius:8px;
    --wsgdpr-link-color:         rgb(76, 34, 188);
    --wsgdpr-overlay-bg:         rgba(0, 0, 0, .5);
}

/* ---------- Overlay ---------- */
#wsgdpr-overlay {
    position:   fixed;
    inset:      0;
    background: var(--wsgdpr-overlay-bg);
    z-index:    99998;
    animation:  wsgdpr-fade-in .25s ease;
}

/* ---------- Banner base ---------- */
#wsgdpr-banner {
    position:      fixed;
    z-index:       99999;
    width:         420px;
    max-width:     calc(100vw - 32px);
    background:    var(--wsgdpr-banner-bg);
    color:         var(--wsgdpr-banner-color);
    border-radius: var(--wsgdpr-banner-radius);
    font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:     var(--wsgdpr-banner-font-size);
    line-height:   1.5;
    padding:       22px 22px 16px;
    animation:     wsgdpr-slide-up .3s cubic-bezier(.34,1.56,.64,1);
    box-sizing:    border-box;
}

#wsgdpr-banner.wsgdpr-banner--shadow {
    box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
}

/* ---------- Positions ---------- */
#wsgdpr-banner.wsgdpr-banner--bottom-left  { bottom: 20px; left: 20px; }
#wsgdpr-banner.wsgdpr-banner--bottom-right { bottom: 20px; right: 20px; }

#wsgdpr-banner.wsgdpr-banner--center {
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    width:     460px;
    animation: wsgdpr-scale-in .3s cubic-bezier(.34,1.56,.64,1);
}

#wsgdpr-banner.wsgdpr-banner--bottom-bar {
    bottom:        0;
    left:          0;
    right:         0;
    width:         100%;
    max-width:     100%;
    border-radius: var(--wsgdpr-banner-radius) var(--wsgdpr-banner-radius) 0 0;
    display:       flex;
    align-items:   center;
    gap:           24px;
    flex-wrap:     nowrap;
    padding:       14px 32px;
    animation:     wsgdpr-slide-from-bottom .3s ease;
}

#wsgdpr-banner.wsgdpr-banner--bottom-bar .wsgdpr-view {
    display:     flex;
    align-items: center;
    gap:         24px;
    width:       100%;
}
#wsgdpr-banner.wsgdpr-banner--bottom-bar .wsgdpr-banner__title  { display: none; }
#wsgdpr-banner.wsgdpr-banner--bottom-bar .wsgdpr-banner__text   {
    margin:    0;
    flex:      1 1 0;
    min-width: 0;
    opacity:   .85;
}
#wsgdpr-banner.wsgdpr-banner--bottom-bar .wsgdpr-banner__actions--main {
    display:               flex;
    flex-wrap:             nowrap;
    gap:                   8px;
    flex:                  0 0 auto;
    grid-template-columns: unset;
}
#wsgdpr-banner.wsgdpr-banner--bottom-bar .wsgdpr-banner__actions--main .wsgdpr-btn {
    width:       auto;
    white-space: nowrap;
}
#wsgdpr-banner.wsgdpr-banner--bottom-bar .wsgdpr-powered { display: none; }

/* ---------- Banner content ---------- */
#wsgdpr-banner .wsgdpr-banner__title {
    margin:      0 0 8px;
    font-size:   calc(var(--wsgdpr-banner-font-size) + 4px);
    font-weight: 700;
    line-height: 1.3;
    color:       var(--wsgdpr-banner-color);
    font-style:  normal;
    text-transform: none;
    letter-spacing: normal;
}

#wsgdpr-banner .wsgdpr-banner__text {
    margin:      0 0 16px;
    opacity:     .8;
    font-size:   var(--wsgdpr-banner-font-size);
    line-height: 1.55;
    font-weight: normal;
    font-style:  normal;
}

#wsgdpr-banner .wsgdpr-link {
    color:           var(--wsgdpr-link-color);
    text-decoration: none;
    border-bottom:   1px solid transparent;
    transition:      border-color .15s;
}

#wsgdpr-banner .wsgdpr-link:hover {
    border-bottom-color: var(--wsgdpr-link-color);
}

/* ---------- Actions row ---------- */
#wsgdpr-banner .wsgdpr-banner__actions--main {
    display:               grid;
    grid-template-columns: 1fr 1fr auto;
    gap:                   8px;
    align-items:           center;
    margin-bottom:         0;
}

#wsgdpr-banner .wsgdpr-banner__actions--settings {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:     8px;
}

/* ---------- Buttons — full reset + own styles ---------- */
#wsgdpr-banner .wsgdpr-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         10px 16px;
    margin:          0;
    border:          none;
    outline:         none;
    cursor:          pointer;
    font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:       var(--wsgdpr-banner-font-size);
    font-weight:     600;
    font-style:      normal;
    text-transform:  none;
    letter-spacing:  normal;
    line-height:     1.2;
    text-align:      center;
    text-decoration: none;
    white-space:     nowrap;
    transition:      filter .15s, transform .1s, opacity .15s;
    box-shadow:      none;
    appearance:      none;
    -webkit-appearance: none;
    box-sizing:      border-box;
    width:           100%;
}

#wsgdpr-banner .wsgdpr-btn--accept {
    background:    var(--wsgdpr-btn-accept-bg);
    color:         var(--wsgdpr-btn-accept-color);
    border-radius: var(--wsgdpr-btn-accept-radius);
}

#wsgdpr-banner .wsgdpr-btn--reject {
    background:    var(--wsgdpr-btn-reject-bg);
    color:         var(--wsgdpr-btn-reject-color);
    border-radius: var(--wsgdpr-btn-reject-radius);
}

#wsgdpr-banner .wsgdpr-btn--secondary {
    background:    transparent;
    color:         var(--wsgdpr-btn-accept-bg);
    border-radius: var(--wsgdpr-btn-accept-radius);
    box-shadow:    inset 0 0 0 1.5px var(--wsgdpr-btn-accept-bg);
}

#wsgdpr-banner .wsgdpr-btn--settings {
    background:      var(--wsgdpr-btn-reject-bg);
    color:           var(--wsgdpr-btn-reject-color);
    border-radius:   var(--wsgdpr-btn-reject-radius);
    text-decoration: none;
}

#wsgdpr-banner .wsgdpr-btn--accept:hover   { filter: brightness(1.1); transform: translateY(-1px); }
#wsgdpr-banner .wsgdpr-btn--reject:hover   { filter: brightness(.95); }
#wsgdpr-banner .wsgdpr-btn--secondary:hover{ opacity: .75; }
#wsgdpr-banner .wsgdpr-btn--settings:hover { filter: brightness(.95); }

/* ---------- Category toggles ---------- */
#wsgdpr-banner .wsgdpr-cats {
    display:        flex;
    flex-direction: column;
    gap:            1px;
    border:         1px solid rgba(0,0,0,.08);
    border-radius:  calc(var(--wsgdpr-banner-radius) - 4px);
    overflow:       hidden;
    margin-bottom:  16px;
}

#wsgdpr-banner .wsgdpr-cat {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         10px 12px;
    background:      rgba(0,0,0,.02);
    gap:             12px;
    cursor:          default;
    margin:          0;
}

#wsgdpr-banner .wsgdpr-cat--toggle { cursor: pointer; }
#wsgdpr-banner .wsgdpr-cat--toggle:hover { background: rgba(0,0,0,.05); }

#wsgdpr-banner .wsgdpr-cat__info {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    flex:           1;
}

#wsgdpr-banner .wsgdpr-cat__info strong {
    display:       block;
    font-size:     calc(var(--wsgdpr-banner-font-size) - 1px);
    font-weight:   600;
    color:         var(--wsgdpr-banner-color);
    margin:        0;
}

#wsgdpr-banner .wsgdpr-cat__info small {
    display:    block;
    font-size:  calc(var(--wsgdpr-banner-font-size) - 2px);
    opacity:    .65;
    margin:     0;
    color:      var(--wsgdpr-banner-color);
}

#wsgdpr-banner .wsgdpr-always-on {
    font-size:     11px;
    font-weight:   600;
    background:    var(--wsgdpr-btn-accept-bg);
    color:         var(--wsgdpr-btn-accept-color);
    opacity:       .75;
    padding:       3px 9px;
    border-radius: 99px;
    white-space:   nowrap;
    flex-shrink:   0;
}

/* ---------- Toggle switch ---------- */
#wsgdpr-banner .wsgdpr-switch {
    position:   relative;
    flex-shrink: 0;
    line-height: 1;
}

#wsgdpr-banner .wsgdpr-switch input {
    position:       absolute;
    opacity:        0;
    pointer-events: none;
    width:          1px;
    height:         1px;
}

#wsgdpr-banner .wsgdpr-switch__track {
    display:       block;
    width:         38px;
    height:        22px;
    border-radius: 99px;
    background:    rgba(0,0,0,.15);
    transition:    background .2s;
    position:      relative;
    cursor:        pointer;
}

#wsgdpr-banner .wsgdpr-switch__track::after {
    content:       '';
    position:      absolute;
    top:           4px;
    left:          4px;
    width:         14px;
    height:        14px;
    border-radius: 50%;
    background:    #fff;
    box-shadow:    0 1px 3px rgba(0,0,0,.25);
    transition:    transform .2s;
}

#wsgdpr-banner .wsgdpr-switch input:checked ~ .wsgdpr-switch__track {
    background: var(--wsgdpr-btn-accept-bg);
}

#wsgdpr-banner .wsgdpr-switch input:checked ~ .wsgdpr-switch__track::after {
    transform: translateX(16px);
}

/* ---------- Powered by ---------- */
#wsgdpr-banner .wsgdpr-powered {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    margin:          14px 0 0;
    font-size:       11px;
    color:           var(--wsgdpr-banner-color);
    opacity:         .45;
    text-decoration: none;
    transition:      opacity .2s;
}

#wsgdpr-banner .wsgdpr-powered span {
    letter-spacing: .3px;
}

#wsgdpr-banner .wsgdpr-powered__logo {
    display:         inline-flex;
    align-items:     center;
    text-decoration: none;
}

#wsgdpr-banner .wsgdpr-powered__logo img {
    display:    block;
    height:     14px;
    width:      auto;
    filter:     grayscale(1) opacity(.6);
    transition: filter .2s;
}

#wsgdpr-banner .wsgdpr-powered:hover { opacity: 1; }
#wsgdpr-banner .wsgdpr-powered:hover .wsgdpr-powered__logo img { filter: none; }

/* ---------- Hidden attribute override (theme-safe) ---------- */
#wsgdpr-reopen[hidden],
#wsgdpr-overlay[hidden],
#wsgdpr-banner[hidden],
#wsgdpr-banner .wsgdpr-view[hidden] {
    display: none !important;
}

/* ---------- Reopen button ---------- */
#wsgdpr-reopen {
    position:        fixed;
    bottom:          20px;
    left:            20px; /* default: bottom-left */
    z-index:         99990;
    width:           44px;
    height:          44px;
    border-radius:   50%;
    background:      var(--wsgdpr-btn-accept-bg);
    color:           var(--wsgdpr-btn-accept-color);
    border:          none;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 2px 12px rgba(0,0,0,.22);
    transition:      transform .2s, box-shadow .2s, opacity .2s;
    opacity:         .85;
    padding:         0;
    margin:          0;
    line-height:     1;
    appearance:      none;
    -webkit-appearance: none;
}

#wsgdpr-reopen svg {
    display:        block;
    stroke:         var(--wsgdpr-btn-accept-color, #fff);
    fill:           none;
    pointer-events: none;
    flex-shrink:    0;
}

#wsgdpr-reopen:hover {
    transform:  scale(1.08);
    box-shadow: 0 4px 20px rgba(0,0,0,.3);
    opacity:    1;
}

/* Tooltip */
#wsgdpr-reopen::after {
    content:        attr(data-tooltip);
    position:       absolute;
    left:           calc(100% + 10px);
    top:            50%;
    transform:      translateY(-50%) translateX(-4px);
    background:     #1a1a2e;
    color:          #fff;
    font-family:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size:      12px;
    font-weight:    500;
    white-space:    nowrap;
    padding:        6px 12px;
    border-radius:  6px;
    pointer-events: none;
    opacity:        0;
    transition:     opacity .2s, transform .2s;
    box-shadow:     0 2px 8px rgba(0,0,0,.18);
    z-index:        1;
}

/* Arrow */
#wsgdpr-reopen::before {
    content:        '';
    position:       absolute;
    left:           calc(100% + 4px);
    top:            50%;
    transform:      translateY(-50%);
    border:         5px solid transparent;
    border-right-color: #1a1a2e;
    pointer-events: none;
    opacity:        0;
    transition:     opacity .2s;
}

#wsgdpr-reopen:hover::after,
#wsgdpr-reopen:hover::before {
    opacity:   1;
    transform: translateY(-50%) translateX(0);
}

/* ---------- Reopen position variants ---------- */
/* bottom-left (default — already set above) */
#wsgdpr-reopen.wsgdpr-reopen--bottom-left {
    left:  20px;
    right: auto;
}

/* bottom-right */
#wsgdpr-reopen.wsgdpr-reopen--bottom-right {
    left:  auto;
    right: 20px;
}

/* bottom-right: flip tooltip to left side */
#wsgdpr-reopen.wsgdpr-reopen--bottom-right::after {
    left:      auto;
    right:     calc(100% + 10px);
    transform: translateY(-50%) translateX(4px);
}
#wsgdpr-reopen.wsgdpr-reopen--bottom-right::before {
    left:              auto;
    right:             calc(100% + 4px);
    border-right-color: transparent;
    border-left-color:  #1a1a2e;
}
#wsgdpr-reopen.wsgdpr-reopen--bottom-right:hover::after,
#wsgdpr-reopen.wsgdpr-reopen--bottom-right:hover::before {
    transform: translateY(-50%) translateX(0);
}

/* center and bottom-bar — keep at bottom-left */
#wsgdpr-reopen.wsgdpr-reopen--center,
#wsgdpr-reopen.wsgdpr-reopen--bottom-bar {
    left:  20px;
    right: auto;
}

/* ---------- Animations ---------- */
@keyframes wsgdpr-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes wsgdpr-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes wsgdpr-scale-in {
    from { opacity: 0; transform: translate(-50%, -48%) scale(.95); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes wsgdpr-slide-from-bottom {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    #wsgdpr-banner,
    #wsgdpr-overlay { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
    #wsgdpr-banner.wsgdpr-banner--bottom-left,
    #wsgdpr-banner.wsgdpr-banner--bottom-right {
        left:    12px;
        right:   12px;
        bottom:  12px;
        width:   auto;
    }
    #wsgdpr-banner.wsgdpr-banner--center {
        width:     calc(100vw - 32px);
        top:       auto;
        bottom:    12px;
        left:      16px;
        right:     16px;
        transform: none;
        animation: wsgdpr-slide-up .3s ease;
    }
    #wsgdpr-banner .wsgdpr-banner__actions--main {
        grid-template-columns: 1fr 1fr;
    }
    #wsgdpr-banner .wsgdpr-banner__actions--main .wsgdpr-btn--settings {
        grid-column: 1 / -1;
    }
    #wsgdpr-banner .wsgdpr-banner__actions--settings {
        grid-template-columns: 1fr 1fr;
    }
    #wsgdpr-banner .wsgdpr-banner__actions--settings .wsgdpr-btn:first-child {
        grid-column: 1 / -1;
    }
}