/*---------------------------------------------------------------------
    custom-ui.css — traveler loader + notification popup
---------------------------------------------------------------------*/

/* ---------- Traveler loader ---------- */

.traveler-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.traveler-track {
    width: 160px;
    height: 170px;
    position: relative;
}

.traveler {
    width: 120px;
    height: 150px;
    display: block;
    margin: 0 auto;
    animation: tv-bob 0.6s ease-in-out infinite;
}

.tv-head {
    fill: #121212;
}

.tv-body,
.tv-arm-back,
.tv-arm-front,
.tv-leg-back,
.tv-leg-front {
    fill: none;
    stroke: #121212;
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tv-bag {
    fill: #e8b615;
    stroke: #121212;
    stroke-width: 3;
}

.tv-leg-back,
.tv-leg-front,
.tv-arm-back,
.tv-arm-front-group {
    transform-box: view-box;
}

.tv-leg-back {
    transform-origin: 60px 90px;
    animation: tv-leg-back-swing 0.6s ease-in-out infinite;
}

.tv-leg-front {
    transform-origin: 60px 90px;
    animation: tv-leg-front-swing 0.6s ease-in-out infinite;
}

.tv-arm-back {
    transform-origin: 60px 48px;
    animation: tv-arm-back-swing 0.6s ease-in-out infinite;
}

.tv-arm-front-group {
    transform-origin: 60px 48px;
    animation: tv-arm-front-swing 0.6s ease-in-out infinite;
}

.tv-ground {
    stroke: #e8b615;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 6 10;
    animation: tv-ground-scroll 0.6s linear infinite;
}

.traveler-caption {
    font-size: 14px;
    letter-spacing: 0.5px;
    color: #666666;
    margin: 0;
}

@keyframes tv-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@keyframes tv-leg-back-swing {
    0%, 100% { transform: rotate(20deg); }
    50%      { transform: rotate(-20deg); }
}

@keyframes tv-leg-front-swing {
    0%, 100% { transform: rotate(-20deg); }
    50%      { transform: rotate(20deg); }
}

@keyframes tv-arm-back-swing {
    0%, 100% { transform: rotate(-16deg); }
    50%      { transform: rotate(16deg); }
}

@keyframes tv-arm-front-swing {
    0%, 100% { transform: rotate(10deg); }
    50%      { transform: rotate(-6deg); }
}

@keyframes tv-ground-scroll {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -16; }
}

/* ---------- Hero headline over the slider ---------- */

.banner_main {
    position: relative;
}

.banner_main::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 220px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    z-index: 5;
    pointer-events: none;
}

.hero-caption {
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    z-index: 15;
    text-align: center;
    padding: 0 20px;
    pointer-events: none;
}

.hero-caption h2 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 6px;
    padding: 0;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}

.hero-caption-accent {
    width: 50px;
    height: 3px;
    background: #e8b615;
    margin: 0 auto 8px;
}

.hero-caption p {
    color: #f2f2f2;
    font-size: 13px;
    line-height: 1.3;
    margin: 0;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}

@media (max-width: 575px) {
    .hero-caption {
        top: 14px;
    }
    .hero-caption h2 {
        font-size: 16px;
    }
    .hero-caption p {
        font-size: 11px;
    }
}

@media (min-width: 992px) {
    .hero-caption {
        top: 30px;
    }
    .hero-caption h2 {
        font-size: 30px;
        margin-bottom: 10px;
    }
    .hero-caption-accent {
        width: 60px;
        margin-bottom: 12px;
    }
    .hero-caption p {
        font-size: 16px;
    }
}

/* ---------- Booking form over the hero ----------
   Below 992px the form stacks into a single column and gets taller than
   the hero image can safely hold, so it flows normally under the slider
   there. At 992px and up the hero gets a fixed, generous height (instead
   of scaling with its natural aspect ratio) so the card can float
   centered on top of it without ever reaching the header. If more fields
   are added later and the card grows past ~700px tall on desktop, raise
   the height/min-height values below to match. ---------- */

.banner_main {
    padding-bottom: 60px;
}

.booking_ocline {
    position: relative;
    top: auto;
    transform: none;
    margin-top: -40px;
    z-index: 20;
}

@media (max-width: 575px) {
    .booking_ocline {
        margin-top: -20px;
    }
    .book_room {
        padding: 24px 18px;
    }
}

@media (min-width: 992px) {
    .banner_main {
        padding-bottom: 0;
    }

    .carousel-item img {
        width: 100%;
        height: 900px;
        object-fit: cover;
    }

    .booking_ocline {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        margin-top: 0;
        z-index: 20;
    }
}

/* ---------- Notification popup ---------- */

.dbh-toast-overlay {
    position: fixed;
    inset: 0;
    background: rgba(18, 18, 18, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    padding: 16px;
}

.dbh-toast-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.dbh-toast-card {
    background: #ffffff;
    border-radius: 14px;
    max-width: 380px;
    width: 100%;
    padding: 34px 28px 26px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    transform: translateY(14px) scale(0.96);
    transition: transform 0.25s ease;
}

.dbh-toast-overlay.is-visible .dbh-toast-card {
    transform: translateY(0) scale(1);
}

.dbh-toast-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8b615;
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
}

.dbh-toast-overlay.is-warning .dbh-toast-icon {
    background: #f0ad4e;
}

.dbh-toast-overlay.is-error .dbh-toast-icon {
    background: #d9534f;
}

.dbh-toast-title {
    font-size: 19px;
    font-weight: 700;
    color: #121212;
    margin: 0 0 8px;
}

.dbh-toast-message {
    font-size: 14px;
    color: #555555;
    line-height: 1.55;
    margin: 0 0 24px;
}

.dbh-toast-close {
    background: #e8b615;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 11px 34px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dbh-toast-close:hover {
    background: #121212;
}