/*
 * Pricing cards (partials/pricing-cards.php) and plan buttons (.btn-plan), for
 * mynestor.php, shop.php and order.php. Tokens (--primary, --radius...) come from the
 * theme stylesheet (css/theme-*.css) loaded first.
 */
/* ── PRICING ── */
.pricing-grid {
    display: grid;
    /* min(): never wider than the screen on the smallest phones (320px minus margins). */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 28px;
    max-width: 880px;
    margin: 0 auto;
}
.pricing-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 36px;
    text-align: center;
    position: relative;
    background: var(--white);
}
.pricing-card.featured {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary);
}
.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: var(--white);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 5px 18px;
    border-radius: 50px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
/* "PROMOTION : valable jusqu'au ...": only the label is in capitals, the date stays readable. */
.pricing-badge-label { text-transform: uppercase; }
.pricing-name { font-size: 1rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
.pricing-price { font-size: 3rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.pricing-price small { font-size: 1rem; font-weight: 500; color: var(--muted); }
/* "15€  /mois": the currency sticks to the number, the unit stands apart from it.
   Only "15€" is centered under the plan name: .pricing-amount is the centered box, and the
   unit hangs outside it on the right (absolute), so its width does not shift the number
   to the left. bottom puts the unit's baseline on the number's (line-height 1). */
.pricing-price .pricing-amount { position: relative; display: inline-block; }
.pricing-price .pricing-currency { margin-left: 2px; }
.pricing-price .pricing-unit { position: absolute; left: 100%; bottom: 0.25rem; margin-left: 10px; white-space: nowrap; }
.pricing-period { color: var(--muted); font-size: 0.9rem; margin-top: 4px; margin-bottom: 28px; }
.pricing-features { list-style: none; text-align: left; margin-bottom: 32px; display: flex; flex-direction: column; gap: 12px; }
.pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; }
.pricing-features li::before { content: '✓'; color: var(--success); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.btn-plan {
    display: block;
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: .2s;
}
.btn-plan.primary { background: var(--primary); color: var(--white); }
.btn-plan.primary:hover { background: var(--primary-dark); }
.btn-plan.outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-plan.outline:hover { background: var(--primary-light); }

/* Phones: the single pill must fit within the card; on the smallest ones it may wrap onto two
   lines, and the card makes room for it above the plan name. */
@media (max-width: 480px) {
    .pricing-badge { font-size: 0.7rem; padding: 4px 12px; letter-spacing: 0.3px; }
}
@media (max-width: 360px) {
    .pricing-badge { white-space: normal; width: max-content; max-width: 90%; text-align: center; border-radius: 14px; }
    .pricing-card.featured { padding-top: 52px; }
}