/* ── AAOIFI Membership Hub – Front-end Styles ────────────────── */
:root{
    /* Bridge to theme tokens — change once in theme :root to update everywhere */
    --mem-primary:       var(--primary-color,       #004D40);
    --mem-primary-light: var(--primary-dark,        #00695C);
    --mem-bg:            var(--background-light,    #f4f7f6);
    --mem-border:        var(--border-color,        #c2ddd8);
    --mem-card:          var(--white,               #fff);
    --mem-text:          var(--text-color,          #1a202c);
    --mem-muted:         var(--text-muted,          #718096);
    --mem-radius:        var(--radius-lg,           12px);
    /* Tier accent colours — no theme equivalent, kept as-is */
    --mem-gold:#B8860B;--mem-silver:#707070;--mem-bronze:#8B4513;
    --mem-fellow:#1565C0;--mem-assoc:#6A1B9A;--mem-student:#2E7D32;
}

/* ── Apply form wrapper ─────────────────────────────────────── */
.mem-apply-wrap{max-width:820px;margin:0 auto;padding:32px 0 60px}
.mem-apply-wrap h1{font-size:1.8rem;font-weight:800;color:var(--mem-primary);margin-bottom:6px}
.mem-apply-wrap .mem-subtitle{color:var(--mem-muted);font-size:15px;margin-bottom:32px}

/* ── Type selector ──────────────────────────────────────────── */
.mem-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:28px}
.mem-type-card{border:2px solid var(--mem-border);border-radius:var(--mem-radius);padding:24px;cursor:pointer;transition:all .2s;background:#fff}
.mem-type-card:hover{border-color:var(--mem-primary);box-shadow:0 4px 16px rgba(0,77,64,.1)}
.mem-type-card.selected{border-color:var(--mem-primary);background:#f0f7f5}
.mem-type-card .mtc-icon{width:48px;height:48px;border-radius:10px;background:rgba(0,77,64,.08);color:var(--mem-primary);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:12px}
.mem-type-card h3{font-size:1.05rem;font-weight:700;color:var(--mem-text);margin:0 0 6px}
.mem-type-card p{font-size:13px;color:var(--mem-muted);margin:0}

/* ── Tier cards ─────────────────────────────────────────────── */
.mem-tiers-wrap{margin-bottom:28px}
.mem-tiers-label{font-size:13px;font-weight:700;color:var(--mem-text);text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}
.mem-tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mem-tier-card{border:2px solid var(--mem-border);border-radius:var(--mem-radius);padding:20px;cursor:pointer;transition:all .2s;background:#fff;position:relative;overflow:hidden}
.mem-tier-card:hover{border-color:var(--mem-primary);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,77,64,.1)}
.mem-tier-card.selected{border-color:var(--mem-primary);background:#f0f7f5}
.mem-tier-card.mem-gold{border-top:3px solid var(--mem-gold)}
.mem-tier-card.mem-silver{border-top:3px solid var(--mem-silver)}
.mem-tier-card.mem-bronze{border-top:3px solid var(--mem-bronze)}
.mem-tier-card.mem-fellow{border-top:3px solid var(--mem-fellow)}
.mem-tier-card.mem-assoc{border-top:3px solid var(--mem-assoc)}
.mem-tier-card.mem-student{border-top:3px solid var(--mem-student)}
.mem-tier-name{font-size:.95rem;font-weight:800;color:var(--mem-text);margin-bottom:4px}
.mem-tier-fee{font-size:1.3rem;font-weight:800;color:var(--mem-primary);margin:6px 0}
.mem-tier-fee span{font-size:13px;font-weight:400;color:var(--mem-muted)}
.mem-tier-perks{list-style:none;padding:0;margin:10px 0 0;font-size:12.5px;color:var(--mem-muted)}
.mem-tier-perks li{padding:3px 0;display:flex;align-items:center;gap:6px}
.mem-tier-perks li i{color:var(--mem-primary);font-size:11px;flex-shrink:0}
.mem-tier-perks li.no i{color:#ccc}
.mem-tier-seats{font-size:11px;font-weight:700;background:rgba(0,77,64,.08);color:var(--mem-primary);padding:2px 8px;border-radius:12px;display:inline-block;margin-bottom:8px}

/* ── Form fields ────────────────────────────────────────────── */
.mem-form-section{background:#fff;border:1px solid var(--mem-border);border-radius:var(--mem-radius);padding:24px;margin-bottom:20px}
.mem-form-section h3{font-size:1rem;font-weight:700;color:var(--mem-text);margin:0 0 18px;display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid #eef}
.mem-form-section h3 i{color:var(--mem-primary)}
.mem-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.mem-field-row.full{grid-template-columns:1fr}
.mem-field label{display:block;font-size:12.5px;font-weight:700;color:var(--mem-text);margin-bottom:5px}
.mem-field label span{color:#e53935}
.mem-field input,.mem-field select,.mem-field textarea{width:100%;border:1.5px solid #dde;border-radius:7px;padding:9px 12px;font-size:14px;color:var(--mem-text);background:#fff;transition:border-color .2s}
.mem-field input:focus,.mem-field select:focus,.mem-field textarea:focus{border-color:var(--mem-primary);outline:none;box-shadow:0 0 0 3px rgba(0,77,64,.08)}
.mem-field textarea{min-height:80px;resize:vertical}

/* ── Payment section ────────────────────────────────────────── */
.mem-payment-options{display:flex;gap:14px;margin-bottom:18px}
.mem-pay-opt{flex:1;border:2px solid var(--mem-border);border-radius:9px;padding:16px;cursor:pointer;transition:all .2s;text-align:center}
.mem-pay-opt:hover,.mem-pay-opt.selected{border-color:var(--mem-primary);background:#f0f7f5}
.mem-pay-opt i{font-size:24px;color:var(--mem-primary);display:block;margin-bottom:6px}
.mem-pay-opt strong{display:block;font-size:13.5px;color:var(--mem-text)}
.mem-pay-opt span{font-size:12px;color:var(--mem-muted)}
.mem-bank-details{background:#f8faf9;border:1px solid var(--mem-border);border-radius:8px;padding:14px;font-size:13px;color:var(--mem-muted);white-space:pre-wrap;display:none}
.mem-bank-details.visible{display:block}

/* ── Summary bar ────────────────────────────────────────────── */
.mem-summary-bar{background:var(--mem-primary);color:#fff;border-radius:var(--mem-radius);padding:18px 24px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.mem-summary-tier{font-size:1rem;font-weight:700}
.mem-summary-fee{font-size:1.5rem;font-weight:800}
.mem-summary-fee span{font-size:13px;font-weight:400;opacity:.8}

/* ── Submit button ──────────────────────────────────────────── */
.mem-submit-btn{display:block;width:100%;background:var(--mem-primary);color:#fff;border:none;border-radius:8px;padding:14px;font-size:15px;font-weight:700;cursor:pointer;transition:background .2s;margin-top:8px}
.mem-submit-btn:hover{background:var(--mem-primary-light)}
.mem-submit-btn:disabled{opacity:.6;cursor:not-allowed}

/* ── Portal membership tab ──────────────────────────────────── */
.mem-portal-wrap{padding:8px 0}
.mem-card{background:var(--background-light,#F7FAFC);border:1.5px solid var(--mem-border);border-radius:14px;padding:28px 32px;color:var(--mem-text);position:relative;overflow:hidden;margin-bottom:28px;box-shadow:0 2px 10px rgba(0,77,64,.07)}
.mem-card::after{content:'';position:absolute;top:-30px;right:-30px;width:160px;height:160px;border:1px solid rgba(0,77,64,.06);border-radius:50%}
.mem-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}
.mem-card-name{font-size:1.3rem;font-weight:800}
.mem-card-tier{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--mem-muted);margin-top:3px}
.mem-card-badge{background:var(--mem-bg);border:1px solid var(--mem-border);padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;color:var(--mem-text)}
.mem-card-meta{display:flex;gap:28px;flex-wrap:wrap}
.mem-card-meta-item .lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--mem-muted);margin-bottom:3px}
.mem-card-meta-item .val{font-size:14px;font-weight:700}
.mem-card-actions{margin-top:20px;display:flex;gap:10px;flex-wrap:wrap}
.mem-card-actions a{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:7px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s}
.mem-card-btn-white{background:var(--mem-bg);border:1.5px solid var(--mem-border);color:var(--mem-primary)}
.mem-card-btn-white:hover{background:#e6f0eb;color:var(--mem-primary)}
.mem-card-btn-solid{background:#fff;color:var(--mem-primary)}
.mem-card-btn-solid:hover{background:#f0f7f5;color:var(--mem-primary)}

/* ── Benefits grid ──────────────────────────────────────────── */
.mem-benefits-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:28px}
.mem-benefit-card{background:#fff;border:1px solid var(--mem-border);border-radius:10px;padding:18px;text-align:center}
.mem-benefit-card .ben-icon{width:44px;height:44px;border-radius:10px;background:rgba(0,77,64,.08);color:var(--mem-primary);display:flex;align-items:center;justify-content:center;font-size:19px;margin:0 auto 10px}
.mem-benefit-card .ben-val{font-size:1.4rem;font-weight:800;color:var(--mem-primary)}
.mem-benefit-card .ben-lbl{font-size:12px;color:var(--mem-muted);margin-top:3px}

/* ── Seats management ───────────────────────────────────────── */
.mem-seats-wrap{background:#fff;border:1px solid var(--mem-border);border-radius:var(--mem-radius);padding:20px;margin-bottom:24px}
.mem-seats-wrap h3{font-size:.95rem;font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:7px}
.mem-seats-wrap h3 i{color:var(--mem-primary)}
.mem-seat-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f0f0}
.mem-seat-item:last-child{border-bottom:none}
.mem-seat-avatar{width:36px;height:36px;border-radius:50%;background:rgba(0,77,64,.1);color:var(--mem-primary);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex-shrink:0}
.mem-seat-info{flex:1}
.mem-seat-name{font-size:13.5px;font-weight:600;color:var(--mem-text)}
.mem-seat-email{font-size:12px;color:var(--mem-muted)}
.mem-seat-role{font-size:11px;font-weight:700;padding:2px 9px;border-radius:10px;background:rgba(0,77,64,.08);color:var(--mem-primary)}
.mem-invite-form{display:flex;gap:10px;margin-top:14px}
.mem-invite-form input{flex:1;border:1.5px solid #dde;border-radius:7px;padding:9px 12px;font-size:13.5px}
.mem-invite-form button{background:var(--mem-primary);color:#fff;border:none;border-radius:7px;padding:9px 18px;font-size:13.5px;font-weight:700;cursor:pointer}

/* ── No membership state ────────────────────────────────────── */
.mem-no-membership{background:var(--mem-bg);border:1.5px dashed var(--mem-border);border-radius:var(--mem-radius);padding:48px 32px;text-align:center}
.mem-no-membership .mem-empty-icon{font-size:3rem;color:var(--mem-border);margin-bottom:14px}
.mem-no-membership h3{font-size:1.2rem;font-weight:700;margin:0 0 8px}
.mem-no-membership p{font-size:13.5px;color:var(--mem-muted);max-width:400px;margin:0 auto 20px}

/* ── Directory ──────────────────────────────────────────────── */
.mem-dir-search{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.mem-dir-search input,.mem-dir-search select{border:1.5px solid var(--mem-border);border-radius:7px;padding:9px 14px;font-size:14px;background:#fff}
.mem-dir-search input{flex:1}
.mem-dir-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.mem-dir-card{background:#fff;border:1px solid var(--mem-border);border-radius:var(--mem-radius);padding:20px;transition:box-shadow .2s}
.mem-dir-card:hover{box-shadow:0 6px 20px rgba(0,77,64,.1)}
.mem-dir-card-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mem-dir-avatar{width:46px;height:46px;border-radius:10px;background:rgba(0,77,64,.08);color:var(--mem-primary);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0}
.mem-dir-name{font-size:.95rem;font-weight:700;color:var(--mem-text)}
.mem-dir-tier{font-size:11.5px;color:var(--mem-muted)}
.mem-dir-meta{font-size:12.5px;color:var(--mem-muted);display:flex;flex-direction:column;gap:5px}
.mem-dir-meta span{display:flex;align-items:center;gap:5px}
.mem-dir-meta i{color:var(--mem-primary);font-size:11px}

/* ── Status badges ──────────────────────────────────────────── */
.mem-status-badge{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:12px;text-transform:uppercase;letter-spacing:.4px}
.mem-status-active{background:#e6f9ee;color:#1b7a3e;border:1px solid #a8e6bd}
.mem-status-pending{background:#fff8e6;color:#8a6100;border:1px solid #f5d88b}
.mem-status-expired{background:#feeaea;color:#b91c1c;border:1px solid #fca5a5}
.mem-status-suspended{background:#f1f3f5;color:#6b7280;border:1px solid #d1d5db}
.mem-status-rejected{background:#feeaea;color:#b91c1c;border:1px solid #fca5a5}

/* ── Checkout member notice ─────────────────────────────────── */
.mem-checkout-notice{background:#f0f7f5;border:1.5px solid var(--mem-border);border-radius:8px;padding:12px 16px;font-size:13.5px;color:var(--mem-primary);margin-bottom:14px;display:flex;align-items:center;gap:8px}

/* ── Tier color badges ──────────────────────────────────────── */
.tier-badge-gold{color:var(--mem-gold);font-weight:700}
.tier-badge-silver{color:var(--mem-silver);font-weight:700}
.tier-badge-bronze{color:var(--mem-bronze);font-weight:700}
.tier-badge-fellow{color:var(--mem-fellow);font-weight:700}
.tier-badge-associate{color:var(--mem-assoc);font-weight:700}
.tier-badge-student{color:var(--mem-student);font-weight:700}

/* ── Alert/notice ───────────────────────────────────────────── */
.mem-alert{padding:12px 16px;border-radius:8px;font-size:13.5px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.mem-alert-success{background:#e6f9ee;color:#1b7a3e;border:1px solid #a8e6bd}
.mem-alert-error{background:#feeaea;color:#b91c1c;border:1px solid #fca5a5}
.mem-alert-info{background:#f0f7f5;color:var(--mem-primary);border:1px solid var(--mem-border)}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:700px){
    .mem-type-grid,.mem-tier-grid{grid-template-columns:1fr}
    .mem-field-row{grid-template-columns:1fr}
    .mem-benefits-grid{grid-template-columns:1fr 1fr}
    .mem-card-meta{gap:16px}
    .mem-dir-grid{grid-template-columns:1fr}
}