/* =========================================================
   SRGC — Offer Card (refined: airy, fewer distractions)
   ========================================================= */

:root {
    --offer-teal: #14d3c4;
    --offer-teal-2: #17b3a8;
    --offer-amber: #ffb347;
    --offer-rose: #ff6489;
    --offer-bg-1: #0b1f2b;
    --offer-bg-2: #091826;
}

/* Wrapper */
.offer-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    padding: clamp(18px,2.6vw,26px);
    border: 1px solid rgba(255,255,255,.08);
    background: radial-gradient(1200px 800px at -10% -20%, rgba(20,211,196,.12), transparent 60%), radial-gradient(900px 600px at 110% -10%, rgba(255,100,137,.10), transparent 55%), linear-gradient(180deg,var(--offer-bg-2),var(--offer-bg-1));
    box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

    /* animated border glow */
    .offer-card::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 22px;
        padding: 2px;
        background: conic-gradient(from 180deg, rgba(20,211,196,.0) 0turn, rgba(20,211,196,.35) .15turn, rgba(255,100,137,.28) .45turn, rgba(255,179,71,.30) .65turn, rgba(20,211,196,.35) 1turn);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: offerGlow 9s linear infinite;
        pointer-events: none;
    }

@keyframes offerGlow {
    to {
        transform: rotate(360deg);
    }
}

/* layout (single streamlined column) */
.offer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(12px,2vw,18px);
}

/* eyebrow */
.offer-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(20,211,196,.10);
    color: #dff6f3;
    border: 1px solid rgba(20,211,196,.25);
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    font-size: .8rem;
}

    .offer-eyebrow .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--offer-teal);
        box-shadow: 0 0 0 6px rgba(20,211,196,.15);
        animation: pulseDot 2.2s ease-in-out infinite;
    }

@keyframes pulseDot {
    0%,100% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(20,211,196,.15);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 0 10px rgba(20,211,196,.08);
    }
}

.offer-title {
    margin: .6rem 0 .35rem 0;
    font-weight: 800;
    letter-spacing: .3px;
    font-size: clamp(1.25rem, 3vw, 2rem);
    color: #f3fbfd;
}

.offer-desc {
    color: #cfe9e7;
    max-width: 60ch;
}

/* highlights (chips) */
.offer-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: .8rem 0 0 0;
}

.offer-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .7rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .86rem;
    color: #0a1c23;
    background: linear-gradient(180deg,#fff,#ecf8f6);
    border: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
}

    .offer-chip svg {
        width: 16px;
        height: 16px;
    }

/* attention line */
.offer-note {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: .85rem;
    color: #bfe8e2;
    font-weight: 700;
}

    .offer-note .bell {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: radial-gradient(circle at 60% 35%, var(--offer-amber), #ffd7a1);
        box-shadow: 0 0 0 6px rgba(255,179,71,.12);
    }

/* actions */
.offer-actions {
    margin-top: clamp(12px,2vw,16px);
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.offer-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem 1.1rem;
    border-radius: 14px;
    border: 1px solid rgba(20,211,196,.45);
    background-image: linear-gradient(180deg, var(--offer-teal), var(--offer-teal-2));
    color: #082126;
    font-weight: 800;
    letter-spacing: .2px;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(20,211,196,.35);
}

    .offer-btn:hover {
        filter: brightness(1.05);
        color: #03191b;
    }

    .offer-btn.secondary {
        background-image: linear-gradient(180deg,#ffffff,#eaf6f5);
        border-color: rgba(255,255,255,.6);
        color: #0b2430;
        box-shadow: none;
    }

/* inactive appearance tweaks */
.offer-card.is-inactive .offer-eyebrow {
    background: rgba(128,128,128,.15);
    border-color: rgba(128,128,128,.35);
    color: #e0e0e0;
}

.offer-card.is-inactive .offer-btn {
    filter: grayscale(.2) brightness(.9);
    box-shadow: none;
}

.offer-card.is-inactive .offer-desc {
    color: #cfd6da;
}

.offer-card.is-inactive .offer-chip {
    filter: grayscale(.08);
}

/* soft decorative orbs */
.offer-orb, .offer-orb2 {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: .22;
    pointer-events: none;
}

.offer-orb {
    width: 220px;
    height: 220px;
    right: -40px;
    top: -40px;
    background: radial-gradient(circle at 30% 30%, var(--offer-teal), transparent 60%);
}

.offer-orb2 {
    width: 200px;
    height: 200px;
    left: -30px;
    bottom: -30px;
    background: radial-gradient(circle at 70% 70%, var(--offer-rose), transparent 60%);
}