.onj-user-menu-toggle {
  border-radius: 999px;
  padding-right: .75rem;
}

.onj-role-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  border: 2px solid rgba(255, 255, 255, .75);
}

.onj-role-avatar--admin {
  background: #f2f4f5;
  color: #145c3b;
}

.onj-role-avatar--buyer {
  background: #fff3cd;
  color: #7a5600;
}

.onj-role-avatar--delivery {
  background: #dff4ff;
  color: #0b5475;
}

.onj-user-greeting {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onj-user-dropdown {
  min-width: 220px;
}

.onj-dropdown-role-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.onj-dropdown-role-icon--admin {
  background: #edf5f0;
  color: #145c3b;
}

.onj-dropdown-role-icon--buyer {
  background: #fff3cd;
  color: #7a5600;
}

.onj-dropdown-role-icon--delivery {
  background: #dff4ff;
  color: #0b5475;
}

.onj-dropdown-logout-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fdeaea;
  font-size: 1.2rem;
}

.onj-footer-truck {
  display: inline-flex;
  vertical-align: middle;
  color: #198754;
}

.onj-profile-role {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: #f5f7f6;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .onj-role-avatar {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }
}


/* V39 — informations livraison dans la barre supérieure */
.onj-delivery-info-trigger {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: #fff;
  border: 0;
  min-width: 0;
}

.onj-delivery-info-trigger:hover,
.onj-delivery-info-trigger:focus {
  color: #d9ffd9;
}

.onj-delivery-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b7ff9f;
  flex: 0 0 auto;
}

.onj-delivery-info-title {
  font-size: 1rem;
  color: #d9ffd2;
}

.onj-delivery-info-subtitle {
  font-size: .78rem;
  color: #c5f4bf;
}

.onj-delivery-info-help {
  width: 18px;
  height: 18px;
  border: 1px solid currentColor;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: #c5f4bf;
}

.onj-delivery-modal {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}

.onj-delivery-modal-list {
  padding-left: 1.4rem;
  font-size: 1.05rem;
  line-height: 1.55;
}

.onj-delivery-modal-list li {
  margin-bottom: 1rem;
  padding-left: .25rem;
}

.onj-delivery-modal-list li::marker {
  color: #198754;
}

.onj-delivery-modal-ok {
  min-width: 220px;
  border-radius: 999px;
}

@media (max-width: 767.98px) {
  .onj-delivery-info-trigger {
    margin-left: .6rem !important;
  }

  .onj-delivery-info-title {
    font-size: .88rem;
  }

  .onj-delivery-info-subtitle {
    font-size: .7rem;
  }

  .onj-delivery-info-icon svg {
    width: 28px;
    height: 28px;
  }

  .onj-delivery-info-help {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .onj-delivery-info-trigger {
    display: none;
  }
}


/* V40 — correction affichage du bloc Livraison */
.onj-delivery-info-trigger {
  color: #fff !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
  white-space: nowrap;
  min-width: max-content;
}

.onj-delivery-info-trigger:hover,
.onj-delivery-info-trigger:focus,
.onj-delivery-info-trigger:active {
  color: #fff !important;
}

.onj-delivery-info-icon,
.onj-delivery-info-title,
.onj-delivery-info-subtitle,
.onj-delivery-info-help {
  color: #fff !important;
}

.onj-delivery-info-trigger .text-start {
  flex: 0 0 auto;
  white-space: nowrap;
}

.onj-delivery-info-title,
.onj-delivery-info-subtitle {
  white-space: nowrap;
}

.onj-delivery-info-help {
  flex: 0 0 18px;
}

.onj-delivery-modal-header {
  padding-left: 2rem;
  padding-right: 1.5rem;
}

.onj-delivery-modal-logo {
  width: 82px;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

@media (max-width: 767.98px) {
  .onj-delivery-info-trigger {
    min-width: max-content;
  }

  .onj-delivery-modal-header {
    padding-left: 1.25rem;
    padding-right: 1rem;
  }

  .onj-delivery-modal-logo {
    width: 64px;
  }

  .onj-delivery-modal-header .modal-title {
    font-size: 1.35rem;
  }
}


/* V41 — taille du logo du popup forcée et protégée contre les styles globaux */
.onj-delivery-modal-logo-wrap {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  flex: 0 0 72px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.onj-delivery-modal-logo-wrap .onj-delivery-modal-logo {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  object-fit: contain !important;
  flex: none !important;
}

@media (max-width: 767.98px) {
  .onj-delivery-modal-logo-wrap {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
    flex-basis: 58px !important;
  }

  .onj-delivery-modal-logo-wrap .onj-delivery-modal-logo {
    width: 58px !important;
    height: 58px !important;
    max-width: 58px !important;
    max-height: 58px !important;
  }
}


/* V43 — Contact menu + footer */
.onj-header-contact-btn {
  white-space: nowrap;
}

.onj-site-footer {
  font-size: .95rem;
}

.onj-footer-contact-link {
  color: #6c757d;
  text-decoration: none;
}

.onj-footer-contact-link:hover,
.onj-footer-contact-link:focus {
  color: #198754;
  text-decoration: underline;
}


/* V44 — suivi de commande */
.onj-tracking-progress {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.onj-tracking-step {
  width: 120px;
  text-align: center;
  flex: 0 0 120px;
}

.onj-tracking-dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e9ecef;
  color: #6c757d;
  font-weight: 700;
  border: 2px solid #ced4da;
}

.onj-tracking-step.is-complete .onj-tracking-dot {
  background: #198754;
  color: #fff;
  border-color: #198754;
}

.onj-tracking-label {
  display: block;
  margin-top: .4rem;
  font-size: .9rem;
  font-weight: 600;
}

.onj-tracking-line {
  height: 3px;
  background: #dee2e6;
  flex: 1 1 auto;
  margin-top: 16px;
  min-width: 30px;
}

.onj-tracking-line.is-complete {
  background: #198754;
}

@media (max-width: 575.98px) {
  .onj-tracking-step {
    width: 88px;
    flex-basis: 88px;
  }

  .onj-tracking-label {
    font-size: .75rem;
  }

  .onj-tracking-dot {
    width: 30px;
    height: 30px;
  }

  .onj-tracking-line {
    margin-top: 14px;
  }
}


/* V45 — badge panier */
.onj-cart-count {
  min-width: 19px;
  height: 19px;
  line-height: 13px;
  font-size: .68rem;
  border: 2px solid #198754;
}

/* V45 — camion de progression du suivi */
.onj-tracking-line {
  position: relative;
}

.onj-tracking-truck {
  position: absolute;
  left: 50%;
  top: 1px;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #198754;
  background: #fff;
  padding: 0 .35rem;
  z-index: 2;
}

.onj-tracking-truck svg {
  display: block;
}


/* V46 — badges panier / administration */
.onj-cart-count {
  position: absolute !important;
  top: -9px !important;
  right: -9px !important;
  left: auto !important;
  transform: none !important;
  z-index: 10;
  min-width: 20px;
  height: 20px;
  line-height: 14px;
  padding: .2rem .38rem;
  font-size: .68rem;
  border: 2px solid #198754;
  overflow: visible;
}

.onj-admin-menu-badge {
  position: absolute !important;
  top: -9px;
  right: -9px;
  min-width: 20px;
  height: 20px;
  line-height: 14px;
  padding: .2rem .38rem;
  font-size: .68rem;
  z-index: 5;
}


/* V47 — badge Panier : cercle plus grand et chiffre mieux centré */
.onj-cart-count {
  top: -10px !important;
  right: -10px !important;

  min-width: 23px !important;
  width: 23px !important;
  height: 23px !important;

  padding: 0 !important;
  border-radius: 50% !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  font-size: .72rem !important;
  font-weight: 700 !important;

  border: 2px solid #198754 !important;
  z-index: 20 !important;

  /* légère remontée optique du chiffre */
  padding-bottom: 1px !important;
}


/* V48 — messages */
.onj-contact-message-body {
  white-space: normal;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

/* V48 — avis clients */
.onj-review-stars {
  white-space: nowrap;
  font-size: 1.15rem;
  letter-spacing: .05rem;
}

.onj-review-stars span {
  color: #d9dee2;
}

.onj-review-stars span.is-active {
  color: #f0ad00;
}

.onj-footer-review-link {
  color: #343a40;
  text-decoration: none;
}

.onj-footer-review-link:hover,
.onj-footer-review-link:focus {
  color: #198754;
  text-decoration: underline;
}

.onj-footer-review-star {
  color: #f0ad00;
  font-size: 1.05rem;
}

/* V48 — chatbot */
.onj-chatbot {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1080;
}

.onj-chat-toggle {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  background: #198754;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.onj-chat-toggle:hover,
.onj-chat-toggle:focus {
  background: #146c43;
}

.onj-chat-panel {
  position: absolute;
  right: 0;
  bottom: 70px;
  width: min(360px, calc(100vw - 32px));
  height: 470px;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.onj-chat-panel[hidden] {
  display: none !important;
}

.onj-chat-header {
  background: #198754;
  color: #fff;
  padding: .85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.onj-chat-messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1rem;
  background: #f7f9f8;
}

.onj-chat-message {
  max-width: 88%;
  padding: .65rem .8rem;
  margin-bottom: .7rem;
  border-radius: 12px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.onj-chat-message--bot {
  background: #fff;
  border: 1px solid #dde5e0;
  margin-right: auto;
}

.onj-chat-message--user {
  background: #198754;
  color: #fff;
  margin-left: auto;
}

.onj-chat-loading {
  opacity: .7;
  font-style: italic;
}

.onj-chat-form {
  border-top: 1px solid #dee2e6;
  padding: .8rem;
  background: #fff;
}

@media (max-width: 575.98px) {
  .onj-chatbot {
    right: 14px;
    bottom: 14px;
  }

  .onj-chat-panel {
    bottom: 66px;
    height: min(470px, calc(100vh - 110px));
  }

  .onj-chat-toggle {
    width: 54px;
    height: 54px;
  }
}


/* V49 — CAPTCHA interne */
.onj-captcha-box {
  padding: 1rem 1rem .25rem;
  border: 1px solid #d9e2dc;
  border-radius: .6rem;
  background: #f8fbf9;
}

.onj-captcha-box label {
  font-weight: 600;
}

.onj-captcha-box input {
  max-width: 220px;
}


/* V52 — footer social / informations */
.onj-footer-socials {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-start;
}

.onj-social-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: #212529;
  text-decoration: none;
  font-weight: 600;
}

.onj-social-link:hover,
.onj-social-link:focus {
  color: #198754;
}

.onj-social-icon {
  width: 22px;
  height: 22px;
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.onj-social-icon svg {
  width: 21px;
  height: 21px;
}

.onj-footer-info-links {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-start;
}

.onj-footer-info-link {
  color: #212529;
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
  text-align: left;
}

.onj-footer-info-link:hover,
.onj-footer-info-link:focus {
  color: #198754;
  text-decoration: underline;
}

.onj-language-btn {
  min-width: 118px;
}

/* V52 — produits indisponibles */
.onj-product-unavailable {
  position: relative;
}

.onj-product-photo-unavailable {
  filter: grayscale(100%);
  opacity: .72;
}

.onj-coming-soon-badge {
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 4;
  background: rgba(33, 37, 41, .9);
  color: #fff;
  border-radius: 999px;
  padding: .35rem .65rem;
  font-size: .72rem;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

.onj-product-filters .btn {
  min-width: 92px;
}

@media (max-width: 767.98px) {
  .onj-footer-socials,
  .onj-footer-info-links {
    align-items: center;
  }
}


/* V53 — vrais drapeaux SVG pour le sélecteur de langue */
.onj-language-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.onj-language-flag {
  display: inline-block;
  width: 22px !important;
  height: 15px !important;
  min-width: 22px;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  vertical-align: middle;
}


/* V55 — pagination catalogue */
#onjCatalogPagination .page-link {
  color: #198754;
  border-color: #d7e5dc;
  min-width: 38px;
  text-align: center;
}

#onjCatalogPagination .page-link:hover,
#onjCatalogPagination .page-link:focus {
  color: #146c43;
  background: #eef8f2;
  border-color: #badbcc;
}

#onjCatalogPagination .page-item.active .page-link {
  color: #fff;
  background: #198754;
  border-color: #198754;
}

#onjCatalogPagination .page-item.disabled .page-link {
  color: #9aa3a0;
  background: #f8f9fa;
  border-color: #e2e6e4;
}

@media (max-width: 575.98px) {
  #onjCatalogPagination .pagination {
    gap: .15rem;
  }

  #onjCatalogPagination .page-link {
    min-width: 34px;
    padding-left: .55rem;
    padding-right: .55rem;
  }
}