/*
 * A creator's code as a personal offer (pages/pricing.blade.php, "A CREATOR'S CODE IS A PERSONAL
 * OFFER"; drawn by public/js/xive-pricing.js applyOffer). NOT BUILT -- linked as-is from the page,
 * like public/css/pricing-notes.css.
 *
 * `.pp-offer-own` is the creator looking at their own code: the same shapes, toned down, because
 * it is a preview of what their viewers get rather than an offer to them.
 */

/* ── The hero line ──────────────────────────────────────────────────────────── */
.pv .pp-offer-hero {
    display: flex; align-items: center; gap: 14px;
    max-width: 560px; margin: 26px auto 0; padding: 12px 18px 12px 12px;
    border-radius: 999px; text-align: left;
    background:
        linear-gradient(var(--pv-glass-hi, rgba(255, 255, 255, .06)), var(--pv-glass-hi, rgba(255, 255, 255, .06))) padding-box,
        var(--pv-brand, linear-gradient(100deg, #ff2d78, #a855f7 55%, #3d7bff)) border-box;
    border: 1px solid transparent;
    box-shadow: 0 10px 40px rgba(168, 85, 247, .22);
    animation: pp-offer-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.pv .pp-offer-hero[hidden] { display: none; }
.pv .pp-offer-hero-text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--pv-ink-2, #d8d2e6); text-wrap: pretty; }
.pv .pp-offer-hero-text strong { color: var(--pv-ink, #fff); font-weight: 700; }

.pv .pp-offer-avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    background: var(--pv-brand, linear-gradient(100deg, #ff2d78, #a855f7 55%, #3d7bff));
    color: #fff; font-weight: 800; font-size: 18px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px rgba(168, 85, 247, .55);
}
.pv .pp-offer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pv .pp-offer-hero.pp-offer-own {
    background: var(--pv-glass-hi, rgba(255, 255, 255, .06));
    border-color: var(--pv-line-2, rgba(255, 255, 255, .14));
    box-shadow: none;
}

/* ── The ribbon on the Pro card ─────────────────────────────────────────────── */
.pv .pp-offer-ribbon {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
    margin: -4px 0 16px; padding: 8px 12px; border-radius: 12px;
    background: linear-gradient(100deg, rgba(255, 45, 120, .16), rgba(168, 85, 247, .16) 55%, rgba(61, 123, 255, .14));
    border: 1px solid var(--pv-accent-line, rgba(168, 85, 247, .32));
    font-size: 13px; line-height: 1.35;
    animation: pp-offer-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
.pv .pp-offer-ribbon[hidden] { display: none; }
.pv .pp-offer-kicker {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 11px;
    color: var(--pv-gold, #f5b544);
}
.pv .pp-offer-kicker svg { width: 14px; height: 14px; }
.pv .pp-offer-who { color: var(--pv-ink-2, #d8d2e6); }
.pv .pp-offer-who strong { color: var(--pv-ink, #fff); font-weight: 700; }

.pv .pp-offer-ribbon.pp-offer-own {
    background: var(--pv-well, rgba(255, 255, 255, .04));
    border-color: var(--pv-line-2, rgba(255, 255, 255, .14));
}
.pv .pp-offer-ribbon.pp-offer-own .pp-offer-kicker { color: var(--pv-accent-hi, #c48bff); }

/* The offer price itself, in the brand gradient, while a code is applied. */
.pv .pp-plan-offer .pp-price {
    background: var(--pv-brand, linear-gradient(100deg, #ff2d78, #a855f7 55%, #3d7bff));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pv .pp-plan-offer .pp-price-was { -webkit-text-fill-color: var(--pv-faint, #6f6880); }
.pv .pp-plan-offer .pp-price-per { -webkit-text-fill-color: var(--pv-muted, #9a93ad); }
.pv .pp-plan-offer { box-shadow: 0 0 0 1px rgba(168, 85, 247, .35), 0 24px 70px rgba(168, 85, 247, .28); }

@keyframes pp-offer-in {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 520px) {
    .pv .pp-offer-hero { border-radius: 18px; align-items: flex-start; padding: 12px 14px; }
    .pv .pp-offer-avatar { width: 38px; height: 38px; font-size: 16px; }
    .pv .pp-offer-hero-text { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .pv .pp-offer-hero, .pv .pp-offer-ribbon { animation: none; }
}