/*
Theme Name: Travivu Child
Theme URI: https://gaviaspreview.com/wp/travivu/
Author URI: https://themeforest.net/user/gavias
Author: Gaviasthemes Team
Description: Child theme for the Travivu theme.
Template: travivu
*/

/* ------------------------------------------------------------------
   Header "Llámanos cuando quieras" widget (Elementor icon-box 9b19141).
   The phone number was wrapping onto two lines in the blue header bar.
   nowrap on the number keeps it whole; the title is free to wrap.
   ------------------------------------------------------------------ */
.elementor-element-9b19141 .elementor-icon-box-description {
    white-space: nowrap;
    line-height: 1.25;
    margin-bottom: 0;
}

.elementor-element-9b19141 .elementor-icon-box-title {
    line-height: 1.25;
    margin-bottom: 2px;
}

.elementor-element-9b19141 .elementor-icon-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* Floating WhatsApp button — bottom-left, clear of the storefront cart FAB. */
.bv-whatsapp {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2147482000;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    transition: transform .15s ease, box-shadow .15s ease;
}

.bv-whatsapp:hover,
.bv-whatsapp:focus {
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
}

@media (max-width: 640px) {
    .bv-whatsapp { width: 50px; height: 50px; left: 14px; bottom: 14px; }
}


/* ------------------------------------------------------------------
   Cart drawer brand colour.

   The core reads --ab-accent (falling back to its own blue). mountProduct
   sets it inline from the block's data-accent, but on pages with no product
   block mountCart has no accent to copy, so the FAB and drawer render blue.
   Declaring it on the host makes the brand colour the baseline everywhere;
   the inline value on tour pages is the same orange, so nothing conflicts.
   ------------------------------------------------------------------ */
.ab-cart-host {
    --ab-accent: #ff9d3d;
    --ab-on-accent: #1f2937;   /* matches the core contrast calc for #ff9d3d */
}


/* ------------------------------------------------------------------
   Cart drawer: phone row.

   WP Travel Engine (wte-public.css) and the theme (template.css) both
   declare a bare `select { width: 100% }`. The core sizes the country-code
   select with `flex: 0 0 auto`, whose basis is `auto` — so it inherits that
   100%, fills the row and pushes the number input outside the drawer,
   making checkout impossible. Pin the widths explicitly.
   ------------------------------------------------------------------ */
.ab-cart-host .ab-phone-field {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: stretch;
}

.ab-cart-host .ab-phone-field .ab-phone-cc {
    flex: 0 0 auto;
    width: auto;
    max-width: 42%;
}

.ab-cart-host .ab-phone-field input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}


/* ------------------------------------------------------------------
   Hide the header account block ("Iniciar sesión / Registrarse").
   Buyers check out as guests through the Autobits cart; a WordPress
   account does nothing for them and only invites confusion.
   Hidden rather than deleted so it can be switched back on in one line.
   ------------------------------------------------------------------ */
.gva-element-gva_user,
.gva-user.without-login,
.login-account.without-login {
    display: none !important;
}


/* ------------------------------------------------------------------
   Homepage "Por qué elegirnos" collage: hide the decorative image widget.
   It points at attachment 371, which was a Travivu demo mark until the
   branding swap replaced that attachment with the Buenvuelo logo — so the
   logo now floats over the photo collage, half-covered and half-cut.
   Hidden rather than deleted so the widget is easy to restore or re-point.
   ------------------------------------------------------------------ */
.elementor-element-85cf6aa {
    display: none !important;
}


/* ------------------------------------------------------------------
   [bv_tours_grid] — tour cards with inline booking.
   ------------------------------------------------------------------ */
.bv-tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
    align-items: start;
}

.bv-tour-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(16, 32, 64, .10);
    display: flex;
    flex-direction: column;
}

.bv-tour-media { position: relative; display: block; }
.bv-tour-media img { width: 100%; height: 220px; object-fit: cover; display: block; }

.bv-tour-badge {
    position: absolute; left: 16px; top: 16px;
    background: #ff9d3d; color: #fff;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 6px 12px; border-radius: 6px;
}

.bv-tour-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }

.bv-tour-title { font-size: 1.15rem; line-height: 1.3; margin: 0 0 8px; }
.bv-tour-title a { color: #16243d; text-decoration: none; }
.bv-tour-title a:hover { color: #ff9d3d; }

.bv-tour-teaser { color: #6b7280; font-size: .92rem; line-height: 1.5; margin: 0 0 14px; }

.bv-tour-meta {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; margin: auto 0 16px; padding-top: 14px; border-top: 1px solid #eef1f5;
}
.bv-tour-dur { color: #6b7280; font-size: .85rem; }
.bv-tour-price { font-weight: 800; color: #16243d; font-size: 1.05rem; }
.bv-tour-price small { display: block; font-weight: 400; font-size: .72rem; color: #6b7280; }

.bv-tour-book {
    width: 100%; padding: 12px 16px; border: 0; border-radius: 10px;
    background: #ff9d3d; color: #16243d; font: inherit; font-weight: 700;
    cursor: pointer; text-align: center; text-decoration: none; display: block;
    transition: filter .15s ease;
}
.bv-tour-book:hover { filter: brightness(.95); color: #16243d; }
.bv-tour-book.is-open { background: #eef1f5; color: #16243d; }

.bv-tour-slot { margin-top: 14px; }
/* the booking box already draws its own card — drop its shadow inside ours */
.bv-tour-slot .ab-booking-card { box-shadow: none; border: 0; padding: 0; }

@media (max-width: 480px) {
    .bv-tours-grid { grid-template-columns: 1fr; }
}


/* The carousel this replaced was full-bleed, so the grid inherits a container
   with no max-width and the last column runs off the viewport. Constrain it. */
.bv-tours-grid {
    max-width: 1200px;
    margin-inline: auto;
    padding: 0 15px 10px;
    box-sizing: border-box;
}
.bv-tours-grid * { box-sizing: border-box; }


/* Pagination under the tour grid. */
.bv-tours-nav {
    display: flex; justify-content: center; align-items: center; gap: 8px;
    margin: 34px auto 0; max-width: 1200px; padding: 0 15px;
}
.bv-tours-nav button {
    min-width: 42px; height: 42px; padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px;
    background: transparent; color: #fff; font: inherit; font-weight: 700;
    cursor: pointer; line-height: 1; transition: background .15s ease, color .15s ease;
}
.bv-tours-nav button:hover:not(:disabled) { background: rgba(255, 255, 255, .16); }
.bv-tours-nav button.is-current { background: #ff9d3d; border-color: #ff9d3d; color: #16243d; }
.bv-tours-nav button:disabled { opacity: .35; cursor: default; }

/* The grid sits on a light background elsewhere (e.g. /tours-page/) — invert there. */
.bv-tours-wrap:not(.on-dark) .bv-tours-nav button { color: #16243d; border-color: #d8dee7; }
.bv-tours-wrap:not(.on-dark) .bv-tours-nav button:hover:not(:disabled) { background: #eef1f5; }
.bv-tours-wrap:not(.on-dark) .bv-tours-nav button.is-current { color: #16243d; border-color: #ff9d3d; }


/* The nav renders just below the blue band, i.e. on white — the earlier
   white-on-dark scheme made every button except the current one invisible.
   One solid scheme instead, legible on both the blue section and white. */
.bv-tours-nav button,
.bv-tours-wrap.on-dark .bv-tours-nav button {
    background: #fff;
    color: #16243d;
    border: 1px solid #d8dee7;
}
.bv-tours-nav button:hover:not(:disabled),
.bv-tours-wrap.on-dark .bv-tours-nav button:hover:not(:disabled) {
    background: #eef1f5;
    border-color: #c3ccd8;
}
.bv-tours-nav button.is-current,
.bv-tours-wrap.on-dark .bv-tours-nav button.is-current {
    background: #ff9d3d;
    border-color: #ff9d3d;
    color: #16243d;
}


/* ------------------------------------------------------------------
   Booking modal for the tour grid.
   Replaces the inline expansion, which pushed the card to ~3x height and
   left the grid rows ragged. On phones it becomes a bottom sheet.
   ------------------------------------------------------------------ */
body.bv-modal-open { overflow: hidden; }

.bv-modal { position: fixed; inset: 0; z-index: 2147483300; display: flex;
            align-items: center; justify-content: center; padding: 20px; }
.bv-modal[hidden] { display: none; }

.bv-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 20, 38, .62); }

.bv-modal-panel {
    position: relative; z-index: 1;
    width: min(460px, 100%); max-height: min(88vh, 780px);
    background: #fff; border-radius: 18px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .3);
    display: flex; flex-direction: column; overflow: hidden;
    animation: bv-modal-in .18s ease;
}
@keyframes bv-modal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.bv-modal-head {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 18px 20px; border-bottom: 1px solid #eef1f5;
}
.bv-modal-title { margin: 0; font-size: 1.1rem; line-height: 1.3; color: #16243d; flex: 1; }
.bv-modal-close {
    flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: #f3f5f8; color: #16243d; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.bv-modal-close:hover { background: #e6eaf0; }

.bv-modal-body { padding: 6px 20px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* the booking box draws its own card — the modal already is one */
.bv-modal-body .ab-booking-card { box-shadow: none; border: 0; padding: 0; max-width: none; }

@media (max-width: 640px) {
    .bv-modal { padding: 0; align-items: flex-end; }
    .bv-modal-panel { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
    @keyframes bv-modal-in { from { transform: translateY(100%); } to { transform: none; } }
}

/* Mobile grid: one column, shorter media, comfortable tap targets. */
@media (max-width: 640px) {
    .bv-tours-grid { grid-template-columns: 1fr; gap: 20px; }
    .bv-tour-media img { height: 190px; }
    .bv-tour-book { padding: 14px 16px; }
    .bv-tours-nav { flex-wrap: wrap; gap: 6px; }
    .bv-tours-nav button { min-width: 40px; height: 40px; }
}


/* Equal-height cards so the Reservar buttons line up across a row. */
.bv-tours-grid { align-items: stretch; }
.bv-tour-card { height: 100%; }


/* The following Elementor section's .e-con-inner overlaps the pagination: the
   buttons are visible (the overlay is transparent) but hit-testing hands the
   click to that container, so real mouse clicks never reach them. Lift the
   grid and its nav into their own stacking context. */
.bv-tours-wrap { position: relative; z-index: 5; }
.bv-tours-nav  { position: relative; z-index: 6; }


/* Align the grid with the section heading.
   The Elementor container this sits in is 1250 wide and overflows the viewport,
   so centring the grid inside it pushed the cards 25px right of the heading and
   flush to the screen edge. Constrain the wrapper instead and let the grid fill
   it, so both start on the same column as "Nuestros destinos". */
.bv-tours-wrap { max-width: 1200px; margin-inline: auto; }
.bv-tours-grid,
.bv-tours-nav {
    max-width: none;
    margin-inline: 0;
    padding-left: 0;
    padding-right: 0;
}


/* The parent box is 1250 wide and the heading is left-aligned within it, so
   auto margins (which centre) leave the grid 25px right of the heading. Pin it
   to the same left edge instead. */
.bv-tours-wrap { max-width: 1200px; margin-left: 0; margin-right: auto; }


/* Card meta now carries duration + a nudge instead of a price: the price shown
   must come from Autobits (/price, on a chosen date), not WordPress. */
.bv-tour-cta-hint { color: #6b7280; font-size: .85rem; text-align: right; }