/**
 * Flamenet Stripe Subscriptions — Stylesheet
 * Flamenet 2001 portal aesthetic
 */

.fns-wrap {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000;
    width: 100%;
}

/* -------------------------------------------------------
   Flash Messages
------------------------------------------------------- */
.fns-msg {
    padding: 8px 12px;
    margin-bottom: 14px;
    border: 1px solid;
    font-size: 12px;
}

.fns-msg-ok   { background: #EEFFEE; border-color: #006600; color: #006600; }
.fns-msg-err  { background: #FFEEEE; border-color: #CC0000; color: #CC0000; }
.fns-msg-info { background: #EEF3FF; border-color: #003399; color: #003399; }

/* -------------------------------------------------------
   Current Plan Panel
------------------------------------------------------- */
.fns-current-plan {
    border: 1px solid #7F9DB9;
    margin-bottom: 14px;
}

.fns-current-plan-header {
    background: #003399;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
}

.fns-current-plan-body {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    background: #EEF2FF;
}

.fns-plan-badge {
    display: inline-block;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 10px;
}

.fns-plan-status {
    font-size: 12px;
    font-weight: bold;
}

.fns-plan-status-active   { color: #006600; }
.fns-plan-status-past_due { color: #CC0000; }
.fns-plan-status-cancelled { color: #666; }

.fns-plan-renews {
    font-size: 11px;
    color: #555;
}

.fns-manage-btns {
    margin-left: auto;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* -------------------------------------------------------
   Tiers Header
------------------------------------------------------- */
.fns-tiers-header {
    background: #003399;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    margin-bottom: 10px;
}

/* -------------------------------------------------------
   Tier Cards
------------------------------------------------------- */
.fns-tiers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.fns-tier {
    flex: 1;
    min-width: 175px;
    border: 1px solid #7F9DB9;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.fns-tier-current {
    border: 2px solid #003399;
}

/* Coloured header band */
.fns-tier-header {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    text-align: left;
}

/* Price */
.fns-tier-price {
    font-size: 14px;
    font-weight: bold;
    padding: 6px 8px 2px;
    color: #CC0000;
    line-height: 1;
    border-bottom: 1px solid #C8D8E8;
}

.fns-tier-period {
    font-size: 11px;
    font-weight: normal;
    color: #666;
}

/* Feature list */
.fns-tier-features {
    list-style: none;
    margin: 0;
    padding: 6px 8px 8px;
    flex-grow: 1;
}

.fns-tier-features li {
    font-size: 11px;
    padding: 3px 0;
    border-bottom: 1px dotted #E8E8E8;
    color: #333;
}

.fns-tier-features li::before {
    content: '\2713\00a0'; /* ✓ */
    color: #003399;
    font-weight: bold;
}

/* Action area */
.fns-tier-action {
    padding: 8px;
    text-align: center;
    border-top: 1px solid #C8D8E8;
    background: #EEF2FF;
}

/* -------------------------------------------------------
   Buttons
------------------------------------------------------- */
.fns-btn {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: bold;
    border: 1px solid;
    cursor: pointer;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.4;
}

.fns-btn:disabled {
    opacity: .6;
    cursor: default;
}

/* Subscribe / switch */
.fns-btn-subscribe {
    background: #CC0000;
    color: #fff;
    border-color: #990000;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.fns-btn-subscribe:hover:not(:disabled) {
    background: #990000;
    color: #fff;
    text-decoration: none;
}

/* Manage (portal) */
.fns-btn-manage {
    background: #003399;
    color: #fff;
    border-color: #002277;
}

.fns-btn-manage:hover:not(:disabled) {
    background: #002277;
    color: #fff;
}

/* Cancel */
.fns-btn-cancel {
    background: #fff;
    color: #CC0000;
    border-color: #CC0000;
}

.fns-btn-cancel:hover:not(:disabled) {
    background: #FFEEEE;
}

/* -------------------------------------------------------
   Status indicators inside cards
------------------------------------------------------- */
.fns-current-badge {
    display: inline-block;
    background: #003399;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 10px;
}

.fns-not-available {
    color: #999;
    font-size: 12px;
    font-style: italic;
}

/* -------------------------------------------------------
   Footer notice
------------------------------------------------------- */
.fns-notice {
    font-size: 11px;
    color: #666;
    padding: 8px 0;
    border-top: 1px solid #C8D8E8;
    margin-top: 4px;
}

.fns-stripe-badge {
    color: #635bff;
}

/* -------------------------------------------------------
   Inline error
------------------------------------------------------- */
.fns-error-msg {
    background: #FFEEEE;
    border: 1px solid #CC0000;
    color: #CC0000;
    padding: 8px 12px;
    margin-top: 12px;
    font-size: 12px;
}

/* -------------------------------------------------------
   Limit note (per month, total active, etc.)
------------------------------------------------------- */
.fns-feat-note {
    color: #999;
    font-size: 10px;
    font-style: italic;
    margin-left: 3px;
}

/* -------------------------------------------------------
   Free tier card
------------------------------------------------------- */
.fns-tier-free {
    opacity: .9;
}

.fns-tier-free .fns-tier-features li::before {
    content: '\2013\00a0'; /* – */
    color: #666;
}

/* -------------------------------------------------------
   Limits Comparison Table
------------------------------------------------------- */
.fns-limits-table-wrap {
    margin-top: 16px;
    margin-bottom: 14px;
}

.fns-limits-heading {
    background: #003399;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    margin: 0;
    border: 1px solid #002277;
    border-bottom: none;
}

.fns-limits-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: 1px solid #7F9DB9;
}

.fns-limits-table th,
.fns-limits-table td {
    padding: 5px 10px;
    border: 1px solid #C8D8E8;
    text-align: center;
    vertical-align: middle;
}

.fns-limits-table th:first-child,
.fns-limits-table td:first-child {
    text-align: left;
}

.fns-limits-table thead th {
    background: #003399;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
}

.fns-limits-table tbody tr:nth-child(even) {
    background: #EEF2FF;
}

.fns-limits-table tbody tr:hover {
    background: #D0DEFF;
}

.fns-limits-feature {
    color: #333;
    white-space: nowrap;
}

.fns-limits-feature .fns-feat-note {
    display: block;
    margin-left: 0;
    margin-top: 1px;
}

.fns-limits-section-header td {
    background: #EEF2FF;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #003399;
    padding: 4px 6px;
    border-top: 1px solid #7F9DB9;
}

.fns-limits-current-col {
    background: #FFCC00 !important;
    font-weight: bold;
    color: #003399;
    border-left: 2px solid #003399;
    border-right: 2px solid #003399;
}

.fns-unlimited {
    font-size: 14px;
    color: #003399;
    font-weight: bold;
    line-height: 1;
}

/* -------------------------------------------------------
   Responsive
------------------------------------------------------- */
@media (max-width: 560px) {
    .fns-tiers {
        flex-direction: column;
    }

    .fns-manage-btns {
        margin-left: 0;
        width: 100%;
    }

    .fns-current-plan-body {
        flex-direction: column;
        align-items: flex-start;
    }

    .fns-limits-table-wrap {
        overflow-x: auto;
    }
}

/* -------------------------------------------------------
   Profile page subscription section
   ------------------------------------------------------- */

.fns-profile-plan-current {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 11px;
}

.fns-profile-free {
    font-size: 11px;
    color: #666;
    margin-bottom: 8px;
}

.fns-profile-upgrade-link {
    color: #0000CC;
    margin-left: 6px;
}

.fns-profile-tiers {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.fns-profile-tier {
    border: 1px solid #7F9DB9;
    padding: 6px 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    min-width: 100px;
    text-align: center;
    background: #fff;
}

.fns-profile-tier.fns-tier-current {
    border-color: #003399;
    border-width: 2px;
    background: #EEF2FF;
}

.fns-profile-tier-name {
    font-weight: bold;
    margin-bottom: 2px;
    font-size: 11px;
}

.fns-profile-tier-price {
    color: #666;
    font-size: 10px;
    margin-bottom: 6px;
}

.fns-btn-switch {
    font-size: 10px;
    padding: 2px 10px;
    background: #003399;
    color: #fff;
    border: 1px solid #002277;
    cursor: pointer;
    font-family: Arial, Helvetica, sans-serif;
}

.fns-btn-switch:hover {
    background: #002277;
}

.fns-btn-downgrade {
    background: #666;
    border-color: #444;
}

.fns-btn-downgrade:hover {
    background: #444;
}

.fns-profile-cancel-wrap {
    margin-top: 8px;
    font-size: 11px;
}

.fns-btn-cancel-sm {
    background: none;
    border: none;
    color: #CC0000;
    cursor: pointer;
    font-size: 11px;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: underline;
    padding: 0;
}

.fns-btn-cancel-sm:hover {
    color: #990000;
}

#fns-profile-msg {
    font-size: 11px;
    margin-top: 6px;
    padding: 4px 8px;
}

.fns-profile-msg-ok {
    color: #006600;
    background: #f0fff0;
    border: 1px solid #006600;
}

.fns-profile-msg-err {
    color: #CC0000;
    background: #fff0f0;
    border: 1px solid #CC0000;
}