/* assets/css/site-custom.css
   Ajustari specifice peste tema Tourex, pentru integrarea cu vacanteall.inclusive.ro.
   NU modifica assets/tourex/css/*.css direct — acelea sunt fisierele originale ale
   template-ului, pastrate neatinse ca sa fie usor de actualizat daca schimbam tema. */

/* Header-ul nostru e solid (nu transparent suprapus peste hero, cum era gandit in
   template-ul original), deci reducem padding-ul urias din interiorul hero-ului. */
.tg-hero-tu-wrapper .tg-hero-content {
  padding-top: 60px !important;
  padding-bottom: 100px !important;
}
@media (max-width: 767px) {
  .tg-hero-tu-wrapper .tg-hero-content {
    padding-top: 40px !important;
    padding-bottom: 60px !important;
  }
}

/* Fallback text pentru logo, daca /assets/img/logo.png nu exista inca pe server */
.site-logo-text {
  color: var(--tg-theme-primary, #560ce3);
  font-size: 1.4rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
}

/* Logo-ul propriu — in template original dimensiunea venea automat din componenta
   React Image (bazata pe fisierul sursa), aici trebuie constransa explicit ca sa nu
   impinga tot randul de header la o inaltime uriasa daca fisierul e mare. */
.logo img,
.tgmobile__menu .nav-logo img {
  max-height: 90px;
  width: auto;
}
@media (max-width: 575px) {
  .logo img { max-height: 56px; }
}

/* Select-urile native din bara de cautare (fara plugin JS "nice-select"),
   stilizate simplu ca sa se potriveasca vizual cu restul formularului. */

/* ============================================================
   Bara de cautare din hero — clase proprii (vai-cautare-*), complet
   independente de tema Tourex. Fara nicio clasa "tg-booking-*", ca sa
   nu mai existe risc de coliziune cu reguli ascunse din main.css.
   ============================================================ */
.vai-cautare-container {
  background: #fff;
  border-radius: 20px;
  padding: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
}
.vai-cautare-grup {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  padding: 12px;
}
.vai-cautare-camp {
  background: #f7f7fb;
  border: 1px solid #ececf5;
  border-radius: 10px;
  padding: 10px 16px;
  flex: 1 1 155px;
  min-width: 140px;
  max-width: 190px;
  min-height: 56px;
  text-align: left;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vai-cautare-eticheta {
  display: block;
  font-size: 12px;
  color: #8b8b8b;
  margin-bottom: 3px;
  font-family: 'Poppins', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vai-cautare-select {
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-family: 'Poppins', sans-serif;
  color: #1a1a2e;
  width: 100%;
  padding: 0;
  cursor: pointer;
  text-overflow: ellipsis;
}
.vai-cautare-buton-wrap { padding: 10px 0; flex: 0 0 auto; align-self: center; }
@media (max-width: 991px) {
  .vai-cautare-camp { flex: 1 1 45%; max-width: 48%; }
}
@media (max-width: 767px) {
  .vai-cautare-container { padding: 8px; border-radius: 16px; }
  .vai-cautare-grup { padding: 8px; gap: 8px; }
  .vai-cautare-camp { flex: 1 1 100%; max-width: 100%; min-width: 100%; }
  .vai-cautare-buton-wrap { width: 100%; }
  .vai-cautare-buton-wrap .tg-btn { width: 100%; }
}

/* Header-ul nostru e solid alb (nu transparent peste hero), dar tema a fost gandita
   cu text alb pentru varianta transparenta — il facem vizibil pe fundal alb. */
.tg-header-tu-menu .tgmenu__navbar-wrap ul li a,
.tg-header-tu-menu .tgmenu__navbar-wrap ul li a:hover {
  color: #1a1a2e !important;
}
.tg-header-tu-menu .tgmenu__navbar-wrap ul li:hover > a,
.tg-header-tu-menu .tgmenu__navbar-wrap ul li.active > a {
  color: var(--tg-theme-primary, #560ce3) !important;
}
.tg-header-tu-menu .tg-header-contact-number span {
  color: #8b8b8b !important;
}
.tg-header-tu-menu .tg-header-contact-number a {
  color: #1a1a2e !important;
}
.tg-header-tu-menu .tg-btn-header {
  color: #fff !important;
  border-color: var(--tg-theme-primary, #560ce3) !important;
  background: var(--tg-theme-primary, #560ce3) !important;
}
.tg-header-tu-menu .tg-header-contact-icon {
  background: var(--tg-theme-primary, #560ce3) !important;
  color: #fff !important;
}
.tgmenu-offcanvas-open-btn span {
  background: #1a1a2e !important;
}
#tabTransport .nav-link {
  background: #f3f0ff !important;
  color: #560ce3 !important;
  border-radius: 30px;
  padding: 8px 22px;
  margin: 0 5px 8px 0;
  font-weight: 600;
  font-size: 14px;
  transition: all .2s ease;
  border: 2px solid transparent;
  display: inline-block;
}
#tabTransport .nav-link.active,
#tabTransport .nav-link:hover,
#tabTransport .nav-link:focus {
  background: var(--tg-theme-primary, #560ce3) !important;
  color: #fff !important;
}

/* Buton WhatsApp flotant (mostenit din designul anterior, inca folosit) */
/* Buton compact, rotund, pentru "Contul meu" pe mobil/tableta — inlocuieste textul care
   se rupea pe 2 randuri intr-o caseta prea mare, cand nu era destul spatiu in antet. */
.vai-cont-cerc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 50%;
  background: #560ce3;
  color: #fff;
  font-size: 17px;
  margin-left: 12px;
  flex-shrink: 0;
  transition: opacity .2s;
}
.vai-cont-cerc:hover { opacity: .85; color: #fff; }

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #25D366;
  color: #fff;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  z-index: 1000;
}
.whatsapp-float:hover { color: #fff; opacity: .9; }

/* Banner cookie consent */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #1a1a1a;
  color: #eee;
  z-index: 1050;
  box-shadow: 0 -2px 10px rgba(0,0,0,.3);
}
.cookie-banner a { color: #ffd166; }

/* Bare de numaratoare inversa (plata + plecare), stil "urgenta" */
.vai-numaratoare-wrap { margin: 10px 0; }
.vai-numaratoare-bara { height: 26px; border-radius: 13px; background: #eee; overflow: hidden; position: relative; }
.vai-numaratoare-umplere { height: 100%; border-radius: 13px; transition: width .5s ease, background .5s ease; }
.vai-numaratoare-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #1a1a2e; }
.vai-numaratoare-eticheta { font-size: 12px; color: #8b8b8b; margin-bottom: 4px; display: block; }

/* Culori pentru badge-urile de status ale rezervarilor (client + admin) —
   lipseau complet, badge-urile erau text alb pe fundal alb, invizibile. */
.badge-status-noua { background: #6c757d !important; }
.badge-status-in_asteptare_aprobare_pret { background: #f0ad4e !important; }
.badge-status-pret_aprobat { background: #560ce3 !important; }
.badge-status-confirmata { background: #28a745 !important; }
.badge-status-anulata { background: #dc3545 !important; }
.badge-status-finalizata { background: #17a2b8 !important; }

/* Titlul numelui hotelului - foloseste fontul de titluri (Outfit), mai distinct */
.tg-tour-details-video-title {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 700 !important;
  font-size: 34px !important;
  color: #1a1a2e;
}

/* Banner croaziere - poza curata (cu badge sus si titlu+tagline coborate, centrate vertical),
   plus banda subtire dedesubt cu text simplu, fara ingrosari */
.vai-banner-croaziere-wrap {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10,37,64,.15);
}
.vai-banner-croaziere {
  display: block;
  position: relative;
  background-image: var(--poza-fundal);
  background-size: cover;
  background-position: center;
  min-height: 380px;
}
.vai-banner-croaziere-eticheta {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-block;
  background: rgba(10,37,64,.55);
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.vai-banner-croaziere-continut {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(4,14,26,.55) 0%, rgba(4,14,26,.15) 90%, transparent 100%);
  border-radius: 10px;
  max-width: 70%;
}
.vai-banner-croaziere-titlu-poza {
  display: block;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.vai-banner-croaziere-tagline {
  display: block;
  color: #d6e4f0;
  font-size: 14px;
  font-style: italic;
  margin-top: 6px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
.vai-banner-croaziere-jos {
  background: #0a2540;
  padding: 18px 40px;
}
@media (max-width: 767px) {
  .vai-banner-croaziere { min-height: 300px; }
  .vai-banner-croaziere-continut { max-width: 85%; }
  .vai-banner-croaziere-titlu-poza { font-size: 1.4rem; }
  .vai-banner-croaziere-jos { padding: 18px 25px; }
}

/* Banda "Last Minute" pe cardurile de oferta */
.vai-banda-last-minute {
  position: absolute;
  top: 14px;
  left: -6px;
  z-index: 5;
  background: linear-gradient(135deg, #ff3b3b, #c1121f);
  color: #fff;
  padding: 5px 16px 5px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(193,18,31,.4);
  border-radius: 0 4px 4px 0;
}
.vai-banda-last-minute::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  border-width: 6px 6px 0 0;
  border-style: solid;
  border-color: #7a0d15 transparent transparent transparent;
}

/* Banda "Recomandat" pe cardurile de hotel */
.vai-banda-recomandat {
  position: absolute;
  top: 14px;
  left: -6px;
  z-index: 5;
  background: linear-gradient(135deg, #e11d48, #be123c);
  color: #fff;
  padding: 5px 16px 5px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 3px 8px rgba(190,18,60,.35);
  border-radius: 0 4px 4px 0;
}
.vai-banda-recomandat::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  border-width: 6px 6px 0 0;
  border-style: solid;
  border-color: #8a0f2e transparent transparent transparent;
}

/* Fix pentru un bug din tema Tourex: calendarul (Flatpickr) foloseste o variabila de
   culoare care nu exista deloc (--tg-common-falured), rezultand text alb pe fundal alb,
   invizibil, pentru ziua selectata — mai ales pe homepage (context "calender-active").
   Suprascriem explicit, cu culori sigure, ca ziua selectata sa fie mereu vizibila,
   pe orice pagina. */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #560ce3 !important;
  border-color: #560ce3 !important;
  color: #fff !important;
}
.flatpickr-day.inRange {
  background: #ede5fc !important;
  border-color: #ede5fc !important;
  box-shadow: -5px 0 0 #ede5fc, 5px 0 0 #ede5fc !important;
  color: #1a1a2e !important;
}

/* Etichete tip transport (avion/autocar/individual) — design identic, doar culori diferite */
.vai-badge-transport {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.vai-badge-avion { background: #e8f0ff; color: #1a56db; }
.vai-badge-autocar { background: #fff4e5; color: #b45309; }
.vai-badge-individual { background: #eafaf1; color: #0e7c4a; }

/* Buton de share (hotel + oferta) */
.tg-share-wrap { position: relative; display: inline-block; font-size: 14px; font-weight: 600; }
.tg-share-wrap .share-optiuni { right: 0; }
.tg-share-wrap .share-optiuni a { text-decoration: none; font-size: 14px; }
.tg-share-wrap .share-optiuni a:hover { opacity: .7; }

/* Sidebar de filtre (lista hoteluri pe tara) - checkbox-urile native, stilizate simplu */
.tg-filter-sidebar .form-control-sm { border-radius: 6px; font-size: 13px; }
.tg-filter-sidebar .tg-checkbox { margin-right: 8px; cursor: pointer; }
.tg-filter-sidebar .tg-label { cursor: pointer; font-size: 14px; }

/* Cifrele reale din sectiunea "De ce sa ne alegi" — in original erau gandite ca
   text decorativ foarte deschis in fundal; la noi sunt informatia principala. */
.tg-counter-su-2 .tg-counter-title {
  color: var(--tg-theme-primary, #560ce3) !important;
  font-size: 42px !important;
}
/* BUG GASIT: .tg-counter-subtitle avea position:absolute (gandit sa stea centrat
   peste numarul mare decorativ din spate). Fara un parinte cu position:relative
   exact in jurul ei, textul "zbura" pana la cel mai apropiat element pozitionat
   din tot DOM-ul (hero-ul de sus!), aparand suprapus peste bara de cautare. */
.tg-counter-su-2 .tg-counter-subtitle {
  position: static !important;
  transform: none !important;
  display: block !important;
  text-align: left !important;
}

/* Banda de newsletter — violet plin, vizibil clar, cu tranzitie catre footer-ul inchis */
.tg-newsletter-band {
  background: linear-gradient(135deg, #560ce3 0%, #7c3aed 100%) !important;
  position: relative;
}
.tg-btn-newsletter {
  background: #f74a1f;
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  transition: all .2s ease;
}
.tg-btn-newsletter:hover { background: #d93d15; color: #fff; }