/* Site-wide layout / typography rules previously here (main font-size,
 * iframe width, .gc-brand-truncate, .wp-block-heading margin,
 * .wp-block-column/.card min-width, .wp-block-table border,
 * .break-avoid, @media print, #scrollSectionSpy) moved to the
 * understrap-greatchile child theme on 2026-05-19. Plugin stays
 * presentation-agnostic — themes own the visual choices. */

.opacity-hover:hover img {
	opacity: 0.5;
}
.gctbi-price{
	line-height:.8em;
}
.gctbi-price span:first-of-type {
	font-size:.7em;
}
.teaser {
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.teaser:hover,
.teaser:focus-within {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.teaser-img-wrapper {
  height: 100%;
  overflow: hidden;
}
.card.teaser .teaser-img-wrapper {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.teaser-img {
  transition: transform 0.4s ease;
  will-change: transform;
}
.teaser:hover .teaser-img,
.teaser:focus-within .teaser-img {
  transform: scale(1.05);
}
.teaser .text-muted {
  transition: color 0.25s ease;
}
.teaser:hover .text-muted,
.teaser:focus-within .text-muted {
  color: var(--bs-body-color) !important;
}
/* Whole-teaser hover/focus cues the primary "View More" action, so it's clear
   that clicking anywhere on the card (its stretched-link) opens the detail
   page. Fills the outline button with its hover look without the pointer being
   on the button itself. The .btn transition (already set by Bootstrap) makes it
   animate; scoped to btn-outline-primary (the View More variant on the
   stretched-link teasers card/row) so other action buttons are untouched. */
.teaser:hover .gc-btn-view-more.btn-outline-primary,
.teaser:focus-within .gc-btn-view-more.btn-outline-primary {
  color: #fff;
  background-color: var(--bs-primary, #0d6efd);
  border-color: var(--bs-primary, #0d6efd);
}
/* Teaser action button group sits ABOVE the card's stretched-link so its buttons
   (Add to trip / heart / Book) are clickable. Bootstrap's stretched-link ::after
   is position:absolute; z-index:1, and a positioned element only wins with an
   explicit higher z-index — position:relative alone (z-index:auto) still loses,
   which is why the buttons were unreachable on the card teaser. */
.gc-teaser-actions {
  position: relative;
  z-index: 2;
}
.teaser:hover {
  transform: translateY(-2px);
}
@media (hover: none) {
    .teaser-img {
        transition: none;
    }
}
.grecaptcha-badge{
  visibility:hidden;
}
/* Row teaser image fit — templates/teaser/row.php (.gc-teaser-row).
 * The image fills its column via the full-height chain:
 *   .gc-teaser-row > .col-md-4 > .teaser-img-wrapper.h-100 > .card-img-fit
 * (width/height:100% + object-fit:cover). On desktop the column stretches to
 * the row height so the landscape (16:9) image is cropped to fill it; when the
 * card stacks below md the image shows at its natural ratio. min-height keeps
 * every row a consistent size regardless of content length.
 *
 * The <img> must NOT carry Bootstrap's `.img-fluid` (it forces height:auto).
 * object-position is overridden per-image by the focal-point inline style. */
.card-img-fit {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.gc-teaser-row {
  min-height: 250px;
}

/* Combined favourites-suggestion card group (gc-cart-page.js joinedCard).
 * A rounded card wrapping the member products; each product reuses the SAME
 * media+details columns as the row teaser (teaser/parts/media-details.php).
 * Layout is a 2-track grid: the product rows (col 1) and ONE combined
 * price + CTA summary (col 2). The per-product separator is a border-top on
 * .gc-sug-row, which lives in col 1 only — so it stops before the summary. */
.gc-sug-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
}
.gc-sug-products {
  min-width: 0;
}
.gc-sug-row {
  position: relative;               /* contain the media/details stretched-links */
  border-top: 1px solid var(--bs-border-color, #dee2e6);
}
.gc-sug-row:first-child {
  border-top: 0;
}
.gc-sug-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 0.25rem;
  padding: 1rem;
  min-width: 12rem;
  text-align: end;
  border-left: 1px solid var(--bs-border-color, #dee2e6);
}
@media (min-width: 768px) {
  /* Let the shared details column grow to fill col 1 (the row teaser keeps its
   * fixed col-md-5 beside a price column; here there is no price column). */
  .gc-sug-row .gc-teaser-details {
    flex: 1 1 0;
    max-width: none;
  }
}
@media (max-width: 767.98px) {
  /* Stack the summary under the products on narrow screens. */
  .gc-sug-grid {
    grid-template-columns: 1fr;
  }
  .gc-sug-summary {
    border-left: 0;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    text-align: start;
  }
}

/* .gc-pill-caret — small caret glyph for badges / pills that act
 * as collapse toggles (Bootstrap data-bs-toggle="collapse"). The
 * rotation rule uses the [aria-expanded="true"] attribute that
 * Bootstrap toggles on the trigger element when its target opens.
 * Currently used by the per-day demand badge in
 * templates/tour/itinerary-day.php. */
.gc-pill-caret {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.85em;
  line-height: 1;
  transition: transform 0.2s ease;
}
[aria-expanded="true"] > .gc-pill-caret {
  transform: rotate(180deg);
}

.smart-search-results {
  display:none;
  background:#fff;
  border:1px solid #ddd;
  border-top:none;
}
.custom-joined-group .input-group,
.custom-joined-group .btn {
  width: 100%;
}
.shadow .shadow {
  box-shadow: none !important;
}
@media (min-width: 768px) {
	.smart-search-results {
			position: absolute;
			top: 48px;
			z-index: 99;
		}
  .custom-joined-group .input-group,
  .custom-joined-group .btn {
    width: auto;
  }
  .custom-joined-group:first-child .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .custom-joined-group .input-group.middle .input-group-text,
  .custom-joined-group .input-group.middle .form-control {
    border-radius: 0;
  }
  .custom-joined-group .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

/* ============================================================
 * gc-* frontend utilities — replace recurring inline styles in
 * theme templates (understrap-greatchile/) and plugin-emitted
 * shortcodes/helpers. Bootstrap is loaded but doesn't have utils
 * for these specific values (e.g. 600px hero, 250px min-width).
 * ============================================================ */

/* Hero-header trio used by every single-* template + page.php.
 * The hero image is now a responsive <picture class="gc-hero-img"> filling
 * the section (object-fit:cover, fetchpriority — it's the LCP element), with
 * the overlay stacked above it. (background-image kept only for page.php's
 * carousel slides, which aren't <img>-based yet.) */
.gc-hero-header {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 600px;
	overflow: hidden;
}
.gc-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.gc-hero-overlay {
	background-image: linear-gradient(transparent, rgba(0,0,0,.8));
	z-index: 1;
}
.gc-hero-text {
	text-shadow: 2px 2px 2px rgba(0,0,0,.6);
}

/* Layout: under-fixed-header content offset and sticky-nav offset */
.gc-pt-header     { padding-top: 120px; }
/* Sticky section-menu (#scrollSectionSpy): the element carries Bootstrap's
   .sticky-top (position:sticky). Bootstrap pins it at top:0, which would sit
   BEHIND the fixed-top header, so the single unavoidable custom bit is a top
   offset that clears the header — there is no Bootstrap utility for it. Kept to
   ONE declaration (no max-height/overflow/JS-measured value); the header-clearing
   breathing room now comes from the Bootstrap `mt-5` on the menu+content block in
   the single templates. Height clearance for anchor jumps is scroll-margin-top. */
.gc-sticky-offset { top: 5rem; }
/* Anchor targets inside the scroll-spy content (#scrollArea): when an action
   button or the section menu jumps to a section, clear the fixed header so the
   section TITLE stays visible instead of hiding behind it. */
#scrollArea [id]           { scroll-margin-top: 5rem; }
.admin-bar #scrollArea [id] { scroll-margin-top: 7rem; }

/* Footer + header logos and icons */
.gc-logo          { max-height: 34px; width: auto; }
.gc-icon-20       { height: 20px; }
.gc-icon-60       { height: 60px; }
.gc-social-circle { width: 36px; }

/* Card-group horizontal scrollers (places/tours/cars cards) */
.gc-card-min-250  { min-width: 250px; }
.gc-min-w-auto-i  { min-width: auto !important; }

/* Auto-fill card grid: as many >=250px columns as fit, then wrap — the CSS-Grid
   equivalent of a `.col` + min-width:250px inside a flex `.row`, but the layout
   lives on the CONTAINER so the cards need no `.col`/min-width class. `min(250px,
   100%)` keeps a single column from overflowing viewports narrower than 250px.
   Grid cells are equal-height by default (no `same-height` helper needed).
   Bootstrap has no auto-fit utility, so this one rule is the modern replacement
   for .gc-card-min-250 (migrating card grids over to it incrementally). */
.gc-card-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}

/* Progress bars: physical demand / experience indicators */
.gc-progress-thin { height: 2px; }

/* Favorite-toggle button width cap on cards */
.gc-max-w-85p     { max-width: 85%; }

/* Form / contact-row container caps */
.gc-max-w-650     { max-width: 650px; }

/* Office-hours visibility (cache-friendly replacement for the legacy
 * gc_helper_openclose() PHP gate that broke page caches).
 *
 * ajax-price.js toggles `body.gc-office-open` / `body.gc-office-closed`
 * client-side based on the current Chile time + holidays + opening
 * hours. Any element marked `.gc-only-when-open` or
 * `.gc-only-when-closed` follows that state.
 *
 * Default: hidden — matches the legacy "show only when open" semantic
 * and prevents a flash of the phone number on closed-hour cached HTML
 * before the JS evaluates. If the JS never runs (no `gcOfficeData`),
 * the elements stay hidden — same outcome as the legacy gate when it
 * deemed the office closed. */
.gc-only-when-open,
.gc-only-when-closed                        { display: none; }
body.gc-office-open   .gc-only-when-open    { display: revert; }
body.gc-office-closed .gc-only-when-closed  { display: revert; }

/* flatpickr day styling (incl. .gc-date-available / .gc-date-autopay) now lives in
   the theme's Bootstrap SASS (understrap-greatchile _flatpickr.scss) — the single
   source of truth for the calendar's appearance. */

/* [greatchile_moon_fase] moon-phase widget — emoji glyph sizing so
 * the per-day card matches the weather "Next Days" card height.
 * Designers swapping the emoji for an <img> via the
 * `gc_moon_phase_icon` filter can target the same wrapper to size
 * their image consistently. */
.gc-moon-icon {
	font-size: 2.5rem;
	line-height: 1;
}
.gc-moon-icon img {
	max-height: 2.5rem;
	width: auto;
}

/* [variation_pax] form tag — travel-group inputs derived from the
 * booking engine's age buckets. One row per variation; each row shows
 * the variation name + starting price + one count input per bucket.
 * Mirrors the request-form rework spec. */
.variation-pax {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.variation-pax-explainer {
	background: #f8f9fa;
	border-left: 3px solid #0d6efd;
	padding: 0.5rem 0.75rem;
	margin: 0 0 1rem;
	font-size: 0.9em;
	color: #495057;
}
.variation-pax-row {
	border: 1px solid #dee2e6;
	border-radius: 0.375rem;
	padding: 0.75rem 1rem;
	background: #fff;
}
.variation-pax-row-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 0.5rem;
	font-weight: 600;
}
.variation-pax-price {
	font-weight: 400;
	font-size: 0.95em;
}
.variation-pax-buckets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.variation-pax-bucket {
	display: inline-flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 7rem;
}
.variation-pax-bucket-label {
	font-size: 0.85em;
	color: #6c757d;
}
.variation-pax-input {
	max-width: 5rem;
}

/* Travel-group table (gc_render_step1_pax_table): shared by the 2-step booking
   form and the shopping cart's group-ages form. Unscoped (was inline+scoped to
   .gc-step-1 in the step-1 template) so the cart page is styled identically. */
.gc-step-1-pax-table { width: 100%; border-collapse: collapse; }
.gc-step-1-pax-table th, .gc-step-1-pax-table td { padding: 0.5rem 0; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.gc-step-1-pax-table thead th { font-weight: 600; }
.gc-step-1-pax-table .gc-step-1-pax-th-qty { text-align: right; width: 7rem; }
.gc-step-1-pax-table tbody td:last-child { text-align: right; }
.gc-step-1-pax-row label { margin: 0; }
.gc-step-1-pax-row input[type="number"] { width: 5rem; text-align: center; display: inline-block; }
/* Options / services table — the 2-step form's "Choose your option" table and the
   cart's services table share this. Was inline+scoped to .gc-step-1 in the step-1
   template; unscoped here so the cart page matches. */
.gc-step-1-variation-table { width: 100%; border-collapse: collapse; --bs-table-cell-padding-y: 0.75rem; }
.gc-step-1-variation-table th, .gc-step-1-variation-table td { padding: 0.75rem 0.5rem; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.gc-step-1-variation-table thead th { font-weight: 600; }
.gc-step-1-variation-table .gc-step-1-variation-breakdown { font-size: 0.85rem; color: #6c757d; margin-top: 0.25rem; line-height: 1.5; }
.gc-step-1-variation-table .gc-step-1-variation-breakdown .gc-step-1-line-qty { font-weight: 600; color: #1b5e20; }
.gc-step-1-variation-table .gc-step-1-variation-breakdown .gc-step-1-line-sub { font-weight: 600; color: #1b5e20; }
.gc-step-1-variation-table .gc-step-1-variation-total { font-weight: 600; text-align: right; white-space: nowrap; font-size: 1.05rem; }
/* Selected + hover states use Bootstrap's row classes: .table-hover (on the
   table) drives hover; .table-active (toggled by two-step-booking-form.js on the
   chosen row) drives the selected background. A Bootstrap .table paints cell
   backgrounds from its state vars, so we brand the selected row via the state var
   with the theme's primary-subtle token rather than a plain `tr` background
   (which the cells would paint over). The whole row is clickable (JS) → pointer. */
.gc-step-1-variation-table > tbody > tr { cursor: pointer; }
.gc-step-1-variation-table > tbody > tr.table-active { --bs-table-bg-state: var(--bs-primary-bg-subtle, #e7f1ff); }
/* Input-like frame matching Bootstrap form controls / the flatpickr field: the
   border + rounded corners + corner clipping are Bootstrap utilities on the wrapper
   (.border .rounded .overflow-hidden) and .mb-0 on the table. The ONE thing no utility
   can target is dropping the border under the LAST row so it doesn't double the
   wrapper's bottom edge — scoped to the wrapper so other renders keep the separator. */
.gc-step-1-variation-table-wrap .gc-step-1-variation-table > tbody > tr:last-child > * { border-bottom: 0; }
/* Rooming editor (P3b): capacity-bounded per-bucket steppers inside each room card. */
/* Occupancy unit sections — capacity-bounded age-bucket blocks that replace the
   flat travel-group table when an occupancy option is chosen (two-step-booking-form.js).
   Laid out like the tour-schedule day blocks: one bordered card per unit. */
.gc-step-1-unit .gc-unit-count { min-width: 2.75rem; pointer-events: none; text-align: center; }
.gc-step-1-unit .gc-unit-bucket:last-child { margin-bottom: 0 !important; }
/* Leading thumbnail column — fixed small width + cover crop (no Bootstrap width
   utility at this size). The date divider's fill/weight (bg-light / fw-bold) are
   Bootstrap classes; only its TOP rule is custom (a table-coloured day separator,
   no side borders — Bootstrap's border-2 added coloured left/right edges). */
.gc-cart-services-table .gc-cart-item-img { width: 6rem; }
.gc-cart-services-table .gc-cart-item-img img { max-height: 4rem; object-fit: cover; }
.gc-cart-services-table .gc-cart-date-cell { border-top: 2px solid #dee2e6; }

/* Trip map canvas height — Bootstrap has no vh height utility. Border/rounded and
   sticky come from Bootstrap classes on the element; the col-lg-* grid stacks it. */
.gc-cart-map-canvas { height: 70vh; min-height: 360px; }
@media (max-width: 991.98px) { .gc-cart-map-canvas { height: 55vh; } }
/* Both offcanvas maps (saved places + trip) share one fixed height — 1/3 shorter
   than the old 400px favourites map. Leaflet needs an explicit height to lay out. */
.gc-offcanvas-map { height: 267px; }
/* Numbered itinerary pin on the trip map (Leaflet divIcon — genuinely custom). */
.gc-cart-map-pin { background: transparent; border: 0; }
.gc-cart-map-pin span {
	display: flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 50%;
	background: #2d7ab8; color: #fff; font-weight: 700; font-size: 0.8rem;
	border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.3);
	transition: transform 0.1s ease, background 0.1s ease;
}
/* Two-way hover highlight between the cart table and the trip map. */
.gc-cart-services-table .gc-cart-item.gc-highlighted { background: #fff3cd; }
.gc-cart-map-pin.gc-highlighted span { background: #d63384; transform: scale(1.3); z-index: 1000; }
/* Saved-place (favourite) markers on the trip map — heart, off-route stands out. */
.gc-cart-map-fav { background: transparent; border: 0; text-align: center; }
.gc-cart-map-fav i { font-size: 18px; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px rgba(0,0,0,0.4); }
.gc-cart-map-fav.is-covered i { color: #198754; }        /* on the route */
.gc-cart-map-fav.is-uncovered i { color: #dc3545; }       /* not travelled through */

/* Responsive <picture> single source of truth (gc_helper_picture):
   display:contents makes the <picture> layout-transparent so the inner <img>
   keeps the exact CSS the bare <img> had (object-fit, height, .img-fluid, …). */
.gc-picture {
	display: contents;
}

/* Cart itinerary — accommodation NIGHTS read differently from day activities (Slice D).
   A night (hotel stay row, or a tour day whose schedule covers the night) gets a calm
   info-blue accent; a tour day gets a warm accent; empty in-between days stay muted.
   Theme-overridable — these are gentle defaults, not a full skin. */
.gc-cart-night-row > td { border-left: 3px solid var(--bs-info, #0dcaf0); }
.gc-cart-night-row { background: rgba(13, 202, 240, .05); }
.gc-cart-tour-day-row > td { border-left: 3px solid var(--bs-warning, #ffc107); }
.gc-cart-covered-night { color: var(--bs-info-text-emphasis, #055160); font-style: italic; }
.gc-cart-covered-night::before { content: "\f236"; font-family: FontAwesome; margin-right: .35rem; } /* fa-bed */
.gc-cart-empty-day .gc-cart-empty-day-cell { opacity: .65; }

/* Cart itinerary — a round-trip pack (variable end date) shows on both endpoint days; give
   its arrival/departure rows a distinct accent from lodging (info) and tour days (amber). */
.gc-cart-roundtrip-row > td { border-left: 3px solid var(--bs-teal, #20c997); }
.gc-cart-roundtrip-label::before { content: "\f0ec"; font-family: FontAwesome; margin-right: .35rem; } /* fa-exchange */

/* Itinerary lines accented by product TYPE — shared language across cart, order, quote &
   message (hotel = info, tour = amber, transfer/car = teal, place = green). A single left bar
   per row (first cell) rather than a per-column border. */
.gc-itinerary-type-hotel > td:first-child { border-left: 3px solid var(--bs-info, #0dcaf0); }
.gc-itinerary-type-tour  > td:first-child { border-left: 3px solid var(--bs-warning, #ffc107); }
.gc-itinerary-type-car   > td:first-child { border-left: 3px solid var(--bs-teal, #20c997); }
.gc-itinerary-type-place > td:first-child { border-left: 3px solid var(--bs-success, #198754); }