/* ═══════════════════════════════════════════════
   MAWA Category Display v4
   ONE colour only: #ABDDDE — Poppins
   ═══════════════════════════════════════════════ */

.mcd-root { font-family:'Poppins',sans-serif; color:#0d4a4c; background:transparent; }
.mcd-root * { box-sizing:border-box; margin:0; padding:0; }

/* ── HEADER ── */
.mcd-header {
    margin-bottom:22px;
    padding-bottom:18px;
    border-bottom:2px solid #ABDDDE;
}
.mcd-heading {
    font-size:26px; font-weight:700;
    color:#0d4a4c; line-height:1.25; margin-bottom:5px;
}
.mcd-total { font-size:13px; font-weight:400; color:#5a8a8c; }

/* ── TAB BAR ── */
.mcd-tabs {
    display:flex;
    border-bottom:2px solid #ABDDDE;
    margin-bottom:24px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.mcd-tabs::-webkit-scrollbar { display:none; }

.mcd-tab {
    display:inline-flex; align-items:center; gap:7px;
    padding:12px 20px;
    background:transparent; border:none;
    border-bottom:3px solid transparent;
    margin-bottom:-2px;
    font-family:'Poppins',sans-serif; font-size:13px; font-weight:500;
    color:#5a8a8c; cursor:pointer;
    transition:all 0.2s ease; white-space:nowrap; flex-shrink:0;
}
.mcd-tab svg { width:15px; height:15px; flex-shrink:0; stroke:#ABDDDE; }
.mcd-tab:hover {
    color:#0d4a4c;
    background:#f4fbfb;
}
.mcd-tab.active {
    color:#0d4a4c;
    font-weight:600;
    border-bottom-color:#ABDDDE;
    background:#f4fbfb;
}

/* Tab count badge */
.mcd-tab-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:22px; padding:0 6px;
    background:#d4eeef;
    color:#0d4a4c;
    border-radius:20px; font-size:11px; font-weight:600;
}
.mcd-tab.active .mcd-tab-count {
    background:#ABDDDE;
    color:#0d4a4c;
}

/* ── PANEL ANIMATION ── */
.mcd-panel { animation:mcd-fade 0.22s ease; }
@keyframes mcd-fade { from{opacity:0;transform:translateY(5px);} to{opacity:1;transform:translateY(0);} }

/* ── GRID ── */
.mcd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }

/* ── CARD ── */
.mcd-card {
    background:#ffffff;
    border:1.5px solid #d4eeef;
    border-radius:14px; overflow:hidden;
    display:flex; flex-direction:column;
    transition:transform 0.18s, border-color 0.2s, box-shadow 0.2s;
    animation:mcd-in 0.3s ease both;
}
.mcd-card:hover {
    transform:translateY(-3px);
    border-color:#ABDDDE;
    box-shadow:0 8px 28px rgba(171,221,222,0.3);
}
@keyframes mcd-in { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }

/* Single teal bar on every card regardless of type */
.mcd-card-bar,
.mcd-card-bar--f2f,
.mcd-card-bar--online,
.mcd-card-bar--inhouse {
    height:4px;
    background:#ABDDDE;
    flex-shrink:0;
}

.mcd-card-body { padding:16px 18px 13px; flex:1; display:flex; flex-direction:column; gap:10px; }

/* Top row: badge + fee */
.mcd-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* Single teal badge style for all types */
.mcd-badge,
.mcd-badge--f2f,
.mcd-badge--online,
.mcd-badge--inhouse {
    display:inline-flex; align-items:center;
    padding:3px 10px; border-radius:20px;
    font-size:10px; font-weight:600; letter-spacing:0.05em;
    text-transform:uppercase; white-space:nowrap;
    background:#f4fbfb;
    color:#0d4a4c;
    border:1px solid #ABDDDE;
}

.mcd-fee { font-size:13px; font-weight:700; color:#0d4a4c; white-space:nowrap; }

.mcd-card-title { font-size:14px; font-weight:600; color:#0d4a4c; line-height:1.45; }

/* Meta */
.mcd-card-meta { display:flex; flex-direction:column; gap:6px; }
.mcd-meta-row {
    display:flex; align-items:flex-start; gap:8px;
    font-size:12px; color:#5a8a8c; line-height:1.4;
}
.mcd-meta-row svg { width:13px; height:13px; stroke:#ABDDDE; flex-shrink:0; margin-top:1px; }

/* ── CARD FOOTER ── */
.mcd-card-footer {
    padding:11px 18px 15px;
    border-top:1px solid #f4fbfb;
    display:flex; align-items:center; justify-content:flex-end;
    flex-shrink:0;
}
.mcd-btn {
    display:inline-flex; align-items:center; gap:5px;
    padding:8px 15px;
    background:#0d4a4c; color:#ffffff;
    border-radius:8px;
    font-family:'Poppins',sans-serif; font-size:12px; font-weight:600;
    text-decoration:none; transition:all 0.2s ease; white-space:nowrap;
}
.mcd-btn:hover { background:#0f5c5e; color:#ffffff; text-decoration:none; }
.mcd-btn svg { width:12px; height:12px; }
.mcd-enquire { font-size:12px; color:#8ab0b1; font-style:italic; }

/* ── EMPTY STATE ── */
.mcd-empty {
    text-align:center; padding:56px 20px;
    border:1.5px dashed #d4eeef;
    border-radius:14px; background:#f4fbfb;
}
.mcd-empty svg { width:42px; height:42px; stroke:#d4eeef; display:block; margin:0 auto 14px; }
.mcd-empty p { font-size:14px; color:#5a8a8c; font-weight:300; }

/* ══════════════════════════
   RESPONSIVE
   ══════════════════════════ */
@media(max-width:860px) {
    .mcd-grid { grid-template-columns:repeat(2,1fr); }
    .mcd-heading { font-size:22px; }
}
@media(max-width:580px) {
    .mcd-heading { font-size:20px; }
    .mcd-tab { padding:10px 13px; font-size:12px; gap:5px; }
    .mcd-tab svg { width:13px; height:13px; }
    .mcd-tab-count { min-width:18px; height:18px; font-size:10px; }
    .mcd-grid { grid-template-columns:1fr; gap:12px; }
    .mcd-card-body { padding:14px 14px 11px; }
    .mcd-card-footer { padding:10px 14px 13px; }
    .mcd-card-title { font-size:14px; }
}