/*
    Billing / Subscription pages
    --------------------------------------------------
    Brand:
      navy   #384F95   primary CTAs, dark headers
      blue   #4DB7FE   accents, recommended plan ribbon
      green  #5ECFB1   active subscription / success
      red    #F75C96   cancellation / failed payment
      grey   #f6f7fb   page section background
*/

.billing-page {
    background: #f6f7fb;
    min-height: 100vh;
    padding: 64px 0 96px;
    font-family: 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #2b3247;
}

.billing-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

.billing-eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #4DB7FE;
    margin-bottom: 8px;
    text-align: center;
}

.billing-heading {
    font-size: 32px;
    font-weight: 700;
    color: #1d243a;
    margin: 0 0 8px;
    letter-spacing: -0.4px;
    text-align: center;
}

.billing-sub {
    font-size: 15px;
    color: #6b7388;
    max-width: 640px;
    margin: 0 auto 36px;
    line-height: 1.55;
    text-align: center;
}

/* ---- inline status banner (active / flagged) ---- */
.billing-status {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 28px;
    box-shadow: 0 8px 24px rgba(35, 52, 93, 0.06);
    border-left: 4px solid #5ECFB1;
}
.billing-status.flagged {
    border-left-color: #F75C96;
}
.billing-status .billing-status_icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(94, 207, 177, 0.12);
    color: #5ECFB1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.billing-status.flagged .billing-status_icon {
    background: rgba(247, 92, 150, 0.12);
    color: #F75C96;
}
.billing-status_body { flex: 1; }
.billing-status_body strong { display: block; font-size: 14px; color: #1d243a; }
.billing-status_body span { font-size: 13px; color: #6b7388; }
.billing-status_action {
    background: transparent;
    border: 0;
    padding: 0;
    color: #384F95;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}
.billing-status_action:hover { color: #4DB7FE; }

/* ---- pricing grid ---- */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
@media (max-width: 1180px) {
    .plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .plan-grid { grid-template-columns: 1fr; }
}

.plan-card {
    background: #fff;
    border-radius: 14px;
    padding: 32px 28px 28px;
    position: relative;
    box-shadow: 0 12px 32px rgba(35, 52, 93, 0.06);
    border: 1px solid rgba(35, 52, 93, 0.06);
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    text-align: left; /* break out of any inherited center alignment */
}
.plan-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(35, 52, 93, 0.10);
}
.plan-card.is-recommended {
    border-color: #4DB7FE;
    box-shadow: 0 18px 40px rgba(77, 183, 254, 0.18);
}
.plan-card.is-current {
    border-color: #5ECFB1;
}
.plan-ribbon {
    position: absolute;
    top: -12px;
    right: 24px;
    background: #4DB7FE;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: 0 6px 14px rgba(77, 183, 254, 0.35);
}
.plan-current-pill {
    position: absolute;
    top: -12px;
    right: 24px;
    background: #5ECFB1;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
}
.plan-name {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6b7388;
    font-weight: 600;
    margin: 0 0 12px;
}
.plan-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}
.plan-price_amount {
    font-size: 38px;
    font-weight: 700;
    color: #1d243a;
    letter-spacing: -1px;
    line-height: 1;
}
.plan-price_unit {
    font-size: 14px;
    color: #6b7388;
    font-weight: 500;
}
.plan-price_annual {
    font-size: 12px;
    color: #6b7388;
    margin-bottom: 18px;
}
.plan-price_free {
    font-size: 38px;
    font-weight: 700;
    color: #1d243a;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: 18px;
}
.plan-desc {
    color: #6b7388;
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 22px;
    min-height: 44px;
}
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
    text-align: left;
}
.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    font-size: 13.5px;
    color: #2b3247;
    line-height: 1.5;
    text-align: left;
}
.plan-features li::before {
    content: "\2713"; /* check mark */
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(94, 207, 177, 0.18);
    color: #36b594;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    margin-top: 2px;
}

.plan-active-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    border-radius: 10px;
    background: rgba(94, 207, 177, 0.08);
    color: #36b594;
    font-size: 14px;
    font-weight: 600;
    border: 1px dashed rgba(94, 207, 177, 0.5);
}
.plan-active-state_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5ECFB1;
    box-shadow: 0 0 0 4px rgba(94, 207, 177, 0.18);
}

.plan-cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px 18px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 0;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    text-decoration: none;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.plan-cta-primary { background: #384F95; color: #fff; }
.plan-cta-primary:hover { background: #4DB7FE; color: #fff; transform: translateY(-1px); }
.plan-cta-secondary {
    background: #fff;
    color: #384F95;
    border: 1.5px solid rgba(56, 79, 149, 0.2);
}
.plan-cta-secondary:hover { border-color: #384F95; color: #384F95; }
.plan-cta-ghost {
    background: transparent;
    color: #6b7388;
    border: 1.5px dashed rgba(107, 115, 136, 0.3);
}
.plan-cta-ghost:hover { color: #384F95; border-color: #384F95; }
.plan-cta-form { display: block; margin: 0; }
.plan-cta-form + .plan-cta-form { margin-top: 0; }

/* ---- result pages (success / cancel) ---- */
.billing-result {
    background: #fff;
    border-radius: 16px;
    padding: 56px 48px;
    text-align: center;
    box-shadow: 0 12px 32px rgba(35, 52, 93, 0.06);
    max-width: 560px;
    margin: 0 auto;
}
.billing-result_icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
}
.billing-result_icon.success { background: linear-gradient(135deg, #5ECFB1 0%, #4DB7FE 100%); }
.billing-result_icon.cancel { background: linear-gradient(135deg, #6b7388 0%, #4a5266 100%); }
.billing-result h1 {
    font-size: 26px;
    font-weight: 700;
    color: #1d243a;
    margin: 0 0 12px;
    letter-spacing: -0.3px;
}
.billing-result p {
    font-size: 15px;
    color: #6b7388;
    line-height: 1.6;
    margin: 0 0 28px;
}
.billing-btn-primary {
    display: inline-block;
    padding: 13px 28px;
    background: #384F95;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}
.billing-btn-primary:hover { background: #4DB7FE; transform: translateY(-1px); }
.billing-btn-secondary {
    display: inline-block;
    padding: 13px 28px;
    color: #6b7388;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    margin-left: 8px;
}
.billing-btn-secondary:hover { color: #384F95; }

/* ---- upgrade prompt (shown above company edit on Basic) ---- */
.upgrade-prompt {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 18px 24px;
    margin: 16px 0 24px;
    background: linear-gradient(105deg, rgba(77, 183, 254, 0.08) 0%, rgba(56, 79, 149, 0.08) 100%);
    border: 1px solid rgba(77, 183, 254, 0.25);
    border-radius: 12px;
}
.upgrade-prompt_icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #4DB7FE 0%, #384F95 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.upgrade-prompt_body { flex: 1; }
.upgrade-prompt_body strong {
    display: block;
    font-size: 15px;
    color: #1d243a;
    margin-bottom: 2px;
}
.upgrade-prompt_body span {
    font-size: 13px;
    color: #6b7388;
}
.upgrade-prompt_cta {
    flex-shrink: 0;
    background: #384F95;
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease;
}
.upgrade-prompt_cta:hover { background: #4DB7FE; }

/* ---- subscription notice (Company/Edit dashboard banner) ---- */
.sub-notice {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 22px;
    box-shadow: 0 6px 18px rgba(35, 52, 93, 0.05);
}
.sub-notice.is-active { border-left: 3px solid #5ECFB1; }
.sub-notice.is-flagged { border-left: 3px solid #F8BD38; }
.sub-notice.is-cancelled { border-left: 3px solid #F75C96; }
.sub-notice_pill {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.is-active .sub-notice_pill { background: rgba(94, 207, 177, 0.12); color: #2da084; }
.is-flagged .sub-notice_pill { background: rgba(248, 189, 56, 0.18); color: #b07d00; }
.is-cancelled .sub-notice_pill { background: rgba(247, 92, 150, 0.12); color: #d43575; }
.sub-notice_body { flex: 1; font-size: 14px; color: #2b3247; }
.sub-notice_body strong { color: #1d243a; }
.sub-notice_link {
    font-weight: 600;
    color: #384F95;
    font-size: 13px;
    text-decoration: none;
}
.sub-notice_link:hover { color: #4DB7FE; }

/* ---- admin subscription panel (data view on Company/Edit) ---- */
.sub-panel {
    background: #fff;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 8px 24px rgba(35, 52, 93, 0.05);
    margin-bottom: 24px;
}
.sub-panel_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
}
@media (max-width: 700px) {
    .sub-panel_grid { grid-template-columns: 1fr; }
}
.sub-panel_field { min-width: 0; }
.sub-panel_field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8b94a8;
    margin-bottom: 4px;
}
.sub-panel_field .value {
    font-size: 14px;
    color: #1d243a;
    font-weight: 500;
    word-break: break-all;
}
.sub-panel_field .value.mono {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 12.5px;
    color: #4a5266;
    background: #f6f7fb;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
}
.sub-panel_field .value.muted { color: #8b94a8; font-style: italic; font-weight: 400; }
.plan-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.plan-badge.basic { background: #f0f2f7; color: #6b7388; }
.plan-badge.enhanced { background: rgba(77, 183, 254, 0.12); color: #1f7bbf; }
.plan-badge.managed { background: linear-gradient(135deg, #4DB7FE 0%, #384F95 100%); color: #fff; }