/* Packages / Pricing styles
   Designed to visually match the landing page language (see invoices/css/styles_landing_page.css).
   Scoped to plan-* classes to avoid unintended global changes.
*/

:root{
    /* IMPORTANT: do not override the landing page's global --qs-* tokens.
       Keep all fallbacks plan-scoped to avoid affecting other pages.
    */
    --plan-slate-900: var(--qs-slate-900, #0f172a);
    --plan-indigo-900: var(--qs-indigo-900, #1e3a8a);
    --plan-warning: var(--qs-warning, #f59e0b);

    --plan-border: rgba(15,23,42,.12);
    --plan-surface: rgba(255,255,255,.78);
    --plan-shadow: 0 14px 42px -26px rgba(2,6,23,.38);
}

.plan-section{
    padding: 1rem 0;
}

.plan-section-inner{
    padding: 1.25rem 0;
}

/* Backward-compatible: if any page still uses plan-section-bg, keep it neutral (no “base card”). */
.plan-section-bg{
    padding: 1.25rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}

.plan-section-bg::before{ display: none; }

.plan-hero{
    max-width: 900px;
    margin-left:auto;
    margin-right:auto;
}

.plan-eyebrow{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(15,23,42,.10);
    color: rgba(15,23,42,.78);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .72rem;
    margin-bottom: .75rem;
}

.plan-hero-heading{
    color: var(--plan-slate-900);
    font-size: clamp(1.7rem, 1.1rem + 1.4vw, 2.35rem);
    font-weight: 800;
    letter-spacing: -0.015em;
}

.plan-hero-copy{
    color: rgba(15,23,42,.72);
    font-size: 1.05rem;
}

.plan-offer-toggle{
    max-width: calc(100% - 10cm);
    border: 1px solid #f59f00;
    border-radius: .75rem;
    overflow: hidden;
}

.plan-offer-toggle .plan-offer-btn{
    border: 0;
    color: #5c3b00;
    background-color: transparent;
}

.plan-offer-toggle .plan-offer-btn + .plan-offer-btn{
    border-left: 1px solid rgba(245, 159, 0, 0.6);
}

.plan-offer-toggle .btn-check:checked + .plan-offer-btn{
    background-color: #f59f00;
    border-color: #f59f00;
    color: #1f1300;
    box-shadow: 0 0 0 0.15rem rgba(245, 159, 0, 0.35);
}

.plan-card{
    position: relative;
    background: var(--plan-surface);
    border: 1px solid var(--plan-border);
    border-radius: 1.25rem;
    box-shadow: 0 10px 26px -20px rgba(2,6,23,.35);
    overflow: visible;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.plan-card__tag{
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.plan-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 20px 52px -34px rgba(2,6,23,.55);
    border-color: rgba(29,78,216,.26);
}

.plan-card--highlight{
    border-width: 3px;
    border-color: rgba(29,78,216,.40) !important;
    box-shadow: 0 22px 60px -40px rgba(29,78,216,.55);
}

/* Standard plan: use orange highlight to improve contrast on blue backgrounds */
.plan-card--standard{
    border-width: 3px;
    border-color: rgba(245,158,11,.65) !important;
    box-shadow: 0 22px 60px -40px rgba(245,158,11,.60);
}

.plan-card--standard:hover{
    border-color: rgba(245,158,11,.85) !important;
}

.plan-badge{
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 10px 22px -16px rgba(2,6,23,.35);
}

.plan-card__subhead{
    text-transform: uppercase;
    letter-spacing: 0.10em;
    font-size: 0.72rem;
    color: rgba(15,23,42,.62);
    font-weight: 800;
}

.plan-card__title{
    color: var(--plan-slate-900);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.plan-card__price{
    font-size: 2.15rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: rgba(15,23,42,.92);
    white-space: nowrap;
}

.plan-card__price-unit,
.plan-card__price-discount-unit{
    margin-left: .15rem;
    font-size: .45em;
    font-weight: 900;
    letter-spacing: 0;
    color: rgba(15,23,42,.55);
    vertical-align: baseline;
    white-space: nowrap;
}

.plan-card__price-discount{
    margin-bottom: .15rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(15,23,42,.92) !important;
}

.plan-card__price-discount-value{
    font-size: 2.1rem;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: rgba(15,23,42,.94);
    line-height: 1.05;
    white-space: nowrap;
}

/* When discount is active, de-emphasize the original price (it is also struck-through via JS). */
.plan-card__price-wrap.plan-price--discount .plan-card__price{
    font-size: 1.15rem;
    font-weight: 600;
    color: rgba(15,23,42,.62);
}

.plan-card__price-wrap.plan-price--discount .plan-card__price-unit{
    font-size: .7em;
    font-weight: 900;
    color: rgba(15,23,42,.45);
}

/* Slim plan specs (QuickBooks-style: clean rows, no ticks) */
.plan-specs{
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(15,23,42,.10);
    border-bottom: 1px solid rgba(15,23,42,.10);
}

.plan-spec{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .25rem;
    border-bottom: 1px solid rgba(15,23,42,.08);
}

.plan-spec--last{ border-bottom: 0; }

.plan-spec-label{
    color: rgba(15,23,42,.72);
    font-weight: 700;
    font-size: .9rem;
}

.plan-spec-value{
    color: rgba(15,23,42,.92);
    font-weight: 900;
    font-size: .95rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.plan-spec-unit{
    margin-left: .15rem;
    color: rgba(15,23,42,.60);
    font-weight: 800;
    font-size: .82em;
}

/* Included features list (unlimited across plans) */
.plan-includes-wrap{
    border-bottom: 1px solid rgba(15,23,42,.10);
    padding-bottom: 1rem;
}

.plan-includes-title{
    letter-spacing: 0.02em;
}

.plan-includes{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .35rem;
}

.plan-include{
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    color: rgba(15,23,42,.78);
    font-weight: 600;
    font-size: .92rem;
}

.plan-include .plan-check{
    font-size: 1rem;
    margin-top: .05rem;
}

/* Legacy hooks (safe if referenced elsewhere) */
.plan-feature-list{ min-height: auto; }
.plan-feature-bullet{ border-radius: .85rem; padding: .45rem .5rem; }

/* Buttons: match landing page solid CTA styling */
.plan-btn{
    border-radius: .95rem;
    padding: .7rem 1.05rem;
    min-height: 46px;
    line-height: 1.15;
}

.plan-btn-primary{
    background: var(--plan-warning);
    border: 1px solid rgba(0,0,0,.04);
    color: #0b1b34;
    box-shadow: 0 10px 22px -14px rgba(245,158,11,.65);
}

.plan-btn-primary:hover{
    background: #d97706;
    border-color: #d97706;
    color: #0b1b34;
}

.plan-btn-secondary{
    background: rgba(15,23,42,.92);
    border: 1px solid rgba(15,23,42,.92);
    color: #fff;
    box-shadow: 0 14px 34px -26px rgba(2,6,23,.65);
}

.plan-btn-secondary:hover{
    background: rgba(15,23,42,.98);
    border-color: rgba(15,23,42,.98);
    color: #fff;
}

.plan-cta-primary i{
    font-size: 1.25rem;
    transition: transform .2s ease;
}

.plan-cta-primary:hover i{
    transform: translateX(4px);
}

/* Included-in-all plans band */
.plan-core-title{
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--plan-slate-900);
}

.plan-core-sub{
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.plan-core-item{
    background: rgba(255,255,255,.76);
    border: 1px solid rgba(15,23,42,.10);
    border-radius: 1rem;
    padding: .75rem .9rem;
    font-weight: 800;
    color: rgba(15,23,42,.88);
    box-shadow: 0 10px 24px -18px rgba(2,6,23,.32);
}

/* Comparison table */
.plan-compare-card{
    position: relative;
    border: 3px solid transparent;
    background:
        linear-gradient(180deg, rgba(29,78,216,.06), rgba(255,255,255,.84) 38%, rgba(255,255,255,.78)) padding-box,
        linear-gradient(90deg, rgba(29,78,216,.85), rgba(16,185,129,.75), rgba(245,158,11,.75)) border-box;
    border-radius: 1.5rem;
    padding: 1.5rem 1.25rem;
    box-shadow: var(--plan-shadow);
}

.plan-compare-title{
    font-weight: 900;
    letter-spacing: -0.02em;
    color: var(--plan-slate-900);
}

.plan-compare-table{
    margin-bottom: 0;
    border-color: rgba(15,23,42,.10);
    background: rgba(255,255,255,.85);
}

.plan-compare-table thead th{
    background: rgba(238,245,255,.92);
    border-bottom: 1px solid rgba(15,23,42,.12);
    padding-top: .9rem;
    padding-bottom: .9rem;
}

.plan-compare-section td{
    background: rgba(29,78,216,.10);
    color: rgba(29,78,216,.92);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .72rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* Hover for readability (no zebra striping) */
.plan-compare-table tbody tr:not(.plan-compare-section):hover th,
.plan-compare-table tbody tr:not(.plan-compare-section):hover td{
    background: rgba(29,78,216,.06);
}

.plan-compare-table tbody th,
.plan-compare-table tbody td{
    padding-top: .8rem;
    padding-bottom: .8rem;
}

/* Body row labels (Feature descriptions) should not look heavy */
.plan-compare-table tbody th{
    font-weight: 600;
    color: rgba(15,23,42,.78);
}

.plan-compare-sticky{
    position: sticky;
    left: 0;
    background: rgba(255,255,255,.94);
    border-right: 1px solid rgba(15,23,42,.08);
}

.plan-compare-table-wrap{
    border-radius: 1rem;
    overflow: auto;
    border: 1px solid rgba(15,23,42,.10);
    background: rgba(255,255,255,.65);
}

.plan-check{
    display: inline-block;
    line-height: 1;
    color: rgb(21,128,61);
    font-weight: 900;
    font-size: 1.05rem;
}

.plan-dash{
    display: inline-block;
    line-height: 1;
    color: rgba(15,23,42,.55);
    font-weight: 900;
    font-size: 1.05rem;
}

@media (max-width: 767.98px){
    .plan-section-inner,
    .plan-section-bg{
        padding: 1rem 0;
    }
    .plan-compare-card{ padding: 1.15rem .95rem; }
}