/* ============================================================================
   Ledea — interfaccia paziente
   ============================================================================

   Le sei pagine dedicate ai pazienti: bacheca, aggiungi connessione, gestione
   appuntamenti, gestione profilo, prenotazione e prenotazione pubblica.
   Disegno: il bundle «Redesign interfaccia paziente Ledea» di Claude Design.

   PERCHE' UN FILE A SE'. Le pagine dei professionisti — medici, segreteria,
   infermieri — verranno ridisegnate in un secondo momento e non devono cambiare
   aspetto nel frattempo. Il rischio non e' teorico: css/lap_patient_booking.css,
   nonostante il nome, non e' solo dei pazienti — le classi vacf-booking-calendar-*
   le usa anche visit_calendar.php, cioe' il calendario medico. Modificarlo
   colpirebbe lo staff.

   LA REGOLA. OGNI selettore di questo file discende da .le-pt, la classe che
   lep_patient_ui_body_class() mette sul body delle sole sei pagine. Vale anche
   per gli aggiustamenti al calendario, scritti .le-pt .vacf-booking-calendar-*:
   su una pagina dello staff quella classe non c'e' mai, e la regola non si
   applica. Nessun'altra scorciatoia e' ammessa qui dentro — una singola regola
   scritta senza .le-pt davanti vanifica l'intero impianto.

   COLORI. Nessun esadecimale. Tutti i valori scritti a mano nei mockup sono
   token del Ledea Design System, gia' vendorizzato nel tema in
   assets/css/ledea-ds/ e caricato prima di questo foglio dalla catena degli
   enqueue: #04342C e' --teal-900, #FBF8F3 e' --paper, #D3D1C7 e' --gray-100 e
   cosi' via. L'export dentro il bundle di Design e' risultato byte per byte
   identico a quello vendorizzato, quindi non c'e' stato niente da sincronizzare.

   PREFISSO. le-pt-, sulla scia di le-hp- (homepage), le-gate- (varco di accesso)
   e le-404-. Nessuna classe va-* nuova: quelle sono la lista da rinominare, non
   da allungare.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. Il foglio della pagina
   ------------------------------------------------------------------------ */

/* La bacheca e' l'unica pagina su fondo scuro: e' la variante scelta fra quelle
   consegnate da Design. Le altre cinque stanno su carta. La barra in alto e' gia'
   --teal-900 dalla 2.0.0 (.va-navbar-dark), quindi qui il fondo la incontra senza
   stacco, ed e' il motivo per cui il disegno funziona senza toccare header.php. */
body.le-pt--dark {
  background-color: var(--teal-900);
}

/* L'aria in cima alla pagina sta qui e non sulla testata (#148). Fino alla 2.1.0
   la dava il padding-top di .le-pt-head, che pero' e' dentro .le-pt-page: gli
   avvisi, che lep_print_error() stampa dai rami POST in cima al file e quindi
   finiscono FRATELLI della pagina dentro il .row del tema, nascevano attaccati
   alla barra; e il terzo passo delle due prenotazioni, che la testata non la
   stampa, cominciava con .le-pt-steps a zero pixel dalla barra anche senza nessun
   avviso. Spostata sul contenitore, l'aria vale per chiunque venga per primo. Le
   sei pagine senza avvisi restano identiche al pixel: il titolo sta a 48px dalla
   barra prima e dopo.
   Sta sul .row e non sul .va-container perche' il template con cui girano le
   pagine paziente, la_fullwidth_notitle, stampa il contenitore con py-0, cioe'
   padding-top: 0 !important: dichiarato li' non si vedrebbe, e per batterlo
   servirebbe un altro !important. Il .row il padding non ce l'ha. */
body.le-pt .va-container {
  padding-bottom: var(--space-10);
}
body.le-pt .va-container > .row {
  padding-top: var(--space-9);
}

/* Gli avvisi, fratelli della pagina, prendono la sua stessa misura: altrimenti,
   essendo un figlio diretto di .row di un container-fluid, andrebbero da bordo a
   bordo dello schermo sopra una pagina larga 720 o 1000px. La misura la dichiara
   la pagina con il suo modificatore, e :has() la porta al .row. */
body.le-pt .va-container > .row                                  { --le-pt-measure: 1000px; }
body.le-pt .va-container > .row:has(> .le-pt-page--narrow)       { --le-pt-measure: 840px; }
body.le-pt .va-container > .row:has(> .le-pt-page--list)         { --le-pt-measure: 900px; }
body.le-pt .va-container > .row:has(> .le-pt-page--wide)         { --le-pt-measure: 1080px; }
body.le-pt .va-container > .row:has(> .le-pt-page--done)         { --le-pt-measure: 720px; }
body.le-pt .va-container > .row > .alert:not(.vacf-alert-absolute) {
  /* Il margine laterale e' quello che centra una colonna larga la misura della
     pagina, meno il suo stesso padding. Larghezza e margini sono scritti per
     esteso e non come max-width + auto perche' il .row e' un flex che va a capo:
     due avvisi larghi 680px su uno schermo da 1366 starebbero sulla stessa riga. */
  --le-pt-alert-gap: max(var(--space-5), calc((100% - var(--le-pt-measure)) / 2 + var(--space-5)));
  flex: 0 0 auto;
  width: calc(100% - 2 * var(--le-pt-alert-gap));
  margin: 0 var(--le-pt-alert-gap) var(--space-4);
}

/* Il contenuto del plugin arriva dentro .container > .row del tema. Questo e'
   il <main> del disegno: larghezza massima e centratura. Ogni pagina sceglie la
   propria misura con un modificatore, perche' Design le ha date diverse — una
   colonna di form larga 1080 e una pagina di esito larga 720 non sono lo stesso
   documento. */
.le-pt .le-pt-page {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.le-pt .le-pt-page--narrow { max-width: 840px; }
.le-pt .le-pt-page--list   { max-width: 900px; }
.le-pt .le-pt-page--wide   { max-width: 1080px; }
.le-pt .le-pt-page--done   { max-width: 720px; }


/* ---------------------------------------------------------------------------
   2. Testata e tipografia
   ------------------------------------------------------------------------ */

.le-pt .le-pt-head {
  padding: 0 0 var(--space-7);
}
/* Dopo un avviso la testata riprende un po' d'aria, perche' l'avviso chiude con
   il suo margine di 16px e il titolo gli si incollerebbe. */
body.le-pt .va-container > .row > .alert ~ .le-pt-page > .le-pt-head:first-child,
body.le-pt .va-container > .row > .alert ~ .le-pt-page > .le-pt-steps:first-child {
  margin-top: var(--space-5);
}
.le-pt .le-pt-head--split {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
}

.le-pt .le-pt-eyebrow {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}

.le-pt .le-pt-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 40px);
  line-height: 1.05;
  letter-spacing: var(--letter-tight);
  color: var(--teal-900);
}
.le-pt .le-pt-page--dashboard .le-pt-title { font-size: clamp(32px, 5vw, 44px); }

.le-pt .le-pt-lead {
  margin: 12px 0 0;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted-text);
  max-width: 52ch;
  text-wrap: pretty;
}

/* Il ritorno indietro in cima alle testate («Torna al profilo», «Cambia
   struttura o visita»). E' un <a>, quindi porta .le-pt-btn per non finire nella
   regola degli hover dei link di testo del tema. */
.le-pt .le-pt-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary);
  text-decoration: none;
}
.le-pt .le-pt-back:hover,
.le-pt .le-pt-back:focus {
  color: var(--teal-900);
  text-decoration: underline;
}
.le-pt .le-pt-back i { font-size: 12px; }

/* L'onda del marchio sotto il saluto della bacheca. Corallo: e' ornamento di
   marca, l'unico mestiere che al corallo resta insieme al distruttivo. */
.le-pt .le-pt-wave {
  display: block;
  margin-top: 26px;
  width: 200px;
  height: 20px;
  color: var(--coral-200);
}


/* ---------------------------------------------------------------------------
   3. Bottoni
   ------------------------------------------------------------------------ */

/* I quattro pesi del design system, nell'ordine: pieno, tenue, contorno neutro,
   testo. La regola resta quella scritta nel design system — un solo pieno per
   blocco — e il distruttivo ha due pesi perche' coral-600 e teal-600 stanno a
   1,11:1 fra loro: due pieni affiancati sono indistinguibili per un deuteranope.

   .le-pt-btn e' nell'elenco :not() della regola a:not(...):hover del tema
   (ledea-theme/style.css): senza, quella regola — 0,2,1 di specificita' contro
   lo 0,2,0 di .classe:hover — porterebbe l'etichetta di meta' di questi bottoni
   a --bs-secondary con la sottolineatura. E' gia' successo tre volte prima
   d'ora. Gli hover qui sotto sono scritti comunque con la a in testa dove
   servono, come difesa se il tema installato e' indietro di un deploy. */
.le-pt .le-pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.2;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.le-pt .le-pt-btn--sm { padding: 8px 16px; font-size: 13px; }
.le-pt .le-pt-btn--lg { padding: 13px 26px; font-size: 15px; }

/* Peso 1 — il pieno. Una sola volta per blocco. */
.le-pt .le-pt-btn--fill {
  background: var(--primary);
  color: var(--primary-text);
  border-color: var(--primary);
}
.le-pt a.le-pt-btn--fill:hover, .le-pt a.le-pt-btn--fill:focus,
.le-pt button.le-pt-btn--fill:hover, .le-pt button.le-pt-btn--fill:focus {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--primary-text);
  text-decoration: none;
}

/* Peso 2 — il tenue, secondo peso dello stesso ruolo (non una seconda tinta). */
.le-pt .le-pt-btn--soft {
  background: var(--primary-soft-bg);
  color: var(--primary-soft-text);
  border-color: var(--primary-soft-border);
}
.le-pt a.le-pt-btn--soft:hover, .le-pt a.le-pt-btn--soft:focus,
.le-pt button.le-pt-btn--soft:hover, .le-pt button.le-pt-btn--soft:focus {
  background: var(--teal-100);
  color: var(--primary-soft-text);
  text-decoration: none;
}

/* Peso 3 — il contorno neutro: i «Annulla», i «Reimposta». Il filo e' tenue di
   proposito (gray-100 misura 1,45:1 su carta): in Ledea un bottone non pieno e'
   delimitato dall'etichetta, non dalla gabbia. */
.le-pt .le-pt-btn--dismiss {
  background: transparent;
  color: var(--dismiss-text);
  border-color: var(--dismiss-border);
}
.le-pt a.le-pt-btn--dismiss:hover, .le-pt a.le-pt-btn--dismiss:focus,
.le-pt button.le-pt-btn--dismiss:hover, .le-pt button.le-pt-btn--dismiss:focus {
  background: var(--dismiss-hover-bg);
  color: var(--dismiss-hover-text);
  border-color: var(--dismiss-hover-bg);
  text-decoration: none;
}

/* Peso 4 — il testo. */
.le-pt .le-pt-btn--ghost {
  background: transparent;
  color: var(--secondary);
  border-color: transparent;
  text-decoration: underline;
}
.le-pt a.le-pt-btn--ghost:hover, .le-pt a.le-pt-btn--ghost:focus,
.le-pt button.le-pt-btn--ghost:hover, .le-pt button.le-pt-btn--ghost:focus {
  color: var(--secondary-hover);
  text-decoration: underline;
}

/* Distruttivo, due pesi. Il pieno dove e' l'unico riempimento del blocco, il
   tenue dove c'e' gia' un primario pieno accanto. */
.le-pt .le-pt-btn--danger {
  background: var(--danger);
  color: var(--coral-50);
  border-color: var(--danger);
}
.le-pt a.le-pt-btn--danger:hover, .le-pt a.le-pt-btn--danger:focus,
.le-pt button.le-pt-btn--danger:hover, .le-pt button.le-pt-btn--danger:focus {
  background: var(--coral-800);
  border-color: var(--coral-800);
  color: var(--coral-50);
  text-decoration: none;
}
.le-pt .le-pt-btn--danger-soft {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: var(--coral-100);
}
.le-pt a.le-pt-btn--danger-soft:hover, .le-pt a.le-pt-btn--danger-soft:focus,
.le-pt button.le-pt-btn--danger-soft:hover, .le-pt button.le-pt-btn--danger-soft:focus {
  background: var(--coral-100);
  color: var(--coral-900);
  text-decoration: none;
}

/* Uno stato spento per tutte le varianti, cosi' una schermata disabilitata resta
   grigia invece di diventare un arcobaleno. */
.le-pt .le-pt-btn:disabled,
.le-pt .le-pt-btn[aria-disabled="true"],
.le-pt .le-pt-btn.disabled {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  border-color: var(--disabled-border);
  cursor: not-allowed;
  text-decoration: none;
}

/* Sul fondo scuro della bacheca il pieno teal misura 2,21:1 contro --teal-900:
   sotto il 3:1 che WCAG 1.4.11 chiede al contorno di un componente. La sagoma
   del bottone si perderebbe nel fondo anche con l'etichetta leggibile. Stessa
   misura, stessa scelta della pagina 404: pieno CHIARO. */
.le-pt--dark .le-pt-btn--fill {
  background: var(--teal-100);
  color: var(--teal-900);
  border-color: var(--teal-100);
}
.le-pt--dark a.le-pt-btn--fill:hover, .le-pt--dark a.le-pt-btn--fill:focus,
.le-pt--dark button.le-pt-btn--fill:hover, .le-pt--dark button.le-pt-btn--fill:focus {
  background: var(--teal-50);
  border-color: var(--teal-50);
  color: var(--teal-900);
}


/* ---------------------------------------------------------------------------
   4. Superfici: carte, riquadri, stati vuoti
   ------------------------------------------------------------------------ */

.le-pt .le-pt-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.le-pt .le-pt-card--quiet {
  background: var(--page-alt);
}

/* Le carte-link della bacheca: tutta la tessera e' il bersaglio. */
.le-pt .le-pt-tile {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 26px;
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: transform var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.le-pt a.le-pt-tile:hover, .le-pt a.le-pt-tile:focus {
  transform: translateY(-3px);
  border-color: var(--teal-100);
  text-decoration: none;
}
.le-pt .le-pt-tile-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.le-pt .le-pt-tile-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  color: var(--teal-900);
}
.le-pt .le-pt-tile-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-text);
  text-wrap: pretty;
}
.le-pt .le-pt-tile-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
}

/* Le stesse tessere sul fondo scuro della bacheca. */
.le-pt--dark .le-pt-tile {
  background: var(--teal-800);
  border-color: var(--primary);
}
.le-pt--dark a.le-pt-tile:hover, .le-pt--dark a.le-pt-tile:focus {
  border-color: var(--teal-400);
  background: var(--primary);
}
.le-pt--dark .le-pt-tile-icon { background: var(--teal-900); color: var(--teal-200); }
.le-pt--dark .le-pt-tile-title { color: var(--paper); }
.le-pt--dark .le-pt-tile-text  { color: var(--teal-100); }
.le-pt--dark .le-pt-tile-more  { color: var(--teal-200); }
.le-pt--dark .le-pt-title      { color: var(--paper); }
.le-pt--dark .le-pt-lead       { color: var(--teal-100); }
.le-pt--dark .le-pt-eyebrow    { color: var(--teal-200); }

/* Una tessera spenta: sulla bacheca le tre azioni che senza una connessione non
   portano da nessuna parte. Resta cliccabile (la pagina di destinazione spiega
   il perche'), ma non compete piu' con la sola che serve. */
.le-pt .le-pt-tile--muted { opacity: .5; }

/* Le tessere della bacheca stanno su DUE colonne, sempre: 2+2, mai 3+1. Era
   scritta auto-fit con minimo 260px, che dentro i 1000px della pagina ci faceva
   stare tre colonne e mandava la quarta tessera da sola su una riga sua. Il
   disegno dichiara repeat(2, minmax(0,1fr)) sopra gli 880px e una colonna sotto,
   ed e' quello che va scritto: il numero di colonne qui e' una scelta di
   composizione, non il risultato di quanto ci sta. */
.le-pt .le-pt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-bottom: var(--space-8);
}
@media (min-width: 881px) {
  .le-pt .le-pt-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.le-pt .le-pt-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.le-pt .le-pt-split {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}
/* La colonna principale accanto a un aside: due terzi contro uno, e a schermo
   stretto va sotto invece di stringersi. */
.le-pt .le-pt-split-main { flex: 2 1 420px; min-width: 0; }
/* Due schede appaiate che sotto i ~700px vanno una sopra l'altra. */
.le-pt .le-pt-split-half { flex: 1 1 300px; min-width: 0; }

/* Lo stato vuoto: il filo tratteggiato dice «qui non manca niente, non c'e'
   ancora niente», che e' cosa diversa da un errore. */
.le-pt .le-pt-empty {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
  background: var(--page-alt);
}
.le-pt .le-pt-empty-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--teal-900);
}
.le-pt .le-pt-empty-text {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-text);
  text-wrap: pretty;
}
.le-pt .le-pt-empty-text:last-child { margin-bottom: 0; }

/* Il riquadro di aiuto in coda alle pagine. */
.le-pt .le-pt-hint {
  margin-top: 22px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background: var(--page-alt);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-text);
  text-wrap: pretty;
}
.le-pt .le-pt-hint p { margin: 0; }
.le-pt .le-pt-hint i { color: var(--primary); margin-top: 3px; }

.le-pt .le-pt-section { margin-top: var(--space-8); }
.le-pt .le-pt-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--teal-900);
}
.le-pt .le-pt-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* «Prenotazione per»: la targhetta in coda alla scheda della visita, che dice
   per chi e' l'appuntamento e con chi. */
.le-pt .le-pt-forwhom {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--accent-soft);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.le-pt .le-pt-forwhom-k {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--primary);
}
.le-pt .le-pt-forwhom-v {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--teal-900);
}
.le-pt .le-pt-forwhom-s {
  font-size: 14px;
  color: var(--secondary);
}

/* Le targhette: il conteggio, lo stato «Confermato», l'ID della struttura. */
.le-pt .le-pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.le-pt .le-pt-badge--quiet {
  background: var(--gray-50);
  color: var(--muted-text);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}


/* ---------------------------------------------------------------------------
   5. Campi
   ------------------------------------------------------------------------ */

.le-pt .le-pt-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.le-pt .le-pt-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--body-text);
}
.le-pt .le-pt-input,
.le-pt .le-pt-select,
.le-pt .le-pt-textarea {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  background: var(--paper);
  color: var(--gray-900);
  outline: none;
  width: 100%;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.le-pt .le-pt-input:focus,
.le-pt .le-pt-select:focus,
.le-pt .le-pt-textarea:focus {
  border-color: var(--teal-400);
  box-shadow: none;
}
.le-pt .le-pt-input:disabled,
.le-pt .le-pt-select:disabled,
.le-pt .le-pt-textarea:disabled {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}
.le-pt .le-pt-input[readonly] {
  background: var(--gray-50);
  color: var(--muted-text);
}
.le-pt .le-pt-help {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--faint-text);
}

/* Le spunte: consensi e dichiarazioni. Il quadratino prende --control-accent dal
   bridge del design system, qui si sistema solo l'impaginazione. */
.le-pt .le-pt-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.6;
  color: var(--body-text);
  text-wrap: pretty;
}
.le-pt .le-pt-check input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}
.le-pt .le-pt-check a { font-weight: 700; }
/* Il gruppo dei consensi della prenotazione pubblica: due spunte lunghe, che
   distanziate come i campi diventerebbero un muro di testo. */
.le-pt .le-pt-consents {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--space-6);
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--page-alt);
}

/* La barra di ricerca di «Aggiungi connessione»: due campi e il bottone, che
   sotto i 520px vanno a capo uno per riga invece di stringersi a fisarmonica. */
.le-pt .le-pt-search {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}
.le-pt .le-pt-field--mode { flex: 0 1 170px; }
.le-pt .le-pt-field--grow { flex: 1 1 220px; }

.le-pt .le-pt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: var(--space-6);
}
.le-pt .le-pt-actions--start { justify-content: flex-start; }


/* ---------------------------------------------------------------------------
   6. I tre passaggi della prenotazione
   ------------------------------------------------------------------------ */

.le-pt .le-pt-steps {
  list-style: none;
  margin: 0 0 26px;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  align-items: center;
  background: var(--page-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
}
.le-pt .le-pt-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 200px;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--faint-text);
}
.le-pt .le-pt-step-n {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1.5px solid var(--border);
  color: var(--faint-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.le-pt .le-pt-steps li.is-current,
.le-pt .le-pt-steps li.is-done {
  font-weight: 700;
  color: var(--teal-900);
}
.le-pt .le-pt-steps li.is-current .le-pt-step-n,
.le-pt .le-pt-steps li.is-done .le-pt-step-n {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}
.le-pt .le-pt-steps li.is-done { color: var(--muted-text); font-weight: 600; }


/* ---------------------------------------------------------------------------
   7. Riepiloghi: la colonna laterale e la lista di conferma
   ------------------------------------------------------------------------ */

.le-pt .le-pt-aside {
  flex: 1 1 260px;
  min-width: 0;
  background: var(--page-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 26px;
}
@media (min-width: 992px) {
  .le-pt .le-pt-aside--sticky { position: sticky; top: 88px; }
}
.le-pt .le-pt-aside-title {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--letter-eyebrow);
  text-transform: uppercase;
  color: var(--primary);
}
.le-pt .le-pt-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.le-pt .le-pt-dl > div { display: flex; flex-direction: column; gap: 3px; }
.le-pt .le-pt-dl dt {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--faint-text);
}
.le-pt .le-pt-dl dd {
  margin: 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--teal-900);
}
.le-pt .le-pt-dl dd.is-empty { font-weight: 600; color: var(--faint-text); }

.le-pt .le-pt-aside-foot {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted-text);
  text-wrap: pretty;
}
.le-pt .le-pt-aside-foot p { margin: 0; }
.le-pt .le-pt-aside-foot i { color: var(--primary); margin-top: 3px; }

/* La lista di riga dell'esito: etichetta a sinistra, valore a destra. */
.le-pt .le-pt-recap {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 8px 26px;
}
.le-pt .le-pt-recap-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.le-pt .le-pt-recap-row:last-child { border-bottom: none; }
.le-pt .le-pt-recap-k {
  font-size: 14px;
  font-weight: 700;
  color: var(--faint-text);
}
.le-pt .le-pt-recap-v {
  font-size: 16px;
  font-weight: 600;
  color: var(--body-text);
}
.le-pt .le-pt-recap-v--strong {
  font-size: 17px;
  font-weight: 700;
  color: var(--teal-900);
}


/* ---------------------------------------------------------------------------
   8. Gli appuntamenti
   ------------------------------------------------------------------------ */

.le-pt .le-pt-appt {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius-xl);
  padding: 22px;
  margin-bottom: 12px;
  transition: transform var(--duration-base) var(--ease-standard);
}
.le-pt .le-pt-appt:hover { transform: translateY(-2px); }

/* Il passato non e' un errore: e' lo stesso oggetto, spento. Niente filo teal a
   sinistra, che sulle visite in programma dice «questa e' viva». */
.le-pt .le-pt-appt--past {
  background: var(--page-alt);
  border-left-color: var(--border);
}
.le-pt .le-pt-appt--past:hover { transform: none; }

.le-pt .le-pt-appt-date {
  flex-shrink: 0;
  width: 74px;
  text-align: center;
  padding: 12px 0;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.le-pt .le-pt-appt-dow {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.le-pt .le-pt-appt-day {
  margin: 2px 0;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--teal-900);
}
.le-pt .le-pt-appt-my {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--secondary);
}
.le-pt .le-pt-appt--past .le-pt-appt-date { background: var(--gray-50); }
.le-pt .le-pt-appt--past .le-pt-appt-dow,
.le-pt .le-pt-appt--past .le-pt-appt-my { color: var(--faint-text); }
.le-pt .le-pt-appt--past .le-pt-appt-day { color: var(--muted-text); }

.le-pt .le-pt-appt-body { flex: 1 1 240px; min-width: 0; }
.le-pt .le-pt-appt-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--teal-900);
}
.le-pt .le-pt-appt--past .le-pt-appt-title { color: var(--muted-text); }
.le-pt .le-pt-appt-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.le-pt .le-pt-appt-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: 14.5px;
  color: var(--muted-text);
}
.le-pt .le-pt-appt-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.le-pt .le-pt-appt-meta i { color: var(--faint-text); }
.le-pt .le-pt-appt-meta strong { color: var(--body-text); }
.le-pt .le-pt-appt--past .le-pt-appt-meta { color: var(--faint-text); }
.le-pt .le-pt-appt-for {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--faint-text);
}
.le-pt .le-pt-appt-for strong { color: var(--muted-text); }
.le-pt .le-pt-appt-actions { flex-shrink: 0; }

/* Il pieghevole degli appuntamenti passati. */
.le-pt .le-pt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 14px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--teal-900);
}
.le-pt .le-pt-toggle i {
  font-size: 13px;
  color: var(--muted-text);
  transition: transform var(--duration-base) var(--ease-standard);
}
.le-pt .le-pt-toggle[aria-expanded="true"] i { transform: rotate(180deg); }


/* ---------------------------------------------------------------------------
   9. Il profilo
   ------------------------------------------------------------------------ */

.le-pt .le-pt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--primary-text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
}
.le-pt .le-pt-aside--profile { text-align: center; }
.le-pt .le-pt-aside--profile h2 {
  margin: 16px 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--teal-900);
}
.le-pt .le-pt-aside--profile > p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted-text);
  word-break: break-word;
}
.le-pt .le-pt-facts {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.le-pt .le-pt-facts > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.le-pt .le-pt-facts span  { color: var(--faint-text); }
.le-pt .le-pt-facts strong { color: var(--body-text); word-break: break-word; }

.le-pt .le-pt-panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 28px;
  margin-bottom: 18px;
}
.le-pt .le-pt-panel--row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.le-pt .le-pt-panel-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--teal-900);
}
.le-pt .le-pt-panel-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--muted-text);
  text-wrap: pretty;
}
/* Il blocco distruttivo: si annuncia col filo corallo, non col riempimento. */
.le-pt .le-pt-panel--danger { border-color: var(--coral-100); }
.le-pt .le-pt-panel--danger .le-pt-panel-title { color: var(--coral-900); }

/* La lista delle connessioni. */
.le-pt .le-pt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.le-pt .le-pt-item {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 20px 22px;
  transition: border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.le-pt .le-pt-item:hover { border-color: var(--teal-100); transform: translateY(-2px); }
.le-pt .le-pt-item-main {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
  flex: 1 1 240px;
}
.le-pt .le-pt-item-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.le-pt .le-pt-item-title {
  margin: 0 0 5px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--teal-900);
}
.le-pt .le-pt-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13.5px;
  color: var(--muted-text);
}
.le-pt .le-pt-item-body { min-width: 0; }
.le-pt .le-pt-item-actions { flex-shrink: 0; }


/* ---------------------------------------------------------------------------
   10. Gli orari liberi
   ------------------------------------------------------------------------
   Qui si corregge l'aspetto di classi che NON appartengono a questo redesign:
   vacf-booking-calendar-*, definite in lap_patient_booking.css e usate anche da
   visit_calendar.php, cioe' dal calendario medico. Ogni regola discende da
   .le-pt proprio per questo — sulle pagine dello staff quella classe non c'e' e
   niente di tutto questo si applica.

   IL MARKUP DEL CALENDARIO NON E' STATO TOCCATO, ed e' una scelta. Quella
   griglia e' pilotata da lap_patient_booking.js, che si muove sulle classi
   vacf-booking-calendar-day-col-N e sull'attributo data-vacf-current-position
   per far scorrere le colonne con le frecce. Riscriverne il markup avrebbe
   voluto dire riscrivere anche il movimento, che e' la parte piu' delicata di
   queste pagine e non e' cio' che il redesign chiedeva. Il disegno di Design,
   d'altra parte, mostra esattamente la stessa forma: una colonna per giorno,
   con l'intestazione in cima e i pulsanti degli orari sotto.               */

.le-pt .le-pt-slots-head {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.le-pt .le-pt-slots-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--teal-900);
}
.le-pt .le-pt-slots-range {
  margin: 0;
  font-size: 14px;
  color: var(--muted-text);
}

/* Le frecce di scorrimento. Portano .btn.btn-light di Bootstrap, che qui non
   c'entra piu' niente: il tondo del disegno lo si ottiene sovrascrivendo. */
.le-pt .vacf-cal-arrows {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius-pill);
  background: var(--paper);
  border: 1.5px solid var(--border);
  color: var(--secondary);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.le-pt .vacf-cal-arrows:hover {
  background: var(--accent-soft);
  border-color: var(--teal-100);
  color: var(--secondary);
}
.le-pt .vacf-booking-calendar-arrows {
  gap: 8px;
  margin: 0;
}
/* Le due file di frecce, sopra e sotto la griglia, stanno alle estremita' del
   contenitore; qui la barra in cima le raccoglie a destra accanto al titolo. */
.le-pt #row_arrows_top { justify-content: flex-end; }

/* La colonna del giorno. Via il fondo "ghostwhite", che e' un colore di sistema
   e non un token: lo sfondo lo porta il riquadro degli orari attorno. */
.le-pt .vacf-booking-calendar-day {
  background-color: transparent;
  padding: 0;
  margin: 0 6px;
  gap: 8px;
}
.le-pt .vacf-booking-calendar-day-wrapper { align-items: stretch; }

/* L'intestazione del giorno. Era una fascia piena su --bs-secondary (teal-800)
   scritta con !important, quindi anche qui serve !important per sovrascriverla:
   la specificita' da sola non basta. Nel disegno e' una targhetta chiara con il
   giorno della settimana sopra e la data sotto, non una fascia scura. */
.le-pt .vacf-booking-calendar-title,
.le-pt .vacf-booking-calendar-title:hover {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin-top: 0;
  padding: 10px 6px;
  border-radius: 12px;
  background-color: var(--page-alt) !important;
  border-color: var(--page-alt) !important;
  color: var(--body-text) !important;
}
/* Il `margin: 0` non e' decorazione: e' l'unica delle cinque dichiarazioni del
   vecchio blocco `.vacf-patient-cal-*` di lap_patient_booking.css che fosse
   ancora viva, e con quel blocco rimosso questi due <p> ricadrebbero sul
   `margin-bottom: 1rem` che Bootstrap Reboot mette su ogni paragrafo. */
.le-pt .vacf-patient-cal-day {
  display: block;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-text);
}
.le-pt .vacf-patient-cal-num {
  display: block;
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--teal-900);
}

/* Il pulsante di un orario libero. */
.le-pt .vacf-booking-calendar-item {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 8px;
  margin-top: 0;
  border-radius: var(--radius-md);
  background: var(--paper);
  border: 1.5px solid var(--border);
  color: var(--secondary);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.le-pt .vacf-booking-calendar-item:hover {
  background: var(--accent-soft);
  border-color: var(--teal-100);
  color: var(--secondary);
}
/* L'orario scelto. lep_patient_select_booking_time() marca la scelta con la
   classe .active e la toglie da tutti gli altri pulsanti: e' quella la classe
   da riconoscere, e il movimento non e' stato toccato. */
.le-pt .vacf-booking-calendar-item.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-text);
}
/* L'orario occupato porta la barratura oltre al grigio: il colore da solo non
   dice «non si puo'» a chi non lo distingue. La barratura c'era gia' nel markup
   (text-decoration-line-through), qui si accompagna al resto dello stato. */
.le-pt .vacf-booking-calendar-item:disabled,
.le-pt .vacf-booking-calendar-item.disabled {
  background: var(--gray-50);
  border-color: var(--border);
  color: var(--gray-200);
  cursor: not-allowed;
  opacity: 1; /* Bootstrap lo porterebbe a .65, che su questo grigio sparisce */
}
.le-pt .vacf-booking-calendar-text-availability { font-weight: 600; opacity: .75; }

/* «Carica altro» e «Nessuna disponibilita'»: il peso tenue del primario, non il
   pieno — nel riquadro degli orari il pieno e' l'orario scelto. */
.le-pt .vacf-booking-calendar-load-more,
.le-pt .vacf-booking-calendar-load-no-more {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  padding: 11px 8px;
  border-radius: var(--radius-md);
  background: var(--primary-soft-bg);
  border: 1.5px solid var(--primary-soft-border);
  color: var(--primary-soft-text);
}
.le-pt .vacf-booking-calendar-load-more:hover {
  background: var(--teal-100);
  color: var(--primary-soft-text);
  border-color: var(--primary-soft-border);
}
.le-pt .vacf-booking-calendar-load-no-more:disabled {
  background: var(--disabled-bg);
  border-color: var(--disabled-border);
  color: var(--disabled-text);
  opacity: 1;
}
.le-pt .vacf-booking-calendar-day-button { margin: 0 6px; }

/* La barra dell'orario scelto: resta in fondo alla finestra finche' non si
   conferma, perche' il calendario e' piu' alto di uno schermo. */
.le-pt .le-pt-pickbar {
  position: sticky;
  bottom: 16px;
  z-index: 40;
  margin-top: 18px;
  background: var(--surface-card);
  border: 1.5px solid var(--teal-100);
  border-radius: var(--radius-xl);
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-card);
}
.le-pt .le-pt-pickbar-main {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}
.le-pt .le-pt-pickbar-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.le-pt .le-pt-pickbar-k {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted-text);
}
.le-pt .le-pt-pickbar-v {
  margin: 2px 0 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--teal-900);
}


/* ---------------------------------------------------------------------------
   11. L'esito
   ------------------------------------------------------------------------ */

.le-pt .le-pt-done {
  text-align: center;
  padding: 8px 0 32px;
}
.le-pt .le-pt-done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--primary);
  font-size: 36px;
}
.le-pt .le-pt-done .le-pt-title { margin-top: 22px; }
.le-pt .le-pt-done .le-pt-lead {
  margin-inline: auto;
  max-width: 44ch;
}
.le-pt .le-pt-done-mark--bad {
  background: var(--danger-bg);
  color: var(--danger);
}


/* ---------------------------------------------------------------------------
   12. I modali
   ------------------------------------------------------------------------
   Restano modali Bootstrap — data-bs-toggle, il meccanismo non cambia — con le
   superfici del disegno addosso.                                             */

.le-pt .modal-content {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-mock);
}
.le-pt .modal-header,
.le-pt .modal-footer { border: none; }
.le-pt .modal-header { padding: 28px 28px 0; }
.le-pt .modal-body   { padding: 18px 28px; }
.le-pt .modal-footer { padding: 0 28px 28px; gap: 12px; }
.le-pt .modal-footer > * { margin: 0; }
.le-pt .modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--teal-900);
}
.le-pt .modal-body p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-text);
  text-wrap: pretty;
}
.le-pt .modal-body p strong { color: var(--body-text); }

/* Il quadrato d'avviso in testa ai modali distruttivi. */
.le-pt .le-pt-modal-mark {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--danger-bg);
  color: var(--danger);
  display: flex;
  align-items: center;
  justify-content: center;
}
.le-pt .le-pt-modal-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}


/* ---------------------------------------------------------------------------
   13. Avvisi
   ------------------------------------------------------------------------
   Gli alert restano quelli di Bootstrap (lep_generate_alert() li stampa da un
   punto solo, condiviso con le pagine dello staff): qui prendono i raggi e il
   filo del disegno, non un markup nuovo.                                     */

.le-pt .alert {
  border-radius: var(--radius-xl);
  border-width: 1px;
  font-size: 15px;
  line-height: 1.6;
  padding: 18px 20px;
}


/* ---------------------------------------------------------------------------
   14. Movimento
   ------------------------------------------------------------------------ */

@keyframes lePtRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes lePtFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lePtDrift { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }

.le-pt .le-pt-rise {
  animation: lePtRise 500ms var(--ease-standard) both;
}
.le-pt .le-pt-rise--1 { animation-delay:  60ms; }
.le-pt .le-pt-rise--2 { animation-delay: 120ms; }
.le-pt .le-pt-rise--3 { animation-delay: 180ms; }
.le-pt .le-pt-rise--4 { animation-delay: 240ms; }
.le-pt .le-pt-wave { animation: lePtDrift 14s ease-in-out infinite; }
.le-pt .le-pt-fade { animation: lePtFade 240ms both; }

@media (prefers-reduced-motion: reduce) {
  .le-pt *,
  .le-pt *::before,
  .le-pt *::after {
    animation: none !important;
    transition: none !important;
  }
  .le-pt .le-pt-tile:hover,
  .le-pt .le-pt-item:hover,
  .le-pt .le-pt-appt:hover { transform: none; }
}