/* Cornici delle card in promozione: un tema per ogni sito.
   La promo non e' un bordo attorno alla card: vive nel prezzo (risparmio, prezzo di prima, tondini, nastri) e usa i colori del brand.
   Ogni sito ha le sue due tinte (--cc-a e --cc-b) e un trattamento diverso; l'orologio flip sulla foto segue le stesse tinte.
   Il markup del prezzo e' in templates/modules/campagna/_prezzo.twig, la classe .campagna-cornice sta sul contenitore della card. */

/* ---------- tinte per sito (classe at<id> sul body) ---------- */
:root { --cc-a: #F1791E; --cc-b: #A70339; --cc-testo: #fff; --cc-t1: #FFA42B; --cc-t2: #A70339; }
.at1, .at10 { --cc-a: #F1791E; --cc-b: #A70339; --cc-t1: #FFA42B; --cc-t2: #A70339; }   /* Romana Auto, Viterbo: arancio e rosso */
.at5 { --cc-a: #161D37; --cc-b: #E83C6E; --cc-t1: #2A3A80; --cc-t2: #FF4F86; }          /* Jazzoni: blu notte e rosa */
.at9 { --cc-a: #FF541B; --cc-b: #008C95; --cc-t1: #FF541B; --cc-t2: #008C95; }          /* Leonori: arancio e ottanio */
.at11 { --cc-a: #1B0032; --cc-b: #FF2DAA; --cc-neon: #CCFF00; --cc-t1: #4B1590; --cc-t2: #FF2DAA; }   /* Auto Ceriani: viola, magenta e lime */
.at12 { --cc-a: #1E1E1E; --cc-b: #F08429; --cc-t1: #FFB347; --cc-t2: #D9560B; }         /* Erreti Auto: nero e arancio */
.at13 { --cc-a: #00366F; --cc-b: #FF2324; --cc-t1: #0A56B0; --cc-t2: #FF2324; }         /* Auto UAU: blu e rosso */
.at17 { --cc-a: #2F8FFF; --cc-b: #213343; --cc-t1: #4FA6FF; --cc-t2: #213343; }         /* Vaigo: azzurro e blu */
.at18 { --cc-a: #E51E2C; --cc-b: #021F93; --cc-t1: #F0303E; --cc-t2: #0A2BC0; }         /* Ignarra Motors: rosso e blu */

/* ---------- pezzi comuni del prezzo in promozione ---------- */
.campagna-info { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 8px; margin: 4px 0; line-height: 1.25; text-align: left; }
.campagna-info .campagna-prezzo-originale { opacity: .8; }
.campagna-info .campagna-ritorno { flex: 1 1 100%; font-size: .68rem; opacity: .7; white-space: normal; }
.campagna-risparmio {
  display: inline-block;
  padding: .12rem .6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cc-a), var(--cc-b));
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ---------- orologio flip sulla foto: tessere nelle tinte del sito, pillola scura ---------- */
.campagna-foto-timer { container-type: inline-size; }
.campagna-foto-timer-pillola {
  max-width: calc(100cqw - .8rem);
  padding: .4rem .55rem .35rem;
  border-radius: .8rem;
  background: rgba(255, 255, 255, .94);
  color: #2b2b2f;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
}
.campagna-foto-timer-titolo { color: #2b2b2f; opacity: .85; }
.campagna-foto-timer .campagna-flip-compatto {
  /* le tessere si adattano alla larghezza della foto (8 cifre + 3 separatori) */
  --flip-w: clamp(.72rem, calc((100cqw - 2.4rem) / 12.5), 1.45rem);
  --flip-h: calc(var(--flip-w) * 1.5);
  gap: calc(var(--flip-w) * .16);
}
.campagna-foto-timer-grande .campagna-flip-compatto { --flip-w: clamp(1.1rem, calc((100cqw - 3rem) / 12.5), 2.1rem); }
.campagna-foto-timer .campagna-flip-etichetta { color: #2b2b2f; opacity: .65; }
.campagna-foto-timer .campagna-flip-due-punti { color: #2b2b2f; opacity: .55; }
/* la sfumatura del sito (--cc-t1 -> --cc-t2, scelte per leggersi bene anche sul bianco della pillola) corre in verticale su tutta la tessera:
   le due meta' ne mostrano meta' ciascuna, senza stacco di colore */
.campagna-flip-compatto .flip-sopra { background: linear-gradient(180deg, var(--cc-t1), var(--cc-t2)) top / 100% 200% no-repeat; color: var(--cc-testo); }
.campagna-flip-compatto .flip-sotto { background: linear-gradient(180deg, var(--cc-t1), var(--cc-t2)) bottom / 100% 200% no-repeat; color: var(--cc-testo); }
.campagna-flip-compatto .flip-sopra::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, 0)); pointer-events: none; }
.campagna-flip-compatto .flip-sotto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .06)); pointer-events: none; }
.campagna-flip-compatto .flip-tessera { color: var(--cc-testo); }
@media (max-width: 575.98px) {
  .campagna-foto-timer-titolo { font-size: .5rem; }
  .campagna-foto-timer .campagna-flip-etichetta { display: none; }
}

/* =====================================================================================================================
   TEMI PER SITO
   ===================================================================================================================== */

/* ---------- Romana Auto (1): "scatto" - il prezzo dentro il riquadro sfumato con il tondino ribasso (come il prezzo ribassato) ---------- */
.at1 .annuncio2.campagna-cornice { box-shadow: 0 14px 26px -16px var(--cc-b); }
.at1 .annuncio2.campagna-cornice::before {
  content: ""; position: absolute; z-index: 9; top: 0; left: 0; right: 0; height: 5px; border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, var(--cc-a), var(--cc-b));
}
.at1 .annuncio2.campagna-cornice .allprezzo {
  position: relative; display: inline-block; margin: 8px 8px 4px 0; padding: 6px 16px 3px 12px;
  border: 3px solid transparent; border-radius: 8px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--cc-a), var(--cc-b)) border-box;
}
.at1 .annuncio2.campagna-cornice .allprezzo .prezzofinale {
  background: linear-gradient(90deg, var(--cc-a), var(--cc-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.at1 .annuncio2.campagna-cornice .allprezzo::after {
  content: ""; position: absolute; top: -13px; right: -11px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cc-b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 62% no-repeat;
  border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}

/* ---------- Romana Auto Viterbo (10): "nastro" - triangolo PROMO sull'angolo e prezzo evidenziato col pennarello ---------- */
.at10 .annuncio2.campagna-cornice { box-shadow: 0 12px 24px -16px var(--cc-a); }
.at10 .annuncio2.campagna-cornice::before {
  content: ""; position: absolute; z-index: 9; top: 0; left: 0; width: 92px; height: 92px; border-radius: 6px 0 0 0;
  background: linear-gradient(135deg, var(--cc-a), var(--cc-b)); clip-path: polygon(0 0, 100% 0, 0 100%); pointer-events: none;
}
.at10 .annuncio2.campagna-cornice::after {
  content: "PROMO"; position: absolute; z-index: 10; top: 22px; left: 4px; width: 60px; text-align: center; transform: rotate(-45deg);
  color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; pointer-events: none;
}
.at10 .annuncio2.campagna-cornice .allprezzo .prezzofinale {
  background: linear-gradient(transparent 58%, rgba(241, 121, 30, .38) 58%); padding: 0 6px; margin-left: -2px; border-radius: 3px;
}

/* ---------- Jazzoni (5): "fascia" - il prezzo diventa una barra sfumata a tutta larghezza ---------- */
.at5 .annuncio3.campagna-cornice { box-shadow: 0 14px 26px -18px var(--cc-b); border-radius: 8px; }
.at5 .annuncio3.campagna-cornice .allprezzo {
  display: block; padding: 8px 14px 6px; border-radius: 8px; margin-bottom: 4px;
  background: linear-gradient(90deg, var(--cc-a), var(--cc-b)) !important; border: 0 !important;
}
.at5 .annuncio3.campagna-cornice .allprezzo .prezzo,
.at5 .annuncio3.campagna-cornice .allprezzo .prezzofinale,
.at5 .annuncio3.campagna-cornice .allprezzo .prezzoda,
.at5 .annuncio3.campagna-cornice .allprezzo .info-text,
.at5 .annuncio3.campagna-cornice .allprezzo small { color: #fff !important; -webkit-text-fill-color: #fff !important; background: none !important; }
.at5 .annuncio3.campagna-cornice .campagna-risparmio { background: #fff; color: var(--cc-b); }

/* ---------- Leonori (9): "bollino" - linguetta PROMO sulla foto e prezzo in pillola arancio ---------- */
.at9 .annuncio6 .campagna-cornice { box-shadow: 0 16px 30px -16px var(--cc-a) !important; }
.at9 .annuncio6 .campagna-cornice::before {
  content: "PROMO"; position: absolute; z-index: 9; top: 18px; left: -8px; padding: 7px 18px 7px 14px;
  background: var(--cc-b); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .12em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%); pointer-events: none;
}
.at9 .annuncio6 .campagna-cornice .border-top .text-primary {
  display: inline-block; padding: 5px 16px; border-radius: 999px; background: var(--cc-a); color: #fff !important; line-height: 1.2;
}
.at9 .annuncio6 .campagna-cornice .campagna-risparmio { background: var(--cc-b); }

/* ---------- Auto Ceriani (11): "neon" - alone magenta attorno alla card e prezzo con sottolineatura lime ---------- */
.at11 .annuncio2.campagna-cornice { box-shadow: 0 0 0 1px var(--cc-b), 0 0 24px rgba(255, 45, 170, .42); border-radius: 8px; }
.at11 .annuncio2.campagna-cornice .allprezzo { display: inline-block; padding-bottom: 2px; border-bottom: 3px solid var(--cc-neon); }
.at11 .annuncio2.campagna-cornice .allprezzo .prezzofinale { color: var(--cc-a) !important; text-shadow: 0 0 14px rgba(255, 45, 170, .35); }
.at11 .annuncio2.campagna-cornice .campagna-risparmio { background: var(--cc-neon); color: var(--cc-a); }

/* ---------- Erreti Auto (12): "etichetta" - prezzo su cartellino nero con la punta, cifra arancio ---------- */
.at12 .annuncio2.campagna-cornice { box-shadow: 0 12px 24px -16px var(--cc-b); }
.at12 .annuncio2.campagna-cornice::before {
  content: ""; position: absolute; z-index: 9; top: 0; left: 0; right: 0; height: 4px; background: var(--cc-b); border-radius: 6px 6px 0 0;
}
.at12 .annuncio2.campagna-cornice .allprezzo {
  display: inline-block; margin: 6px 0 2px; padding: 6px 18px 4px 24px; background: var(--cc-a); color: #fff;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.at12 .annuncio2.campagna-cornice .allprezzo .prezzoda { color: #fff !important; }
.at12 .annuncio2.campagna-cornice .allprezzo .prezzofinale { color: var(--cc-b) !important; }
.at12 .annuncio2.campagna-cornice .campagna-risparmio { background: var(--cc-b); }

/* ---------- Auto UAU (13): "taglio" - prezzo su banda inclinata blu-rosso ---------- */
.at13 .annuncio8.campagna-cornice { box-shadow: 0 14px 26px -16px var(--cc-b); }
.at13 .annuncio8.campagna-cornice .prezzo {
  display: inline-block !important; margin-top: 4px; padding: 2px 20px 2px 14px; transform: skewX(-9deg);
  background: linear-gradient(100deg, var(--cc-a), var(--cc-b)); border-radius: 3px; color: #fff;
}
.at13 .annuncio8.campagna-cornice .prezzo > * { display: inline-block; transform: skewX(9deg); color: #fff !important; }
.at13 .annuncio8.campagna-cornice .campagna-risparmio { background: var(--cc-b); transform: skewX(-9deg); border-radius: 3px; }

/* ---------- Ignarra Motors (18): "barra" - filo verticale sfumato sul lato e prezzo con la tag del risparmio ---------- */
.at18 .annuncio10.campagna-cornice { box-shadow: 0 14px 26px -18px var(--cc-b); }
.at18 .annuncio10.campagna-cornice::before {
  content: ""; position: absolute; z-index: 9; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--cc-a), var(--cc-b));
}
.at18 .annuncio10.campagna-cornice .campagna-risparmio { background: var(--cc-b); border-radius: 3px; }
.at18 .annuncio10.campagna-cornice .annuncio10-prezzo { color: var(--cc-a); }

/* =====================================================================================================================
   SCHEDA AUTO: stessa impostazione delle card. Il marcatore .campagna-scheda sta sul prezzo (se la campagna ha la cornice) e il
   tema del sito lo mette in evidenza come in lista; sotto il prezzo c'e' lo stesso blocco .campagna-info (risparmio, invece di,
   data di ritorno). L'orologio sulla galleria e' quello delle card.
   ===================================================================================================================== */
.campagna-scheda .iconbonus { z-index: 2; }
/* il css della scheda (details-4) forza display:inline sugli span: il marcatore deve restare un blocco in linea per contenere il prezzo */

/* Romana Auto (1): prezzo nel riquadro sfumato con il tondino ribasso */
.at1 .campagna-scheda {
  position: relative; display: inline-block !important; margin: 8px 12px 4px 0; padding: 4px 16px 3px 12px;
  border: 3px solid transparent; border-radius: 8px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, var(--cc-a), var(--cc-b)) border-box;
}
.at1 .campagna-scheda .prezzofinale {
  background: linear-gradient(90deg, var(--cc-a), var(--cc-b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.at1 .campagna-scheda::after {
  content: ""; position: absolute; top: -13px; right: -11px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--cc-b) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v14M6 13l6 6 6-6'/%3E%3C/svg%3E") center / 62% no-repeat;
  border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
}

/* Romana Auto Viterbo (10): prezzo evidenziato col pennarello */
.at10 .campagna-scheda { display: inline-block !important; margin: 4px 0; }
.at10 .campagna-scheda .prezzofinale { background: linear-gradient(transparent 58%, rgba(241, 121, 30, .38) 58%); padding: 0 6px; margin-left: -2px; border-radius: 3px; }

/* Jazzoni (5): la barra sfumata c'e' gia' sulla scheda, il risparmio e' bianco */
.at5 .campagna-scheda .campagna-risparmio { background: #fff; color: var(--cc-b); }

/* Leonori (9): prezzo in pillola arancio */
.at9 .campagna-scheda { display: inline-block !important; padding: 3px 16px; border-radius: 999px; background: var(--cc-a); color: #fff !important; line-height: 1.2; }

/* Auto Ceriani (11): sottolineatura lime e alone magenta */
.at11 .campagna-scheda { display: inline-block !important; padding-bottom: 2px; border-bottom: 3px solid var(--cc-neon); }
.at11 .campagna-scheda .prezzofinale { color: var(--cc-a) !important; text-shadow: 0 0 14px rgba(255, 45, 170, .35); }

/* Erreti Auto (12): cartellino nero con la punta, cifra arancio */
.at12 .campagna-scheda {
  display: inline-block !important; margin: 6px 0 2px; padding: 6px 18px 4px 24px; background: var(--cc-a); color: #fff;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.at12 .campagna-scheda .prezzoda { color: #fff !important; }
.at12 .campagna-scheda .prezzofinale { color: var(--cc-b) !important; }

/* Auto UAU (13): prezzo su banda inclinata blu-rosso */
.at13 .campagna-scheda { position: relative; isolation: isolate; display: inline-block !important; margin-top: 4px; padding: 0 22px 0 16px; color: #fff !important; }
.at13 .campagna-scheda::before {
  content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-9deg); border-radius: 3px;
  background: linear-gradient(100deg, var(--cc-a), var(--cc-b));
}

/* pillola del risparmio, come nelle card */
.at9 .campagna-info .campagna-risparmio,
.at12 .campagna-info .campagna-risparmio,
.at13 .campagna-info .campagna-risparmio { background: var(--cc-b); }
.at13 .campagna-info .campagna-risparmio { border-radius: 3px; }
.at11 .campagna-info .campagna-risparmio { background: var(--cc-neon); color: var(--cc-a); }