/* =========================================================
   SM College — Mobile App Shell  (only active at ≤ 767px)
   ========================================================= */

/* Hide all mobile-only elements at desktop widths */
.ma-only { display: none !important; }

@media (max-width: 767px) {

/* ── Enable mobile shell elements ── */
.ma-only            { display: block !important; }
#ma-bottom-nav.ma-only { display: flex !important; }
#ma-backdrop.ma-only   { display: none !important; }   /* JS-controlled */
#ma-fab.ma-only        { display: flex !important; }

/* ── Hide desktop chrome ── */
.header-area,
.site-branding-area,
.menu-container,
.footer-top-area,
.footer-bottom-area {
    display: none !important;
}

/* ── Collapse homepage hero slider to mobile-friendly height ── */
.slider-area,
.premium-carousel,
.premium-carousel .item {
    height: 220px !important;
    min-height: 0 !important;
}
.slider-area { margin-top: 0 !important; }

/* ── Ensure all page content areas are visible ── */
#layout-content,
.single-product-area,
.promo-area,
.leadership-section-wrapper,
.events-notices-section,
.product-widget-area {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* ── Body spacing for fixed bars ── */
body {
    padding-top:    56px !important;
    padding-bottom: 64px !important;
    background:     #f4f6f8 !important;
    font-family:    'Roboto Condensed', 'Roboto', Arial, sans-serif !important;
    overflow-x:     hidden;
}

/* ════════════════════════════════════════
   SPLASH SCREEN
   ════════════════════════════════════════ */
#ma-splash {
    position:       fixed;
    inset:          0;
    background:     #fff;
    z-index:        100000;
    display:        flex !important;
    align-items:    center;
    justify-content: center;
    transition:     opacity .5s ease, visibility .5s;
}
#ma-splash.hidden {
    opacity:    0;
    visibility: hidden;
}
.ma-splash-inner {
    text-align:        center;
    display:           flex;
    flex-direction:    column;
    align-items:       center;
    padding:           24px;
}
.ma-splash-logo {
    width:         100px;
    height:        100px;
    object-fit:    contain;
    margin-bottom: 18px;
    animation:     ma-pulse 2s ease-in-out infinite;
}
.ma-splash-name {
    font-size:     22px;
    font-weight:   700;
    color:         var(--ma-primary, #DE9243);
    margin:        0 0 4px;
}
.ma-splash-sub {
    font-size:     13px;
    color:         #888;
    margin:        0 0 28px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.ma-spinner {
    width:         38px;
    height:        38px;
    border:        4px solid rgba(0,0,0,.1);
    border-top-color: var(--ma-primary, #DE9243);
    border-radius: 50%;
    animation:     ma-spin 1s linear infinite;
}

/* ════════════════════════════════════════
   TOP APP BAR
   ════════════════════════════════════════ */
#ma-topbar {
    position:       fixed;
    top:            0;
    left:           0;
    right:          0;
    height:         56px;
    background:     var(--ma-primary, #DE9243);
    color:          #fff;
    display:        flex !important;
    align-items:    center;
    padding:        0 8px 0 4px;
    z-index:        9900;
    box-shadow:     0 2px 6px rgba(0,0,0,.25);
}
#ma-menu-btn {
    background:    transparent;
    border:        none;
    width:         44px;
    height:        44px;
    display:       flex;
    flex-direction: column;
    justify-content: center;
    align-items:   center;
    gap:           5px;
    cursor:        pointer;
    flex-shrink:   0;
    padding:       0;
}
#ma-menu-btn span {
    display:       block;
    width:         22px;
    height:        2px;
    background:    #fff;
    border-radius: 2px;
    transition:    transform .25s, opacity .25s;
}
.ma-topbar-title {
    flex:        1;
    display:     flex;
    align-items: center;
    gap:         8px;
    font-size:   17px;
    font-weight: 600;
    overflow:    hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 4px;
}
.ma-topbar-logo {
    width:        30px;
    height:       30px;
    object-fit:   contain;
    background:   rgba(255,255,255,.9);
    border-radius: 50%;
    padding:      2px;
    flex-shrink:  0;
}
.ma-topbar-actions {
    display:     flex;
    align-items: center;
    gap:         4px;
}
.ma-topbar-actions a {
    color:          #fff;
    font-size:      18px;
    padding:        8px;
    text-decoration: none;
    display:        flex;
    align-items:    center;
}

/* ════════════════════════════════════════
   BACKDROP
   ════════════════════════════════════════ */
#ma-backdrop {
    position:    fixed;
    inset:       0;
    background:  rgba(0,0,0,.45);
    z-index:     9950;
    opacity:     0;
    transition:  opacity .3s;
}
#ma-backdrop.open {
    display: block !important;
    opacity: 1;
}

/* ════════════════════════════════════════
   SIDE DRAWER
   ════════════════════════════════════════ */
#ma-drawer {
    position:   fixed;
    top:        0;
    left:       0;
    width:      280px;
    height:     100%;
    background: #fff;
    z-index:    9960;
    display:    flex !important;
    flex-direction: column;
    overflow-y: auto;
    transform:  translateX(-100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 20px rgba(0,0,0,.2);
}
#ma-drawer.open { transform: translateX(0); }

.ma-drawer-head {
    background:   linear-gradient(135deg, var(--ma-primary, #DE9243), #b56e23);
    color:        #fff;
    display:      flex;
    align-items:  center;
    gap:          12px;
    padding:      24px 16px;
    flex-shrink:  0;
}
.ma-drawer-logo {
    width:         56px;
    height:        56px;
    border-radius: 50%;
    background:    rgba(255,255,255,.95);
    padding:       3px;
    object-fit:    contain;
    flex-shrink:   0;
}
.ma-drawer-head h3 {
    font-size:   16px;
    font-weight: 700;
    margin:      0 0 2px;
    line-height: 1.2;
}
.ma-drawer-head p {
    font-size:  12px;
    margin:     0;
    opacity:    .85;
}

/* Nav list */
.ma-nav {
    list-style: none;
    margin:     0;
    padding:    8px 0;
    flex:       1;
}
.ma-nav li { position: relative; }

.ma-nav li > a {
    display:     flex;
    align-items: center;
    gap:         12px;
    padding:     12px 20px;
    color:       #333;
    font-size:   14px;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition:  background .18s, color .18s, border-color .18s;
}
.ma-nav li > a:hover {
    background:   rgba(222,146,67,.08);
    color:        var(--ma-primary, #DE9243);
    border-color: var(--ma-primary, #DE9243);
    text-decoration: none;
}
.ma-nav li > a .fa:first-child {
    width:     20px;
    text-align: center;
    font-size:  16px;
    color:      #777;
    flex-shrink: 0;
}
.ma-nav li > a:hover .fa:first-child {
    color: var(--ma-primary, #DE9243);
}

/* Chevron arrow */
.ma-arrow {
    margin-left: auto !important;
    transition:  transform .25s;
}
.ma-has-sub.open > a .ma-arrow {
    transform: rotate(180deg);
}

/* Sub-list */
.ma-has-sub > ul {
    display:    none;
    list-style: none;
    margin:     0;
    padding:    0;
    background: #f8fafc;
    border-top: 1px solid #f1f5f9;
}
.ma-has-sub.open > ul { display: block; }

.ma-has-sub > ul li > a {
    padding:      9px 20px 9px 52px;
    font-size:    13px;
    font-weight:  400;
    color:        #555;
    border-left:  none;
    text-decoration: none;
    display:      block;
}
.ma-has-sub > ul li > a:hover {
    color:      var(--ma-primary, #DE9243);
    background: rgba(222,146,67,.06);
    text-decoration: none;
}

.ma-divider {
    height:     1px;
    background: #e8ecf0;
    margin:     6px 0;
}

.ma-drawer-footer {
    padding:      14px 20px;
    font-size:    11px;
    color:        #aaa;
    border-top:   1px solid #edf2f7;
    text-align:   center;
    flex-shrink:  0;
}

/* ════════════════════════════════════════
   BOTTOM NAVIGATION BAR
   ════════════════════════════════════════ */
#ma-bottom-nav {
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    height:          60px;
    background:      #fff;
    border-top:      1px solid #e2e8f0;
    display:         flex !important;
    justify-content: space-around;
    align-items:     center;
    z-index:         9900;
    box-shadow:      0 -2px 12px rgba(0,0,0,.08);
}
.ma-tab-item {
    flex:            1;
    height:          100%;
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    align-items:     center;
    gap:             2px;
    color:           #64748b;
    font-size:       10px;
    font-weight:     500;
    text-decoration: none;
    transition:      color .18s;
    position:        relative;
}
.ma-tab-item .fa {
    font-size: 21px;
    line-height: 1;
}
.ma-tab-item.active,
.ma-tab-item:focus {
    color:           var(--ma-primary, #DE9243);
    text-decoration: none;
}
.ma-tab-item.active::before {
    content:         '';
    position:        absolute;
    top:             0;
    left:            50%;
    transform:       translateX(-50%);
    width:           32px;
    height:          3px;
    background:      var(--ma-primary, #DE9243);
    border-radius:   0 0 3px 3px;
}

/* ════════════════════════════════════════
   WHATSAPP FAB
   ════════════════════════════════════════ */
#ma-fab {
    position:        fixed;
    bottom:          72px;
    right:           16px;
    width:           50px;
    height:          50px;
    border-radius:   50%;
    background:      #25d366;
    color:           #fff;
    display:         flex !important;
    align-items:     center;
    justify-content: center;
    z-index:         9895;
    box-shadow:      0 4px 14px rgba(37,211,102,.45);
    text-decoration: none;
    transition:      transform .2s, box-shadow .2s;
}
#ma-fab:hover { transform: scale(1.08); text-decoration: none; }
#ma-fab svg {
    width:  26px;
    height: 26px;
    fill:   #fff;
}

} /* end @media */

/* ── Keyframe animations (outside media query so they work everywhere) ── */
@keyframes ma-spin  { to { transform: rotate(360deg); } }
@keyframes ma-pulse {
    0%,100% { opacity:1; transform: scale(1); }
    50%     { opacity:.75; transform: scale(.95); }
}