/* Timber Pulse — Paid Flow Prototype styles (loaded on top of styles.css) */

/* ---------- Demo ribbon ---------- */

.demo-ribbon {
    background: #FFF8E1;
    color: #8a6d1a;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-bottom: 1px solid #f0e3b0;
}

/* ---------- Plan cards ---------- */

.plan-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-bottom: 16px;
}

@media (max-width: 900px) {
    .plan-cards {
        grid-template-columns: 1fr;
    }
}

.plan-card {
    border: 1px solid var(--fdn-gray);
    border-radius: 10px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    background: white;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.plan-card:hover {
    border-color: var(--fdn-green);
    box-shadow: 0 4px 14px rgba(0, 145, 91, 0.14);
    transform: translateY(-2px);
}

.plan-card-featured {
    border: 2px solid var(--fdn-green);
    box-shadow: 0 2px 8px rgba(0, 145, 91, 0.10);
}

.plan-card-featured:hover {
    box-shadow: 0 4px 16px rgba(0, 145, 91, 0.22);
}

.plan-badge {
    position: absolute;
    top: -11px;
    left: 20px;
    background: var(--fdn-green);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 10px;
}

.plan-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--fdn-navy);
    margin-bottom: 12px;
}

.plan-price {
    font-size: 36px;
    font-weight: 700;
    color: var(--fdn-navy);
    line-height: 1;
}

.plan-price-unit {
    font-size: 15px;
    font-weight: 500;
    color: var(--fdn-text-light);
}

.plan-price-sub {
    font-size: 13px;
    color: var(--fdn-text-light);
    margin-bottom: 16px;
}

.plan-features {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    flex: 1;
}

.plan-features li {
    font-size: 14px;
    padding: 5px 0 5px 24px;
    position: relative;
}

.plan-features li::before {
    content: "✓";
    position: absolute;
    left: 2px;
    color: var(--fdn-green);
    font-weight: 700;
}

.plan-guarantee,
.plan-obligation {
    font-size: 13px;
    line-height: 1.5;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 16px;
}

.plan-guarantee {
    background: var(--fdn-gray-light);
    color: var(--fdn-text);
}

.plan-obligation {
    background: #EAF6F0;
    color: var(--fdn-text);
}

.plan-footnote {
    font-size: 12px;
    color: var(--fdn-text-light);
}

.plan-card-member {
    border-style: dashed;
    background: #F4FAF7;
}

.plan-member-desc {
    font-size: 13px;
    color: var(--fdn-text-light);
    line-height: 1.55;
    margin-bottom: 14px;
}

/* CTA sits above the bullet lists — don't bury the primary action */
.plan-card .btn {
    margin-bottom: 18px;
}

/* ---- CF setup: known profile shown, not re-asked ---- */

.cf-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--fdn-gray-light);
    border: 1px solid var(--fdn-gray);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.cf-profile-who {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cf-profile-name {
    font-weight: 600;
    color: var(--fdn-navy);
    font-size: 15px;
}

.cf-profile-detail {
    font-size: 13px;
    color: var(--fdn-text-light);
    overflow-wrap: anywhere;
}

.btn-inline-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: var(--fdn-green);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .cf-profile {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- CF door + fork ---- */

.demo-hint {
    margin-top: 24px;
    padding: 12px 16px;
    background: var(--fdn-gray-light, #f5f5f5);
    border-radius: 8px;
    font-size: 13px;
    color: var(--fdn-text-light);
}

.fork-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 8px;
}

@media (max-width: 640px) {
    .fork-options {
        grid-template-columns: 1fr;
    }
}

.fork-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fork-card p {
    font-size: 14px;
    color: var(--fdn-text-light);
    margin: 0;
    flex-grow: 1;
}

.fork-card p a {
    color: var(--fdn-green);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.fork-card-title {
    font-weight: 600;
    font-size: 16px;
    color: var(--fdn-text);
}

.fork-contact {
    font-size: 13px;
    color: var(--fdn-green);
    text-align: center;
}

.cf-joined-banner {
    background: #EAF6F0;
    border: 1px solid var(--fdn-green);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--fdn-text);
    margin-bottom: 20px;
}

.cf-joined-banner a {
    color: var(--fdn-green);
}

/* Header: a little air under the FDN logo (pro page only) */
.site-header .fdn-logo {
    margin-bottom: 12px;
}

/* Inner screens are a reading column, not a 1000px-wide sheet — full width
   made buttons horsey and ran every line of text the width of the page.
   700px with 40px padding leaves 620px of content. Left-aligned, not centered:
   .header-inner and .main-content share the same max-width and side padding,
   so the card's left edge lands under the Timber Pulse logo and the back arrow
   reads as part of the page rather than floating mid-screen. */
.pro-main .form-container {
    max-width: 700px;
    margin: 0 auto 0 0;
    padding: 40px;
}

/* On a phone 40px of card padding inside 24px of page padding left only
   262px for content. :not() keeps the bare chooser at padding: 0. */
@media (max-width: 600px) {
    .pro-main .form-container:not(.form-container-bare) {
        padding: 20px;
    }
}

/* Intro copy next to the Timber Pulse logo */
.pro-main .tp-desc {
    max-width: 480px;
}

/* ---- Single-column layout (no sidebar on the pro page) ----
   Width comes from .main-content's --site-max, which .header-inner uses too,
   so content left-aligns with the FDN logo above. */

.pro-main {
    grid-template-columns: 1fr;
    padding-top: 5px;
}

/* Chooser screen: no card box around the three columns, full width so the
   plan cards stay side by side, and no inset — the cards are the layout here,
   not content inside a card, so they start at the container edge, level with
   the logo above. Needs the two-class selector to beat .pro-main
   .form-container's padding; the single-class rule below loses to it. */
.pro-main .form-container-bare {
    max-width: none;
    padding: 0;
}

.form-container-bare {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

/* ---- About FDN (below the plan choices) ---- */

.about-fdn {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--fdn-gray);
    /* span two of the three columns above (2 cards + 1 gap) */
    max-width: calc((100% - 40px) * 2 / 3 + 20px);
}

.about-fdn h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--fdn-navy);
    margin-bottom: 12px;
}

.about-fdn p {
    font-size: 14px;
    color: var(--fdn-text-light);
    line-height: 1.6;
    margin-bottom: 10px;
}

.back-link {
    background: none;
    border: none;
    color: var(--fdn-text-light);
    font-size: 14px;
    cursor: pointer;
    /* A 40px tap target (16px line + 12px padding each side) without moving
       the text: the negative top margin pulls the box up by the padding, and
       the bottom margin is trimmed by the same amount. vertical-align: top so
       the negative margin isn't fighting baseline alignment. */
    display: inline-block;
    vertical-align: top;
    line-height: 16px;
    padding: 12px 0;
    margin: -12px 0 4px;
}

.back-link:hover {
    color: var(--fdn-green);
}

.guarantee-note {
    font-size: 13px;
    color: var(--fdn-text-light);
    background: var(--fdn-gray-light);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    line-height: 1.5;
}

/* ---------- Region picker ---------- */

.region-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

@media (max-width: 600px) {
    .region-grid {
        grid-template-columns: 1fr;
    }
}

.region-chip {
    text-align: left;
    border: 1px solid var(--fdn-gray);
    border-radius: 8px;
    background: white;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}

.region-chip:hover {
    border-color: var(--fdn-green);
}

.region-chip-selected {
    border: 2px solid var(--fdn-green);
    background: #F2FAF6;
    padding: 9px 11px;
}

.region-chip-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.region-chip-name {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: var(--fdn-navy);
}

.region-chip-counties {
    display: block;
    font-size: 11px;
    color: var(--fdn-text-light);
    line-height: 1.4;
    margin-top: 2px;
}

/* Region multi-select on the CF dashboard report generator */

.report-region-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.region-chip-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
}

.region-chip-inline.region-chip-selected {
    padding: 7px 13px;
}

.region-chip-inline .region-chip-name {
    display: inline;
}

.region-chip-check {
    color: var(--fdn-green);
    font-weight: 700;
    font-size: 13px;
}

.cf-agree-label {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400 !important;
    font-size: 13px !important;
    color: var(--fdn-text) !important;
    line-height: 1.5;
    cursor: pointer;
}

.cf-agree-label input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ---------- One-time result ---------- */

.refund-banner {
    text-align: left;
    background: #EAF3FB;
    border: 1px solid #BFD9EF;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 16px 0;
    font-size: 14px;
    line-height: 1.5;
}

.refund-title {
    font-weight: 700;
    color: var(--fdn-navy);
    margin-bottom: 4px;
}

.receipt-note {
    font-size: 13px;
    color: var(--fdn-text-light);
    margin-top: 10px;
}

.receipt-demo {
    color: #b8860b;
}

/* ---------- CF dashboard ---------- */

.cf-dash-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 14px;
}

/* On a phone the status pill doesn't shrink, so side by side it left the
   heading ~117px wide — "Welcome, Dave Miller" broke across three lines. */
@media (max-width: 600px) {
    .cf-dash-header {
        flex-direction: column;
        gap: 8px;
    }
}

.cf-dash-plan {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fdn-green);
}

.cf-dash-status {
    background: #EAF6F0;
    color: var(--fdn-green-dark);
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    padding: 4px 12px;
    white-space: nowrap;
    margin-top: 4px;
}

.cf-regions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.cf-region-pill {
    background: var(--fdn-navy);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 12px;
    padding: 4px 12px;
}

.cf-more-regions {
    background: none;
    border: 1px dashed var(--fdn-gray);
    color: var(--fdn-text-light);
    font-size: 12px;
    border-radius: 12px;
    padding: 3px 11px;
    cursor: pointer;
}

.cf-more-regions:hover {
    color: var(--fdn-green);
    border-color: var(--fdn-green);
}

.cf-regions-editor {
    border: 1px solid var(--fdn-gray);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.cf-regions-editor-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.cf-regions-editor-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.cf-regions-editor-actions .btn {
    width: auto;
    flex: 1;
    /* .btn-primary carries its own padding/font-size/margin-top while
       .btn-secondary keeps the smaller base, so side by side they came out
       different heights. Pin both to the primary's sizing. */
    margin-top: 0;
    padding: 14px;
    font-size: 16px;
}

.cf-data-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: #FFF8E1;
    border: 1px solid #f0e3b0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 28px;
}

@media (max-width: 600px) {
    .cf-data-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

.cf-data-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--fdn-navy);
    margin-bottom: 2px;
}

.cf-data-card p {
    font-size: 13px;
    color: var(--fdn-text);
    margin: 0;
    line-height: 1.5;
}

.cf-submit-btn {
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
}

.cf-gen-heading {
    font-size: 18px;
    color: var(--fdn-navy);
    margin-bottom: 12px;
}

.cf-dash-footer {
    margin-top: 24px;
    padding-top: 14px;
    border-top: 1px solid var(--fdn-gray);
    font-size: 12px;
    color: var(--fdn-text-light);
}

.link-button {
    background: none;
    border: none;
    color: var(--fdn-text-light);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    /* Inline with the footer text, so grow the tap target to 40px with
       padding and cancel it with margin rather than pushing the line taller. */
    line-height: 14px;
    padding: 13px 0;
    margin: -13px 0;
}

.link-button:hover {
    color: var(--fdn-green);
}