/* ============================================================
 * ANSANI GROUP S.R.L. · theme white-label
 * ------------------------------------------------------------
 * Foglio di stile dedicato al merchant "ansani".
 * Incluso automaticamente da inc/head.php quando HTTP_HOST è
 * ansani.ricamby.com.
 *
 * Pantoni istituzionali:
 *   Rosso  · Pantone 185 C ≈ #E30613
 *   Blu    · Pantone 281 C ≈ #17366D
 * Lavora in cascata: viene caricato DOPO theme.css e app.css
 * quindi può fare override senza !important tranne dove serve
 * battere utility Bootstrap.
 * ============================================================ */

:root{
  /* Variabili di brand */
  --ansani-red:            #E30613;
  --ansani-red-dark:       #B8050F;
  --ansani-red-light:      #FDE7E9;   /* tint chiaro per hover/background */
  --ansani-blue:           #17366D;
  --ansani-blue-dark:      #0F244A;

  /* Override delle variabili del design system Ricamby.
     I token "--brand-orange-*" sono usati da ~300 selettori in app.css
     (pill "Vedi tutti", hover, focus ring, badge, outline): mappandoli
     tutti alla triade rossa Ansani evitiamo di fare override singolarmente. */
  --brand-primary:              var(--ansani-red);
  --brand-orange:               var(--ansani-red);
  --brand-orange-dark:          var(--ansani-red-dark);
  --brand-orange-light:         var(--ansani-red-light);
  --merchant-color:             var(--ansani-red);
  --merchant-color-secondary:   var(--ansani-blue);
}

/* ---- Colore primario → rosso Ansani ---- */
.text-brand,
.text-primary{
  color: var(--ansani-red) !important;
}
.btn-brand,
.btn-primary{
  background-color: var(--ansani-red) !important;
  border-color: var(--ansani-red) !important;
}
.btn-brand:hover,
.btn-primary:hover,
.btn-brand:focus,
.btn-primary:focus{
  background-color: var(--ansani-red-dark) !important;
  border-color: var(--ansani-red-dark) !important;
  filter: none;
}
.bg-brand,
.bg-primary{
  background-color: var(--ansani-red) !important;
}
.border-brand{
  border-color: var(--ansani-red) !important;
}

/* ---- Colore secondario → blu navy Ansani ----
   Nota: .text-brand-2 / .bg-brand-2 / .hero-title / .section-heading
   sono già gestiti in app.css tramite var(--merchant-color-secondary),
   che qui sopra abbiamo messo = var(--ansani-blue). Quindi la cascata
   fa tutto senza bisogno di duplicare selettori. */

/* Piccole aggiunte specifiche Ansani: wordmark hero */
body.is-merchant-host h1.display-1,
body.is-merchant-host h1.display-2{
  color: var(--ansani-blue);
}

/* ---- Sezione "Info merchant" nella home ---- */
.merchant-info-section{
  padding: 3rem 0;
  background: #F9FAFB;
}
.merchant-info-section .merchant-info-head h3{
  font-size: 2rem;
  font-weight: 900;
  color: var(--ansani-blue);
}
.merchant-info-section .merchant-info-head .sub{
  color: #6B7280;
}
.merchant-info-card{
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 14px;
  padding: 1.75rem;
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
}
.merchant-info-card h5{
  font-weight: 800;
  color: var(--ansani-blue);
}
.merchant-info-card .mi-contacts li{
  padding: .35rem 0;
  color: #374151;
}
.merchant-info-card .mi-contacts a{
  color: inherit;
  text-decoration: none;
}
.merchant-info-card .mi-contacts a:hover{
  text-decoration: underline;
}
.merchant-stats{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1rem;
  background: #F3F4F6;
  border-radius: 10px;
}
.merchant-stats .ms-item{
  text-align: center;
}
.merchant-stats .ms-n{
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--ansani-red);
  line-height: 1;
}
.merchant-stats .ms-n small{
  font-size: .8rem;
  color: #6B7280;
  font-weight: 600;
}
.merchant-stats .ms-l{
  font-size: .78rem;
  color: #6B7280;
  margin-top: .25rem;
}
@media (min-width: 768px){
  .merchant-stats{ grid-template-columns: repeat(4, 1fr); }
}


/* Footer scuro: manteniamo il footer del marketplace ma usiamo il
   rosso Ansani come accento per i titoli colonna */
body.is-merchant-host .site-footer h5{
  color: #fff;
  border-bottom: 2px solid var(--ansani-red);
  display: inline-block;
  padding-bottom: .35rem;
  margin-bottom: .75rem;
}

/* Badge / pill merchant-specifici */
body.is-merchant-host .badge-brand{
  background-color: var(--ansani-red);
  color: #fff;
}

/* Ribbon marketplace: il gradient di fondo eredita var(--brand-primary)
   (= rosso Ansani). Manteniamo il pill e il testo in bianco pieno per
   garantire leggibilità sullo sfondo rosso intenso. */
body.is-merchant-host .marketplace-ribbon{
  color: #fff;
}
body.is-merchant-host .marketplace-ribbon .mr-pill{
  background: rgba(255,255,255,.22);
  color: #fff;
  border: none;
}
body.is-merchant-host .marketplace-ribbon .mr-txt,
body.is-merchant-host .marketplace-ribbon .mr-cta{
  color: #fff;
}

/* ============================================================
 * SELECT2 · override Pantone Ansani
 * ------------------------------------------------------------
 * I dropdown Select2 vengono appesi a <body> da Select2 stesso,
 * quindi NON possono essere scoped con body.is-merchant-host.
 * Per usarli su ansani.ricamby.com dobbiamo targetare
 * direttamente .select2-container--bootstrap-5 con i Pantoni
 * hardcoded — questa regola è attiva SOLO su questo subdomain
 * perché il file ansani.css è caricato solo quando il merchant
 * risolto è Ansani (vedi inc/head.php).
 * ============================================================ */

/* Option evidenziata (hover o freccia) → rosso Pantone 185 C pieno */
.select2-container--bootstrap-5 .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap-5 .select2-results__option--highlighted{
  background-color: var(--ansani-red) !important;
  color: #fff !important;
}

/* Option attualmente selezionata → tint rosso chiaro */
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true]{
  background-color: var(--ansani-red-light) !important;
  color: var(--ansani-red-dark) !important;
}
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true].select2-results__option--highlighted{
  background-color: var(--ansani-red) !important;
  color: #fff !important;
}

/* Bordi focus del select e del campo di ricerca interno */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection{
  border-color: var(--ansani-red) !important;
  box-shadow: 0 0 0 .2rem rgba(227, 6, 19, .2) !important;   /* halo rosso trasparente */
}
.select2-container--bootstrap-5 .select2-search__field:focus{
  border-color: var(--ansani-red) !important;
  box-shadow: 0 0 0 .15rem rgba(227, 6, 19, .18) !important;
}

/* Caret (freccia) del select box */
.select2-container--bootstrap-5 .select2-selection__arrow b{
  border-color: var(--ansani-red-dark) transparent transparent transparent !important;
}