/* intel-upsell.css — "get this Pal / item from US" CTA card on the Intelligence
   wiki (Pal profile + item detail). Shows OUR Premium Coin / Dream Coin offers,
   never an in-game gold price. Reuses the shared intel design tokens (glass +
   gold accent) so it reads as part of the profile, with a warm accent that
   marks it as a store call-to-action without shouting. */

.intel-profile-page .pp-card.pp-upsell,
.intel-profile-page .pp-upsell {
    border: 1px solid var(--gold-light, #e9c46a);
    background:
        linear-gradient(180deg,
            rgba(233, 196, 106, 0.10),
            rgba(233, 196, 106, 0.02));
    box-shadow: 0 0 0 1px rgba(233, 196, 106, 0.08) inset;
}

.pp-upsell-title,
.pp-upsell .pp-card-title { color: var(--gold-light, #e9c46a); }
/* Beats `.intel-profile-page .pp-card-title i` (0,2,1) on SPECIFICITY (0,3,1)
   rather than with !important, so the quiet-state override below can win the
   same way instead of escalating an !important war. */
.intel-profile-page .pp-upsell .pp-upsell-title i { color: var(--gold-light, #e9c46a); }

.pp-upsell-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
}
.pp-upsell-row:first-of-type { border-top: 0; }

.pp-upsell-row-main {
    min-width: 0;          /* allow the sub text to wrap/clamp, never overflow */
    flex: 1 1 16rem;
    overflow: hidden;
}
.pp-upsell-row-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.pp-upsell-row-head i { color: var(--gold-light, #e9c46a); }
.pp-upsell-row-title {
    min-width: 0;               /* a long Pal/kit name must wrap, never blow out */
    font-weight: 700;
    color: var(--text-primary, #f5f5f5);
    overflow-wrap: anywhere;
}
.pp-upsell-row-sub {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text-secondary, #b9b9c3);
    overflow-wrap: anywhere;
}

.pp-upsell-price {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
    color: #1a1408;
    background: var(--gold-light, #e9c46a);
}

.pp-upsell-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    color: #1a1408;
    background: linear-gradient(180deg,
        var(--fire-orange, #f4a261),
        var(--fire-red, #e76f51));
    border: 1px solid var(--gold-light, #e9c46a);
    transition: filter 0.15s ease, transform 0.15s ease;
}
.pp-upsell-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.pp-upsell-cta:focus-visible { outline: 2px solid var(--gold-light, #e9c46a); outline-offset: 2px; }

.pp-upsell-market {
    margin: 0.75rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    font-size: 0.82rem;
    color: var(--text-secondary, #b9b9c3);
}
.pp-upsell-market i { color: var(--gold-light, #e9c46a); margin-right: 0.15rem; }
.pp-upsell-market-link {
    color: var(--gold-light, #e9c46a);
    font-weight: 600;
    text-decoration: none;
}
.pp-upsell-market-link:hover { text-decoration: underline; }

/* ── live rows (intel-upsell.js stage 2) ────────────────────────────────── */

/* Rows container: grid/flex children must never blow out their track. */
.pp-upsell-body {
    min-width: 0;
    overflow: hidden;
}

/* Right-hand action group: Buy button + link-out. Wraps under the copy on
   narrow cards rather than squeezing the headline. */
.pp-upsell-actions {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.pp-upsell-buy {
    flex: 0 0 auto;
    padding: 0.5rem 0.95rem;
    border-radius: 8px;
    font: inherit;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    color: #0f1a10;
    background: linear-gradient(180deg, #6ee7a0, #34b06a);
    border: 1px solid #8ff0bb;
    transition: filter 0.15s ease, transform 0.15s ease;
}
.pp-upsell-buy:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.pp-upsell-buy:focus-visible { outline: 2px solid var(--gold-light, #e9c46a); outline-offset: 2px; }
.pp-upsell-buy:disabled { opacity: 0.6; cursor: progress; }
/* Armed = first tap landed; a second tap commits. Deliberately loud so an
   accidental tap is obvious before the charge happens. */
.pp-upsell-buy.is-armed {
    color: #2a1206;
    background: linear-gradient(180deg, var(--fire-orange, #f4a261), var(--fire-red, #e76f51));
    border-color: var(--gold-light, #e9c46a);
}

/* Secondary link-out sits next to a Buy button — quieter than the solo CTA. */
.pp-upsell-cta.is-secondary {
    color: var(--gold-light, #e9c46a);
    background: transparent;
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.18));
}
.pp-upsell-cta.is-secondary:hover { filter: none; background: rgba(233, 196, 106, 0.10); }

/* Struck-through pre-sale price + sale badge. */
.pp-upsell-was {
    font-size: 0.78rem;
    color: var(--text-secondary, #b9b9c3);
    text-decoration: line-through;
    white-space: nowrap;
}
.pp-upsell-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: #2a1206;
    background: var(--fire-orange, #f4a261);
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pp-upsell-note {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #b9b9c3);
}

/* aria-live feedback for in-page purchases. */
.pp-upsell-status {
    display: none;
    margin: 0.7rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    font-size: 0.82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
    color: var(--text-secondary, #b9b9c3);
}
.pp-upsell-status.is-visible { display: block; }
.pp-upsell-status.is-ok { color: #6ee7a0; }
.pp-upsell-status.is-error { color: var(--fire-red, #e76f51); }
.pp-upsell-status.is-warn { color: var(--gold-light, #e9c46a); }

/* Negative state: nothing we sell, nothing listed. The card sheds its gold
   CTA skin and becomes one quiet line — present, but not shouting. */
.intel-profile-page .pp-card.pp-upsell.pp-upsell-quiet,
.pp-upsell.pp-upsell-quiet {
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    background: transparent;
    box-shadow: none;
}
.pp-upsell.pp-upsell-quiet .pp-upsell-title { color: var(--text-secondary, #b9b9c3); }
.intel-profile-page .pp-upsell.pp-upsell-quiet .pp-upsell-title i {
    color: var(--text-secondary, #b9b9c3);
}
.pp-upsell-empty {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--text-secondary, #b9b9c3);
    overflow-wrap: anywhere;
}
.pp-upsell-empty i { margin-right: 0.3rem; }

@media (max-width: 560px) {
    .pp-upsell-row { align-items: flex-start; }
    .pp-upsell-cta { width: 100%; justify-content: center; }
    /* Full-width stacked controls: a 44px-tall target that cannot be
       mis-tapped into an adjacent row on a phone. */
    .pp-upsell-actions { width: 100%; }
    .pp-upsell-buy {
        flex: 1 1 auto;
        min-height: 44px;
    }
    .pp-upsell-cta.is-secondary { min-height: 44px; }
}