/* ================================================
   SS.Mada — Styles globaux
   ================================================ */
:root {
  --gold:#D4AF37; --gold-l:#F0C840; --gold-d:#A07820;
  --gold-bg:#D4AF3712; --gold-bd:#D4AF3730; --on-gold:#0A0800;
  --bg:#08090C; --card:#16181F; --card2:#111318; --border:#1E2028;
  --text:#F0F0F5; --muted:#8A8FA8; --dim:#5A5F72;
  --green:#22C55E; --blue:#3B82F6; --red:#E31E23;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; -webkit-tap-highlight-color: transparent;
}
button, input, select, textarea {
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-appearance: none; appearance: none;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: #2A2D38; border-radius: 2px; }
.sora { font-family: 'Sora', sans-serif; }

/* ── Animations ── */
@keyframes goldShimmer {
  0%   { background-position: -400% center }
  100% { background-position:  400% center }
}
.ss-shine {
  background: linear-gradient(90deg,
    #7A5A10 0%, #B8900C 15%, #D4AF37 28%, #EDD060 40%,
    #FFF8DC 50%, #EDD060 60%, #D4AF37 72%, #B8900C 85%, #7A5A10 100%);
  background-size: 400% 100%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 6s ease-in-out infinite;
  display: inline;
}
@keyframes fadeUp   { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:translateY(0) } }
@keyframes sheetUp  { from { transform:translateY(100%) }           to { transform:translateY(0) } }
@keyframes spin     { to   { transform:rotate(360deg) } }
@keyframes slideR   { from { transform:translateX(100%) }           to { transform:translateX(0) } }
@keyframes msgIn    { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:translateY(0) } }
.au { animation: fadeUp  .22s ease forwards }
.su { animation: sheetUp .26s ease forwards }
.sr { animation: slideR  .24s ease forwards }

/* ── Toast ── */
#toast {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  padding:11px 20px; border-radius:12px;
  font-family:'Sora',sans-serif; font-weight:600; font-size:13px;
  z-index:9999; opacity:0; transition:opacity .2s;
  pointer-events:none; white-space:nowrap; max-width:90vw; text-align:center;
}
#toast.show { opacity:1; }

/* ── Loaders ── */
.loader {
  width:18px; height:18px; border:2px solid var(--border);
  border-top-color:var(--gold); border-radius:50%;
  animation:spin .7s linear infinite;
  display:inline-block; vertical-align:middle;
}
.big-loader {
  width:40px; height:40px; border:3px solid var(--border);
  border-top-color:var(--gold); border-radius:50%;
  animation:spin .8s linear infinite;
  margin:60px auto; display:block;
}

/* ── NAV ── */
#nav {
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,12,.97); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  height:56px; display:flex; align-items:center;
  justify-content:space-between; padding:0 16px; gap:8px;
}
#mobile-search-bar {
  display:none; padding:8px 16px;
  background:rgba(8,9,12,.97); border-bottom:1px solid var(--border);
  position:sticky; top:56px; z-index:99;
}
@media(max-width:767px) { #mobile-search-bar { display:block; } }
#mobile-search-bar input {
  width:100%; padding:9px 14px;
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; font-size:14px; color:var(--text); outline:none;
}
#mobile-search-bar input:focus     { border-color:var(--gold); }
#mobile-search-bar input::placeholder { color:var(--dim); }

/* ── Sheets / Overlays ── */
.overlay {
  position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:200;
}
.sheet {
  position:fixed; bottom:0; left:0; right:0; z-index:300;
  max-height:94vh; overflow-y:auto;
  background:var(--card2); border-radius:20px 20px 0 0;
  border-top:1px solid var(--border); padding:24px 18px 36px;
}
@media(min-width:580px) {
  .sheet {
    left:50%; right:auto; transform:translateX(-50%);
    width:560px; bottom:24px; border-radius:20px;
    border:1px solid var(--border); max-height:90vh;
  }
}
.side-panel {
  position:fixed; top:0; right:0; bottom:0;
  width:min(440px,100vw); background:var(--card2);
  border-left:1px solid var(--border); z-index:300;
  display:flex; flex-direction:column;
}
#notif-dd {
  position:fixed; top:64px; right:16px;
  width:min(360px,94vw); max-height:80vh; overflow-y:auto;
  background:var(--card2); border:1px solid var(--border);
  border-radius:16px; z-index:400;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}

/* ── Product Cards ── */
.prod-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column;
  cursor:pointer; transition:border-color .2s,transform .18s,box-shadow .2s;
}
.prod-card:hover {
  border-color:var(--gold-bd); transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(212,175,55,.1);
}
.prod-thumb {
  height:160px; background:#0E1016;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; position:relative; flex-shrink:0;
}
.prod-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.prod-card:hover .prod-thumb img { transform:scale(1.04); }
@media(max-width:600px) { .prod-thumb { height:130px; } }

/* ── Gallery Modal ── */
.gallery-main {
  position:relative; background:#0E1016;
  border-radius:16px; overflow:hidden; margin-bottom:12px;
}
.gallery-main img {
  width:100%; display:block;
  max-height:340px; object-fit:cover; border-radius:16px;
}
.gallery-thumbs {
  display:flex; gap:6px; overflow-x:auto; padding-bottom:2px;
}
.gallery-thumbs::-webkit-scrollbar { display:none; }
.gthumb {
  width:64px; height:64px; flex-shrink:0; border-radius:10px;
  overflow:hidden; cursor:pointer; border:2px solid transparent;
  transition:border-color .15s;
}
.gthumb.active  { border-color:var(--gold); }
.gthumb img     { width:100%; height:100%; object-fit:cover; }
.g-nav-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(4px); border-radius:50%;
  width:36px; height:36px; color:white; font-size:18px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  z-index:2; transition:background .15s;
}
.g-nav-btn:hover { background:rgba(0,0,0,.85); }

/* ── Upload Photos ── */
.photo-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:6px;
}
@media(max-width:480px) { .photo-grid { grid-template-columns:repeat(3,1fr); } }
.photo-cell {
  aspect-ratio:1; border-radius:10px; overflow:hidden;
  position:relative; background:var(--border);
}
.photo-cell img { width:100%; height:100%; object-fit:cover; }
.photo-cell-del {
  position:absolute; top:3px; right:3px;
  background:rgba(0,0,0,.7); border:none; border-radius:50%;
  width:20px; height:20px; color:white; font-size:11px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.photo-cell-order {
  position:absolute; bottom:3px; left:3px;
  background:rgba(0,0,0,.6); border-radius:4px;
  padding:1px 4px; font-size:9px;
  color:white; font-family:'Sora',sans-serif; font-weight:700;
}
.add-photo-cell {
  aspect-ratio:1; border-radius:10px;
  border:2px dashed var(--border); background:var(--card);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; gap:4px; font-size:10px; color:var(--dim);
  transition:all .2s; position:relative;
}
.add-photo-cell:hover { border-color:var(--gold); color:var(--gold); }
.add-photo-cell input {
  position:absolute; inset:0; opacity:0; cursor:pointer;
  width:100%; height:100%;
}

/* ── Grids ── */
.pgrid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
@media(min-width:640px) { .pgrid { grid-template-columns:repeat(3,1fr); gap:14px; } }
@media(min-width:900px) { .pgrid { grid-template-columns:repeat(4,1fr); gap:16px; } }
.plan-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
@media(min-width:600px) { .plan-grid { grid-template-columns:repeat(5,1fr); } }
.vendor-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;
}

/* ── Common Components ── */
.cats {
  display:flex; gap:7px; overflow-x:auto;
  padding-bottom:4px; -webkit-overflow-scrolling:touch;
}
.cats::-webkit-scrollbar { display:none; }
.inp {
  width:100%; padding:12px 13px;
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; font-size:14px; color:var(--text);
  outline:none; transition:border-color .2s;
}
.inp:focus       { border-color:var(--gold); }
.inp::placeholder { color:var(--dim); }
.stars   { color:var(--gold); font-size:11px; letter-spacing:-1px; }
.bdg {
  display:inline-block; padding:2px 8px; border-radius:20px;
  font-size:10px; font-weight:700; font-family:'Sora',sans-serif;
  letter-spacing:.4px; text-transform:uppercase;
}
.stat {
  background:var(--card); border:1px solid var(--border);
  border-radius:11px; padding:14px 12px;
}
.vpcard {
  background:var(--card); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column;
}
.vpthumb {
  height:90px; background:#0E1016;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.vpthumb img { width:100%; height:100%; object-fit:cover; }

/* ── Buttons ── */
.btn-gold {
  background:var(--gold); border:none; border-radius:10px;
  padding:12px 20px; font-family:'Sora',sans-serif;
  font-weight:700; font-size:14px; color:var(--on-gold);
  cursor:pointer; transition:background .15s;
}
.btn-gold:hover     { background:var(--gold-l); }
.btn-gold:disabled  { opacity:.5; cursor:not-allowed; }
.btn-ghost {
  background:none; border:1px solid var(--border); border-radius:10px;
  padding:11px 16px; font-family:'Sora',sans-serif;
  font-weight:600; font-size:13px; color:var(--muted); cursor:pointer;
}

/* ── Messenger ── */
.msg-panel-inner { display:flex; flex-direction:column; height:100%; }
.msg-list {
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:8px;
}
.bubble {
  max-width:75%; padding:10px 14px; font-size:14px;
  line-height:1.5; animation:msgIn .15s ease forwards;
}
.bubble.me {
  align-self:flex-end; background:var(--gold); color:var(--on-gold);
  border-radius:18px 18px 4px 18px;
}
.bubble.them {
  align-self:flex-start; background:var(--card); color:var(--text);
  border-radius:18px 18px 18px 4px; border:1px solid var(--border);
}
.bubble .meta { font-size:10px; opacity:.6; margin-top:4px; text-align:right; }
.bubble.them .meta { text-align:left; }
.conv-item {
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  cursor:pointer; transition:background .15s; border-bottom:1px solid var(--border);
}
.conv-item:hover { background:var(--card); }
.conv-avatar {
  width:42px; height:42px; border-radius:50%;
  background:linear-gradient(135deg,var(--gold-d),var(--gold));
  display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:700;
  font-size:15px; color:var(--on-gold); flex-shrink:0;
}

/* ── Payment Logos ── */
.pay-logo {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:8px;
  font-family:'Sora',sans-serif; font-weight:700; font-size:11px;
}
.pay-mvola  { background:#E31E2318; border:1px solid #E31E2340; color:#E31E23; }
.pay-orange { background:#FF660018; border:1px solid #FF660040; color:#FF6600; }
.pay-airtel { background:#E4000018; border:1px solid #E4000040; color:#E40000; }

/* ================================================
   RESPONSIVE MOBILE — Corrections globales
   ================================================ */

/* Empêche le scroll horizontal sur tout le site */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── NAV mobile (< 480px) ── */
@media(max-width:479px) {
  /* Cache le texte "SS.Mada" sur très petits écrans */
  #nav .ss-shine { display: none; }

  /* Réduit le padding des boutons d'action */
  #nav > div:last-child button {
    padding: 6px 8px !important;
    font-size: 14px !important;
  }

  /* Réduit le bouton Vendre */
  #nav #sell-btn {
    font-size: 11px !important;
    padding: 7px 9px !important;
  }

  /* Cache le bouton Connexion texte sur très petits écrans, remplacé par le menu ☰ */
  #nav #auth-btn {
    display: none !important;
  }
}

/* ── NAV mobile (< 360px) ── */
@media(max-width:359px) {
  #nav #sell-btn { display: none !important; }
  #nav #sell-btn-mob { display: block !important; }
}

/* ── Sheets/modals : jamais plus large que l'écran ── */
.sheet {
  max-width: 100vw;
  box-sizing: border-box;
}

/* ── Side panels : pleine largeur sur mobile ── */
@media(max-width:480px) {
  .side-panel {
    width: 100vw !important;
  }
}

/* ── Tableaux : scroll horizontal ── */
table {
  min-width: max-content;
}
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ── Grille catalogue : 1 colonne sur très petits écrans ── */
@media(max-width:340px) {
  .pgrid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Plan grid : force 2 colonnes max sur mobile ── */
@media(max-width:599px) {
  .plan-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media(max-width:340px) {
  .plan-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Onglets vendor/admin : scroll horizontal ── */
.tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
  scrollbar-width: none;
}
.tabs-scroll::-webkit-scrollbar { display: none; }

/* ── Vendor grid : adapte les colonnes ── */
@media(max-width:400px) {
  .vendor-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Stat cards : wrap sur mobile ── */
@media(max-width:480px) {
  .stat {
    min-width: 0;
  }
}

/* ── Inputs & boutons : pas de débordement ── */
.inp, .btn-gold, .btn-ghost {
  max-width: 100%;
  box-sizing: border-box;
}

/* ── Photo grid sur très petits écrans ── */
@media(max-width:340px) {
  .photo-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Checkout / modal produit : texte qui ne déborde pas ── */
.sheet * {
  word-break: break-word;
  max-width: 100%;
}
.sheet img {
  max-width: 100%;
  height: auto;
}

/* ── Notif dropdown : pleine largeur sur mobile ── */
@media(max-width:400px) {
  #notif-dd {
    right: 8px !important;
    left: 8px !important;
    width: auto !important;
  }
}