.agcc-banner {
    --agcc-navy: #303c4c;
    --agcc-navy-deep: #293647;
    --agcc-slate: #4a5d73;
    --agcc-warm: #d7c6ad;
    --agcc-warm-light: #f3f1ed;
    --agcc-white: #ffffff;
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 2147483000;
    width: min(420px, calc(100vw - 32px));
    font-family: "OpenSans", Arial, sans-serif;
    color: var(--agcc-white);
}

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

.agcc-banner [hidden] {
    display: none !important;
}

/* CARD */
.agcc-banner__card {
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(215, 198, 173, .24);
    background: linear-gradient(145deg, rgba(48, 61, 78, .985), rgba(41, 54, 71, .985));
    backdrop-filter: blur(18px);
    box-shadow: 0 28px 72px rgba(32, 43, 57, .38);
}

/* BADGE */
.agcc-banner__badge {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(215, 198, 173, .2);
    background: rgba(215, 198, 173, .12);
    color: var(--agcc-warm);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* TEXT */
.agcc-banner__title {
    margin: 0 0 8px;
    font-size: 20px;
    color: var(--agcc-white);
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 400;
}

.agcc-banner__text {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, .76);
    line-height: 1.62;
}

.agcc-banner__text a {
    color: var(--agcc-warm-light);
    text-decoration-color: rgba(215, 198, 173, .55);
    text-underline-offset: 3px;
}

/* OPTIONS */
.agcc-banner__options {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* CATEGORY BLOCK */
.agcc-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    transition: all .2s ease;
}

.agcc-option:hover {
    border-color: rgba(215, 198, 173, .5);
}

/* TEXT LEFT */
.agcc-option span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agcc-option strong {
    font-size: 14px;
    color: var(--agcc-white);
}

.agcc-option small {
    font-size: 12px;
    color: rgba(248,250,252,.6);
}

/* LOCKED */
.agcc-option--locked {
    background: rgba(215, 198, 173, .08);
    border-color: rgba(215, 198, 173, .25);
    cursor: not-allowed;
}

.agcc-option--locked em {
    font-size: 11px;
    color: var(--agcc-warm);
    font-style: normal;
}

/* SWITCH */
.agcc-option input {
    display: none;
}

.agcc-option .agcc-switch {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255,255,255,.2);
    position: relative;
    flex-shrink: 0;
    transition: background .2s ease;
}

.agcc-option .agcc-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .2s ease;
}

.agcc-option input:checked + span + .agcc-switch,
.agcc-option input:checked ~ .agcc-switch {
    background: linear-gradient(135deg, var(--agcc-warm), #eadbc5);
}

.agcc-option input:checked + span + .agcc-switch::after,
.agcc-option input:checked ~ .agcc-switch::after {
    transform: translateX(18px);
}

/* BUTTONS */
.agcc-banner__actions {
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.agcc-button {
    padding: 11px 14px;
    border-radius: 13px;
    border: 1px solid transparent;
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    transition: all .2s ease;
}

.agcc-button:hover {
    transform: translateY(-1px);
}

.agcc-button--primary {
    border-color: var(--agcc-warm-light);
    background: var(--agcc-warm-light);
    color: var(--agcc-navy);
}

.agcc-button--primary:hover,
.agcc-button--primary:focus-visible {
    border-color: #e8dccb;
    background: #e8dccb;
}

.agcc-button--secondary {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.34);
    color: var(--agcc-white);
}

.agcc-button--secondary:hover,
.agcc-button--secondary:focus-visible {
    border-color: rgba(215,198,173,.65);
    background: rgba(215,198,173,.12);
}

.agcc-button--ghost {
    background: transparent;
    border-color: rgba(255,255,255,.15);
    color: var(--agcc-warm-light);
}

.agcc-button--ghost:hover,
.agcc-button--ghost:focus-visible {
    border-color: rgba(215,198,173,.45);
    background: rgba(255,255,255,.055);
}

.agcc-button--settings,
.agcc-button--save {
    grid-column: 1 / -1;
}

/* FOOTER */
.agcc-banner__footer {
    margin-top: 12px;
    font-size: 12px;
    color: rgba(255,255,255,.46);
}

/* MOBILE */
@media (max-width: 600px) {
    .agcc-banner {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
    }

    .agcc-banner__card {
        padding: 20px;
        border-radius: 18px;
    }

    .agcc-banner__text,
    .agcc-banner__text a {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .agcc-banner__actions {
        grid-template-columns: 1fr;
    }

    .agcc-button {
        min-height: 44px;
        width: 100%;
    }
}

@media (max-width: 374px) {
    .agcc-banner {
        right: 10px;
        bottom: 10px;
        width: calc(100vw - 20px);
    }

    .agcc-banner__card {
        padding: 18px;
    }
}
