/* ═══════════════════════════════════════════════════════════
   JS Tours Panamá – Modal de reserva combinable
   Estilo moderno tipo Riva Charters
   ═══════════════════════════════════════════════════════════ */

/* Modal más ancho */
.jst-combined-modal .modal-dialog { max-width: 920px; }
.jst-combined-modal .modal-content { border-radius: 20px; padding: 40px 44px; }

/* Header */
.jst-combined-modal .modal-header { border: none; padding: 0 0 24px; display: block; }
.jst-combined-modal .modal-header h4 { font-size: 24px; font-weight: 800; color: #1a1a2e; margin: 0 0 6px; }
.jst-combined-modal .modal-header p { font-size: 14px; color: #777; margin: 0; }

/* Body — dos columnas */
.jst-combined-modal .modal-body {
    display: flex !important;
    gap: 28px;
    align-items: flex-start;
    padding: 0;
}
.jst-modal-form-col { flex: 1; min-width: 0; }

/* ── Campo de fecha ──────────────────────────────────────── */
.jst-date-field { margin-bottom: 24px; position: relative; }
.jst-date-field label {
    display: block; font-size: 13px; font-weight: 600;
    color: #555; margin-bottom: 8px;
}
.jst-date-input {
    width: 100%; padding: 14px 16px;
    border: 1.5px solid #ddd; border-radius: 10px;
    font-size: 15px; color: #333; box-sizing: border-box;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}
.jst-date-input:focus {
    outline: none; border-color: #1b4f8a;
    box-shadow: 0 0 0 3px rgba(27,79,138,.12);
}
.jst-date-input::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: .6; font-size: 18px;
}

/* Estado de error del campo */
.jst-input-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231,76,60,.12) !important;
    animation: jstShake .35s;
}
.jst-field-error {
    display: block; color: #e74c3c; font-size: 13px;
    font-weight: 600; margin-top: 8px;
}
@keyframes jstShake {
    0%,100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Error en el sidebar */
.jst-sb-error {
    background: #fdecea; color: #c0392b; font-size: 13px;
    font-weight: 600; padding: 10px 14px; border-radius: 8px;
    margin-bottom: 12px; text-align: center;
    border: 1px solid #f5c6cb;
}

/* ── Títulos de sección ──────────────────────────────────── */
.jst-section-title {
    font-size: 16px; font-weight: 700; color: #1a1a2e;
    margin: 0 0 16px; padding-bottom: 10px;
    border-bottom: 2px solid #f0f0f0;
}

/* ── Lista de tipos de pasajero ──────────────────────────── */
.jst-pax-list { list-style: none; padding: 0; margin: 0 0 28px; }
.jst-pax-item {
    display: flex; align-items: center; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid #f2f2f2;
}
.jst-pax-item:last-child { border-bottom: none; }

.jst-pax-info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.jst-pax-name { font-size: 15px; font-weight: 600; color: #1a1a2e; line-height: 1.3; }
.jst-pax-sub  { font-size: 12px; color: #999; margin-top: 2px; }

.jst-pax-price {
    font-size: 16px; font-weight: 700; color: #1b4f8a;
    white-space: nowrap; flex-shrink: 0;
}
.jst-pax-price del { color: #bbb; font-weight: 400; font-size: 13px; margin-right: 6px; }

/* ── Contador +/- ────────────────────────────────────────── */
.jst-counter {
    display: flex; align-items: center;
    border: 1.5px solid #ddd; border-radius: 10px;
    overflow: hidden; flex-shrink: 0;
}
.jst-minus, .jst-plus {
    width: 38px; height: 38px; border: none; background: #f6f8fb;
    font-size: 20px; font-weight: 600; color: #1b4f8a; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s; line-height: 1;
}
.jst-minus:hover, .jst-plus:hover { background: #e4edf9; }
.jst-minus:active, .jst-plus:active { background: #d0e0f4; }
.jst-qty {
    width: 46px; height: 38px; text-align: center; border: none;
    border-left: 1.5px solid #ddd; border-right: 1.5px solid #ddd;
    font-size: 15px; font-weight: 700; color: #1a1a2e; background: #fff;
}

/* ── Servicios ───────────────────────────────────────────── */
.jst-service-list { list-style: none; padding: 0; margin: 0 0 24px; }
.jst-service-item { padding: 10px 0; border-bottom: 1px solid #f5f5f5; }
.jst-service-check {
    display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0;
}
.jst-svc-checkbox { width: 18px; height: 18px; accent-color: #1b4f8a; cursor: pointer; }
.jst-service-info { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.jst-svc-name { font-size: 14px; color: #333; }
.jst-svc-price { font-size: 14px; font-weight: 600; color: #1b4f8a; }

/* ── Sidebar de resumen ──────────────────────────────────── */
.jst-booking-sidebar {
    width: 270px; flex-shrink: 0;
    background: #f4f7fb; border-radius: 16px;
    padding: 24px 22px; border: 1px solid #e2eaf4;
    position: sticky; top: 0;
}
.jst-booking-sidebar h5 {
    font-size: 16px; font-weight: 700; color: #1a1a2e;
    margin: 0 0 18px; padding-bottom: 12px;
    border-bottom: 2px solid #e2eaf4;
}
.jst-sb-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: #555; margin-bottom: 10px; gap: 10px;
}
.jst-sb-row span:first-child { flex: 1; }
.jst-sb-row span:last-child { font-weight: 600; color: #1a1a2e; white-space: nowrap; }
.jst-sb-empty { font-size: 12px; color: #aaa; text-align: center; margin: 8px 0; line-height: 1.5; }
.jst-sb-hr { border: none; border-top: 1.5px solid #dde6f0; margin: 16px 0; }
.jst-sb-total { font-size: 16px !important; margin-bottom: 18px; }
.jst-sb-total span { font-weight: 700 !important; color: #1a1a2e !important; font-size: 16px; }
.jst-sb-total-val { font-size: 24px !important; color: #1b4f8a !important; font-weight: 800 !important; }

.jst-reservar-btn {
    width: 100%; padding: 15px; background: #1b4f8a; color: #fff;
    border: none; border-radius: 12px; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: background .2s; letter-spacing: .3px;
}
.jst-reservar-btn:hover { background: #154072; }
.jst-reservar-btn:disabled { opacity: .65; cursor: not-allowed; }

.jst-sb-secure { font-size: 11px; color: #27ae60; text-align: center; margin: 12px 0 0; font-weight: 600; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 767px) {
    .jst-combined-modal .modal-body { flex-direction: column; }
    .jst-booking-sidebar { width: 100%; position: static; }
    .jst-combined-modal .modal-content { padding: 30px 20px; }
    .jst-combined-modal .modal-dialog { max-width: 100%; margin: 10px; }
}

/* ── Opciones de pago (100% / 50%) ──────────────────────────── */
.jst-payment-options {
    margin: 18px 0 4px;
    padding-top: 16px;
    border-top: 1.5px solid #dde6f0;
}
.jst-pay-title {
    font-size: 13px; font-weight: 700; color: #1a1a2e;
    margin: 0 0 12px;
}
.jst-pay-option {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: 10px;
    border: 1.5px solid #ddd; border-radius: 10px;
    cursor: pointer; transition: all .15s;
    background: #fff;
}
.jst-pay-option:hover { border-color: #1b4f8a; }
.jst-pay-option input { accent-color: #1b4f8a; width: 17px; height: 17px; cursor: pointer; flex-shrink: 0; }
.jst-pay-option input:checked ~ .jst-pay-label { color: #1b4f8a; font-weight: 700; }
.jst-pay-option:has(input:checked) { border-color: #1b4f8a; background: #f4f8fd; }
.jst-pay-label { flex: 1; font-size: 14px; color: #333; }
.jst-pay-amt { font-size: 15px; font-weight: 700; color: #1b4f8a; white-space: nowrap; }

/* Filas de pago ahora / pendiente */
.jst-sb-paynow { font-size: 15px !important; margin-top: 12px; }
.jst-sb-paynow span:first-child { font-weight: 700 !important; color: #1a1a2e !important; }
.jst-sb-paynow-val { font-size: 19px !important; color: #27ae60 !important; font-weight: 800 !important; }
.jst-sb-pending { font-size: 12px !important; color: #999 !important; }
.jst-sb-pending-val { color: #999 !important; }

/* ── Bebés / tipos GRATIS ───────────────────────────────────── */
.jst-pax-free {
    background: linear-gradient(135deg, #eafaf1 0%, #f0fdf4 100%);
    border-radius: 12px;
    padding: 14px 12px !important;
    border: 1.5px dashed #27ae60 !important;
    margin: 4px 0;
}
.jst-pax-free .jst-pax-name { color: #1a7a43; }

.jst-free-badge {
    display: inline-block;
    background: #27ae60;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: 20px;
    letter-spacing: .5px;
    box-shadow: 0 2px 6px rgba(39,174,96,.3);
    animation: jstPulse 2s infinite;
}
@keyframes jstPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

.jst-sb-free {
    color: #27ae60 !important;
    font-weight: 800 !important;
    font-size: 12px;
    letter-spacing: .3px;
}

/* ═══════════════════════════════════════════════════════════
   Corrección de alineación de tarjetas de tours/experiences
   ═══════════════════════════════════════════════════════════ */

/* Filas del grid — altura uniforme entre columnas */

/* El contenido de la tarjeta crece para ocupar el espacio disponible */

/* El área de precio + botón siempre pegada al fondo de la tarjeta */

/* Asegurar que las columnas del grid estiren la tarjeta al 100% */
.row.g-4 > [class*="col-"] {
    display: flex !important;
    flex-direction: column !important;
}

/* ── Botón de WhatsApp ──────────────────────────────────────── */
.jst-whatsapp-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: #25D366 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px;
    padding: 15px 20px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background .2s, transform .1s;
    margin-top: 12px;
    cursor: pointer;
}
.jst-whatsapp-btn:hover {
    background: #1da851 !important;
    color: #fff !important;
    transform: translateY(-1px);
}
.jst-whatsapp-btn svg {
    flex-shrink: 0;
    fill: #fff;
}
.jst-whatsapp-btn span { color: #fff !important; }

/* ═══════════════════════════════════════════════════════════
   Diseño mejorado de tarjetas de tours (.package-card)
   Estilo moderno tipo tarjeta premium
   ═══════════════════════════════════════════════════════════ */


/* Imagen */

/* Badge superior (tipo de tour) */

/* Contenido */

/* Precio */

/* Botón "Reservar ahora" */

/* Separador */

/* ═══════════════════════════════════════════════════════════
   Sección "Tours más vendidos" — [jst_tours_vendidos]
   Diseño claro y moderno
   ═══════════════════════════════════════════════════════════ */

.jst-vendidos-section {
    max-width: 1240px;
    margin: 0 auto;
    padding: 60px 20px;
}

.jst-vendidos-head { margin-bottom: 36px; }
.jst-vendidos-eyebrow {
    display: inline-block;
    color: #7cb342;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
    position: relative;
    padding-right: 50px;
}
.jst-vendidos-eyebrow::after {
    content: '';
    position: absolute;
    right: 0; top: 50%;
    width: 38px; height: 2px;
    background: #7cb342;
}
.jst-vendidos-title {
    font-size: 34px;
    font-weight: 800;
    color: #1a2946;
    margin: 0;
    line-height: 1.2;
}

/* Grid de 4 columnas */
.jst-vendidos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

/* Tarjeta */
.jst-vendido-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(26,41,70,.08);
    border: 1px solid #eef1f6;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.jst-vendido-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(26,41,70,.16);
}

/* Imagen */
.jst-vendido-imgwrap {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.jst-vendido-imgwrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.jst-vendido-card:hover .jst-vendido-imgwrap img { transform: scale(1.07); }

.jst-vendido-badge {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(27,79,138,.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 30px;
    backdrop-filter: blur(4px);
}

/* Cuerpo */
.jst-vendido-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.jst-vendido-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a2946;
    margin: 0 0 8px;
    line-height: 1.3;
}
.jst-vendido-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 16px;
    line-height: 1.5;
}
.jst-vendido-meta {
    display: flex;
    gap: 16px;
    font-size: 12.5px;
    color: #4b5563;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.jst-vendido-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #eef1f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jst-vendido-price { display: flex; flex-direction: column; line-height: 1.1; }
.jst-vendido-desde { font-size: 11px; color: #7cb342; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.jst-vendido-price strong { font-size: 22px; color: #1a2946; font-weight: 800; }
.jst-vendido-arrow {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: #f3f6fb;
    color: #1b4f8a;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    text-decoration: none;
    transition: background .2s, color .2s, transform .2s;
}
.jst-vendido-arrow:hover {
    background: #1b4f8a;
    color: #fff;
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 1024px) {
    .jst-vendidos-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .jst-vendidos-grid { grid-template-columns: 1fr; }
    .jst-vendidos-title { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════
   Tarjetas del grid de experiencias — SOLO dentro de
   .home6-travel-package-section para no afectar otras secciones
   ═══════════════════════════════════════════════════════════ */

.home6-travel-package-section .package-card.two {
    border-radius: 18px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 6px 24px rgba(26, 41, 70, 0.08) !important;
    border: 1px solid #eef1f6 !important;
    transition: transform .25s ease, box-shadow .25s ease !important;
}
.home6-travel-package-section .package-card.two:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 16px 40px rgba(26, 41, 70, 0.15) !important;
}
.home6-travel-package-section .package-card.two .package-img-wrap {
    overflow: hidden !important;
}
.home6-travel-package-section .package-card.two .package-img-wrap img {
    transition: transform .5s ease !important;
    width: 100% !important;
    object-fit: cover !important;
}
.home6-travel-package-section .package-card.two:hover .package-img-wrap img {
    transform: scale(1.06) !important;
}
.home6-travel-package-section .package-card.two .batch span {
    border-radius: 30px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
}
.home6-travel-package-section .package-card.two .package-content {
    padding: 24px !important;
}
.home6-travel-package-section .package-card.two .package-content .btn-and-price-area .price-area h6 {
    color: #8a94a6 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
    font-weight: 700 !important;
}
.home6-travel-package-section .package-card.two .package-content .btn-and-price-area .price-area span {
    color: #1a2946 !important;
    font-weight: 800 !important;
}
.home6-travel-package-section .package-card.two .package-content .btn-and-price-area .primary-btn1 {
    border-radius: 30px !important;
    background: #1b4f8a !important;
    font-weight: 700 !important;
}
.home6-travel-package-section .package-card.two .package-content .btn-and-price-area .primary-btn1:hover {
    background: #154072 !important;
}

/* ═══════════════════════════════════════════════════════════
   Grid de tours premium [jst_tours] — réplica del card HTML
   ═══════════════════════════════════════════════════════════ */
.jst-tg-wrap { max-width: 1280px; margin: 0 auto; padding: 50px 16px; font-family: inherit; }
.jst-tg-head { text-align: center; margin-bottom: 40px; }
.jst-tg-title { font-size: 36px; font-weight: 800; color: #1a2946; margin: 0 0 14px; }
.jst-tg-sub { font-size: 16px; color: #6b6b6b; max-width: 640px; margin: 0 auto; line-height: 1.6; }

.jst-tg-grid {
    display: grid;
    grid-template-columns: repeat(var(--jst-cols, 4), 1fr);
    gap: 24px;
    align-items: stretch;
}

.jst-tg-card {
    background: #fff;
    border: 0.5px solid #e0e0e0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 22px rgba(26,41,70,.07);
    transition: transform .25s ease, box-shadow .25s ease;
}
.jst-tg-card:hover { transform: translateY(-6px); box-shadow: 0 18px 42px rgba(26,41,70,.15); }

/* Imagen con badges */
.jst-tg-img {
    position: relative;
    height: 200px;
    background-size: cover;
    background-position: center;
}
.jst-tg-badge {
    position: absolute;
    display: flex; align-items: center; gap: 5px;
    color: #fff; font-size: 12px; font-weight: 500;
    padding: 5px 12px; border-radius: 999px;
}
.jst-tg-type { top: 12px; left: 12px; background: #0e6bb1; }
.jst-tg-loc  { bottom: 12px; left: 12px; background: rgba(43,45,94,.85); padding: 4px 10px; }

/* Cuerpo */
.jst-tg-body { padding: 1rem 1.25rem; display: flex; flex-direction: column; flex: 1; }
.jst-tg-name { font-weight: 600; font-size: 17px; margin: 0 0 6px; color: #1a1a1a; line-height: 1.35; }
.jst-tg-desc { font-size: 13px; color: #6b6b6b; margin: 0 0 14px; line-height: 1.5; }

.jst-tg-meta {
    display: flex; gap: 18px; flex-wrap: wrap;
    font-size: 13px; margin-bottom: 14px;
    border-top: 0.5px solid #ededed; padding-top: 12px;
}
.jst-tg-m1 { display: flex; align-items: center; gap: 5px; color: #0e6bb1; font-weight: 500; }
.jst-tg-m2 { display: flex; align-items: center; gap: 5px; color: #2b2d5e; font-weight: 500; }

/* Footer */
.jst-tg-footer {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.jst-tg-desde { font-size: 12px; color: #6b6b6b; display: block; }
.jst-tg-amt { font-size: 21px; font-weight: 600; margin: 0; color: #1a1a1a; line-height: 1.1; }
.jst-tg-amt small { font-size: 12px; font-weight: 400; color: #6b6b6b; }

.jst-tg-btn {
    position: relative;
    background: #0e6bb1; color: #fff !important;
    font-size: 13px; font-weight: 500;
    padding: 10px 18px; border-radius: 999px;
    text-decoration: none !important;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    transition: background .2s, transform .15s;
}
.jst-tg-btn::after {
    content: ''; position: absolute; inset: 0;
    border-radius: 999px; border: 2px solid #0e6bb1;
    animation: jstRing 1.8s ease-out infinite;
}
.jst-tg-btn:hover { background: #0a578f; transform: translateX(2px); }
@keyframes jstRing {
    0%   { transform: scale(1);    opacity: .7; }
    100% { transform: scale(1.18); opacity: 0; }
}

@media (max-width: 1100px) { .jst-tg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .jst-tg-grid { grid-template-columns: 1fr; } .jst-tg-title { font-size: 28px; } }

/* === Descripción inyectada en tarjetas del widget del plugin === */
.package-card .jst-card-desc {
    font-size: 13.5px !important;
    color: #6b7280 !important;
    line-height: 1.55 !important;
    margin: 8px 0 14px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === Orden correcto en las cards: ubicación/duración arriba de la descripción ===
   La línea “Panamá ↔ 01 día” debe quedar debajo del título y antes del texto descriptivo. */
.home6-travel-package-section .package-card.two .package-content .jst-card-desc {
    margin: 10px 0 16px !important;
}

.home6-travel-package-section .package-card.two .package-content .location-and-time,
.home6-travel-package-section .package-card.two .package-content .location-and-duration,
.home6-travel-package-section .package-card.two .package-content .package-location,
.home6-travel-package-section .package-card.two .package-content .tour-location,
.home6-travel-package-section .package-card.two .package-content .card-location,
.home6-travel-package-section .package-card.two .package-content .package-info,
.home6-travel-package-section .package-card.two .package-content .package-meta,
.home6-travel-package-section .package-card.two .package-content .tour-meta {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}