/*
 * Casavespa Brand Theme
 * Palette : noir #1A1A1A — blanc #FFFFFF — orange #E84E0F
 * Surcharge Hummingbird / Bootstrap 5 via CSS custom properties.
 */

/* ─── Variables de marque ─────────────────────────────────────────────── */
:root {
  --cv-black:          #1A1A1A;
  --cv-black-soft:     #2C2C2C;
  --cv-orange:         #E84E0F;
  --cv-orange-dark:    #C43A07;
  --cv-orange-rgb:     232, 78, 15;
  --cv-white:          #FFFFFF;

  /* Remplace la couleur primaire Bootstrap (bleu → orange) */
  --bs-primary:              #E84E0F;
  --bs-primary-rgb:          232, 78, 15;

  /* NE PAS écraser --bs-link-color globalement : les noms de produits
     sont des liens et resteraient orange. On cible le hover seulement. */
  --bs-link-hover-color:     #C43A07;
  --bs-link-hover-color-rgb: 196, 58, 7;

  /* --header-top-color défini localement sur .header-top ci-dessous */
}

/* ─── Header wrapper ─────────────────────────────────────────────────── */
/* Fond blanc de base — couvert par header-top (blanc) et header-bottom (dégradé) */
.header {
  background-color: var(--cv-white);
}

/* ─── Barre top — fond BLANC, liens NOIRS ────────────────────────────── */
.header-top {
  background-color: var(--cv-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  /* Surcharge les variables _header-top.scss pour les couleurs */
  --header-top-color:       rgba(0, 0, 0, 0.65);
  --header-top-color-hover: var(--cv-orange);
}

.header-top a:not(.dropdown-item),
.header-top .form-select,
.header-top .ps-languageselector,
.header-top .ps-currencyselector {
  color: rgba(0, 0, 0, 0.65);
  background-color: transparent;
}

.header-top a:not(.dropdown-item):hover {
  color: var(--cv-orange);
}

/* ─── Barre principale — fond noir, cellule logo blanche ────────────── */

/* Fond noir uniforme (mobile et desktop) */
.header-bottom {
  background-color: var(--cv-black);
  border-bottom: 2px solid var(--cv-orange) !important;
}

/* Desktop (≥ 992px) : cellule logo blanche + dégradé sur bord gauche du menu */
@media (min-width: 992px) {
  /* Supprime le padding vertical de .header-bottom (0.25rem) pour que la
     cellule logo blanche remplisse toute la hauteur sans bandes noires */
  .header-bottom {
    padding: 0 !important;
  }

  .ps-mainmenu.ps-mainmenu--desktop {
    position: relative;
  }
}

/* Icônes header-bottom (menu, recherche) — sur fond sombre : blanc */
.header-bottom .header-block__action-btn,
.header-bottom .header-block__icon {
  color: rgba(255, 255, 255, 0.85);
}

.header-bottom .header-block__action-btn:hover,
.header-bottom .header-block__action-btn:hover .header-block__icon {
  color: var(--cv-orange) !important;
}

/* Icônes header-top (compte, panier) — sur fond blanc : noir */
.header-top .header-block__action-btn,
.header-top .header-block__icon,
.header-top .header-block__title {
  color: rgba(0, 0, 0, 0.65);
}

.header-top .header-block__action-btn:hover,
.header-top .header-block__action-btn:hover .header-block__icon,
.header-top .header-block__action-btn:hover .header-block__title {
  color: var(--cv-orange) !important;
}

.header-block__badge {
  background-color: var(--cv-orange);
  color: var(--cv-white);
}

.header-bottom .header-block__label {
  color: rgba(255, 255, 255, 0.85);
}

/* ─── Menu navigation desktop ────────────────────────────────────────── */
.ps-mainmenu--desktop .ps-mainmenu__tree-link,
.ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle {
  color: rgba(255, 255, 255, 0.85) !important;
}

.ps-mainmenu--desktop .ps-mainmenu__tree-link:hover,
.ps-mainmenu--desktop .ps-mainmenu__tree-link:focus,
.ps-mainmenu--desktop .ps-mainmenu__tree-link:active,
.ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle:hover,
.ps-mainmenu--desktop .ps-mainmenu__tree-dropdown-toggle:focus {
  color: var(--cv-orange) !important;
  outline-color: var(--cv-orange) !important;
}

.ps-mainmenu--desktop li.current .ps-mainmenu__tree-link {
  color: var(--cv-orange) !important;
}

/* Bouton hamburger (mobile < 992px) — fond noir donc icône blanche */
.ps-mainmenu .menu-toggle {
  color: rgba(255, 255, 255, 0.85) !important;
}

.ps-mainmenu .menu-toggle:hover {
  color: var(--cv-orange) !important;
}

/* ─── Sous-menu dropdown ─────────────────────────────────────────────── */
.ps-mainmenu .submenu {
  background-color: var(--cv-white) !important;
  border-top: 2px solid var(--cv-orange) !important;
}

.ps-mainmenu .submenu__left-item:hover,
.ps-mainmenu .submenu__left-item:focus {
  color: var(--cv-orange);
}

.ps-mainmenu .submenu__left-item.active {
  color: var(--cv-orange);
}

/* ─── Menu mobile (offcanvas) ────────────────────────────────────────── */
.ps-mainmenu--mobile .menu a:hover {
  color: var(--cv-orange);
}

.ps-mainmenu--mobile .menu__link:active {
  color: var(--cv-orange) !important;
}

/* ─── Boutons primaires → orange ─────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg:                   #E84E0F;
  --bs-btn-border-color:         #E84E0F;
  --bs-btn-color:                #fff;
  --bs-btn-hover-bg:             #C43A07;
  --bs-btn-hover-border-color:   #C43A07;
  --bs-btn-hover-color:          #fff;
  --bs-btn-active-bg:            #B33406;
  --bs-btn-active-border-color:  #B33406;
  --bs-btn-active-color:         #fff;
  --bs-btn-focus-shadow-rgb:     var(--cv-orange-rgb);
}

/* Bouton primary désactivé — orange clair (règle directe, surpasse Bootstrap) */
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #E84E0F;
  border-color:     #E84E0F;
  color:            #fff;
  opacity:          0.5;
}

.btn-outline-primary {
  --bs-btn-color:              #E84E0F;
  --bs-btn-border-color:       #E84E0F;
  --bs-btn-hover-bg:           #E84E0F;
  --bs-btn-hover-border-color: #E84E0F;
  --bs-btn-hover-color:        #fff;
  --bs-btn-active-bg:          #C43A07;
  --bs-btn-active-border-color:#C43A07;
  --bs-btn-active-color:       #fff;
}

/* ─── Noms de produits dans les widgets listing — noir, hover orange ─── */
.product-miniature__title,
.product-miniature__title a {
  color: var(--bs-body-color);
}

.product-miniature__title:hover,
.product-miniature__title a:hover {
  color: var(--cv-orange);
}

/* Lien "Voir les détails" dans les miniatures — outline orange */
.product-miniature__details.btn-outline-primary {
  color: var(--cv-orange);
  border-color: var(--cv-orange);
}

.product-miniature__details.btn-outline-primary:hover {
  background-color: var(--cv-orange);
  border-color:     var(--cv-orange);
  color:            var(--cv-white);
}

/* ─── Badges (nouveau, promo) ─────────────────────────────────────────── */
.product-flag.new,
.badge.bg-primary {
  background-color: var(--cv-orange) !important;
}

.discount-percentage,
.discount-amount {
  background-color: var(--cv-orange) !important;
  color: var(--cv-white) !important;
}

/* ─── Pagination ─────────────────────────────────────────────────────── */
.pagination .page-item.active .page-link {
  background-color: var(--cv-orange);
  border-color:     var(--cv-orange);
  color:            var(--cv-white);
}

.pagination .page-link {
  color: var(--cv-orange);
}

.pagination .page-link:hover {
  color: var(--cv-orange-dark);
}

/* ─── Fil d'Ariane ───────────────────────────────────────────────────── */
.breadcrumb-item.active,
.breadcrumb .current {
  color: var(--cv-orange);
}

/* ─── Formulaires — focus ring orange ───────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--cv-orange);
  box-shadow: 0 0 0 0.2rem rgba(232, 78, 15, 0.15);
}

/* ─── Booking widget — cohérence orange ──────────────────────────────── */
.casavespa-booking-widget .form-control:focus {
  border-color: var(--cv-orange);
  box-shadow: 0 0 0 0.2rem rgba(232, 78, 15, 0.15);
}

/* ─── Titre de section (Featured products, Latest arrivals…) ──────── */
.section-title__line {
  background-color: var(--cv-orange);
}

/* ─── Footer — liens hover orange ───────────────────────────────────── */
footer a:hover {
  color: var(--cv-orange);
}