/* ============================================
   PRICING PAGE — pricing.php
   ============================================ */

/* ── Hero ── */
.pricing-hero { padding: 50px 0 36px; }
.pricing-hero-badge {
    display: inline-block;
    background: #003d6a; color: white;
    font-size: 0.85rem; font-weight: 700;
    padding: 8px 20px; border-radius: 20px; margin-bottom: 12px;
}
.pricing-hero h1 { color: #003d6a; font-size: 2rem; font-weight: 800; }
.pricing-hero .sub  { color: #4b5563; font-size: 1rem; max-width: 580px; margin: 0 auto 8px; }
.pricing-hero .note { font-size: 0.78rem; color: #9ca3af; margin-bottom: 16px; }
.pricing-hero-btns  { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ── Section wrappers ── */
.pricing-section-gray  { padding: 50px 0; background: #f9fafb; }
.pricing-section-white { padding: 50px 0; background: white; }

/* ── Billing Toggle ── */
.billing-toggle-wrap {
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin-bottom: 32px; flex-wrap: wrap;
}
.billing-lbl        { font-size: 0.95rem; }
.billing-lbl-active { font-weight: 700; color: #1f2937; }
.billing-lbl-muted  { font-weight: 600; color: #6b7280; }
.billing-toggle-btn {
    position: relative; width: 52px; height: 28px;
    background: #c1272d; border: none; border-radius: 20px;
    cursor: pointer; transition: background 0.3s; flex-shrink: 0;
}
.billing-toggle-knob {
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; background: white;
    border-radius: 50%; transition: transform 0.3s; display: block;
}
.billing-yearly-badge {
    background: #fef3c7; color: #92400e;
    font-size: 0.75rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px; display: none;
}

/* ── Free plan card overrides ── */
.pricing-card--free          { border-color: #10b981; }
.pricing-card--free h3       { color: #10b981; }
.pricing-card--free .amount  { color: #10b981; }
.free-always-badge {
    background: #d1fae5; color: #065f46;
    font-size: 0.72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 20px;
    display: inline-block; margin: 4px 0 16px;
}
.free-plan-label { font-size: 0.75rem; font-weight: 700; color: #10b981; text-align: center; margin-bottom: 8px; }

/* ── Paid plan label ── */
.plan-label-dynamic { font-size: 0.75rem; font-weight: 700; text-align: center; margin-bottom: 8px; }
.plan-label-green2  { color: #10b981; }
.plan-label-amber   { color: #f59e0b; }
.plan-label-purple2 { color: #7c3aed; }

/* ── Monthly price block ── */
.price-block-monthly .billing-badge {
    display: inline-block; background: #f3f4f6; border-radius: 8px;
    padding: 4px 10px; font-size: 0.72rem; font-weight: 700;
    color: #6b7280; margin-bottom: 8px;
}
.price-block-monthly .price-row,
.price-block-yearly  .price-row {
    display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.price-block-monthly .price-original { font-size: 0.9rem; color: #9ca3af; text-decoration: line-through; }
.price-block-monthly .price-main     { font-size: 1.8rem; font-weight: 800; color: #1f2937; }
.price-block-monthly .price-period   { font-size: 0.85rem; color: #6b7280; }
.price-block-monthly .price-note     { font-size: 0.75rem; color: #6b7280; margin-top: 2px; }

/* ── Yearly price block ── */
.price-block-yearly .billing-badge {
    display: inline-block;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 8px; padding: 4px 10px;
    font-size: 0.72rem; font-weight: 700; color: #92400e; margin-bottom: 8px;
}
.price-block-yearly .price-original { font-size: 0.9rem; color: #9ca3af; text-decoration: line-through; }
.price-block-yearly .price-main     { font-size: 1.8rem; font-weight: 800; color: #c1272d; }
.price-block-yearly .price-period   { font-size: 0.85rem; color: #6b7280; }
.price-block-yearly .price-note     { font-size: 0.78rem; color: #6b7280; margin-top: 2px; }
.price-block-yearly .savings-row    { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.badge-save-pct  { background: #fee2e2; color: #c1272d; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.badge-months-fr { background: #d1fae5; color: #065f46; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }

/* ── Urgency strip ── */
.urgency-strip {
    display: inline-block; background: #fef2f2;
    border: 1px solid #fecaca; border-radius: 8px; padding: 8px 20px;
}
.urgency-strip span { font-size: 0.82rem; font-weight: 600; color: #991b1b; }
.urgency-wrap { text-align: center; margin-top: 10px; }

/* ── Competitor comparison table ── */
.comp-table-wrap { overflow-x: auto; scroll-behavior: smooth; }
.comp-table {
    width: 100%; min-width: 560px; border-collapse: collapse;
    background: white; border-radius: 12px; overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.comp-table thead tr { background: linear-gradient(135deg, #003d6a, #005a9c); color: white; }
.comp-table th       { padding: 12px 14px; font-size: 0.82rem; }
.comp-table th:first-child { text-align: left; min-width: 130px; }
.comp-table th.plus1-col   { text-align: center; background: #c1272d; min-width: 90px; }
.comp-table th.comp-col    { text-align: center; min-width: 80px; }
.comp-table td             { padding: 10px 14px; font-size: 0.82rem; border-bottom: 1px solid #e5e7eb; }
.comp-table td:first-child { font-weight: 600; color: #1f2937; }
.comp-table td.plus1-col   { text-align: center; font-weight: 700; color: #c1272d; background: rgba(193,39,45,0.04); }
.comp-table td.comp-col    { text-align: center; color: #6b7280; }
.comp-table tr.row-even    { background: #ffffff; }
.comp-table tr.row-odd     { background: #f9fafb; }
.comp-table-cta            { text-align: center; margin-top: 28px; }
.comp-table-cta p          { font-size: 0.88rem; color: #6b7280; margin-bottom: 16px; }

/* ── Free trial banner ── */
.trial-banner-perks { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.trial-perk {
    background: white; border: 1px solid #e5e7eb;
    border-radius: 20px; padding: 5px 14px;
    font-size: 0.82rem; color: #1f2937;
}
.trial-perk i { color: #10b981; margin-right: 5px; }
.trial-cta-btn { font-size: 1rem; padding: 14px 32px; display: inline-block; width: 100%; max-width: 260px; }
.trial-cta-note { font-size: 0.78rem; color: #9ca3af; margin-top: 8px; }

/* ── Comparison table: Free Trial / After Trial rows ── */
.free-always-text  { color: #10b981; font-weight: 600; }
.after-trial-text  { text-align: center; color: #28a745; font-weight: 600; }

/* ── Mobile ── */
@media (max-width: 767px) {
    .pricing-hero        { padding: 28px 0 20px; }
    .pricing-hero h1     { font-size: 1.5rem; }
    .pricing-hero-btns   { flex-direction: column; }
    .pricing-hero-btns .btn-primary,
    .pricing-hero-btns .btn-secondary { width: 100%; justify-content: center; }
    .billing-toggle-wrap { gap: 10px; }
    .trial-cta-btn       { max-width: 100%; }
}