* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: #000 !important;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: #f5f5f5;
}


/* ========================================
   CONTENEDOR GENERAL
======================================== */

.jacs-booking-wrapper {
    width: 100%;
    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding: 5px 20px 40px;

    background: #000;
}


/* ========================================
   TARJETA
======================================== */

.jacs-booking-card{

    width:100%;

    max-width:700px;

    margin:40px auto;

    background:#050507;

    border:1px solid #1c1c20;

    border-radius:24px;

    padding:40px;

}

/* ========================================
   OCULTAR ENCABEZADO Y PROGRESO ANTERIOR
======================================== */

.jacs-booking-header,
.jacs-booking-progress {
    display: none;
}


/* ========================================
   FILAS
======================================== */

.jacs-row {
    display: flex;
    gap: 24px;

    margin-bottom: 25px;
}

.jacs-field {
    flex: 1;
    min-width: 0;
}

.jacs-full {
    flex: 1 1 100%;
}


/* ========================================
   LABELS
======================================== */

.jacs-field label {
    display: block;

    margin: 0 0 8px;

    color: #d6d6d9;

    font-size: 15px;
    font-weight: 600;

    line-height: 1.3;
}


/* ========================================
   INPUTS Y SELECT
======================================== */

.jacs-field input,
.jacs-field select {
    width: 100%;
    height: 53px;

    margin: 0;

    padding: 0 16px;

    background: #111114 !important;

    border: 1px solid #725a0a;
    border-radius: 13px;

    color: #f4f4f4;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 400;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


/* PLACEHOLDER */

.jacs-field input::placeholder {
    color: #92929a;
    opacity: 1;
}


/* FOCUS */

.jacs-field input:focus,
.jacs-field select:focus {
    background: #131316 !important;

    border-color: #d3aa28;

    box-shadow:
        0 0 0 2px rgba(211, 170, 40, 0.08),
        0 0 16px rgba(211, 170, 40, 0.08);
}


/* ========================================
   SELECT
======================================== */

.jacs-field select {
    cursor: pointer;

    appearance: auto;

    color-scheme: dark;
}

.jacs-field select option {
    background: #111114;
    color: #fff;
}


/* ========================================
   DATE / TIME
======================================== */

.jacs-field input[type="date"],
.jacs-field input[type="time"] {
    color-scheme: dark;
}

.jacs-field input[type="date"]::-webkit-calendar-picker-indicator,
.jacs-field input[type="time"]::-webkit-calendar-picker-indicator {
    cursor: pointer;

    opacity: 0.75;

    filter:
        sepia(1)
        saturate(5)
        hue-rotate(355deg)
        brightness(0.9);
}


/* ========================================
   CONTADORES PASAJEROS / MALETAS
======================================== */

.jacs-counter {
    width: 100%;
    height: 53px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #111114;

    border: 1px solid #725a0a;
    border-radius: 13px;
}


/* BOTONES - / + */

.jacs-counter button {
    width: 58px;
    height: 100%;

    flex: 0 0 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;

    color: #d9b52f;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: 400;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.1s ease;
}

.jacs-counter button:hover {
    background: rgba(211, 170, 40, 0.10);
    color: #f4cf4f;
}

.jacs-counter button:active {
    transform: scale(0.88);
}


/* NÚMERO */

.jacs-value {
    flex: 1;

    text-align: center;

    color: #f5f5f5;

    font-size: 17px;
    font-weight: 500;

    user-select: none;
}


/* ========================================
   PRECIO
   NO SE MOSTRARÁ EN EL PASO 1
======================================== */

.jacs-price-box {
    display: none;
}


/* ========================================
   BOTÓN INFERIOR
======================================== */

.jacs-actions {
    width: 100%;

    margin-top: 31px;

    text-align: center;
}

.jacs-btn-next {
    width: 100%;
    min-height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 15px 25px;

    background: linear-gradient(
        100deg,
        #d7ad27 0%,
        #e6bf42 45%,
        #f5d779 100%
    );

    border: 0;
    border-radius: 13px;

    color: #050505;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: 700;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 24px rgba(222, 178, 45, 0.34),
        0 0 30px rgba(222, 178, 45, 0.10);

    transition:
        transform 0.15s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.jacs-btn-next:hover {
    filter: brightness(1.05);

    box-shadow:
        0 6px 30px rgba(222, 178, 45, 0.45),
        0 0 38px rgba(222, 178, 45, 0.13);
}

.jacs-btn-next:active {
    transform: translateY(1px) scale(0.995);
}


/* ========================================
   WORDPRESS / ASTRA
======================================== */

.site-content,
.ast-container,
.entry-content,
.site-main,
article,
.page,
.hentry {
    background: #000;
}

.entry-content {
    margin: 0;
}

.jacs-booking-wrapper p {
    margin-top: 0;
}


/* ========================================
   TABLET
======================================== */

@media (max-width: 768px) {

    .jacs-booking-wrapper {
        padding: 5px 14px 30px;
    }

    .jacs-booking-card {
        max-width: 660px;

        padding: 34px 28px 32px;

        border-radius: 21px;
    }

    .jacs-row {
        gap: 18px;
        margin-bottom: 22px;
    }

}


/* ========================================
   MÓVIL
======================================== */

@media (max-width: 600px) {

    .jacs-booking-wrapper {
        padding: 4px 10px 25px;
    }

    .jacs-booking-card {
        padding: 28px 20px 27px;

        border-radius: 18px;
    }

    .jacs-row {
        flex-direction: column;

        gap: 20px;

        margin-bottom: 20px;
    }

    .jacs-field label {
        font-size: 14px;
    }

    .jacs-field input,
    .jacs-field select,
    .jacs-counter {
        height: 52px;

        font-size: 15px;
    }

    .jacs-counter button {
        width: 56px;
        flex-basis: 56px;
    }

    .jacs-actions {
        margin-top: 27px;
    }

    .jacs-btn-next {
        min-height: 58px;

        font-size: 17px;

        border-radius: 12px;
    }

}

/* ==========================================
   REMOVE ASTRA WHITE BACKGROUND
========================================== */

html,
body,
.site,
#page,
.site-content,
.content-area,
.site-main,
.ast-container,
.entry-content,
article,
.page,
.hentry {

    background: #000 !important;

}

.ast-container{

    max-width:100% !important;
    padding:0 !important;

}

.entry-content{

    margin:0 !important;

}

.site-content{

    padding:0 !important;

}

body.page{

    background:#000 !important;

}

/* Texto escrito en los inputs */

input[type="text"],
input[type="email"],
textarea{

    color:#ffffff !important;

}

/* Placeholder */

input[type="text"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder{

    color:#8c8c8c !important;

}

/*==================================================
STEP 2
==================================================*/

#jacs-step-2 .jacs-booking-card{

    max-width:1400px !important;

}

.jacs-step2-wrapper{

    display:flex;

    flex-direction:column;

    gap:30px;

    width:100%;

}

.jacs-summary-card{

    width:100%;

    background:#0b0b0d;

    border:none;

    border-radius:20px;

    padding:35px;

    box-sizing:border-box;

}

.jacs-passenger-card{

    width:100%;

    background:#0b0b0d;

    border:1px solid #725a0a;

    border-radius:20px;

    padding:35px;

    box-sizing:border-box;

}

.jacs-summary-card h2,
.jacs-passenger-card h2{

    margin:0 0 25px;

    color:#d7ad27;

    font-size:24px;

    font-weight:700;

}

.jacs-summary-card h3{

    margin:30px 0 15px;

    color:#d7ad27;

    font-size:20px;

}

.jacs-summary-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    padding:12px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.jacs-summary-item span{

    color:#9b9b9b;

}

.jacs-summary-item strong{

    color:#fff;

    font-weight:600;

    text-align:right;

}

.jacs-services{

    margin:0;

    padding-left:22px;

}

.jacs-services li{

    margin-bottom:14px;

    color:#fff;

}

.jacs-total-box{

    margin-top:35px;

    text-align:center;

}

.jacs-total-box span{

    display:block;

    color:#999;

    margin-bottom:12px;

    font-size:14px;

    letter-spacing:1px;

}

.jacs-total-box strong{

    display:block;

    color:#d7ad27;

    font-size:56px;

    font-weight:700;

}

.jacs-secure{

    margin-top:25px;

    color:#8b8b8b;

    text-align:center;

    font-size:13px;

    line-height:22px;

}

.jacs-passenger-card label{

    display:block;

    margin-bottom:8px;

    color:#fff;

    font-weight:600;

}

.jacs-passenger-card input,
.jacs-passenger-card select{

    width:100%;

    margin-bottom:22px;

}


.jacs-booking-card{

    outline:3px solid lime !important;
}

/*=========================================
  SUCCESS SCREEN
=========================================*/

.jacs-success-card{

    max-width:700px;

    margin:40px auto;

    padding:50px;

    background:#0f0f12;

    border:1px solid #b78d12;

    border-radius:20px;

    text-align:center;

    animation:jacsFade .45s ease;

}

.jacs-success-icon{

    width:90px;

    height:90px;

    margin:0 auto 25px;

    border-radius:50%;

    background:#18c964;

    color:#fff;

    font-size:52px;

    font-weight:bold;

    line-height:90px;

    box-shadow:0 0 30px rgba(24,201,100,.45);

}

.jacs-success-card h2{

    color:#d8ab1d;

    font-size:38px;

    margin-bottom:15px;

}

.jacs-success-text{

    color:#d5d5d5;

    font-size:18px;

    margin-bottom:35px;

}

.jacs-booking-number-box{

    margin:35px 0;

    padding:25px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:15px;

    background:#18181d;

}

.jacs-booking-number-box span{

    display:block;

    color:#999;

    font-size:13px;

    letter-spacing:2px;

    margin-bottom:12px;

}

#success-booking-number{

    display:block;

    color:#ffd24d;

    font-size:42px;

    font-weight:700;

}

.jacs-success-message{

    color:#bdbdbd;

    line-height:1.8;

    margin:35px 0;

}

@keyframes jacsFade{

    from{

        opacity:0;

        transform:translateY(30px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.jacs-btn-back-summary{

    background:transparent;

    border:2px solid #d4a514;

    color:#d4a514;

    padding:8px 18px;

    border-radius:30px;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.jacs-btn-back-summary:hover{

    background:#d4a514;

    color:#111;

}

.jacs-summary-top{

    display:flex;

    justify-content:flex-end;

    margin-bottom:14px;

}

.jacs-btn-back-summary{

    background:transparent;

    border:2px solid #d4a514;

    color:#d4a514;

    padding:8px 18px;

    border-radius:30px;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.jacs-btn-back-summary:hover{

    background:#d4a514;

    color:#111;

}

/* ICONO ROJO CUANDO EL CLIENTE CANCELA EL PAGO */

.jacs-success-icon.jacs-success-icon-canceled {
    background: #dc2626;
    color: #ffffff;
}