/*
 * Styles for PPM Membership plugin front‑end components.
 * These styles apply Bootstrap‑like spacing and card layouts to membership forms and cards.
 *
 * v0.10.13 — Theme integration tokens.
 *   --ssm-font: theme override for FE block typography.
 *               Default = system stack. Theme writers can set in :root.
 *   --ssm-max-width-{block}: per-block max-width to prevent overflow on
 *               full-width pages. Theme override-able.
 *   These tokens are also referenced from per-block style.css files
 *   (level-change, member-status, pricing-table) — single source of truth.
 */
:root {
    --ssm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ssm-max-width-signup:     720px;
    --ssm-max-width-account:    720px;
    --ssm-max-width-level-card: 360px;
    --ssm-max-width-pricing-table: 1080px;
    --ssm-max-width-level-change:  960px;
    --ssm-max-width-member-status: 480px;
    --ssm-max-width-level-features: 720px;
}

/* ═══════════════════════════════════════════════════════════
 * Note: Legacy .ppm-* chrome retired in v0.11.05 (signup form, Pass A)
 *       and v0.11.06 (level card, Pass B). All FE signup/checkout +
 *       level-card UI now lives in:
 *         - assets/ssm-checkout.css   (signup form)
 *         - assets/ssm-level-card.css (level card)
 *       Account dashboard chrome below (.ssm-dash, .ssm-panel, etc.).
 * ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
 * SSM Frontend Dashboard (v0.4.0)
 * SimpleSuite / InsightMent design system conformance:
 *   – Flat edges (zero border-radius)
 *   – ss-panel structure
 *   – SVG icons only
 *   – ASK brand colours
 * ═══════════════════════════════════════════════════════════ */

.ssm-dash {
    max-width: 100%;
    color: #0f172a;
}

/* ── Panels ── */
.ssm-panel {
    border: 1px solid #e2e8f0;
    background: #fff;
    margin-bottom: 20px;
}
.ssm-panel-header {
    padding: 14px 20px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ssm-panel-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0f172a;
}
.ssm-panel-body {
    padding: 20px;
}

/* ── Badges ── */
.ssm-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
}
.ssm-badge-dot {
    width: 6px;
    height: 6px;
    display: inline-block;
}
.ssm-badge--green {
    color: #166534;
    background: #dcfce7;
}
.ssm-badge--green .ssm-badge-dot { background: #22c55e; }
.ssm-badge--yellow {
    color: #92400e;
    background: #fef3c7;
}
.ssm-badge--yellow .ssm-badge-dot { background: #f59e0b; }
.ssm-badge--muted {
    color: #64748b;
    background: #f1f5f9;
}
.ssm-badge--muted .ssm-badge-dot { background: #94a3b8; }

/* ── Status Hero ── */
.ssm-status-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}
.ssm-status-icon {
    width: 48px;
    height: 48px;
    background: #5B8C5A;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.ssm-status-level {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
.ssm-status-price {
    font-size: 13px;
    color: #64748b;
    margin-top: 2px;
}

/* ── Info Tiles ── */
.ssm-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
.ssm-info-tile {
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.ssm-info-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}
.ssm-info-label svg {
    flex-shrink: 0;
}
.ssm-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

/* ── Features Grid ── */
.ssm-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}
.ssm-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #334155;
}
.ssm-feature-check {
    color: #5B8C5A;
    flex-shrink: 0;
    display: flex;
}

/* ── Action Cards ── */
.ssm-actions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.ssm-action-card {
    border: 1px solid #e2e8f0;
    background: #fff;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.ssm-action-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}
.ssm-action-icon--upgrade { background: #fef3e2; color: #D4740E; }
.ssm-action-icon--change  { background: #e8eff8; color: #4A6FA5; }
.ssm-action-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
}
.ssm-action-title--upgrade { color: #D4740E; }
.ssm-action-title--change  { color: #4A6FA5; }
.ssm-action-desc {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
    flex: 1;
}
.ssm-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border: none;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start;
    margin-top: 14px;
}
.ssm-action-btn--upgrade { background: #D4740E; color: #fff; }
.ssm-action-btn--upgrade:hover { background: #b8620c; color: #fff; text-decoration: none; }

/* ── Change Links ── */
.ssm-change-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #4A6FA5;
    text-decoration: none;
    padding: 4px 0;
}
.ssm-change-link:hover {
    color: #3a5a8a;
    text-decoration: none;
}

/* ── Cancel ── */
.ssm-cancel-row {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
}
.ssm-cancel-link {
    font-size: 12px;
    color: #94a3b8;
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
}
.ssm-cancel-link:hover {
    color: #64748b;
}

/* ── Login Notice ── */
.ssm-login-notice {
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .ssm-info-grid {
        grid-template-columns: 1fr;
    }
    .ssm-features-grid {
        grid-template-columns: 1fr;
    }
    .ssm-actions-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 576px) {
    .ssm-status-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .ssm-panel-body {
        padding: 16px;
    }
}

/* ═════════════════════════════════════════════════════════════
   v0.9.0 — Wayfinding & SSM_Access components
   ═════════════════════════════════════════════════════════════ */

/* [Admin] pill — appears next to level name when admin/editor is viewing */
.ssm-admin-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: middle;
    border: 0.5px solid #fde68a;
}

/* Content-gate (denied state) */
.ssm-content-gate {
    margin: 16px 0;
}
.ssm-content-gate--restricted {
    padding: 24px;
    background: #f8fafc;
    border: 0.5px solid #e2e8f0;
    text-align: center;
}
.ssm-content-gate__msg {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}
.ssm-content-gate__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    background: #3b5bdb;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 0.5px solid #3b5bdb;
}
.ssm-content-gate__cta:hover {
    background: #2f4ac9;
    color: #fff;
}
.ssm-content-gate__alt {
    margin: 12px 0 0;
    font-size: 12px;
    color: #64748b;
}
.ssm-content-gate__alt a {
    color: #3b5bdb;
    text-decoration: none;
    font-weight: 600;
}
.ssm-content-gate__admin-banner {
    margin: 0 0 12px;
    padding: 8px 12px;
    background: #fffbeb;
    border: 0.5px solid #fde68a;
    font-size: 12px;
    color: #92400e;
}

/* Empty state (no membership) — signup CTA */
.ssm-dash--empty {
    padding: 24px;
    background: #f8fafc;
    border: 0.5px solid #e2e8f0;
    text-align: center;
}
.ssm-dash--empty p {
    margin: 0 0 12px;
    font-size: 14px;
    color: #334155;
}
.ssm-btn--primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 20px;
    background: #3b5bdb;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 0.5px solid #3b5bdb;
}
.ssm-btn--primary:hover {
    background: #2f4ac9;
    color: #fff;
}

/* Block editor notice (level-card with no level selected) */
.ssm-block-notice {
    padding: 16px;
    background: #fffbeb;
    border: 0.5px dashed #fde68a;
    color: #92400e;
    font-size: 13px;
    text-align: center;
}

/* ────────────────────────────────────────────────────────────────────
 * v0.10.13 — Block max-width constraints (theme-overridable via tokens).
 * Prevents FE blocks from rendering edge-to-edge on full-width pages.
 * ──────────────────────────────────────────────────────────────────── */

/* Signup block — form chrome (v0.11.05 namespace: .ssm-checkout) */
.wp-block-ssm-signup,
.wp-block-ssm-signup .ssm-checkout {
    max-width: var(--ssm-max-width-signup, 540px);
    margin-left: auto;
    margin-right: auto;
}

/* Account block — dashboard */
.wp-block-ssm-account,
.wp-block-ssm-account .ssm-account {
    max-width: var(--ssm-max-width-account, 720px);
    margin-left: auto;
    margin-right: auto;
}

/* Level-card block — single tier card (v0.11.06 namespace: .ssm-level-card) */
.wp-block-ssm-level-card,
.wp-block-ssm-level-card .ssm-level-card {
    max-width: var(--ssm-max-width-level-card, 360px);
    margin-left: auto;
    margin-right: auto;
}

/* Wide alignment — let the block expand within its allowed alignment but cap */
.wp-block-ssm-signup.alignwide   { max-width: min(var(--ssm-max-width-signup, 540px), 1080px); }
.wp-block-ssm-account.alignwide  { max-width: min(var(--ssm-max-width-account, 720px), 1080px); }

/* Full alignment — the constraint loosens but still bounded */
.wp-block-ssm-signup.alignfull,
.wp-block-ssm-account.alignfull,
.wp-block-ssm-level-card.alignfull {
    /* Honor the editor's full-width intent — the inner max-width still
       applies via the inner selector above to keep content readable. */
}