/* L2M Bot landing page — purchase/download section */
.purchase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 480px;   /* single trial-form card — keep it a sensible centered width */
    margin: 0 auto;
    text-align: left;
}

/* Two-card variant: a public direct-download card next to the trial form.
   Wider cap than the single-card .purchase-grid so both sit side by side. */
.purchase-grid-2 {
    max-width: 880px;
    align-items: stretch;
}

/* In the direct-download card the only CTA should sit at the card bottom so it
   lines up with the trial form's button in the card beside it. */
.purchase-grid-2 .card > .btn-primary {
    margin-top: auto;
}

/* .card defaults to cursor: pointer (built for clickable service links).
   These info/form cards aren't links, so restore the default cursor. */
.static-card {
    cursor: default;
}

/* .card defaults to align-items: flex-start (left-aligned, built for service
   links). A "buy now" section reads better as a centered call-to-action. */
.purchase-grid .card {
    align-items: center;
    text-align: center;
}

/* ...except the form and trial note, which need full width and left-aligned
   labels/text to stay readable. */
.purchase-grid .card form,
.purchase-grid .card .trial-note {
    width: 100%;
    text-align: left;
}

.zalo-badge svg {
    display: block;
    border-radius: 14px;
}

/* Zalo CTA button: branded blue, full width, pinned to the bottom of the card
   so it lines up with the trial form's button instead of floating mid-card. */
.btn-zalo {
    width: 100%;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #0068FF;
}

/* Drop btn-primary's gradient sheen overlay so the blue stays clean. */
.btn-zalo::before {
    display: none;
}

.btn-zalo:hover {
    background: #0055d6;
    transform: translateY(-2px);
}

.download-result {
    margin-top: 10px;
}

/* Shown when the backend returns issued:false — character already has a license. */
#l2m-download-used {
    margin-top: 10px;
}

.trial-used-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.25);
    color: #93c5fd;
    font-size: 0.9rem;
    line-height: 1.5;
}

.trial-used-note i {
    margin-top: 3px;
}

.trial-used-note strong {
    color: inherit;
}

.download-result p {
    color: #4ade80;
    margin-bottom: 12px;
}

.trial-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    color: #fbbf24;
    font-size: 0.85rem;
    line-height: 1.5;
}

.trial-note i {
    margin-top: 3px;
}

.trial-note strong {
    color: inherit;
}

/* ── Pricing tiers ───────────────────────────────────────────── */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    max-width: 980px;
    margin: 0 auto;
    align-items: stretch;
}

.price-card {
    align-items: center;
    text-align: center;
    position: relative;
    /* Reserve space at the top on every tier so the "Phổ biến nhất" badge sits
       inside the card (it would be clipped by .card's overflow:hidden if it
       stuck out), and all three tier titles still line up. */
    padding-top: 50px;
}

.price-tier {
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: var(--tier-color, inherit);   /* tier name takes its medal colour */
}

/* Per-tier identity = one CSS variable each. Applied ONLY to the medal badge and
   the tier name, so the dark-blue theme, card background, and price stay intact. */
.tier-bronze { --tier-color: #cd8244; }
.tier-silver { --tier-color: #c4ccd6; }
.tier-gold   { --tier-color: #f2c14e; }

.tier-badge {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    border-radius: 50%;
    font-size: 1.5rem;
    color: var(--tier-color);
    background: rgba(255, 255, 255, 0.04);   /* faint, matches the card surface */
    border: 1px solid var(--tier-color);
    box-shadow: 0 0 18px -6px var(--tier-color);   /* soft metallic glow */
}

.price-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.price-cur {
    font-size: 1.2rem;
    font-weight: 700;
    margin-left: 2px;
}

.price-period {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 6px 0 20px;
}

.price-features {
    width: 100%;
    text-align: left;
    margin: 0;   /* no per-card button below anymore — card padding handles the gap */
}

/* Single shared "buy" CTA under the whole pricing grid (replaces 3 per-card buttons). */
.pricing-cta {
    text-align: center;
    margin-top: 32px;
}

.pricing-cta p {
    color: var(--text-secondary);
    font-size: 1.02rem;
    max-width: 520px;
    margin: 0 auto 16px;
    line-height: 1.6;
}

/* The popular tier stands out with an accent border and a lift. */
.price-card.popular {
    border: 1px solid var(--accent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.popular-badge {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #0a0e1a;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 50px;
    white-space: nowrap;
}

/* ── "Just the beginning" roadmap banner (end of features) ────── */
.roadmap-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 980px;
    margin: 48px auto 0;
    padding: 28px 32px;
    border-radius: 20px;
    background: rgba(99, 102, 241, 0.07);
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.roadmap-icon {
    font-size: 2rem;
    color: var(--accent);
    flex-shrink: 0;
}

.roadmap-text {
    flex: 1;
}

.roadmap-text h3 {
    margin-bottom: 6px;
}

.roadmap-text p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

/* ── Donation banner ─────────────────────────────────────────── */
.donate-banner {
    display: flex;
    align-items: center;
    gap: 24px;
    max-width: 980px;
    margin: 40px auto 0;
    padding: 28px 32px;
    border-radius: 20px;
    background: rgba(244, 63, 94, 0.06);
    border: 1px solid rgba(244, 63, 94, 0.25);
}

.donate-icon {
    font-size: 2rem;
    color: #f43f5e;
    flex-shrink: 0;
}

.donate-text {
    flex: 1;
}

.donate-text h3 {
    margin-bottom: 6px;
}

.donate-text p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.donate-banner .btn-primary {
    flex-shrink: 0;
}

/* ── FAQ closing CTA ─────────────────────────────────────────── */
.faq-cta {
    text-align: center;
    margin-top: 48px;
}

.faq-cta p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0 auto 24px;   /* clear gap between the text and the button */
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .purchase-grid {
        gap: 20px;
    }

    .pricing-grid {
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .donate-banner,
    .roadmap-banner {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
}