/*
Theme Name: Astrip Child
Theme URI: https://www.astrip-wp.egenslab.com/
Template: astrip
Author: Egens Lab
Author URI: https://www.egenslab.com/
Description: Astrip is a woocommerce based modern and responsive tour and travel WordPress theme that is perfect for creating professional and engaging websites for travel agencies, tour operators, and other travel-related businesses. The theme features a clean and minimalist design that puts the focus on showcasing beautiful destinations and experiences, with large, full-width images and intuitive navigation. Astrip also includes a range of powerful tools and options for displaying and organizing information about different travel packages, itineraries, and destinations, including support for multiple languages, currency options, and more.
Tags: blog,right-sidebar, custom-colors, custom-header, custom-menu,sticky-post,featured-images,flexible-header
Version: 1.3.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

*/
/* ==========================================================================
   MMG prilagodbe
   ========================================================================== */

/* Popust značka na karticama putovanja: "off" -> "popust" (CSS ::after u parent temi) */
.tour-package-standard .tour-standard-image span.discount-bagde::after,
.deal-single1 .deal-image span.discount-bagde::after,
.best-plan-single1 .image span.discount-bagde::after,
.package-card .package-img span.discount-bagde::after {
  content: "popust";
  font-size: 10px;
  min-width: 44px;
  height: 44px;
  line-height: 44px;
  top: -14px;
  right: -14px;
  letter-spacing: 0.2px;
}

/* Gumbi: parent tema ima text-transform: capitalize (Pogledaj Više) -> isključeno za hrvatski */
.eg-btn,
.btn--lg,
.btn--lg2,
.capsule,
.hero-wrapper .hero-content .btn-group .dsc-btn a {
  text-transform: none;
}

/* Omnibus: najniža cijena u 30 dana prije sniženja */
.mmg-omnibus {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7280;
  margin: 4px 0 8px;
}
.mmg-omnibus .wc-price-history-shortcode {
  display: inline;
}
.mmg-omnibus .wc-price-history-shortcode.line-through {
  text-decoration: none;
}
.tour-information .tour-price { flex-wrap: wrap; }
.tour-information .tour-price .mmg-omnibus {
  flex: 0 0 100%;
  width: 100%;
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 400;
  font-family: inherit;
  /* uvijek posljednji u retku cijene - "(po osobi)" i sl. ostaju gore uz cijenu */
  order: 10;
}
.sidebar-booking-form .mmg-omnibus { margin: 0 0 12px; }

/* ==========================================================================
 * MMG: Boje - ostaci zelene iz parent teme
 * Glavne tri boje postavljene su u WP Admin -> Astrip Options -> General
 * (primary_color = #178e9b). Parent tema ih ipak na nekoliko mjesta
 * zaobilazi: koristi zelenu izravno (hardkodirano) ili preko varijanti
 * koje panel uopce ne nudi. Ovdje ih vezemo na #178e9b = rgb(23, 142, 155).
 * NAPOMENA: ako se glavna boja jednom promijeni u Astrip Options,
 * vrijednosti nize treba rucno uskladiti - CSS ih ne moze sam izracunati.
 * ========================================================================== */

/* Varijante glavne boje koje panel ne pokriva.
 * Parent ih definira u assets/css/style.css, blog-and-page.css i
 * woocommerce-custom.css (svugdje zeleno). */
:root {
  /* parent: rgba(144, 185, 86, 0.7) - obrubi i ikone drustvenih mreza u heru,
     pozadina ikone kategorije, klizac raspona cijene */
  --primary-color1-light: rgba(23, 142, 155, 0.7);
  /* parent: #a8cd758c - svjetliji ton s prozirnoscu */
  --primary-color1-light2: rgba(72, 166, 176, 0.55);
  /* parent: #359d9e - druga tirkizna; svodimo je na glavnu boju */
  --primary1-dark: #178e9b;
}

/* Hero gumb "descriptive": pozadina hardkodirana (style.css)
 * - hover vec koristi varijablu, pa treba samo osnovno stanje. */
.hero-wrapper .hero-content .btn-group .dsc-btn a {
  background-color: var(--primary-color1);
}

/* Obrub okvira newslettera - parent: rgba(144, 185, 86, 0.33) (style.css) */
.banner-form-box,
.sidebar-widget .newsletter-area .banner-form-box {
  border-color: rgba(23, 142, 155, 0.33);
}

/* Znacka s datumom na karticama kategorija - parent: #359d9e (style.css) */
.trip-category-single .trip-image span.blog-date {
  background: var(--primary-color1);
}

/* Tablica atributa proizvoda - parent: rgb(144, 185, 86, .2) (woocommerce-custom.css) */
.woocommerce table.shop_attributes tr,
.woocommerce table.shop_attributes td,
.woocommerce table.shop_attributes th {
  border-color: rgba(23, 142, 155, 0.2);
}

/* Blagajna: polje "Država / Regija" se ne prikazuje.
 * Prodaja je ogranicena na jednu drzavu (HR), pa kupac tu nema sto birati.
 *
 * !important je OBAVEZAN. WooCommerceov address-i18n.js na svaku promjenu
 * drzave prodje kroz polja adrese i pozove jQuery .show() (redak 99), sto
 * upise inline style="display: block". Inline stil nadjacava obicno CSS
 * pravilo - jedino ga !important moze nadglasati.
 *
 * Polje NE uklanjamo u PHP-u: <select> mora ostati u obrascu da i dalje
 * salje billing_country=HR (skriveni elementi se normalno salju). Bez toga
 * bi narudzba ostala bez drzave, a nju koriste izracun PDV-a i provjera adrese. */
#billing_country_field,
#shipping_country_field {
  display: none !important;
}

/* Na stranici /putovanja gumb "Natrag na putovanja" nema smisla - posjetitelj
 * je vec tu. Klasu mmg-tour-list-page dodaje functions.php. Vrijedi i za
 * rezultate bocnog filtera, jer se oni ubacuju u istu stranicu. */
.mmg-tour-list-page .package-not-found .eg-btn {
  display: none;
}

/* Citat u objavama i na stranicama - parent: #90b95612 (blog-and-page.css) */
.page-wrapper blockquote,
.blog-details blockquote,
.blog-standard-area .blog-standard-single .signle-news-list.blog-post-quote blockquote,
.blog-comments blockquote {
  background: rgba(23, 142, 155, 0.07);
}

/* ==========================================================================
 * MMG: znacka Garantirano (garantirani polazak)
 * HTML ubacuju functions.php (filter post_thumbnail_html na karticama),
 * breadcrumb-tour.php (header ture) i content-tour-single.php (info traka).
 * ========================================================================== */

/* Znacka preko slike na karticama putovanja. Omotaci slika
 * (.deal-image, .tour-standard-image, .best-plan-single1 .image,
 * .offer-single...) su u parent temi position:relative. */
.mmg-guaranteed-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-color1);
  color: var(--white);
  font-family: var(--font-work-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  padding: 9px 15px;
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.mmg-guaranteed-badge svg {
  flex: 0 0 auto;
  fill: currentColor;
  /* SVG u PHP-u ima width/height 12 -> velicinu vodi CSS, u koraku s tekstom */
  width: 16px;
  height: 16px;
}

/* Standardna (vodoravna) kartica vec ima znacku popusta gore lijevo
 * -> "Garantirano" ide u desni kut da se ne preklapaju. */
.tour-package-standard .tour-standard-image .mmg-guaranteed-badge {
  left: auto;
  right: 12px;
}

/* Header stranice ture (breadcrumb-area): veca, staticna varijanta.
 * Selektor NAMJERNO ponavlja ".inner-banner-section ... span" - parent pravilo
 * ".inner-banner-section .breadcrumb-area span" (display:block, 2.2rem,
 * letter-spacing 3px) inace nadjacava samu klasu. Tip ture iznad znacke je
 * display:block, pa znacka stoji u vlastitom retku, centrirana, iznad naslova. */
.inner-banner-section .breadcrumb-area span.mmg-guaranteed-badge--header {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  background: var(--primary-color1);
  color: var(--white);
  font-family: var(--font-work-sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  padding: 12px 20px;
  border-radius: 100px;
  pointer-events: auto;
}
.inner-banner-section .breadcrumb-area span.mmg-guaranteed-badge--header svg {
  width: 18px;
  height: 18px;
}

/* Info traka na stranici ture: kvacica u boji teme kao i ostale ikone. */
.tour-info-metalist li.mmg-guaranteed-meta svg {
  fill: var(--primary-color1);
}

/* ==========================================================================
 * MMG: "Informacije o putovanju" (info-list-1) - vrijednost u vlastitom stupcu
 * Parent tema naslov retka slaze kao inline-block 35%, ali je vrijednost
 * OBICAN inline tekst (width:65% na inline elementu ne radi), pa se dugi
 * sadrzaj prelama preko cijele sirine, ispod naslova. Flex redak to rjesava.
 * Klasu mmg-trip-info-row dodaje child content-tour-single.php samo na
 * retke "Informacija o putovanju" - liste Ukljuceno/Nije ukljuceno u cijenu
 * (isti ul.info-list-1) ostaju na izvornom rasporedu sa sublistama.
 * ========================================================================== */
.tour-info-list-area ul.info-list-1 > li.mmg-trip-info-row {
  display: flex;
  align-items: baseline;
}
.tour-info-list-area ul.info-list-1 > li.mmg-trip-info-row span:first-child {
  flex: 0 0 35%;
  width: 35%;
  padding-right: 15px;
}
.tour-info-list-area ul.info-list-1 > li.mmg-trip-info-row span:last-child {
  flex: 1;
  width: auto;
}
@media (max-width: 767px) {
  /* na mobitelu naslov iznad vrijednosti, kao i dosad (tema: naslov 100%) */
  .tour-info-list-area ul.info-list-1 > li.mmg-trip-info-row {
    display: block;
  }
}

/* ==========================================================================
 * MMG: widget "Najnovija putovanja" (mmg_latest_tours, functions.php)
 * Kartice su isti .sidebar-offer kao originalni widget; kad ih je vise u
 * jednom widgetu, treba razmak medu njima. Omnibus u kartici sitnije.
 * ========================================================================== */
.mmg-latest-tours .sidebar-offer + .sidebar-offer {
  margin-top: 25px;
}
.mmg-latest-tours .sidebar-offer .mmg-omnibus {
  margin: 4px 0 0;
  font-size: 12px;
}

/* ==========================================================================
 * MMG: EG Destination Masonry - slike razlicitih dimenzija lome raspored
 * Widget ispisuje slike u prirodnoj visini (samo width:100%), pa kartice
 * ispadnu razlicitih visina i redovi se razbacaju. Sve slike se svode na
 * ISTI omjer (3:2) i rezu po sredini (object-fit: cover) - raspored je
 * uredan bez obzira na dimenzije ucitane slike. Pokriva sva tri stila
 * widgeta; isto pravilo i za EG Destination Grid te arhivu destinacija.
 * ========================================================================== */
.tour-card-wrapper .tour-card-alpha .image img,
.gallery-wrapper .destination-single2 > img,
.destination-section4 .destination-single4 > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}
img.destination-img {
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
}

/* ==========================================================================
 * MMG: EG Gallery - tipke "Image Gallery" / "Video Gallery" se ne prikazuju
 * Koristi se samo galerija slika (aktivna po defaultu), pa su tabovi visak.
 * Selektor je ogranicen na Elementor omot TOCNO ovog widgeta
 * (astrip_image_gallery) - tabovi na stranici ture koriste iste id-eve
 * (v-pills-tab) i NE smiju biti pogodeni. Skriva se i razmak ispod tipki.
 * ========================================================================== */
.elementor-widget-astrip_image_gallery .nav-pills {
  display: none !important;
}

/* ==========================================================================
 * MMG: /putovanja raspored - na mobitelu filter -> putovanja -> widgeti
 * Ide uz child predlozak archive-astrip-tour-3.php, koji je bocni stupac
 * parenta (filter + widgeti u istom col-lg-4) razdvojio na tri zasebna
 * bloka: .mmg-package-filter, .mmg-package-list, .mmg-package-widgets.
 * Mobitel (< 992 px): obicno slaganje u redoslijedu iz HTML-a - filter na
 * vrhu, ispod njega putovanja, widgeti na dnu. Razmak 24 px = Bootstrap g-4
 * iz originala.
 * Desktop (>= 992 px): CSS grid vizualno identican starom Bootstrap
 * rasporedu (col-lg-4 / col-lg-8): filter gore lijevo, widgeti ispod njega,
 * popis desno preko oba retka. minmax(0, ...) sprjecava da siroki sadrzaj
 * (kartice) rastegne stupac preko zadanog omjera 1:2.
 * ========================================================================== */
.mmg-package-layout {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 992px) {
  .mmg-package-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    grid-template-rows: max-content 1fr;
    grid-template-areas:
      "filter  list"
      "widgets list";
    gap: 24px;
  }
  .mmg-package-filter  { grid-area: filter; }
  .mmg-package-widgets { grid-area: widgets; }
  .mmg-package-list    { grid-area: list; }
}
.elementor-widget-astrip_image_gallery .tab-content {
  margin-top: 0;
}

/* MMG: na mobitelu/tabletu obrazac za rezervaciju (termin, osobe, cijena)
 * prikazi IZNAD opisa putovanja, ne tek na kraju dugog teksta.
 * Na desktopu (>= 992px) ostaje desni stupac kao i prije. */
@media (max-width: 991.98px) {
  .destination-details-section .row > .mmg-booking-col {
    order: -1;
    margin-bottom: 40px;
  }
}
/* MMG: widgeti ispod sadrzaja na mobitelu (razmak od opisa). */
@media (max-width: 991.98px) {
  .mmg-sidebar-mobile { margin-top: 40px; }
}