/* ===== Palette & base ===== */
:root{
  --mbs-bg:#2c2c2c; --mbs-panel:#2c2c2c; --mbs-text:#f5f5f5; --mbs-text-dim:#e9e9e9;
  --mbs-border:#3a3a3a; --mbs-yellow:#ffd200; --mbs-red:#e53935;
}

/* Visibility & overlay */
#mbs-offer-backdrop[aria-hidden="true"],
#mbs-offer-modal[aria-hidden="true"]{display:none}
#mbs-offer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:99998}
#mbs-offer-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:99999}

/* Card */
#mbs-offer-modal .mbs-card{
  width:min(1040px,95vw);
  background:var(--mbs-panel);
  border:1px solid var(--mbs-border);
  border-radius:0;
  box-shadow:0 28px 80px rgba(0,0,0,.4);
  color:var(--mbs-text);
  position:relative;
  padding:0;
  max-height:calc(100svh - 20px);
  overflow:hidden;
  display:flex;
}

/* Grid (desktop) */
#mbs-offer-modal .mbs-grid{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:0;
  align-items:center;
  min-height:520px;
  overflow:auto;
}

/* Cover column */
#mbs-offer-modal .mbs-col-cover{
  background:var(--mbs-panel);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--mbs-border);
}
#mbs-offer-modal .mbs-cover{
  display:block;
  max-width:100%;
  height:auto;
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* Copy column */
#mbs-offer-modal .mbs-col-copy{ padding:30px 34px 32px }

/* Close */
#mbs-offer-modal .mbs-close{
  position:absolute; top:10px; right:12px;
  background:transparent; border:0; color:#cfcfcf; font-size:22px; cursor:pointer;
}
#mbs-offer-modal .mbs-close:hover{color:#fff}

/* Typography */
#mbs-offer-modal .mbs-title{
  font:900 34px/1.15 "Montserrat", system-ui, Segoe UI, Roboto, Helvetica, Arial;
  text-transform:uppercase; letter-spacing:.35px;
  margin:6px 0 16px; color:#fff;
}
#mbs-offer-modal .mbs-lead{
  font:600 18px/1.8 "Montserrat", system-ui, Segoe UI, Roboto, Helvetica, Arial;
  margin:12px 0; color:var(--mbs-text-dim);
}
#mbs-offer-modal .mbs-lead strong,
#mbs-offer-modal .mbs-title .hl{ color:var(--mbs-yellow); }

/* Actions (sticky) */
#mbs-offer-modal .mbs-actions{
  margin-top:22px; display:flex; flex-direction:column; gap:14px; max-width:620px;
  position:sticky; bottom:0; padding-top:14px; background:var(--mbs-panel); z-index:2;
}
#mbs-offer-modal .mbs-btn{
  border:1px solid var(--mbs-border); border-radius:0; cursor:pointer;
  padding:18px 20px; text-align:center;
  font:900 16px/1 "Montserrat", system-ui, Segoe UI, Roboto, Helvetica, Arial;
  text-transform:uppercase; letter-spacing:.45px;
}
#mbs-offer-modal .mbs-btn-primary{background:var(--mbs-red); color:#fff; border-color:transparent}
#mbs-offer-modal .mbs-btn-primary:hover{filter:brightness(1.06)}
#mbs-offer-modal .mbs-btn-secondary{background:#1f1f1f; color:#dcdcdc}
#mbs-offer-modal .mbs-btn-secondary:hover{background:#272727}

/* ====== Responsive ====== */

/* ≤ 1024px : agrandir la cover + supprimer toute bordure sous la cover,
   centrer texte/boutons, ET réduire drastiquement l’espace cover→texte */
@media (max-width:1024px){
  /* grille verticale compacte : le gap entre cover et texte est minime */
  #mbs-offer-modal .mbs-grid{
    grid-template-columns:1fr;
    min-height:unset;
    gap:8px;                 /* <= espace cover → texte (très petit) */
    padding:8px 12px 10px;   /* même “air” en haut */
  }
  #mbs-offer-modal .mbs-col-cover{
    order:-1; padding:0; border:0; background:var(--mbs-panel);
  }
  #mbs-offer-modal .mbs-cover{
    margin:0 auto; width:auto; height:auto;
    /* >>> Cover nettement plus grande mais bornée pour ne pas forcer le scroll */
    max-height:clamp(200px, 32svh, 340px);
    object-fit:contain;
  }

  /* texte/boutons centrés */
  #mbs-offer-modal .mbs-col-copy{
    text-align:center;
    padding:14px 14px 12px;  /* paddings serrés pour laisser de la place à la cover */
  }
  #mbs-offer-modal .mbs-actions{
    align-items:center; justify-content:center; margin-left:auto; margin-right:auto;
  }
  #mbs-offer-modal .mbs-btn{ width:100%; max-width:580px; }

  /* typo compacte */
  #mbs-offer-modal .mbs-title{
    font-size:20px; line-height:1.22; margin:6px 0 8px; text-wrap:balance;
  }
  #mbs-offer-modal .mbs-lead{
    font-size:14.75px; line-height:1.46; margin:7px 0; text-wrap:balance;
  }
  #mbs-offer-modal .mbs-btn{ padding:12px 16px; font-size:13.8px; }
}

/* Très petits écrans / petites hauteurs : garde tout visible */
@media (max-width:380px),(max-height:620px){
  #mbs-offer-modal .mbs-cover{ max-height:clamp(170px, 30svh, 320px); } /* un peu plus de place mais bornée */
  #mbs-offer-modal .mbs-title{ font-size:19px; }
  #mbs-offer-modal .mbs-lead{ font-size:14.3px; }
  #mbs-offer-modal .mbs-btn{ font-size:13.2px; }
}