/**
 * Glow Up Cookie Consent - brand skin.
 *
 * Colour comes entirely from the --cc-* custom properties printed inline by
 * PHP, so this file only carries the shape: the card treatment, type scale
 * and motion that make the banner look like it belongs to the site rather
 * than like a plugin that landed on it.
 */

#cc-main {
    --glowup-cc-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
}

/* ---------- consent modal (the banner) ---------- */
#cc-main .cm {
    border: 1px solid var(--cc-separator-border-color);
    box-shadow: var(--glowup-cc-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#cc-main .cm__title {
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

#cc-main .cm__desc {
    font-size: .875rem;
    line-height: 1.62;
}

/* A hairline of brand colour along the top edge. Small thing, but it is what
   stops the banner reading as a system dialog. */
#cc-main .cm:not(.cm--bar)::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    border-radius: var(--cc-modal-border-radius) var(--cc-modal-border-radius) 0 0;
    background: linear-gradient(90deg,
        var(--cc-btn-primary-bg),
        color-mix(in srgb, var(--cc-btn-primary-bg) 35%, transparent));
    pointer-events: none;
}

/* ---------- buttons ---------- */
#cc-main .cm__btn,
#cc-main .pm__btn {
    font-weight: 600;
    letter-spacing: .01em;
    transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover {
    transform: translateY(-1px);
}

#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible,
#cc-main .pm__close-btn:focus-visible {
    outline: 2px solid var(--cc-btn-primary-bg);
    outline-offset: 2px;
}

/* ---------- footer links inside the banner ---------- */
#cc-main .cm__links,
#cc-main .cm__footer {
    font-size: .78rem;
}

#cc-main .cm__footer a,
#cc-main .pm__section-desc a {
    color: var(--cc-link-color);
    text-underline-offset: 3px;
}

#cc-main .cm__footer a + a {
    margin-left: 1rem;
}

/* ---------- preferences modal ---------- */
#cc-main .pm {
    border: 1px solid var(--cc-separator-border-color);
    box-shadow: var(--glowup-cc-shadow);
}

#cc-main .pm__title {
    font-weight: 700;
    letter-spacing: -.01em;
}

#cc-main .pm__badge {
    background: color-mix(in srgb, var(--cc-btn-primary-bg) 18%, transparent);
    color: var(--cc-btn-primary-bg);
    border: 1px solid color-mix(in srgb, var(--cc-btn-primary-bg) 40%, transparent);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    min-width: auto;
    padding: 3px 9px;
}

#cc-main .pm__section--toggle {
    transition: background-color .2s ease, border-color .2s ease;
}

#cc-main .pm__section-title {
    font-weight: 600;
}

/* ---------- the reopen link the plugin drops in the footer ---------- */
.glowup-cc-footer-link {
    text-align: center;
    padding: 0 20px 18px;
    font-size: .8125rem;
}

.glowup-cc-footer-link a,
a.glowup-cc-open {
    color: inherit;
    opacity: .62;
    text-decoration: none;
    transition: opacity .2s ease, color .2s ease;
}

.glowup-cc-footer-link a:hover,
a.glowup-cc-open:hover {
    opacity: 1;
    color: var(--cc-link-color, currentColor);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- floating status button ----------
   Sits opposite the banner so the two never fight for the same corner. The
   status reads as colour first and words second: the dot answers "did I
   already deal with this?" at a glance, the tooltip and aria-label say
   exactly which choice was made. */
.glowup-cc-widget {
    position: fixed;
    bottom: 20px;
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--cc-separator-border-color, rgba(255, 255, 255, .16));
    border-radius: 999px;
    background: var(--cc-bg, #1b1d2b);
    color: var(--cc-primary-color, #e9e9ed);
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.glowup-cc-widget[hidden] { display: none; }
.glowup-cc-widget--left  { left: 20px; }
.glowup-cc-widget--right { right: 20px; }

.glowup-cc-widget:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--cc-btn-primary-bg) 55%, transparent);
    box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .7);
}

.glowup-cc-widget:focus-visible {
    outline: 2px solid var(--cc-btn-primary-bg);
    outline-offset: 3px;
}

.glowup-cc-widget__icon {
    display: block;
    width: 22px;
    height: 22px;
    opacity: .8;
    transition: opacity .2s ease;
}
.glowup-cc-widget__icon svg { display: block; width: 100%; height: 100%; }
.glowup-cc-widget:hover .glowup-cc-widget__icon { opacity: 1; }

/* the status light */
.glowup-cc-widget__dot {
    position: absolute;
    top: 7px;
    right: 7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid var(--cc-bg, #1b1d2b);
    background: var(--cc-secondary-color, #9ea3b8);
}
.glowup-cc-widget[data-state="all"] .glowup-cc-widget__dot       { background: #4ec98a; }
.glowup-cc-widget[data-state="custom"] .glowup-cc-widget__dot    { background: var(--cc-btn-primary-bg, #9184d9); }
.glowup-cc-widget[data-state="necessary"] .glowup-cc-widget__dot { background: #9ea3b8; }

/* the label, revealed on hover or keyboard focus */
.glowup-cc-widget__tip {
    position: absolute;
    bottom: 50%;
    transform: translateY(50%) scale(.96);
    transform-origin: center left;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 9px;
    border: 1px solid var(--cc-separator-border-color, rgba(255, 255, 255, .16));
    background: var(--cc-bg, #1b1d2b);
    color: var(--cc-primary-color, #e9e9ed);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}
.glowup-cc-widget--left  .glowup-cc-widget__tip { left: calc(100% + 10px); }
.glowup-cc-widget--right .glowup-cc-widget__tip { right: calc(100% + 10px); transform-origin: center right; }

.glowup-cc-widget:hover .glowup-cc-widget__tip,
.glowup-cc-widget:focus-visible .glowup-cc-widget__tip {
    opacity: 1;
    transform: translateY(50%) scale(1);
}

/* Stand down while the library's own dialogs are on screen - the banner is
   already asking the question, and the modal covers the page anyway. */
html.show--consent .glowup-cc-widget,
html.show--preferences .glowup-cc-widget {
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 600px) {
    .glowup-cc-widget { width: 42px; height: 42px; bottom: 16px; }
    .glowup-cc-widget--left  { left: 16px; }
    .glowup-cc-widget--right { right: 16px; }
    .glowup-cc-widget__icon { width: 20px; height: 20px; }
}

@media print { .glowup-cc-widget { display: none !important; } }

/* Respect a reduced-motion preference: the library animates in by default. */
@media (prefers-reduced-motion: reduce) {
    #cc-main .cm,
    #cc-main .pm,
    #cc-main .cm__btn,
    #cc-main .pm__btn,
    .glowup-cc-widget,
    .glowup-cc-widget__tip {
        transition: none !important;
        animation: none !important;
    }
    .glowup-cc-widget:hover { transform: none; }
}