/**
 * Medical Pro Service - Child Theme
 * Override des couleurs du thème Classic
 *
 * Palette :
 * - Vert standard : #50A15E
 * - Vert foncé : #4FA05D
 * - Noir : #242424
 * - Gris clair : #F6F6F6
 * - Gris standard : #DEDEDE
 */

/* ==========================================================================
   Google Fonts - Roboto Condensed
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap");

:root {
  /* Colors */
  --mps-primary: #50a15e;
  --mps-primary-dark: #42974f;
  --mps-black: #242424;
  --mps-gray-light: #f6f6f6;
  --mps-gray: #dedede;

  /* Breakpoints (aligned with Creative Elements) */
  --mps-breakpoint-xs: 576px;
  --mps-breakpoint-sm: 768px;
  --mps-breakpoint-md: 992px;
  --mps-breakpoint-lg: 1200px;
  --mps-breakpoint-xl: 1400px;

  /* Spacing */
  --mps-container-padding: 20px;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--mps-primary);
}

a:hover,
a:focus {
  color: var(--mps-primary-dark);
}

/* ==========================================================================
   Helpers
   ========================================================================== */
.mt-50 {
  margin-top: 50px;
}

.mps_container {
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: 40px;
}

/* Mobile & Tablet: add side padding */
@media (max-width: 1199px) {
  .mps_container {
    padding-inline: var(--mps-container-padding);
  }
}
/* ==========================================================================
   Buttons
   ========================================================================== */

.btn-primary {
  background-color: var(--mps-primary) !important;
  border-color: var(--mps-primary) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--mps-primary-dark) !important;
  border-color: var(--mps-primary-dark) !important;
}

/* Add to cart button */
.add-to-cart,
#add-to-cart-or-refresh .add-to-cart,
.product-add-to-cart .add-to-cart {
  background-color: var(--mps-primary) !important;
  border-color: var(--mps-primary) !important;
}

.add-to-cart:hover,
#add-to-cart-or-refresh .add-to-cart:hover,
.product-add-to-cart .add-to-cart:hover {
  background-color: var(--mps-primary-dark) !important;
  border-color: var(--mps-primary-dark) !important;
}

/* ==========================================================================
   Product Flags / Badges
   ========================================================================== */

.product-flag.new,
.product-flag.on-sale,
.product-flag.discount,
.product-flag.pack {
  background-color: var(--mps-primary);
}

/* Discount percentage */
.discount-percentage,
.discount-amount {
  background-color: var(--mps-primary);
}

/* ==========================================================================
   Prices
   ========================================================================== */

.product-price,
.current-price,
.current-price-value,
.price {
  color: var(--mps-primary);
}

/* ==========================================================================
   Cart
   ========================================================================== */

.cart-preview .cart-products-count,
.blockcart .cart-products-count {
  background-color: var(--mps-primary);
}

/* ==========================================================================
   Forms
   ========================================================================== */

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--mps-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(80, 161, 94, 0.25) !important;
}

/* Custom checkboxes/radios */
.custom-checkbox input[type="checkbox"]:checked + span,
.custom-radio input[type="radio"]:checked + span {
  background-color: var(--mps-primary);
  border-color: var(--mps-primary);
}

/* ==========================================================================
   Pagination (style aligné avec le blog)
   ========================================================================== */

nav.pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: 40px;
  width: 100%;
}

.pagination .page-list {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 5px;
  justify-content: center;
  flex-wrap: wrap;
}

.pagination .page-list li {
  margin: 0;
}

.pagination .page-list li a,
.pagination .page-list li span.spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 10px 15px;
  background: var(--mps-gray-light);
  color: var(--mps-black);
  text-decoration: none;
  border-radius: 0;
  border: none;
  transition: all 0.3s ease;
  font-size: 14px;
}

.pagination .page-list li.current a,
.pagination .page-list li a:hover {
  background: var(--mps-primary);
  color: #fff;
}

.pagination .page-list li a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Flèches Previous/Next */
.pagination .page-list li a.previous,
.pagination .page-list li a.next {
  background: var(--mps-primary);
  color: #fff;
  padding: 10px 20px;
}

.pagination .page-list li a.previous:hover,
.pagination .page-list li a.next:hover {
  background: var(--mps-primary-dark);
}

.pagination .page-list li a .material-icons {
  font-size: 18px;
  line-height: 1;
}

/* Texte "Affichage x-y de z" */
.pagination .col-md-4 {
  font-size: 13px;
  color: #666;
  margin-bottom: 10px;
}

/* Fix layout - centrer la liste de pages */
.pagination .col-md-6 {
  width: 100%;
  max-width: 100%;
  flex: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */

.breadcrumb a {
  color: var(--mps-primary);
}

.breadcrumb a:hover {
  color: var(--mps-primary-dark);
}

/* ==========================================================================
   Footer
   ========================================================================== */

#footer a:hover {
  color: var(--mps-primary);
}

/* ==========================================================================
   Category / Facets
   ========================================================================== */

.facet-label.active,
.facet-label:hover {
  color: var(--mps-primary);
}

/* Category menu active */
#category-tree .category-sub-menu .category-sub-link:hover,
.block-categories .category-sub-menu .category-sub-link:hover {
  color: var(--mps-primary);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert.alert-info {
  background-color: var(--mps-primary);
  border: none;
  color: white;
}

.alert.alert-info a {
  color: white;
  text-decoration: underline;
}

.alert.alert-info a:hover {
  color: white;
  opacity: 0.8;
}

/* ==========================================================================
   Progress bars
   ========================================================================== */

.progress-bar {
  background-color: var(--mps-primary);
}

/* ==========================================================================
   Tabs
   ========================================================================== */

.nav-tabs .nav-link.active {
  border-bottom-color: var(--mps-primary);
  color: var(--mps-primary);
}

/* ==========================================================================
   Selection highlight
   ========================================================================== */

::selection {
  background-color: var(--mps-primary);
  color: white;
}

/* ==========================================================================
   Body text color
   ========================================================================== */

body {
  font-family: "Roboto Condensed", sans-serif;
  color: var(--mps-black);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto Condensed", sans-serif;
  color: var(--mps-black);
}

/* ==========================================================================
   Background colors
   ========================================================================== */

.bg-light,
.block-categories,
.featured-products {
  background-color: var(--mps-gray-light) !important;
}

/* ==========================================================================
   Product Flags - Out of stock
   ========================================================================== */

.product-flag.out_of_stock {
  background-color: var(--mps-primary-dark) !important;
}

/* ==========================================================================
   Layout global - Wrapper & Container
   ========================================================================== */

#wrapper {
  padding-top: 0;
  background: white;
}

#wrapper .container {
  max-width: 100%;
  width: 100%;
  padding: 0;
}

#wrapper .container > .row {
  margin: 0;
}

#content-wrapper {
  padding: 0;
}

#product-brand-img-link.product-brand-img-link img {
  max-height: 40px !important;
  width: auto !important;
  height: auto !important;
}

/* Masquer le sélecteur de quantité quand le produit n'est pas commandable */
body.page-product:not(.product-available-for-order)
  .elementor-widget-product-quantity {
  display: none;
}

/* Masquer aussi quand le produit est en rupture (stock à 0 mais available_for_order activé) */
body.page-product:has(.ce-product-stock--out-of-stock)
  .elementor-widget-product-quantity {
  display: none;
}

/* ==========================================================================
   BREADCRUMB
   ========================================================================== */

#wrapper .breadcrumb {
  background-color: var(--mps-primary);
  padding: 20px var(--mps-container-padding);
}

/* Desktop: larger side padding */
@media (min-width: 768px) {
  #wrapper .breadcrumb {
    padding: 20px 60px;
  }
}

#wrapper .breadcrumb,
#wrapper .breadcrumb a,
#wrapper .breadcrumb a:hover,
#wrapper .breadcrumb li::after,
#wrapper .breadcrumb span {
  color: white;
}

#wrapper .breadcrumb li::after {
  content: "›";
}

/* ==========================================================================
   Cart Page - Title with arrow icon (using cew-title-arrow style)
   ========================================================================== */

.cart-container .card-block {
  display: flex;
  align-items: center;
  gap: 20px;
}

.cart-container .card-block::before {
  content: "";
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background-color: var(--mps-primary);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}

.cart-container .card-block .h1 {
  margin: 0;
  font-size: 47px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--mps-black);
}

.product-line-grid-body > .product-line-info > .label {
  padding: 0;
  font-weight: 400;
  line-height: inherit;
  text-align: left;
  white-space: inherit;
  color: var(--mps-black);
}

.blockreassurance_product .item-product svg path {
  fill: var(--mps-primary);
}

/* ==========================================================================
   Checkout Page - Step titles
   ========================================================================== */

.checkout-step .step-title.h3 {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  font-size: 47px !important;
  font-weight: 300 !important;
  text-transform: uppercase;
  color: #ddd;
}

.checkout-step .step-title .step-number {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 56px !important;
  height: 56px !important;
  border: none !important;
  border-radius: 50%;
  font-size: 24px !important;
  font-weight: 400;
  color: white !important;
  background-color: #ddd !important;
}

/* Active step */
.checkout-step.-current .step-title.h3 {
  color: var(--mps-black);
}

.checkout-step.-current .step-title .step-number {
  color: white !important;
  background-color: var(--mps-primary) !important;
}

/* ==========================================================================
   Page Header - Title with arrow icon (authentication, account pages, etc.)
   ========================================================================== */

.mps-page-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.mps-page-header::before {
  content: "";
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background-color: var(--mps-primary);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}

.mps-page-header h1 {
  margin: 0;
  font-size: 47px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--mps-black);
}

/* Mobile & Tablet: smaller header */
@media (max-width: 767px) {
  .mps-page-header {
    gap: 15px;
  }

  .mps-page-header::before {
    width: 40px;
    height: 40px;
    background-size: 20px;
  }

  .mps-page-header h1 {
    font-size: 28px;
  }
}

/* ==========================================================================
   Override theme blue color (#24b9d7) with MPS primary
   ========================================================================== */

/* Links hover */
a:focus,
a:hover {
  color: var(--mps-primary-dark);
}

/* Buttons outline primary */
.btn-outline-primary {
  color: var(--mps-primary);
  border-color: var(--mps-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.focus,
.btn-outline-primary.active,
.btn-outline-primary:active,
.open > .btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--mps-primary);
  border-color: var(--mps-primary);
}

/* Button link */
.btn-link {
  color: var(--mps-primary);
}

.btn-link:focus,
.btn-link:hover {
  color: var(--mps-primary-dark);
}

/* Dropdown items */
.dropdown-item:focus,
.dropdown-item:hover {
  background-color: var(--mps-primary);
}

.dropdown-item.active,
.dropdown-item.active:focus,
.dropdown-item.active:hover {
  background-color: var(--mps-primary);
}

/* Nav pills */
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:focus,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-item.open .nav-link,
.nav-pills .nav-item.open .nav-link:focus,
.nav-pills .nav-item.open .nav-link:hover {
  background-color: var(--mps-primary);
}

/* Cards */
.card-primary {
  background-color: var(--mps-primary);
  border-color: var(--mps-primary);
}

.card-outline-primary {
  border-color: var(--mps-primary);
}

/* Tags */
.tag-primary {
  background-color: var(--mps-primary);
}

/* List group */
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
  background-color: var(--mps-primary);
  border-color: var(--mps-primary);
}

/* Background & text utilities */
.bg-primary {
  background-color: var(--mps-primary) !important;
}

.text-primary {
  color: var(--mps-primary) !important;
}

/* Form controls focus */
.form-control:focus,
.input-group.focus {
  border-color: var(--mps-primary);
}

/* Custom radio */
.custom-radio input[type="radio"]:checked + span {
  background-color: var(--mps-primary);
  border-color: var(--mps-primary);
}

/* Search widget */
.search-widget form input[type="text"]:focus {
  border-color: var(--mps-primary);
}

/* Product miniature quick view */
.product-miniature .highlighted-informations .quick-view:hover {
  color: var(--mps-primary);
}

/* Sort dropdowns */
.brands-sort .select-list:hover,
.products-sort-order .select-list:hover,
.suppliers-sort .select-list:hover {
  background-color: var(--mps-primary);
}

/* Facet dropdown */
.facet-dropdown.open > .select-title {
  background-color: var(--mps-primary);
}

.facet-dropdown .select-list:hover {
  background-color: var(--mps-primary);
}

/* Product flags */
.product-flags li.product-flag {
  background-color: var(--mps-primary);
}

/* Product customization */
.product-customization .product-message:focus {
  border-color: var(--mps-primary);
}

/* Promo block */
.block-promo .promo-input + button {
  background-color: var(--mps-primary);
}

.block-promo .promo-code-button.cancel-promo {
  color: var(--mps-primary);
}

/* Footer links */
.account-list a:hover,
.footer-container li a:hover {
  color: var(--mps-primary);
}

/* Social block */
.block-social ul li:hover {
  background-color: var(--mps-primary);
}

/* Newsletter */
.block_newsletter form input[type="text"]:focus,
.block_newsletter form input[type="email"]:focus {
  border-color: var(--mps-primary);
}

/* Product images thumbnails */
.product-images > li.thumb-container .thumb.selected,
.product-images > li.thumb-container .thumb:hover {
  border-color: var(--mps-primary);
}

/* ==========================================================================
   My Account Page - Icons hover
   ========================================================================== */

.page-my-account #content .links a:hover i {
  color: var(--mps-primary);
}

/* Carousel controls, dropdown expand, search widget */
.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i,
.dropdown:hover .expand-more,
.search-widget form button[type="submit"] .search:hover,
.top-menu .sub-menu a:hover {
  color: var(--mps-primary);
}

/* ==========================================================================
   Contact Page - Hide duplicate titles + align sidebar with form
   ========================================================================== */

.page-contact .contact-rich > h4,
.page-contact .contact-form h3 {
  display: none;
}

.page-contact #main > .row {
  align-items: flex-start;
}

.page-contact .contact-rich {
  margin-top: 55px;
}

/* Contact form file input button */
.page-contact .contact-form .btn-file,
.contact-form .input-group .btn {
  background-color: var(--mps-primary);
  border-color: var(--mps-primary);
}

.page-contact .contact-form .btn-file:hover,
.contact-form .input-group .btn:hover {
  background-color: var(--mps-primary-dark);
  border-color: var(--mps-primary-dark);
}

/* ==========================================================================
   CMS Pages - Text color
   ========================================================================== */

.page-content.page-cms p,
.page-content.page-cms ul,
.page-content.page-cms li {
  color: var(--mps-black);
}

/* ==========================================================================
   Category List widget - Hide when no subcategories
   ========================================================================== */

.elementor-widget-category-list:has(.elementor-icon-list-items:empty) {
  display: none;
}

/* ==========================================================================
   Blog - Mobile & Tablet padding
   ========================================================================== */

@media (max-width: 1199px) {
  .mpsblog-listing,
  .mpsblog-category,
  .mpsblog-article-detail {
    padding-inline: var(--mps-container-padding);
  }
}