/* In-app upsells: banners, one-time popups, "while you wait" slot, credits-page offer card */

.upsell-banner {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    background: var(--color-primary-light);
    border: 1px solid rgba(var(--color-primary-rgb), .25);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    position: relative;
    padding-right: 40px;   /* room for the close button */
}
.upsell-banner--offer {
    background: linear-gradient(90deg, var(--color-primary-light), #fbf1e6);
}
.upsell-banner__text { flex: 1 1 260px; }
.upsell-banner__text s { color: var(--color-text-muted); }
.upsell-banner [data-countdown] { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
.upsell-banner__close {
    position: absolute; top: 6px; right: 8px;
    background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
    color: var(--color-text-muted); padding: 0 var(--space-xs);
}
.upsell-banner__close:hover { color: var(--color-text); }

/* Modal */
.upsell-modal {
    position: fixed; inset: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-md);
    opacity: 0; pointer-events: none; transition: opacity var(--transition-base);
}
.upsell-modal.is-open { opacity: 1; pointer-events: auto; }
.upsell-modal__backdrop { position: absolute; inset: 0; background: rgba(43, 36, 34, .5); }
.upsell-modal__card {
    position: relative; width: 100%; max-width: 440px;
    background: var(--color-surface); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl); padding: var(--space-xl) var(--space-lg) var(--space-lg);
    text-align: center; max-height: calc(100vh - 2 * var(--space-md)); overflow-y: auto;
}
.upsell-modal__x {
    position: absolute; top: 10px; right: 12px; background: none; border: 0;
    font-size: 24px; line-height: 1; color: var(--color-text-muted); cursor: pointer;
}
.upsell-modal__title { font-family: var(--font-heading); font-size: var(--font-size-2xl); margin-bottom: var(--space-sm); }
.upsell-modal__lead { color: var(--color-text-secondary); margin-bottom: var(--space-md); }
.upsell-modal__card p { margin-bottom: var(--space-sm); }
.upsell-modal__deal {
    display: flex; flex-direction: column; gap: 4px; align-items: center;
    background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-md); margin: var(--space-md) 0 0;
}
.upsell-modal__credits { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); }
.upsell-modal__price { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.upsell-modal__price s { color: var(--color-text-muted); font-weight: var(--font-weight-normal); margin-right: 6px; }
.upsell-modal__note { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.upsell-modal__note [data-countdown] { font-variant-numeric: tabular-nums; }
.upsell-modal__later {
    background: none; border: 0; cursor: pointer; margin-top: var(--space-sm);
    color: var(--color-text-muted); font-size: var(--font-size-sm); text-decoration: underline;
}

/* "While you wait" slot */
.upsell-wait {
    position: relative; max-width: 460px; margin: var(--space-xl) auto 0;
    display: flex; gap: var(--space-md); align-items: center; text-align: left;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-md);
}
.upsell-wait__icon { font-size: 28px; flex: none; }
.upsell-wait__body { flex: 1; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.upsell-wait__body strong { display: block; color: var(--color-text); font-size: var(--font-size-base); margin-bottom: 2px; }
.upsell-wait__body a { font-weight: var(--font-weight-semibold); }
.upsell-wait__close {
    position: absolute; top: 4px; right: 6px; z-index: 2; background: none; border: 0;
    color: var(--color-text-muted); cursor: pointer; font-size: 20px; line-height: 1; padding: 4px 6px;
}
.upsell-wait__close:hover { color: var(--color-text); }

/* Book / prompts: tinted card + real button; the button's ::after makes the whole card a link */
.upsell-wait--product {
    border-color: rgba(var(--color-primary-rgb), .35);
    background: linear-gradient(90deg, var(--color-surface), var(--color-primary-light));
    padding-right: var(--space-lg);   /* room for the close button */
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.upsell-wait--product:hover,
.upsell-wait--product:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.upsell-wait--product:hover { transform: translateY(-1px); }
.upsell-wait__eyebrow {
    display: block; color: var(--color-primary); font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: .06em; font-size: var(--font-size-xs); margin-bottom: 2px;
}
.upsell-wait__text { display: block; }
.upsell-wait__body .upsell-wait__cta {
    margin-top: var(--space-sm); white-space: normal; text-align: left; color: #fff;
    /* soft light sweep across the button every few seconds */
    background-image: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .3) 50%, transparent 60%);
    background-size: 250% 100%; background-repeat: no-repeat; background-position: 100% 0;
    animation: upsell-wait-shine 5s ease-in-out 1.5s infinite;
}
.upsell-wait--product:hover .upsell-wait__cta { background: var(--color-primary-dark); animation: none; }
.upsell-wait__cta::after { content: ''; position: absolute; inset: 0; }
@keyframes upsell-wait-shine {
    0%        { background-position: 100% 0; }
    25%, 100% { background-position: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
    .upsell-wait__body .upsell-wait__cta { animation: none; }
}

/* Credits page: special offer + Turbo status */
.credit-offer {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
    border: 2px solid var(--color-primary); border-radius: var(--radius-xl);
    background: linear-gradient(90deg, var(--color-primary-light), #fbf1e6);
    padding: var(--space-lg); margin: var(--space-lg) 0 var(--space-xl);
}
.credit-offer__text { flex: 1 1 280px; }
.credit-offer__eyebrow { color: var(--color-primary); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: .06em; font-size: var(--font-size-xs); }
.credit-offer__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); margin: 4px 0; }
.credit-offer__title s { color: var(--color-text-muted); font-weight: var(--font-weight-normal); }
.credit-offer [data-countdown] { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); }
.credits-refill-note { color: rgba(255, 255, 255, .88); font-size: var(--font-size-sm); margin-top: var(--space-sm); }
.turbo-status {
    display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-sm);
    background: var(--color-secondary-light); color: var(--color-secondary-dark);
    border-radius: var(--radius-full); padding: 4px 12px; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
}

@media (max-width: 575px) {
    .credit-offer { padding: var(--space-md) var(--space-lg); }
    .credit-offer .btn { width: 100%; }
    .upsell-modal__card { padding: var(--space-lg) var(--space-md) var(--space-md); }
    .upsell-modal__title { font-size: var(--font-size-xl); }
}

/* Admin preview strip (upsell-preview.php, credits.php?preview=…) */
.upsell-preview-bar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm);
    background: var(--color-text); color: #fff; border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-lg); font-size: var(--font-size-sm);
}
.upsell-preview-bar span { opacity: .75; }
.upsell-preview-bar a { color: var(--color-primary-light); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.upsell-preview-list { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.upsell-preview-list a {
    display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg); color: var(--color-text); text-decoration: none;
}
.upsell-preview-list a:hover { border-color: var(--color-primary); }
.upsell-preview-list strong { display: block; margin-bottom: 2px; }
.upsell-preview-list small { color: var(--color-text-secondary); }
.upsell-preview-pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.upsell-preview-pills a {
    border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 12px;
    font-size: var(--font-size-sm); color: var(--color-text-secondary); text-decoration: none; background: var(--color-surface);
}
.upsell-preview-pills a.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }

/* Product images in the "while you wait" slot */
.upsell-wait__img { display: block; width: 120px; height: auto; border-radius: var(--radius-md); }
@media (max-width: 575px) {
    .upsell-wait__img { width: 92px; }
}