/* ═══════════════════════════════════════════════════════════
   BUTTONS
   All interactive button and CTA variants live here so that
   visual patterns stay consistent when adding new ones.

   Shared anatomy (replicate when adding a new variant):
     display: inline-flex  |  align-items: center
     border-radius: var(--radius)  |  font-weight: 700
     font-family: inherit  |  cursor: pointer
     transition: background/color/border-color var(--transition-fast)
   ═══════════════════════════════════════════════════════════ */

/* ── btn-calculate  ──────────────────────────────────────────
   Full-width primary CTA inside the calculator form.        */

.btn-calculate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.875rem var(--space-lg);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    letter-spacing: -0.01em;
    margin-top: var(--space-xs);
    transition: background var(--transition-fast), transform 0.1s;
}

.btn-calculate:hover  { background: var(--color-primary-dark); }
.btn-calculate:active { transform: scale(.99); }

/* ── btn-estimate  ───────────────────────────────────────────
   Ghost/secondary button for auto-filling expense estimates. */

.btn-estimate {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid rgba(26,86,50,.2);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    align-self: flex-start;
    transition: background var(--transition-fast);
}

.btn-estimate:hover { background: #d4eddf; }

/* ── lp-btn-primary  ─────────────────────────────────────────
   Landing page CTA. Use on light backgrounds.               */

.lp-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    padding: 0.8125rem var(--space-lg);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.lp-btn-primary:hover { background: var(--color-primary-dark); color: #fff; text-decoration: none; }

/* ── lp-btn-white  ───────────────────────────────────────────
   Primary CTA on green/dark backgrounds (hero, final CTA).  */

.lp-btn-white {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #fff;
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius);
    padding: 0.8125rem var(--space-lg);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.lp-btn-white:hover { background: #f0fdf4; color: var(--color-primary-dark); text-decoration: none; }

/* Size modifier — use on the final CTA section */
.lp-btn-white--lg { padding: 1rem 2rem; font-size: 1.0625rem; }

/* ── lp-btn-outline  ─────────────────────────────────────────
   Secondary CTA on green/dark backgrounds (hero).           */

.lp-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: transparent;
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius);
    padding: 0.8125rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.lp-btn-outline:hover { border-color: #fff; color: #fff; text-decoration: none; }

/* ── btn-danger  ─────────────────────────────────────────────
   Destructive action (Delete). Use with a confirmation step. */

.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: transparent;
    color: var(--color-danger);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius);
    padding: 0.875rem var(--space-lg);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.btn-danger:hover  { background: var(--color-danger-bg); }
.btn-danger:active { transform: scale(.99); }

/* ── btn-ghost  ──────────────────────────────────────────────
   Neutral secondary action (Cancel, Back). Use next to btn-calculate. */

.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.875rem var(--space-lg);
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.btn-ghost:hover { border-color: var(--color-text-muted); color: var(--color-text); text-decoration: none; }
.btn-ghost:active { transform: scale(.99); }

/* ── btn-ghost / btn-danger --sm  ────────────────────────────
   Compact variant for header actions and inline controls.
   Must come after the base rules so the override wins.      */

.btn-ghost--sm,
.btn-danger--sm,
.btn-calculate--sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.875rem;
    border-radius: var(--radius-sm);
}

.btn-calculate--sm {
    width: auto;
    margin-top: 0;
}

/* ── btn--icon  ───────────────────────────────────────────────
   Square icon-only button. Combine with a variant and --sm.
   Must come after --sm so equal padding wins.              */

.btn--icon {
    padding: 0.4375rem;
    line-height: 0;
}

/* ── lp-plan__cta  ───────────────────────────────────────────
   Pricing card CTA. Block-level, full card width.           */

.lp-plan__cta {
    display: block;
    text-align: center;
    padding: 0.75rem var(--space-md);
    border-radius: var(--radius-sm);
    font-size: 0.9375rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast);
}

.lp-plan__cta--primary {
    background: var(--color-primary);
    color: #fff;
    border: none;
}

.lp-plan__cta--primary:hover { background: var(--color-primary-dark); color: #fff; text-decoration: none; }

.lp-plan__cta--outline {
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.lp-plan__cta--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
}