/* ============================================================
   MOBILE MENU  (≤ 860px)
   Slide-in drawer: logo + close, 2×2 "Explore" tiles, list rows,
   and a sticky Free Counseling / WhatsApp bar that is always in
   reach. Login / profile chip lives beside the hamburger.
============================================================ */

/* Desktop: none of the mobile pieces show */
.nav-mobile-right, .mnav-backdrop { display: none; }

@media (max-width: 860px) {

  /* ---------- Navbar: chip + hamburger ---------- */
  .nav-mobile-right { display: flex; align-items: center; gap: 6px; }
  .hamburger { padding: 11px 10px; min-width: 44px; min-height: 44px; justify-content: center; }

  .nav-mobile-chip, .nav-mobile-login {
    align-items: center; gap: 6px; min-height: 40px; max-width: 128px; padding: 0 12px;
    border-radius: 100px; font-size: 13px; font-weight: 700; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-mobile-login { display: flex; background: #fdecec; color: #c90007; border: 1px solid rgba(201,0,7,.2); }
  .nav-mobile-chip { color: #005aaa; background: rgba(0,90,170,.08); border: 1px solid rgba(0,90,170,.22); }
  .nav-mobile-chip.visible { display: flex; }

  /* ---------- Drawer ---------- */
  body .mobile-nav {
    display: flex; flex-direction: column;
    position: fixed; top: 0; bottom: 0; left: auto; right: 0;
    width: min(88vw, 380px); max-height: none; padding: 0; overflow: hidden;
    background: #fff; border: 0; border-radius: 24px 0 0 24px;
    box-shadow: -18px 0 50px rgba(8,33,63,.28);
    z-index: 1200; opacity: 1; pointer-events: none;
    visibility: hidden; transform: translateX(104%);
    transition: transform .32s cubic-bezier(.2,.8,.2,1), visibility .32s;
  }
  body .mobile-nav.open { visibility: visible; transform: translateX(0); pointer-events: auto; display: flex; }

  .mnav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 1190;
    background: rgba(5,20,40,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .28s, visibility .28s;
  }
  body.nav-open .mnav-backdrop { opacity: 1; visibility: visible; }

  /* Head */
  .mnav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px 20px;
    border-bottom: 1px solid #eef2f8; flex-shrink: 0;
  }
  .mobile-nav a.mnav-brand { display: block; padding: 0; border: 0; min-height: 0; }
  .mobile-nav a.mnav-brand:hover { padding: 0; }
  .mnav-brand img { height: 58px; width: auto; display: block; }
  .mnav-close {
    width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    background: #eef3fa; color: #0d1f3c; -webkit-tap-highlight-color: transparent;
  }

  /* Body */
  .mnav-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 16px 12px; }
  .mnav-label {
    margin: 4px 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: 1.6px;
    text-transform: uppercase; color: #6b7a93;
  }
  .mnav-label ~ .mnav-label { margin-top: 22px; }

  /* Tiles */
  .mnav-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mobile-nav a.mnav-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0;
    padding: 14px 14px 13px; min-height: 118px; border: 1px solid #e6ecf5; border-radius: 18px;
    background: #f7faff; color: #0d1f3c; text-decoration: none; position: relative; overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav a.mnav-tile:hover { padding-left: 14px; color: #0d1f3c; }
  .mobile-nav a.mnav-tile:active { background: #eaf2fb; }
  .mnav-tile strong { margin-top: 12px; font-size: 14.5px; line-height: 1.2; font-weight: 700; }
  .mnav-tile small  { margin-top: 3px; font-size: 12px; color: #6b7a93; font-weight: 500; }
  .mnav-ico {
    width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; background: #e3effb; color: #005aaa;
  }
  .mnav-ico.sm { width: 38px; height: 38px; border-radius: 12px; }
  .t-abroad .mnav-ico  { background: #e1f4fb; color: #0b86b4; }
  .t-process .mnav-ico { background: #fdecec; color: #e81e24; }
  .t-gallery .mnav-ico { background: #fff1de; color: #c46a00; }

  /* Current page */
  .mobile-nav a.mnav-tile.is-active { background: #005aaa; border-color: #005aaa; color: #fff; }
  .mnav-tile.is-active small { color: rgba(255,255,255,.75); }
  .mnav-tile.is-active .mnav-ico { background: rgba(255,255,255,.18); color: #fff; }

  /* List rows */
  .mnav-list { display: flex; flex-direction: column; gap: 4px; }
  .mobile-nav a.mnav-row {
    display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 8px 12px;
    border: 0; border-radius: 16px; color: #0d1f3c; font-size: 16px; font-weight: 600; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav a.mnav-row:hover { padding-left: 12px; color: #0d1f3c; }
  .mobile-nav a.mnav-row:active { background: #f1f5fb; }
  .mnav-row-label { flex: 1; }
  .mnav-chev { color: #9aa8bd; flex-shrink: 0; }
  .mobile-nav a.mnav-row.is-active { background: #eaf2fb; color: #005aaa; }
  .mnav-row.is-active .mnav-chev { color: #005aaa; }

  /* Sticky action bar */
  .mnav-foot {
    display: flex; gap: 10px; flex-shrink: 0;
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eef2f8; background: #fff;
    box-shadow: 0 -10px 24px -16px rgba(13,31,60,.25);
  }
  .mobile-nav a.mnav-cta {
    flex: 1; min-height: 54px; padding: 0 10px; border: 0; border-radius: 16px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14px; font-weight: 700; text-decoration: none; color: #fff; white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-nav a.mnav-cta:hover { padding-left: 10px; color: #fff; }
  .mobile-nav a.mnav-cta:active { filter: brightness(.94); }
  .mnav-cta-red { background: #e81e24; box-shadow: 0 10px 20px -10px rgba(232,30,36,.7); }
  .mnav-cta-wa  { background: #1faa59; box-shadow: 0 10px 20px -10px rgba(31,170,89,.7); }

  /* Page behind the drawer */
  body.nav-open { overflow: hidden; }
  body.nav-open .social-float-wrap { display: none; }

  /* Staggered entrance */
  body .mobile-nav.open .mnav-tile,
  body .mobile-nav.open .mnav-row { animation: mnavIn .38s both cubic-bezier(.2,.8,.2,1); }
  .mobile-nav.open .mnav-tile:nth-child(1) { animation-delay: .06s; }
  .mobile-nav.open .mnav-tile:nth-child(2) { animation-delay: .10s; }
  .mobile-nav.open .mnav-tile:nth-child(3) { animation-delay: .14s; }
  .mobile-nav.open .mnav-tile:nth-child(4) { animation-delay: .18s; }
  .mobile-nav.open .mnav-row:nth-child(1)  { animation-delay: .06s; }
  .mobile-nav.open .mnav-row:nth-child(2)  { animation-delay: .10s; }
  .mobile-nav.open .mnav-row:nth-child(3)  { animation-delay: .14s; }
  .mobile-nav.open .mnav-row:nth-child(4)  { animation-delay: .18s; }
  .mobile-nav.open .mnav-row:nth-child(5)  { animation-delay: .22s; }
  @keyframes mnavIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 360px) {
  .nav-mobile-chip, .nav-mobile-login { max-width: 96px; padding: 0 10px; font-size: 12.5px; }
  .mnav-tiles { gap: 8px; }
  .mobile-nav a.mnav-tile { padding: 12px; }
  .mnav-foot { gap: 8px; }
  .mobile-nav a.mnav-cta { font-size: 13.5px; }
  .mnav-cta svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body .mobile-nav, .mnav-backdrop { transition: none; }
  body .mobile-nav.open .mnav-tile, body .mobile-nav.open .mnav-row { animation: none; }
}