/* ==========================================================================
   AllNaijaMarket Announcements & Promo Cards
   Independent public stylesheet so homepage/dashboard cards are readable
   whether or not adverts.css is loaded.
   ========================================================================== */

.anm-announcement-pane,
.anm-dashboard-announcements{
    --anm-ann-bg:#ffffff;
    --anm-ann-bg-2:#f5faf7;
    --anm-ann-text:#10251c;
    --anm-ann-muted:#52675e;
    --anm-ann-line:#cfe0d8;
    --anm-ann-accent:#087443;
    --anm-ann-accent-soft:#e5f7ed;
    --anm-ann-cta:#087443;
    --anm-ann-cta-text:#ffffff;
    --anm-ann-shadow:0 15px 38px rgba(15,23,42,.10);
    color-scheme:light;
}

@media (prefers-color-scheme:dark){
    .anm-announcement-pane,
    .anm-dashboard-announcements{
        --anm-ann-bg:#0b1d18;
        --anm-ann-bg-2:#102921;
        --anm-ann-text:#f4fbf7;
        --anm-ann-muted:#bfd0c8;
        --anm-ann-line:#2d5143;
        --anm-ann-accent:#55e0aa;
        --anm-ann-accent-soft:#173c2f;
        --anm-ann-cta:#45d49d;
        --anm-ann-cta-text:#05251b;
        --anm-ann-shadow:0 18px 44px rgba(0,0,0,.30);
        color-scheme:dark;
    }
}

/* Manual site-theme hooks. */
html[data-theme="dark"] .anm-announcement-pane,
html[data-theme="dark"] .anm-dashboard-announcements,
body[data-theme="dark"] .anm-announcement-pane,
body[data-theme="dark"] .anm-dashboard-announcements,
body.dark-mode .anm-announcement-pane,
body.dark-mode .anm-dashboard-announcements{
    --anm-ann-bg:#0b1d18;
    --anm-ann-bg-2:#102921;
    --anm-ann-text:#f4fbf7;
    --anm-ann-muted:#bfd0c8;
    --anm-ann-line:#2d5143;
    --anm-ann-accent:#55e0aa;
    --anm-ann-accent-soft:#173c2f;
    --anm-ann-cta:#45d49d;
    --anm-ann-cta-text:#05251b;
    --anm-ann-shadow:0 18px 44px rgba(0,0,0,.30);
    color-scheme:dark;
}

html[data-theme="light"] .anm-announcement-pane,
html[data-theme="light"] .anm-dashboard-announcements,
body[data-theme="light"] .anm-announcement-pane,
body[data-theme="light"] .anm-dashboard-announcements,
body.light-mode .anm-announcement-pane,
body.light-mode .anm-dashboard-announcements{
    --anm-ann-bg:#ffffff;
    --anm-ann-bg-2:#f5faf7;
    --anm-ann-text:#10251c;
    --anm-ann-muted:#52675e;
    --anm-ann-line:#cfe0d8;
    --anm-ann-accent:#087443;
    --anm-ann-accent-soft:#e5f7ed;
    --anm-ann-cta:#087443;
    --anm-ann-cta-text:#ffffff;
    --anm-ann-shadow:0 15px 38px rgba(15,23,42,.10);
    color-scheme:light;
}

.anm-announcement-pane{
    width:min(1180px,calc(100% - 20px));
    margin:18px auto;
}
.anm-dashboard-announcements{
    display:grid;
    gap:12px;
    margin:0 0 18px;
}
.anm-promo-card{
    --anm-ann-type:#087443;
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(220px,.65fr);
    align-items:stretch;
    gap:18px;
    min-width:0;
    overflow:hidden;
    padding:20px;
    border:1px solid var(--anm-ann-line);
    border-left:5px solid var(--anm-ann-type);
    border-radius:22px;
    background:
        radial-gradient(circle at 92% 10%,color-mix(in srgb,var(--anm-ann-type) 12%,transparent),transparent 32%),
        linear-gradient(145deg,var(--anm-ann-bg),var(--anm-ann-bg-2));
    color:var(--anm-ann-text);
    box-shadow:var(--anm-ann-shadow);
}
.anm-promo-card--promo{--anm-ann-type:#65a30d}
.anm-promo-card--price_change{--anm-ann-type:#d97706}
.anm-promo-card--permanent_change{--anm-ann-type:#0f766e}
.anm-promo-card--policy{--anm-ann-type:#2563eb}
.anm-promo-card--feature{--anm-ann-type:#7c3aed}
.anm-promo-card--important{--anm-ann-type:#dc2626}

.anm-promo-card__copy{
    position:relative;
    z-index:2;
    min-width:0;
    align-self:center;
}
.anm-promo-card__badge{
    display:inline-flex;
    align-items:center;
    max-width:100%;
    padding:6px 10px;
    border:1px solid color-mix(in srgb,var(--anm-ann-type) 34%,var(--anm-ann-line));
    border-radius:999px;
    background:color-mix(in srgb,var(--anm-ann-type) 10%,var(--anm-ann-bg));
    color:var(--anm-ann-type);
    font-size:10px;
    font-weight:950;
    letter-spacing:.075em;
    text-transform:uppercase;
}
.anm-promo-card h2{
    margin:11px 0 7px;
    color:var(--anm-ann-text);
    font-size:clamp(1.35rem,3vw,2.25rem);
    line-height:1.08;
    overflow-wrap:anywhere;
}
.anm-promo-card p{
    margin:0;
    color:var(--anm-ann-muted);
    font-size:14px;
    line-height:1.65;
    overflow-wrap:anywhere;
}
.anm-promo-card__timing{
    display:inline-flex;
    margin-top:12px;
    padding:6px 10px;
    border:1px solid var(--anm-ann-line);
    border-radius:999px;
    background:var(--anm-ann-accent-soft);
    color:var(--anm-ann-muted);
    font-size:10px;
    font-weight:850;
}
.anm-promo-card__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    margin-top:15px;
    padding:10px 15px;
    border:1px solid color-mix(in srgb,var(--anm-ann-cta) 78%,#0000);
    border-radius:11px;
    background:var(--anm-ann-cta);
    color:var(--anm-ann-cta-text)!important;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 8px 19px color-mix(in srgb,var(--anm-ann-cta) 18%,transparent);
}
.anm-promo-card__cta:hover{filter:brightness(1.05)}
.anm-promo-card__media{
    position:relative;
    min-width:0;
    min-height:180px;
    overflow:hidden;
    border:1px solid var(--anm-ann-line);
    border-radius:16px;
    background:var(--anm-ann-bg-2);
}
.anm-promo-card__media img{
    display:block;
    width:100%;
    height:100%;
    min-height:180px;
    max-height:330px;
    object-fit:cover;
}
.anm-promo-card__mark{
    display:grid;
    place-items:center;
    min-height:170px;
    border:1px solid var(--anm-ann-line);
    border-radius:16px;
    background:color-mix(in srgb,var(--anm-ann-type) 8%,var(--anm-ann-bg-2));
    color:color-mix(in srgb,var(--anm-ann-type) 42%,transparent);
    font-size:clamp(4rem,9vw,7rem);
    font-weight:950;
    line-height:1;
}

/* Popup */
.anm-announcement-popup{
    --anm-ann-bg:#ffffff;
    --anm-ann-bg-2:#f5faf7;
    --anm-ann-text:#10251c;
    --anm-ann-muted:#52675e;
    --anm-ann-line:#cfe0d8;
    --anm-ann-accent-soft:#e5f7ed;
    --anm-ann-cta:#087443;
    --anm-ann-cta-text:#ffffff;
    position:fixed;
    inset:0;
    z-index:2147481000;
    display:grid;
    place-items:center;
    padding:16px;
    color-scheme:light;
}
@media(prefers-color-scheme:dark){
    .anm-announcement-popup{
        --anm-ann-bg:#0b1d18;
        --anm-ann-bg-2:#102921;
        --anm-ann-text:#f4fbf7;
        --anm-ann-muted:#bfd0c8;
        --anm-ann-line:#2d5143;
        --anm-ann-accent-soft:#173c2f;
        --anm-ann-cta:#45d49d;
        --anm-ann-cta-text:#05251b;
        color-scheme:dark;
    }
}
html[data-theme="dark"] .anm-announcement-popup,
body[data-theme="dark"] .anm-announcement-popup,
body.dark-mode .anm-announcement-popup{
    --anm-ann-bg:#0b1d18;
    --anm-ann-bg-2:#102921;
    --anm-ann-text:#f4fbf7;
    --anm-ann-muted:#bfd0c8;
    --anm-ann-line:#2d5143;
    --anm-ann-accent-soft:#173c2f;
    --anm-ann-cta:#45d49d;
    --anm-ann-cta-text:#05251b;
    color-scheme:dark;
}
.anm-announcement-popup__backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,6,23,.73);
    backdrop-filter:blur(7px);
}
.anm-announcement-popup__card{
    position:relative;
    z-index:1;
    width:min(650px,100%);
    max-height:min(88vh,780px);
    overflow:auto;
    padding:24px;
    border:1px solid var(--anm-ann-line);
    border-radius:22px;
    background:linear-gradient(145deg,var(--anm-ann-bg),var(--anm-ann-bg-2));
    color:var(--anm-ann-text);
    box-shadow:0 30px 90px rgba(0,0,0,.42);
}
.anm-announcement-popup__card h2{
    margin:12px 42px 8px 0;
    color:var(--anm-ann-text);
    font-size:clamp(1.55rem,4vw,2.45rem);
}
.anm-announcement-popup__card p{
    margin:0;
    color:var(--anm-ann-muted);
    line-height:1.67;
}
.anm-announcement-popup__image{
    display:block;
    width:100%;
    max-height:330px;
    margin:14px 0;
    object-fit:cover;
    border:1px solid var(--anm-ann-line);
    border-radius:15px;
    background:var(--anm-ann-bg-2);
}
.anm-announcement-popup__close{
    position:absolute;
    top:11px;
    right:12px;
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    padding:0;
    border:1px solid var(--anm-ann-line);
    border-radius:50%;
    background:var(--anm-ann-bg-2);
    color:var(--anm-ann-text);
    font-size:24px;
    line-height:1;
    cursor:pointer;
}
.anm-announcement-open{overflow:hidden}

@media(max-width:680px){
    .anm-announcement-pane{width:calc(100% - 12px);margin:12px auto}
    .anm-dashboard-announcements{margin-bottom:12px}
    .anm-promo-card{
        grid-template-columns:1fr;
        gap:13px;
        padding:15px;
        border-radius:17px;
        border-left-width:4px;
    }
    .anm-promo-card__media{order:-1;min-height:150px}
    .anm-promo-card__media img{min-height:150px;max-height:230px}
    .anm-promo-card__mark{display:none}
    .anm-promo-card h2{font-size:1.35rem}
    .anm-promo-card p{font-size:13px}
    .anm-promo-card__cta{width:100%}
    .anm-announcement-popup__card{padding:20px 15px 16px;border-radius:18px}
}
