@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap");

:root {
  font-family: "Montserrat", sans-serif;
  /* Morfimare Colors */
  --accent-color: #307bb4; /* Primary Blue from prenotatraghetti.it */
  --accent-hover: #245d8a;
  --accent-light: #e9f2f8;
  --accent-lighter: #d5e6f3;
  --accent-text: #307bb4;

  --secondary-color: #00bea2; /* Secondary Teal from webstudio.css */
  --secondary-hover: #009d86;

  --btn-color: #307bb4;
  --btn-hover: #245d8a;

  --teal-color: #00bea2;

  --error-bg: #fef2f2;
  --error-text: #b91c1c;
  --error-border: #fca5a5;
  --error-bg-light: #fee2e2;
  --error-border-light: #fecaca;
  --warning-bg: #fefce8;
  --warning-border: #fde047;
  --warning-text: #eab308;
  --summary-bg: #ffffff;
}

.tp-search-summary-bg {
  background-color: var(--summary-bg);
}

.bg-brand-primary {
  background-color: var(--accent-color);
}

.trip-type-toggle button.inactive {
  color: #111827;
  background-color: white;
}

.trip-type-toggle button.inactive:hover {
  background-color: #f3f4f6;
}

.trip-type-toggle button.active {
  background-color: var(--accent-color);
  color: white;
  border-color: var(--accent-color);
  z-index: 10;
}

.routes div label {
  color: #374151;
}

.form-input-base {
  background-color: white;
  box-shadow: none;
  cursor: pointer;
  color: #111827;
  --tw-ring-color: var(--accent-color);
}

.form-input-base:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
  color: #6b7280;
  opacity: 1;
  pointer-events: auto;
}

.form-input-base::placeholder {
  color: inherit;
  opacity: 1;
}

.searchBox .calendar input {
  background-color: white;
  --tw-ring-color: var(--accent-color);
}

.text-accent-custom {
  color: var(--accent-color);
}

.bg-accent-custom {
  background-color: var(--accent-color);
  color: white;
}

.bg-accent-custom:hover {
  filter: brightness(0.9);
}

.border-accent-custom {
  border-color: var(--accent-color);
}

.btn-custom {
  color: white;
  background-color: var(--accent-color);
}

.item-focus-light {
  background-color: var(--accent-light);
}

.item-focus-light:hover {
  background-color: var(--accent-light);
}

.btn-primary {
  color: white;
  background-color: var(--accent-color);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
}

.form-label {
  color: #374151;
}

.fare-badge {
  color: var(--accent-text);
  background-color: var(--accent-lighter);
}

.fare-badge:hover {
  background-color: var(--accent-light);
}

.passenger-card {
  border-left-color: var(--accent-color);
}

.vehicle-card {
  border-left-color: var(--secondary-color, var(--color-orange-500));
}

.switch-checked {
  background-color: var(--accent-color);
}

.error-box {
  background-color: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

.error-box-inline {
  background-color: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border);
}

.error-box-strong {
  background-color: var(--error-bg);
  color: var(--error-text);
  border-color: var(--error-border-light);
}

.error-box-alert {
  background-color: var(--error-bg-light);
  color: var(--error-text);
  border-color: var(--error-border);
}

.warning-box {
  background-color: var(--warning-bg);
  border-color: var(--warning-border);
}

.summary-heading {
  color: var(--accent-text);
}

.maintenance-btn {
  color: white;
  background-color: var(--accent-color);
}

.maintenance-btn:hover {
  background-color: var(--accent-hover);
}

.maintenance-btn:focus {
  --tw-ring-color: var(--accent-color);
}

.focus-visible-outline:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.permanent-outline {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Language Selector */
.tp-language-selector {
  color: #374151;
}

/* Header & Footer specific style custom */
.morfimare-header {
  border-bottom: none;
}

.morfimare-nav-link {
  font-weight: 600;
  font-size: 0.8125rem; /* 13px — fedele allo screenshot */
  transition: color 0.2s ease;
  white-space: nowrap;
}

.morfimare-nav-link:hover {
  color: #FAAC5C !important;
}

/* Link arancione (Prenota Traghetti) — non viene sovrascritto */
.morfimare-nav-link-orange {
  color: #FAAC5C !important;
  font-weight: 700;
}

.morfimare-footer {
  background-color: #10293D !important;
  border-top: none;
  color: #ffffff;
}

/* ============================================================
   CONTACT / CHECKOUT PAGE — Stile Morfimare/Grimaldi
   ============================================================ */

/* Titoli sezione — dark orange, italic, uppercase (come results) */
.pg_contact h1,
.pg_contact h2,
.pg_contact h3,
.pg_contact h4,
.pg_contact .tp-section-title,
.pg_contact .tp-contact-title,
.pg_contact .tp-page-title,
.pg_contact .contact-title {
  color: darkorange !important;
  font-weight: 800 !important;
  font-style: italic !important;
  text-transform: uppercase !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Sottotitolo pagina — grigio scuro */
.pg_contact .contact-subtitle,
.pg_contact .tp-contact-subtitle {
  color: var(--color-gray-600);
}

/* Direzione viaggio (Andata / Ritorno label) */
.pg_contact .contact-trip-direction-label,
.pg_contact .text-gray-900 {
  color: var(--color-gray-600);
}

/* Porto partenza/arrivo */
.pg_contact .tp-trip-port,
.pg_contact .contact-trip-ports {
  color: var(--color-gray-600);
  font-weight: 600 !important;
}

/* Orari imbarco/sbarco */
.pg_contact .tp-trip-time,
.pg_contact .contact-trip-departure-time,
.pg_contact .contact-trip-arrival-time {
  color: var(--color-gray-600);
}

/* Date imbarco/sbarco */
.pg_contact .tp-trip-date,
.pg_contact .contact-trip-departure-date,
.pg_contact .contact-trip-arrival-date {
  color: var(--color-gray-600);
}

/* Label "Imbarco" / "Sbarco" / "Durata" */
.pg_contact .contact-trip-departure-label,
.pg_contact .contact-trip-arrival-label,
.pg_contact .contact-trip-duration-label,
.pg_contact .contact-trip-duration-value {
  color: var(--color-gray-600);
}

/* Freccia e linea durata */
.pg_contact .contact-trip-arrow {
  color: #999 !important;
}

/* Nome nave */
.pg_contact .tp-ship-name,
.pg_contact .contact-trip-ship-name {
  color: var(--color-gray-600);
}

/* Box dettagli viaggio (sfondo grigio chiaro con bordo) */
.pg_contact .contact-trip-details-box,
.pg_contact .tp-summary-trip-details-box,
.pg_contact .tp-trip-details {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
}

/* Righe sistemazioni: "1 x PAX - Passaggio ponte" */
.pg_contact .contact-trip-accommodation-desc,
.pg_contact .text-gray-600 {
  color: var(--color-gray-600);
}

.pg_contact .contact-trip-accommodation-count,
.pg_contact .text-gray-800 {
  color: var(--color-gray-600);
}

/* Prezzo sistemazione a destra */
.pg_contact .contact-trip-accommodation-price,
.pg_contact .contact-insurance-details-price,
.pg_contact .contact-agency-fees-price,
.pg_contact .contact-agency-fee-price,
.pg_contact .contact-agency-comm-price {
  color: var(--color-gray-600);
  font-weight: 600 !important;
}

/* Totale andata/ritorno — blu Morfimare */
.pg_contact .tp-trip-subtotal,
.pg_contact .contact-trip-total-wrapper span {
  color: #307bb4 !important;
  font-weight: 800 !important;
}

/* Totale da pagare — blu Morfimare */
.pg_contact .tp-trip-total,
.pg_contact .tp-total-price-section .text-accent-custom,
.pg_contact .contact-total-section .text-accent-custom,
.pg_contact .contact-agency-est-total,
.pg_contact .effective-price {
  color: #307bb4 !important;
  font-weight: 800 !important;
}

/* Alert "Miglior prezzo" — usa accent-custom che è già blu, ok */
.pg_contact .tp-best-price-alert {
  background-color: #f0f7ff !important;
  border-color: #c5d6e8 !important;
}

/* Assicurazione — box neutro, no rosso */
.pg_contact .tp-insurance-option-container,
.pg_contact .contact-insurance-toggle-wrapper {
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 15px !important;
  margin-top: 15px !important;
}

.pg_contact .tp-insurance-label,
.pg_contact .contact-insurance-label {
  color: var(--color-gray-600);
  font-weight: 600 !important;
}

/* Link info assicurazione */
.pg_contact .contact-insurance-link-wrapper a {
  color: #307bb4 !important;
}

.pg_contact .contact-insurance-link-wrapper a:hover {
  color: var(--accent-hover) !important;
}

/* Sezione totale finale */
.pg_contact .tp-total-price-section,
.pg_contact .contact-total-section {
  border-radius: 10px !important;
  padding: 20px !important;
}

/* Bottone PRENOTA / PAGA — teal/verde Morfimare */
.pg_contact .tp-pay-button,
.pg_contact .tp-btn-action,
.pg_contact .btnlarge,
.pg_contact button[type="submit"] {
  background-color: #00bea2 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  height: 44px !important;
  padding: 0 1.5rem !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}

.pg_contact .tp-pay-button:hover,
.pg_contact .tp-btn-action:hover,
.pg_contact .btnlarge:hover {
  background-color: #009d86 !important;
}

/* Bottoni secondari (Torna indietro, Stampa preventivo) — coerenti con lo stile Morfimare */
.pg_contact .tp-btn-secondary,
.pg_contact .tp-back-button,
.pg_contact .tp-print-button,
.pg_contact .contact-back-button {
  background-color: white !important;
  color: var(--accent-color, #307bb4) !important;
  border: 1px solid var(--accent-color, #307bb4) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 8px !important;
  height: 44px !important;
  padding: 0 1.5rem !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  transition: all 0.2s ease !important;
  cursor: pointer;
}

.pg_contact .tp-btn-secondary:hover:not(:disabled),
.pg_contact .tp-back-button:hover:not(:disabled),
.pg_contact .tp-print-button:hover:not(:disabled),
.pg_contact .contact-back-button:hover:not(:disabled) {
  background-color: var(--accent-light, #e9f2f8) !important;
  color: var(--accent-hover, #245d8a) !important;
  border-color: var(--accent-hover, #245d8a) !important;
}

.pg_contact .tp-btn-secondary svg,
.pg_contact .tp-print-button svg {
  color: currentColor !important;
  stroke: currentColor !important;
}

.pg_contact .tp-btn-secondary:disabled,
.pg_contact .tp-print-button:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Bottoni secondari fuori da /contact (login, area agenzie nel SearchBox/widget):
   stesso stile dei secondari di /contact, a tutta larghezza.
   Selettore con tag per battere le utility Tailwind "!" del markup. */
button.tp-secondary-full {
  width: 100% !important;
  background-color: white !important;
  color: var(--accent-color, #307bb4) !important;
  border: 1px solid var(--accent-color, #307bb4) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: normal !important;
  border-radius: 8px !important;
  height: 44px !important;
  padding: 0 1.5rem !important;
  font-size: 0.875rem !important;
  box-shadow: none !important;
}

/* Sotto "Confronta prezzi": stesso radius effettivo del bottone CERCA
   (.btn-primary in @layer utilities, che batte il 6px non-layered),
   ma più basso e con testo più piccolo */
button.tp-secondary-full.tp-agency-area-button {
  border-radius: calc(var(--radius) + 4px) !important;
  height: 34px !important;
  padding: 0 1rem !important;
  font-size: 0.7rem !important;
}

button.tp-secondary-full:hover:not(:disabled) {
  background-color: var(--accent-light, #e9f2f8) !important;
  color: var(--accent-hover, #245d8a) !important;
  border-color: var(--accent-hover, #245d8a) !important;
}


/* ============================================================
   HOME PAGE + WIDGET — SearchBox stile Morfimare/Grimaldi
   (.pg_home = pagina web, .pers-morfimare = widget Shadow DOM)
   ============================================================ */

/* Label di sezione: corsivo grassetto blu */
.pg_home .home-search-label,
.pg_home .form-label,
.pg_home .tp-search-label,
.pers-morfimare .home-search-label,
.pers-morfimare .form-label,
.pers-morfimare .tp-search-label {
  color: var(--accent-color) !important;
  font-weight: 700 !important;
  font-style: italic !important;
}

/* Toggle Andata/Ritorno — veri radio button via CSS ::before */
.pg_home .home-trip-type-toggle,
.pers-morfimare .home-trip-type-toggle {
  background: transparent !important;
  border: none !important;
  justify-content: flex-start !important;
  gap: 20px;
}

.pg_home .home-trip-type-toggle button,
.pers-morfimare .home-trip-type-toggle button {
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  flex: none !important;
  padding: 4px 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 400;
}

/* Cerchio radio button */
.pg_home .home-trip-type-toggle button::before,
.pers-morfimare .home-trip-type-toggle button::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--accent-color);
  background-color: white;
  flex-shrink: 0;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Radio selezionato: pallino blu con cerchio bianco interno */
.pg_home .home-trip-type-toggle button.active,
.pers-morfimare .home-trip-type-toggle button.active {
  color: var(--accent-color) !important;
  font-weight: 600 !important;
  background: transparent !important;
}

.pg_home .home-trip-type-toggle button.active::before,
.pers-morfimare .home-trip-type-toggle button.active::before {
  background-color: var(--accent-color) !important;
  box-shadow: inset 0 0 0 2.5px white;
  border-color: var(--accent-color) !important;
}

.pg_home .home-trip-type-toggle button.inactive:hover,
.pers-morfimare .home-trip-type-toggle button.inactive:hover {
  color: var(--accent-color);
}

/* Bottone CERCA — uppercase bold full width */
.pg_home .tp-search-button,
.pers-morfimare .tp-search-button {
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  font-weight: 800 !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
  font-size: 0.95rem !important;
  background-color: var(--accent-color) !important;
  color: white !important;
}

.pg_home .tp-search-button:hover:not(:disabled),
.pers-morfimare .tp-search-button:hover:not(:disabled) {
  background-color: var(--accent-hover) !important;
}

/* Input con bordo visibile stile Grimaldi */
.pg_home .form-input-base,
.pers-morfimare .form-input-base {
  border-color: #c5d6e8;
}

.pg_home .form-input-base:hover,
.pg_home .form-input-base:focus,
.pers-morfimare .form-input-base:hover,
.pers-morfimare .form-input-base:focus {
  border-color: var(--accent-color);
}

/* ============================================================
   RESULTS PAGE — Stile Morfimare/Grimaldi
   ============================================================ */

/* Titoli "SELEZIONA ANDATA" / "SELEZIONA RITORNO" — dark orange */
.pg_results .tp-section-title,
.pg_results .tp-oneway-results-title,
.pg_results .tp-return-results-title {
  color: darkorange !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
  font-style: italic !important;
  letter-spacing: 0.01em;
  border-bottom: 2px solid darkorange;
  padding-bottom: 0.5rem;
}

/* Orario di partenza/arrivo — grigio scuro #666666 */
.pg_results .tp-trip-time {
  color: var(--color-gray-600);
}

/* Barra riassuntiva: testi grigio scuro #666666 (non blu accent) */
.pg_results .tp-search-summary-card .text-accent-custom,
.pg_results .tp-search-summary-bg .text-accent-custom,
.pg_results .tp-summary-route .text-accent-custom,
.pg_results .tp-search-summary-card [class*="text-accent-custom"],
.pg_results .tp-search-summary-bg [class*="text-accent-custom"] {
  color: var(--color-gray-600);
}

.pg_results .tp-search-summary-card .text-accent-custom svg,
.pg_results .tp-search-summary-bg .text-accent-custom svg,
.pg_results .tp-summary-route svg {
  color: var(--color-gray-600);
}

/* Badge tariffa — BIANCO su BLU */
.pg_results .fare-badge,
.pg_results .tp-fare-badge {
  background-color: var(--accent-color) !important;
  color: white !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  padding: 0.2rem 0.65rem !important;
}

.pg_results .fare-badge:hover,
.pg_results .tp-fare-badge:hover {
  background-color: var(--accent-hover) !important;
}

/* Card traghetto — flat, bordo leggero */
.pg_results .tp-trip-card {
  border-radius: 10px !important;
  border: 1px solid #dde6ef !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
}

/* Colonna sinistra — flex column */
.pg_results .tp-trip-details {
  flex-direction: column !important;
}

/* Container logo/nave (dopo separazione da fare badge) */
.pg_results .tp-company-container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px;
  text-align: left !important;
  margin-bottom: 0.5rem;
}

.pg_results .tp-company-logo {
  margin: 0 !important;
  width: 70px !important;
  height: 30px !important;
  object-fit: contain !important;
}

.pg_results .tp-company-name-fallback {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gray-600);
}

.pg_results .tp-ship-name {
  font-size: 0.72rem !important;
  color: var(--color-gray-600);
  margin-top: 0 !important;
  display: inline !important;
}

/* Testi card — grigio scuro #666666 */
.pg_results .tp-trip-port {
  color: var(--color-gray-600);
  font-size: 1rem !important;
}

.pg_results .tp-trip-date {
  color: var(--color-gray-600);
}

/* ── Solution boxes ─────────────────────────────────────────── */

/* Contenitore: gap al posto dei divide-x piatti */
.pg_results .tp-solutions-container {
  gap: 8px !important;
  padding: 12px 10px !important;
  align-items: stretch !important;
}

/* Scheda interna: bordo semplice su tutti i lati + radius + ombra leggera
   (sovrascrive anche i bordi divide-x ereditati dal container) */
.pg_results .tp-solutions-container > .tp-solution-box,
.pg_results .tp-solution-box {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
  background-color: white !important;
  margin: 0 !important;
}

.pg_results .tp-solution-box.is-available:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
  border-color: #c5d6e8 !important;
}

.pg_results .tp-solution-box.is-selected,
.pg_results .tp-solution-box.is-expanded {
  background-color: var(--accent-light) !important;
  border: 2px solid var(--accent-color) !important;
  box-shadow: none !important;
}

/* Nasconde gli overlay di bordo (border-2 / border-b-2) del componente:
   il bordo della selezione è dato solo dal border semplice qui sopra */
.pg_results .tp-solution-box > .absolute.border-accent-custom {
  display: none !important;
}

/* Riepilogo ricerca: bordo semplice (niente border-top spesso né ombra) */
.pg_results .tp-search-summary-card {
  border: 2px solid #9dbbd6 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.pg_results .tp-solution-box.not-available {
  background-color: #f8f9fa !important;
  box-shadow: none !important;
  border-color: #e9ecef !important;
}

/* Tutto dentro la solution box — grigio scuro #666666 */
.pg_results .tp-solution-box .text-primary,
.pg_results .tp-solution-box .text-gray-700,
.pg_results .tp-solution-box .text-gray-900 {
  color: var(--color-gray-600);
}

/* Icona SVG: usa stroke=currentColor, serve anche stroke */
.pg_results .tp-solution-box svg {
  color: var(--color-gray-600);
}

/* Separatore A/R */
.pg_results .tp-results-separator {
  background-color: #e5e7eb !important;
  height: 1px !important;
}

/* ── Bottone MODIFICA — BIANCO su dark orange ───────────────── */
/* Desktop: il button è dentro .tp-summary-edit-desktop */
.pg_results .tp-summary-edit-desktop button {
  background-color: darkorange !important;
  background-image: none !important;
  color: white !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  border: none !important;
}

/* Icona SVG dentro il bottone MODIFICA — bianca */
.pg_results .tp-summary-edit-desktop button svg {
  color: white !important;
  stroke: white !important;
}

/* Sovrascrivi le classi Tailwind hardcodate sul button */
.pg_results .tp-summary-edit-desktop button.bg-gray-100 {
  background-color: darkorange !important;
}

.pg_results .tp-summary-edit-desktop button.text-accent-custom {
  color: white !important;
}

.pg_results .tp-summary-edit-desktop button.hover\:bg-gray-200:hover,
.pg_results .tp-summary-edit-desktop button:hover {
  background-color: #cc7000 !important;
  color: white !important;
}

/* Mobile: icona con sfondo darkorange */
.pg_results .tp-summary-edit-mobile {
  background-color: darkorange !important;
  color: white !important;
  border-radius: 6px !important;
  padding: 6px !important;
}

.pg_results .tp-summary-edit-mobile svg,
.pg_results .tp-summary-edit-mobile .text-accent-custom {
  color: white !important;
}