* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: Arial, sans-serif;
  overflow-x: hidden;
  background: #fafafa;
  color: #111;
}

/* NAVBAR */

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  color: white;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
}

.menu {
  display: flex;
  align-items: center;
  gap: 25px;
}

.menu a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.menu a:hover {
  color: #25D366;
}

.cart-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cart-btn {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 20px;
  background: #fff;
  color: #000;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.cart-btn:hover {
  opacity: 0.9;
}

.payment-info {
  margin-top: 5px;
  font-size: 11px;
  color: white;
  opacity: 0.85;
  text-align: center;
  white-space: nowrap;
}

/* HERO */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url("../../images/marrakech.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: white;
  padding: 20px;
}

.logo-container {
  text-align: center;
}

.logo {
  width: 380px;
  max-width: 85%;
  display: block;
  margin: 0 auto;
  animation: fadeIn 1s ease;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
}

.subtitle {
  color: white;
  font-size: 18px;
  margin-top: 10px;
  opacity: 0.9;
}

/* MAIN CIRCLES */

.main-circles {
  display: flex;
  justify-content: center;
  gap: 25px;
  margin-top: 35px;
  flex-wrap: wrap;
}

.circle-box {
  width: 180px;
  height: 180px;
  border-radius: 50%;

  background: radial-gradient(
    circle at 35% 28%,
    #ffffff 0%,
    #f8f8f8 35%,
    #eeeeee 68%,
    #dddddd 100%
  );

  color: #222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  overflow: visible;
  transition: all 0.28s ease;

  border: 1px solid rgba(255,255,255,0.95);

  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.95),
    inset 0 -3px 6px rgba(0,0,0,0.08),
    0 8px 18px rgba(0,0,0,0.20);
}

.circle-box::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -8px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 30, 30, 0.34);
  filter: blur(11px);
  z-index: -2;
}

.circle-box::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -2px;
  height: 35%;
  border-radius: 0 0 50% 50%;
  box-shadow:
    -6px 6px 12px rgba(255, 30, 30, 0.12),
    6px 6px 12px rgba(255, 30, 30, 0.12);
  z-index: -1;
  pointer-events: none;
}

.circle-icon {
  width: 48px;
  height: 48px;
  stroke: #222;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.10));
}

.circle-box span {
  color: #111 !important;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.15;
  max-width: 78%;
  white-space: normal;
  word-break: keep-all;
}



.circle-blur {
  filter: blur(4px);
  opacity: 0.5;
  transition: 0.3s;
}

/* BLUR MENU */

.blur-active .navbar,
.blur-active .logo-container,
.blur-active .subcategory-section {
  filter: blur(5px);
}

#blur-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
}

#blur-overlay.active {
  display: block;
}

#circle-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
}

#circle-menu.active {
  display: block;
}

.sub-circle-menu {
  position: fixed;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
  box-shadow: 0 8px 25px rgba(0,0,0,0.35);
  pointer-events: auto;
  z-index: 4000;
}

.sub-circle-menu:hover {
  background: white;
  color: #111;
  transform: scale(1.08);
}

/* SECTIONS */

.subcategory-section {
  padding: 55px 20px 20px;
  text-align: center;
}

.subcategory-section h2 {
  font-size: 32px;
  margin-bottom: 25px;
}

.subcategory-section h2 {
  text-align: left;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* HORIZONTAL PRODUCTS */

.horizontal-scroll {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 5px 5px 20px;
}

.horizontal-scroll::-webkit-scrollbar {
  height: 8px;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 20px;
}

.card {
  min-width: calc((100% - 40px) / 3);
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transition: 0.3s;
  scroll-snap-align: start;
  flex-shrink: 0;
}

.card:hover {
  transform: translateY(-8px);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: #ddd;
}

.card h3 {
  margin: 15px 10px 10px;
  font-size: 20px;
}

.card p {
  padding: 0 15px;
  margin-bottom: 15px;
  color: #555;
  min-height: 40px;
}

/* BUTTONS */

.btn-whatsapp {
  background-color: #25D366;
  color: white;
  padding: 12px 18px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  border: none;
  cursor: pointer;
  transition: 0.3s;
  margin-bottom: 18px;
}

.btn-whatsapp:hover {
  background-color: #128C43;
  transform: scale(1.05);
}

.btn-danger {
  background: red;
  color: white;
  border: none;
  padding: 12px;
  margin-top: 10px;
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  font-weight: bold;
}

/* POPUPS */

.popup {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
}

.popup-content {
  background: white;
  width: 90%;
  max-width: 430px;
  max-height: 85vh;
  overflow-y: auto;
  margin: 70px auto;
  padding: 20px;
  border-radius: 20px;
  text-align: center;
  position: relative;
}

.popup-content img {
  width: 100%;
  border-radius: 10px;
  margin: 15px 0;
}

.popup-content label {
  display: block;
  text-align: left;
  font-weight: bold;
  margin-top: 10px;
}

.popup-content input {
  width: 100%;
  padding: 10px;
  margin: 8px 0 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  cursor: pointer;
}

.price {
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0;
}

/* CART */

.cart-item {
  background: #f5f5f5;
  padding: 12px;
  border-radius: 12px;
  margin-bottom: 10px;
  text-align: left;
}

.cart-item button {
  margin-top: 8px;
  background: red;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.cart-total {
  background: #e9fff1;
  padding: 15px;
  border-radius: 12px;
  margin: 15px 0;
  font-size: 18px;
  text-align: left;
}

.trust-message {
  color: green;
  font-weight: bold;
  margin: 15px 0 5px;
}

.urgent-message {
  color: red;
  font-weight: bold;
  margin-bottom: 10px;
}

/* WHATSAPP FLOAT */

.whatsapp-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #25D366;
  color: white;
  border-radius: 50px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: 0.3s;
}

.whatsapp-btn img {
  width: 22px;
  height: 22px;
}

.whatsapp-btn:hover {
  transform: scale(1.05);
  background: #128C43;
}


/* HOME FLOAT */

.home-btn {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #111;
  color: white;
  border-radius: 50px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 9999;
  cursor: pointer;
  transition: 0.3s;
}

.home-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-btn:hover {
  transform: scale(1.05);
  background: #25D366;
}

/* ANIMATION */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* MOBILE */

@media (max-width: 768px) {
  .navbar {
    padding: 12px 10px;
  }

  .menu {
    gap: 14px;
  }

  .menu a {
    font-size: 14px;
  }

  .payment-info {
    font-size: 9px;
  }

  .logo {
    width: 300px;
  }

  .subtitle {
    font-size: 16px;
  }

  .circle-box {
    width: 140px;
    height: 140px;
    font-size: 13px;
  }

  .sub-circle-menu {
    width: 90px;
    height: 90px;
    font-size: 12px;
  }

  .subcategory-section h2 {
    font-size: 26px;
  }

  .card {
    min-width: 85%;
  }

  .whatsapp-btn span,
  .home-btn span {
    display: none;
  }

  .whatsapp-btn,
  .home-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    justify-content: center;
    padding: 0;
  }

  .whatsapp-btn img,
  .home-btn svg {
    width: 28px;
    height: 28px;
  }
}


/* CARTES COMPACTES : texte + bouton directement sur l'image */
.card {
  position: relative;
  height: 270px;
  border-radius: 22px;
  overflow: hidden;
  background: #111;
  color: white;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
 background: linear-gradient(
  to top,
  rgba(0,0,0,0.65) 0%,
  rgba(0,0,0,0.30) 30%,
  rgba(0,0,0,0) 50%
);
  z-index: 1;
  pointer-events: none;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: 0.35s;
}

.card:hover img {
  transform: scale(1.06);
}

.card h3,
.card p,
.card .price-tag,
.card .btn-whatsapp {
  position: absolute;
  z-index: 2;
}

/* TITRE */

.card h3 {
  left: 16px;
  bottom: 58px;

  margin: 0;
  color: white;
  font-size: 20px;
  line-height: 1.1;

  text-align: left;

  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

/* DESCRIPTION */

.card p {
  left: 16px;
  bottom: 20px;

  margin: 0;
  padding: 0;

  color: rgba(255,255,255,0.9);

  font-size: 13px;
  line-height: 1.3;

  text-align: left;

  max-width: 55%;
}

/* PRIX */

.price-tag {
  position: absolute;
  right: 16px;
  bottom: 58px;

  background: rgba(0,0,0,0.7);
  color: white;

  padding: 7px 12px;
  border-radius: 20px;

  font-size: 13px;
  font-weight: bold;

  backdrop-filter: blur(5px);
}

/* BOUTON */

.card .btn-whatsapp {
  right: 16px;
  bottom: 15px;

  left: auto;

  width: auto;

  margin: 0;

  padding: 10px 15px;

  font-size: 12px;
  border-radius: 30px;
}

.card h3 {
  bottom: 92px;
  margin: 0;
  color: white;
  font-size: 20px;
  line-height: 1.15;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65);
}

.card p {
  bottom: 55px;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,0.88);
  min-height: auto;
  font-size: 14px;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card .btn-whatsapp {
  bottom: 14px;
  width: fit-content;
  margin: 0;
  padding: 10px 15px;
  font-size: 13px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.25);
}

.card:hover {
  transform: translateY(-6px);
}

@media (max-width: 768px) {
  .card {
    height: 255px;
  }

  .card h3 {
    bottom: 88px;
    font-size: 19px;
  }

  .card p {
    bottom: 53px;
    font-size: 13px;
  }

  .card .btn-whatsapp {
    bottom: 13px;
    font-size: 12px;
    padding: 9px 13px;
  }
}
#backToTop {
  position: fixed;
  bottom: 20px;
  left: 20px;

  width: 55px;
  height: 55px;

  border: none;
  border-radius: 50%;

  background: #ffffff;
  color: #000;

  font-size: 22px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

  z-index: 999;
  transition: 0.3s;
}

#backToTop:hover {
  transform: scale(1.1);
}

/* PRICE GREEN */
.price-tag {
  background: #25D366 !important;
  color: white !important;
  box-shadow: 0 6px 18px rgba(37,211,102,0.35);
}

/* WHITE BUTTON */
.card .btn-whatsapp {
  background: white !important;
  color: #111 !important;
  font-weight: bold;
}


/* MULTILINE PRICE */
.price-tag {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 80px;
}

.price-tag span {
  display: block;
  line-height: 1.2;
}


/* FIX CARD TEXT LAYOUT: title and description each on its own line */
.card h3 {
  left: 16px !important;
  right: 120px !important;
  bottom: 64px !important;
  display: block !important;
  width: auto !important;
  max-width: calc(100% - 145px) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  line-height: 1.2 !important;
}

.card p {
  left: 16px !important;
  right: 120px !important;
  bottom: 36px !important;
  display: block !important;
  width: auto !important;
  max-width: calc(100% - 145px) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
  line-height: 1.25 !important;
}

/* PRICE: show default in DH only */
.price-tag {
  right: 16px !important;
  bottom: 58px !important;
  min-width: 78px !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 0 !important;
  background: #25D366 !important;
  color: white !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Detail button white */
.card .btn-whatsapp {
  right: 16px !important;
  left: auto !important;
  bottom: 16px !important;
  background: white !important;
  color: #111 !important;
}

.card .btn-whatsapp:hover {
  background: #25D366 !important;
  color: white !important;
}

/* CURRENCY FLOAT BUTTON */
#currencyBtn {
  position: fixed;
  bottom: 20px;
  left: 85px;
  width: 55px;
  height: 55px;
  border: none;
  border-radius: 50%;
  background: #25D366;
  color: white;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  transition: 0.3s;
}

#currencyBtn:hover {
  transform: scale(1.1);
}

.currency-menu {
  display: none;
  position: fixed;
  bottom: 82px;
  left: 85px;
  background: white;
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  z-index: 9999;
}

.currency-menu.show {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.currency-menu button {
  border: none;
  border-radius: 12px;
  background: #f3f3f3;
  color: #111;
  font-weight: bold;
  padding: 9px 13px;
  cursor: pointer;
}

.currency-menu button:hover {
  background: #25D366;
  color: white;
}

@media (max-width: 768px) {
  .card h3 {
    right: 108px !important;
    max-width: calc(100% - 130px) !important;
    bottom: 66px !important;
    font-size: 17px !important;
  }

  .card p {
    right: 108px !important;
    max-width: calc(100% - 130px) !important;
    bottom: 39px !important;
    font-size: 12px !important;
  }

  .price-tag {
    right: 12px !important;
    bottom: 58px !important;
    min-width: 70px !important;
    font-size: 12px !important;
  }

  .card .btn-whatsapp {
    right: 12px !important;
    bottom: 15px !important;
    font-size: 11px !important;
    padding: 8px 11px !important;
  }

  #currencyBtn {
    left: 85px;
    width: 55px;
    height: 55px;
  }

  .currency-menu {
    left: 85px;
  }
}


/* SMALL FLOAT BUTTONS: currency + language */
#currencyBtn,
#languageBtn {
  width: 44px !important;
  height: 44px !important;
  bottom: 25px !important;
  font-size: 12px !important;
  border-radius: 50% !important;
}

#currencyBtn {
  left: 82px !important;
}

#languageBtn {
  position: fixed;
  left: 132px;
  bottom: 25px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #111;
  color: white;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  transition: 0.3s;
}

#languageBtn:hover {
  transform: scale(1.1);
  background: #25D366;
}

.currency-menu {
  left: 82px !important;
  bottom: 75px !important;
}

.language-menu {
  display: none;
  position: fixed;
  bottom: 75px;
  left: 132px;
  background: white;
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
  z-index: 9999;
}

.language-menu.show {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.language-menu button {
  border: none;
  border-radius: 12px;
  background: #f3f3f3;
  color: #111;
  font-weight: bold;
  padding: 9px 13px;
  cursor: pointer;
  white-space: nowrap;
}

.language-menu button:hover {
  background: #25D366;
  color: white;
}

body[dir="rtl"] .card h3,
body[dir="rtl"] .card p {
  text-align: right !important;
}

@media (max-width: 768px) {
  #currencyBtn {
    left: 78px !important;
  }

  #languageBtn {
    left: 126px !important;
  }

  .currency-menu {
    left: 78px !important;
  }

  .language-menu {
    left: 126px !important;
  }
}


/* LANGUAGE FLAG BUTTON */

#languageBtn {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
  border: 2px solid white !important;
}

.flag-fr {
  background-image: url('https://flagcdn.com/w80/fr.png') !important;
}

.flag-en {
  background-image: url('https://flagcdn.com/w80/gb.png') !important;
}

.flag-es {
  background-image: url('https://flagcdn.com/w80/es.png') !important;
}

.flag-ar {
  background-image: url('https://flagcdn.com/w80/ma.png') !important;
}


/* OPTIONS DE RESERVATION HABIBI */
.hidden {
  display: none !important;
}

.booking-options {
  margin: 12px 0;
  text-align: left;
}

.booking-options small {
  display: block;
  margin-top: -8px;
  margin-bottom: 12px;
  color: #666;
  font-size: 12px;
}

.option-group {
  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  padding: 12px;
  margin: 12px 0;
}

.option-group h4 {
  font-size: 15px;
  margin-bottom: 10px;
  color: #111;
}

.option-group label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: normal !important;
  margin: 8px 0 !important;
  cursor: pointer;
}

.option-group input[type="radio"] {
  width: auto !important;
  margin: 0 !important;
}

.popup-content select,
.popup-content input[type="time"],
.popup-content input[type="file"] {
  width: 100%;
  padding: 10px;
  margin: 8px 0 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: white;
}


/* POPUP BOOKING LAYOUT FIXES */
.required-star,
.required-text {
  color: #e60023;
  font-weight: 800;
}

.booking-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0;
  align-items: start;
}

.booking-field label {
  display: block;
  text-align: left;
  font-weight: bold;
  margin-top: 0;
  margin-bottom: 6px;
  font-size: 13px;
}

.popup-content .booking-field input,
.popup-content .booking-field select {
  width: 100%;
  padding: 10px;
  margin: 0 0 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: white;
}

.booking-field small {
  display: block;
  color: #666;
  font-size: 12px;
  margin-top: -5px;
}

@media (max-width: 520px) {
  .booking-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}


/* === CORRECTIONS POPUP RESERVATION V2 === */
.required-star,
.required-text {
  color: #e60023 !important;
  font-weight: 900 !important;
}

.required-text {
  font-size: 12px !important;
}

.booking-options {
  text-align: left !important;
}

.booking-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 10px 0 !important;
}

.booking-row.one-column {
  grid-template-columns: 1fr !important;
}

.booking-field label {
  display: block !important;
  text-align: left !important;
  font-weight: 700 !important;
  margin: 0 0 6px !important;
  font-size: 13px !important;
}

.popup-content .booking-field input,
.popup-content .booking-field select,
.popup-content input[type="time"],
.popup-content input[type="file"],
.popup-content select {
  width: 100% !important;
  padding: 10px !important;
  margin: 0 0 10px !important;
  border-radius: 10px !important;
  border: 1px solid #ccc !important;
  background: #fff !important;
}

.popup-content input[type="file"] {
  cursor: pointer !important;
}

.booking-field small {
  display: block !important;
  color: #666 !important;
  font-size: 12px !important;
  margin-top: -4px !important;
}

@media (max-width: 520px) {
  .booking-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
  }
}


/* ==============================
   HABIBI FINAL MVP IMPROVEMENTS
   ============================== */
.hidden { display: none !important; }

.enhanced-popup {
  max-width: 560px !important;
  padding: 22px !important;
}

.popup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.popup-head h2 {
  text-align: left;
  font-size: 24px;
  line-height: 1.15;
  margin-right: 20px;
}

.popup-badge {
  flex-shrink: 0;
  background: #e9fff1;
  color: #128c43;
  border: 1px solid rgba(37, 211, 102, 0.35);
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: bold;
}

.popup-note {
  background: #fff8e5;
  color: #6b4b00;
  border: 1px solid #ffe2a1;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  text-align: left;
  margin-bottom: 14px;
}

.booking-options {
  margin-top: 12px;
  text-align: left;
}

.booking-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.booking-row.one-column {
  grid-template-columns: 1fr;
}

.booking-field label,
.option-group h4 {
  display: block;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 7px;
  color: #111;
}

.required-star,
.required-text {
  color: #e11d48 !important;
  font-weight: 900;
}

.booking-field input,
.booking-field select,
.popup-content input,
.popup-content select {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid #d7d7d7;
  background: #fff;
  outline: none;
}

.booking-field input:focus,
.booking-field select:focus {
  border-color: #25D366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}

.upload-field {
  background: #f8f8f8;
  border: 1px dashed #bdbdbd;
  padding: 12px;
  border-radius: 16px;
}

.booking-field small {
  display: block;
  margin-top: 5px;
  color: #666;
  font-size: 12px;
}

.option-group {
  background: #f8f8f8;
  padding: 13px;
  border-radius: 16px;
  margin-bottom: 12px;
}

.radio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.radio-grid.two-cols {
  grid-template-columns: 1fr 1fr;
}

.radio-grid label,
.option-group label {
  background: white;
  border: 1px solid #dedede;
  border-radius: 13px;
  padding: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: 0.2s;
}

.radio-grid label:hover,
.option-group label:hover {
  border-color: #25D366;
  transform: translateY(-1px);
}

.popup-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #e9fff1;
  color: #111;
  padding: 14px;
  border-radius: 16px;
  margin: 14px 0;
  font-size: 15px;
}

.popup-summary strong {
  color: #128c43;
  font-size: 22px;
}

.add-program-btn {
  width: 100%;
  margin-bottom: 0 !important;
}

.cart-item-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.cart-options {
  margin: 8px 0;
  padding: 8px;
  background: white;
  border-radius: 10px;
  border-left: 4px solid #25D366;
}

.item-total {
  font-weight: bold;
  color: #128c43;
  margin-top: 5px;
}

.price {
  color: #128c43;
}

@media (max-width: 768px) {
  .enhanced-popup {
    width: 94% !important;
    margin: 55px auto !important;
    max-height: 88vh !important;
  }

  .popup-head {
    flex-direction: column;
  }

  .booking-row,
  .radio-grid,
  .radio-grid.two-cols {
    grid-template-columns: 1fr;
  }

  .popup-head h2 {
    font-size: 21px;
    margin-right: 30px;
  }
}


/* =========================
   HABIBI V3 - popup final polish
   ========================= */
.required-star,
.required-text {
  color: #e11d48 !important;
  font-weight: 800;
}

.booking-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.booking-field label,
.option-group h4 {
  font-size: 13px;
  line-height: 1.35;
  color: #111827;
}

.popup-content select,
.popup-content input[type="time"],
.popup-content input[type="file"] {
  width: 100%;
  padding: 10px;
  margin: 8px 0 15px;
  border-radius: 10px;
  border: 1px solid #ccc;
  background: #fff;
}

.radio-grid label {
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 10px 12px;
  background: #fafafa;
  cursor: pointer;
  transition: .2s;
}

.radio-grid label:has(input:checked) {
  border-color: #25D366;
  background: #e9fff1;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.18);
}

.popup-summary {
  background: linear-gradient(135deg, #e9fff1, #ffffff);
  border: 1px solid rgba(37,211,102,.25);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 18px;
}

.popup-summary span { color: #374151; font-weight: 700; }
.popup-summary strong { color: #16a34a; font-size: 22px; }

body[dir="rtl"] .booking-field label,
body[dir="rtl"] .cart-item,
body[dir="rtl"] .popup-content label {
  text-align: right !important;
}

body[dir="rtl"] .popup-summary,
body[dir="rtl"] .cart-item-head {
  flex-direction: row-reverse;
}

.cart-item-head button {
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  padding: 0 !important;
  font-size: 18px;
}

@media (max-width: 640px) {
  .booking-row { grid-template-columns: 1fr; gap: 0; }
  .popup-content { margin: 54px auto; max-height: 88vh; }
}


/* V5 FIX: only circles stay red; all other red accents are green */
.circle-box:hover .circle-icon,
.circle-box:hover .circle-icon path,
.circle-box:hover .circle-icon circle,
.circle-box:hover .circle-icon line,
.circle-box:hover .circle-icon polyline,
.circle-box:hover .circle-icon polygon {
  stroke: #E50914 !important;
  color: #E50914 !important;
}

.circle-box:hover .circle-icon {
  transform: translateY(2px) scale(0.96);
  filter: drop-shadow(0 0 5px rgba(229, 9, 20, 0.35));
}
/* =========================================================
   V6 COMPACT SUBCATEGORIES
   Objectif : rendre les cartes de sous-catégories plus petites,
   plus légères et plus rapides à parcourir, surtout sur mobile.
   ========================================================= */

.subcategory-section {
  padding-top: 38px !important;
  padding-bottom: 10px !important;
}

.subcategory-section h2 {
  font-size: 26px !important;
  margin-bottom: 14px !important;
  padding-left: 4px;
}

.subcategory-section .horizontal-scroll {
  gap: 14px !important;
  padding: 4px 4px 14px !important;
}

.subcategory-section .card {
  min-width: calc((100% - 42px) / 4) !important;
  height: 215px !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.16) !important;
}

.subcategory-section .card::after {
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.68) 0%,
    rgba(0,0,0,0.38) 34%,
    rgba(0,0,0,0.06) 56%,
    rgba(0,0,0,0) 100%
  ) !important;
}

.subcategory-section .card h3 {
  left: 12px !important;
  right: 92px !important;
  bottom: 52px !important;
  max-width: calc(100% - 108px) !important;
  font-size: 16px !important;
  line-height: 1.12 !important;
}

.subcategory-section .card p {
  left: 12px !important;
  right: 92px !important;
  bottom: 29px !important;
  max-width: calc(100% - 108px) !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.subcategory-section .price-tag {
  right: 12px !important;
  bottom: 52px !important;
  min-width: 64px !important;
  padding: 6px 9px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
}

.subcategory-section .card .btn-whatsapp {
  right: 12px !important;
  bottom: 14px !important;
  padding: 7px 10px !important;
  font-size: 10.5px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.subcategory-section .card:hover {
  transform: translateY(-4px) !important;
}

@media (max-width: 1100px) {
  .subcategory-section .card {
    min-width: calc((100% - 28px) / 3) !important;
  }
}

@media (max-width: 768px) {
  .subcategory-section {
    padding: 34px 14px 6px !important;
  }

  .subcategory-section h2 {
    font-size: 21px !important;
    margin-bottom: 10px !important;
  }

  .subcategory-section .horizontal-scroll {
    gap: 12px !important;
  }

  .subcategory-section .card {
    min-width: 72% !important;
    height: 190px !important;
    border-radius: 16px !important;
  }

  .subcategory-section .card h3 {
    left: 11px !important;
    right: 84px !important;
    bottom: 50px !important;
    max-width: calc(100% - 98px) !important;
    font-size: 17px !important;
  }

  .subcategory-section .card p {
    left: 11px !important;
    right: 84px !important;
    bottom: 29px !important;
    max-width: calc(100% - 98px) !important;
    font-size: 10.5px !important;
  }

  .subcategory-section .price-tag {
    right: 10px !important;
    bottom: 50px !important;
    min-width: 58px !important;
    padding: 5px 8px !important;
    font-size: 10.5px !important;
  }

  .subcategory-section .card .btn-whatsapp {
    right: 10px !important;
    bottom: 13px !important;
    padding: 7px 9px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 420px) {
  .subcategory-section .card {
    min-width: 76% !important;
    height: 178px !important;
  }

  .subcategory-section .card h3 {
    font-size: 14px !important;
    bottom: 47px !important;
  }

  .subcategory-section .price-tag {
    bottom: 46px !important;
  }
}


/* POPUP IMAGE SERVICES ON IMAGE - NO GREEN FRAME */
.popup-image-wrap {
  position: relative;
  width: 100%;
  margin: 8px 0;
  border-radius: 16px;
  overflow: hidden;
  background: #eee;
  padding: 0 !important;
}

.popup-image-wrap #popup-img {
  width: 100% !important;
  height: 320px !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.popup-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(0,0,0,0.58) 0%,
    rgba(0,0,0,0.28) 38%,
    rgba(0,0,0,0) 70%
  );
  pointer-events: none;
  z-index: 1;
}

.popup-services {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  width: 170px;
  max-width: 52%;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: white;
  text-align: left;
  box-shadow: none !important;
  backdrop-filter: none !important;
  z-index: 3;
}

.services-title {
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 7px;
  color: white;
  text-shadow: 0 2px 7px rgba(0,0,0,0.75);
}

.popup-services ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.popup-services li {
  position: relative;
  padding-left: 20px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 800;
  color: white;
  text-shadow: 0 2px 7px rgba(0,0,0,0.8);
}

.popup-services li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent !important;
  color: #25D366;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  display: inline-block;
  text-shadow: 0 1px 4px rgba(0,0,0,0.75);
}

@media (max-width: 520px) {
  .popup-image-wrap #popup-img {
    height: 260px !important;
  }

  .popup-image-wrap::after {
    background: linear-gradient(
      to left,
      rgba(0,0,0,0.66) 0%,
      rgba(0,0,0,0.35) 45%,
      rgba(0,0,0,0) 78%
    );
  }

  .popup-services {
    right: 10px;
    width: 142px;
    max-width: 55%;
  }

  .services-title {
    font-size: 11px;
    margin-bottom: 6px;
  }

  .popup-services li {
    font-size: 10px;
    padding-left: 18px;
  }

  .popup-services li::before {
    font-size: 14px;
  }
}


/* FINAL HABIBI FOOTER */
.habibi-footer {
  margin-top: 45px;
  background: linear-gradient(135deg, #0f0f0f 0%, #1c1c1c 55%, #0b3d22 100%);
  color: white;
  padding: 45px 20px 18px;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
  gap: 28px;
  align-items: start;
}

.footer-logo {
  width: 170px;
  max-width: 80%;
  margin-bottom: 14px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35));
}

.footer-brand p,
.footer-col p,
.footer-col span,
.footer-col a {
  color: rgba(255,255,255,0.78);
  font-size: 14px;
  line-height: 1.6;
}

.footer-col h3 {
  font-size: 16px;
  margin-bottom: 12px;
  color: white;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  text-decoration: none;
  transition: 0.25s;
}

.footer-col a:hover {
  color: #25D366;
  transform: translateX(3px);
}

.footer-cta a {
  width: fit-content;
  margin-top: 6px;
  background: #25D366;
  color: white !important;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: bold;
  box-shadow: 0 8px 20px rgba(37,211,102,0.25);
}

.footer-bottom {
  max-width: 1100px;
  margin: 30px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  text-align: center;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .subcategory-section {
    padding-left: 14px;
    padding-right: 14px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .habibi-footer {
    padding-bottom: 92px;
  }
}


/* FINAL POLISH OVERRIDES */
.card h3,
.card p,
.card .price-tag,
.card .btn-whatsapp {
  position: absolute;
  z-index: 2;
}

.card {
  will-change: transform;
}

.horizontal-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.popup-content {
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
}

button, a {
  -webkit-tap-highlight-color: transparent;
}


/* PAYMENT POPUP V1 - Habibi Check-In */
.cart-payment-actions {
  margin: 16px 0 10px;
  padding: 14px;
  border-radius: 18px;
  background: #f8f8f8;
  border: 1px solid #ececec;
}

.btn-pay-main {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 14px 18px;
  background: #111;
  color: white;
  font-weight: 800;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: 0.25s;
}

.btn-pay-main:hover {
  background: #25D366;
  transform: translateY(-2px);
}

.payment-mini-note {
  margin: 9px 0 0;
  font-size: 12px;
  color: #555;
  line-height: 1.35;
}

.payment-content {
  max-width: 560px;
}

.payment-intro {
  margin: 10px 0 14px;
  color: #555;
  line-height: 1.5;
}

.payment-summary-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #e9fff1;
  border: 1px solid rgba(37, 211, 102, 0.22);
  margin: 14px 0;
  text-align: left;
}

.payment-summary-box span {
  color: #333;
  font-weight: 700;
}

.payment-summary-box strong {
  color: #128C43;
  font-size: 22px;
}

.payment-methods-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 15px 0;
}

.payment-method {
  min-height: 104px;
  border: 1px solid #e8e8e8;
  border-radius: 18px;
  background: white;
  color: #111;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  transition: 0.25s;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.payment-method i,
.payment-method strong {
  font-size: 34px;
  line-height: 1;
}

.payment-method span {
  font-weight: 800;
}

.payment-method small {
  color: #777;
  font-size: 11px;
}

.payment-method:hover {
  transform: translateY(-3px);
  border-color: #25D366;
}

.disabled-pay {
  opacity: 0.62;
  cursor: not-allowed;
  background: #f7f7f7;
}

.binance-pay {
  border-color: rgba(240, 185, 11, 0.35);
}

.binance-pay strong {
  color: #f0b90b;
}

.cash-pay i {
  color: #25D366;
}

.payment-details {
  margin-top: 14px;
  padding: 16px;
  border-radius: 18px;
  background: #fafafa;
  border: 1px solid #eeeeee;
  text-align: left;
}

.payment-details h3 {
  margin-bottom: 8px;
}

.payment-details p {
  color: #555;
  line-height: 1.45;
  margin-bottom: 12px;
}

.binance-qr-card {
  width: 190px;
  height: 190px;
  margin: 12px auto;
  border-radius: 18px;
  background: white;
  border: 1px dashed #bbb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.binance-qr-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin: 0;
  border-radius: 0;
}

.qr-placeholder {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 900;
  color: #111;
  background: repeating-linear-gradient(45deg, #fff, #fff 8px, #f2f2f2 8px, #f2f2f2 16px);
  line-height: 1.4;
}

.qr-placeholder small {
  display: block;
  font-size: 10px;
  font-weight: 700;
  margin-top: 6px;
  color: #666;
}

.btn-binance {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  border-radius: 999px;
  padding: 13px 16px;
  background: #f0b90b;
  color: #111;
  font-weight: 900;
  margin: 8px 0;
}

.payment-whatsapp-btn {
  width: 100%;
  margin: 8px 0 0 !important;
}

.cash-warning {
  background: #fff5e8;
  border: 1px solid #ffd8a8;
  border-radius: 14px;
  padding: 12px;
  color: #7a3d00 !important;
  font-weight: 700;
}

.cash-confirm-line {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 !important;
  padding: 12px;
  border-radius: 14px;
  background: white;
  border: 1px solid #eeeeee;
  font-weight: 700 !important;
  line-height: 1.35;
}

.cash-confirm-line input {
  width: auto !important;
  margin: 2px 0 0 !important;
}

.hidden {
  display: none !important;
}

@media (max-width: 600px) {
  .payment-methods-grid {
    grid-template-columns: 1fr;
  }

  .payment-summary-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .binance-qr-card {
    width: 170px;
    height: 170px;
  }
}


/* ORDER SUCCESS BANNER */
.order-success-banner {
  display: none;
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, 760px);
  background: #e9fff1;
  color: #0f6b35;
  border: 1px solid rgba(37, 211, 102, 0.45);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 14px 35px rgba(0,0,0,0.18);
  z-index: 12000;
  text-align: center;
}

.order-success-banner.show {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.order-success-banner strong {
  font-size: 17px;
}

.order-success-banner span {
  font-size: 13px;
  line-height: 1.4;
}

.btn-pay-main {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#cart-payment-actions {
  display: none !important;
}

@media (max-width: 768px) {
  .order-success-banner {
    top: 76px;
    padding: 12px 14px;
  }
}


/* ADMIN COMMANDES LOCAL */
#adminOrdersBtn {
  position: fixed;
  bottom: 25px;
  left: 182px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: #111;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  transition: 0.3s;
}

#adminOrdersBtn:hover {
  transform: scale(1.08);
  background: #25D366;
}

.admin-orders-content {
  max-width: 760px !important;
  text-align: left !important;
}

.admin-intro {
  color: #555;
  margin: 8px 0 18px;
  line-height: 1.5;
}

.admin-login-box {
  background: #f7f7f7;
  border-radius: 18px;
  padding: 16px;
}

.admin-login-box label {
  font-weight: 800;
  display: block;
  margin-bottom: 8px;
}

.admin-login-box input {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
}

.admin-login-box small {
  display: block;
  color: #777;
  margin-top: 10px;
}

.admin-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #f7f7f7;
  padding: 12px;
  border-radius: 16px;
  margin-bottom: 14px;
}

.admin-toolbar button,
.admin-order-actions button {
  border: none;
  border-radius: 999px;
  padding: 9px 12px;
  background: #111;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.admin-toolbar button:hover,
.admin-order-actions button:hover {
  background: #25D366;
}

.admin-order-card {
  border: 1px solid #eee;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.admin-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.admin-order-head strong {
  display: block;
  font-size: 18px;
}

.admin-order-head span {
  display: block;
  color: #666;
  font-size: 13px;
}

.admin-status {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px !important;
  font-weight: 800;
  white-space: nowrap;
}

.admin-status.pending {
  background: #fff3cd;
  color: #8a5a00;
}

.admin-status.paid {
  background: #e9fff1;
  color: #128C43;
}

.admin-order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.admin-order-meta span {
  background: #f4f4f4;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
}

.admin-order-items {
  padding-left: 20px;
  margin: 10px 0;
}

.admin-order-items li {
  margin-bottom: 8px;
  line-height: 1.45;
}

.admin-options {
  color: #666;
  font-size: 13px;
  margin-top: 4px;
}

.admin-order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-empty {
  background: #f7f7f7;
  border-radius: 14px;
  padding: 18px;
  color: #555;
}

@media (max-width: 768px) {
  #adminOrdersBtn {
    left: 182px;
    bottom: 25px;
  }
  .admin-order-head {
    flex-direction: column;
  }
  .admin-toolbar {
    align-items: stretch;
  }
  .admin-toolbar button,
  .admin-order-actions button {
    width: 100%;
  }
}


/* MYSQL PAYMENT / ADMIN LINK */
.payment-customer-box{
  background:#f7f7f7;
  border:1px solid #ececec;
  border-radius:18px;
  padding:12px;
  margin:14px 0;
}
.payment-whatsapp-btn:disabled{opacity:.65;cursor:not-allowed;transform:none!important;}
.footer-admin-link{max-width:1100px;margin:18px auto 0;text-align:center;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;}
.footer-admin-link a{color:#25D366;text-decoration:none;font-weight:700;}
.footer-admin-link a:hover{text-decoration:underline;}
.habibi-availability-box{background:#e9fff1;color:#128C43;border:1px solid rgba(37,211,102,.35);border-radius:14px;padding:10px 12px;margin:10px 0;font-weight:700;text-align:left}.habibi-availability-box ul{margin:8px 0 0 18px;color:#111;font-weight:500}.habibi-availability-box li{margin:3px 0}


/* HABIBI FINAL CLEAN 2026-05-14
   - une seule logique produit inactif
   - noir & blanc sans voile gris lourd
   - calendrier stable
   - images avec fallback JS */
.card{position:relative;isolation:isolate;}
.card img{background:#e5e7eb;}
.card.habibi-inactive-locked,
.card.habibi-product-inactive{
  filter:grayscale(1)!important;
  opacity:1!important;
  cursor:not-allowed!important;
}
.card.habibi-inactive-locked::before,
.card.habibi-product-inactive::before,
.card.habibi-inactive-locked::after,
.card.habibi-product-inactive::after{
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.24) 30%,rgba(0,0,0,0) 55%)!important;
  z-index:1!important;
  pointer-events:none!important;
}
.card.habibi-inactive-locked img,
.card.habibi-product-inactive img{
  filter:grayscale(1)!important;
  opacity:1!important;
}
.card.habibi-inactive-locked .inactive-badge,
.card.habibi-product-inactive .inactive-badge{
  position:absolute!important;
  top:72px!important;
  left:12px!important;
  right:auto!important;
  z-index:6!important;
  background:rgba(0,0,0,.78)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:999px!important;
  padding:7px 11px!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:center!important;
  box-shadow:none!important;
  pointer-events:none!important;
}
.card.habibi-inactive-locked button,
.card.habibi-inactive-locked .btn-whatsapp,
.card.habibi-product-inactive button,
.card.habibi-product-inactive .btn-whatsapp{
  background:#111!important;
  color:#fff!important;
  cursor:not-allowed!important;
  transform:none!important;
  opacity:.92!important;
}
.card.habibi-inactive-locked:hover,
.card.habibi-product-inactive:hover{transform:none!important;}
.card.habibi-inactive-locked:hover img,
.card.habibi-product-inactive:hover img{transform:none!important;}

.habibi-img-fallback{
  object-fit:contain!important;
  padding:22px!important;
  background:linear-gradient(135deg,#f3f4f6,#e5e7eb)!important;
}

.habibi-date-input{background:#fff!important;cursor:pointer!important;caret-color:transparent!important;}
.habibi-date-picker{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:12px;margin:8px 0 14px;box-shadow:0 18px 45px rgba(15,23,42,.18);position:relative;z-index:10010;text-align:center;}
#habibi-date-picker{animation:hbPop .16s ease;}
@keyframes hbPop{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}
.hb-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.hb-cal-head button{width:38px;height:34px;border:0;border-radius:12px;background:#111827;color:#fff;font-size:20px;font-weight:900;cursor:pointer;}
.hb-cal-head strong{text-transform:capitalize;}
.hb-cal-week,.hb-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.hb-cal-week span{font-size:11px;font-weight:900;color:#6b7280;padding:4px 0;}
.hb-cal-grid button,.hb-cal-grid span{height:38px;border:0;border-radius:12px;font-weight:900;}
.hb-cal-grid button{background:#dcfce7;color:#166534;cursor:pointer;}
.hb-cal-grid button:hover:not(:disabled){background:#16a34a;color:#fff;}
.hb-cal-grid button.hb-selected{outline:3px solid #111827;}
.hb-cal-grid button.hb-disabled{background:#e5e7eb!important;color:#9ca3af!important;cursor:not-allowed!important;text-decoration:line-through;}
.hb-cal-grid button.hb-unavailable{background:#fee2e2!important;color:#991b1b!important;}
.hb-cal-grid button:disabled{pointer-events:none;}
.hb-cal-help{font-size:12px;color:#6b7280;margin-top:10px;font-weight:700;}
.habibi-availability-box.is-ok{background:#e9fff1;color:#128C43;border-color:rgba(37,211,102,.25)}
.habibi-availability-box.is-ko{background:#fee2e2;color:#991b1b;border-color:#fecaca}
.habibi-availability-box.is-neutral{background:#f8fafc;color:#475569;border-color:#e5e7eb}
.payment-customer-box input{width:100%;padding:11px 12px;border:1px solid #ddd;border-radius:12px;margin:7px 0 10px;}

.hb-phone-row{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;align-items:center;margin:7px 0 10px;}
.hb-phone-row select,.hb-phone-row input{height:46px;width:100%;padding:0 12px;border:1px solid #ddd;border-radius:12px;margin:0;background:#fff;box-sizing:border-box;}
.hb-phone-row select{font-weight:800;text-align:center;text-align-last:center;}
.hb-phone-row input{min-width:0;}
.hb-phone-help{display:block;min-height:0;margin-top:0;font-size:12px;color:#6b7280;font-weight:700;}
.hb-phone-help:empty{display:none;}
.hb-phone-help.is-error{display:block;color:#dc2626;}
.hb-phone-help.is-ok{color:#16833a;}
@media(max-width:520px){.hb-phone-row{grid-template-columns:82px minmax(0,1fr);gap:8px;}}
body.habibi-rtl{direction:rtl;}
body.habibi-rtl .popup-content, body.habibi-rtl .cart-item, body.habibi-rtl .payment-content{text-align:right;}
body.habibi-rtl .cart-item-head{direction:ltr;}
@media(max-width:640px){
  .popup-content{margin:54px auto 18px;max-height:88vh;width:94%;overscroll-behavior:contain;}
  .payment-methods-grid{grid-template-columns:1fr!important;}
  .habibi-date-picker{position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;z-index:20000!important;margin:0!important;max-height:75vh;overflow:auto;}
}

/* HABIBI POPUP SAFE VERSION - DRAPEAU LANGUE SEUL */
#languageBtn {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

/* HABIBI POPUP FORCE FIX */
.popup {
  z-index: 999999 !important;
}
.popup-content {
  position: relative !important;
  z-index: 1000000 !important;
}
.card .btn-whatsapp,
button.btn-whatsapp {
  pointer-events: auto !important;
  cursor: pointer !important;
}
.habibi-product-inactive .btn-whatsapp {
  pointer-events: auto !important;
}

/* HABIBI I18N COMPLET / RTL */
body.hb-rtl {
  direction: rtl;
  text-align: right;
}
body.hb-rtl .popup-content,
body.hb-rtl .booking-options,
body.hb-rtl .booking-field label,
body.hb-rtl .popup-note,
body.hb-rtl .cart-item,
body.hb-rtl .cart-total,
body.hb-rtl .footer-col,
body.hb-rtl .footer-brand {
  text-align: right !important;
}
body.hb-rtl .popup-head { flex-direction: row-reverse; }
body.hb-rtl .close { right: auto !important; left: 15px !important; }
body.hb-rtl .horizontal-scroll { direction: rtl; }
body.hb-rtl .card h3,
body.hb-rtl .card p {
  text-align: right !important;
  left: 120px !important;
  right: 16px !important;
}
body.hb-rtl .price-tag {
  right: auto !important;
  left: 16px !important;
}
body.hb-rtl .card .btn-whatsapp {
  right: auto !important;
  left: 16px !important;
}
body.hb-rtl select,
body.hb-rtl input,
body.hb-rtl textarea { text-align: right; }
#languageBtn {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
}

/* HABIBI PRODUCT CODE - INACTIF CLIENT */
.card.habibi-product-inactive {
  filter: grayscale(1) !important;
  opacity: 0.55 !important;
  cursor: not-allowed !important;
  position: relative !important;
}

.card.habibi-product-inactive::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.35) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.card.habibi-product-inactive button,
.card.habibi-product-inactive .btn-whatsapp {
  pointer-events: none !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.card.habibi-product-inactive .inactive-badge {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 9 !important;
  background: rgba(0,0,0,0.86) !important;
  color: #fff !important;
  padding: 12px 18px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-align: center !important;
  width: max-content !important;
  max-width: 90% !important;
  pointer-events: none !important;
}

/* HABIBI FINAL INACTIVE VISUAL */
.card.habibi-product-inactive {
  filter: grayscale(1) !important;
  opacity: 0.50 !important;
  pointer-events: auto !important;
  cursor: not-allowed !important;
  position: relative !important;
}

.card.habibi-product-inactive img {
  filter: grayscale(1) !important;
}

.card.habibi-product-inactive::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.42) !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.card.habibi-product-inactive .inactive-badge {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 10 !important;
}

.card.habibi-product-inactive button,
.card.habibi-product-inactive .btn-whatsapp {
  pointer-events: none !important;
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}

/* HABIBI DIRECT PRODUCT_CODE INACTIVE VISUAL - FINAL */
.card[data-product-code].habibi-product-inactive {
  filter: grayscale(1) !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  position: relative !important;
  background: #111 !important;
}

.card[data-product-code].habibi-product-inactive img {
  filter: grayscale(1) !important;
}

.card[data-product-code].habibi-product-inactive::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.48) !important;
  z-index: 8 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}

.card[data-product-code].habibi-product-inactive button,
.card[data-product-code].habibi-product-inactive .btn-whatsapp {
  pointer-events: none !important;
  opacity: 0.30 !important;
  cursor: not-allowed !important;
}

.card[data-product-code].habibi-product-inactive .inactive-badge {
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 20 !important;
  background: rgba(0,0,0,0.92) !important;
  color: #fff !important;
  padding: 13px 18px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  text-align: center !important;
  width: max-content !important;
  max-width: 90% !important;
  pointer-events: none !important;
}

/* HABIBI LOADER BOUTON UPLOAD / COMMANDE */
.hb-btn-loading,
.hb-btn-loading:hover {
  opacity: 0.88 !important;
  cursor: wait !important;
  transform: none !important;
  pointer-events: none !important;
}

.hb-btn-loading {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}

.hb-loader {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.45);
  border-top-color: #fff;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  animation: hbspin 0.8s linear infinite;
}

@keyframes hbspin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


/* HABIBI UPDATE : PACKS bientôt en rouge */
.packs-link span {
  color: #e00000;
  font-weight: 900;
  margin-left: 6px;
}


/* =========================================================
   HABIBI - PRODUITS CLIQUABLES SANS BOUTON "VOIR DÉTAILS"
   ========================================================= */

/* Toute la carte devient le bouton d'ouverture du produit */
.card.habibi-card-clickable {
  cursor: pointer !important;
}

.card.habibi-card-clickable img,
.card.habibi-card-clickable h3,
.card.habibi-card-clickable p,
.card.habibi-card-clickable .price-tag {
  pointer-events: none !important;
}

/* On cache seulement le bouton "Voir détails" des cartes produits */
.card .btn-whatsapp {
  display: none !important;
}

/* Nouveau placement du texte après suppression du bouton */
.card h3 {
  bottom: 58px !important;
}

.card p {
  bottom: 28px !important;
}

/* Effet premium au hover/clic */
.card.habibi-card-clickable:hover {
  transform: translateY(-5px) !important;
}

.card.habibi-card-clickable:active {
  transform: translateY(-2px) scale(0.995) !important;
}

.card.habibi-card-clickable:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9) !important;
  outline-offset: 4px !important;
}

/* Les produits inactifs restent non cliquables visuellement */
.card.habibi-inactive-locked,
.card.habibi-product-inactive {
  cursor: not-allowed !important;
}

.card.habibi-inactive-locked img,
.card.habibi-product-inactive img,
.card.habibi-inactive-locked h3,
.card.habibi-product-inactive h3,
.card.habibi-inactive-locked p,
.card.habibi-product-inactive p,
.card.habibi-inactive-locked .price-tag,
.card.habibi-product-inactive .price-tag {
  pointer-events: none !important;
}

@media (max-width: 768px) {
  .card h3 {
    bottom: 56px !important;
  }

  .card p {
    bottom: 30px !important;
  }

  .card .price-tag {
    bottom: 48px !important;
  }
}

/* Sous-catégories compactes */
.subcategory-section .card h3 {
  bottom: 44px !important;
}

.subcategory-section .card p {
  bottom: 22px !important;
}

@media (max-width: 768px) {
  .subcategory-section .card h3 {
    bottom: 44px !important;
  }

  .subcategory-section .card p {
    bottom: 23px !important;
  }

  .subcategory-section .price-tag {
    bottom: 40px !important;
  }
}

/* =========================================================
   HABIBI HOME CIRCLES - FINAL PREMIUM SIZE
   Remplace les anciens blocs cercles et évite les doublons.
   ========================================================= */
.main-circles {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 30px !important;
  margin-top: 35px !important;
  flex-wrap: wrap !important;
}

.circle-box {
  width: 220px !important;
  height: 220px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  transform: translateZ(0) !important;
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    filter .22s ease,
    opacity .22s ease !important;
  filter:
    drop-shadow(0 0 10px rgba(229, 9, 20, .18))
    drop-shadow(0 16px 22px rgba(0, 0, 0, .24)) !important;
}

.circle-box::before,
.circle-box::after {
  display: none !important;
  content: none !important;
}

.circle-img,
.circle-box img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
}

.circle-icon {
  width: 132px !important;
  height: 132px !important;
}

.circle-label,
.circle-box span {
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  pointer-events: none !important;
  color: #101010 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 1px rgba(255,255,255,.75) !important;
  white-space: nowrap !important;
}

.circle-box:hover {
  transform: translateY(-4px) scale(1.035) !important;
  filter:
    drop-shadow(0 0 16px rgba(229, 9, 20, .42))
    drop-shadow(0 18px 24px rgba(0, 0, 0, .26)) !important;
}

.circle-box:active {
  transform: translateY(2px) scale(.955) !important;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.20)) !important;
}

.circle-box:focus-visible {
  outline: 2px solid rgba(229,9,20,.78) !important;
  outline-offset: 5px !important;
}

@media (max-width: 900px) {
  .main-circles {
    gap: 22px !important;
  }

  .circle-box {
    width: 180px !important;
    height: 180px !important;
  }

  .circle-icon {
    width: 108px !important;
    height: 108px !important;
  }

  .circle-label,
  .circle-box span {
    bottom: 18px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 640px) {
  .main-circles {
    gap: 12px !important;
    margin-top: 26px !important;
    flex-wrap: nowrap !important;
  }

  .circle-box {
    width: 118px !important;
    height: 118px !important;
  }

  .circle-icon {
    width: 72px !important;
    height: 72px !important;
  }

  .circle-label,
  .circle-box span {
    bottom: 12px !important;
    font-size: 10px !important;
    letter-spacing: .45px !important;
  }
}

@media (max-width: 390px) {
  .main-circles {
    gap: 8px !important;
  }

  .circle-box {
    width: 108px !important;
    height: 108px !important;
  }

  .circle-label,
  .circle-box span {
    font-size: 9px !important;
  }
}


/* =========================================================
   HABIBI MOBILE CIRCLES FIX - 2026-05-16
   Objectif : les 3 cercles restent alignés sur téléphone
   sans bloquer la largeur de l'écran.
   ========================================================= */
@media (max-width: 640px) {
  .hero-content {
    width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .main-circles {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 24px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }

  .circle-box {
    width: clamp(88px, 27vw, 112px) !important;
    height: clamp(88px, 27vw, 112px) !important;
    min-width: 0 !important;
    max-width: 112px !important;
    max-height: 112px !important;
    flex: 0 1 clamp(88px, 27vw, 112px) !important;
  }

  .circle-img,
  .circle-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  .circle-icon {
    width: clamp(54px, 17vw, 70px) !important;
    height: clamp(54px, 17vw, 70px) !important;
  }

  .circle-label,
  .circle-box span {
    bottom: 10px !important;
    font-size: clamp(8px, 2.5vw, 10px) !important;
    letter-spacing: .35px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 390px) {
  .hero-content {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .main-circles {
    gap: 6px !important;
  }

  .circle-box {
    width: clamp(82px, 28vw, 104px) !important;
    height: clamp(82px, 28vw, 104px) !important;
    flex-basis: clamp(82px, 28vw, 104px) !important;
  }
}


/* =========================================================
   HABIBI FINAL RELEASE FIXES - mobile circles + checkout phone
   ========================================================= */
@media (max-width: 640px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .main-circles {
    width: min(100%, 390px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    gap: clamp(6px, 2vw, 10px) !important;
  }

  .circle-box {
    width: min(31vw, 124px) !important;
    height: min(31vw, 124px) !important;
    max-width: 124px !important;
    max-height: 124px !important;
    flex: 0 0 min(31vw, 124px) !important;
  }

  .circle-label,
  .circle-box span {
    bottom: clamp(8px, 2.4vw, 12px) !important;
    font-size: clamp(8px, 2.55vw, 10.5px) !important;
  }

  .hb-phone-row {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  .hb-phone-row select,
  .hb-phone-row input {
    height: 44px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 360px) {
  .main-circles {
    gap: 4px !important;
  }

  .circle-box {
    width: 30vw !important;
    height: 30vw !important;
    flex-basis: 30vw !important;
  }
}

/* =========================================================
   HABIBI CIRCLES FINAL FIX - equal size / aligned / real press
   Dernière couche volontairement placée en fin de fichier.
   ========================================================= */
.main-circles {
  --habibi-circle-size: clamp(218px, 17.5vw, 268px);
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: clamp(18px, 3vw, 40px) !important;
  margin-top: clamp(26px, 4vw, 44px) !important;
  padding: 0 12px !important;
  flex-wrap: wrap !important;
  isolation: isolate !important;
}

.circle-box {
  width: var(--habibi-circle-size) !important;
  height: var(--habibi-circle-size) !important;
  min-width: var(--habibi-circle-size) !important;
  min-height: var(--habibi-circle-size) !important;
  max-width: var(--habibi-circle-size) !important;
  max-height: var(--habibi-circle-size) !important;
  flex: 0 0 var(--habibi-circle-size) !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  overflow: visible !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  transform: translate3d(0,0,0) scale(1) !important;
  transform-origin: 50% 50% !important;
  transition:
    transform .16s cubic-bezier(.2,.9,.2,1),
    filter .16s ease !important;
  filter:
    drop-shadow(0 16px 20px rgba(0,0,0,.34))
    drop-shadow(0 0 10px rgba(229,9,20,.20)) !important;
}

.circle-box::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 76% !important;
  height: 18% !important;
  left: 12% !important;
  bottom: 6% !important;
  border-radius: 999px !important;
  background: radial-gradient(ellipse at center,
    rgba(255, 20, 35, .52) 0%,
    rgba(255, 20, 35, .22) 46%,
    rgba(255, 20, 35, 0) 76%) !important;
  filter: blur(13px) !important;
  opacity: .95 !important;
  pointer-events: none !important;
  transition: transform .16s ease, opacity .16s ease, filter .16s ease !important;
}

.circle-box::after {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: 7.5% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 35% 18%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.12) 24%, rgba(255,255,255,0) 43%),
    radial-gradient(circle at 50% 88%, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 34%) !important;
  box-shadow:
    inset 0 10px 12px rgba(255,255,255,.25),
    inset 0 -14px 20px rgba(0,0,0,.10) !important;
  opacity: .72 !important;
  pointer-events: none !important;
  transition: opacity .16s ease, box-shadow .16s ease, transform .16s ease !important;
}

.circle-img,
.circle-box img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  transform: translate3d(0,0,0) scale(1) !important;
  transform-origin: 50% 50% !important;
  transition:
    transform .16s cubic-bezier(.2,.9,.2,1),
    filter .16s ease !important;
  pointer-events: none !important;
}

.circle-label,
.circle-box span {
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  bottom: 18.2% !important;
  transform: translate3d(-50%,0,0) !important;
  color: #050505 !important;
  font-size: clamp(13px, 1vw, 16px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.96),
    0 2px 8px rgba(255,255,255,.62) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transition: transform .16s ease, opacity .16s ease !important;
}

.circle-box:hover {
  transform: translate3d(0,-5px,0) scale(1.025) !important;
  filter:
    drop-shadow(0 20px 24px rgba(0,0,0,.36))
    drop-shadow(0 0 18px rgba(229,9,20,.42)) !important;
}

.circle-box:hover .circle-img,
.circle-box:hover img {
  transform: translate3d(0,-2px,0) scale(1.01) !important;
}

.circle-box:hover::before {
  opacity: 1 !important;
  transform: translateY(3px) scaleX(1.05) !important;
}

.circle-box:active {
  transform: translate3d(0,8px,0) scale(.945) !important;
  filter:
    drop-shadow(0 4px 5px rgba(0,0,0,.34))
    drop-shadow(0 0 5px rgba(229,9,20,.18)) !important;
  transition-duration: .06s !important;
}

.circle-box:active .circle-img,
.circle-box:active img {
  transform: translate3d(0,7px,0) scale(.93) !important;
  filter: brightness(.88) contrast(1.08) saturate(.96) !important;
  transition-duration: .06s !important;
}

.circle-box:active .circle-label,
.circle-box:active span {
  transform: translate3d(-50%,7px,0) scale(.96) !important;
  opacity: .82 !important;
  transition-duration: .06s !important;
}

.circle-box:active::before {
  opacity: .42 !important;
  transform: translateY(-5px) scaleX(.72) !important;
  filter: blur(8px) !important;
  transition-duration: .06s !important;
}

.circle-box:active::after {
  opacity: .92 !important;
  box-shadow:
    inset 0 18px 26px rgba(0,0,0,.18),
    inset 0 -6px 10px rgba(255,255,255,.15) !important;
  transform: translateY(6px) scale(.94) !important;
  transition-duration: .06s !important;
}

.circle-box:focus-visible {
  outline: 2px solid rgba(255, 28, 44, .9) !important;
  outline-offset: 8px !important;
}

@media (max-width: 760px) {
  .main-circles {
    --habibi-circle-size: clamp(108px, 30vw, 138px);
    width: min(100%, 440px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: clamp(4px, 1.7vw, 12px) !important;
    padding: 0 4px !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
  }

  .circle-label,
  .circle-box span {
    bottom: 18.5% !important;
    font-size: clamp(8px, 2.55vw, 11px) !important;
    letter-spacing: .35px !important;
  }
}

@media (max-width: 370px) {
  .main-circles {
    --habibi-circle-size: 30.5vw;
    gap: 3px !important;
    padding: 0 2px !important;
  }

  .circle-label,
  .circle-box span {
    font-size: 7.8px !important;
    letter-spacing: .18px !important;
  }
}

/* =========================================================
   HABIBI FINAL 2026-05-16 - PREMIUM CIRCLES + MOBILE CLEAN
   Cette couche finale écrase les anciennes règles contradictoires.
   ========================================================= */
:root {
  --hb-red: #ff1d2f;
  --hb-red-soft: rgba(255, 29, 47, .55);
  --hb-circle-size: clamp(172px, 15vw, 206px);
}

.hero {
  min-height: 100svh;
  height: auto;
  padding: 96px 14px 48px;
}

.hero-content {
  width: min(100%, 1120px);
  margin: 0 auto;
}

.main-circles {
  width: min(100%, 760px) !important;
  margin: 32px auto 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  justify-items: center !important;
  align-items: start !important;
  gap: clamp(14px, 3vw, 34px) !important;
  padding: 0 !important;
}

.circle-box {
  width: var(--hb-circle-size) !important;
  height: var(--hb-circle-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid rgba(255, 255, 255, .92) !important;
  border-radius: 50% !important;
  overflow: visible !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent !important;
  background:
    radial-gradient(circle at 31% 22%, rgba(255,255,255,1) 0 16%, rgba(255,255,255,.82) 17% 32%, rgba(232,234,238,.98) 52%, rgba(176,180,188,.98) 100%) !important;
  box-shadow:
    inset 0 5px 9px rgba(255,255,255,.98),
    inset 0 -14px 22px rgba(0,0,0,.20),
    inset 0 0 0 2px rgba(255,255,255,.20),
    0 16px 28px rgba(0,0,0,.38),
    0 0 0 1px rgba(255,29,47,.20),
    0 0 20px rgba(255,29,47,.18) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  transform: translate3d(0,0,0) scale(1) !important;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}

.circle-box::before {
  content: "" !important;
  position: absolute !important;
  left: 14% !important;
  right: 14% !important;
  bottom: -13px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: var(--hb-red-soft) !important;
  filter: blur(12px) !important;
  opacity: .80 !important;
  z-index: -2 !important;
  transform: scaleX(.9) !important;
  transition: transform .16s ease, opacity .16s ease, filter .16s ease !important;
}

.circle-box::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: 50% !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.55), rgba(255,255,255,0) 34%),
    linear-gradient(315deg, rgba(255,29,47,.36), rgba(255,29,47,0) 36%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.58),
    inset 0 -12px 20px rgba(255,29,47,.10) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.circle-img,
.circle-box img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  position: relative !important;
  z-index: 2 !important;
  pointer-events: none !important;
  filter: drop-shadow(0 9px 10px rgba(0,0,0,.20)) contrast(1.04) saturate(1.03) !important;
  transition: transform .16s ease, filter .16s ease !important;
}

.circle-label,
.circle-box span {
  position: absolute !important;
  left: 50% !important;
  bottom: 17.5% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
  width: 82% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: clamp(11px, .95vw, 14px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: .58px !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.80), 0 0 10px rgba(255,29,47,.32) !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

.circle-box:hover {
  transform: translate3d(0,-5px,0) scale(1.025) !important;
  filter: brightness(1.04) !important;
  box-shadow:
    inset 0 6px 10px rgba(255,255,255,1),
    inset 0 -14px 24px rgba(0,0,0,.18),
    0 20px 34px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,29,47,.34),
    0 0 28px rgba(255,29,47,.28) !important;
}

.circle-box:hover::before {
  opacity: 1 !important;
  transform: scaleX(1.08) translateY(2px) !important;
}

.circle-box:active {
  transform: translate3d(0,8px,0) scale(.94) !important;
  box-shadow:
    inset 0 14px 22px rgba(0,0,0,.26),
    inset 0 -3px 8px rgba(255,255,255,.36),
    0 6px 12px rgba(0,0,0,.34),
    0 0 0 1px rgba(255,29,47,.28),
    0 0 12px rgba(255,29,47,.16) !important;
  transition-duration: .055s !important;
}

.circle-box:active .circle-img,
.circle-box:active img {
  transform: translate3d(0,7px,0) scale(.93) !important;
  filter: brightness(.88) contrast(1.08) !important;
}

.circle-box:active .circle-label,
.circle-box:active span {
  transform: translateX(-50%) translateY(6px) scale(.96) !important;
  opacity: .85 !important;
}

.circle-box:active::before {
  opacity: .42 !important;
  filter: blur(8px) !important;
  transform: scaleX(.70) translateY(-4px) !important;
}

.circle-box:focus-visible {
  outline: 3px solid rgba(255,29,47,.92) !important;
  outline-offset: 8px !important;
}

.sub-circle-menu {
  background:
    radial-gradient(circle at 32% 24%, #ffffff 0 12%, #f3f4f6 36%, #cfd3da 100%) !important;
  color: #161616 !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,.92),
    inset 0 -9px 14px rgba(0,0,0,.16),
    0 10px 22px rgba(0,0,0,.35),
    0 0 18px rgba(255,29,47,.28) !important;
}

.sub-circle-menu:hover,
.sub-circle-menu:active {
  color: #000 !important;
  transform: translateY(-3px) scale(1.04) !important;
}

@media (max-width: 760px) {
  :root { --hb-circle-size: clamp(108px, 29.8vw, 138px); }
  .hero { padding: 88px 8px 34px !important; }
  .logo { width: min(330px, 82vw) !important; }
  .subtitle { font-size: 15px !important; margin-top: 6px !important; }
  .main-circles {
    width: 100% !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: clamp(4px, 1.8vw, 10px) !important;
    margin-top: 24px !important;
  }
  .circle-label,
  .circle-box span {
    bottom: 17% !important;
    font-size: clamp(8px, 2.52vw, 10.8px) !important;
    letter-spacing: .22px !important;
  }
}

@media (max-width: 390px) {
  :root { --hb-circle-size: clamp(96px, 29.6vw, 112px); }
  .main-circles { gap: 3px !important; }
  .circle-label,
  .circle-box span {
    font-size: clamp(7px, 2.35vw, 9px) !important;
    letter-spacing: .08px !important;
  }
}

@media (hover: none) {
  .circle-box:hover { transform: translate3d(0,0,0) scale(1) !important; }
}

/* =========================================================
   HABIBI FINAL CIRCLE TEXT FIX - 2026-05-16
   This block must stay at the VERY END of the CSS file.
   It overrides all previous .circle-label / .circle-box span duplicates.
   ========================================================= */

.main-circles .circle-box .circle-label,
.main-circles .circle-box span,
.hero .circle-box .circle-label,
.hero .circle-box span {
  color: #000 !important;
  font-size: clamp(7.5px, 0.72vw, 9.5px) !important;
  line-height: 1.05 !important;
  font-weight: 800 !important;
  letter-spacing: 0.12px !important;
  text-transform: uppercase !important;
  text-align: center !important;

  width: 70% !important;
  max-width: 70% !important;
  min-width: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  white-space: normal !important;
  overflow: hidden !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-overflow: clip !important;

  text-shadow: none !important;
  box-sizing: border-box !important;
  pointer-events: none !important;

  position: absolute !important;
  left: 50% !important;
  bottom: 18% !important;
  transform: translateX(-50%) !important;
  z-index: 10 !important;
}

@media (max-width: 768px) {
  .main-circles .circle-box .circle-label,
  .main-circles .circle-box span,
  .hero .circle-box .circle-label,
  .hero .circle-box span {
    font-size: clamp(6.8px, 2vw, 8.5px) !important;
    letter-spacing: 0 !important;
    width: 68% !important;
    max-width: 68% !important;
    bottom: 17% !important;
  }
}

@media (max-width: 420px) {
  .main-circles .circle-box .circle-label,
  .main-circles .circle-box span,
  .hero .circle-box .circle-label,
  .hero .circle-box span {
    font-size: 6.6px !important;
    width: 66% !important;
    max-width: 66% !important;
    bottom: 16.5% !important;
  }
}

/* =========================================================
   HABIBI FINAL CIRCLE TEXT POSITION + FONT
   - texte plus haut dans le cercle
   - texte plus proche de l'icone
   - nouvelle police plus premium
   ========================================================= */

.main-circles .circle-box,
.hero .circle-box {
  gap: 0 !important;
}

.main-circles .circle-box .circle-icon,
.main-circles .circle-box svg,
.hero .circle-box .circle-icon,
.hero .circle-box svg {
  margin-bottom: 0 !important;
  transform: translateY(-6px) !important;
}

.main-circles .circle-box .circle-label,
.main-circles .circle-box span,
.hero .circle-box .circle-label,
.hero .circle-box span {
  font-family: "Trebuchet MS", "Montserrat", "Arial Rounded MT Bold", Arial, sans-serif !important;
  color: #111 !important;
  font-size: 8.2px !important;
  font-weight: 900 !important;
  letter-spacing: 0.35px !important;
  line-height: 0.95 !important;
  text-transform: uppercase !important;
  text-align: center !important;

  position: absolute !important;
  left: 50% !important;
  bottom: 25% !important;
  transform: translateX(-50%) !important;

  width: 68% !important;
  max-width: 68% !important;
  margin: 0 !important;
  padding: 0 !important;

  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-overflow: clip !important;
  text-shadow: none !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

@media (max-width: 768px) {
  .main-circles .circle-box .circle-icon,
  .main-circles .circle-box svg,
  .hero .circle-box .circle-icon,
  .hero .circle-box svg {
    transform: translateY(-5px) !important;
  }

  .main-circles .circle-box .circle-label,
  .main-circles .circle-box span,
  .hero .circle-box .circle-label,
  .hero .circle-box span {
    font-size: 7.4px !important;
    letter-spacing: 0.25px !important;
    line-height: 0.95 !important;
    bottom: 24% !important;
    width: 66% !important;
    max-width: 66% !important;
  }
}

@media (max-width: 420px) {
  .main-circles .circle-box .circle-label,
  .main-circles .circle-box span,
  .hero .circle-box .circle-label,
  .hero .circle-box span {
    font-size: 7px !important;
    letter-spacing: 0.15px !important;
    bottom: 23.5% !important;
    width: 64% !important;
    max-width: 64% !important;
  }
}

/* MONTER LE HERO HABIBI */
.hero-content {
  transform: translateY(-60px) !important;
}

/* FIX MOBILE PETITS CERCLES MENU */
@media (max-width: 768px) {
  .sub-circle-menu {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;

    padding: 6px !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    border-radius: 50% !important;

    transform: none !important;
  }
}


/* =========================================================
   HABIBI FINAL 2026-05-16
   Ajustements demandés :
   - logo + slogan + cercles un peu plus haut
   - sous-cercles plus petits sur mobile
   - sous-cercles plus proches du cercle principal sur mobile
   ========================================================= */

/* Remonte tout le bloc d'accueil sans casser l'alignement */
.hero-content {
  transform: translateY(-72px) !important;
}

/* Mobile : un peu moins haut pour éviter que le logo touche la navbar */
@media (max-width: 768px) {
  .hero-content {
    transform: translateY(-48px) !important;
  }
}

/* Sous-cercles : taille normale PC */
.sub-circle-menu {
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  border-radius: 50% !important;
}

/* Sous-cercles : taille maîtrisée mobile */
@media (max-width: 768px) {
  .sub-circle-menu {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    padding: 6px !important;
    font-size: 8.5px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    text-align: center !important;
    transform: none !important;
  }

  .sub-circle-menu:hover {
    transform: scale(1.04) !important;
  }
}

@media (max-width: 420px) {
  .sub-circle-menu {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    font-size: 7.8px !important;
    padding: 5px !important;
  }
}


/* === HABIBI SOLIDE - Location voiture en sous-catégories + choix produit popup === */
#location-voiture .horizontal-scroll {
  align-items: stretch;
}

#location-voiture .car-category-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#location-voiture .car-category-card > img {
  display: none !important;
}

#location-voiture .product-collage {
  width: 100%;
  height: 210px;
  display: grid;
  gap: 6px;
  padding: 7px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  box-sizing: border-box;
}

#location-voiture .product-collage-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

#location-voiture .product-collage-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
}

#location-voiture .product-collage img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 12px !important;
  background: #eeeeee !important;
  transform: none !important;
}

#location-voiture .product-collage img[src$=".svg"] {
  object-fit: contain !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  background: #f7f7f7 !important;
}

#location-voiture .car-category-card:hover .product-collage img {
  transform: none !important;
}

.popup-image-wrap.has-car-choices {
  width: 100% !important;
  max-height: none !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: visible !important;
}

.popup-image-wrap.has-car-choices::after,
.popup-image-wrap.has-car-choices #popup-img,
.popup-image-wrap.has-car-choices .popup-services {
  display: none !important;
}

.popup-car-choices {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 14px;
}

.popup-car-choices.hidden {
  display: none !important;
}

.car-choice-card {
  appearance: none;
  border: 1px solid rgba(0,0,0,0.12);
  background: #ffffff;
  border-radius: 18px;
  padding: 10px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 10px 22px rgba(0,0,0,0.10);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.car-choice-card:hover,
.car-choice-card.selected {
  transform: translateY(-2px);
  border-color: #e60023;
  box-shadow: 0 14px 28px rgba(230,0,35,0.20);
}

.car-choice-info {
  display: block;
  min-height: 38px;
}

.car-choice-title,
.car-choice-price {
  display: block;
  padding: 0 4px;
  line-height: 1.15;
}

.car-choice-title {
  color: #111111;
  font-size: 15px;
  font-weight: 900;
}

.car-choice-price {
  margin-top: 4px;
  color: #e60023;
  font-size: 13px;
  font-weight: 850;
}

.car-choice-image {
  display: block;
  width: 100%;
  height: 150px;
  border-radius: 14px;
  background: #f2f2f2;
  overflow: hidden;
}

.car-choice-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
}

.car-choice-image img[src$=".svg"] {
  object-fit: contain !important;
  padding: 10px !important;
  box-sizing: border-box !important;
  background: #f7f7f7 !important;
}

@media (max-width: 760px) {
  #location-voiture .product-collage {
    height: 175px;
  }
  .popup-car-choices {
    grid-template-columns: 1fr;
  }
  .car-choice-image {
    height: 170px;
  }
}

@media (max-width: 420px) {
  #location-voiture .product-collage {
    height: 150px;
    padding: 5px;
    gap: 5px;
  }
  .car-choice-image {
    height: 150px;
  }
}

/* HABIBI FIX 2026-05-17 : popup voitures propre, texte au-dessus et image sans marge */
.popup-image-wrap.has-car-choices {
  padding: 0 !important;
  margin: 0 !important;
}

.popup-car-choices {
  width: 100% !important;
  margin: 8px 0 0 !important;
  gap: 14px !important;
}

.car-choice-card {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  gap: 0 !important;
  background: #ffffff !important;
}

.car-choice-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 54px !important;
  padding: 9px 10px 8px !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
}

.car-choice-title,
.car-choice-price {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
}

.car-choice-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  color: #111111 !important;
}

.car-choice-price {
  margin-top: 4px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #e60023 !important;
}

.car-choice-image {
  width: 100% !important;
  height: 165px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: #f2f2f2 !important;
}

.car-choice-image img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.car-choice-image img[src$=".svg"] {
  object-fit: contain !important;
  padding: 0 !important;
  background: #f7f7f7 !important;
}

@media (max-width: 760px) {
  .popup-car-choices {
    gap: 12px !important;
  }
  .car-choice-info {
    min-height: 52px !important;
    padding: 8px 9px 7px !important;
  }
  .car-choice-image {
    height: 160px !important;
  }
}

/* === HABIBI FIX FINAL : texte voiture directement dans l'image de la popup === */
#popup.car-choice-mode #popup-desc,
#popup.car-choice-mode #popup-price {
  display: none !important;
}

#popup.car-choice-mode .popup-car-choices {
  margin: 8px 0 0 !important;
  gap: 12px !important;
}

#popup.car-choice-mode .car-choice-card {
  position: relative !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  background: #111 !important;
  box-shadow: 0 12px 26px rgba(0,0,0,0.14) !important;
}

#popup.car-choice-mode .car-choice-image {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 190px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #f2f2f2 !important;
}

#popup.car-choice-mode .car-choice-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#popup.car-choice-mode .car-choice-image img[src$=".svg"] {
  object-fit: contain !important;
  padding: 0 !important;
  background: #f7f7f7 !important;
}

#popup.car-choice-mode .car-choice-overlay {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  padding: 34px 10px 9px !important;
  color: #fff !important;
  text-align: left !important;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.54) 58%, rgba(0,0,0,0) 100%) !important;
  box-sizing: border-box !important;
}

#popup.car-choice-mode .car-choice-title,
#popup.car-choice-mode .car-choice-price {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  line-height: 1.08 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.65) !important;
}

#popup.car-choice-mode .car-choice-title {
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  letter-spacing: -0.2px !important;
}

#popup.car-choice-mode .car-choice-price {
  color: #ff3150 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

#popup.car-choice-mode .car-choice-details {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin-top: 2px !important;
}

#popup.car-choice-mode .car-choice-details span {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  padding: 3px 6px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: rgba(255,255,255,0.16) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  backdrop-filter: blur(6px) !important;
}

#popup.car-choice-mode .car-choice-card:hover,
#popup.car-choice-mode .car-choice-card.selected {
  transform: translateY(-2px) !important;
  border-color: #e60023 !important;
  box-shadow: 0 16px 32px rgba(230,0,35,0.22) !important;
}

@media (max-width: 760px) {
  #popup.car-choice-mode .popup-car-choices {
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }
  #popup.car-choice-mode .car-choice-image {
    height: 185px !important;
  }
}

@media (max-width: 420px) {
  #popup.car-choice-mode .car-choice-image {
    height: 165px !important;
  }
  #popup.car-choice-mode .car-choice-overlay {
    padding: 30px 9px 8px !important;
  }
  #popup.car-choice-mode .car-choice-title {
    font-size: 16px !important;
  }
  #popup.car-choice-mode .car-choice-price {
    font-size: 13px !important;
  }
  #popup.car-choice-mode .car-choice-details span {
    font-size: 10px !important;
    padding: 3px 5px !important;
  }
}

/* === HABIBI 2026-05-17 : Location voiture liste -> détail -> retour === */
.car-choice-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-height: 42px !important;
  margin: 0 0 8px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(230,0,35,0.22) !important;
  border-radius: 15px !important;
  color: #111 !important;
  background: linear-gradient(180deg,#fff,#f3f3f3) !important;
  box-shadow: 0 7px 18px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.95) !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  letter-spacing: -0.2px !important;
  cursor: pointer !important;
}
.car-choice-back.hidden { display: none !important; }
.car-choice-back:active { transform: scale(0.985) !important; }

#popup.car-detail-mode .popup-head {
  gap: 4px !important;
}
#popup.car-detail-mode #popup-title {
  margin-top: 0 !important;
  font-size: 22px !important;
  line-height: 1.1 !important;
}
#popup.car-detail-mode .popup-image-wrap {
  margin-top: 5px !important;
}
#popup.car-detail-mode #popup-img {
  display: block !important;
  width: 100% !important;
  height: clamp(185px, 32vh, 300px) !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 18px !important;
}
#popup.car-detail-mode #popup-img[src$=".svg"] {
  object-fit: contain !important;
  background: #f7f7f7 !important;
}
#popup.car-detail-mode #popup-desc {
  margin: 7px 0 2px !important;
  font-size: 14px !important;
  line-height: 1.25 !important;
}
#popup.car-detail-mode #popup-price {
  margin: 3px 0 6px !important;
}
#popup.car-choice-mode #popup-note.hidden,
#popup.car-detail-mode #popup-note.hidden { display: none !important; }
#popup.car-choice-mode #car-rental-options.hidden,
#popup.car-detail-mode #car-rental-options.hidden { display: none !important; }

@media (max-width: 760px) {
  #popup.car-choice-mode .popup-content,
  #popup.car-detail-mode .popup-content {
    width: min(94vw, 430px) !important;
    max-height: 92vh !important;
    padding: 13px 12px 14px !important;
    overflow-y: auto !important;
  }
  #popup.car-choice-mode .popup-head,
  #popup.car-detail-mode .popup-head {
    margin-bottom: 4px !important;
  }
  #popup.car-choice-mode #popup-title,
  #popup.car-detail-mode #popup-title {
    font-size: 20px !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }
  #popup.car-choice-mode .popup-car-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }
  #popup.car-choice-mode .car-choice-card {
    border-radius: 15px !important;
  }
  #popup.car-choice-mode .car-choice-image {
    height: 132px !important;
    border-radius: 15px !important;
  }
  #popup.car-choice-mode .car-choice-overlay {
    padding: 28px 7px 7px !important;
    gap: 3px !important;
  }
  #popup.car-choice-mode .car-choice-title {
    font-size: 14px !important;
  }
  #popup.car-choice-mode .car-choice-price {
    font-size: 12px !important;
  }
  #popup.car-choice-mode .car-choice-details {
    display: none !important;
  }
  #popup.car-detail-mode #popup-img {
    height: 185px !important;
  }
  #popup.car-detail-mode .booking-row {
    gap: 8px !important;
    margin-bottom: 8px !important;
  }
  #popup.car-detail-mode .booking-field label {
    margin-bottom: 4px !important;
    font-size: 12.5px !important;
    line-height: 1.15 !important;
  }
  #popup.car-detail-mode input,
  #popup.car-detail-mode select {
    min-height: 40px !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
  }
  #popup.car-detail-mode .upload-field small {
    display: none !important;
  }
  #popup.car-detail-mode .popup-summary {
    margin-top: 8px !important;
    padding: 9px !important;
  }
  .car-choice-back {
    min-height: 39px !important;
    margin-bottom: 5px !important;
    padding: 8px 10px !important;
    font-size: 15.5px !important;
  }
}

@media (max-width: 390px) {
  #popup.car-choice-mode .car-choice-image { height: 118px !important; }
  #popup.car-detail-mode #popup-img { height: 165px !important; }
  #popup.car-choice-mode .car-choice-title { font-size: 13px !important; }
  #popup.car-choice-mode .car-choice-price { font-size: 11.5px !important; }
}

/* === HABIBI FIX : détail voiture propre + retour fixe === */
#popup.car-detail-mode .popup-content{
  position: relative !important;
}

#popup.car-detail-mode .car-choice-back{
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  width: fit-content !important;
  max-width: calc(100% - 52px) !important;
  min-height: 34px !important;
  margin: 0 0 8px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #111 !important;
  background: rgba(255,255,255,0.94) !important;
  border: 1px solid rgba(0,0,0,0.10) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(10px) !important;
}
#popup.car-detail-mode .car-choice-back::first-letter{
  font-size: 15px !important;
}
#popup.car-detail-mode .car-choice-back:active{
  transform: scale(0.97) !important;
}

#popup.car-detail-mode #popup-title,
#popup.car-detail-mode #popup-price{
  display: none !important;
}

.popup-car-detail-overlay{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 42px 12px 11px !important;
  color: #fff !important;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0.30) 58%, rgba(0,0,0,0)) !important;
  pointer-events: none !important;
}
.popup-car-detail-overlay.hidden{
  display: none !important;
}
#popup-car-detail-title{
  min-width: 0 !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  line-height: 1.05 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55) !important;
}
#popup-car-detail-price{
  flex: 0 0 auto !important;
  padding: 7px 9px !important;
  border-radius: 999px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  color: #111 !important;
  background: rgba(255,255,255,0.92) !important;
  box-shadow: 0 5px 14px rgba(0,0,0,0.20) !important;
}
#popup.car-detail-mode .popup-image-wrap::after{
  display: none !important;
}
#popup.car-detail-mode .popup-image-wrap{
  border-radius: 18px !important;
  overflow: hidden !important;
}

@media (max-width: 520px){
  #popup.car-detail-mode .popup-content{
    padding-top: 10px !important;
  }
  #popup.car-detail-mode .car-choice-back{
    top: 0 !important;
    min-height: 32px !important;
    padding: 7px 10px !important;
    font-size: 12.5px !important;
    margin-bottom: 6px !important;
  }
  .popup-car-detail-overlay{
    padding: 36px 10px 9px !important;
  }
  #popup-car-detail-title{
    font-size: 17px !important;
  }
  #popup-car-detail-price{
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
}

/* === HABIBI FINAL 2026-05-17 : popup location voiture UX propre === */
#popup.car-choice-mode .popup-badge,
#popup.car-detail-mode .popup-badge {
  display: none !important;
}

/* Quand les 4 voitures sont affichées : pas de total, pas de bouton panier, pas de texte inutile */
#popup.car-choice-mode .popup-summary,
#popup.car-choice-mode .add-program-btn,
#popup.car-choice-mode #popup-note,
#popup.car-choice-mode #car-rental-options,
#popup.car-choice-mode #lodging-options,
#popup.car-choice-mode #popup-desc,
#popup.car-choice-mode #popup-price {
  display: none !important;
}

/* En détail voiture : le texte sous l'image disparaît, seuls image + formulaire restent */
#popup.car-detail-mode #popup-desc,
#popup.car-detail-mode #popup-price {
  display: none !important;
}

/* Meilleure exploitation de l'espace popup PC + téléphone */
#popup.car-choice-mode .enhanced-popup,
#popup.car-detail-mode .enhanced-popup {
  width: min(96vw, 560px) !important;
  padding: 14px !important;
  border-radius: 22px !important;
}

#popup.car-detail-mode .popup-head {
  margin-bottom: 0 !important;
  min-height: 0 !important;
}

#popup.car-detail-mode .popup-image-wrap {
  position: relative !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #f3f3f3 !important;
}

#popup.car-detail-mode #popup-img {
  width: 100% !important;
  height: clamp(210px, 38vh, 330px) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

#popup.car-detail-mode #popup-img[src$=".svg"] {
  object-fit: contain !important;
  padding: 0 !important;
  background: #f7f7f7 !important;
}

/* Bouton retour directement SUR l'image */
#popup.car-detail-mode .popup-image-wrap .car-choice-back {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  z-index: 8 !important;
  width: auto !important;
  max-width: calc(100% - 20px) !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  color: #111 !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.22) !important;
  backdrop-filter: blur(10px) !important;
}

#popup.car-detail-mode .popup-car-detail-overlay {
  padding: 48px 12px 12px !important;
}

#popup.car-detail-mode .booking-options {
  margin-top: 0 !important;
}

#popup.car-detail-mode .booking-row {
  gap: 10px !important;
}

#popup.car-detail-mode .popup-summary {
  margin: 10px 0 12px !important;
  padding: 11px 13px !important;
}

#popup.car-detail-mode .add-program-btn {
  min-height: 44px !important;
  border-radius: 14px !important;
}

@media (max-width: 520px) {
  #popup.car-choice-mode .enhanced-popup,
  #popup.car-detail-mode .enhanced-popup {
    width: 96vw !important;
    max-height: 92vh !important;
    margin: 4vh auto !important;
    padding: 10px !important;
    border-radius: 20px !important;
    overflow-y: auto !important;
  }

  #popup.car-choice-mode .popup-head {
    margin-bottom: 6px !important;
  }

  #popup.car-choice-mode .popup-car-choices {
    margin: 0 !important;
    gap: 8px !important;
  }

  #popup.car-choice-mode .car-choice-image {
    height: 124px !important;
  }

  #popup.car-detail-mode .popup-image-wrap {
    margin: 0 0 8px !important;
    border-radius: 16px !important;
  }

  #popup.car-detail-mode #popup-img {
    height: 190px !important;
  }

  #popup.car-detail-mode .popup-image-wrap .car-choice-back {
    top: 8px !important;
    left: 8px !important;
    min-height: 30px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
  }

  #popup.car-detail-mode .popup-car-detail-overlay {
    padding: 38px 9px 9px !important;
  }

  #popup.car-detail-mode .booking-row {
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  #popup.car-detail-mode .booking-field label {
    font-size: 12px !important;
    margin-bottom: 3px !important;
  }

  #popup.car-detail-mode .popup-content input,
  #popup.car-detail-mode .popup-content select,
  #popup.car-detail-mode .popup-content input[type="file"] {
    min-height: 39px !important;
    margin: 5px 0 8px !important;
  }

  #popup.car-detail-mode .popup-summary {
    margin: 7px 0 9px !important;
  }
}

/* === HABIBI FIX - affichage cases Hôtels/Riads + Villas/Appartements comme Location voiture === */
#hotels-riads .horizontal-scroll,
#villas-apparts .horizontal-scroll {
  align-items: stretch !important;
}

#hotels-riads .car-category-card,
#villas-apparts .car-category-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#hotels-riads .car-category-card > img,
#villas-apparts .car-category-card > img {
  display: none !important;
}

#hotels-riads .product-collage,
#villas-apparts .product-collage {
  position: relative !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 210px !important;
  display: grid !important;
  gap: 6px !important;
  padding: 7px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#hotels-riads .product-collage-4,
#villas-apparts .product-collage-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
}

#hotels-riads .product-collage img,
#villas-apparts .product-collage img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: #eeeeee !important;
  transform: none !important;
}

#hotels-riads .car-category-card:hover .product-collage img,
#villas-apparts .car-category-card:hover .product-collage img {
  transform: none !important;
}

#hotels-riads .card h3,
#villas-apparts .card h3 {
  font-size: 15px !important;
  line-height: 1.08 !important;
  max-width: calc(100% - 110px) !important;
}

#hotels-riads .card p,
#villas-apparts .card p {
  font-size: 10.5px !important;
  line-height: 1.15 !important;
  max-width: calc(100% - 108px) !important;
}

#hotels-riads .price-tag,
#villas-apparts .price-tag {
  font-size: 10.5px !important;
  padding: 6px 8px !important;
  white-space: nowrap !important;
}

@media (max-width: 760px) {
  #hotels-riads .product-collage,
  #villas-apparts .product-collage {
    height: 175px !important;
  }
}

@media (max-width: 420px) {
  #hotels-riads .product-collage,
  #villas-apparts .product-collage {
    height: 150px !important;
    padding: 5px !important;
    gap: 5px !important;
  }

  #hotels-riads .card h3,
  #villas-apparts .card h3 {
    font-size: 13.5px !important;
  }
}


/* HABIBI FIX - mêmes cases collage pour Activités Jour et Night Life */
#activites-jour .horizontal-scroll,
#night-life .horizontal-scroll {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
  gap: 18px !important;
  overflow: visible !important;
}
#activites-jour .car-category-card,
#night-life .car-category-card {
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
#activites-jour .product-collage,
#night-life .product-collage {
  width: 100% !important;
  aspect-ratio: 1 / 0.72 !important;
  display: grid !important;
  gap: 4px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #111 !important;
}
#activites-jour .product-collage-4,
#night-life .product-collage-4 {
  grid-template-columns: repeat(2, 1fr) !important;
  grid-template-rows: repeat(2, 1fr) !important;
}
#activites-jour .product-collage img,
#night-life .product-collage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
#activites-jour .card h3,
#night-life .card h3 { margin-top: 12px !important; }
#activites-jour .card p,
#night-life .card p { min-height: 46px !important; }
@media (max-width: 820px){
  #activites-jour .horizontal-scroll,
  #night-life .horizontal-scroll {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    grid-template-columns: none !important;
  }
  #activites-jour .car-category-card,
  #night-life .car-category-card {
    min-width: 82vw !important;
    scroll-snap-align: center !important;
  }
}

/* =========================================================
   HABIBI PERFECT CASES 2026-05-17
   Toutes les cases reprennent la présentation Activités Jour :
   même taille, même collage/image, même animation, centre propre.
   ========================================================= */
:root {
  --hb-site-max: 1120px;
  --hb-section-x: 16px;
  --hb-card-radius: 20px;
  --hb-card-height: 245px;
  --hb-card-gap: 16px;
}

body {
  width: 100%;
  min-width: 0;
}

.hero-content,
.subcategory-section,
.footer-inner,
.footer-bottom {
  width: 100%;
}

.subcategory-section {
  width: 100% !important;
  max-width: calc(var(--hb-site-max) + (var(--hb-section-x) * 2)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 36px var(--hb-section-x) 8px !important;
  text-align: center !important;
}

.subcategory-section h2 {
  max-width: var(--hb-site-max) !important;
  margin: 0 auto 14px !important;
  padding: 0 2px !important;
  text-align: left !important;
  font-size: 25px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.3px !important;
}

.subcategory-section .horizontal-scroll,
#location-voiture .horizontal-scroll,
#voiture-chauffeur .horizontal-scroll,
#hotels-riads .horizontal-scroll,
#villas-apparts .horizontal-scroll,
#activites-jour .horizontal-scroll,
#night-life .horizontal-scroll {
  width: 100% !important;
  max-width: var(--hb-site-max) !important;
  margin: 0 auto !important;
  padding: 0 0 12px !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--hb-card-gap) !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
  align-items: stretch !important;
  justify-content: center !important;
}

.subcategory-section .card,
#location-voiture .card,
#voiture-chauffeur .card,
#hotels-riads .card,
#villas-apparts .card,
#activites-jour .card,
#night-life .card {
  min-width: 0 !important;
  width: 100% !important;
  height: var(--hb-card-height) !important;
  flex: none !important;
  position: relative !important;
  display: block !important;
  border-radius: var(--hb-card-radius) !important;
  overflow: hidden !important;
  background: #111 !important;
  color: #fff !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16) !important;
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease !important;
  scroll-snap-align: none !important;
  will-change: transform !important;
}

.subcategory-section .card:hover,
#location-voiture .card:hover,
#voiture-chauffeur .card:hover,
#hotels-riads .card:hover,
#villas-apparts .card:hover,
#activites-jour .card:hover,
#night-life .card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 18px 38px rgba(0,0,0,0.22) !important;
}

.subcategory-section .card:active {
  transform: translateY(-1px) scale(.992) !important;
}

.subcategory-section .card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.76) 0%,
    rgba(0,0,0,.50) 34%,
    rgba(0,0,0,.10) 62%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* Même comportement pour image simple et collage 4 produits */
.subcategory-section .card > img,
.subcategory-section .product-collage,
#location-voiture .product-collage,
#hotels-riads .product-collage,
#villas-apparts .product-collage,
#activites-jour .product-collage,
#night-life .product-collage {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #111 !important;
  overflow: hidden !important;
}

.subcategory-section .product-collage,
#location-voiture .product-collage,
#hotels-riads .product-collage,
#villas-apparts .product-collage,
#activites-jour .product-collage,
#night-life .product-collage {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 4px !important;
}

.subcategory-section .card > img,
.subcategory-section .product-collage img,
#location-voiture .product-collage img,
#hotels-riads .product-collage img,
#villas-apparts .product-collage img,
#activites-jour .product-collage img,
#night-life .product-collage img {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: #e9e9e9 !important;
  transform: none !important;
  transition: transform .38s ease !important;
}

.subcategory-section .product-collage img[src$=".svg"] {
  object-fit: contain !important;
  padding: 7px !important;
  background: #f7f7f7 !important;
}

.subcategory-section .card:hover > img,
.subcategory-section .card:hover .product-collage img {
  transform: scale(1.045) !important;
}

.subcategory-section .card h3,
.subcategory-section .card p,
.subcategory-section .price-tag,
.subcategory-section .card .btn-whatsapp {
  position: absolute !important;
  z-index: 2 !important;
}

.subcategory-section .card h3 {
  left: 14px !important;
  right: 105px !important;
  bottom: 58px !important;
  max-width: calc(100% - 125px) !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fff !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.75) !important;
}

.subcategory-section .card p {
  left: 14px !important;
  right: 105px !important;
  bottom: 32px !important;
  max-width: calc(100% - 125px) !important;
  width: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: rgba(255,255,255,.90) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.70) !important;
}

.subcategory-section .price-tag {
  right: 12px !important;
  bottom: 56px !important;
  left: auto !important;
  min-width: 78px !important;
  max-width: 96px !important;
  height: auto !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 6px 8px !important;
  border-radius: 999px !important;
  background: #25D366 !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  white-space: normal !important;
  box-shadow: 0 7px 18px rgba(37,211,102,.35) !important;
  backdrop-filter: blur(8px) !important;
}

.subcategory-section .card .btn-whatsapp {
  right: 12px !important;
  bottom: 14px !important;
  left: auto !important;
  width: auto !important;
  min-width: 78px !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  font-size: 10.5px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.22) !important;
}

.subcategory-section .card .btn-whatsapp:hover {
  background: #25D366 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 980px) {
  :root {
    --hb-site-max: 760px;
    --hb-card-height: 220px;
    --hb-card-gap: 14px;
  }

  .subcategory-section .horizontal-scroll,
  #location-voiture .horizontal-scroll,
  #voiture-chauffeur .horizontal-scroll,
  #hotels-riads .horizontal-scroll,
  #villas-apparts .horizontal-scroll,
  #activites-jour .horizontal-scroll,
  #night-life .horizontal-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --hb-section-x: 12px;
    --hb-card-height: 184px;
    --hb-card-gap: 10px;
  }

  .subcategory-section {
    padding: 24px var(--hb-section-x) 2px !important;
  }

  .subcategory-section h2 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
  }

  .subcategory-section .horizontal-scroll,
  #location-voiture .horizontal-scroll,
  #voiture-chauffeur .horizontal-scroll,
  #hotels-riads .horizontal-scroll,
  #villas-apparts .horizontal-scroll,
  #activites-jour .horizontal-scroll,
  #night-life .horizontal-scroll {
    display: flex !important;
    gap: var(--hb-card-gap) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 2px 10px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .subcategory-section .card,
  #location-voiture .card,
  #voiture-chauffeur .card,
  #hotels-riads .card,
  #villas-apparts .card,
  #activites-jour .card,
  #night-life .card {
    min-width: min(82vw, 330px) !important;
    width: min(82vw, 330px) !important;
    height: var(--hb-card-height) !important;
    scroll-snap-align: center !important;
    border-radius: 17px !important;
  }

  .subcategory-section .card h3 {
    left: 11px !important;
    right: 86px !important;
    bottom: 48px !important;
    max-width: calc(100% - 100px) !important;
    font-size: 14.5px !important;
  }

  .subcategory-section .card p {
    left: 11px !important;
    right: 86px !important;
    bottom: 27px !important;
    max-width: calc(100% - 100px) !important;
    font-size: 10px !important;
  }

  .subcategory-section .price-tag {
    right: 9px !important;
    bottom: 47px !important;
    min-width: 64px !important;
    max-width: 78px !important;
    padding: 5px 7px !important;
    font-size: 9.5px !important;
  }

  .subcategory-section .card .btn-whatsapp {
    right: 9px !important;
    bottom: 12px !important;
    min-width: 64px !important;
    padding: 7px 8px !important;
    font-size: 9.5px !important;
  }
}

@media (max-width: 420px) {
  :root { --hb-card-height: 174px; }

  .subcategory-section .card,
  #location-voiture .card,
  #voiture-chauffeur .card,
  #hotels-riads .card,
  #villas-apparts .card,
  #activites-jour .card,
  #night-life .card {
    min-width: 84vw !important;
    width: 84vw !important;
  }

  .subcategory-section .card p {
    display: none !important;
  }

  .subcategory-section .card h3 {
    bottom: 45px !important;
  }

  .subcategory-section .price-tag {
    bottom: 44px !important;
  }
}

/* =========================================================
   HABIBI CHECKOUT PERFECT RESPONSIVE FIX - 2026-05-17
   Objectif : méthodes de paiement sur une seule ligne + popup propre PC/mobile
   ========================================================= */
.payment-content {
  width: min(94vw, 720px) !important;
  max-width: 720px !important;
  border-radius: 24px !important;
  padding: clamp(18px, 3vw, 28px) !important;
  box-sizing: border-box !important;
}

.payment-content h2 {
  margin-bottom: 8px !important;
  line-height: 1.15 !important;
}

.payment-intro {
  margin: 6px 0 12px !important;
  font-size: 14px !important;
}

.payment-customer-box .booking-row {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}

.payment-customer-box input,
.payment-customer-box select {
  box-sizing: border-box !important;
}

.payment-methods-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 14px 0 !important;
}

.payment-method {
  min-width: 0 !important;
  min-height: 92px !important;
  height: auto !important;
  padding: 10px 6px !important;
  border-radius: 16px !important;
  gap: 5px !important;
  text-align: center !important;
  overflow: hidden !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.07) !important;
}

.payment-method i,
.payment-method strong {
  font-size: clamp(22px, 3.4vw, 32px) !important;
  line-height: 1 !important;
}

.payment-method span {
  width: 100% !important;
  font-size: clamp(10px, 1.5vw, 13px) !important;
  line-height: 1.1 !important;
  white-space: normal !important;
}

.payment-method small {
  width: 100% !important;
  font-size: clamp(8px, 1.15vw, 10px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

.payment-details {
  margin-top: 10px !important;
  padding: clamp(12px, 2.5vw, 16px) !important;
}

.payment-whatsapp-btn {
  width: 100% !important;
  min-height: 46px !important;
  margin-top: 10px !important;
}

@media (max-width: 640px) {
  .payment-popup .popup-content,
  .payment-content {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    margin: 9px auto !important;
    max-height: calc(100dvh - 18px) !important;
    overflow-y: auto !important;
    padding: 14px 10px 16px !important;
    border-radius: 18px !important;
  }

  .payment-content .close {
    top: 8px !important;
    right: 12px !important;
  }

  .payment-content h2 {
    font-size: 19px !important;
    padding-right: 26px !important;
  }

  .payment-intro {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
  }

  .payment-summary-box {
    flex-direction: row !important;
    align-items: center !important;
    padding: 10px 12px !important;
    margin: 10px 0 !important;
    border-radius: 14px !important;
  }

  .payment-summary-box strong {
    font-size: 18px !important;
  }

  .payment-customer-box .booking-row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .payment-customer-box label {
    font-size: 12px !important;
    margin-bottom: 4px !important;
  }

  .payment-customer-box input,
  .payment-customer-box select,
  .hb-phone-row select,
  .hb-phone-row input {
    height: 40px !important;
    font-size: 13px !important;
    border-radius: 11px !important;
  }

  .hb-phone-row {
    grid-template-columns: 74px minmax(0, 1fr) !important;
    gap: 7px !important;
    margin: 5px 0 8px !important;
  }

  .payment-methods-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 10px 0 !important;
  }

  .payment-method {
    min-height: 74px !important;
    padding: 7px 3px !important;
    border-radius: 13px !important;
    gap: 3px !important;
  }

  .payment-method i,
  .payment-method strong {
    font-size: 19px !important;
  }

  .payment-method span {
    font-size: 9px !important;
    line-height: 1.05 !important;
    word-break: normal !important;
  }

  .payment-method small {
    font-size: 7.2px !important;
    line-height: 1.05 !important;
  }

  .payment-details h3 {
    font-size: 15px !important;
    margin: 0 0 7px !important;
  }

  .cash-warning,
  .cash-confirm-line {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .payment-whatsapp-btn {
    font-size: 13px !important;
    padding: 12px 10px !important;
  }
}

@media (max-width: 370px) {
  .payment-popup .popup-content,
  .payment-content {
    width: calc(100vw - 10px) !important;
    max-width: calc(100vw - 10px) !important;
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .payment-methods-grid {
    gap: 4px !important;
  }

  .payment-method {
    min-height: 69px !important;
    border-radius: 11px !important;
    padding: 6px 2px !important;
  }

  .payment-method i,
  .payment-method strong {
    font-size: 17px !important;
  }

  .payment-method span {
    font-size: 8px !important;
  }

  .payment-method small {
    display: none !important;
  }
}

/* =========================================================
   HABIBI MOBILE HORIZONTAL SCROLL SAFE FIX - 2026-05-17
   Corrige les cartes masquées à gauche sur téléphone.
   Les lignes de produits restent scrollables, mais chaque carte
   s'aligne proprement sans être coupée à gauche ou à droite.
   ========================================================= */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .subcategory-section {
    width: 100% !important;
    max-width: 100vw !important;
    overflow: visible !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .subcategory-section h2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 2px !important;
    text-align: left !important;
  }

  .subcategory-section .horizontal-scroll,
  #location-voiture .horizontal-scroll,
  #voiture-chauffeur .horizontal-scroll,
  #hotels-riads .horizontal-scroll,
  #villas-apparts .horizontal-scroll,
  #activites-jour .horizontal-scroll,
  #night-life .horizontal-scroll {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 2px !important;
    padding-right: 18px !important;
    padding-bottom: 14px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    scroll-snap-type: x proximity !important;
    scroll-padding-left: 2px !important;
    scroll-padding-right: 18px !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
  }

  .subcategory-section .card,
  #location-voiture .card,
  #voiture-chauffeur .card,
  #hotels-riads .card,
  #villas-apparts .card,
  #activites-jour .card,
  #night-life .card {
    flex: 0 0 min(82vw, 330px) !important;
    min-width: min(82vw, 330px) !important;
    width: min(82vw, 330px) !important;
    max-width: calc(100vw - 32px) !important;
    scroll-snap-align: start !important;
    scroll-margin-left: 2px !important;
    scroll-margin-right: 18px !important;
    transform-origin: center center !important;
  }

  .subcategory-section .card:first-child,
  #location-voiture .card:first-child,
  #voiture-chauffeur .card:first-child,
  #hotels-riads .card:first-child,
  #villas-apparts .card:first-child,
  #activites-jour .card:first-child,
  #night-life .card:first-child {
    margin-left: 0 !important;
  }

  .subcategory-section .card:last-child,
  #location-voiture .card:last-child,
  #voiture-chauffeur .card:last-child,
  #hotels-riads .card:last-child,
  #villas-apparts .card:last-child,
  #activites-jour .card:last-child,
  #night-life .card:last-child {
    margin-right: 2px !important;
  }
}

@media (max-width: 420px) {
  .subcategory-section .card,
  #location-voiture .card,
  #voiture-chauffeur .card,
  #hotels-riads .card,
  #villas-apparts .card,
  #activites-jour .card,
  #night-life .card {
    flex-basis: calc(100vw - 34px) !important;
    min-width: calc(100vw - 34px) !important;
    width: calc(100vw - 34px) !important;
  }
}


/* =========================================================
   HABIBI HOTFIX 2026-05-19
   - garde toutes les cases visibles
   - panier centré
   - bouton PACK supprimé côté HTML + sécurité CSS
   - prix collé au coin bas droit
   - titre centré dans la case
   ========================================================= */
.navbar,
.navbar .menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}
.cart-area {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
.packs-link { display: none !important; }

.subcategory-section {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.subcategory-section .horizontal-scroll {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 18px !important;
  scroll-snap-type: x proximity !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 8px 4px 18px !important;
}
.subcategory-section .card {
  position: relative !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  min-height: 215px !important;
  height: 215px !important;
  border-radius: 18px !important;
  scroll-snap-align: start !important;
}
.subcategory-section .card > img,
.subcategory-section .card .product-collage {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: inherit !important;
  z-index: 1 !important;
}
.subcategory-section .card > img { object-fit: cover !important; }
.subcategory-section .card .product-collage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.subcategory-section .card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
  pointer-events: none;
}
.subcategory-section .card h3 {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  margin: 0 !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #fff !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1.12 !important;
  text-shadow: 0 3px 14px rgba(0,0,0,.85) !important;
}
.subcategory-section .card p,
.subcategory-section .card .btn-whatsapp {
  display: none !important;
}
.subcategory-section .price-tag {
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 4 !important;
  margin: 0 !important;
  padding: 8px 12px 9px !important;
  border-radius: 16px 0 0 0 !important;
  background: #25D366 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  box-shadow: 0 -8px 18px rgba(0,0,0,.22) !important;
}
@media (min-width: 769px) {
  .subcategory-section .card {
    flex: 0 0 calc((100% - 42px) / 3) !important;
    min-width: calc((100% - 42px) / 3) !important;
    width: calc((100% - 42px) / 3) !important;
  }
}
@media (max-width: 768px) {
  .subcategory-section { padding-left: 12px !important; padding-right: 12px !important; }
  .subcategory-section .horizontal-scroll { gap: 12px !important; padding-left: 0 !important; }
  .subcategory-section .card {
    flex: 0 0 calc(100vw - 38px) !important;
    min-width: calc(100vw - 38px) !important;
    width: calc(100vw - 38px) !important;
    height: 188px !important;
    min-height: 188px !important;
  }
  .subcategory-section .card h3 { font-size: 20px !important; }
  .subcategory-section .price-tag { font-size: 11px !important; padding: 8px 10px !important; }
}

/* =========================================================
   HABIBI CARD TITLE + PRICE FINAL FIX - 2026-05-19
   Objectif : titres parfaitement centrés + prix uniforme/lisible
   ========================================================= */

.subcategory-section .card {
  display: block !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Titre au vrai centre de chaque case, même taille partout */
.subcategory-section .card h3,
#location-voiture .card h3,
#voiture-chauffeur .card h3,
#hotels-riads .card h3,
#villas-apparts .card h3,
#activites-jour .card h3,
#night-life .card h3 {
  position: absolute !important;
  z-index: 5 !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: calc(100% - 28px) !important;
  max-width: calc(100% - 28px) !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  color: #fff !important;
  font-size: clamp(22px, 2.2vw, 31px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: .2px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-shadow: 0 3px 12px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.75) !important;
  pointer-events: none !important;
}

/* Description retirée de la zone visible pour garder les cases propres */
.subcategory-section .card p,
#location-voiture .card p,
#voiture-chauffeur .card p,
#hotels-riads .card p,
#villas-apparts .card p,
#activites-jour .card p,
#night-life .card p {
  display: none !important;
}

/* Prix : même forme, même taille, collé au coin bas/droite, très lisible */
.subcategory-section .price-tag,
#location-voiture .price-tag,
#voiture-chauffeur .price-tag,
#hotels-riads .price-tag,
#villas-apparts .price-tag,
#activites-jour .price-tag,
#night-life .price-tag {
  position: absolute !important;
  z-index: 6 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  top: auto !important;
  width: 118px !important;
  min-width: 118px !important;
  max-width: 118px !important;
  min-height: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 5px 8px !important;
  border-radius: 16px 0 0 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: rgba(37, 211, 102, .96) !important;
  color: #fff !important;
  font-size: 12.5px !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  letter-spacing: -.1px !important;
  white-space: normal !important;
  overflow: hidden !important;
  box-shadow: 0 -8px 22px rgba(0,0,0,.25), 0 0 18px rgba(37,211,102,.38) !important;
  backdrop-filter: blur(8px) !important;
  pointer-events: none !important;
}

/* Bouton stable en bas à gauche pour ne jamais gêner le prix */
.subcategory-section .card .btn-whatsapp,
#location-voiture .card .btn-whatsapp,
#voiture-chauffeur .card .btn-whatsapp,
#hotels-riads .card .btn-whatsapp,
#villas-apparts .card .btn-whatsapp,
#activites-jour .card .btn-whatsapp,
#night-life .card .btn-whatsapp {
  position: absolute !important;
  z-index: 6 !important;
  left: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  width: auto !important;
  min-width: 108px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border-radius: 0 16px 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 640px) {
  .subcategory-section .card h3,
  #location-voiture .card h3,
  #voiture-chauffeur .card h3,
  #hotels-riads .card h3,
  #villas-apparts .card h3,
  #activites-jour .card h3,
  #night-life .card h3 {
    width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    min-height: 50px !important;
    padding: 5px 8px !important;
    font-size: clamp(24px, 7vw, 30px) !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
  }

  .subcategory-section .price-tag,
  #location-voiture .price-tag,
  #voiture-chauffeur .price-tag,
  #hotels-riads .price-tag,
  #villas-apparts .price-tag,
  #activites-jour .price-tag,
  #night-life .price-tag {
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 5px 7px !important;
    font-size: 12.3px !important;
    line-height: 1.05 !important;
  }

  .subcategory-section .card .btn-whatsapp,
  #location-voiture .card .btn-whatsapp,
  #voiture-chauffeur .card .btn-whatsapp,
  #hotels-riads .card .btn-whatsapp,
  #villas-apparts .card .btn-whatsapp,
  #activites-jour .card .btn-whatsapp,
  #night-life .card .btn-whatsapp {
    min-width: 104px !important;
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
  }
}

@media (max-width: 380px) {
  .subcategory-section .card h3,
  #location-voiture .card h3,
  #voiture-chauffeur .card h3,
  #hotels-riads .card h3,
  #villas-apparts .card h3,
  #activites-jour .card h3,
  #night-life .card h3 {
    font-size: clamp(22px, 6.6vw, 27px) !important;
  }

  .subcategory-section .price-tag,
  #location-voiture .price-tag,
  #voiture-chauffeur .price-tag,
  #hotels-riads .price-tag,
  #villas-apparts .price-tag,
  #activites-jour .price-tag,
  #night-life .price-tag {
    width: 108px !important;
    min-width: 108px !important;
    max-width: 108px !important;
    font-size: 11.4px !important;
  }
}


/* HABIBI FINAL 2026-05-19 : retirer les boutons détails des cases + prix lisible */
.subcategory-section .card .btn-whatsapp,
#location-voiture .card .btn-whatsapp,
#voiture-chauffeur .card .btn-whatsapp,
#hotels-riads .card .btn-whatsapp,
#villas-apparts .card .btn-whatsapp,
#activites-jour .card .btn-whatsapp,
#night-life .card .btn-whatsapp {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.subcategory-section .card { cursor: pointer !important; }

.subcategory-section .price-tag,
#location-voiture .price-tag,
#voiture-chauffeur .price-tag,
#hotels-riads .price-tag,
#villas-apparts .price-tag,
#activites-jour .price-tag,
#night-life .price-tag {
  width: 136px !important;
  min-width: 136px !important;
  max-width: 136px !important;
  height: 46px !important;
  min-height: 46px !important;
  font-size: 13px !important;
}

@media (max-width: 640px) {
  .subcategory-section .price-tag,
  #location-voiture .price-tag,
  #voiture-chauffeur .price-tag,
  #hotels-riads .price-tag,
  #villas-apparts .price-tag,
  #activites-jour .price-tag,
  #night-life .price-tag {
    width: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    height: 46px !important;
    min-height: 46px !important;
    font-size: 12.6px !important;
    line-height: 1.06 !important;
  }
}

@media (max-width: 380px) {
  .subcategory-section .price-tag,
  #location-voiture .price-tag,
  #voiture-chauffeur .price-tag,
  #hotels-riads .price-tag,
  #villas-apparts .price-tag,
  #activites-jour .price-tag,
  #night-life .price-tag {
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    font-size: 11.8px !important;
  }
}

/* HABIBI 2026-05-19 : sélecteur date/heure moderne type roulette iPhone */
.hb-picker-input {
  cursor: pointer !important;
  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  text-align: center !important;
}
.hb-wheel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
}
.hb-wheel-backdrop.is-open { display: flex; }
.hb-wheel-sheet {
  width: min(520px, 100%);
  border-radius: 26px 26px 18px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(238,238,238,.98));
  box-shadow: 0 -18px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.9);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.75);
}
.hb-wheel-top {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.hb-wheel-title {
  font-size: 16px;
  font-weight: 900;
  color: #111;
  text-align: center;
  flex: 1;
}
.hb-wheel-btn {
  border: 0;
  border-radius: 999px;
  padding: 9px 14px;
  font-weight: 900;
  cursor: pointer;
}
.hb-wheel-cancel { background: #ececec; color: #222; }
.hb-wheel-ok { background: #111; color: #fff; }
.hb-wheel-body {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 20px 16px 24px;
}
.hb-wheel-body.time-mode { grid-template-columns: repeat(2, minmax(0, 120px)); justify-content: center; }
.hb-wheel-select {
  width: 100%;
  height: 164px;
  border: 0;
  outline: 0;
  border-radius: 18px;
  background: rgba(255,255,255,.78);
  color: #111;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  overflow-y: auto;
  box-shadow: inset 0 10px 22px rgba(0,0,0,.06), inset 0 -10px 22px rgba(0,0,0,.06);
  scrollbar-width: none;
}
.hb-wheel-select::-webkit-scrollbar { display: none; }
.hb-wheel-select option {
  font-size: 20px;
  font-weight: 900;
  padding: 12px 4px;
  text-align: center;
}
.hb-wheel-hint {
  padding: 0 18px 16px;
  text-align: center;
  color: #444;
  font-size: 12px;
  font-weight: 700;
}
@media (max-width: 520px) {
  .hb-wheel-backdrop { padding: 0; }
  .hb-wheel-sheet { width: 100%; border-radius: 25px 25px 0 0; }
  .hb-wheel-body { gap: 7px; padding: 18px 10px 22px; }
  .hb-wheel-select { height: 156px; font-size: 19px; border-radius: 16px; }
  .hb-wheel-select option { font-size: 19px; }
}

/* HABIBI FIX 2026-05-19 : roulette iPhone intégrée directement dans le popup */
#popup .hb-inline-hidden-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#popup .hb-inline-wheel {
  position: relative;
  display: grid;
  gap: 8px;
  width: 100%;
  min-height: 156px;
  padding: 10px 9px 12px;
  margin-top: 8px;
  border-radius: 24px;
  background: linear-gradient(180deg, #ffffff 0%, #f4f4f6 48%, #ffffff 100%);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 26px rgba(0,0,0,.08);
  overflow: hidden;
}
#popup .hb-inline-date-wheel { grid-template-columns: .82fr 1.28fr 1fr; }
#popup .hb-inline-time-wheel { grid-template-columns: 1fr 1fr; max-width: 360px; }
#popup .hb-inline-wheel-focus {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 58px;
  height: 42px;
  border-radius: 15px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 5px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
  pointer-events: none;
  z-index: 0;
}
#popup .hb-inline-wheel::before,
#popup .hb-inline-wheel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 38px;
  z-index: 2;
  pointer-events: none;
}
#popup .hb-inline-wheel::before { top: 0; background: linear-gradient(180deg, #fff 8%, rgba(255,255,255,0)); }
#popup .hb-inline-wheel::after { bottom: 0; background: linear-gradient(0deg, #fff 8%, rgba(255,255,255,0)); }
#popup .hb-inline-wheel-col {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#popup .hb-inline-wheel-col > span {
  margin-top: 5px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(0,0,0,.48);
  text-transform: uppercase;
  letter-spacing: .05em;
}
#popup .hb-inline-wheel-select {
  width: 100%;
  height: 124px;
  padding: 40px 0;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 18px;
  background: transparent !important;
  color: #111 !important;
  font-size: 18px;
  font-weight: 900;
  line-height: 42px;
  text-align: center;
  text-align-last: center;
  appearance: auto;
  -webkit-appearance: listbox;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  cursor: ns-resize;
}
#popup .hb-inline-wheel-select::-webkit-scrollbar { display: none; }
#popup .hb-inline-wheel-select option {
  min-height: 42px;
  padding: 10px 4px;
  font-size: 18px;
  font-weight: 900;
  color: #111;
  background: transparent;
  scroll-snap-align: center;
}
#popup .hb-inline-wheel-select:focus option:checked,
#popup .hb-inline-wheel-select option:checked {
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04));
  color: #000;
}
@media (max-width: 700px) {
  #popup .hb-inline-wheel {
    min-height: 148px;
    padding: 8px 6px 10px;
    gap: 5px;
    border-radius: 21px;
  }
  #popup .hb-inline-wheel-focus { top: 55px; height: 40px; left: 7px; right: 7px; }
  #popup .hb-inline-wheel-select {
    height: 118px;
    padding: 38px 0;
    font-size: 16px;
    line-height: 40px;
  }
  #popup .hb-inline-wheel-select option {
    min-height: 40px;
    font-size: 16px;
    padding: 9px 2px;
  }
  #popup .hb-inline-wheel-col > span { font-size: 10px; }
  #popup .hb-inline-date-wheel { grid-template-columns: .74fr 1.34fr .92fr; }
}

/* HABIBI FIX 2026-05-19 : date/heure compactes, visibles et professionnelles */
#popup .hb-compact-hidden-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
#popup .hb-compact-picker {
  width: 100%;
  min-height: 46px;
  display: grid;
  align-items: center;
  gap: 6px;
  margin: 6px 0 8px;
  padding: 5px;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 6px 16px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.95);
}
#popup .hb-compact-date { grid-template-columns: 28px minmax(48px,.72fr) minmax(70px,1fr) minmax(66px,.86fr); }
#popup .hb-compact-time { grid-template-columns: 28px minmax(64px,92px) 8px minmax(64px,92px); max-width: 238px; }
#popup .hb-compact-icon {
  width: 28px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0,0,0,.06);
  font-size: 15px;
}
#popup .hb-compact-select {
  width: 100%;
  height: 36px;
  min-width: 0;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.92) !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  text-align: center !important;
  text-align-last: center !important;
  padding: 0 22px 0 8px !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06) !important;
  cursor: pointer;
}
#popup .hb-compact-select:focus {
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.22), 0 0 0 3px rgba(0,0,0,.06) !important;
}
#popup .hb-compact-sep {
  color: #111;
  font-weight: 1000;
  font-size: 18px;
  text-align: center;
}
@media (max-width: 700px) {
  #popup .hb-compact-picker {
    min-height: 42px;
    gap: 4px;
    padding: 4px;
    margin: 4px 0 6px;
    border-radius: 14px;
  }
  #popup .hb-compact-date { grid-template-columns: 24px minmax(45px,.66fr) minmax(62px,1fr) minmax(59px,.82fr); }
  #popup .hb-compact-time { grid-template-columns: 24px minmax(54px,78px) 7px minmax(54px,78px); max-width: 200px; }
  #popup .hb-compact-icon { width: 24px; height: 31px; font-size: 13px; border-radius: 10px; }
  #popup .hb-compact-select {
    height: 33px;
    font-size: 12.5px !important;
    border-radius: 11px !important;
    padding: 0 16px 0 5px !important;
  }
}
@media (max-width: 380px) {
  #popup .hb-compact-select { font-size: 11.5px !important; padding-right: 13px !important; }
  #popup .hb-compact-date { grid-template-columns: 22px minmax(41px,.62fr) minmax(56px,1fr) minmax(54px,.80fr); }
}


/* === HABIBI 2026-05-20 : finition parfaite demandée === */
/* Boutons langue/devise centrés en bas, sans gêner WhatsApp */
#currencyBtn,
#languageBtn{
  position:fixed!important;
  bottom:22px!important;
  width:46px!important;
  height:46px!important;
  border-radius:50%!important;
  z-index:9999!important;
}
#currencyBtn{left:calc(50% - 52px)!important;}
#languageBtn{left:calc(50% + 6px)!important;}
.currency-menu,
.language-menu{
  bottom:76px!important;
  transform:translateX(-50%)!important;
}
.currency-menu{left:calc(50% - 29px)!important;}
.language-menu{left:calc(50% + 60px)!important;}
@media(max-width:520px){
  #currencyBtn{left:calc(50% - 51px)!important; bottom:18px!important;}
  #languageBtn{left:calc(50% + 5px)!important; bottom:18px!important;}
  .currency-menu{left:calc(50% - 28px)!important; bottom:70px!important;}
  .language-menu{left:calc(50% + 58px)!important; bottom:70px!important;}
}

/* Logos jamais déformés */
.logo,
.footer-logo{
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  aspect-ratio:auto!important;
  max-width:100%!important;
}
.logo{width:min(375px,84vw)!important; max-height:250px!important;}
.footer-logo{width:min(220px,70vw)!important; max-height:150px!important; display:block!important;}
.logo-container{display:flex!important; flex-direction:column!important; align-items:center!important;}
.footer-brand{display:flex!important; flex-direction:column!important; align-items:flex-start!important;}
@media(max-width:700px){
  .logo{width:min(330px,82vw)!important;}
  .footer-brand{align-items:center!important; text-align:center!important;}
  .footer-logo{width:min(190px,62vw)!important;}
}

/* Collages 4 produits appliqués aussi au transfert aéroport */
.product-collage,
.car-category-card .product-collage{
  display:grid!important;
  grid-template-columns:repeat(2,1fr)!important;
  grid-template-rows:repeat(2,1fr)!important;
  gap:2px!important;
  width:100%!important;
  height:100%!important;
  min-height:210px!important;
  overflow:hidden!important;
  border-radius:18px!important;
  background:#f3f4f6!important;
}
.product-collage img,
.car-category-card .product-collage img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.product-collage img[src$='.svg']{object-fit:contain!important; background:#fff!important;}

/* Popup plus propre, plus compacte et mieux centrée */
.popup{padding:14px!important; box-sizing:border-box!important;}
.popup-content.enhanced-popup{
  width:min(560px,96vw)!important;
  max-height:92vh!important;
  overflow-y:auto!important;
  margin:28px auto!important;
  padding:16px!important;
  border-radius:24px!important;
}
.popup-head{margin-bottom:7px!important; align-items:center!important;}
.popup-head h2{font-size:clamp(19px,4.5vw,24px)!important; margin:0!important;}
.popup-badge{padding:6px 9px!important; font-size:10.5px!important;}
.popup-image-wrap{margin:6px 0 8px!important; border-radius:18px!important; overflow:hidden!important;}
.popup-image-wrap #popup-img{max-height:245px!important; object-fit:cover!important;}
#popup-desc{margin:6px 0 2px!important; line-height:1.28!important; font-size:13.5px!important;}
#popup-price{margin:2px 0 6px!important; font-size:16px!important;}
.popup-note{margin:6px 0 8px!important; padding:8px 10px!important; font-size:12px!important;}
.booking-row{gap:8px!important; margin:7px 0!important; align-items:end!important;}
.booking-field label,.option-group h4{font-size:12px!important; margin-bottom:4px!important; line-height:1.18!important;}
.required-text{display:none!important;}
.popup-content .booking-field input,
.popup-content .booking-field select,
.popup-content select,
.popup-content input[type='file']{
  min-height:39px!important;
  padding:8px 10px!important;
  margin:0 0 6px!important;
  border-radius:12px!important;
  font-size:14px!important;
}
.popup-summary{margin:8px 0 10px!important; padding:10px 12px!important; border-radius:14px!important;}
.popup-summary strong{font-size:19px!important;}
.add-program-btn{min-height:43px!important; border-radius:14px!important;}

/* Sélecteurs date/heure ultra compacts et professionnels */
#popup .hb-compact-picker{
  min-height:40px!important;
  margin:0 0 6px!important;
  padding:4px!important;
  gap:4px!important;
  border-radius:15px!important;
  background:linear-gradient(180deg,#fff,#f5f6f8)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.95)!important;
}
#popup .hb-compact-date{grid-template-columns:24px minmax(42px,.65fr) minmax(66px,1fr) minmax(58px,.82fr)!important;}
#popup .hb-compact-time{grid-template-columns:24px minmax(54px,80px) 7px minmax(54px,80px)!important; max-width:198px!important;}
#popup .hb-compact-icon{width:24px!important; height:31px!important; font-size:13px!important; border-radius:10px!important;}
#popup .hb-compact-select{
  height:32px!important;
  min-height:32px!important;
  font-size:12.5px!important;
  font-weight:900!important;
  border-radius:11px!important;
  padding:0 16px 0 5px!important;
}
#popup .hb-compact-sep{font-size:16px!important;}
@media(max-width:760px){
  .popup{padding:8px!important;}
  .popup-content.enhanced-popup{width:min(430px,96vw)!important; margin:18px auto!important; padding:12px!important; border-radius:22px!important; max-height:94vh!important;}
  .booking-row{grid-template-columns:1fr 1fr!important; gap:7px!important;}
  .booking-field label{font-size:11.5px!important;}
  .popup-content .booking-field input,.popup-content .booking-field select,.popup-content select,.popup-content input[type='file']{min-height:36px!important; font-size:13px!important; padding:7px 8px!important;}
  #popup .hb-compact-date{grid-template-columns:22px minmax(39px,.62fr) minmax(58px,1fr) minmax(52px,.78fr)!important;}
  #popup .hb-compact-select{font-size:11.5px!important; padding-right:13px!important;}
  .popup-image-wrap #popup-img{max-height:190px!important;}
}
@media(max-width:390px){
  .booking-row{grid-template-columns:1fr!important;}
  #popup .hb-compact-time{max-width:190px!important;}
}

/* Alignement global plus propre PC / téléphone */
.subcategory-section{padding-left:clamp(12px,3vw,32px)!important; padding-right:clamp(12px,3vw,32px)!important;}
.horizontal-scroll{scroll-padding-left:12px!important; gap:16px!important;}
.card{border-radius:22px!important; overflow:hidden!important;}
@media(min-width:900px){.horizontal-scroll{justify-content:center!important;}}

/* === HABIBI 2026-05-20 : iOS picker dynamique + prix verts === */
#popup .hb-compact-picker,
#popup .hb-inline-wheel,
#hb-wheel-picker{display:none!important;}
#popup .hb-ios-hidden-input{
  position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;
  border:0!important;padding:0!important;margin:0!important;appearance:none!important;
}
#popup .hb-ios-trigger{
  width:100%!important;min-height:38px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;
  margin:0 0 6px!important;padding:6px 9px!important;border:1px solid rgba(0,0,0,.10)!important;border-radius:15px!important;
  background:linear-gradient(180deg,#fff 0%,#f5f6f8 100%)!important;box-shadow:0 5px 15px rgba(0,0,0,.07), inset 0 1px 0 rgba(255,255,255,.95)!important;
  color:#111!important;cursor:pointer!important;-webkit-tap-highlight-color:transparent!important;box-sizing:border-box!important;
}
#popup .hb-ios-trigger:active{transform:scale(.985)!important;background:linear-gradient(180deg,#f7f7f9 0%,#eceff3 100%)!important;}
#popup .hb-ios-trigger-icon{width:27px!important;height:27px!important;border-radius:10px!important;background:rgba(0,0,0,.06)!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:14px!important;flex:0 0 auto!important;}
#popup .hb-ios-trigger-text{flex:1!important;text-align:center!important;font-size:13.2px!important;font-weight:900!important;letter-spacing:-.2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#popup .hb-ios-trigger-arrow{font-size:15px!important;font-weight:900!important;opacity:.55!important;line-height:1!important;}
.hb-ios-sheet-backdrop{position:fixed!important;inset:0!important;z-index:30000!important;background:rgba(0,0,0,.22)!important;display:none!important;align-items:flex-end!important;justify-content:center!important;padding:10px!important;box-sizing:border-box!important;}
.hb-ios-sheet-backdrop.is-open{display:flex!important;}
.hb-ios-sheet{width:min(430px,100%)!important;background:rgba(250,250,252,.96)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;border-radius:26px!important;box-shadow:0 24px 70px rgba(0,0,0,.30)!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.65)!important;}
.hb-ios-sheet-top{height:48px!important;display:grid!important;grid-template-columns:92px 1fr 92px!important;align-items:center!important;padding:0 10px!important;border-bottom:1px solid rgba(0,0,0,.08)!important;box-sizing:border-box!important;}
.hb-ios-sheet-title{text-align:center!important;font-weight:900!important;font-size:14px!important;color:#111!important;}
.hb-ios-action{border:0!important;border-radius:13px!important;padding:9px 12px!important;font-weight:900!important;font-size:13px!important;cursor:pointer!important;}
.hb-ios-cancel{background:#e9e9ec!important;color:#222!important;}
.hb-ios-ok{background:#111!important;color:#fff!important;}
.hb-ios-wheels{position:relative!important;display:grid!important;gap:6px!important;padding:14px 12px 18px!important;min-height:150px!important;box-sizing:border-box!important;}
.hb-ios-wheels.date{grid-template-columns:.72fr 1fr .88fr!important;}
.hb-ios-wheels.time{grid-template-columns:1fr 20px 1fr!important;max-width:260px!important;margin:0 auto!important;}
.hb-ios-focus{position:absolute!important;left:12px!important;right:12px!important;top:68px!important;height:42px!important;border-radius:15px!important;background:rgba(255,255,255,.95)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 4px 14px rgba(0,0,0,.06)!important;pointer-events:none!important;}
.hb-ios-wheel-col{position:relative!important;z-index:1!important;}
.hb-ios-wheel-col>span{display:block!important;text-align:center!important;font-size:10.5px!important;font-weight:900!important;color:#777!important;margin-bottom:4px!important;text-transform:uppercase!important;letter-spacing:.3px!important;}
.hb-ios-select{width:100%!important;height:124px!important;overflow:auto!important;border:0!important;outline:0!important;background:transparent!important;appearance:none!important;-webkit-appearance:none!important;text-align:center!important;text-align-last:center!important;font-size:18px!important;font-weight:900!important;color:#111!important;padding:40px 0!important;scroll-snap-type:y mandatory!important;}
.hb-ios-select option{font-size:18px!important;font-weight:900!important;min-height:38px!important;padding:8px 2px!important;scroll-snap-align:center!important;}
.hb-ios-separator{align-self:center!important;text-align:center!important;font-weight:1000!important;font-size:25px!important;color:#111!important;z-index:1!important;margin-top:15px!important;}
.hb-ios-select::-webkit-scrollbar{display:none!important;}
@media(max-width:700px){
  #popup .hb-ios-trigger{min-height:35px!important;padding:5px 8px!important;border-radius:14px!important;}
  #popup .hb-ios-trigger-icon{width:24px!important;height:24px!important;font-size:13px!important;}
  #popup .hb-ios-trigger-text{font-size:12.5px!important;}
  .hb-ios-sheet-backdrop{padding:0!important;}
  .hb-ios-sheet{width:100%!important;border-radius:25px 25px 0 0!important;}
  .hb-ios-wheels{padding:12px 9px 16px!important;min-height:144px!important;}
  .hb-ios-select{height:118px!important;font-size:17px!important;padding:38px 0!important;}
  .hb-ios-select option{font-size:17px!important;}
}
.price,.price-tag,#popup-price,#popup-total,#popup-car-detail-price,.car-choice-price,.item-total,.cart-total strong,
[class*="price"], [class*="Price"]{color:#00a63e!important;}

/* === HABIBI FINAL 2026-05-20 : iOS picker PRO v2, prix verts partout === */
#popup .hb-ios-hidden-input,#popup .hb-ios2-hidden-input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important;margin:0!important;padding:0!important;}
#popup .hb-ios-trigger,#popup .hb-compact-picker,#popup .hb-inline-wheel,#hb-wheel-picker,#hb-ios-sheet{display:none!important;}
#popup .hb-ios2-trigger{width:100%!important;min-height:34px!important;border:1px solid rgba(0,0,0,.08)!important;border-radius:15px!important;background:linear-gradient(180deg,#fff 0%,#f1f3f6 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 5px 14px rgba(15,23,42,.08)!important;display:grid!important;grid-template-columns:28px 1fr 18px!important;align-items:center!important;gap:4px!important;padding:5px 7px!important;cursor:pointer!important;color:#101010!important;box-sizing:border-box!important;}
#popup .hb-ios2-trigger:active{transform:scale(.985)!important;background:linear-gradient(180deg,#f7f8fa 0%,#e9edf2 100%)!important;}
#popup .hb-ios2-ico{width:26px!important;height:24px!important;border-radius:10px!important;background:rgba(0,0,0,.055)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:13px!important;}
#popup .hb-ios2-value{font-size:13px!important;font-weight:950!important;letter-spacing:-.25px!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
#popup .hb-ios2-chev{font-size:20px!important;font-weight:950!important;transform:rotate(90deg)!important;opacity:.48!important;line-height:1!important;}
.hb-ios2-backdrop{position:fixed!important;inset:0!important;z-index:50000!important;background:rgba(0,0,0,.24)!important;display:none!important;align-items:flex-end!important;justify-content:center!important;padding:10px!important;box-sizing:border-box!important;}
.hb-ios2-panel{width:min(420px,100%)!important;background:rgba(248,248,250,.96)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;border-radius:28px!important;box-shadow:0 24px 70px rgba(0,0,0,.32)!important;border:1px solid rgba(255,255,255,.72)!important;overflow:hidden!important;}
.hb-ios2-top{height:46px!important;display:grid!important;grid-template-columns:92px 1fr 92px!important;align-items:center!important;padding:0 9px!important;border-bottom:1px solid rgba(0,0,0,.075)!important;box-sizing:border-box!important;}
.hb-ios2-title{text-align:center!important;font-size:14px!important;font-weight:950!important;color:#111!important;}
.hb-ios2-cancel,.hb-ios2-ok{border:0!important;border-radius:13px!important;height:34px!important;padding:0 10px!important;font-size:13px!important;font-weight:950!important;cursor:pointer!important;}
.hb-ios2-cancel{background:#e8e8eb!important;color:#222!important;}
.hb-ios2-ok{background:#111!important;color:#fff!important;}
.hb-ios2-chips{display:flex!important;gap:7px!important;justify-content:center!important;padding:9px 10px 0!important;}
.hb-ios2-chips button{border:0!important;border-radius:999px!important;background:#fff!important;box-shadow:0 2px 8px rgba(0,0,0,.07)!important;padding:7px 12px!important;font-weight:900!important;font-size:12px!important;color:#111!important;cursor:pointer!important;}
.hb-ios2-wheels{position:relative!important;display:grid!important;gap:6px!important;padding:10px 12px 12px!important;min-height:142px!important;box-sizing:border-box!important;}
.hb-ios2-wheels.date{grid-template-columns:.72fr 1fr .9fr!important;}
.hb-ios2-wheels.time{grid-template-columns:1fr 18px 1fr!important;max-width:252px!important;margin:0 auto!important;}
.hb-ios2-focus{position:absolute!important;left:12px!important;right:12px!important;top:70px!important;height:34px!important;border-radius:14px!important;background:#fff!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07),0 4px 13px rgba(0,0,0,.06)!important;pointer-events:none!important;}
.hb-ios2-col{position:relative!important;z-index:1!important;min-width:0!important;}
.hb-ios2-col>span{display:block!important;text-align:center!important;font-size:10px!important;font-weight:950!important;letter-spacing:.3px!important;text-transform:uppercase!important;color:#737373!important;margin:0 0 4px!important;}
.hb-ios2-wheel{height:106px!important;overflow-y:auto!important;scroll-snap-type:y mandatory!important;-webkit-overflow-scrolling:touch!important;padding:36px 0!important;box-sizing:border-box!important;mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%)!important;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%)!important;}
.hb-ios2-wheel::-webkit-scrollbar{display:none!important;}
.hb-ios2-row{display:block!important;width:100%!important;height:34px!important;border:0!important;background:transparent!important;border-radius:12px!important;text-align:center!important;font-size:18px!important;font-weight:850!important;color:#525252!important;scroll-snap-align:center!important;cursor:pointer!important;padding:0!important;}
.hb-ios2-row.is-selected{font-size:19px!important;font-weight:1000!important;color:#090909!important;}
.hb-ios2-sep{align-self:center!important;text-align:center!important;font-size:24px!important;font-weight:1000!important;color:#111!important;z-index:2!important;margin-top:12px!important;}
.hb-ios2-help{text-align:center!important;font-size:11px!important;font-weight:750!important;color:#747474!important;padding:0 10px 12px!important;}
.price,.price-tag,#popup-price,#popup-total,#popup-car-detail-price,.car-choice-price,.item-total,.cart-total strong,[class*="price"],[class*="Price"]{color:#00a63e!important;}
#popup.car-choice-mode .car-choice-price,.car-choice-card .car-choice-price{color:#00c853!important;background:rgba(0,0,0,.56)!important;border:1px solid rgba(0,200,83,.42)!important;text-shadow:0 1px 2px rgba(0,0,0,.75)!important;font-weight:1000!important;}
.price-tag{background:rgba(0,166,62,.12)!important;border-color:rgba(0,166,62,.28)!important;}
@media(max-width:640px){
  #popup .hb-ios2-trigger{min-height:31px!important;border-radius:13px!important;padding:4px 6px!important;grid-template-columns:24px 1fr 15px!important;}
  #popup .hb-ios2-ico{width:23px!important;height:22px!important;font-size:12px!important;border-radius:9px!important;}
  #popup .hb-ios2-value{font-size:12.2px!important;}
  .hb-ios2-backdrop{padding:0!important;}
  .hb-ios2-panel{width:100%!important;border-radius:25px 25px 0 0!important;}
  .hb-ios2-wheels{padding:9px 9px 11px!important;min-height:132px!important;}
  .hb-ios2-wheel{height:98px!important;padding:32px 0!important;}
  .hb-ios2-row{height:32px!important;font-size:17px!important;}
  .hb-ios2-row.is-selected{font-size:18px!important;}
  .hb-ios2-focus{left:9px!important;right:9px!important;top:66px!important;height:32px!important;}
  .hb-ios2-top{height:44px!important;grid-template-columns:82px 1fr 82px!important;}
  .hb-ios2-cancel,.hb-ios2-ok{height:31px!important;font-size:12px!important;}
}


/* === HABIBI FIX FINAL : picker au-dessus du popup + prix sans rectangle === */
.hb-ios2-backdrop,
#hb-ios2-sheet{
  z-index:2147483000!important;
  position:fixed!important;
  inset:0!important;
}
.hb-ios2-backdrop.is-open{display:flex!important;}
.hb-ios2-panel{
  transform:translateZ(0)!important;
  max-height:min(78vh,420px)!important;
}
@media (min-width:641px){
  .hb-ios2-backdrop{
    align-items:center!important;
    padding:18px!important;
  }
  .hb-ios2-panel{
    width:min(390px,96vw)!important;
    border-radius:30px!important;
  }
  .hb-ios2-wheels{min-height:150px!important;padding:12px 14px 14px!important;}
  .hb-ios2-wheel{height:116px!important;padding:40px 0!important;}
  .hb-ios2-row{height:36px!important;font-size:18px!important;}
  .hb-ios2-focus{top:74px!important;height:36px!important;}
}
@media (max-width:640px){
  .hb-ios2-backdrop{align-items:flex-end!important;padding:0!important;}
  .hb-ios2-panel{max-height:72vh!important;border-radius:24px 24px 0 0!important;}
}
#popup .booking-row{gap:8px!important;}
#popup .hb-ios2-trigger{
  height:32px!important;
  min-height:32px!important;
  max-height:36px!important;
}
/* Prix des 4 produits : vert, sans badge/rectangle */
#popup.car-choice-mode .car-choice-price,
.car-choice-card .car-choice-price,
.popup-car-choices .car-choice-price{
  color:#00c853!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  padding:0!important;
  border-radius:0!important;
  text-shadow:0 2px 5px rgba(0,0,0,.88)!important;
  display:inline!important;
  width:auto!important;
}
#popup.car-choice-mode .car-choice-overlay{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 100%)!important;
}
/* Ne jamais ajouter le texte “réponse en quelques minutes” dans les boutons WhatsApp */
.btn-whatsapp,
button[class*="whatsapp"],
a[class*="whatsapp"]{white-space:nowrap!important;}

.cart-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px 0;}.cart-header h2{flex:1;text-align:center;}
.cart-header h2{margin:0;}
.cart-trash-btn{background:transparent;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;color:#e10600;}
.cart-trash-btn:hover{transform:scale(1.08);}


/* =========================================================
   HABIBI FINAL PRO 2026 - uniformisation, fluidité, mobile
   ========================================================= */
:root{--hb-radius:24px;--hb-shadow:0 18px 45px rgba(0,0,0,.12);--hb-shadow-hover:0 24px 65px rgba(0,0,0,.20);--hb-green:#25D366;--hb-dark:#101114;}
.subcategory-section{padding:64px clamp(12px,3vw,28px) 24px;}
.subcategory-section h2{max-width:1180px;font-size:clamp(25px,3vw,38px);letter-spacing:-.03em;margin-bottom:18px;}
.horizontal-scroll{max-width:1180px;gap:18px;padding:8px 6px 24px;scroll-padding-inline:8px;}
.card,.car-category-card{min-width:calc((100% - 36px)/3)!important;border-radius:var(--hb-radius)!important;overflow:hidden!important;background:rgba(255,255,255,.96)!important;box-shadow:var(--hb-shadow)!important;border:1px solid rgba(0,0,0,.06)!important;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease!important;position:relative!important;isolation:isolate!important;}
.card:hover,.card:focus-within{transform:translateY(-8px)!important;box-shadow:var(--hb-shadow-hover)!important;border-color:rgba(37,211,102,.35)!important;}
.habibi-card-clickable{cursor:pointer;}
.habibi-card-clickable:active{transform:translateY(-2px) scale(.992)!important;}
.card>img{height:236px!important;display:block!important;margin:0!important;border-radius:0!important;object-fit:cover!important;}
.product-collage,.car-category-card .product-collage,.subcategory-section .card .product-collage{height:236px!important;width:100%!important;display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:6px!important;padding:6px!important;background:linear-gradient(145deg,#fff,#f1f1f1)!important;border-radius:0!important;overflow:hidden!important;margin:0!important;}
.product-collage img,.car-category-card .product-collage img,.subcategory-section .card .product-collage img{width:100%!important;height:100%!important;min-height:0!important;object-fit:cover!important;border-radius:16px!important;margin:0!important;transition:transform .45s ease,filter .45s ease!important;background:#eee!important;}
.card:hover .product-collage img{transform:scale(1.045)!important;filter:saturate(1.08) contrast(1.04)!important;}
.card h3{font-size:clamp(19px,2vw,23px)!important;line-height:1.12!important;margin:16px 14px 8px!important;text-align:center!important;min-height:52px!important;display:flex!important;align-items:center!important;justify-content:center!important;}
.card p{font-size:14px!important;line-height:1.45!important;color:#555!important;min-height:62px!important;margin:0 0 12px!important;padding:0 16px!important;text-align:center!important;}
.price-tag{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:38px!important;padding:8px 14px!important;border-radius:999px!important;background:#111!important;color:#fff!important;font-weight:800!important;margin:0 auto 18px!important;font-size:15px!important;box-shadow:0 10px 24px rgba(0,0,0,.16)!important;}
.card .btn-whatsapp{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;}
.card::after{content:"";position:absolute;inset:auto 18px 10px 18px;height:3px;border-radius:20px;background:linear-gradient(90deg,transparent,var(--hb-green),transparent);opacity:0;transform:scaleX(.4);transition:.28s ease;}
.card:hover::after{opacity:1;transform:scaleX(1);}
.booking-field.hidden{display:none!important;}
.popup-content.enhanced-popup{border-radius:28px!important;box-shadow:0 30px 90px rgba(0,0,0,.32)!important;}
.popup-summary{position:sticky;bottom:74px;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);}
.add-program-btn{position:sticky;bottom:12px;z-index:6;width:100%;box-shadow:0 14px 30px rgba(37,211,102,.32)!important;}
@media (min-width:1180px){.horizontal-scroll{overflow-x:visible!important;}.card,.car-category-card{flex:1 1 0!important;}}
@media (max-width:900px){.card,.car-category-card{min-width:calc((100% - 18px)/2)!important;}.product-collage,.card>img{height:220px!important;}}
@media (max-width:640px){.subcategory-section{padding:44px 10px 12px;}.horizontal-scroll{gap:12px;padding:4px 4px 18px;}.card,.car-category-card{min-width:86vw!important;border-radius:22px!important;}.product-collage,.card>img{height:218px!important;}.product-collage{gap:5px!important;padding:5px!important;}.product-collage img{border-radius:14px!important;}.card h3{font-size:21px!important;min-height:44px!important;margin:13px 10px 6px!important;}.card p{font-size:13px!important;min-height:54px!important;padding:0 13px!important;}.price-tag{font-size:14px!important;margin-bottom:14px!important;}}
@media (max-width:390px){.card,.car-category-card{min-width:88vw!important;}.product-collage,.card>img{height:198px!important;}.card h3{font-size:19px!important;}.card p{font-size:12.5px!important;}}

/* =========================================================
   HABIBI MOBILE HORIZONTAL NAVIGATION
   Objectif : montrer clairement sur téléphone qu'il y a
   d'autres cases à droite, sans changer l'affichage PC.
   ========================================================= */
.hb-mobile-scroll-wrap {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}

.hb-mobile-scroll-btn {
  display: none;
}

@media (max-width: 768px) {
  .subcategory-section .hb-mobile-scroll-wrap {
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
  }

  .subcategory-section .hb-mobile-scroll-wrap::before,
  .subcategory-section .hb-mobile-scroll-wrap::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 14px;
    width: 42px;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }

  .subcategory-section .hb-mobile-scroll-wrap::before {
    left: -1px;
    background: linear-gradient(90deg, rgba(245,245,245,.92), rgba(245,245,245,0));
  }

  .subcategory-section .hb-mobile-scroll-wrap::after {
    right: -1px;
    background: linear-gradient(270deg, rgba(245,245,245,.92), rgba(245,245,245,0));
  }

  .subcategory-section .hb-mobile-scroll-wrap.can-left::before,
  .subcategory-section .hb-mobile-scroll-wrap.can-right::after {
    opacity: 1;
  }

  .subcategory-section .horizontal-scroll {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 18vw !important;
  }

  .subcategory-section .horizontal-scroll::-webkit-scrollbar {
    display: none;
  }

  .subcategory-section .card {
    min-width: 86% !important;
  }

  .hb-mobile-scroll-btn {
    position: absolute;
    top: 50%;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: #111;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    font-size: 24px;
    line-height: 1;
    font-weight: 800;
    transform: translateY(-50%) scale(.96);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease, box-shadow .18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .hb-mobile-scroll-btn.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) scale(1);
  }

  .hb-mobile-scroll-btn:active {
    transform: translateY(-50%) scale(.92);
    box-shadow: 0 4px 14px rgba(0,0,0,.2);
  }

  .hb-mobile-scroll-btn.prev {
    left: 8px;
  }

  .hb-mobile-scroll-btn.next {
    right: 8px;
  }
}

@media (max-width: 420px) {
  .subcategory-section .card {
    min-width: 87% !important;
  }

  .hb-mobile-scroll-btn {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
}


/* =========================================================
   HABIBI MOBILE REAL PHONE FIX 2026-05-23
   - correction pour vrais téléphones + priorité CSS maximale
   - garde PC intact
   ========================================================= */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .subcategory-section .hb-mobile-scroll-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
  }

  .subcategory-section .hb-mobile-scroll-wrap::before,
  .subcategory-section .hb-mobile-scroll-wrap::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 14px !important;
    width: 42px !important;
    z-index: 8 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    transition: opacity .18s ease !important;
  }

  .subcategory-section .hb-mobile-scroll-wrap::before {
    left: 0 !important;
    background: linear-gradient(90deg, rgba(245,245,245,.96), rgba(245,245,245,0)) !important;
  }

  .subcategory-section .hb-mobile-scroll-wrap::after {
    right: 0 !important;
    background: linear-gradient(270deg, rgba(245,245,245,.96), rgba(245,245,245,0)) !important;
  }

  .subcategory-section .hb-mobile-scroll-wrap.can-left::before,
  .subcategory-section .hb-mobile-scroll-wrap.can-right::after {
    opacity: 1 !important;
  }

  .subcategory-section .horizontal-scroll,
  #location-voiture .horizontal-scroll,
  #voiture-chauffeur .horizontal-scroll,
  #hotels-riads .horizontal-scroll,
  #villas-apparts .horizontal-scroll,
  #activites-jour .horizontal-scroll,
  #night-life .horizontal-scroll {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scroll-padding-left: 2px !important;
    padding-left: 2px !important;
    padding-right: 18vw !important;
    padding-bottom: 14px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    touch-action: pan-x pan-y !important;
  }

  .subcategory-section .horizontal-scroll::-webkit-scrollbar,
  #location-voiture .horizontal-scroll::-webkit-scrollbar,
  #voiture-chauffeur .horizontal-scroll::-webkit-scrollbar,
  #hotels-riads .horizontal-scroll::-webkit-scrollbar,
  #villas-apparts .horizontal-scroll::-webkit-scrollbar,
  #activites-jour .horizontal-scroll::-webkit-scrollbar,
  #night-life .horizontal-scroll::-webkit-scrollbar {
    display: none !important;
  }

  .subcategory-section .card,
  #location-voiture .card,
  #voiture-chauffeur .card,
  #hotels-riads .card,
  #villas-apparts .card,
  #activites-jour .card,
  #night-life .card {
    flex: 0 0 86vw !important;
    min-width: 86vw !important;
    width: 86vw !important;
    max-width: 86vw !important;
    scroll-snap-align: start !important;
    scroll-margin-left: 2px !important;
    overflow: hidden !important;
  }

  .hb-mobile-scroll-btn {
    position: absolute !important;
    top: 50% !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.98) !important;
    color: #111 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.24) !important;
    font-size: 25px !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    transform: translateY(-50%) scale(.96) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .hb-mobile-scroll-btn.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) scale(1) !important;
  }

  .hb-mobile-scroll-btn.prev { left: 8px !important; }
  .hb-mobile-scroll-btn.next { right: 8px !important; }
}

@media (max-width: 390px), (hover: none) and (pointer: coarse) and (max-width: 390px) {
  .subcategory-section .card,
  #location-voiture .card,
  #voiture-chauffeur .card,
  #hotels-riads .card,
  #villas-apparts .card,
  #activites-jour .card,
  #night-life .card {
    flex-basis: 87vw !important;
    min-width: 87vw !important;
    width: 87vw !important;
    max-width: 87vw !important;
  }
}

/* HABIBI trust badges around cart */
.cart-trust-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap;}
.trust-group{display:flex;gap:4px;align-items:center;}
.trust-badge{position:relative;display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:6px 12px 6px 22px;border-radius:999px;background:linear-gradient(180deg,#86d84c 0%,#4fae24 100%);color:#fff;font-weight:400;white-space:nowrap;box-shadow:0 1px 5px rgba(0,0,0,.18);letter-spacing:.1px;}
.trust-badge::before{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-size:10px;opacity:.95}
.trust-badge:nth-child(1)::before{content:"✓";}
.trust-left .trust-badge:nth-child(2)::before{content:"★";font-size:7px;}
.trust-right .trust-badge:nth-child(1)::before{content:"◉";font-size:7px;}
.trust-right .trust-badge:nth-child(2)::before{content:"⚡";font-size:7px;}
@media (max-width: 768px){.trust-badge{font-size:9px;padding:6px 10px 6px 20px}.trust-badge::before{left:7px;font-size:9px}.cart-trust-row{gap:2px}.trust-group{gap:2px}.cart-btn{font-size:11px;padding:6px 8px}.payment-info{font-size:9px;white-space:normal;max-width:95vw}}


/* HABIBI FINAL - badges empilés + panier actif rouge */
.cart-trust-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  flex-wrap:nowrap !important;
}
.trust-group{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  align-items:stretch !important;
}
.trust-badge{
  min-width:78px !important;
  justify-content:center !important;
  font-size:7.2px !important;
  line-height:1 !important;
  padding:3px 6px 3px 16px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,#8fe24f 0%,#4caf24 100%) !important;
  color:#fff !important;
  font-weight:400 !important;
  white-space:nowrap !important;
  box-shadow:0 1px 5px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
.trust-badge::before{
  left:5px !important;
  font-size:7px !important;
}
.cart-btn.cart-has-items{
  background:#e02020 !important;
  color:#fff !important;
  box-shadow:0 4px 14px rgba(224,32,32,.35) !important;
}
.payment-info{
  margin-top:4px !important;
  font-size:10px !important;
  font-weight:400 !important;
  color:#fff !important;
  opacity:.95 !important;
  white-space:nowrap !important;
}
.cart-header{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-bottom:12px !important;
  min-height:36px !important;
}
.cart-header h2{
  text-align:center !important;
  width:100% !important;
  margin:0 !important;
}
.cart-trash-btn{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  border:0 !important;
  background:#f3f3f3 !important;
  color:#d21f1f !important;
  font-size:11px !important;
  font-weight:400 !important;
  cursor:pointer !important;
}
.cart-trash-btn i{
  font-size:12px !important;
}
@media (max-width:768px){
  .cart-trust-row{gap:4px !important;}
  .trust-badge{
    min-width:65px !important;
    font-size:5.9px !important;
    padding:3px 4px 3px 13px !important;
  }
  .trust-badge::before{
    left:4px !important;
    font-size:6px !important;
  }
  .payment-info{
    font-size:8.5px !important;
    white-space:normal !important;
    max-width:95vw !important;
    line-height:1.25 !important;
  }
  .cart-header{
    padding-top:34px !important;
  }
  .cart-trash-btn{
    top:0 !important;
    transform:none !important;
    font-size:10px !important;
    padding:6px 9px !important;
  }
}


/* HABIBI FINAL - icônes des badges à l'extérieur */
.trust-badge{
  overflow:visible !important;
  position:relative !important;
  padding-left:10px !important;
  padding-right:10px !important;
}

.trust-badge::before{
  width:17px !important;
  height:17px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#ffffff 0%,#eaf9e5 100%) !important;
  color:#36a915 !important;
  font-size:10px !important;
  line-height:1 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.8) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:2 !important;
}

.trust-left .trust-badge{
  padding-left:17px !important;
  padding-right:8px !important;
}

.trust-left .trust-badge::before{
  left:-6px !important;
  right:auto !important;
}

.trust-right .trust-badge{
  padding-left:8px !important;
  padding-right:17px !important;
}

.trust-right .trust-badge::before{
  left:auto !important;
  right:-6px !important;
}

.trust-left .trust-badge:nth-child(1)::before{content:"✓" !important;}
.trust-left .trust-badge:nth-child(2)::before{content:"★" !important;}
.trust-right .trust-badge:nth-child(1)::before{content:"☎" !important;}
.trust-right .trust-badge:nth-child(2)::before{content:"⚡" !important;}

@media (max-width:768px){
  .trust-left .trust-badge{
    padding-left:14px !important;
    padding-right:5px !important;
  }
  .trust-right .trust-badge{
    padding-left:5px !important;
    padding-right:14px !important;
  }
  .trust-left .trust-badge::before{
    left:-5px !important;
  }
  .trust-right .trust-badge::before{
    right:-5px !important;
  }
}


/* HABIBI FINAL PATCH - qualité étoile dorée + WhatsApp */
.trust-left .trust-badge:nth-child(2)::before{
  content:"\2605" !important;
  color:#d4af37 !important;
  background:linear-gradient(180deg,#fff8d6 0%,#fff0a6 100%) !important;
}
.trust-right .trust-badge:nth-child(1)::before{
  content:"\f232" !important;
  font-family:"Font Awesome 6 Brands" !important;
  font-weight:400 !important;
  color:#25D366 !important;
  background:linear-gradient(180deg,#ffffff 0%,#eefcf3 100%) !important;
}

/* HABIBI FINAL PATCH - popup explicatif des badges panier */
.trust-badge{
  border:0 !important;
  cursor:pointer !important;
  font-family:inherit !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.trust-badge:hover,
.trust-badge:focus-visible{
  transform:translateY(-1px) !important;
  filter:brightness(1.04) !important;
  outline:none !important;
}
.trust-badge:active{
  transform:scale(.97) !important;
}
.trust-info-popup{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:none !important;
  align-items:flex-start !important;
  justify-content:center !important;
  padding:72px 12px 0 !important;
  background:rgba(0,0,0,.08) !important;
}
.trust-info-popup.is-open{
  display:flex !important;
}
.trust-info-card{
  position:relative !important;
  width:min(310px, calc(100vw - 28px)) !important;
  padding:14px 16px 13px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.98) !important;
  color:#1f2b18 !important;
  box-shadow:0 14px 35px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.75) !important;
  border:1px solid rgba(76,175,36,.22) !important;
  text-align:left !important;
  animation:hbTrustPopupIn .18s ease both !important;
}
.trust-info-card::before{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  height:4px !important;
  border-radius:18px 18px 0 0 !important;
  background:linear-gradient(90deg,#8fe24f,#25D366,#d4af37) !important;
}
.trust-info-card strong{
  display:block !important;
  padding-right:22px !important;
  font-size:15px !important;
  line-height:1.2 !important;
  color:#2c7a18 !important;
  margin-bottom:7px !important;
  font-weight:700 !important;
}
.trust-info-card p{
  margin:0 !important;
  font-size:12.5px !important;
  line-height:1.45 !important;
  color:#344032 !important;
  font-weight:400 !important;
}
.trust-info-close{
  position:absolute !important;
  top:7px !important;
  right:8px !important;
  width:25px !important;
  height:25px !important;
  border-radius:50% !important;
  border:0 !important;
  background:#f1f5ee !important;
  color:#44633a !important;
  font-size:18px !important;
  line-height:1 !important;
  cursor:pointer !important;
}
@keyframes hbTrustPopupIn{
  from{opacity:0;transform:translateY(-8px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media (max-width:768px){
  .trust-info-popup{
    padding-top:62px !important;
    background:rgba(0,0,0,.10) !important;
  }
  .trust-info-card{
    width:min(292px, calc(100vw - 22px)) !important;
    padding:13px 14px 12px !important;
  }
  .trust-info-card strong{font-size:14px !important;}
  .trust-info-card p{font-size:12px !important;}
}


/* HABIBI 2026-05-23 : Voiture avec chauffeur = une seule image par case */
#voiture-chauffeur .chauffeur-single-image{
  width:100% !important;
  height:236px !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:0 !important;
  margin:0 !important;
  background:#eee !important;
  transition:transform .45s ease,filter .45s ease !important;
}
#voiture-chauffeur .card:hover .chauffeur-single-image{
  transform:scale(1.035) !important;
  filter:saturate(1.08) contrast(1.04) !important;
}
#popup.car-choice-mode #standard-booking-options,
#popup.car-choice-mode #trajectory-options,
#popup.car-choice-mode #hourly-driver-options,
#popup.car-choice-mode #activity-day-options,
#popup.car-choice-mode #nightlife-options,
#popup.car-choice-mode #spa-options{
  display:none !important;
}
@media (max-width:900px){#voiture-chauffeur .chauffeur-single-image{height:220px !important;}}
@media (max-width:640px){#voiture-chauffeur .chauffeur-single-image{height:218px !important;}}
@media (max-width:390px){#voiture-chauffeur .chauffeur-single-image{height:198px !important;}}

/* HABIBI PRODUCTION PATCH 2026-05-24 : notifications propres au lieu des alert() navigateur */
.order-success-banner.error {
  background: #fff1f2;
  color: #991b1b;
  border-color: rgba(220, 38, 38, 0.35);
}
.order-success-banner.success {
  background: #e9fff1;
  color: #0f6b35;
  border-color: rgba(37, 211, 102, 0.45);
}
.order-success-banner.info {
  background: #eff6ff;
  color: #1e40af;
  border-color: rgba(59, 130, 246, 0.35);
}

/* =========================================================
   HABIBI CHANGE REQUEST 2026-05-24 - UI final
   ========================================================= */
.cart-action-row{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:14px;
}
.verify-availability-btn,
.availability-submit-btn{
  border:0;
  border-radius:16px;
  padding:13px 18px;
  font-weight:900;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.pay-disabled,
.pay-disabled:hover{
  opacity:.45 !important;
  cursor:not-allowed !important;
  filter:grayscale(.35) !important;
  transform:none !important;
}
.legal-popup-content{
  max-width:860px !important;
  width:min(92vw,860px) !important;
  max-height:86vh !important;
  overflow:auto !important;
  border-radius:22px !important;
}
.legal-popup-body{
  text-align:left;
  line-height:1.65;
  color:#1f2937;
}
.legal-popup-body h1,
.legal-popup-body h2,
.legal-popup-body h3{
  color:#111827;
}
body.hb-rtl .legal-popup-body{ text-align:right; direction:rtl; }
#circle-menu{
  position:fixed !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:9998 !important;
}
#circle-menu.active{ pointer-events:auto !important; }
.sub-circle-menu{
  max-width:86px !important;
  max-height:86px !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  line-height:1.05 !important;
  padding:6px !important;
  overflow:hidden !important;
  z-index:10000 !important;
}
@media (max-width:760px){
  .cart-action-row{ flex-direction:column; }
  .cart-action-row > button{ width:100%; }
  .sub-circle-menu{
    width:58px !important;
    height:58px !important;
    font-size:8.5px !important;
    letter-spacing:0 !important;
    padding:4px !important;
  }
  .legal-popup-content{
    width:94vw !important;
    max-height:82vh !important;
    padding:18px !important;
  }
}

/* Habibi disponibilité live */
.verify-availability-btn.verify-pending{
  background:#111827 !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(17,24,39,.18) !important;
}
.verify-availability-btn.verify-confirmed{
  background:#16a34a !important;
  color:#fff !important;
}
.verify-availability-btn.verify-refused{
  background:#f59e0b !important;
  color:#111827 !important;
  white-space:normal !important;
  line-height:1.25 !important;
}
.cart-pay-static.pay-ready{
  opacity:1 !important;
  filter:none !important;
  cursor:pointer !important;
}
.hb-loader{
  width:16px;
  height:16px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  display:inline-block;
  animation:hbSpin .7s linear infinite;
}
@keyframes hbSpin{to{transform:rotate(360deg)}}
#payment-popup .payment-methods-grid.hidden,
#payment-popup .payment-details.hidden,
#availability-submit-btn.hidden{
  display:none !important;
}
@media(max-width:640px){
  .verify-availability-btn.verify-refused{font-size:12px;padding:12px 10px;}
}


/* HABIBI MARKET READY UI PATCH */
.verify-availability-btn.verify-refused{
  white-space: normal;
  line-height: 1.25;
  min-height: 48px;
}
.verify-availability-btn.verify-confirmed{
  cursor: default;
}
.cart-pay-static.pay-disabled{
  opacity: .55;
  filter: grayscale(.25);
  cursor: not-allowed;
}
.whatsapp-refuse-link{
  background: #fff4e6!important;
  color: #9a4b00!important;
  border-color: #ffd8a8!important;
}

/* HABIBI FINAL 2026-05-25 - badges plus lisibles sans changer le design */
.trust-badge{
  min-width:86px !important;
  font-size:8px !important;
  line-height:1.05 !important;
  padding-top:4px !important;
  padding-bottom:4px !important;
}
@media (max-width:768px){
  .cart-trust-row{gap:5px !important; max-width:100vw !important; overflow:visible !important;}
  .trust-group{gap:3px !important; flex-shrink:1 !important;}
  .trust-badge{
    min-width:72px !important;
    font-size:6.9px !important;
    line-height:1.08 !important;
    padding-top:4px !important;
    padding-bottom:4px !important;
  }
  .cart-btn{flex-shrink:0 !important;}
}
@media (max-width:380px){
  .trust-badge{min-width:68px !important; font-size:6.5px !important;}
  .cart-btn{font-size:9.5px !important; padding-left:6px !important; padding-right:6px !important;}
}

/* HABIBI FINAL PATCH 2026-05-25 - flèches mobile fiables + arabe/RTL */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body.hb-rtl .subcategory-section .horizontal-scroll,
  body.hb-rtl #location-voiture .horizontal-scroll,
  body.hb-rtl #voiture-chauffeur .horizontal-scroll,
  body.hb-rtl #hotels-riads .horizontal-scroll,
  body.hb-rtl #villas-apparts .horizontal-scroll,
  body.hb-rtl #activites-jour .horizontal-scroll,
  body.hb-rtl #night-life .horizontal-scroll {
    direction: ltr !important;
  }
  body.hb-rtl .subcategory-section .card,
  body.hb-rtl #location-voiture .card,
  body.hb-rtl #voiture-chauffeur .card,
  body.hb-rtl #hotels-riads .card,
  body.hb-rtl #villas-apparts .card,
  body.hb-rtl #activites-jour .card,
  body.hb-rtl #night-life .card {
    direction: rtl !important;
  }
  .hb-mobile-scroll-btn:not(.is-visible) {
    pointer-events: none !important;
  }
}

/* HABIBI FINAL 2026-05-25 - petits cercles rapprochés et lisibles */
.sub-circle-menu{
  border: 2px solid rgba(255,255,255,.95) !important;
  outline: none !important;
  cursor: pointer !important;
  line-height: 1.08 !important;
  padding: 5px !important;
  text-align: center !important;
  word-break: normal !important;
  white-space: normal !important;
}
@media (max-width: 768px){
  .sub-circle-menu{
    font-size: 9.5px !important;
    letter-spacing: .01em !important;
    padding: 4px !important;
  }
}

/* =========================================================
   HABIBI FINAL PATCH 2026-05-25
   Mobile : montrer plus clairement la case suivante + footer centré
   ========================================================= */
@media (max-width: 760px){
  .subcategory-section .horizontal-scroll,
  #location-voiture .horizontal-scroll,
  #voiture-chauffeur .horizontal-scroll,
  #hotels-riads .horizontal-scroll,
  #villas-apparts .horizontal-scroll,
  #activites-jour .horizontal-scroll,
  #night-life .horizontal-scroll{
    gap: 12px !important;
    padding-left: 4px !important;
    padding-right: 24vw !important;
    scroll-padding-left: 4px !important;
    scroll-padding-right: 24vw !important;
  }

  .subcategory-section .card,
  #location-voiture .card,
  #voiture-chauffeur .card,
  #hotels-riads .card,
  #villas-apparts .card,
  #activites-jour .card,
  #night-life .card,
  .subcategory-section .car-category-card{
    flex: 0 0 80vw !important;
    min-width: 80vw !important;
    width: 80vw !important;
    max-width: 80vw !important;
  }
}

@media (max-width: 390px){
  .subcategory-section .card,
  #location-voiture .card,
  #voiture-chauffeur .card,
  #hotels-riads .card,
  #villas-apparts .card,
  #activites-jour .card,
  #night-life .card,
  .subcategory-section .car-category-card{
    flex-basis: 82vw !important;
    min-width: 82vw !important;
    width: 82vw !important;
    max-width: 82vw !important;
  }
}

.habibi-footer,
.footer-inner,
.footer-brand,
.footer-col,
.footer-bottom,
.footer-admin-link{
  text-align: center !important;
}
.footer-inner{
  justify-items: center !important;
  align-items: start !important;
}
.footer-brand,
.footer-col{
  align-items: center !important;
  justify-content: center !important;
}
.footer-col a,
.footer-col p,
.footer-col span{
  text-align: center !important;
}
.footer-cta,
.footer-links,
.footer-contact{
  align-items: center !important;
  justify-content: center !important;
}

.hb-card-focus-pulse{
  animation: hbCardFocusPulse 1.1s ease both;
}
@keyframes hbCardFocusPulse{
  0%{ box-shadow: 0 18px 45px rgba(0,0,0,.12), 0 0 0 0 rgba(37,211,102,.0); }
  35%{ box-shadow: 0 22px 58px rgba(0,0,0,.18), 0 0 0 5px rgba(37,211,102,.22); }
  100%{ box-shadow: 0 18px 45px rgba(0,0,0,.12), 0 0 0 0 rgba(37,211,102,.0); }
}


/* =========================================================
   HABIBI FINAL PATCH 2026-05-25 - panier, badges, retour, listes 1-10
   ========================================================= */
.cart-action-row{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:10px !important;
}
.cart-action-row > button{
  width:auto !important;
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:48px !important;
  padding:12px 10px !important;
  font-size:13px !important;
  line-height:1.15 !important;
  white-space:normal !important;
}
.cart-action-row > button i,
.cart-action-row > button .hb-loader{flex:0 0 auto !important;}

.cart-btn{
  transform:scale(1.06) !important;
  transform-origin:center !important;
  padding:9px 13px !important;
  font-size:14px !important;
  min-height:42px !important;
}
.trust-badge{
  transform:scale(1.07) !important;
  transform-origin:center !important;
  min-width:92px !important;
  min-height:30px !important;
  font-size:8.4px !important;
  padding-top:5px !important;
  padding-bottom:5px !important;
}
.cart-trust-row{gap:9px !important;}
.trust-group{gap:6px !important;}

.car-choice-back{
  background:#000 !important;
  color:#fff !important;
  border:2px solid rgba(255,255,255,.92) !important;
  border-radius:999px !important;
  width:42px !important;
  min-width:42px !important;
  height:42px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 8px 22px rgba(0,0,0,.28) !important;
  font-size:0 !important;
}
.car-choice-back::before{
  content:'←' !important;
  font-size:22px !important;
  line-height:1 !important;
  color:#fff !important;
  font-weight:900 !important;
}
.car-choice-back span{display:none !important;}
.car-choice-back.hidden{display:none !important;}

.hb-qty-select{
  width:100% !important;
  min-height:46px !important;
  padding:10px 12px !important;
  border:1px solid #d9e1db !important;
  border-radius:14px !important;
  background:#fff !important;
  font-weight:800 !important;
  font-size:15px !important;
  color:#111827 !important;
}

@media (max-width:768px){
  .trust-group{gap:3px !important;}
  .trust-badge{
    transform:scale(1.04) !important;
    min-width:73px !important;
    min-height:29px !important;
    font-size:7px !important;
    padding:4px 5px 4px 16px !important;
  }
  .trust-badge::before{width:16px !important;height:16px !important;font-size:9px !important;}
  .cart-btn{
    transform:scale(1.05) !important;
    font-size:11px !important;
    padding:7px 9px !important;
    min-height:38px !important;
  }
  .cart-action-row{gap:7px !important;}
  .cart-action-row > button{
    min-height:44px !important;
    padding:10px 7px !important;
    font-size:11.5px !important;
    border-radius:13px !important;
  }
  .verify-availability-btn.verify-refused{font-size:10.5px !important;}
}
@media (max-width:380px){
  .trust-badge{min-width:68px !important; font-size:6.5px !important; padding-left:15px !important;}
  .cart-btn{font-size:10px !important; padding:6px 7px !important;}
  .cart-action-row > button{font-size:10.5px !important; padding-inline:5px !important;}
}

/* =========================================================
   HABIBI FINAL PATCH 2026-05-25 - badges slim + barre panier compacte
   ========================================================= */
.navbar{
  padding-top:8px !important;
  padding-bottom:7px !important;
  min-height:auto !important;
}
.cart-area{
  transform:translateY(-3px) !important;
  gap:0 !important;
}
.cart-trust-row{
  align-items:center !important;
  gap:8px !important;
  line-height:1 !important;
}
.trust-badge{
  min-width:92px !important;
  min-height:22px !important;
  height:22px !important;
  padding-top:1px !important;
  padding-bottom:1px !important;
  font-size:9.2px !important;
  line-height:1 !important;
  font-weight:600 !important;
  transform:scale(1.03) !important;
}
.trust-badge::before{
  width:15px !important;
  height:15px !important;
  font-size:8.5px !important;
}
.cart-btn{
  min-height:34px !important;
  padding:6px 12px !important;
  font-size:13px !important;
  line-height:1 !important;
  transform:translateY(-1px) scale(1.05) !important;
}
.payment-info{
  margin-top:0 !important;
  transform:translateY(-2px) !important;
  font-size:9.5px !important;
  line-height:1.05 !important;
}
@media (max-width:768px){
  .navbar{
    padding-top:6px !important;
    padding-bottom:5px !important;
  }
  .cart-area{
    transform:translateY(-4px) !important;
  }
  .cart-trust-row{
    gap:5px !important;
    padding-inline:2px !important;
  }
  .trust-group{
    gap:2px !important;
  }
  .trust-badge{
    min-width:75px !important;
    min-height:20px !important;
    height:20px !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    font-size:7.8px !important;
    line-height:1 !important;
    font-weight:650 !important;
    transform:scale(1.02) !important;
  }
  .trust-left .trust-badge{
    padding-left:15px !important;
    padding-right:5px !important;
  }
  .trust-right .trust-badge{
    padding-left:5px !important;
    padding-right:15px !important;
  }
  .trust-badge::before{
    width:14px !important;
    height:14px !important;
    font-size:8px !important;
  }
  .cart-btn{
    min-height:32px !important;
    padding:5px 8px !important;
    font-size:10.8px !important;
    transform:translateY(-2px) scale(1.04) !important;
  }
  .payment-info{
    margin-top:-1px !important;
    transform:translateY(-4px) !important;
    font-size:8.2px !important;
    line-height:1.05 !important;
    max-width:96vw !important;
  }
}
@media (max-width:380px){
  .cart-trust-row{gap:3px !important;}
  .trust-badge{
    min-width:70px !important;
    font-size:7.2px !important;
  }
  .cart-btn{
    font-size:10px !important;
    padding-left:6px !important;
    padding-right:6px !important;
  }
  .payment-info{font-size:7.7px !important;}
}

/* =========================================================
   HABIBI FINAL PATCH 2026-05-25 - icônes badges à la taille du badge + texte paiement légèrement plus bas
   ========================================================= */
.trust-badge{
  overflow:visible !important;
}
.trust-badge::before{
  width:22px !important;
  height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  font-size:12px !important;
  line-height:1 !important;
}
.trust-left .trust-badge{
  padding-left:22px !important;
  padding-right:8px !important;
}
.trust-left .trust-badge::before{
  left:-1px !important;
  right:auto !important;
}
.trust-right .trust-badge{
  padding-left:8px !important;
  padding-right:22px !important;
}
.trust-right .trust-badge::before{
  left:auto !important;
  right:-1px !important;
}
.payment-info{
  margin-top:3px !important;
  transform:translateY(1px) !important;
}
@media (max-width:768px){
  .trust-badge::before{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    font-size:11px !important;
  }
  .trust-left .trust-badge{
    padding-left:20px !important;
    padding-right:5px !important;
  }
  .trust-left .trust-badge::before{
    left:0 !important;
  }
  .trust-right .trust-badge{
    padding-left:5px !important;
    padding-right:20px !important;
  }
  .trust-right .trust-badge::before{
    right:0 !important;
  }
  .payment-info{
    margin-top:2px !important;
    transform:translateY(0) !important;
  }
}
@media (max-width:380px){
  .trust-badge::before{
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    min-height:19px !important;
    font-size:10px !important;
  }
  .trust-left .trust-badge{padding-left:19px !important;}
  .trust-right .trust-badge{padding-right:19px !important;}
  .payment-info{transform:translateY(1px) !important;}
}


/* =========================================================
   HABIBI PATCH - logos moyens de paiement dans la ligne d'acceptation
   ========================================================= */
.payment-accept-line{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  gap:3px !important;
  margin-top:5px !important;
  transform:translateY(2px) !important;
}
.pay-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:2px !important;
  white-space:nowrap !important;
}
.pay-logo{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:1em !important;
  min-width:1em !important;
  font-size:1em !important;
  line-height:1 !important;
  vertical-align:-0.08em !important;
  flex:0 0 auto !important;
}
.pay-logo-cash{
  width:auto !important;
  min-width:2.15em !important;
  padding:0 .18em !important;
  border:1px solid currentColor !important;
  border-radius:.2em !important;
  font-size:.82em !important;
  font-weight:800 !important;
  letter-spacing:-.03em !important;
}
.pay-logo-apple{
  font-size:1.12em !important;
  font-weight:700 !important;
  transform:translateY(-.03em) !important;
}
.pay-logo-google{
  width:1em !important;
  border-radius:50% !important;
  border:1px solid currentColor !important;
  font-weight:800 !important;
  font-size:.9em !important;
}
.pay-logo-binance{
  font-size:.95em !important;
  transform:rotate(45deg) scale(.9) !important;
}
.pay-logo-binance + span{
  margin-left:1px !important;
}
@media (max-width:768px){
  .payment-accept-line{
    gap:2px !important;
    margin-top:4px !important;
    transform:translateY(1px) !important;
  }
  .pay-item{gap:1.5px !important;}
  .pay-logo-cash{min-width:2.05em !important;}
}
@media (max-width:380px){
  .payment-accept-line{font-size:7.7px !important; gap:1.5px !important;}
  .pay-logo-cash{min-width:1.95em !important; padding-inline:.12em !important;}
}

/* =========================================================
   HABIBI PATCH - vrais logos paiement SVG, compatibles navigateurs
   ========================================================= */
.payment-accept-line{
  margin-top:7px !important;
  transform:translateY(3px) !important;
}
.pay-logo{
  height:1em !important;
  min-width:auto !important;
  width:auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
.pay-logo svg{
  display:block !important;
  height:1em !important;
  width:auto !important;
}
.pay-logo-cash svg{height:1.05em !important;}
.pay-logo-apple svg{height:1.12em !important;}
.pay-logo-google svg{height:1.08em !important;}
.pay-logo-binance svg{height:1.08em !important;}
.pay-logo-apple,
.pay-logo-google,
.pay-logo-binance{
  transform:none !important;
  font-size:1em !important;
}
.pay-logo-cash{
  font-size:1em !important;
  letter-spacing:0 !important;
}
@media (max-width:768px){
  .payment-accept-line{margin-top:6px !important; transform:translateY(3px) !important;}
}
@media (max-width:380px){
  .payment-accept-line{font-size:7.8px !important; margin-top:6px !important; transform:translateY(3px) !important;}
}


/* =========================================================
   HABIBI PATCH - ligne paiement sans espaces entre texte/logos
   Format: On accepte : [cash logo] Cash, Apple [Apple Pay], Google [Google Pay], Binance [Binance Pay]
   ========================================================= */
.payment-accept-line{
  column-gap:2px !important;
  row-gap:1px !important;
  word-spacing:0 !important;
}
.payment-accept-line > span{margin:0 !important;}
.payment-accept-line .pay-item{
  gap:1px !important;
  margin:0 !important;
  padding:0 !important;
}
.payment-accept-line .pay-sep{
  margin-left:0 !important;
  margin-right:2px !important;
}
.payment-accept-line .pay-logo{
  margin:0 !important;
  padding:0 !important;
  flex:0 0 auto !important;
}
.payment-accept-line .pay-cash .pay-logo{margin-right:1px !important;}
.payment-accept-line .pay-apple .pay-logo,
.payment-accept-line .pay-google .pay-logo,
.payment-accept-line .pay-binance .pay-logo{margin-left:1px !important;}
@media (max-width:380px){
  .payment-accept-line{column-gap:1.5px !important;}
  .payment-accept-line .pay-sep{margin-right:1.5px !important;}
}


/* HABIBI 2026-05-27 : cartes indisponibles (Night Life, Par Trajet, Par Heure) */
.hb-coming-soon-card{
  position:relative !important;
  overflow:hidden !important;
  cursor:not-allowed !important;
}
.hb-coming-soon-card img,
.hb-coming-soon-card .product-collage img,
.hb-coming-soon-card .chauffeur-single-image{
  filter:grayscale(100%) contrast(1.02) brightness(.82) !important;
}
.hb-coming-soon-card .product-collage,
.hb-coming-soon-card .chauffeur-single-image{
  opacity:.92 !important;
}
.hb-coming-soon-ribbon{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:85% !important;
  transform:translate(-50%,-50%) rotate(-12deg) !important;
  z-index:20 !important;
  padding:9px 12px !important;
  text-align:center !important;
  background:linear-gradient(135deg,#00b050,#16d36d) !important;
  color:#fff !important;
  font-weight:900 !important;
  font-size:14px !important;
  letter-spacing:.2px !important;
  text-transform:uppercase !important;
  box-shadow:0 10px 22px rgba(0,0,0,.22) !important;
  border:1px solid rgba(255,255,255,.45) !important;
  pointer-events:none !important;
}
.hb-disabled-product,
.hb-disabled-product:hover,
.hb-disabled-product:focus{
  opacity:.72 !important;
  background:#9aa0a6 !important;
  color:#fff !important;
  cursor:not-allowed !important;
  transform:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
.hb-coming-soon-card:hover{
  transform:none !important;
}
@media (max-width:600px){
  .hb-coming-soon-ribbon{
    top:50% !important;
    left:50% !important;
    width:88% !important;
    font-size:13px !important;
    padding:8px 10px !important;
  }
}

/* HABIBI - Accès commande depuis le panier */
.cart-order-access{margin:12px 0 4px;display:flex;justify-content:center}.order-access-btn{border:1px solid rgba(22,163,74,.28);background:rgba(22,163,74,.08);color:#0f7a38;border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:.2s}.order-access-btn:hover{transform:translateY(-1px);background:rgba(22,163,74,.14)}.order-access-content{max-width:720px}.order-access-result{margin-top:16px}.order-access-status{border-radius:18px;padding:14px 16px;display:grid;gap:5px;border:1px solid rgba(0,0,0,.08);background:#f8fafc}.order-access-status.confirmed{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.25);color:#116b34}.order-access-status.pending{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.25);color:#7c4a03}.order-access-status.refused{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.25);color:#991b1b}.order-access-items{margin-top:12px;display:grid;gap:10px}.order-access-item{border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px;background:#fff;display:grid;gap:4px}.order-access-item span,.order-access-item small{color:#475569}.order-access-pay{margin-top:14px;width:100%;justify-content:center;text-decoration:none}.order-access-popup .booking-row{align-items:flex-start}@media(max-width:640px){.order-access-btn{width:100%;justify-content:center;font-size:13px;padding:11px 12px}.order-access-content{width:94%;max-height:86vh;overflow:auto}.order-access-popup .booking-row{grid-template-columns:1fr}.order-access-status,.order-access-item{font-size:13px}}

.cart-header-order-btn{font-size:13px;padding:8px 12px;white-space:nowrap}.cart-header-order-btn i{font-size:14px}


/* =========================================================
   HABIBI CART PRO iPHONE STYLE - 2026-05-27
   Panier plus simple, moderne, utilitaire et orienté mobile.
   ========================================================= */
#cart-popup.cart-popup-ios{
  backdrop-filter:blur(16px) !important;
  -webkit-backdrop-filter:blur(16px) !important;
  background:rgba(15,23,42,.50) !important;
  overflow:auto !important;
  padding:18px 10px !important;
}
#cart-popup .cart-ios-content{
  width:min(94vw,560px) !important;
  max-height:92vh !important;
  overflow:auto !important;
  border:1px solid rgba(255,255,255,.70) !important;
  border-radius:34px !important;
  padding:14px 14px 16px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,250,252,.94)) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.30) !important;
  color:#0f172a !important;
  text-align:left !important;
}
.cart-ios-content::-webkit-scrollbar{width:0;height:0;}
.cart-ios-handle{width:46px;height:5px;border-radius:999px;background:#cbd5e1;margin:0 auto 12px;}
.cart-ios-close{
  position:absolute !important;top:14px !important;right:16px !important;width:34px !important;height:34px !important;
  border:0 !important;border-radius:50% !important;background:#eef2f7 !important;color:#334155 !important;font-size:24px !important;line-height:1 !important;cursor:pointer !important;z-index:3 !important;
}
.cart-ios-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 38px 12px 0;}
.cart-ios-order-btn,.cart-ios-trash{
  position:static !important;transform:none !important;display:inline-flex !important;align-items:center !important;gap:7px !important;
  border:1px solid rgba(15,23,42,.08) !important;border-radius:999px !important;padding:9px 12px !important;
  font-size:12px !important;font-weight:900 !important;background:#fff !important;color:#0f172a !important;box-shadow:0 8px 22px rgba(15,23,42,.06) !important;
}
.cart-ios-trash{color:#e11d48 !important;background:#fff5f7 !important;}
.cart-ios-hero{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border-radius:26px;background:linear-gradient(135deg,#0f172a,#1f2937 55%,#111827);color:#fff;box-shadow:0 16px 34px rgba(15,23,42,.22);}
.cart-ios-kicker{margin:0 0 5px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#86efac;}
.cart-ios-hero h2{margin:0 !important;font-size:26px !important;line-height:1.05 !important;color:#fff !important;text-align:left !important;}
.cart-ios-subtitle{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.82);}
.cart-ios-badge{width:52px;height:52px;min-width:52px;border-radius:18px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);}
.cart-ios-items{display:flex;flex-direction:column;gap:10px;margin:14px 0 0;}
.cart-ios-empty{padding:22px 16px;border-radius:24px;background:#fff;border:1px dashed #cbd5e1;text-align:center;box-shadow:0 8px 24px rgba(15,23,42,.05);}
.cart-ios-empty i{width:52px;height:52px;border-radius:18px;background:#f1f5f9;display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:#64748b;margin-bottom:10px;}
.cart-ios-empty strong{display:block;font-size:17px;margin-bottom:5px;color:#0f172a;}.cart-ios-empty p{margin:0;font-size:13px;color:#64748b;line-height:1.45;}
.cart-ios-card{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:13px;border-radius:24px;background:#fff;border:1px solid rgba(15,23,42,.07);box-shadow:0 10px 28px rgba(15,23,42,.07);}
.cart-ios-index{width:34px;height:34px;border-radius:13px;background:#ecfdf3;color:#128C43;display:flex;align-items:center;justify-content:center;font-weight:950;font-size:13px;}
.cart-ios-main{min-width:0;}.cart-ios-title{font-size:15px;font-weight:950;color:#0f172a;line-height:1.2;margin:0 0 8px;}
.cart-ios-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}.cart-ios-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:#f8fafc;color:#475569;font-size:11.5px;font-weight:800;line-height:1;}
.cart-ios-options{font-size:12px;line-height:1.45;color:#475569;background:#f8fafc;border-radius:14px;padding:8px 10px;margin-top:7px;}
.cart-ios-price{text-align:right;white-space:nowrap;}.cart-ios-price small{display:block;color:#64748b;font-size:10px;font-weight:800;margin-bottom:4px;}.cart-ios-price strong{font-size:14px;color:#111827;}
.cart-ios-remove{grid-column:3;justify-self:end;margin-top:8px;border:0;border-radius:999px;background:#fff1f2;color:#e11d48;padding:7px 9px;font-weight:950;font-size:11px;cursor:pointer;}
.cart-ios-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 0;}
.cart-ios-summary-card{border-radius:22px;padding:13px;background:#fff;border:1px solid rgba(15,23,42,.07);box-shadow:0 9px 24px rgba(15,23,42,.05);}
.cart-ios-summary-card span{display:block;font-size:11px;font-weight:900;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;}.cart-ios-summary-card strong{font-size:18px;color:#0f172a;}
.cart-ios-trust{grid-column:1/-1;border-radius:22px;padding:12px 13px;background:#ecfdf3;color:#14532d;border:1px solid rgba(34,197,94,.22);font-size:12.5px;line-height:1.45;font-weight:800;}
.cart-ios-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(248,250,252,.20),rgba(248,250,252,.96) 20%,rgba(248,250,252,.98));padding:12px 0 2px;margin-top:8px !important;z-index:2;}
.cart-ios-actions > button{border-radius:18px !important;min-height:52px !important;font-size:13px !important;box-shadow:0 12px 28px rgba(15,23,42,.10) !important;}
.cart-ios-note{margin:8px 4px 0 !important;text-align:center !important;font-size:12px !important;color:#64748b !important;line-height:1.4 !important;}
body.hb-rtl #cart-popup .cart-ios-content{text-align:right !important;direction:rtl;}body.hb-rtl .cart-ios-hero h2{text-align:right !important;}body.hb-rtl .cart-ios-price{text-align:left;}
@media(max-width:640px){
  #cart-popup.cart-popup-ios{padding:0 !important;display:none;align-items:flex-end;}
  #cart-popup.cart-popup-ios[style*="block"]{display:flex !important;}
  #cart-popup .cart-ios-content{width:100vw !important;max-height:92vh !important;border-radius:28px 28px 0 0 !important;margin:auto 0 0 !important;padding:10px 12px 14px !important;}
  .cart-ios-topbar{margin-right:38px;margin-bottom:10px;}.cart-ios-order-btn,.cart-ios-trash{font-size:11px !important;padding:8px 10px !important;}.cart-ios-trash span{display:none;}
  .cart-ios-hero{padding:14px;border-radius:24px;}.cart-ios-hero h2{font-size:23px !important;}.cart-ios-subtitle{font-size:12px;}.cart-ios-badge{width:46px;height:46px;min-width:46px;border-radius:16px;}
  .cart-ios-card{grid-template-columns:auto 1fr;gap:10px;padding:12px;border-radius:22px;}.cart-ios-price{grid-column:2;text-align:left;margin-top:-2px;}.cart-ios-remove{grid-column:2;justify-self:start;}
  .cart-ios-summary{grid-template-columns:1fr 1fr;}.cart-ios-summary-card{padding:11px;border-radius:19px;}.cart-ios-summary-card strong{font-size:16px;}
  .cart-ios-actions{gap:8px !important;}.cart-ios-actions > button{min-height:50px !important;font-size:11.5px !important;padding:10px 7px !important;}
}
@media(max-width:380px){.cart-ios-actions > button{font-size:10.6px !important;}.cart-ios-hero h2{font-size:21px !important;}.cart-ios-title{font-size:14px;}}


/* =========================================================
   HABIBI PANIER ULTRA PRO V2 - chaque pixel utile, iPhone style
   ========================================================= */
body.hb-cart-open{overflow:hidden;}
#cart-popup.cart-popup-ios{background:rgba(2,6,23,.54)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;padding:16px!important;}
#cart-popup .cart-ios-content{width:min(96vw,640px)!important;max-height:calc(100vh - 32px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:36px!important;padding:0!important;background:#f6f7fb!important;border:1px solid rgba(255,255,255,.85)!important;box-shadow:0 34px 100px rgba(0,0,0,.34)!important;}
.cart-ios-content::-webkit-scrollbar{display:none!important}.cart-ios-handle{margin:10px auto 8px!important;background:#cbd5e1!important;flex:none;}
.cart-ios-close{top:14px!important;right:14px!important;width:36px!important;height:36px!important;background:rgba(255,255,255,.85)!important;color:#0f172a!important;box-shadow:0 8px 20px rgba(15,23,42,.12)!important;}
.cart-ios-topbar{order:2;margin:0!important;padding:10px 14px 0!important;display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;flex:none;}
.cart-ios-order-btn,.cart-ios-trash{height:40px!important;border-radius:16px!important;justify-content:center!important;background:#fff!important;border:1px solid rgba(15,23,42,.08)!important;box-shadow:0 6px 16px rgba(15,23,42,.05)!important;}
.cart-ios-trash{min-width:86px!important;color:#e11d48!important;background:#fff1f2!important;}
.cart-ios-hero{order:1;margin:0!important;padding:22px 58px 20px 20px!important;border-radius:0 0 30px 30px!important;background:linear-gradient(145deg,#0f172a,#111827 58%,#064e3b)!important;box-shadow:none!important;flex:none;}
.cart-ios-kicker{color:#86efac!important}.cart-ios-hero h2{font-size:28px!important;letter-spacing:-.7px!important}.cart-ios-subtitle{max-width:430px!important;color:rgba(255,255,255,.78)!important}.cart-ios-badge{display:none!important;}
.cart-ios-items{order:3;flex:1!important;overflow:auto!important;margin:0!important;padding:12px 14px 8px!important;gap:10px!important;scrollbar-width:none;}.cart-ios-items::-webkit-scrollbar{display:none;}
.cart-pro-card{display:grid;grid-template-columns:44px 1fr;gap:10px;padding:12px;border-radius:24px;background:#fff;border:1px solid rgba(15,23,42,.07);box-shadow:0 10px 28px rgba(15,23,42,.06);}
.cart-pro-icon{width:44px;height:44px;border-radius:17px;background:#ecfdf3;color:#128c43;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:inset 0 0 0 1px rgba(18,140,67,.10);}
.cart-pro-body{min-width:0}.cart-pro-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.cart-pro-title-row h3{margin:0!important;font-size:15px!important;line-height:1.22;color:#0f172a;font-weight:950;}.cart-pro-title-row strong{white-space:nowrap;font-size:14px;color:#0f172a;}
.cart-pro-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.cart-pro-chips span{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:#f8fafc;color:#475569;font-size:11px;font-weight:850;line-height:1;}
.cart-pro-details{margin-top:8px;border-radius:16px;background:#f8fafc;border:1px solid rgba(15,23,42,.06);overflow:hidden}.cart-pro-details summary{cursor:pointer;padding:9px 10px;font-size:12px;font-weight:950;color:#334155;list-style:none}.cart-pro-details summary::-webkit-details-marker{display:none}.cart-pro-details summary:after{content:'+';float:right}.cart-pro-details[open] summary:after{content:'–'}.cart-pro-details div{padding:0 10px 9px;font-size:12px;color:#475569;line-height:1.45}.cart-pro-details div div{padding:3px 0!important;}
.cart-pro-row-actions{display:flex;justify-content:flex-end;margin-top:8px}.cart-pro-row-actions button{border:0;border-radius:999px;background:#fff1f2;color:#e11d48;padding:7px 10px;font-size:11px;font-weight:950;cursor:pointer;}
.cart-ios-summary{order:4;margin:0!important;padding:8px 14px 0!important;display:block!important;flex:none;}.cart-pro-total{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:8px}.cart-pro-total>div{background:#fff;border:1px solid rgba(15,23,42,.07);border-radius:20px;padding:11px;box-shadow:0 8px 20px rgba(15,23,42,.04)}.cart-pro-total span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.055em;font-weight:950;color:#64748b;margin-bottom:5px}.cart-pro-total strong{font-size:17px;color:#0f172a;}.cart-pro-next{display:flex;gap:9px;align-items:flex-start;margin-top:8px;border-radius:20px;padding:10px 11px;background:#ecfdf3;color:#14532d;border:1px solid rgba(34,197,94,.22)}.cart-pro-next i{font-size:18px;margin-top:2px}.cart-pro-next p{margin:0!important;font-size:12px!important;line-height:1.35!important;font-weight:750;}
.cart-ios-actions{order:5;position:static!important;margin:0!important;padding:10px 14px 8px!important;background:linear-gradient(180deg,rgba(246,247,251,.35),#f6f7fb 35%)!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;flex:none;}.cart-ios-actions>button{border-radius:18px!important;min-height:54px!important;font-size:12.5px!important;font-weight:950!important;line-height:1.18!important;padding:10px!important;}.cart-ios-note{order:6;margin:0!important;padding:0 18px 14px!important;font-size:11.5px!important;color:#64748b!important;line-height:1.35!important;flex:none;}
.cart-pro-empty{margin:6px 0;padding:26px 16px;border-radius:26px;background:#fff;border:1px dashed #cbd5e1;text-align:center}.cart-pro-empty div{width:60px;height:60px;border-radius:22px;background:#f1f5f9;color:#64748b;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px}.cart-pro-empty h3{margin:0 0 6px!important;font-size:18px;color:#0f172a}.cart-pro-empty p{margin:0 auto 14px!important;max-width:330px;color:#64748b;font-size:13px;line-height:1.45}.cart-pro-empty button{border:0;border-radius:999px;background:#111827;color:#fff;font-weight:950;padding:12px 16px;}
@media(max-width:640px){#cart-popup.cart-popup-ios{padding:0!important;align-items:flex-end!important}#cart-popup .cart-ios-content{width:100vw!important;max-height:94vh!important;border-radius:30px 30px 0 0!important}.cart-ios-hero{padding:20px 56px 18px 16px!important}.cart-ios-hero h2{font-size:25px!important}.cart-ios-subtitle{font-size:12px!important}.cart-ios-topbar{padding:9px 12px 0!important}.cart-ios-items{padding:10px 12px 6px!important}.cart-pro-card{grid-template-columns:40px 1fr;border-radius:22px;padding:11px}.cart-pro-icon{width:40px;height:40px;border-radius:15px}.cart-pro-title-row{display:block}.cart-pro-title-row strong{display:block;margin-top:5px}.cart-ios-summary{padding:7px 12px 0!important}.cart-pro-total{grid-template-columns:1fr 1fr 1fr;gap:6px}.cart-pro-total>div{border-radius:17px;padding:9px 8px}.cart-pro-total span{font-size:9px}.cart-pro-total strong{font-size:14px}.cart-ios-actions{padding:9px 12px 7px!important}.cart-ios-actions>button{min-height:52px!important;font-size:11px!important}.cart-ios-note{padding:0 14px 12px!important}.cart-ios-trash span{display:inline!important}}
@media(max-width:370px){.cart-ios-actions{grid-template-columns:1fr!important}.cart-pro-total{grid-template-columns:1fr 1fr}.cart-pro-total>div:first-child{grid-column:1/-1}.cart-ios-hero h2{font-size:22px!important}.cart-ios-order-btn,.cart-ios-trash{font-size:10.5px!important;padding:7px!important}}

/* =========================================================
   HABIBI CART FINAL PIXEL-PERFECT - 27/05/2026
   Header propre : Vider gauche, Mon panier centre, Votre commande + Fermer droite
   ========================================================= */
body.hb-cart-open{overflow:hidden!important;}
#cart-popup.cart-popup-ios{position:fixed!important;inset:0!important;display:none;background:rgba(2,6,23,.58)!important;backdrop-filter:blur(12px);z-index:99999!important;padding:18px!important;align-items:center!important;justify-content:center!important;}
#cart-popup .cart-ios-content{width:min(96vw,620px)!important;height:auto!important;max-height:calc(100vh - 36px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border-radius:32px!important;padding:0!important;background:#f7f8fb!important;border:1px solid rgba(255,255,255,.72)!important;box-shadow:0 30px 90px rgba(2,6,23,.35)!important;}
.cart-ios-handle{width:44px!important;height:5px!important;border-radius:999px!important;background:#d1d5db!important;margin:9px auto 5px!important;flex:none!important;}
.cart-ios-header{position:relative!important;display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:center!important;gap:8px!important;padding:8px 14px 12px!important;background:#f7f8fb!important;border-bottom:1px solid rgba(15,23,42,.07)!important;flex:none!important;}
.cart-ios-header h2{margin:0!important;text-align:center!important;font-size:18px!important;line-height:1.1!important;font-weight:950!important;letter-spacing:-.35px!important;color:#0f172a!important;white-space:nowrap!important;}
.cart-ios-header-right{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;min-width:0!important;}
.cart-ios-close{position:static!important;width:34px!important;height:34px!important;min-width:34px!important;border:0!important;border-radius:50%!important;background:#fff!important;color:#0f172a!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;font-size:23px!important;font-weight:700!important;line-height:1!important;box-shadow:0 5px 15px rgba(15,23,42,.09)!important;cursor:pointer!important;}
.cart-ios-order-btn,.cart-ios-trash{height:34px!important;min-height:34px!important;border-radius:999px!important;padding:0 10px!important;font-size:11px!important;font-weight:900!important;line-height:1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;border:1px solid rgba(15,23,42,.08)!important;box-shadow:0 5px 15px rgba(15,23,42,.06)!important;white-space:nowrap!important;}
.cart-ios-trash{background:#fff1f2!important;color:#e11d48!important;min-width:74px!important;}
.cart-ios-order-btn{background:#fff!important;color:#0f172a!important;min-width:118px!important;}
.cart-ios-order-btn i,.cart-ios-trash i{font-size:11px!important;}
.cart-ios-hero,.cart-ios-kicker,.cart-ios-subtitle,.cart-ios-badge,.cart-ios-topbar{display:none!important;}
.cart-ios-items{order:2!important;flex:1 1 auto!important;overflow:auto!important;margin:0!important;padding:12px 14px 8px!important;gap:9px!important;scrollbar-width:none!important;background:#f7f8fb!important;}
.cart-pro-card{display:grid!important;grid-template-columns:42px 1fr!important;gap:10px!important;padding:11px!important;border-radius:22px!important;background:#fff!important;border:1px solid rgba(15,23,42,.065)!important;box-shadow:0 8px 22px rgba(15,23,42,.055)!important;}
.cart-pro-icon{width:42px!important;height:42px!important;border-radius:15px!important;background:linear-gradient(135deg,#ecfdf3,#dcfce7)!important;color:#128C43!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:16px!important;}
.cart-pro-title-row{display:grid!important;grid-template-columns:1fr auto!important;gap:8px!important;align-items:start!important;}
.cart-pro-title-row h3{margin:0!important;font-size:14px!important;line-height:1.22!important;font-weight:950!important;color:#0f172a!important;letter-spacing:-.15px!important;}
.cart-pro-title-row strong{font-size:13px!important;line-height:1.2!important;color:#0f172a!important;white-space:nowrap!important;text-align:right!important;}
.cart-pro-chips{display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin-top:7px!important;}
.cart-pro-chips span{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:5px 7px!important;border-radius:999px!important;background:#f8fafc!important;color:#475569!important;font-size:10.6px!important;font-weight:800!important;line-height:1!important;}
.cart-pro-details{margin-top:7px!important;border-radius:13px!important;background:#f8fafc!important;border:1px solid rgba(15,23,42,.06)!important;overflow:hidden!important;}
.cart-pro-details summary{padding:7px 9px!important;cursor:pointer!important;font-size:11px!important;font-weight:900!important;color:#334155!important;list-style:none!important;}
.cart-pro-details summary::-webkit-details-marker{display:none!important;}
.cart-pro-details div{padding:0 9px 8px!important;font-size:11.2px!important;line-height:1.42!important;color:#475569!important;}
.cart-pro-row-actions{display:flex!important;justify-content:flex-end!important;margin-top:7px!important;}
.cart-pro-row-actions button{height:30px!important;border:0!important;border-radius:999px!important;background:#fff1f2!important;color:#e11d48!important;padding:0 9px!important;font-size:10.8px!important;font-weight:900!important;cursor:pointer!important;}
.cart-ios-summary{order:3!important;flex:none!important;margin:0!important;padding:8px 14px 0!important;background:#f7f8fb!important;}
.cart-pro-total{display:grid!important;grid-template-columns:1.25fr .75fr!important;gap:8px!important;}
.cart-pro-total>div{background:#fff!important;border:1px solid rgba(15,23,42,.07)!important;border-radius:18px!important;padding:10px!important;box-shadow:0 6px 18px rgba(15,23,42,.045)!important;}
.cart-pro-total span{display:block!important;font-size:9.5px!important;text-transform:uppercase!important;letter-spacing:.05em!important;font-weight:950!important;color:#64748b!important;margin-bottom:4px!important;}
.cart-pro-total strong{font-size:16px!important;color:#0f172a!important;line-height:1.1!important;}
.cart-pro-next{display:flex!important;align-items:center!important;gap:7px!important;margin-top:8px!important;border-radius:16px!important;padding:8px 10px!important;background:#ecfdf3!important;color:#14532d!important;border:1px solid rgba(34,197,94,.20)!important;}
.cart-pro-next i{font-size:15px!important;flex:none!important;}.cart-pro-next p{margin:0!important;font-size:11px!important;line-height:1.28!important;font-weight:800!important;}
.cart-ios-actions{order:4!important;position:static!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin:0!important;padding:9px 14px 8px!important;background:#f7f8fb!important;flex:none!important;}
.cart-ios-actions>button{width:100%!important;min-height:44px!important;border-radius:15px!important;padding:8px 9px!important;font-size:11.5px!important;font-weight:950!important;line-height:1.15!important;box-shadow:0 8px 20px rgba(15,23,42,.09)!important;}
.cart-ios-actions>button i{font-size:12px!important;margin-right:4px!important;}
.cart-ios-note{order:5!important;margin:0!important;padding:0 16px 12px!important;text-align:center!important;font-size:10.8px!important;line-height:1.25!important;color:#64748b!important;background:#f7f8fb!important;flex:none!important;}
.cart-pro-empty{margin:auto!important;padding:20px 14px!important;text-align:center!important;border-radius:24px!important;background:#fff!important;border:1px dashed #cbd5e1!important;box-shadow:0 8px 22px rgba(15,23,42,.05)!important;}.cart-pro-empty i{width:48px;height:48px;border-radius:17px;background:#f1f5f9;display:inline-flex;align-items:center;justify-content:center;color:#64748b;font-size:20px}.cart-pro-empty h3{margin:10px 0 5px!important;font-size:16px!important}.cart-pro-empty p{margin:0 auto 12px!important;max-width:300px;font-size:12px!important;color:#64748b!important;line-height:1.4!important}.cart-pro-empty button{border:0;border-radius:999px;background:#128C43;color:#fff;padding:10px 14px;font-weight:900;font-size:12px;}
body.hb-rtl .cart-ios-header{direction:ltr!important;}body.hb-rtl .cart-ios-header h2{direction:rtl!important;}body.hb-rtl .cart-pro-card,body.hb-rtl .cart-pro-title-row,body.hb-rtl .cart-pro-chips,body.hb-rtl .cart-pro-details,body.hb-rtl .cart-pro-total,body.hb-rtl .cart-pro-next{direction:rtl!important;text-align:right!important;}body.hb-rtl .cart-pro-title-row strong{text-align:left!important;}
@media(max-width:640px){
  #cart-popup.cart-popup-ios{padding:0!important;align-items:flex-end!important;justify-content:center!important;}
  #cart-popup .cart-ios-content{width:100vw!important;max-height:94vh!important;border-radius:28px 28px 0 0!important;box-shadow:0 -18px 60px rgba(2,6,23,.26)!important;}
  .cart-ios-header{padding:7px 10px 10px!important;gap:6px!important;grid-template-columns:70px 1fr auto!important;}
  .cart-ios-header h2{font-size:17px!important;}
  .cart-ios-close{width:32px!important;height:32px!important;min-width:32px!important;font-size:22px!important;}
  .cart-ios-order-btn{min-width:auto!important;width:36px!important;padding:0!important;}
  .cart-ios-trash{min-width:68px!important;padding:0 8px!important;font-size:10.5px!important;}
  .cart-ios-items{padding:10px 10px 7px!important;gap:8px!important;}
  .cart-pro-card{grid-template-columns:38px 1fr!important;gap:9px!important;padding:10px!important;border-radius:20px!important;}
  .cart-pro-icon{width:38px!important;height:38px!important;border-radius:14px!important;font-size:15px!important;}
  .cart-pro-title-row h3{font-size:13.2px!important;}.cart-pro-title-row strong{font-size:12.4px!important;}
  .cart-pro-chips span{font-size:10px!important;padding:5px 6px!important;}
  .cart-ios-summary{padding:7px 10px 0!important;}.cart-pro-total{gap:6px!important;}.cart-pro-total>div{border-radius:16px!important;padding:9px 8px!important;}.cart-pro-total strong{font-size:14.5px!important;}
  .cart-pro-next{border-radius:15px!important;padding:7px 9px!important;}.cart-pro-next p{font-size:10.5px!important;}
  .cart-ios-actions{padding:8px 10px 7px!important;gap:7px!important;}.cart-ios-actions>button{min-height:43px!important;border-radius:14px!important;font-size:10.8px!important;padding:7px!important;}
  .cart-ios-note{padding:0 12px 10px!important;font-size:10.2px!important;}
}
@media(max-width:370px){
  .cart-ios-header{grid-template-columns:62px 1fr auto!important;}.cart-ios-trash{min-width:34px!important;width:34px!important;padding:0!important;}
  .cart-pro-total{grid-template-columns:1fr 1fr!important;}
}

/* =========================================================
   HABIBI PATCH FINAL - Panier mobile propre, compact et iPhone
   Objectif : conserver le panier PC, corriger uniquement téléphone.
   ========================================================= */
@media (max-width: 640px){
  body.hb-cart-open{overflow:hidden!important;}

  #cart-popup.cart-popup-ios{
    position:fixed!important;
    inset:0!important;
    display:none;
    padding:0!important;
    overflow:hidden!important;
    background:rgba(2,6,23,.42)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
  }
  #cart-popup.cart-popup-ios[style*="block"]{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:center!important;
  }

  #cart-popup .cart-ios-content{
    width:100vw!important;
    height:auto!important;
    max-height:94dvh!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:26px 26px 0 0!important;
    background:#f7f8fb!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    box-shadow:0 -20px 70px rgba(2,6,23,.30)!important;
  }

  .cart-ios-handle{
    flex:none!important;
    width:42px!important;
    height:5px!important;
    margin:9px auto 5px!important;
    border-radius:999px!important;
    background:#cbd5e1!important;
  }

  .cart-ios-header{
    position:sticky!important;
    top:0!important;
    z-index:10!important;
    display:grid!important;
    grid-template-columns:74px minmax(0,1fr) 78px!important;
    align-items:center!important;
    gap:6px!important;
    width:100%!important;
    padding:6px 10px 10px!important;
    margin:0!important;
    background:#f7f8fb!important;
    border-bottom:1px solid rgba(15,23,42,.07)!important;
  }

  .cart-ios-header h2{
    grid-column:2!important;
    margin:0!important;
    padding:0!important;
    text-align:center!important;
    font-size:17px!important;
    line-height:1!important;
    font-weight:950!important;
    letter-spacing:-.35px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .cart-ios-trash{
    grid-column:1!important;
    width:74px!important;
    min-width:74px!important;
    height:34px!important;
    padding:0 9px!important;
    border-radius:999px!important;
    font-size:10.5px!important;
    gap:5px!important;
    justify-self:start!important;
    box-shadow:none!important;
  }

  .cart-ios-header-right{
    grid-column:3!important;
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:6px!important;
    min-width:78px!important;
  }

  .cart-ios-order-btn{
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    padding:0!important;
    border-radius:50%!important;
    box-shadow:none!important;
  }
  .cart-ios-order-btn span{display:none!important;}
  .cart-ios-order-btn i{font-size:13px!important;margin:0!important;}

  .cart-ios-close{
    position:static!important;
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    border-radius:50%!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:23px!important;
    line-height:1!important;
    box-shadow:none!important;
    background:#fff!important;
  }

  .cart-ios-items{
    flex:1 1 auto!important;
    min-height:150px!important;
    overflow:auto!important;
    padding:10px 10px 7px!important;
    margin:0!important;
    gap:8px!important;
    background:#f7f8fb!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .cart-ios-items::-webkit-scrollbar{display:none!important;}

  .cart-pro-card{
    display:grid!important;
    grid-template-columns:36px minmax(0,1fr)!important;
    gap:9px!important;
    width:100%!important;
    padding:10px!important;
    border-radius:19px!important;
    background:#fff!important;
    border:1px solid rgba(15,23,42,.06)!important;
    box-shadow:0 6px 18px rgba(15,23,42,.045)!important;
  }
  .cart-pro-icon{
    width:36px!important;
    height:36px!important;
    border-radius:13px!important;
    font-size:14px!important;
  }
  .cart-pro-body{min-width:0!important;}
  .cart-pro-title-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:7px!important;
  }
  .cart-pro-title-row h3{
    min-width:0!important;
    margin:0!important;
    font-size:13px!important;
    line-height:1.22!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }
  .cart-pro-title-row strong{
    font-size:12px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
  }
  .cart-pro-chips{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:5px!important;
    margin-top:7px!important;
  }
  .cart-pro-chips span{
    max-width:100%!important;
    padding:5px 6px!important;
    font-size:9.8px!important;
    line-height:1!important;
    border-radius:999px!important;
  }
  .cart-pro-details{margin-top:7px!important;border-radius:12px!important;}
  .cart-pro-details summary{padding:7px 8px!important;font-size:10.8px!important;}
  .cart-pro-details div{padding:0 8px 8px!important;font-size:10.8px!important;line-height:1.35!important;}
  .cart-pro-row-actions{margin-top:7px!important;}
  .cart-pro-row-actions button{
    height:28px!important;
    padding:0 9px!important;
    font-size:10.4px!important;
    border-radius:999px!important;
  }

  .cart-ios-summary{
    flex:none!important;
    padding:7px 10px 0!important;
    margin:0!important;
    background:#f7f8fb!important;
  }
  .cart-pro-total{
    display:grid!important;
    grid-template-columns:1.15fr .85fr!important;
    gap:7px!important;
  }
  .cart-pro-total>div{
    min-width:0!important;
    padding:9px!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  .cart-pro-total>div:nth-child(3){display:none!important;}
  .cart-pro-total span{font-size:9px!important;margin-bottom:4px!important;}
  .cart-pro-total strong{font-size:14px!important;line-height:1.05!important;white-space:nowrap!important;}
  .cart-pro-next{
    margin-top:7px!important;
    padding:7px 9px!important;
    border-radius:14px!important;
  }
  .cart-pro-next p{font-size:10.2px!important;line-height:1.25!important;}
  .cart-pro-next i{font-size:14px!important;}

  .cart-ios-actions{
    flex:none!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
    padding:8px 10px 7px!important;
    margin:0!important;
    background:#f7f8fb!important;
    border-top:1px solid rgba(15,23,42,.06)!important;
  }
  .cart-ios-actions>button{
    width:100%!important;
    min-height:42px!important;
    padding:7px 8px!important;
    border-radius:14px!important;
    font-size:10.8px!important;
    line-height:1.12!important;
    font-weight:950!important;
    box-shadow:none!important;
  }
  .cart-ios-actions>button i{font-size:11.5px!important;margin-right:4px!important;}

  .cart-ios-note{
    flex:none!important;
    margin:0!important;
    padding:0 12px 10px!important;
    background:#f7f8fb!important;
    text-align:center!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
}

@media (max-width: 370px){
  .cart-ios-header{grid-template-columns:38px minmax(0,1fr) 76px!important;}
  .cart-ios-trash{width:34px!important;min-width:34px!important;padding:0!important;}
  .cart-ios-trash span{display:none!important;}
  .cart-ios-header h2{font-size:16px!important;}
  .cart-ios-actions{grid-template-columns:1fr!important;}
  .cart-ios-actions>button{min-height:40px!important;}
}

/* =========================================================
   HABIBI UX TEXT + SPACING CLEANUP - 2026-05-27
   Objectif : textes plus courts, boutons lisibles, marges compactes
   sans changer les positions ni le fonctionnement.
   ========================================================= */
:root{
  --hb-ui-text: clamp(13px, 1.45vw, 15px);
  --hb-ui-small: clamp(11px, 1.15vw, 13px);
  --hb-ui-title: clamp(18px, 3.1vw, 26px);
}
body{ text-rendering:optimizeLegibility; }
button,.btn-whatsapp,.cart-btn,.payment-method,.payment-whatsapp-btn,.cart-trash-btn{
  font-size:var(--hb-ui-text) !important;
  line-height:1.15 !important;
}
.card h3,.popup-content h2,.payment-content h2,.cart-header h2{
  font-size:var(--hb-ui-title) !important;
  line-height:1.12 !important;
  letter-spacing:-.2px !important;
}
.card p,.popup-content p,.payment-intro,.payment-mini-note,.trust-message,.cart-options{
  font-size:var(--hb-ui-small) !important;
  line-height:1.38 !important;
}
.card{ padding-bottom:14px !important; }
.card h3{ margin:10px 12px 5px !important; }
.card p{ margin:0 12px 10px !important; }
.card .btn-whatsapp{ min-height:42px !important; padding:10px 14px !important; }
.popup-content{
  padding:clamp(16px, 3vw, 26px) !important;
  max-width:min(92vw, 640px) !important;
}
.popup-content label{ font-size:var(--hb-ui-small) !important; margin-bottom:8px !important; }
.popup-content input,.popup-content select,.popup-content textarea{
  min-height:42px !important;
  font-size:14px !important;
  border-radius:13px !important;
}
.cart-item{
  padding:12px !important;
  margin-bottom:10px !important;
  border-radius:16px !important;
  font-size:13px !important;
  line-height:1.35 !important;
}
.cart-item-head{ gap:10px !important; margin-bottom:6px !important; }
.cart-item-head strong{ font-size:14px !important; line-height:1.2 !important; }
.cart-item-head button{ padding:7px 10px !important; font-size:11px !important; }
.trust-message{
  margin:10px 0 !important;
  padding:9px 11px !important;
  border-radius:14px !important;
}
.cart-total{ margin-top:9px !important; font-size:14px !important; line-height:1.4 !important; }
.cart-payment-actions{ margin:10px 0 8px !important; padding:10px !important; border-radius:16px !important; }
.btn-pay-main{ min-height:44px !important; padding:11px 15px !important; }
.payment-content{ padding:clamp(14px, 2.6vw, 22px) !important; }
.payment-intro{ margin:4px 0 9px !important; }
.payment-summary-box{ padding:10px 12px !important; margin:10px 0 !important; border-radius:14px !important; }
.payment-methods-grid{ gap:8px !important; margin:10px 0 !important; }
.payment-method{ min-height:82px !important; padding:9px 6px !important; border-radius:14px !important; }
.payment-method span{ font-size:clamp(9px, 1.3vw, 12px) !important; }
.payment-method small{ font-size:clamp(7.5px, 1.05vw, 10px) !important; }
.payment-details{ padding:12px !important; border-radius:14px !important; }
.payment-details p{ margin:5px 0 !important; }
.payment-whatsapp-btn{ min-height:43px !important; padding:10px 14px !important; }
.cart-trust-row{ gap:clamp(3px, .8vw, 8px) !important; }
.trust-badge{
  min-height:22px !important;
  font-size:clamp(6.3px, .9vw, 9px) !important;
  line-height:1 !important;
  letter-spacing:0 !important;
}
.payment-info{ font-size:clamp(8px, 1.05vw, 10px) !important; line-height:1.2 !important; }
@media (max-width:768px){
  .navbar,.menu,.cart-area{ max-width:100vw !important; }
  .cart-trust-row{ width:100% !important; justify-content:center !important; }
  .trust-badge{ min-width:58px !important; max-width:76px !important; overflow:visible !important; }
  .cart-btn{ min-height:34px !important; padding:6px 7px !important; font-size:10px !important; }
  .payment-info{ margin-top:3px !important; max-width:98vw !important; }
  .popup-content{ width:calc(100vw - 18px) !important; margin:9px auto !important; max-height:calc(100dvh - 18px) !important; }
  .cart-header{ margin-bottom:8px !important; }
  .cart-item{ padding:10px !important; font-size:12.5px !important; }
  .cart-item-head strong{ font-size:13.5px !important; }
  .payment-content h2,.cart-header h2{ font-size:18px !important; }
  .payment-methods-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:4px !important; }
  .payment-method{ min-height:68px !important; padding:6px 2px !important; }
  .payment-method i,.payment-method strong{ font-size:17px !important; }
  .payment-method span{ font-size:8.2px !important; }
  .payment-method small{ display:none !important; }
}
@media (max-width:390px){
  .trust-badge{ min-width:52px !important; max-width:66px !important; font-size:5.6px !important; }
  .cart-btn{ font-size:9px !important; padding-inline:5px !important; }
  .payment-info{ font-size:7.5px !important; }
}


/* Habibi panier outils commande */
.cart-order-tools{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.cart-order-tools button,.cart-order-tools a{border:1px solid rgba(15,23,42,.08);background:#fff;color:#111827;text-decoration:none;border-radius:16px;min-height:42px;padding:9px 10px;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 6px 16px rgba(15,23,42,.06);cursor:pointer}.cart-order-tools i{font-size:14px}.cart-order-tools a{color:#0f7a38;background:rgba(37,211,102,.08);border-color:rgba(37,211,102,.22)}
@media(max-width:520px){.cart-order-tools{grid-template-columns:1fr 1fr;gap:7px}.cart-order-tools button,.cart-order-tools a{min-height:39px;font-size:11px;border-radius:14px;padding:8px 6px}.cart-ios-note{font-size:11px!important;line-height:1.35!important}}


.cart-split{
 display:flex;
 align-items:center;
 width:100%;
 max-width:320px;
 border-radius:24px;
 overflow:hidden;
 box-shadow:0 4px 12px rgba(0,0,0,.15);
 background:#fff;
 gap:0;
}
.cart-split .cart-btn{
 flex:1 1 50%;
 width:50%;
 border-radius:0;
 padding:10px 12px;
 min-height:42px;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:700;
}
.cart-left{
 width:50%;
 border-right:6px solid rgba(255,255,255,.9);
}
.cart-right{
 width:50%;
 background:#f7f7f7;
}

/* =========================================================
   HABIBI PATCH 2026-05-31 - Console Panier / Recherche Commande premium 3D
   Objectif : boutons haut de gamme, relief, affichage propre PC + mobile
   ========================================================= */
.cart-split.habibi-console-actions{
  position:relative !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  align-items:stretch !important;
  width:clamp(230px, 22vw, 340px) !important;
  max-width:340px !important;
  min-height:48px !important;
  padding:4px !important;
  gap:4px !important;
  border-radius:24px !important;
  overflow:visible !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(210,214,222,.92)) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(17,24,39,.35)) border-box !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 12px 26px rgba(0,0,0,.28),
    0 3px 0 rgba(0,0,0,.32),
    inset 0 1px 1px rgba(255,255,255,.92),
    inset 0 -8px 16px rgba(15,23,42,.08) !important;
  isolation:isolate !important;
}
.cart-split.habibi-console-actions::before{
  content:"" !important;
  position:absolute !important;
  inset:5px 50% 5px auto !important;
  width:1px !important;
  background:linear-gradient(180deg, transparent, rgba(15,23,42,.18), transparent) !important;
  transform:translateX(2px) !important;
  z-index:1 !important;
  pointer-events:none !important;
}
.cart-split.habibi-console-actions .cart-btn,
.cart-split.habibi-console-actions .habibi-action-btn{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  min-width:0 !important;
  min-height:40px !important;
  padding:7px 9px !important;
  border:0 !important;
  border-radius:19px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  color:#111827 !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:.1px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  transform:none !important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease, background .16s ease !important;
  box-shadow:
    0 7px 12px rgba(15,23,42,.18),
    0 2px 0 rgba(15,23,42,.28),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -5px 10px rgba(15,23,42,.08) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.68) !important;
}
.cart-split.habibi-console-actions .habibi-action-btn:hover{
  filter:brightness(1.03) saturate(1.04) !important;
  transform:translateY(-1px) !important;
  box-shadow:
    0 10px 16px rgba(15,23,42,.2),
    0 3px 0 rgba(15,23,42,.30),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -5px 10px rgba(15,23,42,.07) !important;
}
.cart-split.habibi-console-actions .habibi-action-btn:active{
  transform:translateY(2px) !important;
  box-shadow:
    0 3px 7px rgba(15,23,42,.16),
    0 0 0 rgba(15,23,42,0),
    inset 0 2px 6px rgba(15,23,42,.20),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
}
.cart-split.habibi-console-actions .habibi-action-icon{
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,#1f2937,#020617) !important;
  color:#fff !important;
  font-size:12px !important;
  box-shadow:
    0 3px 7px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.cart-split.habibi-console-actions .habibi-order-action .habibi-action-icon{
  background:linear-gradient(180deg,#22c55e,#0f7a38) !important;
}
.cart-split.habibi-console-actions .habibi-action-text{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:0 !important;
}
.cart-split.habibi-console-actions .habibi-cart-count{
  min-width:20px !important;
  height:20px !important;
  padding:0 6px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#ef4444,#b91c1c) !important;
  color:#fff !important;
  font-size:11px !important;
  font-weight:950 !important;
  line-height:1 !important;
  box-shadow:0 3px 8px rgba(185,28,28,.35), inset 0 1px 0 rgba(255,255,255,.28) !important;
  text-shadow:none !important;
}
.cart-split.habibi-console-actions .cart-btn.cart-has-items{
  background:linear-gradient(180deg,#ff5b5b 0%,#e11d28 50%,#aa1118 100%) !important;
  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,.25) !important;
  box-shadow:
    0 9px 16px rgba(185,28,28,.32),
    0 3px 0 rgba(100,12,16,.55),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -6px 12px rgba(78,10,13,.24) !important;
}
.cart-split.habibi-console-actions .cart-btn.cart-has-items .habibi-action-icon{
  background:linear-gradient(180deg,#ffffff,#fee2e2) !important;
  color:#b91c1c !important;
}
.cart-split.habibi-console-actions .cart-btn.cart-has-items .habibi-cart-count{
  background:#fff !important;
  color:#b91c1c !important;
  box-shadow:0 3px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
@media (max-width:768px){
  .cart-split.habibi-console-actions{
    width:clamp(188px, 48vw, 240px) !important;
    min-height:42px !important;
    padding:3px !important;
    gap:3px !important;
    border-radius:21px !important;
  }
  .cart-split.habibi-console-actions .cart-btn,
  .cart-split.habibi-console-actions .habibi-action-btn{
    min-height:35px !important;
    padding:5px 5px !important;
    border-radius:17px !important;
    gap:4px !important;
    font-size:10.2px !important;
    letter-spacing:-.1px !important;
  }
  .cart-split.habibi-console-actions .habibi-action-icon{
    width:21px !important;
    height:21px !important;
    min-width:21px !important;
    font-size:10px !important;
  }
  .cart-split.habibi-console-actions .habibi-cart-count{
    min-width:17px !important;
    height:17px !important;
    padding:0 4px !important;
    font-size:9px !important;
  }
}
@media (max-width:390px){
  .cart-split.habibi-console-actions{
    width:clamp(176px, 47vw, 208px) !important;
  }
  .cart-split.habibi-console-actions .cart-btn,
  .cart-split.habibi-console-actions .habibi-action-btn{
    font-size:9.2px !important;
    gap:3px !important;
    padding-inline:4px !important;
  }
  .cart-split.habibi-console-actions .habibi-action-icon{
    width:19px !important;
    height:19px !important;
    min-width:19px !important;
    font-size:9px !important;
  }
  .cart-split.habibi-console-actions .habibi-cart-count{
    min-width:16px !important;
    height:16px !important;
    font-size:8.5px !important;
  }
}
@media (max-width:345px){
  .cart-split.habibi-console-actions{
    width:168px !important;
  }
  .cart-split.habibi-console-actions .habibi-action-text{
    font-size:8.5px !important;
  }
  .cart-split.habibi-console-actions .habibi-action-icon{
    display:none !important;
  }
}

/* =========================================================
   HABIBI PATCH 2026-05-31 B - Commande gauche / Panier droite
   + bouton unique divisé en deux + mini ticket commande
   ========================================================= */
.cart-split.habibi-console-actions{
  gap:0 !important;
  padding:4px !important;
  overflow:hidden !important;
  border-radius:24px !important;
}
.cart-split.habibi-console-actions::before{
  inset:4px auto 4px 50% !important;
  width:2px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.50), rgba(15,23,42,.28), rgba(255,255,255,.50)) !important;
  transform:translateX(-1px) !important;
}
.cart-split.habibi-console-actions .habibi-action-btn{
  border-radius:0 !important;
  min-height:41px !important;
  box-shadow:
    0 7px 12px rgba(15,23,42,.15),
    0 2px 0 rgba(15,23,42,.24),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -5px 10px rgba(15,23,42,.08) !important;
}
.cart-split.habibi-console-actions .cart-left{
  border-top-left-radius:19px !important;
  border-bottom-left-radius:19px !important;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
  border-right:0 !important;
}
.cart-split.habibi-console-actions .cart-right{
  border-top-left-radius:0 !important;
  border-bottom-left-radius:0 !important;
  border-top-right-radius:19px !important;
  border-bottom-right-radius:19px !important;
}
.cart-split.habibi-console-actions .habibi-order-action{
  background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 52%,#d9dee8 100%) !important;
}
.cart-split.habibi-console-actions .habibi-cart-action{
  background:linear-gradient(180deg,#ffffff 0%,#f1f3f7 52%,#dfe3ea 100%) !important;
}

.order-access-popup{
  align-items:center !important;
  justify-content:center !important;
  padding:10px !important;
}
.order-access-popup .order-access-content{
  width:min(92vw, 330px) !important;
  max-width:330px !important;
  max-height:92vh !important;
  overflow:auto !important;
  margin:0 !important;
  padding:10px 10px 9px !important;
  border-radius:18px !important;
  background:#fffdf7 !important;
  border:1px solid rgba(15,23,42,.10) !important;
  box-shadow:0 18px 38px rgba(15,23,42,.24), 0 2px 0 rgba(15,23,42,.18) !important;
}
.order-access-popup .order-access-content::before,
.order-access-popup .order-access-content::after{
  content:"";
  display:block;
  height:5px;
  margin:0 -2px 7px;
  background:repeating-linear-gradient(90deg, transparent 0 7px, rgba(15,23,42,.10) 7px 9px);
  border-radius:999px;
}
.order-access-popup .order-access-content::after{
  margin:7px -2px 0;
}
.order-access-popup .close{
  top:6px !important;
  right:8px !important;
  width:24px !important;
  height:24px !important;
  line-height:22px !important;
  font-size:20px !important;
}
.order-access-popup h2{
  margin:0 28px 6px 0 !important;
  font-size:16px !important;
  line-height:1.05 !important;
  font-weight:950 !important;
}
.order-access-popup .payment-intro{
  display:none !important;
}
.order-access-popup .payment-customer-box{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.order-access-popup .booking-row{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
  margin:0 !important;
}
.order-access-popup .booking-field{
  margin:0 !important;
  gap:3px !important;
}
.order-access-popup .booking-field label{
  margin:0 !important;
  font-size:11px !important;
  line-height:1.1 !important;
  font-weight:900 !important;
}
.order-access-popup .hb-phone-row{
  gap:4px !important;
}
.order-access-popup select,
.order-access-popup input{
  height:34px !important;
  min-height:34px !important;
  padding:6px 8px !important;
  border-radius:10px !important;
  font-size:13px !important;
}
.order-access-popup #order-access-country{
  flex:0 0 84px !important;
  width:84px !important;
}
.order-access-popup .hb-phone-help{
  min-height:0 !important;
  margin:0 !important;
  font-size:10px !important;
  line-height:1.1 !important;
}
.order-access-popup .availability-submit-btn{
  width:100% !important;
  min-height:36px !important;
  margin:8px 0 0 !important;
  padding:8px 10px !important;
  border-radius:12px !important;
  font-size:13px !important;
  font-weight:950 !important;
}
.order-access-popup .order-access-result{
  margin-top:8px !important;
  font-size:12px !important;
}
.order-access-popup .order-access-status,
.order-access-popup .order-access-item{
  border-radius:12px !important;
  padding:8px !important;
  gap:3px !important;
}
@media(max-width:768px){
  .cart-split.habibi-console-actions{border-radius:21px !important;}
  .cart-split.habibi-console-actions .cart-left{
    border-top-left-radius:17px !important;
    border-bottom-left-radius:17px !important;
  }
  .cart-split.habibi-console-actions .cart-right{
    border-top-right-radius:17px !important;
    border-bottom-right-radius:17px !important;
  }
  .order-access-popup .order-access-content{
    width:min(94vw, 318px) !important;
    padding:9px !important;
  }
}
@media(max-width:390px){
  .order-access-popup .order-access-content{width:94vw !important;max-width:305px !important;}
  .order-access-popup h2{font-size:15px !important;}
}


/* HABIBI PREMIUM CONSOLE FINAL */
.habibi-console-actions{display:flex;gap:5px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.habibi-order-action{border-radius:18px 4px 4px 18px!important}
.habibi-cart-action{border-radius:4px 18px 18px 4px!important}
.habibi-action-btn{
min-height:46px;
background:linear-gradient(180deg,#ffffff,#e9e9e9);
box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 5px 12px rgba(0,0,0,.18);
}
#habibi-order-popup{
position:absolute!important;
top:calc(100% + 8px)!important;
left:0!important;
transform:none!important;
width:280px!important;
max-width:92vw!important;
padding:10px!important;
margin:0!important;
border-radius:12px!important;
}

/* =========================================================
   HABIBI PATCH 2026-05-31 C - Badges intégrés à la console lumineuse
   ========================================================= */
.cart-area{
  overflow:visible !important;
}
.cart-trust-row{
  position:relative !important;
  isolation:isolate !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:7px 9px !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 50% -35%, rgba(255,255,255,.74) 0%, rgba(255,255,255,.22) 26%, transparent 54%),
    linear-gradient(180deg, rgba(21,28,44,.92) 0%, rgba(9,14,26,.96) 53%, rgba(3,7,15,.98) 100%) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:
    0 18px 42px rgba(2,6,23,.35),
    0 0 0 1px rgba(134,239,172,.16),
    0 0 28px rgba(34,197,94,.20),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -8px 18px rgba(0,0,0,.32) !important;
}
.cart-trust-row::before{
  content:"" !important;
  position:absolute !important;
  inset:4px !important;
  z-index:-1 !important;
  border-radius:26px !important;
  border:1px solid rgba(134,239,172,.18) !important;
  background:linear-gradient(90deg, rgba(34,197,94,.08), rgba(239,68,68,.10), rgba(34,197,94,.08)) !important;
  pointer-events:none !important;
}
.cart-trust-row::after{
  content:"" !important;
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:-4px !important;
  height:8px !important;
  border-radius:999px !important;
  background:radial-gradient(ellipse at center, rgba(34,197,94,.38), transparent 72%) !important;
  filter:blur(5px) !important;
  pointer-events:none !important;
}
.trust-group{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
  padding:3px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.trust-badge{
  min-width:112px !important;
  height:25px !important;
  padding:0 10px 0 28px !important;
  border-radius:15px !important;
  border:1px solid rgba(134,239,172,.38) !important;
  background:
    linear-gradient(180deg, rgba(39,218,91,.98) 0%, rgba(22,163,74,.96) 48%, rgba(12,100,45,.98) 100%) !important;
  color:#f7fff9 !important;
  font-size:9.6px !important;
  font-weight:900 !important;
  letter-spacing:.12px !important;
  text-shadow:0 1px 2px rgba(0,0,0,.32), 0 0 8px rgba(255,255,255,.22) !important;
  box-shadow:
    0 0 10px rgba(34,197,94,.36),
    0 5px 11px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -4px 8px rgba(0,0,0,.20) !important;
  overflow:visible !important;
}
.trust-badge::before{
  width:21px !important;
  height:21px !important;
  min-width:21px !important;
  top:50% !important;
  left:3px !important;
  transform:translateY(-50%) !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:linear-gradient(180deg,#ffffff,#d8ffe2) !important;
  color:#11843b !important;
  font-size:10px !important;
  font-weight:950 !important;
  box-shadow:0 0 10px rgba(134,239,172,.72), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.trust-left .trust-badge:nth-child(2)::before{
  color:#c58b00 !important;
  background:linear-gradient(180deg,#fff8cf,#ffd76a) !important;
  box-shadow:0 0 12px rgba(250,204,21,.75), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.trust-right .trust-badge:nth-child(1)::before{
  content:"☎" !important;
  color:#0a7a35 !important;
}
.trust-badge:hover,
.trust-badge:focus-visible{
  transform:translateY(-1px) !important;
  filter:brightness(1.08) saturate(1.06) !important;
  box-shadow:
    0 0 16px rgba(34,197,94,.55),
    0 8px 14px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -4px 8px rgba(0,0,0,.20) !important;
}
.cart-split.habibi-console-actions{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 12px 25px rgba(0,0,0,.30),
    0 0 16px rgba(239,68,68,.22),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
@media (max-width:900px){
  .cart-trust-row{gap:5px !important;padding:6px !important;border-radius:25px !important;}
  .trust-group{gap:3px !important;padding:2px !important;border-radius:17px !important;}
  .trust-badge{min-width:86px !important;height:22px !important;font-size:7.8px !important;padding-left:23px !important;padding-right:7px !important;}
  .trust-badge::before{width:18px !important;height:18px !important;min-width:18px !important;font-size:8px !important;left:2px !important;}
}
@media (max-width:560px){
  .cart-trust-row{
    width:100% !important;
    max-width:calc(100vw - 12px) !important;
    gap:3px !important;
    padding:5px !important;
  }
  .trust-badge{min-width:62px !important;max-width:68px !important;height:21px !important;font-size:5.8px !important;letter-spacing:0 !important;padding-left:18px !important;padding-right:4px !important;}
  .trust-badge::before{width:15px !important;height:15px !important;min-width:15px !important;font-size:7px !important;}
  .cart-split.habibi-console-actions{width:172px !important;min-width:172px !important;}
}
@media (max-width:380px){
  .cart-trust-row{padding:4px !important;gap:2px !important;}
  .trust-badge{min-width:55px !important;max-width:60px !important;font-size:5.2px !important;padding-left:16px !important;}
  .trust-badge::before{width:13px !important;height:13px !important;min-width:13px !important;font-size:6px !important;}
  .cart-split.habibi-console-actions{width:160px !important;min-width:160px !important;}
}


/* PREMIUM CONSOLE PATCH */
.console-badge,.badge{max-height:42px!important;box-shadow:none!important}
.console-badge::before,.console-badge::after,.badge::before,.badge::after{display:none!important}
.order-popup,.command-popup{max-width:220px!important;padding:8px!important}

/* =========================================================
   HABIBI FINAL PATCH 2026-05-31 D - Console propre sans cadre
   Demande Amir : espace Panier/Commande, boutons plus petits,
   badges derrière les boutons, badges relief creusé.
   ========================================================= */
.navbar .cart-area{
  overflow:visible !important;
}
.navbar .cart-trust-row{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:max-content !important;
  max-width:100% !important;
  margin:0 auto !important;
  padding:0 !important;
  gap:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  isolation:isolate !important;
}
.navbar .cart-trust-row::before,
.navbar .cart-trust-row::after{
  display:none !important;
  content:none !important;
}
.navbar .trust-group{
  position:relative !important;
  z-index:1 !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:3px !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
.navbar .cart-split.habibi-console-actions{
  z-index:3 !important;
  width:clamp(198px, 18vw, 270px) !important;
  min-width:198px !important;
  max-width:270px !important;
  min-height:38px !important;
  padding:0 !important;
  gap:6px !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 8px 11px rgba(15,23,42,.22)) !important;
  overflow:visible !important;
  border-radius:0 !important;
}
.navbar .cart-split.habibi-console-actions::before{
  display:none !important;
  content:none !important;
}
.navbar .cart-split.habibi-console-actions .cart-btn,
.navbar .cart-split.habibi-console-actions .habibi-action-btn{
  min-height:37px !important;
  height:37px !important;
  padding:5px 7px !important;
  border-radius:16px !important;
  font-size:11.5px !important;
  gap:5px !important;
  transform:translateY(0) !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 8px 12px rgba(15,23,42,.20),
    0 2px 0 rgba(15,23,42,.28),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -5px 9px rgba(15,23,42,.10) !important;
}
.navbar .cart-split.habibi-console-actions .cart-left,
.navbar .cart-split.habibi-console-actions .cart-right,
.navbar .cart-split.habibi-console-actions .habibi-order-action,
.navbar .cart-split.habibi-console-actions .habibi-cart-action{
  border-radius:16px !important;
}
.navbar .cart-split.habibi-console-actions .habibi-action-icon{
  width:21px !important;
  height:21px !important;
  min-width:21px !important;
  font-size:9px !important;
}
.navbar .cart-split.habibi-console-actions .habibi-cart-count{
  min-width:16px !important;
  height:16px !important;
  padding:0 4px !important;
  font-size:8px !important;
}
.navbar .trust-badge{
  position:relative !important;
  z-index:1 !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  min-width:96px !important;
  max-width:112px !important;
  padding:0 8px 0 22px !important;
  border-radius:11px !important;
  border:1px solid rgba(15,95,47,.55) !important;
  background:linear-gradient(180deg,#0f7a38 0%,#159447 48%,#0a5c2b 100%) !important;
  color:#effff3 !important;
  font-size:7.7px !important;
  font-weight:850 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  text-shadow:0 -1px 0 rgba(0,0,0,.38) !important;
  box-shadow:
    inset 0 3px 7px rgba(0,0,0,.40),
    inset 0 -1px 0 rgba(255,255,255,.20),
    0 1px 0 rgba(255,255,255,.22),
    0 0 9px rgba(34,197,94,.18) !important;
  transform:none !important;
  overflow:visible !important;
}
.navbar .trust-left .trust-badge{
  padding-left:20px !important;
  padding-right:12px !important;
  text-align:left !important;
}
.navbar .trust-right .trust-badge{
  padding-left:12px !important;
  padding-right:20px !important;
  text-align:right !important;
}
.navbar .trust-badge::before{
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  top:50% !important;
  left:2px !important;
  right:auto !important;
  transform:translateY(-50%) !important;
  border-radius:50% !important;
  background:linear-gradient(180deg,#d9ffe3,#70d98f) !important;
  color:#075b29 !important;
  font-size:7px !important;
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(255,255,255,.35),
    0 0 5px rgba(134,239,172,.35) !important;
}
.navbar .trust-right .trust-badge::before{
  left:auto !important;
  right:2px !important;
}
.navbar .trust-left .trust-badge:nth-child(2)::before{
  background:linear-gradient(180deg,#fff2a7,#d7a412) !important;
  color:#6b4600 !important;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.22),0 0 6px rgba(250,204,21,.35) !important;
}
.navbar .trust-badge:hover,
.navbar .trust-badge:focus-visible{
  transform:translateY(0) !important;
  filter:brightness(1.05) !important;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.42),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 0 10px rgba(34,197,94,.25) !important;
}
@media (max-width:900px){
  .navbar .cart-split.habibi-console-actions{
    width:190px !important;
    min-width:190px !important;
    gap:5px !important;
  }
  .navbar .cart-split.habibi-console-actions .cart-btn,
  .navbar .cart-split.habibi-console-actions .habibi-action-btn{
    height:34px !important;
    min-height:34px !important;
    font-size:10px !important;
    padding:4px 5px !important;
    gap:3px !important;
  }
  .navbar .cart-split.habibi-console-actions .habibi-action-icon{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    font-size:8px !important;
  }
  .navbar .trust-left{margin-right:-9px !important;}
  .navbar .trust-right{margin-left:-9px !important;}
  .navbar .trust-badge{
    min-width:72px !important;
    max-width:82px !important;
    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;
    font-size:6.2px !important;
    padding-left:17px !important;
    padding-right:7px !important;
    border-radius:10px !important;
  }
  .navbar .trust-right .trust-badge{padding-left:7px !important;padding-right:17px !important;}
  .navbar .trust-badge::before{width:13px !important;height:13px !important;min-width:13px !important;min-height:13px !important;font-size:6px !important;}
}
@media (max-width:560px){
  .navbar .cart-trust-row{
    width:100% !important;
    max-width:calc(100vw - 8px) !important;
  }
  .navbar .cart-split.habibi-console-actions{
    width:154px !important;
    min-width:154px !important;
    gap:4px !important;
  }
  .navbar .cart-split.habibi-console-actions .cart-btn,
  .navbar .cart-split.habibi-console-actions .habibi-action-btn{
    height:31px !important;
    min-height:31px !important;
    font-size:8.8px !important;
    padding:3px 3px !important;
    border-radius:13px !important;
  }
  .navbar .cart-split.habibi-console-actions .habibi-cart-count{
    min-width:14px !important;
    height:14px !important;
    font-size:7px !important;
  }
  .navbar .trust-group{gap:2px !important;}
  .navbar .trust-badge{
    min-width:54px !important;
    max-width:60px !important;
    height:14px !important;
    min-height:14px !important;
    max-height:14px !important;
    font-size:5.05px !important;
    padding-left:13px !important;
    padding-right:4px !important;
    border-radius:8px !important;
  }
  .navbar .trust-right .trust-badge{padding-left:4px !important;padding-right:13px !important;}
  .navbar .trust-badge::before{
    width:10px !important;
    height:10px !important;
    min-width:10px !important;
    min-height:10px !important;
    font-size:5px !important;
    left:1px !important;
  }
  .navbar .trust-right .trust-badge::before{right:1px !important;}
}
@media (max-width:380px){
  .navbar .cart-split.habibi-console-actions{
    width:142px !important;
    min-width:142px !important;
    gap:3px !important;
  }
  .navbar .cart-split.habibi-console-actions .cart-btn,
  .navbar .cart-split.habibi-console-actions .habibi-action-btn{
    font-size:8px !important;
  }
  .navbar .trust-badge{
    min-width:49px !important;
    max-width:54px !important;
    font-size:4.65px !important;
  }
}

/* =========================================================
   HABIBI PATCH 2026-05-31 - Panier + Commande = un seul bouton divisé
   ========================================================= */
.navbar .cart-split.habibi-console-actions{
  display:flex !important;
  align-items:stretch !important;
  justify-content:center !important;
  gap:0 !important;
  width:214px !important;
  min-width:214px !important;
  height:36px !important;
  min-height:36px !important;
  padding:0 !important;
  overflow:visible !important;
  border-radius:17px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:0 9px 14px rgba(15,23,42,.22) !important;
  filter:none !important;
}
.navbar .cart-split.habibi-console-actions .cart-btn,
.navbar .cart-split.habibi-console-actions .habibi-action-btn{
  flex:1 1 50% !important;
  width:50% !important;
  min-width:0 !important;
  height:36px !important;
  min-height:36px !important;
  padding:4px 7px !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.72) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -5px 9px rgba(15,23,42,.12),
    0 2px 0 rgba(15,23,42,.28) !important;
}
.navbar .cart-split.habibi-console-actions .cart-left,
.navbar .cart-split.habibi-console-actions .habibi-order-action{
  border-radius:17px 0 0 17px !important;
  border-right:0 !important;
}
.navbar .cart-split.habibi-console-actions .cart-right,
.navbar .cart-split.habibi-console-actions .habibi-cart-action{
  border-radius:0 17px 17px 0 !important;
  border-left:1px solid rgba(15,23,42,.18) !important;
  position:relative !important;
}
.navbar .cart-split.habibi-console-actions .cart-right::before,
.navbar .cart-split.habibi-console-actions .habibi-cart-action::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:6px !important;
  bottom:6px !important;
  width:1px !important;
  background:rgba(255,255,255,.55) !important;
  box-shadow:-1px 0 0 rgba(15,23,42,.18) !important;
  pointer-events:none !important;
}
.navbar .trust-badge{
  z-index:0 !important;
  transform:translateY(0) !important;
}
.navbar .cart-split.habibi-console-actions{z-index:2 !important;}

@media (max-width:900px){
  .navbar .cart-split.habibi-console-actions{
    width:188px !important;
    min-width:188px !important;
    height:33px !important;
    min-height:33px !important;
    border-radius:15px !important;
  }
  .navbar .cart-split.habibi-console-actions .cart-btn,
  .navbar .cart-split.habibi-console-actions .habibi-action-btn{
    height:33px !important;
    min-height:33px !important;
  }
  .navbar .cart-split.habibi-console-actions .cart-left,
  .navbar .cart-split.habibi-console-actions .habibi-order-action{border-radius:15px 0 0 15px !important;}
  .navbar .cart-split.habibi-console-actions .cart-right,
  .navbar .cart-split.habibi-console-actions .habibi-cart-action{border-radius:0 15px 15px 0 !important;}
}
@media (max-width:560px){
  .navbar .cart-split.habibi-console-actions{
    width:154px !important;
    min-width:154px !important;
    height:31px !important;
    min-height:31px !important;
    border-radius:14px !important;
  }
  .navbar .cart-split.habibi-console-actions .cart-btn,
  .navbar .cart-split.habibi-console-actions .habibi-action-btn{
    height:31px !important;
    min-height:31px !important;
    padding:3px 4px !important;
  }
  .navbar .cart-split.habibi-console-actions .cart-left,
  .navbar .cart-split.habibi-console-actions .habibi-order-action{border-radius:14px 0 0 14px !important;}
  .navbar .cart-split.habibi-console-actions .cart-right,
  .navbar .cart-split.habibi-console-actions .habibi-cart-action{border-radius:0 14px 14px 0 !important;}
}
@media (max-width:380px){
  .navbar .cart-split.habibi-console-actions{
    width:142px !important;
    min-width:142px !important;
  }
}


/* =========================================================
   HABIBI PATCH 2026-05-31 E - Badges lisibles mobile + panier nettoyé
   Demande Amir : badges ne rétrécissent pas sur téléphone,
   boutons Suivre commande / Aide WhatsApp retirés du panier.
   ========================================================= */
.navbar .cart-area,
.navbar .cart-trust-row,
.navbar .trust-group{
  overflow:visible !important;
}
.navbar .cart-trust-row{
  width:max-content !important;
  max-width:none !important;
  transform-origin:center top !important;
}
.navbar .trust-badge{
  min-width:96px !important;
  max-width:112px !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  font-size:7.7px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.navbar .trust-badge::before{
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  font-size:7px !important;
}
@media (max-width:900px){
  .navbar .cart-trust-row{
    width:max-content !important;
    max-width:none !important;
    transform:scale(.94) !important;
  }
}
@media (max-width:560px){
  .navbar .cart-area{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }
  .navbar .cart-trust-row{
    width:max-content !important;
    max-width:none !important;
    transform:scale(.82) !important;
  }
  .navbar .trust-group{gap:3px !important;}
  .navbar .trust-left{margin-right:-11px !important;}
  .navbar .trust-right{margin-left:-11px !important;}
  .navbar .trust-badge{
    min-width:96px !important;
    max-width:112px !important;
    height:17px !important;
    min-height:17px !important;
    max-height:17px !important;
    font-size:7.7px !important;
    padding-left:20px !important;
    padding-right:12px !important;
    border-radius:11px !important;
  }
  .navbar .trust-right .trust-badge{
    padding-left:12px !important;
    padding-right:20px !important;
  }
  .navbar .trust-badge::before{
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    min-height:15px !important;
    font-size:7px !important;
    left:2px !important;
  }
  .navbar .trust-right .trust-badge::before{right:2px !important;}
}
@media (max-width:380px){
  .navbar .cart-trust-row{transform:scale(.76) !important;}
  .navbar .trust-badge{
    min-width:96px !important;
    max-width:112px !important;
    font-size:7.7px !important;
  }
}
.cart-extra-actions button[onclick*="openOrderAccessPopup"],
.cart-extra-actions a[href*="wa.me"]{
  display:none !important;
}

/* HABIBI PATCH 2026-05-31 - bouton panier unique + popup commande centré */
#cart-pay-btn{display:none !important;}
.cart-action-row.cart-ios-actions{display:flex !important; justify-content:center !important;}
#verify-availability-btn.hb-main-cart-action{
  width:min(100%, 420px) !important;
  min-height:48px !important;
  border-radius:18px !important;
  font-size:15px !important;
  font-weight:950 !important;
}
#verify-availability-btn.hb-main-cart-action.hb-pay-mode{
  background:linear-gradient(180deg,#25d366,#0fa34a) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(15,163,74,.28), inset 0 1px 0 rgba(255,255,255,.28) !important;
}
#verify-availability-btn.hb-main-cart-action.hb-check-mode{
  background:linear-gradient(180deg,#111827,#0f172a) !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(15,23,42,.25), inset 0 1px 0 rgba(255,255,255,.16) !important;
}
#verify-availability-btn.hb-main-cart-action.hb-pending-mode{
  background:linear-gradient(180deg,#f59e0b,#d97706) !important;
  color:#fff !important;
}
#verify-availability-btn.hb-main-cart-action.hb-refused-mode{
  background:linear-gradient(180deg,#ef4444,#b91c1c) !important;
  color:#fff !important;
}
.order-access-popup{
  display:none;
  position:fixed !important;
  inset:0 !important;
  align-items:center !important;
  justify-content:center !important;
}
.order-access-popup[style*="display: block"],
.order-access-popup.hb-order-popup-open{
  display:flex !important;
}
.order-access-popup .order-access-content{
  position:relative !important;
  margin:0 auto !important;
  transform:none !important;
}
@media(max-width:640px){
  #verify-availability-btn.hb-main-cart-action{font-size:14px !important; min-height:46px !important; padding:12px 10px !important;}
}

/* HABIBI FINAL UI FIX 2026-05-31 */
#order-success-banner,
.order-success-banner{
  z-index:2147483647!important;
  position:fixed!important;
  pointer-events:none!important;
}
.navbar .trust-badge,
.trust-badge{
  border-radius:0!important;
}
.navbar .trust-badge::before,
.trust-badge::before{
  border-radius:0!important;
}
body:not(.hb-cart-open) #cart-popup.cart-popup-ios[aria-hidden="true"]{
  display:none!important;
}

/* =========================================================
   HABIBI PATCH 2026-05-31 F - badges semi-arrondis + lumière verte
   Demande Amir : côté bouton plat, côté extérieur arrondi,
   petite lumière verte animée de temps en temps.
   ========================================================= */
.navbar .trust-badge,
.trust-badge{
  position:relative !important;
  overflow:visible !important;
  isolation:isolate !important;
  border-radius:12px !important;
}

/* Badges à gauche des boutons : extérieur gauche arrondi, côté bouton droit plat */
.navbar .trust-left .trust-badge,
.trust-left .trust-badge{
  border-radius:12px 0 0 12px !important;
}

/* Badges à droite des boutons : côté bouton gauche plat, extérieur droit arrondi */
.navbar .trust-right .trust-badge,
.trust-right .trust-badge{
  border-radius:0 12px 12px 0 !important;
}

/* On remet les icônes en petits médaillons propres */
.navbar .trust-badge::before,
.trust-badge::before{
  border-radius:50% !important;
  z-index:3 !important;
}

/* Petite lumière verte qui traverse doucement le badge par moments */
.navbar .trust-badge::after,
.trust-badge::after{
  content:"" !important;
  position:absolute !important;
  top:2px !important;
  bottom:2px !important;
  left:-38% !important;
  width:30% !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(183,255,193,.16) 28%,
    rgba(88,255,125,.62) 50%,
    rgba(183,255,193,.16) 72%,
    rgba(255,255,255,0) 100%) !important;
  box-shadow:0 0 10px rgba(69,255,112,.45) !important;
  transform:skewX(-18deg) !important;
  opacity:0 !important;
  pointer-events:none !important;
  z-index:1 !important;
  animation:hbBadgeGreenLight 5.8s ease-in-out infinite !important;
}

.navbar .trust-badge:nth-child(2)::after,
.trust-badge:nth-child(2)::after{
  animation-delay:1.6s !important;
}
.navbar .trust-right .trust-badge:nth-child(1)::after,
.trust-right .trust-badge:nth-child(1)::after{
  animation-delay:2.8s !important;
}
.navbar .trust-right .trust-badge:nth-child(2)::after,
.trust-right .trust-badge:nth-child(2)::after{
  animation-delay:4.1s !important;
}

@keyframes hbBadgeGreenLight{
  0%, 62%, 100%{left:-38%; opacity:0;}
  68%{opacity:.92;}
  82%{left:108%; opacity:.72;}
  88%{left:118%; opacity:0;}
}

@media (max-width:768px){
  .navbar .trust-left .trust-badge,
  .trust-left .trust-badge{border-radius:10px 0 0 10px !important;}
  .navbar .trust-right .trust-badge,
  .trust-right .trust-badge{border-radius:0 10px 10px 0 !important;}
}

/* HABIBI FIX 2026-05-31: indicatif téléphone visible dans le popup commande */
.order-access-popup .hb-phone-row{display:flex!important;align-items:center!important;gap:6px!important;width:100%!important;}
.order-access-popup #order-access-country{display:block!important;visibility:visible!important;opacity:1!important;flex:0 0 96px!important;width:96px!important;min-width:96px!important;max-width:96px!important;text-align:center!important;font-weight:900!important;}
.order-access-popup #order-access-phone{flex:1 1 auto!important;min-width:0!important;}
.order-access-popup .hb-phone-help.is-ok{color:#0f8a3a!important;font-weight:800!important;}
.order-access-popup .hb-phone-help.is-error{color:#c62828!important;font-weight:800!important;}


/* =========================================================
   HABIBI FIX 2026-05-31 : AR = traduction seulement
   On garde toujours la même mise en page LTR : gauche reste gauche,
   droite reste droite. Seul le texte arabe est traduit/affiché.
   ========================================================= */
html[lang="ar"],
html[lang="ar"] body,
body.hb-ar-text {
  direction: ltr !important;
}
body.hb-ar-text .popup-content,
body.hb-ar-text .payment-content,
body.hb-ar-text .booking-options,
body.hb-ar-text .booking-field label,
body.hb-ar-text .popup-note,
body.hb-ar-text .cart-item,
body.hb-ar-text .cart-total,
body.hb-ar-text .footer-col,
body.hb-ar-text .footer-brand,
body.hb-ar-text .legal-popup-body {
  direction: ltr !important;
}
body.hb-ar-text input,
body.hb-ar-text textarea,
body.hb-ar-text select {
  direction: ltr !important;
}
body.hb-ar-text .horizontal-scroll,
body.hb-ar-text .card,
body.hb-ar-text .cart-ios-header,
body.hb-ar-text .cart-ios-content,
body.hb-ar-text .cart-pro-card,
body.hb-ar-text .cart-pro-title-row,
body.hb-ar-text .cart-pro-chips,
body.hb-ar-text .cart-pro-details,
body.hb-ar-text .cart-pro-total,
body.hb-ar-text .cart-pro-next {
  direction: ltr !important;
}
body.hb-ar-text .popup-head {
  flex-direction: row !important;
}
body.hb-ar-text .close {
  right: 15px !important;
  left: auto !important;
}
body.hb-ar-text .price-tag {
  right: 16px !important;
  left: auto !important;
}
body.hb-ar-text .card .btn-whatsapp {
  right: 16px !important;
  left: auto !important;
}
body.hb-ar-text .card h3,
body.hb-ar-text .card p {
  left: 16px !important;
  right: 120px !important;
}
body.hb-ar-text .cart-ios-price,
body.hb-ar-text .cart-pro-title-row strong {
  text-align: right !important;
}

/* =========================================================
   HABIBI PATCH 2026-05-31 F - Barre panier/commande + badges 100% responsive
   Objectif : utiliser la largeur réelle de l'écran, garder les badges lisibles
   et conserver gauche/droite même en arabe.
   ========================================================= */
.navbar,
.navbar .menu,
.navbar .cart-area{
  width:100% !important;
  max-width:100vw !important;
  box-sizing:border-box !important;
}
.navbar .cart-area{
  padding-inline:clamp(4px, 1.4vw, 14px) !important;
}
.navbar .cart-trust-row{
  width:100% !important;
  max-width:min(980px, 100%) !important;
  margin-inline:auto !important;
  display:grid !important;
  grid-template-columns:minmax(96px, 1fr) clamp(176px, 31vw, 250px) minmax(96px, 1fr) !important;
  align-items:center !important;
  justify-content:center !important;
  gap:clamp(3px, 1.1vw, 10px) !important;
  transform:none !important;
  overflow:visible !important;
}
.navbar .trust-group{
  width:100% !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:clamp(2px, .55vw, 4px) !important;
}
.navbar .trust-left{margin-right:0 !important; align-items:flex-end !important;}
.navbar .trust-right{margin-left:0 !important; align-items:flex-start !important;}
.navbar .trust-badge{
  width:min(100%, 142px) !important;
  min-width:0 !important;
  max-width:142px !important;
  height:clamp(17px, 2.35vw, 22px) !important;
  min-height:17px !important;
  max-height:22px !important;
  font-size:clamp(7.2px, 1.55vw, 10px) !important;
  line-height:1 !important;
  letter-spacing:-.03em !important;
  overflow:visible !important;
}
.navbar .trust-left .trust-badge{
  padding-left:clamp(18px, 3.5vw, 24px) !important;
  padding-right:clamp(6px, 1.6vw, 12px) !important;
  text-align:center !important;
}
.navbar .trust-right .trust-badge{
  padding-left:clamp(6px, 1.6vw, 12px) !important;
  padding-right:clamp(18px, 3.5vw, 24px) !important;
  text-align:center !important;
}
.navbar .trust-badge::before{
  width:clamp(14px, 3.1vw, 19px) !important;
  height:clamp(14px, 3.1vw, 19px) !important;
  min-width:clamp(14px, 3.1vw, 19px) !important;
  min-height:clamp(14px, 3.1vw, 19px) !important;
  font-size:clamp(7px, 1.7vw, 10px) !important;
}
.navbar .cart-split.habibi-console-actions{
  width:100% !important;
  min-width:0 !important;
  max-width:250px !important;
  height:clamp(34px, 6vw, 42px) !important;
  min-height:34px !important;
  border-radius:clamp(15px, 2.8vw, 20px) !important;
}
.navbar .cart-split.habibi-console-actions .cart-btn,
.navbar .cart-split.habibi-console-actions .habibi-action-btn{
  height:clamp(34px, 6vw, 42px) !important;
  min-height:34px !important;
  padding-inline:clamp(4px, 1.1vw, 8px) !important;
  gap:clamp(3px, .9vw, 6px) !important;
  font-size:clamp(9px, 1.85vw, 12px) !important;
  letter-spacing:-.02em !important;
}
.navbar .cart-split.habibi-console-actions .habibi-action-icon{
  display:inline-flex !important;
  width:clamp(18px, 3.8vw, 24px) !important;
  height:clamp(18px, 3.8vw, 24px) !important;
  min-width:clamp(18px, 3.8vw, 24px) !important;
  font-size:clamp(8px, 1.7vw, 11px) !important;
}
.navbar .cart-split.habibi-console-actions .habibi-cart-count{
  min-width:clamp(15px, 3.1vw, 19px) !important;
  height:clamp(15px, 3.1vw, 19px) !important;
  font-size:clamp(7px, 1.6vw, 9px) !important;
  padding-inline:clamp(3px, .8vw, 5px) !important;
}
@media (max-width:420px){
  .navbar .cart-area{padding-inline:3px !important;}
  .navbar .cart-trust-row{
    grid-template-columns:minmax(82px, 1fr) minmax(146px, 40vw) minmax(82px, 1fr) !important;
    gap:2px !important;
  }
  .navbar .trust-badge{
    width:100% !important;
    max-width:108px !important;
    font-size:clamp(6.15px, 1.86vw, 7.4px) !important;
    letter-spacing:-.055em !important;
  }
  .navbar .cart-split.habibi-console-actions .habibi-action-icon{
    width:17px !important;
    height:17px !important;
    min-width:17px !important;
  }
}
@media (max-width:355px){
  .navbar .cart-trust-row{
    grid-template-columns:minmax(76px, 1fr) minmax(134px, 39vw) minmax(76px, 1fr) !important;
  }
  .navbar .cart-split.habibi-console-actions .habibi-action-icon{display:none !important;}
  .navbar .trust-badge{font-size:5.85px !important;}
}
/* Sécurité RTL : la langue arabe ne doit jamais inverser cette console. */
body.hb-rtl .navbar .cart-trust-row,
body.habibi-rtl .navbar .cart-trust-row,
body[dir="rtl"] .navbar .cart-trust-row{
  direction:ltr !important;
}
body.hb-rtl .navbar .trust-badge,
body.habibi-rtl .navbar .trust-badge,
body[dir="rtl"] .navbar .trust-badge{
  direction:ltr !important;
}

/* =========================================================
   HABIBI PATCH 2026-05-31 F - Badges intégrés derrière Panier/Commande
   Objectif : les badges sortent visuellement du même bloc, sans dépasser
   la hauteur des boutons centraux, même sur téléphone.
   ========================================================= */
.navbar .cart-area{
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  overflow:visible !important;
}
.navbar .cart-trust-row{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:nowrap !important;
  gap:0 !important;
  width:min(100%, 760px) !important;
  max-width:100% !important;
  height:38px !important;
  transform:none !important;
  overflow:visible !important;
  isolation:isolate !important;
}
.navbar .trust-group{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:stretch !important;
  gap:2px !important;
  height:36px !important;
  max-height:36px !important;
  overflow:visible !important;
  position:relative !important;
  z-index:1 !important;
  flex:1 1 0 !important;
  min-width:0 !important;
}
.navbar .trust-left{
  margin-right:-14px !important;
}
.navbar .trust-right{
  margin-left:-14px !important;
}
.navbar .trust-badge{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  height:17px !important;
  min-height:17px !important;
  max-height:17px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  font-size:clamp(7px, 1.65vw, 9px) !important;
  line-height:1 !important;
  border-radius:12px !important;
  transform:none !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72), 0 2px 5px rgba(15,23,42,.16) !important;
}
.navbar .trust-left .trust-badge{
  justify-content:flex-start !important;
  padding-left:19px !important;
  padding-right:18px !important;
  border-radius:12px 4px 4px 12px !important;
}
.navbar .trust-right .trust-badge{
  justify-content:flex-end !important;
  padding-left:18px !important;
  padding-right:19px !important;
  border-radius:4px 12px 12px 4px !important;
}
.navbar .trust-badge::before{
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  font-size:8px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}
.navbar .trust-left .trust-badge::before{left:2px !important;right:auto !important;}
.navbar .trust-right .trust-badge::before{right:2px !important;left:auto !important;}
.navbar .cart-split.habibi-console-actions{
  flex:0 0 clamp(150px, 30vw, 218px) !important;
  width:clamp(150px, 30vw, 218px) !important;
  min-width:150px !important;
  height:38px !important;
  min-height:38px !important;
  border-radius:18px !important;
  position:relative !important;
  z-index:4 !important;
}
.navbar .cart-split.habibi-console-actions .cart-btn,
.navbar .cart-split.habibi-console-actions .habibi-action-btn{
  height:38px !important;
  min-height:38px !important;
  font-size:clamp(10px, 2.3vw, 13px) !important;
}
.navbar .cart-split.habibi-console-actions .cart-left,
.navbar .cart-split.habibi-console-actions .habibi-order-action{border-radius:18px 0 0 18px !important;}
.navbar .cart-split.habibi-console-actions .cart-right,
.navbar .cart-split.habibi-console-actions .habibi-cart-action{border-radius:0 18px 18px 0 !important;}

@media (max-width:560px){
  .navbar .cart-trust-row{
    width:100% !important;
    height:36px !important;
    padding-inline:3px !important;
    transform:none !important;
  }
  .navbar .trust-group{
    height:34px !important;
    max-height:34px !important;
    gap:2px !important;
  }
  .navbar .trust-left{margin-right:-10px !important;}
  .navbar .trust-right{margin-left:-10px !important;}
  .navbar .trust-badge{
    height:16px !important;
    min-height:16px !important;
    max-height:16px !important;
    font-size:clamp(6.2px, 1.85vw, 7.6px) !important;
  }
  .navbar .trust-left .trust-badge{padding-left:17px !important;padding-right:12px !important;}
  .navbar .trust-right .trust-badge{padding-left:12px !important;padding-right:17px !important;}
  .navbar .trust-badge::before{
    width:13px !important;
    height:13px !important;
    min-width:13px !important;
    min-height:13px !important;
    font-size:7px !important;
  }
  .navbar .cart-split.habibi-console-actions{
    flex-basis:clamp(142px, 42vw, 170px) !important;
    width:clamp(142px, 42vw, 170px) !important;
    min-width:142px !important;
    height:36px !important;
    min-height:36px !important;
  }
  .navbar .cart-split.habibi-console-actions .cart-btn,
  .navbar .cart-split.habibi-console-actions .habibi-action-btn{
    height:36px !important;
    min-height:36px !important;
    padding:3px 4px !important;
    font-size:clamp(9px, 2.75vw, 10.5px) !important;
  }
}
@media (max-width:380px){
  .navbar .cart-trust-row{padding-inline:2px !important;}
  .navbar .trust-left{margin-right:-8px !important;}
  .navbar .trust-right{margin-left:-8px !important;}
  .navbar .trust-badge{
    font-size:5.9px !important;
    letter-spacing:-.08px !important;
  }
  .navbar .cart-split.habibi-console-actions{
    flex-basis:136px !important;
    width:136px !important;
    min-width:136px !important;
  }
}

/* =========================================================
   HABIBI PATCH 2026-05-31 G - Texte des badges parfaitement centré
   Objectif : centrer le texte horizontalement et verticalement dans chaque badge,
   sans changer l'effet bloc Panier/Commande ni la position des icônes.
   ========================================================= */
.navbar .trust-badge{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  vertical-align:middle !important;
  line-height:1.05 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow:visible !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.navbar .trust-left .trust-badge,
.navbar .trust-right .trust-badge{
  justify-content:center !important;
  text-align:center !important;
}
.navbar .trust-left .trust-badge{
  padding-left:20px !important;
  padding-right:14px !important;
}
.navbar .trust-right .trust-badge{
  padding-left:14px !important;
  padding-right:20px !important;
}
.navbar .trust-badge::before{
  flex:0 0 auto !important;
}
@media (max-width:560px){
  .navbar .trust-badge{
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1 !important;
  }
  .navbar .trust-left .trust-badge{
    padding-left:17px !important;
    padding-right:9px !important;
  }
  .navbar .trust-right .trust-badge{
    padding-left:9px !important;
    padding-right:17px !important;
  }
}
@media (max-width:380px){
  .navbar .trust-left .trust-badge{
    padding-left:15px !important;
    padding-right:7px !important;
  }
  .navbar .trust-right .trust-badge{
    padding-left:7px !important;
    padding-right:15px !important;
  }
}

/* =========================================================
   HABIBI PATCH 2026-05-31 H - Polices lisibles + footer compact pro
   Objectif : améliorer la lisibilité PC/mobile sans casser le design.
   ========================================================= */
:root{
  --hb-font-main: Arial, Helvetica, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html{font-size:16px !important;-webkit-text-size-adjust:100% !important;text-size-adjust:100% !important;}
body{
  font-family:var(--hb-font-main) !important;
  font-size:16px !important;
  line-height:1.45 !important;
  letter-spacing:-0.01em !important;
  text-rendering:optimizeLegibility !important;
  -webkit-font-smoothing:antialiased !important;
}
button,input,select,textarea,a{
  font-family:var(--hb-font-main) !important;
}
/* Lisibilité générale */
.section-title,
.subcategory-title,
.popup-content h2,
.popup-content h3,
.card h3,
.product-title{
  letter-spacing:-0.02em !important;
  line-height:1.12 !important;
  font-weight:850 !important;
}
.card h3{
  font-size:clamp(17px, 1.65vw, 22px) !important;
  text-shadow:0 2px 8px rgba(0,0,0,.42) !important;
}
.card p,
.product-desc,
.popup-content p,
.cart-item,
.booking-field label,
.payment-info,
.footer-col p,
.footer-col span,
.footer-col a{
  line-height:1.42 !important;
}
.card p,
.product-desc{
  font-size:clamp(12.5px, 1.15vw, 15px) !important;
  font-weight:650 !important;
}
.price-tag,
.card .price-tag{
  font-size:clamp(13px, 1.2vw, 16px) !important;
  font-weight:900 !important;
  line-height:1.05 !important;
}
.btn-whatsapp,
.cart-btn,
.habibi-action-btn,
button{
  font-weight:850 !important;
  line-height:1.12 !important;
}
.popup-content,
.legal-popup-content{
  font-size:15px !important;
  line-height:1.48 !important;
}
.popup-content h2{font-size:clamp(20px, 2.4vw, 28px) !important;}
.popup-content h3{font-size:clamp(17px, 2vw, 22px) !important;}
input,select,textarea{
  font-size:16px !important;
  line-height:1.25 !important;
}
/* Console haut : lisible, sans dépasser */
.navbar .cart-split.habibi-console-actions .cart-btn,
.navbar .cart-split.habibi-console-actions .habibi-action-btn{
  font-size:clamp(10.5px, 1.65vw, 13px) !important;
  letter-spacing:-.02em !important;
}
.navbar .trust-badge{
  font-size:clamp(7.4px, 1.28vw, 9px) !important;
  font-weight:900 !important;
  letter-spacing:-.025em !important;
  line-height:1 !important;
}
/* Footer premium compact */
.habibi-footer{
  margin-top:28px !important;
  padding:24px 16px 12px !important;
  background:radial-gradient(circle at top left, rgba(37,211,102,.20), transparent 32%), linear-gradient(135deg,#080808 0%,#151515 55%,#062915 100%) !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}
.footer-inner{
  max-width:1080px !important;
  grid-template-columns:1.25fr .9fr 1fr 1fr !important;
  gap:18px !important;
  align-items:start !important;
}
.footer-logo{
  width:124px !important;
  max-width:72% !important;
  margin-bottom:6px !important;
}
.footer-brand p,
.footer-col p,
.footer-col span,
.footer-col a{
  font-size:13px !important;
  line-height:1.35 !important;
  color:rgba(255,255,255,.78) !important;
}
.footer-col h3{
  font-size:14px !important;
  line-height:1.1 !important;
  margin-bottom:6px !important;
  font-weight:900 !important;
}
.footer-col{gap:5px !important;}
.footer-cta a{
  margin-top:4px !important;
  padding:8px 12px !important;
  font-size:13px !important;
  line-height:1 !important;
  border-radius:999px !important;
}
.footer-legal-links{
  margin:12px auto 6px !important;
  gap:8px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  max-width:1080px !important;
}
.footer-legal-links a{
  color:rgba(255,255,255,.72) !important;
  text-decoration:none !important;
  padding:4px 8px !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.04) !important;
}
.footer-legal-links a:hover{color:#25D366 !important;border-color:rgba(37,211,102,.32) !important;}
.footer-bottom{
  margin:10px auto 0 !important;
  padding-top:10px !important;
  gap:10px !important;
  font-size:12px !important;
  line-height:1.25 !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}
.footer-admin-link{
  margin:10px auto 0 !important;
  padding-top:8px !important;
}
@media (max-width:900px){
  body{font-size:15.5px !important;}
  .footer-inner{grid-template-columns:1fr 1fr !important;gap:16px !important;}
}
@media (max-width:600px){
  body{font-size:15px !important;line-height:1.42 !important;}
  .section-title{font-size:clamp(22px, 7vw, 30px) !important;line-height:1.08 !important;}
  .subcategory-title{font-size:clamp(18px, 5.6vw, 24px) !important;line-height:1.12 !important;}
  .card h3{font-size:clamp(16px, 4.8vw, 20px) !important;}
  .card p,.product-desc{font-size:clamp(12px, 3.45vw, 14px) !important;line-height:1.32 !important;}
  .price-tag,.card .price-tag{font-size:clamp(12.5px, 3.6vw, 15px) !important;}
  .popup-content,.legal-popup-content{font-size:14px !important;line-height:1.42 !important;}
  .navbar .cart-split.habibi-console-actions .cart-btn,
  .navbar .cart-split.habibi-console-actions .habibi-action-btn{font-size:clamp(9.4px, 2.65vw, 10.8px) !important;}
  .navbar .trust-badge{font-size:clamp(6.25px, 1.75vw, 7.35px) !important;letter-spacing:-.045em !important;}
  .habibi-footer{margin-top:20px !important;padding:18px 14px 76px !important;}
  .footer-inner{grid-template-columns:1fr !important;gap:12px !important;text-align:center !important;}
  .footer-brand,.footer-col{align-items:center !important;}
  .footer-logo{width:112px !important;margin-left:auto !important;margin-right:auto !important;}
  .footer-brand p,.footer-col p,.footer-col span,.footer-col a{font-size:12.5px !important;line-height:1.3 !important;}
  .footer-col h3{font-size:13.5px !important;margin-bottom:4px !important;}
  .footer-cta a{font-size:12.5px !important;padding:8px 11px !important;}
  .footer-legal-links{margin:10px auto 4px !important;font-size:11.5px !important;gap:6px !important;}
  .footer-legal-links a{padding:4px 7px !important;}
  .footer-bottom{margin-top:8px !important;padding-top:8px !important;font-size:11.5px !important;gap:4px !important;}
}
@media (max-width:380px){
  .navbar .trust-badge{font-size:5.9px !important;}
  .footer-brand p,.footer-col p,.footer-col span,.footer-col a{font-size:12px !important;}
}

/* HABIBI 2026-05-31 - Produits indisponibles : bande Bientôt disponible */
.card.habibi-product-inactive,
.card.habibi-inactive-locked{
  position:relative!important;
  filter:grayscale(1)!important;
  opacity:1!important;
  cursor:not-allowed!important;
  overflow:hidden!important;
}
.card.habibi-product-inactive img,
.card.habibi-inactive-locked img{
  filter:grayscale(1) contrast(.92)!important;
}
.card.habibi-product-inactive::before,
.card.habibi-inactive-locked::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:5!important;
  background:rgba(0,0,0,.34)!important;
  pointer-events:none!important;
}
.card.habibi-product-inactive .inactive-badge,
.card.habibi-inactive-locked .inactive-badge{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:absolute!important;
  top:50%!important;
  left:50%!important;
  right:auto!important;
  width:145%!important;
  max-width:none!important;
  min-height:38px!important;
  padding:10px 18px!important;
  transform:translate(-50%,-50%) rotate(-12deg)!important;
  z-index:15!important;
  border-radius:0!important;
  border-top:1px solid rgba(255,255,255,.32)!important;
  border-bottom:1px solid rgba(255,255,255,.32)!important;
  background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(20,20,20,.96),rgba(0,0,0,.88))!important;
  color:#fff!important;
  font-size:clamp(13px,2.9vw,18px)!important;
  font-weight:950!important;
  line-height:1.1!important;
  letter-spacing:.5px!important;
  text-align:center!important;
  text-transform:uppercase!important;
  box-shadow:0 14px 28px rgba(0,0,0,.30)!important;
  pointer-events:none!important;
}
.card.habibi-product-inactive button,
.card.habibi-product-inactive .btn-whatsapp,
.card.habibi-inactive-locked button,
.card.habibi-inactive-locked .btn-whatsapp{
  pointer-events:none!important;
  opacity:.35!important;
  cursor:not-allowed!important;
  transform:none!important;
}
.card.habibi-product-inactive:hover,
.card.habibi-inactive-locked:hover{
  transform:none!important;
}
body.hb-ar-text .card.habibi-product-inactive .inactive-badge,
body.hb-ar-text .card.habibi-inactive-locked .inactive-badge{
  direction:rtl!important;
  letter-spacing:0!important;
}
@media(max-width:640px){
  .card.habibi-product-inactive .inactive-badge,
  .card.habibi-inactive-locked .inactive-badge{
    min-height:34px!important;
    font-size:clamp(12px,3.4vw,15px)!important;
  }
}


/* HABIBI POPUP PRODUCTS INACTIVE - linked to admin active=0 */
.car-choice-card.hb-choice-inactive{
  position:relative!important;
  overflow:hidden!important;
  filter:grayscale(1)!important;
  cursor:not-allowed!important;
  opacity:1!important;
  pointer-events:none!important;
}
.car-choice-card.hb-choice-inactive img{
  filter:grayscale(1) brightness(.82) contrast(1.04)!important;
  transform:none!important;
}
.car-choice-card.hb-choice-inactive .car-choice-overlay{
  background:linear-gradient(to top, rgba(0,0,0,.76), rgba(0,0,0,.28), rgba(0,0,0,0))!important;
}
.hb-choice-soon-ribbon{
  position:absolute!important;
  z-index:8!important;
  left:50%!important;
  top:50%!important;
  width:86%!important;
  transform:translate(-50%,-50%) rotate(-12deg)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  padding:9px 10px!important;
  border-radius:10px!important;
  background:linear-gradient(135deg,#00a83f,#17d970)!important;
  color:#fff!important;
  font-weight:900!important;
  font-size:13px!important;
  letter-spacing:.2px!important;
  text-transform:uppercase!important;
  box-shadow:0 12px 24px rgba(0,0,0,.28)!important;
  border:1px solid rgba(255,255,255,.45)!important;
  pointer-events:none!important;
}
@media (max-width:600px){
  .hb-choice-soon-ribbon{width:88%!important;font-size:12px!important;padding:8px 9px!important;}
}

/* HABIBI - catégorie principale inactive via admin */
.circle-box.habibi-product-inactive{filter:grayscale(1);opacity:.62;cursor:not-allowed!important;pointer-events:none;position:relative;transform:none!important}
.circle-box.habibi-product-inactive .circle-img{filter:grayscale(1) contrast(.85);opacity:.58}
.circle-box.habibi-product-inactive .inactive-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-10deg);z-index:5;background:linear-gradient(135deg,#111827,#000);color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:8px 13px;font-size:12px;font-weight:900;letter-spacing:.02em;text-align:center;box-shadow:0 14px 28px rgba(0,0,0,.28);white-space:nowrap}


/* =========================================================
   HABIBI ADMIN PRO POPUPS - finition produit 2026-05-31
   - séjour sur une seule ligne
   - retour détail = nom de catégorie, sans double flèche
   ========================================================= */
#popup .booking-row-3,
#popup .booking-row-stay{
  display:grid !important;
  grid-template-columns: minmax(145px, 1.2fr) minmax(82px, .7fr) minmax(92px, .8fr) !important;
  gap:8px !important;
  align-items:end !important;
}
#popup .booking-row-stay .booking-field label{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
#popup .booking-row-stay .booking-field input,
#popup .booking-row-stay .booking-field select{
  width:100% !important;
}
#popup.car-detail-mode .car-choice-back,
.car-choice-back{
  width:auto !important;
  min-width:0 !important;
  height:auto !important;
  min-height:34px !important;
  padding:8px 13px !important;
  border-radius:999px !important;
  font-size:13px !important;
  line-height:1 !important;
  background:linear-gradient(180deg,#111827,#050505) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.18) !important;
  gap:0 !important;
}
.car-choice-back::before{content:none !important; display:none !important;}
.car-choice-back span{
  display:inline !important;
  color:inherit !important;
  font-size:inherit !important;
  font-weight:950 !important;
  white-space:nowrap !important;
}
#popup.car-detail-mode .popup-image-wrap .car-choice-back{
  left:10px !important;
  top:10px !important;
  max-width:calc(100% - 20px) !important;
}
@media(max-width:520px){
  #popup .booking-row-3,
  #popup .booking-row-stay{
    grid-template-columns: minmax(118px, 1.1fr) minmax(64px, .62fr) minmax(78px, .72fr) !important;
    gap:6px !important;
  }
  #popup .booking-row-stay .booking-field label{font-size:10.5px !important;}
  #popup .booking-row-stay .booking-field input,
  #popup .booking-row-stay .booking-field select{
    min-height:35px !important;
    font-size:12.5px !important;
    padding:7px 7px !important;
  }
  #popup.car-detail-mode .car-choice-back,
  .car-choice-back{
    min-height:31px !important;
    padding:7px 10px !important;
    font-size:12px !important;
  }
}
@media(max-width:360px){
  #popup .booking-row-3,
  #popup .booking-row-stay{grid-template-columns:1fr 1fr 1fr !important;}
  #popup .booking-row-stay .booking-field label{font-size:10px !important;}
}


/* HABIBI 2026-05-31 - correction indisponible : une seule structure, badge hors titre */
.hb-coming-soon-ribbon{display:none!important;}
.card.habibi-product-inactive .inactive-badge,
.card.habibi-inactive-locked .inactive-badge{
  top:34%!important;
  transform:translate(-50%,-50%) rotate(-12deg)!important;
}
.hb-choice-soon-ribbon{
  top:34%!important;
  transform:translate(-50%,-50%) rotate(-12deg)!important;
}
@media(max-width:640px){
  .card.habibi-product-inactive .inactive-badge,
  .card.habibi-inactive-locked .inactive-badge{top:32%!important;}
  .hb-choice-soon-ribbon{top:32%!important;}
}

/* HABIBI CLEANUP: doublons CSS exacts supprimés automatiquement, cascade finale conservée. */