/* ==========================================================================
   Codeagle - LEAD-GENERATION TOOLS
   Announcement bar, cost calculator and exit-intent pop-up.
   Colours only from the theme tokens (theme.css); no colour codes here.
   ========================================================================== */

/* 1. Announcement bar (above the top bar) ------------------------------------------- */
.announcement-bar { position: relative; z-index: 1031; font-size: .9rem; }
.announcement-bar[hidden] { display: none; }
.announcement-bar--brand { background: var(--ce-primary); color: var(--ce-on-dark); }
.announcement-bar--accent { background: var(--ce-accent); color: var(--ce-on-accent); }
.announcement-bar--dark { background: var(--ce-dark); color: var(--ce-on-dark); }

.announcement-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem 1rem;
    min-height: 44px;
    padding-block: .45rem;
    padding-right: 3rem;
    text-align: center;
}

.announcement-bar__text { margin: 0; }
.announcement-bar a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.announcement-bar a:hover { color: inherit; opacity: .85; }

.announcement-bar .announcement-bar__button {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .8rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.announcement-bar__close {
    position: absolute;
    top: 50%;
    right: .5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: inherit;
    transform: translateY(-50%);
}

.announcement-bar__close:hover { opacity: .8; }
.announcement-bar__close:focus-visible, .announcement-bar a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* 2. Cost calculator ----------------------------------------------------------------- */
.calc-currency { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; margin: -.5rem 0 1.25rem; }
.calc-currency__label { margin-right: .25rem; color: var(--ce-muted); font-size: .85rem; }
.calc-currency .btn { min-width: 4.5rem; }

/* Prices in the cards: only the chosen currency is shown. */
[data-calculator][data-currency="INR"] [data-show-currency="USD"],
[data-calculator][data-currency="USD"] [data-show-currency="INR"] { display: none; }

.calc-card .choice-card__body { align-items: flex-start; padding: .9rem 1rem; }
.calc-card .choice-card__body > i:first-child { margin-top: .1rem; }
.calc-card[hidden] { display: none; }
.calc-card__text { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.calc-card__name { color: var(--ce-heading-color); font-weight: 600; line-height: 1.3; }
.calc-card__desc { color: var(--ce-muted); font-size: .85rem; font-weight: 400; line-height: 1.4; }
.calc-card__price { margin-top: .2rem; color: var(--ce-primary-active); font-size: .8rem; font-weight: 600; }

.calc-card .choice-card__body .calc-card__tick { margin-left: auto; color: var(--ce-primary); font-size: 1.1rem; opacity: 0; transition: opacity .15s ease; }
.calc-card input:checked + .choice-card__body .calc-card__tick { opacity: 1; }

.calc-subgroup { min-width: 0; margin: 1.5rem 0 0; padding: 0; border: 0; }
.calc-subgroup[hidden] { display: none; }
.calc-subgroup__title { float: none; width: auto; margin-bottom: .75rem; font-size: 1rem; font-weight: 600; }

.calc-monthly {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    margin-bottom: .75rem;
    padding: .9rem 1rem;
    border: 2px solid var(--ce-border);
    border-radius: var(--ce-radius-lg);
}

.calc-monthly[hidden] { display: none; }
.calc-monthly > i { color: var(--ce-primary); font-size: 1.25rem; }
.calc-monthly__text { display: flex; flex: 1 1 200px; flex-direction: column; gap: .15rem; }
.calc-monthly__select { width: auto; min-width: 9rem; min-height: 44px; }

.calc-summary__result { margin-bottom: 1rem; padding: 1rem; border-radius: var(--ce-radius); background: var(--ce-primary-subtle); }
.calc-summary__range { color: var(--ce-primary-active); font-family: var(--ce-font-heading); font-size: 1.45rem; font-weight: 700; line-height: 1.25; }
.calc-summary__weeks { margin-top: .25rem; color: var(--ce-muted); font-size: .9rem; }
.calc-summary__list { margin: 0 0 1rem; padding: 0; list-style: none; font-size: .875rem; }
.calc-summary__list li { display: flex; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--ce-border); }
.calc-summary__list li:last-child { border-bottom: 0; }
.calc-summary__list i { color: var(--ce-primary); }
.calc-summary__note { color: var(--ce-muted); font-size: .8rem; }

/* Phones: the estimate stays visible in a bar at the bottom; the floating buttons move up. */
.calc-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1019;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: var(--ce-dark);
    box-shadow: 0 -6px 24px rgba(var(--ce-dark-rgb), .2);
    color: var(--ce-on-dark);
}

.calc-bar[hidden] { display: none; }
.calc-bar__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.calc-bar__label, .calc-bar__weeks { color: var(--ce-on-dark-muted); font-size: .75rem; }
.calc-bar strong { font-size: 1rem; white-space: nowrap; }
.calc-bar .btn { min-height: 44px; }

@media (max-width: 991.98px) {
    body.has-calc-bar { padding-bottom: 4.5rem; }
    body.has-calc-bar .floating-actions { bottom: 5.25rem; }
}

/* 3. Exit-intent pop-up ----------------------------------------------------------------- */
.exit-intent { border: 0; border-radius: var(--ce-radius-lg); text-align: center; }
.exit-intent .modal-body { padding: 2.5rem 2rem 1.5rem; }
.exit-intent__close { position: absolute; top: 1rem; right: 1rem; }

.exit-intent__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: var(--ce-primary-subtle);
    color: var(--ce-primary);
    font-size: 1.75rem;
}

.exit-intent__title { margin-bottom: .5rem; font-size: 1.4rem; font-weight: 700; }
.exit-intent__text { margin-bottom: 1.5rem; color: var(--ce-muted); }
.exit-intent__later { margin-top: .5rem; color: var(--ce-muted); font-size: .875rem; }

/* 4. Reduced motion ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .calc-card .choice-card__body .calc-card__tick { transition: none; }
}