/**
 * Ace Cookie Consent — Banner Styles
 * Handles all positions, themes, animations, and customize panel.
 */

/* ── CSS Variables ─────────────────────────────────────────────────────────── */
:root {
    --acc-accent:        #2563eb;
    --acc-accent-hover:  #1d4ed8;
    --acc-radius:        12px;
    --acc-shadow:        0 4px 24px rgba(0, 0, 0, 0.12);
    --acc-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --acc-transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --acc-z-index:       999999;

    /* Light Theme */
    --acc-bg:            #ffffff;
    --acc-text:          #1f2937;
    --acc-subtext:       #6b7280;
    --acc-border:        #e5e7eb;
    --acc-btn-reject-bg: #f3f4f6;
    --acc-btn-reject-text: #374151;
    --acc-overlay:       rgba(0, 0, 0, 0.5);
}

/* ── Dark Theme ────────────────────────────────────────────────────────────── */
.accBannerDark {
    --acc-bg:              #1f2937;
    --acc-text:            #f9fafb;
    --acc-subtext:         #9ca3af;
    --acc-border:          #374151;
    --acc-btn-reject-bg:   #374151;
    --acc-btn-reject-text: #f9fafb;
}

/* ── Base Banner ───────────────────────────────────────────────────────────── */
#accCookieBanner {
    position:        fixed;
    z-index:         var(--acc-z-index);
    background:      var(--acc-bg);
    color:           var(--acc-text);
    font-family:     var(--acc-font);
    font-size:       14px;
    line-height:     1.6;
    box-shadow:      var(--acc-shadow);
    transition:      var(--acc-transition);
    display:         none;
}

#accCookieBanner.accVisible {
    display: flex;
}

/* ── Bottom Bar ────────────────────────────────────────────────────────────── */
#accCookieBanner.accPositionBottomBar {
    bottom:          0;
    left:            0;
    right:           0;
    width:           100%;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 24px;
    border-top:      1px solid var(--acc-border);
    gap:             16px;
    flex-wrap:       wrap;
}

/* ── Top Bar ───────────────────────────────────────────────────────────────── */
#accCookieBanner.accPositionTopBar {
    top:             0;
    left:            0;
    right:           0;
    width:           100%;
    flex-direction:  row;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 24px;
    border-bottom:   1px solid var(--acc-border);
    gap:             16px;
    flex-wrap:       wrap;
}

/* ── Bottom Left Popup ─────────────────────────────────────────────────────── */
#accCookieBanner.accPositionBottomLeft {
    bottom:          24px;
    left:            24px;
    width:           360px;
    max-width:       calc(100vw - 48px);
    flex-direction:  column;
    padding:         24px;
    border-radius:   var(--acc-radius);
    gap:             16px;
}

/* ── Bottom Right Popup ────────────────────────────────────────────────────── */
#accCookieBanner.accPositionBottomRight {
    bottom:          24px;
    right:           24px;
    width:           460px;
    max-width:       calc(100vw - 48px);
    flex-direction:  column;
    padding:         24px;
    border-radius:   var(--acc-radius);
    gap:             16px;
}

/* ── Banner Content ────────────────────────────────────────────────────────── */
.accBannerContent {
    flex:       1;
    min-width:  0;
}

.accBannerTitle {
    font-size:   15px;
    font-weight: 600;
    margin:      0 0 6px 0;
    color:       var(--acc-text);
}

.accBannerMessage {
    margin:    0;
    color:     var(--acc-subtext);
    font-size: 13px;
}

.accBannerMessage a {
    color:           var(--acc-accent);
    text-decoration: none;
}

.accBannerMessage a:hover {
    text-decoration: underline;
}

/* ── Banner Buttons ────────────────────────────────────────────────────────── */
.accBannerButtons {
    display:     flex;
    gap:         8px;
    align-items: center;
    flex-shrink: 0;
    /* flex-wrap:   wrap; */
}

.accPositionBottomLeft  .accBannerButtons,
.accPositionBottomRight .accBannerButtons {
    width:          100%;
    /* flex-direction: column; */
}

.accPositionBottomLeft  .accBannerButtons .accBtn,
.accPositionBottomRight .accBannerButtons .accBtn {
    width:      100%;
    text-align: center;
}

.accBtn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         9px 18px;
    border-radius:   8px;
    font-size:       13px;
    font-weight:     600;
    cursor:          pointer;
    border:          none;
    outline:         none;
    transition:      var(--acc-transition);
    white-space:     nowrap;
    font-family:     var(--acc-font);
}

.accBtnAccept {
    background: var(--acc-accent);
    color:      #ffffff;
}

.accBtnAccept:hover {
    background: var(--acc-accent-hover);
    transform:  translateY(-1px);
}

.accBtnReject {
    background: var(--acc-btn-reject-bg);
    color:      var(--acc-btn-reject-text);
}

.accBtnReject:hover {
    filter:    brightness(0.95);
    transform: translateY(-1px);
}

.accBtnCustomize {
    background:  transparent;
    color:       var(--acc-accent);
    text-decoration: underline;
    padding:     9px 10px;
}

.accBtnCustomize:hover {
    color: var(--acc-accent-hover);
}

/* ── Animations ────────────────────────────────────────────────────────────── */

/* Slide In */
.accAnimSlide.accPositionBottomBar,
.accAnimSlide.accPositionBottomLeft,
.accAnimSlide.accPositionBottomRight {
    transform:  translateY(100%);
    opacity:    0;
}

.accAnimSlide.accPositionTopBar {
    transform: translateY(-100%);
    opacity:   0;
}

.accAnimSlide.accVisible {
    transform: translateY(0);
    opacity:   1;
}

/* Fade In */
.accAnimFade {
    opacity: 0;
}

.accAnimFade.accVisible {
    opacity: 1;
}

/* ── Customize Panel Overlay ───────────────────────────────────────────────── */
#accCustomizeOverlay {
    position:         fixed;
    top:              0;
    left:             0;
    width:            100%;
    height:           100%;
    background:       var(--acc-overlay);
    z-index:          calc(var(--acc-z-index) + 1);
    display:          none;
    align-items:      center;
    justify-content:  center;
    padding:          16px;
    box-sizing:       border-box;
}

#accCustomizeOverlay.accVisible {
    display: flex;
}

/* ── Customize Panel ───────────────────────────────────────────────────────── */
#accCustomizePanel {
    background:    var(--acc-bg);
    color:         var(--acc-text);
    font-family:   var(--acc-font);
    border-radius: var(--acc-radius);
    box-shadow:    var(--acc-shadow);
    width:         100%;
    max-width:     480px;
    max-height:    90vh;
    overflow-y:    auto;
    padding:       28px;
    box-sizing:    border-box;
}

.accPanelHeader {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
}

.accPanelTitle {
    font-size:   18px;
    font-weight: 700;
    margin:      0;
    color:       var(--acc-text);
}

.accPanelClose {
    background:  transparent;
    border:      none;
    cursor:      pointer;
    font-size:   20px;
    color:       var(--acc-subtext);
    padding:     4px;
    line-height: 1;
    transition:  var(--acc-transition);
}

.accPanelClose:hover {
    color: var(--acc-text);
}

/* ── Cookie Category Toggle Rows ───────────────────────────────────────────── */
.accCategoryItem {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    padding:         16px 0;
    border-bottom:   1px solid var(--acc-border);
    gap:             16px;
}

.accCategoryItem:last-child {
    border-bottom: none;
}

.accCategoryDetails {
    flex: 1;
}

.accCategoryName {
    font-size:   14px;
    font-weight: 600;
    color:       var(--acc-text);
    margin:      0 0 4px 0;
}

.accCategoryDesc {
    font-size: 12px;
    color:     var(--acc-subtext);
    margin:    0;
}

/* ── Toggle Switch ─────────────────────────────────────────────────────────── */
.accToggleSwitch {
    position:   relative;
    flex-shrink: 0;
    width:      48px;
    height:     26px;
}

.accToggleSwitch input {
    opacity:  0;
    width:    0;
    height:   0;
    position: absolute;
}

.accToggleTrack {
    position:         absolute;
    top:              0;
    left:             0;
    right:            0;
    bottom:           0;
    background:       var(--acc-border);
    border-radius:    13px;
    cursor:           pointer;
    transition:       var(--acc-transition);
}

.accToggleTrack::before {
    content:          '';
    position:         absolute;
    width:            20px;
    height:           20px;
    left:             3px;
    top:              3px;
    background:       white;
    border-radius:    50%;
    transition:       var(--acc-transition);
    box-shadow:       0 1px 3px rgba(0,0,0,0.2);
}

.accToggleSwitch input:checked + .accToggleTrack {
    background: var(--acc-accent);
}

.accToggleSwitch input:checked + .accToggleTrack::before {
    transform: translateX(22px);
}

.accToggleSwitch input:disabled + .accToggleTrack {
    opacity: 0.6;
    cursor:  not-allowed;
}

/* ── Panel Save Button ─────────────────────────────────────────────────────── */
.accPanelActions {
    margin-top:     20px;
    display:        flex;
    gap:            10px;
    flex-direction: column;
}

.accBtnSavePanel {
    width:      100%;
    padding:    12px;
    background: var(--acc-accent);
    color:      #ffffff;
    border:     none;
    border-radius: 8px;
    font-size:  14px;
    font-weight: 600;
    cursor:     pointer;
    font-family: var(--acc-font);
    transition: var(--acc-transition);
}

.accBtnSavePanel:hover {
    background: var(--acc-accent-hover);
}

/* ── Cookie Settings Shortcode Link ────────────────────────────────────────── */
.accCookieSettingsLink {
    color:           var(--acc-accent);
    text-decoration: none;
    cursor:          pointer;
}

.accCookieSettingsLink:hover {
    text-decoration: underline;
}

.accCookieSettingsBtn {
    display:         inline-block;
    padding:         8px 16px;
    background:      var(--acc-accent);
    color:           #ffffff !important;
    border-radius:   8px;
    text-decoration: none !important;
    font-weight:     600;
    transition:      var(--acc-transition);
}

.accCookieSettingsBtn:hover {
    background: var(--acc-accent-hover);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    #accCookieBanner.accPositionBottomBar,
    #accCookieBanner.accPositionTopBar {
        flex-direction: column;
        align-items:    flex-start;
        padding:        16px;
    }

    #accCookieBanner.accPositionBottomBar .accBannerButtons,
    #accCookieBanner.accPositionTopBar    .accBannerButtons {
        width: 100%;
    }

    #accCookieBanner.accPositionBottomBar .accBtn,
    #accCookieBanner.accPositionTopBar    .accBtn {
        flex: 1;
        text-align: center;
    }

    #accCookieBanner.accPositionBottomLeft,
    #accCookieBanner.accPositionBottomRight {
        left:       16px;
        right:      16px;
        bottom:     16px;
        width:      auto;
    }
}