/*
Theme Name: Borobudur VW Safari
Description: Direct WordPress conversion of the original Borobudur VW Safari HTML template.
Version: 1.0.1
*/

/* Borobudur VW Safari search bar */
.search-bar form{position:relative;}
.search-bar form .form-control{padding-right:140px;}

/* Search field: keep the browser focus outline subtle without changing the design. */
.search-bar input[type="search"]:focus { outline: none !important; box-shadow: 0 0 0 2px rgba(255,255,255,.18) !important; }

/* Homepage search: subtle focus without a heavy browser outline. */
.bvws-search-form input[type="search"]:focus{outline:0!important;box-shadow:0 0 0 1px rgba(255,255,255,.20)!important;}

/* Search field: no heavy browser outline on focus. */
.search-bar input[type="search"]:focus,
.bvws-search-form input[type="search"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Align package cards so every card in a carousel has the same height. */
.packages .packages-carousel .owl-stage {
    display: flex;
    align-items: stretch;
}

.packages .packages-carousel .owl-item {
    display: flex;
    height: auto;
}

.packages .packages-carousel .packages-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.packages .packages-carousel .packages-img {
    height: 260px;
    flex: 0 0 260px;
}

.packages .packages-carousel .packages-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.packages .packages-carousel .packages-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 285px;
}

.packages .packages-carousel .packages-content > .p-4 {
    flex: 1 1 auto;
}

.packages .packages-carousel .packages-content > .row {
    margin-top: auto;
    flex: 0 0 auto;
}

@media (max-width: 767.98px) {
    .packages .packages-carousel .packages-img {
        height: 230px;
        flex-basis: 230px;
    }

    .packages .packages-carousel .packages-content {
        min-height: 270px;
    }
}


/* Final visual fixes */
.bvws-home-search-shell {
    padding: 1rem !important;
    background: rgba(19, 53, 123, 0.8);
}

.bvws-home-search-shell .bvws-search-form {
    position: relative;
}

.bvws-home-search-shell .form-control {
    min-height: 50px;
}

.bvws-home-search-shell .btn {
    line-height: 1.2;
}

.packages .packages-item .packages-img .packages-price {
    text-align: center !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: 44px;
    box-sizing: border-box;
}

.blog .blog-content p {
    text-align: justify;
}

.blog .blog-content .h4 {
    display: block;
}

@media (max-width: 767.98px) {
    .bvws-home-search-shell {
        padding: .75rem !important;
    }
}


/* Search field focus: keep only a thin, unobtrusive outline. */
.bvws-search-form input[type="search"]:focus {
    outline: none !important;
    border: 1px solid rgba(19, 53, 123, .16) !important;
    box-shadow: 0 0 0 1px rgba(19, 53, 123, .08) !important;
}


/* Layout recovery: keep About and Booking columns as normal block columns.
   This prevents external/global flex rules from stacking every child horizontally. */
.about > .container > .row > .col-lg-5,
.about > .container > .row > .col-lg-7,
.booking > .container > .row > .col-lg-6 {
    display: block !important;
}

.about > .container > .row > .col-lg-5,
.about > .container > .row > .col-lg-7,
.booking > .container > .row > .col-lg-6 {
    align-self: stretch;
}

/* Keep the article cards aligned without forcing excessive empty height. */
.blog .row > [class*="col-"] {
    display: flex;
    align-items: stretch;
}

.blog .blog-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.blog .blog-img {
    flex: 0 0 auto;
}

.blog .blog-content,
.blog .bvws-blog-card-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.blog .blog-content > .my-3,
.blog .bvws-blog-card-content > .my-3 {
    flex: 1 1 auto;
}

.blog .blog-content > .btn,
.blog .bvws-blog-card-content > .btn {
    align-self: flex-start;
    margin-top: auto;
}

/* Blog archive cards use the same bottom alignment. */
section.container .row > [class*="col-"] > article {
    display: flex;
    flex-direction: column;
    width: 100%;
}

section.container .row > [class*="col-"] > article > p:not(.small) {
    flex: 1 1 auto;
}

@media (max-width: 991.98px) {
    .about > .container > .row > .col-lg-5,
    .about > .container > .row > .col-lg-7,
    .booking > .container > .row > .col-lg-6 {
        display: block !important;
    }
}

/* Uniform article thumbnail size on homepage and Blog page. */
.blog .blog-item .blog-img .blog-img-inner {
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog .blog-item .blog-img .blog-img-inner > a {
    display: block;
    width: 100%;
    height: 100%;
}

.blog .blog-item .blog-img .blog-img-inner img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}


/* Homepage booking form: keep every white field in a clean two-column grid,
   matching the aligned layout used on the Packages page. */
.bvws-home-booking .bvws-booking-form > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem !important;
    margin: 0 !important;
}

.bvws-home-booking .bvws-booking-form > .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

.bvws-home-booking .bvws-booking-form .form-floating,
.bvws-home-booking .bvws-booking-form .form-control,
.bvws-home-booking .bvws-booking-form .form-select {
    width: 100% !important;
}

.bvws-home-booking .bvws-booking-form textarea.form-control {
    min-height: 100px;
}

.bvws-home-booking .bvws-booking-form > .row > .col-12 {
    grid-column: 1 / -1;
}

@media (max-width: 767.98px) {
    .bvws-home-booking .bvws-booking-form > .row {
        grid-template-columns: 1fr;
    }

    .bvws-home-booking .bvws-booking-form > .row > .col-12 {
        grid-column: auto;
    }
}