/* Promo tile — MobileX plan-selection page (Web/Views/Activate/Carrier/MobileXPlans.cshtml).

   A plan that has multi-month promo variants (SpiffModel.PromoVariants non-empty)
   renders with a green border + SAVE % ribbon + a single Bootstrap dropdown
   "Activate" button. The whole button opens a floating menu: the first row activates
   the base monthly plan (1 month), and each remaining row is a multi-month variant
   linking to that variant's own activation URL. There is no default-activate half, so
   a dealer always sees every term before committing. Non-promo tiles get none of this
   and must render exactly as before — every rule here is gated behind .has-promo or a
   promo-specific class so it can't touch a plain tile.

   This stylesheet is loaded site-wide (referenced from _Layout.cshtml right
   after pricing-panel.css), so EVERY class is namespaced. Never reuse Bootstrap
   grid/component names (.row/.col/.card/.btn) here — repo hard rule. The dropdown
   reuses Bootstrap's .btn-group/.dropdown-menu structural classes only for the
   dropdown JS contract; all visual styling hangs off .activate-dropdown, .promo-menu,
   and friends.

   Green palette matches receipt.css: #16a34a border, #166534 text, #dcfce7 pill. */

/* ── Promo tile shell ──
   position:relative anchors the absolute .promo-ribbon. The 2px green ring is
   drawn with box-shadow (not a wider border) so the tile's box geometry — and
   therefore the grid row height — is identical to a non-promo tile; only the
   existing 1px .border changes color.

   overflow:visible overrides the base .pricing-box (which is overflow:hidden). That
   base clip is what forced the Activate dropdown to open UPWARD: Bootstrap's Popper
   treats the nearest clipping ancestor as a boundary, so a downward menu would be cut
   off by the tile edge and it flipped up over the tile's own content. Un-clipping lets
   the menu open downward (its natural placement, floating over the row below); Popper
   still flips it up only when the tile is genuinely at the viewport bottom. Safe here —
   the tile's centered content never bleeds past the rounded corners, and the ribbon
   (absolute, in-bounds) and box-shadow ring (outside the box) are unaffected. */
.pricing-box.has-promo {
    position: relative;
    overflow: visible;
    border-color: #16a34a !important;
    box-shadow: 0 0 0 2px #16a34a;
}

/* ── SAVE % ribbon ──
   Small green tab pinned to the top-right corner of the tile, carrying the best
   multi-month savings ("SAVE 33%") so the promo value is visible without opening the
   menu. Absolute-positioned, so it costs zero layout height — promo tiles stay the
   same height as non-promo neighbours and the grid row never reflows. white-space
   keeps it on one line so it can't wrap down over the plan title. */
.pricing-box.has-promo .promo-ribbon {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
    background: #16a34a;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* ── Activate dropdown ──
   A single dark button; the whole control opens the multi-term menu (no split, no
   default-activate half) so a dealer always sees every term before committing. The
   .btn-group wrapper exists only to give Bootstrap's dropdown JS its positioning
   context; the caret triangle comes from Bootstrap's .dropdown-toggle::after. The
   button keeps the Canvas .button styling so it matches a non-promo tile's Activate
   button in size and colour (including the theme-accent hover every dark button gets). */
.activate-dropdown.btn-group {
    vertical-align: middle;
}

/* ── Promo dropdown ──
   White floating menu. Bootstrap's .dropdown-menu provides position:absolute +
   the show/hide toggle, and .dropdown-menu-end right-aligns it — so the menu
   floats above the grid and never changes card height. Each item is a flex row:
   term on the left, price + badge grouped on the right. */
.promo-menu.dropdown-menu {
    min-width: 14rem;
    padding: 0.3rem 0;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.promo-menu .promo-menu-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 1rem;
    padding: 0.45rem 0.9rem;
    white-space: nowrap;
}

.promo-menu .promo-menu-item .promo-term {
    font-weight: 700;
    color: #111827;
}

.promo-menu .promo-menu-item .promo-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
}

.promo-menu .promo-menu-item .promo-price {
    color: #111827;
    font-variant-numeric: tabular-nums;
}

.promo-menu .promo-menu-item .promo-save {
    background: #dcfce7;
    color: #166534;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
}

/* On hover/focus the green save pill stays legible against Bootstrap's default
   light-blue .dropdown-item:hover background. */
.promo-menu .promo-menu-item:hover .promo-save,
.promo-menu .promo-menu-item:focus .promo-save {
    background: #bbf7d0;
}

/* ── Baseline (1-month) row ──
   The first menu row is the base monthly plan — the reference point for the savings
   below it. A muted grey "base" pill (not green) reads as the anchor rather than a
   promo, so the eye still lands on the green save badges. */
.promo-menu .promo-menu-item.is-base .promo-term {
    color: #374151;
    font-weight: 600;
}

.promo-menu .promo-menu-item .promo-base {
    background: #eef1f4;
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
}