/* CookieClups front-end banner. Themed via CSS custom properties set inline.
   Colours and button styles are forced with !important so the banner keeps its
   own look on any theme instead of inheriting the page (theme) styles. */

.cc-banner {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 32px);
    max-width: 500px;
    box-sizing: border-box;
    margin: 0;
    padding: 26px 26px 22px;
    background: var(--cc-box-bg, #ffffff) !important;
    color: var(--cc-text, #0e2349) !important;
    border-radius: var(--cc-box-radius, 16px);
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.20);
    z-index: 2147483600;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    display: none;
}

.cc-banner.cc-show {
    display: block;
}

.cc-banner * {
    box-sizing: border-box;
}

/* Position variants (placement of the fixed box). */
.cc-banner[data-position="bottom-right"] {
    top: auto;
    bottom: 24px;
    left: auto;
    right: 24px;
    transform: none;
}

.cc-banner[data-position="bottom-left"] {
    top: auto;
    bottom: 24px;
    left: 24px;
    right: auto;
    transform: none;
}

.cc-banner[data-position="bottom-center"] {
    top: auto;
    bottom: 24px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

/* Close: small round button, forced to the top-right corner of the box.
   Position is forced with !important so a theme can't push it back into the
   normal flow (which would move it to the top-left). */
.cc-close {
    position: absolute !important;
    top: 12px !important;
    right: 14px !important;
    left: auto !important;
    bottom: auto !important;
    float: none !important;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--cc-text, #0e2349) !important;
    font-size: 28px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s ease, background-color 0.15s ease;
    z-index: 2;
}

.cc-close:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.06) !important;
}

.cc-title {
    margin: 0 0 10px;
    padding-right: 36px;
    font-size: 18px;
    font-weight: 700;
    color: var(--cc-text, #0e2349) !important;
}

.cc-body {
    margin: 0 0 18px;
    color: var(--cc-text, #0e2349) !important;
}

.cc-body a {
    color: inherit !important;
    text-decoration: underline;
}

.cc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    justify-content: flex-end;
}

.cc-btn {
    margin: 0;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    width: auto;
    min-height: 0;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none !important;
    letter-spacing: normal;
    transition: background-color 0.15s ease;
}

.cc-btn-primary {
    background: var(--cc-btn1-bg, #0e2349) !important;
    color: var(--cc-btn1-text, #ffffff) !important;
}

.cc-btn-primary:hover {
    background: var(--cc-btn1-hover, #d476d3) !important;
}

.cc-btn-secondary {
    background: var(--cc-btn2-bg, #eef1f6) !important;
    color: var(--cc-btn2-text, #0e2349) !important;
}

.cc-btn-secondary:hover {
    background: var(--cc-btn2-hover, #dfe4ec) !important;
}

.cc-screen[hidden] {
    display: none;
}

.cc-options {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 0 18px;
}

.cc-option-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cc-option-label {
    font-weight: 600;
    color: var(--cc-text, #0e2349) !important;
}

.cc-option-desc {
    margin: 5px 0 0;
    font-size: 13px;
    line-height: 1.45;
    opacity: 0.8;
    color: var(--cc-text, #0e2349) !important;
}

/* Toggle switch */
.cc-switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 42px;
    height: 24px;
}

.cc-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
}

.cc-slider {
    position: absolute;
    inset: 0;
    background: #c7ccd6 !important;
    border-radius: 999px;
    transition: background-color 0.2s ease;
}

.cc-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
}

.cc-switch input:checked + .cc-slider {
    background: var(--cc-switch, #d476d3) !important;
}

.cc-switch input:checked + .cc-slider::before {
    transform: translateX(18px);
}

.cc-switch-locked .cc-slider {
    opacity: 0.65;
}

.cc-switch-locked input {
    cursor: not-allowed;
}

@media (max-width: 520px) {
    .cc-banner {
        padding: 22px 18px 18px;
    }
    /* When placed at the bottom, on mobile keep it centered and leave room so
       the phone browser chrome does not cover it. */
    .cc-banner[data-position^="bottom"] {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
    }
    .cc-actions {
        justify-content: stretch;
    }
    .cc-btn {
        flex: 1 1 auto;
    }
}