@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --mm-primary:        #4F46E5;
    --mm-primary-dark:   #3730A3;
    --mm-primary-light:  #EEF2FF;
    --mm-secondary:      #06B6D4;
    --mm-accent:         #F59E0B;
    --mm-success:        #10B981;
    --mm-danger:         #EF4444;
    --mm-warning:        #F59E0B;

    --mm-dark:           #0F172A;
    --mm-dark-2:         #1E293B;
    --mm-dark-3:         #334155;
    --mm-gray:           #64748B;
    --mm-gray-light:     #94A3B8;
    --mm-border:         #E2E8F0;
    --mm-bg:             #F8FAFC;
    --mm-white:          #FFFFFF;

    --mm-font-main:      'Plus Jakarta Sans', sans-serif;
    --mm-font-body:      'DM Sans', sans-serif;

    --mm-radius-sm:      8px;
    --mm-radius:         12px;
    --mm-radius-lg:      16px;
    --mm-radius-xl:      24px;

    --mm-shadow-sm:      0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --mm-shadow:         0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --mm-shadow-lg:      0 10px 40px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.06);
    --mm-shadow-primary: 0 8px 24px rgba(79,70,229,0.28);

    --mm-transition:     all 0.25s ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family:      var(--mm-font-body);
    font-size:        15px;
    color:            var(--mm-dark);
    background-color: var(--mm-bg);
    line-height:      1.7;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--mm-font-main);
    font-weight: 700;
    line-height: 1.3;
    color:       var(--mm-dark);
}

a {
    color:           var(--mm-primary);
    text-decoration: none;
    transition:      var(--mm-transition);
}

a:hover { color: var(--mm-primary-dark); }

img { max-width: 100%; }

.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }

/* ============================================
   NAVBAR
   ============================================ */
.mm-navbar {
    background:    var(--mm-white);
    border-bottom: 1px solid var(--mm-border);
    padding:       10px 0;
    box-shadow:    var(--mm-shadow-sm);
    z-index:       1000;
}

.mm-brand-icon {
    width:           38px;
    height:          38px;
    background:      linear-gradient(135deg, var(--mm-primary), var(--mm-secondary));
    border-radius:   10px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           white;
    font-size:       18px;
    flex-shrink:     0;
}

.mm-brand-icon--sm {
    width:         30px;
    height:        30px;
    font-size:     14px;
    border-radius: 8px;
}

.mm-brand-text {
    font-family:    var(--mm-font-main);
    font-weight:    800;
    font-size:      20px;
    color:          var(--mm-dark);
    letter-spacing: -0.3px;
}

.mm-navbar .nav-link {
    font-family:   var(--mm-font-main);
    font-weight:   500;
    font-size:     14px;
    color:         var(--mm-gray);
    padding:       7px 14px;
    border-radius: var(--mm-radius-sm);
    transition:    var(--mm-transition);
}

.mm-navbar .nav-link:hover,
.mm-navbar .nav-link.active {
    color:      var(--mm-primary);
    background: var(--mm-primary-light);
}

.mm-nav-avatar {
    width:         34px;
    height:        34px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--mm-border);
}

.mm-user-pill {
    background:    var(--mm-bg);
    border-radius: 40px;
    padding:       4px 12px 4px 4px !important;
    border:        1px solid var(--mm-border);
}

.mm-user-pill:hover {
    background:   var(--mm-primary-light) !important;
    border-color: var(--mm-primary) !important;
}

/* Notification badge */
.mm-notif-badge {
    position:        absolute;
    top:             2px;
    right:           2px;
    width:           18px;
    height:          18px;
    background:      var(--mm-danger);
    color:           white;
    font-size:       10px;
    font-weight:     700;
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
}

.mm-notif-dropdown {
    width:         340px;
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius);
    overflow:      hidden;
}

.mm-notif-header {
    background:    var(--mm-bg);
    border-bottom: 1px solid var(--mm-border);
}

.mm-notif-item {
    border-bottom: 1px solid var(--mm-border);
    transition:    var(--mm-transition);
}

.mm-notif-item:hover { background: var(--mm-primary-light); }

.mm-notif-dot {
    width:         8px;
    height:        8px;
    background:    var(--mm-primary);
    border-radius: 50%;
    flex-shrink:   0;
}

.mm-user-dropdown {
    min-width:     220px;
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius);
    overflow:      hidden;
}

.mm-user-dropdown .dropdown-item {
    font-size:  14px;
    transition: var(--mm-transition);
}

.mm-user-dropdown .dropdown-item:hover {
    background: var(--mm-primary-light);
    color:      var(--mm-primary);
}

/* ============================================
   BUTTONS
   ============================================ */
.mm-btn-primary {
    background:    linear-gradient(135deg, var(--mm-primary), var(--mm-primary-dark));
    color:         white !important;
    border:        none;
    border-radius: var(--mm-radius-sm);
    font-family:   var(--mm-font-main);
    font-weight:   600;
    font-size:     14px;
    padding:       10px 24px;
    transition:    var(--mm-transition);
    box-shadow:    var(--mm-shadow-primary);
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
}

.mm-btn-primary:hover {
    transform:  translateY(-2px);
    box-shadow: 0 12px 28px rgba(79,70,229,0.38);
    color:      white !important;
}

.mm-btn-primary:active { transform: translateY(0); }

.mm-btn-outline {
    background:    transparent;
    color:         var(--mm-primary) !important;
    border:        2px solid var(--mm-primary);
    border-radius: var(--mm-radius-sm);
    font-family:   var(--mm-font-main);
    font-weight:   600;
    font-size:     14px;
    padding:       9px 24px;
    transition:    var(--mm-transition);
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
}

.mm-btn-outline:hover {
    background: var(--mm-primary);
    color:      white !important;
    transform:  translateY(-2px);
}

.mm-btn-secondary {
    background:    var(--mm-bg);
    color:         var(--mm-dark) !important;
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    font-family:   var(--mm-font-main);
    font-weight:   600;
    font-size:     14px;
    padding:       10px 24px;
    transition:    var(--mm-transition);
    cursor:        pointer;
}

.mm-btn-secondary:hover {
    background: var(--mm-border);
    transform:  translateY(-1px);
}

.mm-btn-white {
    background:    white;
    color:         var(--mm-primary) !important;
    border:        none;
    border-radius: var(--mm-radius-sm);
    font-family:   var(--mm-font-main);
    font-weight:   600;
    font-size:     14px;
    padding:       10px 24px;
    transition:    var(--mm-transition);
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    box-shadow:    var(--mm-shadow);
}

.mm-btn-white:hover {
    transform:  translateY(-2px);
    box-shadow: var(--mm-shadow-lg);
    color:      var(--mm-primary-dark) !important;
}

.mm-btn-outline-white {
    background:    transparent;
    color:         white !important;
    border:        2px solid rgba(255,255,255,0.5);
    border-radius: var(--mm-radius-sm);
    font-family:   var(--mm-font-main);
    font-weight:   600;
    font-size:     14px;
    padding:       9px 24px;
    transition:    var(--mm-transition);
    cursor:        pointer;
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
}

.mm-btn-outline-white:hover {
    background:    rgba(255,255,255,0.15);
    border-color:  white;
    color:         white !important;
    transform:     translateY(-2px);
}

/* ============================================
   HERO SECTION
   ============================================ */
.mm-hero {
    background:  linear-gradient(135deg, #0F172A 0%, #1a2744 40%, #0F172A 100%);
    padding:     96px 0 80px;
    position:    relative;
    overflow:    hidden;
}

.mm-hero-bg {
    position:   absolute;
    inset:      0;
    pointer-events: none;
    overflow:   hidden;
}

.mm-hero-bg::before {
    content:    '';
    position:   absolute;
    top:        -20%;
    left:       -10%;
    width:      700px;
    height:     700px;
    background: radial-gradient(circle, rgba(79,70,229,0.18) 0%, transparent 65%);
    border-radius: 50%;
}

.mm-hero-bg::after {
    content:    '';
    position:   absolute;
    bottom:     -30%;
    right:      -5%;
    width:      500px;
    height:     500px;
    background: radial-gradient(circle, rgba(6,182,212,0.12) 0%, transparent 65%);
    border-radius: 50%;
}

/* Extra glow top-right */
.mm-hero::after {
    content:        '';
    position:       absolute;
    top:            10%;
    right:          15%;
    width:          300px;
    height:         300px;
    background:     radial-gradient(circle, rgba(245,158,11,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.mm-hero-title {
    font-size:      clamp(34px, 5vw, 56px);
    font-weight:    800;
    color:          white;
    line-height:    1.12;
    letter-spacing: -1.5px;
}

.mm-text-gradient {
    background:              linear-gradient(135deg, var(--mm-secondary) 0%, #818CF8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip:         text;
}

.mm-hero-subtitle {
    font-size:   17px;
    color:       rgba(255,255,255,0.62);
    max-width:   500px;
    line-height: 1.8;
    margin-top:  16px;
}

/* Badge pill */
.mm-badge-pill {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    background:     rgba(79,70,229,0.2);
    color:          #a5b4fc;
    border:         1px solid rgba(79,70,229,0.35);
    border-radius:  30px;
    padding:        5px 14px;
    font-family:    var(--mm-font-main);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.3px;
}

/* Trust bar */
.mm-trust-bar {
    display:     flex;
    align-items: center;
    gap:         24px;
    flex-wrap:   wrap;
    padding:     20px 24px;
    background:  rgba(255,255,255,0.05);
    border:      1px solid rgba(255,255,255,0.1);
    border-radius: var(--mm-radius-lg);
    backdrop-filter: blur(8px);
    width:       fit-content;
}

.mm-trust-item {
    text-align: center;
    min-width:  70px;
}

.mm-trust-num {
    display:     block;
    font-family: var(--mm-font-main);
    font-size:   22px;
    font-weight: 800;
    color:       white;
    line-height: 1;
}

.mm-trust-label {
    display:    block;
    font-size:  11px;
    color:      rgba(255,255,255,0.48);
    margin-top: 3px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mm-trust-divider {
    width:      1px;
    height:     36px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

/* Hero illustration floating cards */
.mm-hero-illustration {
    position:   relative;
    width:      100%;
    height:     380px;
}

.mm-hero-card {
    position:      absolute;
    background:    rgba(255,255,255,0.95);
    border-radius: var(--mm-radius);
    padding:       16px 18px;
    box-shadow:    0 8px 32px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
    animation:     mmFloat 5s ease-in-out infinite;
}

.mm-hero-card-1 {
    top:        40px;
    left:       10%;
    min-width:  180px;
    animation-delay: 0s;
}

.mm-hero-card-2 {
    top:        30%;
    right:      5%;
    min-width:  150px;
    display:    flex;
    align-items: center;
    animation-delay: 0.8s;
}

.mm-hero-card-3 {
    bottom:     15%;
    left:       20%;
    min-width:  110px;
    animation-delay: 1.4s;
}

.mm-avatar-sm {
    width:  36px;
    height: 36px;
    font-size: 16px;
}

/* Hero icon grid */
.mm-hero-icon-grid {
    position:   absolute;
    bottom:     5%;
    right:      0;
    display:    grid;
    grid-template-columns: repeat(2,1fr);
    gap:        12px;
}

.mm-icon-bubble {
    width:           52px;
    height:          52px;
    background:      linear-gradient(135deg, rgba(79,70,229,0.15), rgba(6,182,212,0.1));
    border:          1px solid rgba(255,255,255,0.12);
    border-radius:   var(--mm-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255,255,255,0.7);
    font-size:       20px;
    animation:       mmFloat 4s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
    backdrop-filter: blur(4px);
}

@keyframes mmFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-10px); }
}

/* ============================================
   SECTION STYLES
   ============================================ */
.mm-section       { padding: 80px 0; }
.mm-section-sm    { padding: 50px 0; }
.mm-bg-light      { background-color: var(--mm-bg); }

.mm-section-tag {
    display:        inline-block;
    font-family:    var(--mm-font-main);
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color:          var(--mm-primary);
    background:     var(--mm-primary-light);
    padding:        4px 14px;
    border-radius:  20px;
    margin-bottom:  10px;
}

.mm-section-title {
    font-size:      clamp(24px, 3vw, 36px);
    font-weight:    800;
    color:          var(--mm-dark);
    letter-spacing: -0.5px;
    margin-bottom:  8px;
}

.mm-section-subtitle {
    font-size:   16px;
    color:       var(--mm-gray);
    max-width:   520px;
    line-height: 1.75;
}

.mm-section-divider {
    width:         48px;
    height:        4px;
    background:    linear-gradient(90deg, var(--mm-primary), var(--mm-secondary));
    border-radius: 2px;
    margin:        12px 0 20px;
}

/* ============================================
   CATEGORY CARDS
   ============================================ */
.mm-category-card {
    background:    var(--mm-white);
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    padding:       28px 20px 24px;
    text-align:    center;
    cursor:        pointer;
    transition:    var(--mm-transition);
    text-decoration: none;
    display:       block;
}

.mm-category-card:hover {
    background:   var(--mm-primary);
    border-color: var(--mm-primary);
    transform:    translateY(-5px);
    box-shadow:   var(--mm-shadow-primary);
}

.mm-cat-icon {
    width:           52px;
    height:          52px;
    background:      var(--mm-primary-light);
    border-radius:   var(--mm-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    color:           var(--mm-primary);
    margin:          0 auto 14px;
    transition:      var(--mm-transition);
}

.mm-category-card:hover .mm-cat-icon {
    background: rgba(255,255,255,0.18);
    color:      white;
}

.mm-cat-name {
    font-family: var(--mm-font-main);
    font-weight: 700;
    font-size:   14px;
    color:       var(--mm-dark);
    transition:  var(--mm-transition);
    margin-bottom: 4px;
}

.mm-cat-desc {
    font-size:  12px;
    color:      var(--mm-gray);
    line-height: 1.5;
    transition: var(--mm-transition);
}

.mm-category-card:hover .mm-cat-name,
.mm-category-card:hover .mm-cat-desc { color: rgba(255,255,255,0.9); }

/* legacy .mm-cat-card alias */
.mm-cat-card { }
.mm-cat-count {
    font-size:  12px;
    color:      var(--mm-gray);
    margin-top: 4px;
    transition: var(--mm-transition);
}
.mm-cat-card:hover .mm-cat-count { color: rgba(255,255,255,0.75); }

/* ============================================
   MENTOR CARD
   ============================================ */
.mm-mentor-card {
    background:    var(--mm-white);
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    display:       flex;
    flex-direction: column;
    transition:    var(--mm-transition);
    position:      relative;
    overflow:      hidden;
}

.mm-mentor-card::before {
    content:    '';
    position:   absolute;
    top:        0; left: 0; right: 0;
    height:     3px;
    background: linear-gradient(90deg, var(--mm-primary), var(--mm-secondary));
    transform:  scaleX(0);
    transition: var(--mm-transition);
    transform-origin: left;
}

.mm-mentor-card:hover {
    box-shadow:   var(--mm-shadow-lg);
    transform:    translateY(-5px);
    border-color: rgba(79,70,229,0.2);
}

.mm-mentor-card:hover::before { transform: scaleX(1); }

/* Card top — avatar area */
.mm-mentor-card-top {
    display:         flex;
    align-items:     flex-start;
    justify-content: space-between;
    padding:         20px 20px 0;
}

.mm-mentor-avatar-wrap {
    position:   relative;
    display:    inline-block;
}

.mm-mentor-avatar {
    width:         68px;
    height:        68px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--mm-primary-light);
    display:       block;
}

.mm-mentor-avatar-lg {
    width:         100px;
    height:        100px;
    border-radius: 50%;
    object-fit:    cover;
    border:        4px solid var(--mm-primary-light);
}

.mm-online-dot {
    position:      absolute;
    bottom:        3px;
    right:         3px;
    width:         13px;
    height:        13px;
    background:    var(--mm-success);
    border-radius: 50%;
    border:        2px solid white;
}

.mm-mentor-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    font-size:     11px;
    font-weight:   600;
    font-family:   var(--mm-font-main);
    color:         var(--mm-primary);
    background:    var(--mm-primary-light);
    padding:       4px 10px;
    border-radius: 20px;
}

/* Card body */
.mm-mentor-card-body {
    padding:    14px 20px 16px;
    flex:       1;
}

.mm-mentor-name {
    font-size:      16px;
    font-weight:    700;
    color:          var(--mm-dark);
    margin-bottom:  2px;
}

.mm-mentor-headline {
    font-size:    13px;
    color:        var(--mm-gray);
    line-height:  1.5;
    margin-bottom: 8px;
}

.mm-mentor-company {
    font-size:    12px;
    color:        var(--mm-gray-light);
    margin-bottom: 14px;
    font-weight:  500;
}

/* Stats inside card */
.mm-mentor-stats {
    display:         flex;
    align-items:     center;
    gap:             0;
    background:      var(--mm-bg);
    border-radius:   var(--mm-radius-sm);
    padding:         10px 12px;
    margin-bottom:   12px;
}

.mm-stat-item {
    flex:       1;
    text-align: center;
}

.mm-stat-label {
    font-size:  11px;
    color:      var(--mm-gray-light);
    margin-top: 2px;
    font-weight: 500;
}

.mm-stat-divider {
    width:      1px;
    height:     30px;
    background: var(--mm-border);
    flex-shrink: 0;
}

/* Tags */
.mm-mentor-tags {
    display:  flex;
    flex-wrap: wrap;
    gap:       6px;
}

.mm-tag {
    display:       inline-flex;
    align-items:   center;
    padding:       3px 10px;
    background:    var(--mm-primary-light);
    color:         var(--mm-primary);
    border-radius: 20px;
    font-size:     11px;
    font-weight:   600;
    font-family:   var(--mm-font-main);
}

.mm-tag-more {
    background: var(--mm-bg);
    color:      var(--mm-gray);
    border:     1px solid var(--mm-border);
}

/* Card footer */
.mm-mentor-card-footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         14px 20px;
    border-top:      1px solid var(--mm-border);
    background:      var(--mm-bg);
}

.mm-mentor-price {
    font-family: var(--mm-font-main);
    font-size:   18px;
    font-weight: 800;
    color:       var(--mm-dark);
    line-height: 1;
}

.mm-price-label {
    font-size:   12px;
    color:       var(--mm-gray);
    font-weight: 400;
}

/* ============================================
   HOW IT WORKS — STEP CARDS
   ============================================ */
.mm-step-card {
    background:    var(--mm-white);
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    padding:       36px 28px;
    transition:    var(--mm-transition);
    position:      relative;
    height:        100%;
}

.mm-step-card:hover {
    box-shadow:   var(--mm-shadow);
    transform:    translateY(-4px);
    border-color: rgba(79,70,229,0.18);
}

.mm-step-card-featured {
    background: linear-gradient(135deg, var(--mm-primary), var(--mm-primary-dark));
    border-color: var(--mm-primary);
}

.mm-step-card-featured:hover { border-color: var(--mm-primary); }

.mm-step-num {
    font-family:    var(--mm-font-main);
    font-size:      44px;
    font-weight:    800;
    color:          var(--mm-border);
    line-height:    1;
    margin-bottom:  12px;
    letter-spacing: -2px;
}

.mm-step-card-featured .mm-step-num { color: rgba(255,255,255,0.18); }

.mm-step-icon {
    width:           56px;
    height:          56px;
    background:      var(--mm-primary-light);
    border-radius:   var(--mm-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    color:           var(--mm-primary);
    margin:          0 auto 18px;
    transition:      var(--mm-transition);
}

.mm-step-card-featured .mm-step-icon {
    background: rgba(255,255,255,0.18);
    color:      white;
}

.mm-step-title {
    font-size:   17px;
    font-weight: 700;
    margin-bottom: 8px;
    color:       var(--mm-dark);
}

.mm-step-card-featured .mm-step-title { color: white; }

.mm-step-desc {
    font-size:   14px;
    color:       var(--mm-gray);
    line-height: 1.75;
}

.mm-step-card-featured .mm-step-desc { color: rgba(255,255,255,0.7); }

/* ============================================
   TESTIMONIALS
   ============================================ */
.mm-testimonial-card {
    background:    var(--mm-white);
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    padding:       28px;
    transition:    var(--mm-transition);
    height:        100%;
    display:       flex;
    flex-direction: column;
}

.mm-testimonial-card:hover {
    box-shadow:   var(--mm-shadow);
    transform:    translateY(-4px);
    border-color: rgba(79,70,229,0.15);
}

.mm-testimonial-featured {
    background:   linear-gradient(135deg, var(--mm-primary), var(--mm-primary-dark));
    border-color: var(--mm-primary);
}

.mm-testimonial-featured:hover { border-color: var(--mm-primary); }

.mm-testimonial-text {
    font-size:    15px;
    color:        var(--mm-dark-3);
    line-height:  1.85;
    font-style:   italic;
    flex:         1;
    margin-bottom: 20px;
}

.mm-testimonial-featured .mm-testimonial-text { color: rgba(255,255,255,0.85); }

.mm-testimonial-avatar {
    width:           42px;
    height:          42px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--mm-primary), var(--mm-secondary));
    color:           white;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--mm-font-main);
    font-weight:     700;
    font-size:       14px;
    flex-shrink:     0;
}

.mm-testimonial-featured .mm-testimonial-avatar {
    background: rgba(255,255,255,0.2);
}

/* ============================================
   CTA SECTION
   ============================================ */
.mm-cta-section {
    background: linear-gradient(135deg, var(--mm-primary) 0%, var(--mm-primary-dark) 50%, #1e1b6e 100%);
    padding:    80px 0;
    position:   relative;
    overflow:   hidden;
}

.mm-cta-section::before {
    content:    '';
    position:   absolute;
    top:        -50%;
    left:       -20%;
    width:      500px;
    height:     500px;
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 65%);
    pointer-events: none;
}

.mm-cta-section::after {
    content:    '';
    position:   absolute;
    bottom:     -30%;
    right:      -10%;
    width:      400px;
    height:     400px;
    background: radial-gradient(circle, rgba(6,182,212,0.15) 0%, transparent 65%);
    pointer-events: none;
}

.mm-cta-title {
    font-size:      clamp(26px, 4vw, 40px);
    font-weight:    800;
    color:          white;
    letter-spacing: -0.5px;
    margin-bottom:  12px;
}

.mm-cta-subtitle {
    font-size:   17px;
    color:       rgba(255,255,255,0.68);
    max-width:   520px;
    margin:      0 auto 32px;
    line-height: 1.75;
}

/* ============================================
   CARDS (generic)
   ============================================ */
.mm-card {
    background:    var(--mm-white);
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    box-shadow:    var(--mm-shadow-sm);
    transition:    var(--mm-transition);
    overflow:      hidden;
}

.mm-card:hover {
    box-shadow:   var(--mm-shadow);
    transform:    translateY(-3px);
    border-color: rgba(79,70,229,0.2);
}

/* ============================================
   BADGES & TAGS
   ============================================ */
.mm-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       4px 10px;
    border-radius: 20px;
    font-size:     12px;
    font-weight:   600;
    font-family:   var(--mm-font-main);
}

.mm-badge-primary  { background: var(--mm-primary-light); color: var(--mm-primary); }
.mm-badge-success  { background: #D1FAE5; color: #065F46; }
.mm-badge-warning  { background: #FEF3C7; color: #92400E; }
.mm-badge-danger   { background: #FEE2E2; color: #991B1B; }
.mm-badge-secondary{ background: var(--mm-bg); color: var(--mm-gray); border: 1px solid var(--mm-border); }

/* ============================================
   FORMS
   ============================================ */
.mm-form-group { margin-bottom: 20px; }

.mm-label {
    display:        block;
    font-family:    var(--mm-font-main);
    font-weight:    600;
    font-size:      12px;
    color:          var(--mm-dark-3);
    margin-bottom:  6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mm-input {
    width:         100%;
    padding:       11px 16px;
    border:        1.5px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    font-family:   var(--mm-font-body);
    font-size:     14px;
    color:         var(--mm-dark);
    background:    var(--mm-white);
    transition:    var(--mm-transition);
    outline:       none;
}

.mm-input:focus {
    border-color: var(--mm-primary);
    box-shadow:   0 0 0 3px rgba(79,70,229,0.1);
}

.mm-input::placeholder { color: var(--mm-gray-light); }

.mm-input-icon { position: relative; }
.mm-input-icon .mm-input { padding-left: 44px; }
.mm-input-icon .mm-icon {
    position:  absolute;
    left:      14px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--mm-gray-light);
    font-size: 16px;
}

/* ============================================
   AUTH PAGES
   ============================================ */
.mm-auth-page {
    min-height:  100vh;
    display:     flex;
    align-items: center;
    background:  linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
    padding:     40px 0;
    position:    relative;
    overflow:    hidden;
}

.mm-auth-page::before {
    content:    '';
    position:   absolute;
    top:        -30%;
    left:       -20%;
    width:      500px;
    height:     500px;
    background: radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%);
}

.mm-auth-card {
    background:    var(--mm-white);
    border-radius: var(--mm-radius-xl);
    padding:       40px;
    box-shadow:    var(--mm-shadow-lg);
    width:         100%;
    max-width:     460px;
    margin:        0 auto;
}

.mm-auth-title {
    font-size:     26px;
    font-weight:   800;
    color:         var(--mm-dark);
    margin-bottom: 6px;
}

.mm-auth-subtitle { font-size: 14px; color: var(--mm-gray); }

.mm-divider {
    display:     flex;
    align-items: center;
    gap:         12px;
    margin:      20px 0;
    color:       var(--mm-gray-light);
    font-size:   13px;
}

.mm-divider::before,
.mm-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--mm-border);
}

/* ============================================
   STAT CARDS (dashboard)
   ============================================ */
.mm-stat-card {
    background:    var(--mm-white);
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    padding:       24px;
    transition:    var(--mm-transition);
    position:      relative;
    overflow:      hidden;
}

.mm-stat-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--mm-shadow);
}

.mm-stat-icon {
    width:           48px;
    height:          48px;
    border-radius:   var(--mm-radius);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       22px;
    margin-bottom:   16px;
}

.mm-stat-num {
    font-family: var(--mm-font-main);
    font-size:   30px;
    font-weight: 800;
    color:       var(--mm-dark);
    line-height: 1;
}

.mm-stat-label {
    font-size:   13px;
    color:       var(--mm-gray);
    margin-top:  4px;
    font-weight: 500;
}

.mm-stat-change {
    font-size:   12px;
    font-weight: 600;
    margin-top:  8px;
}

/* ============================================
   PAGE HEADER
   ============================================ */
.mm-page-header {
    background:    var(--mm-white);
    border-bottom: 1px solid var(--mm-border);
    padding:       28px 0;
    margin-bottom: 32px;
}

.mm-page-header h1 {
    font-size:   24px;
    font-weight: 800;
    margin:      0;
}

.mm-breadcrumb {
    font-size:  13px;
    color:      var(--mm-gray);
    margin-top: 4px;
}

.mm-breadcrumb a { color: var(--mm-gray); }
.mm-breadcrumb a:hover { color: var(--mm-primary); }

/* ============================================
   STATUS BADGES
   ============================================ */
.mm-status {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       4px 12px;
    border-radius: 20px;
    font-size:     12px;
    font-weight:   600;
    font-family:   var(--mm-font-main);
}

.mm-status::before {
    content:       '';
    width:         6px;
    height:        6px;
    border-radius: 50%;
}

.mm-status-pending   { background: #FEF3C7; color: #92400E; }
.mm-status-pending::before   { background: #F59E0B; }

.mm-status-confirmed { background: #D1FAE5; color: #065F46; }
.mm-status-confirmed::before { background: #10B981; }

.mm-status-cancelled { background: #FEE2E2; color: #991B1B; }
.mm-status-cancelled::before { background: #EF4444; }

.mm-status-completed { background: #EEF2FF; color: #3730A3; }
.mm-status-completed::before { background: #4F46E5; }

.mm-status-approved  { background: #D1FAE5; color: #065F46; }
.mm-status-approved::before  { background: #10B981; }

.mm-status-rejected  { background: #FEE2E2; color: #991B1B; }
.mm-status-rejected::before  { background: #EF4444; }

/* ============================================
   TABLES
   ============================================ */
.mm-table {
    width:           100%;
    border-collapse: separate;
    border-spacing:  0;
    font-size:       14px;
}

.mm-table thead th {
    background:     var(--mm-bg);
    color:          var(--mm-gray);
    font-family:    var(--mm-font-main);
    font-weight:    600;
    font-size:      12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding:        12px 16px;
    border-bottom:  2px solid var(--mm-border);
}

.mm-table tbody td {
    padding:        14px 16px;
    border-bottom:  1px solid var(--mm-border);
    vertical-align: middle;
}

.mm-table tbody tr:last-child td { border-bottom: none; }
.mm-table tbody tr:hover          { background: var(--mm-bg); }

/* ============================================
   EMPTY STATE
   ============================================ */
.mm-empty {
    text-align: center;
    padding:    60px 20px;
    color:      var(--mm-gray);
}

.mm-empty-icon {
    font-size:     56px;
    color:         var(--mm-border);
    margin-bottom: 16px;
    display:       block;
}

.mm-empty h5 { font-size: 18px; color: var(--mm-dark-3); margin-bottom: 8px; }
.mm-empty p  { font-size: 14px; color: var(--mm-gray); }

/* ============================================
   FOOTER
   ============================================ */
.mm-footer {
    background: var(--mm-dark);
    padding:    64px 0 0;
    margin-top: 80px;
}

.mm-footer-heading {
    font-family:    var(--mm-font-main);
    font-weight:    700;
    font-size:      12px;
    color:          white;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom:  16px;
}

.mm-footer-links {
    display:        flex;
    flex-direction: column;
    gap:            10px;
}

.mm-footer-links a {
    font-size:  14px;
    color:      rgba(255,255,255,0.48);
    transition: var(--mm-transition);
}

.mm-footer-links a:hover { color: white; }

.mm-footer-social {
    width:           36px;
    height:          36px;
    background:      rgba(255,255,255,0.07);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           rgba(255,255,255,0.5) !important;
    font-size:       16px;
    transition:      var(--mm-transition);
}

.mm-footer-social:hover {
    background: var(--mm-primary);
    color:      white !important;
    transform:  translateY(-2px);
}

.mm-footer-divider {
    border-color: rgba(255,255,255,0.08);
    margin:       40px 0 0;
}

.mm-footer-input {
    background:    rgba(255,255,255,0.08) !important;
    border:        1px solid rgba(255,255,255,0.15) !important;
    color:         white !important;
    border-radius: var(--mm-radius-sm) 0 0 var(--mm-radius-sm) !important;
}

.mm-footer-input::placeholder { color: rgba(255,255,255,0.35) !important; }
.mm-footer-input:focus         { box-shadow: none !important; border-color: var(--mm-primary) !important; }

/* ============================================
   BOOKING SLOTS
   ============================================ */
.mm-slot {
    padding:       10px 16px;
    border:        1.5px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    cursor:        pointer;
    transition:    var(--mm-transition);
    font-size:     13px;
    font-weight:   600;
    font-family:   var(--mm-font-main);
    text-align:    center;
    background:    var(--mm-white);
}

.mm-slot:hover  { border-color: var(--mm-primary); background: var(--mm-primary-light); color: var(--mm-primary); }
.mm-slot.selected { border-color: var(--mm-primary); background: var(--mm-primary); color: white; }
.mm-slot.booked { opacity: .45; cursor: not-allowed; background: var(--mm-bg); text-decoration: line-through; }

/* ============================================
   AVATAR UPLOAD
   ============================================ */
.mm-avatar-upload {
    position: relative;
    display:  inline-block;
    cursor:   pointer;
}

.mm-avatar-upload-img {
    width:         100px;
    height:        100px;
    border-radius: 50%;
    object-fit:    cover;
    border:        3px solid var(--mm-primary-light);
}

.mm-avatar-upload-btn {
    position:        absolute;
    bottom:          0;
    right:           0;
    width:           30px;
    height:          30px;
    background:      var(--mm-primary);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           white;
    font-size:       13px;
    border:          2px solid white;
}

/* ============================================
   UTILITIES
   ============================================ */
.mm-text-primary  { color: var(--mm-primary) !important; }
.mm-text-gray     { color: var(--mm-gray) !important; }
.mm-text-dark     { color: var(--mm-dark) !important; }
.mm-bg-primary    { background: var(--mm-primary-light) !important; }
.mm-border        { border: 1px solid var(--mm-border) !important; }
.mm-rounded       { border-radius: var(--mm-radius) !important; }
.mm-rounded-lg    { border-radius: var(--mm-radius-lg) !important; }
.mm-shadow        { box-shadow: var(--mm-shadow) !important; }
.mm-font-main     { font-family: var(--mm-font-main) !important; }
.min-vh-75        { min-height: 75vh; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .mm-hero           { padding: 70px 0 50px; }
    .mm-section        { padding: 50px 0; }
    .mm-auth-card      { padding: 28px 20px; }
    .mm-trust-bar      { gap: 16px; padding: 16px 18px; }
    .mm-notif-dropdown { width: 300px; }
    .mm-mentor-card-top,
    .mm-mentor-card-body,
    .mm-mentor-card-footer { padding-left: 16px; padding-right: 16px; }
    .mm-hero-illustration { height: 260px; }
}

@media (max-width: 576px) {
    .mm-auth-card { border-radius: var(--mm-radius-lg); }
    .mm-trust-bar { flex-direction: column; gap: 12px; width: 100%; }
    .mm-trust-divider { display: none; }
    .mm-cta-section { padding: 56px 0; }
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--mm-bg); }
::-webkit-scrollbar-thumb { background: var(--mm-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mm-gray-light); }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes mmFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mm-fade-in { animation: mmFadeIn 0.4s ease forwards; }

@keyframes mmPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.05); }
}

.mm-pulse { animation: mmPulse 2s ease-in-out infinite; }

/*-------------------*/

/* ============================================
   MENTORS PAGE — HERO BANNER
   ============================================ */
.mm-mentors-hero {
    background:    linear-gradient(135deg, var(--mm-dark) 0%, var(--mm-dark-2) 60%, #1a1040 100%);
    padding:       48px 0 44px;
    position:      relative;
    overflow:      hidden;
}

.mm-mentors-hero::before {
    content:  '';
    position: absolute;
    inset:    0;
    background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(79,70,229,0.18) 0%, transparent 70%),
                radial-gradient(ellipse 40% 60% at 10% 80%, rgba(6,182,212,0.12) 0%, transparent 60%);
    pointer-events: none;
}

.mm-mentors-hero-inner {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    flex-wrap:       wrap;
}

.mm-hero-pill {
    display:       inline-flex;
    align-items:   center;
    background:    rgba(79,70,229,0.18);
    color:         #a5b4fc;
    border:        1px solid rgba(79,70,229,0.3);
    border-radius: 20px;
    padding:       5px 14px;
    font-size:     12px;
    font-weight:   600;
    font-family:   var(--mm-font-main);
    margin-bottom: 14px;
    letter-spacing: 0.3px;
}

.mm-mentors-hero-title {
    font-family:   var(--mm-font-main);
    font-size:     clamp(28px, 4vw, 40px);
    font-weight:   800;
    color:         white;
    line-height:   1.15;
    margin-bottom: 10px;
}

.mm-mentors-hero-sub {
    color:       rgba(255,255,255,0.6);
    font-size:   15px;
    margin:      0;
    line-height: 1.6;
}

.mm-mentors-hero-sub strong { color: rgba(255,255,255,0.9); }

/* Hero stat strip */
.mm-mentors-hero-stats {
    display:        flex;
    align-items:    center;
    gap:            0;
    background:     rgba(255,255,255,0.05);
    border:         1px solid rgba(255,255,255,0.1);
    border-radius:  var(--mm-radius);
    padding:        18px 28px;
    flex-shrink:    0;
    backdrop-filter: blur(8px);
}

.mm-hs-item {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        0 24px;
}

.mm-hs-num {
    font-family: var(--mm-font-main);
    font-size:   22px;
    font-weight: 800;
    color:       white;
    line-height: 1;
}

.mm-hs-label {
    font-size:  11px;
    color:      rgba(255,255,255,0.45);
    margin-top: 4px;
    font-weight: 500;
}

.mm-hs-divider {
    width:      1px;
    height:     36px;
    background: rgba(255,255,255,0.12);
    flex-shrink: 0;
}

/* ============================================
   MENTORS PAGE — LAYOUT WRAPPER
   ============================================ */
.mm-mentors-layout {
    padding: 36px 0 60px;
}

/* Full width container — no Bootstrap max-width constraint */
.mm-mentors-layout > .container {
    max-width:     100%;
    padding-left:  24px;
    padding-right: 24px;
}

.mm-mentors-wrapper {
    display: flex;
    gap:     24px;
    align-items: flex-start;
}

/* ============================================
   SIDEBAR
   ============================================ */
.mm-sidebar {
    width:       260px;
    flex-shrink: 0;
    /* No left margin — flush to container edge */
    margin-left: 0;
}

/* Sticky offset = actual navbar height (~62px) + small breathing room */
.mm-sidebar .mm-filter-card {
    position: sticky;
    top:      70px;
}

.mm-filter-card {
    background:    var(--mm-white);
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
    overflow:      hidden;
    box-shadow:    var(--mm-shadow-sm);
}

.mm-filter-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 20px;
    border-bottom:   1px solid var(--mm-border);
    background:      var(--mm-bg);
}

.mm-filter-title {
    font-family: var(--mm-font-main);
    font-size:   14px;
    font-weight: 700;
    color:       var(--mm-dark);
    display:     flex;
    align-items: center;
}

.mm-filter-reset {
    font-size:   12px;
    color:       var(--mm-gray);
    font-weight: 600;
    text-decoration: none;
    display:     flex;
    align-items: center;
    transition:  var(--mm-transition);
}

.mm-filter-reset:hover { color: var(--mm-primary); }

.mm-filter-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mm-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mm-filter-label {
    font-size:   12px;
    font-weight: 700;
    color:       var(--mm-dark-3);
    font-family: var(--mm-font-main);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mm-filter-label-sub {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--mm-gray);
}

/* Search input */
.mm-search-wrap {
    position: relative;
}

.mm-search-icon {
    position:  absolute;
    left:      12px;
    top:       50%;
    transform: translateY(-50%);
    color:     var(--mm-gray-light);
    font-size: 13px;
    pointer-events: none;
}

.mm-search-input {
    width:         100%;
    padding:       9px 12px 9px 34px;
    border:        1.5px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    font-size:     13px;
    color:         var(--mm-dark);
    background:    var(--mm-white);
    transition:    var(--mm-transition);
    outline:       none;
    font-family:   var(--mm-font-body);
}

.mm-search-input:focus {
    border-color: var(--mm-primary);
    box-shadow:   0 0 0 3px rgba(79,70,229,0.1);
}

/* Category radio pills */
.mm-filter-options {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.mm-filter-option {
    display:      flex;
    align-items:  center;
    padding:      8px 12px;
    border-radius: var(--mm-radius-sm);
    font-size:    13px;
    color:        var(--mm-gray);
    cursor:       pointer;
    transition:   var(--mm-transition);
    font-weight:  500;
    border:       1.5px solid transparent;
}

.mm-filter-option input[type="radio"] { display: none; }

.mm-filter-option:hover {
    background: var(--mm-primary-light);
    color:      var(--mm-primary);
}

.mm-filter-option.active {
    background:   var(--mm-primary-light);
    color:        var(--mm-primary);
    border-color: rgba(79,70,229,0.2);
    font-weight:  700;
}

/* Price inputs */
.mm-price-inputs {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.mm-price-input-wrap {
    position:    relative;
    flex:        1;
}

.mm-price-prefix {
    position:   absolute;
    left:       10px;
    top:        50%;
    transform:  translateY(-50%);
    font-size:  12px;
    color:      var(--mm-gray-light);
    font-weight: 600;
    pointer-events: none;
}

.mm-price-input {
    width:         100%;
    padding:       8px 8px 8px 22px;
    border:        1.5px solid var(--mm-border);
    border-radius: var(--mm-radius-sm);
    font-size:     13px;
    color:         var(--mm-dark);
    outline:       none;
    transition:    var(--mm-transition);
    font-family:   var(--mm-font-body);
}

.mm-price-input:focus {
    border-color: var(--mm-primary);
    box-shadow:   0 0 0 3px rgba(79,70,229,0.1);
}

.mm-price-sep {
    color:      var(--mm-gray-light);
    font-weight: 700;
    font-size:  16px;
}

/* Sort radio pills */
.mm-sort-options {
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

.mm-sort-option {
    display:      flex;
    align-items:  center;
    padding:      7px 12px;
    border-radius: var(--mm-radius-sm);
    font-size:    13px;
    color:        var(--mm-gray);
    cursor:       pointer;
    transition:   var(--mm-transition);
    font-weight:  500;
    border:       1.5px solid transparent;
}

.mm-sort-option input[type="radio"] { display: none; }

.mm-sort-option:hover {
    background: var(--mm-bg);
    color:      var(--mm-dark);
}

.mm-sort-option.active {
    background:   var(--mm-primary-light);
    color:        var(--mm-primary);
    border-color: rgba(79,70,229,0.2);
    font-weight:  700;
}

/* Apply button */
.mm-filter-submit {
    margin-top: 4px;
}

/* ============================================
   MAIN CONTENT AREA
   ============================================ */
.mm-mentors-main {
    flex: 1;
    min-width: 0;
}

/* Active filters */
.mm-active-filters {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         8px;
    padding:     10px 14px;
    background:  var(--mm-primary-light);
    border:      1px solid rgba(79,70,229,0.15);
    border-radius: var(--mm-radius-sm);
}

.mm-active-filters-label {
    font-size:   12px;
    font-weight: 700;
    color:       var(--mm-primary);
    font-family: var(--mm-font-main);
}

.mm-filter-tag {
    display:       inline-flex;
    align-items:   center;
    padding:       4px 10px;
    background:    white;
    border:        1px solid rgba(79,70,229,0.2);
    border-radius: 20px;
    font-size:     12px;
    font-weight:   600;
    color:         var(--mm-dark-3);
    gap:           4px;
}

.mm-tag-close {
    color:       var(--mm-gray);
    font-size:   14px;
    text-decoration: none;
    line-height: 1;
    margin-left: 2px;
    transition: var(--mm-transition);
}

.mm-tag-close:hover { color: var(--mm-danger); }

.mm-clear-all {
    margin-left:     auto;
    font-size:       12px;
    color:           var(--mm-primary);
    font-weight:     700;
    text-decoration: none;
}

.mm-clear-all:hover { text-decoration: underline; }

/* Results bar */
.mm-results-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
}

.mm-results-count {
    font-size: 14px;
    color:     var(--mm-gray);
    margin:    0;
}

/* Cards grid */
.mm-cards-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap:                   20px;
}

/* Empty state */
.mm-empty-state {
    text-align:    center;
    padding:       80px 20px;
    background:    var(--mm-white);
    border:        1px solid var(--mm-border);
    border-radius: var(--mm-radius-lg);
}

.mm-empty-state-icon {
    font-size:     56px;
    color:         var(--mm-border);
    margin-bottom: 16px;
    line-height:   1;
}

.mm-empty-state h5 {
    font-size:     18px;
    font-weight:   700;
    color:         var(--mm-dark-3);
    margin-bottom: 8px;
}

.mm-empty-state p {
    font-size: 14px;
    color:     var(--mm-gray);
    margin:    0;
}

/* Pagination */
.mm-pagination-wrap {
    margin-top:      40px;
    display:         flex;
    justify-content: center;
}

.mm-pagination .page-link {
    border-radius:   var(--mm-radius-sm) !important;
    font-size:       13px;
    font-weight:     600;
    color:           var(--mm-dark-3);
    border-color:    var(--mm-border);
    padding:         8px 14px;
    margin:          0 2px;
    transition:      var(--mm-transition);
    font-family:     var(--mm-font-main);
}

.mm-pagination .page-link:hover {
    background:   var(--mm-primary-light);
    color:        var(--mm-primary);
    border-color: rgba(79,70,229,0.2);
}

.mm-pagination .page-item.active .page-link {
    background:   var(--mm-primary);
    border-color: var(--mm-primary);
    color:        white;
    box-shadow:   var(--mm-shadow-primary);
}

.mm-pagination .page-item.disabled .page-link {
    opacity: 0.4;
}

/* ============================================
   MENTOR CARD — STATS FIX (no overlap)
   ============================================ */
.mm-mentor-stats {
    display:       grid;
    grid-template-columns: 1.4fr auto 0.8fr auto 0.8fr;
    align-items:   center;
    gap:           0;
    padding:       10px 10px;
    margin-bottom: 12px;
    overflow:      visible;
}

.mm-stat-item {
    text-align:  center;
    min-width:   0;
    overflow:    visible;
}

.mm-stat-item > div:first-child {
    font-size:   13px;
    font-weight: 700;
    color:       var(--mm-dark);
    white-space: nowrap;
    display:     flex;
    align-items: center;
    justify-content: center;
    gap:         2px;
    overflow:    visible;
}

.mm-stat-label {
    font-size:   10px;
    color:       var(--mm-gray-light);
    margin-top:  2px;
    font-weight: 500;
    white-space: nowrap;
}

.mm-stat-divider {
    width:      1px;
    height:     28px;
    background: var(--mm-border);
    flex-shrink: 0;
    margin:     0 4px;
}

/* ============================================
   MENTOR CARD FOOTER — COMPACT BUTTON
   ============================================ */
.mm-mentor-card-footer {
    padding: 12px 16px;
}

.mm-mentor-card-footer .btn.mm-btn-primary.btn-sm {
    padding:       8px 14px;
    font-size:     12px;
    font-weight:   700;
    border-radius: var(--mm-radius-sm);
    white-space:   nowrap;
    line-height:   1.4;
}

.mm-mentor-card-footer .btn.mm-btn-primary.btn-sm i {
    font-size: 11px;
}

.mm-mentor-price {
    font-size: 16px;
}

/* ============================================
   MENTORS PAGE — RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .mm-mentors-wrapper {
        flex-direction: column;
    }

    .mm-sidebar {
        width: 100%;
    }

    .mm-filter-card .sticky-top {
        position: static !important;
    }

    .mm-mentors-hero-stats {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .mm-mentors-hero {
        padding: 36px 0 32px;
    }

    .mm-mentors-hero-title {
        font-size: 26px;
    }

    .mm-mentors-layout {
        padding: 24px 0 40px;
    }

    .mm-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .mm-hs-item { padding: 0 16px; }
    .mm-hs-num  { font-size: 18px; }
}

@media (max-width: 480px) {
    .mm-cards-grid {
        grid-template-columns: 1fr;
    }
}