/**
 * FAN Woo Subscriptions — fallback styles for [fanwoo_plans]
 *
 * The shortcode reuses the same `fand-*` class names as the FAN Clinic
 * Dashboard so it picks up the dashboard's CSS automatically when rendered
 * inside the dashboard. These styles are a self-contained fallback for when
 * the shortcode is used on a regular WordPress page where dashboard.css is
 * not loaded — they intentionally mirror the dashboard subscription tab.
 *
 * Scoped under `.fanwoo-scope` to avoid clashing with the dashboard's own
 * (and typically more specific) styles.
 */

.fanwoo-scope { max-width: 920px; margin: 24px auto; font-family: inherit; color: #0f172a; }

.fanwoo-scope .fand-page-header { text-align: center; margin: 0 0 24px; }
.fanwoo-scope .fand-page-header h1 { margin: 0 0 6px; font-size: 28px; font-weight: 700; color: #0f172a; }
.fanwoo-scope .fand-page-header .text-muted { color: #64748b; font-size: 14px; margin: 0; }

.fanwoo-scope .fand-alert { padding: 14px 18px; border-radius: 10px; font-size: 14px; margin: 0 auto 18px; max-width: 880px; }
.fanwoo-scope .fand-alert--success { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; }
.fanwoo-scope .fand-alert--error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

.fanwoo-scope .fand-active-banner {
    max-width: 880px; margin: 0 auto 24px; padding: 18px 22px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7; border-radius: 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.fanwoo-scope .fand-active-banner strong { color: #047857; font-size: 15px; }
.fanwoo-scope .fand-active-banner small  { display: block; color: #065f46; font-size: 13px; margin-top: 2px; }

.fanwoo-scope .fand-billing-toggle {
    display: inline-flex; align-items: center; gap: 0;
    background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 999px;
    padding: 4px; margin: 0 auto 28px; position: relative;
}
.fanwoo-scope .fand-billing-toggle__btn {
    appearance: none; border: none; background: transparent; cursor: pointer;
    padding: 10px 22px; font-size: 14px; font-weight: 600; color: #475569;
    border-radius: 999px; transition: all .2s ease; position: relative;
    display: inline-flex; align-items: center; gap: 8px; font-family: inherit;
}
.fanwoo-scope .fand-billing-toggle__btn[aria-pressed="true"] {
    background: #0f172a; color: #fff; box-shadow: 0 4px 12px rgba(15,23,42,.15);
}
.fanwoo-scope .fand-savings-badge {
    display: inline-block; background: #fef3c7; color: #92400e;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    padding: 2px 8px; border-radius: 10px;
}
.fanwoo-scope .fand-billing-toggle__btn[aria-pressed="true"] .fand-savings-badge {
    background: #fbbf24; color: #78350f;
}

.fanwoo-scope .fand-plans-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px; max-width: 880px; margin: 0 auto;
}
@media (max-width: 720px) { .fanwoo-scope .fand-plans-grid { grid-template-columns: 1fr; } }

.fanwoo-scope .fand-plan-card {
    position: relative; background: #fff; border: 2px solid #e2e8f0; border-radius: 16px;
    padding: 32px 28px; text-align: left; transition: all .25s ease;
    display: flex; flex-direction: column;
}
.fanwoo-scope .fand-plan-card[data-selected="true"] {
    border-color: #0f766e;
    box-shadow: 0 12px 32px -8px rgba(15,118,110,.25);
    transform: translateY(-2px);
}
.fanwoo-scope .fand-plan-card__ribbon {
    position: absolute; top: -12px; left: 24px;
    background: linear-gradient(135deg, #0f766e, #0d5f59); color: #fff;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    padding: 5px 14px; border-radius: 999px;
}
.fanwoo-scope .fand-plan-card__ribbon--gold {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.fanwoo-scope .fand-plan-card__name  { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #64748b; margin: 0 0 8px; }
.fanwoo-scope .fand-plan-card__price { font-size: 44px; font-weight: 800; color: #0f172a; line-height: 1; margin: 0 0 4px; font-family: inherit; }
.fanwoo-scope .fand-plan-card__price small { font-size: 16px; font-weight: 500; color: #64748b; margin-left: 4px; }
.fanwoo-scope .fand-plan-card__sub   { font-size: 13px; color: #64748b; margin: 0 0 18px; min-height: 18px; }

.fanwoo-scope .fand-yearly-bonus{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:10px 12px;margin:0 0 18px;font-size:12px;color:#1e40af;}
.fanwoo-scope .fand-yearly-bonus__pill{font-weight:700;color:#1d4ed8;}
.fanwoo-scope .fand-yearly-bonus__total strong{color:#0f172a;}

.fanwoo-scope .fand-plan-features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1 1 auto; }
.fanwoo-scope .fand-plan-features li {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0; font-size: 14px; color: #1f2937;
}
.fanwoo-scope .fand-plan-features li::before {
    content: "✓"; flex: 0 0 20px; height: 20px; width: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #d1fae5; color: #047857; border-radius: 50%;
    font-size: 12px; font-weight: 700;
}

.fanwoo-scope .fand-plan-cta {
    display: block; width: 100%; text-align: center; padding: 13px 20px;
    font-size: 14px; font-weight: 600; border-radius: 10px; border: none;
    cursor: pointer; transition: all .2s ease; font-family: inherit;
    text-decoration: none; box-sizing: border-box;
}
.fanwoo-scope .fand-plan-cta--primary   { background: #0f766e; color: #fff !important; }
.fanwoo-scope .fand-plan-cta--primary:hover {
    background: #0d5f59; transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15,118,110,.3);
}
.fanwoo-scope .fand-plan-cta--secondary { background: #fff; color: #0f172a !important; border: 1px solid #e2e8f0; }
.fanwoo-scope .fand-plan-cta--secondary:hover { background: #f8fafc; border-color: #cbd5e1; }
.fanwoo-scope .fand-plan-cta:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.fanwoo-scope .fand-section h2 { font-size: 20px; margin: 0 0 16px; color: #0f172a; }