/* ============================================================
   mobile.css — Aircraft2Sell
   Responsive mobile-first styles for all pages
   Inclure après les styles de chaque page :
   <link rel="stylesheet" href="mobile.css">
   ============================================================ */

/* ── BURGER BUTTON ────────────────────────────────────────── */
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem;background:none;border:none;z-index:301;flex-shrink:0}
.burger span{display:block;width:22px;height:2px;background:var(--white,#f0f4f8);border-radius:2px;transition:all .3s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE MENU OVERLAY ──────────────────────────────────── */
.mobile-menu{
  display:none;
  position:fixed;
  top:62px; /* height of nav */
  left:0;right:0;bottom:0;
  background:rgba(4,8,15,.98);
  z-index:299;
  overflow-y:auto;
  padding:1.5rem;
  flex-direction:column;
  gap:0;
}
.mobile-menu.open{display:flex}
.mobile-menu-links{display:flex;flex-direction:column;gap:0;border-bottom:1px solid rgba(200,220,240,0.09);margin-bottom:1.2rem;padding-bottom:1rem}
.mobile-menu-links a,.mobile-menu-links .mm-link{
  display:flex;align-items:center;gap:.7rem;
  padding:.9rem 0;
  color:rgba(143,163,184,.9);
  text-decoration:none;
  font-size:.88rem;
  border-bottom:1px solid rgba(200,220,240,0.06);
  cursor:pointer;
  transition:color .15s;
  background:none;border-left:none;border-right:none;border-top:none;
  font-family:inherit;text-align:left;width:100%
}
.mobile-menu-links a:last-child,.mobile-menu-links .mm-link:last-child{border-bottom:none}
.mobile-menu-links a:hover,.mobile-menu-links .mm-link:hover{color:#f0f4f8}
.mobile-menu-links a.active,.mobile-menu-links .mm-link.active{color:#e8a020}
.mm-icon{font-size:1rem;width:20px;text-align:center;flex-shrink:0;opacity:.7}
.mobile-menu-bottom{display:flex;flex-direction:column;gap:.6rem}
.mobile-menu-bottom .btn-post-mobile{
  background:#e8a020;color:#060b15;border:none;
  padding:.85rem 1rem;font-family:'Bebas Neue',sans-serif;
  font-size:1rem;letter-spacing:.1em;cursor:pointer;
  text-align:center;text-decoration:none;display:block;
  transition:background .2s
}
.mobile-menu-bottom .btn-post-mobile:hover{background:#f5c842}
.mobile-menu-bottom .btn-login-mobile{
  background:transparent;border:1px solid rgba(200,220,240,0.15);
  color:rgba(143,163,184,.9);padding:.75rem 1rem;
  font-family:'DM Sans',sans-serif;font-size:.85rem;
  cursor:pointer;text-align:center;text-decoration:none;display:block;
  transition:all .2s
}
.mobile-menu-bottom .btn-login-mobile:hover{border-color:#e8a020;color:#e8a020}
.mobile-menu-user{
  display:flex;align-items:center;gap:.8rem;
  padding:.9rem 0;border-bottom:1px solid rgba(200,220,240,0.09);
  margin-bottom:.8rem
}
.mm-avatar{
  width:40px;height:40px;border-radius:50%;
  background:rgba(232,160,32,.15);border:1.5px solid rgba(232,160,32,.4);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.85rem;color:#e8a020;flex-shrink:0;text-transform:uppercase
}
.mm-user-info{flex:1}
.mm-user-name{font-size:.85rem;font-weight:600;color:#f0f4f8}
.mm-user-plan{font-size:.6rem;color:#e8a020;letter-spacing:.08em;text-transform:uppercase}
.mm-lang-row{display:flex;gap:.4rem;flex-wrap:wrap;padding:.5rem 0}
.mm-lang-btn{
  background:transparent;border:1px solid rgba(200,220,240,0.12);
  color:rgba(143,163,184,.8);padding:.3rem .65rem;
  font-family:'DM Sans',sans-serif;font-size:.72rem;cursor:pointer;
  transition:all .15s;display:flex;align-items:center;gap:.3rem
}
.mm-lang-btn.active{border-color:#e8a020;color:#e8a020}
.mm-lang-btn:hover{border-color:rgba(232,160,32,.5);color:#e8a020}
/* Prevent body scroll when menu open */
body.menu-open{overflow:hidden}

/* ── BREAKPOINT: TABLET (≤900px) ──────────────────────────── */
@media(max-width:900px){
  /* Show burger, hide desktop nav */
  .burger{display:flex}
  .nav-links{display:none!important}
  .lang-sw{display:none!important}
  .btn-post{display:none!important}
  #btnLogin{display:none!important}
  #navUser{display:none!important}

  /* Nav height */
  nav{height:56px;padding:0 1rem}
  .logo{font-size:1.4rem}

  /* Dashboard tabs → scrollable */
  .nav-tabs{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;justify-content:flex-start;height:52px}
  .nav-tabs::-webkit-scrollbar{display:none}
  .nav-tab{padding:0 12px;font-size:.7rem;white-space:nowrap;flex-shrink:0}

  /* Grid adaptations */
  .kpi-strip{grid-template-columns:1fr 1fr}
  .ov-grid,.sub-grid,.set-grid,.g2,.g3{grid-template-columns:1fr}
  .plan-cards{grid-template-columns:1fr}
  .msg-layout{grid-template-columns:1fr}
  .msg-list{max-height:220px;border-bottom:1px solid rgba(200,220,240,0.09)}
  .form-row{grid-template-columns:1fr}

  /* Post-listing steps */
  .steps-nav{flex-direction:row;overflow-x:auto;gap:.3rem;padding-bottom:.3rem}
  .step-btn{flex-shrink:0;font-size:.62rem;padding:.5rem .6rem}
  .form-grid{grid-template-columns:1fr}

  /* Search */
  .search-top .search-row{flex-wrap:wrap;gap:.4rem}
  .sf,.sbtn{width:100%}
  .results-wrap{grid-template-columns:1fr}
  .filters-sidebar{display:none}
  .filter-toggle-btn{display:flex}

  /* Listings */
  .listing-item,.fav-card{grid-template-columns:52px 1fr}
  .li-side,.fav-side{display:none}

  /* Hero */
  .hero{min-height:auto;padding:3rem 1rem 2rem}
  .hero-search .search-wrap{flex-wrap:wrap;gap:.4rem}
  .sf,.sbtn{width:100%}
  .mm-selects{grid-template-columns:1fr}
}

/* ── BREAKPOINT: MOBILE (≤600px) ──────────────────────────── */
@media(max-width:600px){
  /* Typography */
  .ov-greeting{font-size:1.5rem}
  .ls-title,.msg-title,.sub-title,.set-title,.inv-title{font-size:1.3rem}

  /* KPIs → 1 column on tiny screens */
  .kpi-strip{grid-template-columns:1fr 1fr}
  .kpi-v{font-size:1.6rem}

  /* Auth card */
  .auth-card{border-radius:0}
  .auth-box{padding:1.5rem 1rem}
  .form-row{grid-template-columns:1fr}

  /* Pricing */
  .pricing-grid{grid-template-columns:1fr!important}
  .plan-featured{order:-1}

  /* Dashboard panel body */
  .panel-body{padding:1rem}

  /* Slot bar */
  .slot-bar{flex-wrap:wrap;gap:.4rem}
  .slot-track{width:100%;order:2}

  /* Upgrade banner */
  .upgrade-banner{flex-direction:column;align-items:flex-start;gap:.8rem}
  .ub-btns{flex-direction:column;width:100%}
  .ub-btn{width:100%;justify-content:center;text-align:center}

  /* Post listing */
  .checklist{display:none}
  .mm-selects{grid-template-columns:1fr}
  .preview-panel{display:none}

  /* Messages full width */
  .msg-layout{grid-template-columns:1fr}
  .msg-list{max-height:160px}
  .msg-compose{padding:.5rem .6rem;gap:.3rem}
  .msg-input{font-size:.8rem}
}

/* ── BREAKPOINT: SMALL MOBILE (≤380px) ────────────────────── */
@media(max-width:380px){
  nav{height:52px;padding:0 .75rem}
  .logo{font-size:1.2rem}
  .kpi-strip{grid-template-columns:1fr}
  .auth-tabs .auth-tab{font-size:.68rem;padding:.75rem .5rem}
  .submit-btn{font-size:.95rem}
}