:root {
    --gap: 2px;
    --container-width: 100%;
    --container-height: 300px;
    --vz-body-bg: #ffffff;
}

.custom2-container {
    display: grid;
    height: var(--container-height);
    grid-template-areas:
            "box1 box2 box3"
            "box1 box2 box4";
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--gap);
    width: var(--container-width);
    aspect-ratio: 3 / 2;
}

.custom2-box {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.custom2-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom2-box:nth-child(1) {
    grid-area: box1;
}

.custom2-box:nth-child(2) {
    grid-area: box2;
}

.custom2-box:nth-child(3) {
    grid-area: box3;
}

.custom2-box:nth-child(4) {
    grid-area: box4;
}

.custom2-container.gallery-1 {
    grid-template-areas: "box1";
    grid-template-columns: 1fr;
}

.custom2-container.gallery-2 {
    grid-template-areas: "box1 box2";
    grid-template-columns: 1fr 1fr;
}

.custom2-container.gallery-3 {
    grid-template-areas:
        "box1 box2"
        "box1 box3";
    grid-template-columns: 2fr 1fr;
}

/* gallery-4 is the default, no extra class needed */

.rounded-top-right {
    border-top-right-radius: 4px;
}

.rounded-bottom-right {
    border-bottom-right-radius: 4px;
}

.bbb-icon {
    margin-right: 10px;
}

.form-select:focus {
    outline: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}

[data-layout=horizontal] .page-content {
    padding: calc(45px + 1.5rem) calc(1.5rem* .5) 60px calc(1.5rem* .5);
    margin-top: 0px;
}

input[type="number"] {
    -webkit-appearance: textfield; /* Forzar que sea como un campo de texto */
    appearance: textfield;
}

.text-bg-red {
    background-color: darkred;
}

.out-box {
    position: absolute;
    top: 13px
}

.hover-secondary {
    background-color: #ffffff; /* Color inicial */
    transition: background-color 0.2s ease; /* Suavidad de la transición */
}

.hover-secondary:hover {
    background-color: #5596f7 !important; /* Color al pasar el cursor */
    color: white !important;
}

.loading-placeholder {
    display: inline-block;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    color: transparent;
    animation: loading-placeholder 1.5s infinite;
    border-radius: 4px;
    padding: 0px 0px;
}

@keyframes loading-placeholder {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -200% 0;
    }
}

#btnGetDisponibility.loading {
    position: relative;
    pointer-events: none;
}

#btnGetDisponibility.loading::after {
    content: '';
    position: absolute;
    right: 10px;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid #fff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.confirmation-icon {
    font-size: 5rem;
    color: #28a745;
}
.booking-details {
    background-color: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
}
.booking-code {
    font-family: monospace;
    font-size: 1.2rem;
    background-color: #e9ecef;
    padding: 5px 10px;
    border-radius: 5px;
}
.qr-code {
    max-width: 150px;
    margin: 0 auto;
}
.to64 {
    width: 64px;
}


#offersContainer .accordion-header button.accordion-button.collapsed div strong {
    color: #888;
    font-size: 18px;
    display: block;
    padding-bottom: 7px;
}

#offersContainer .accordion-header button.accordion-button div strong {
    color: #333333;
    font-size: 18px;
    display: block;
    padding-bottom: 7px;
}

#offersContainer .accordion-header button.accordion-button.collapsed div div {
    color: var(--vz-secondary);
    font-size: 16px;
}

#offersContainer .accordion-header button.accordion-button div div {
    color: var(--vz-secondary);
    font-size: 16px;
}


.accordion-button:not(.collapsed) {
    background-color: #eaf9ff !important;
}


.accordion-button.collapsed:hover {
    background-color: #eaf9ff !important;
    transition: background-color 0.2s ease;
}


.accordion-button:not(.collapsed):hover {
    background-color: #eaf9ff !important;
}

#image-thumbnail,
.tour-image,
.to64 {
    background-color: #5596f7;
    border-radius: 10px !important;
}

.mdi-clock-check-outline {
    font-size: 20px !important;
    position: relative;
    top: 1px;
}

.mdi-account-tie-voice-outline {
    font-size: 20px !important;
    position: relative;
    top: 0px;
}

.mdi-alert-circle {
    font-size: 20px !important;
}

.mdi-map-check-outline {
    font-size: 22px !important;
    position: relative;
    top: 3px;
}

.mdi-map-marker-account-outline {
    font-size: 22px !important;
    position: relative;
    top: 4px;
}

.mdi-shield {
    font-size: 22px !important;
    position: relative;
    top: -7px;
}

.mdi-credit-card-check {
    font-size: 22px !important;
    position: relative;
    top: -7px;
}

.mdi-calendar-check {
    font-size: 18px !important;
    position: relative;
    top: 1px;
}

#dynamic-details th {
    width: 200px !important;
}

#dynamic-additional-details th {
    width: 200px !important;
}

.dev-banner {
    position: fixed;
    bottom:30px;
    right: 15px;
    z-index: 999999;
}

.dev-banner i {
    font-size: 72px;
    color: red;
}