/* Layout fixes for the email registration form (#addition-info).
 *
 * The original page used select2 widgets with inline pixel widths captured
 * from a specific viewport. Those don't fit our local rendering, so we
 * constrain everything to 100% of its column and let bootstrap's grid
 * handle the proportions.
 */

/* When my JS reveals #addition-info it sets display:flex !important.
 * Make sure children still wrap and stack correctly. */
#addition-info {
    flex-wrap: wrap;
    width: 100%;
}

/* Each form row uses normal bootstrap row behavior. */
#addition-info .row,
#addition-info .row.mb-cus {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-right: -8px;
    margin-left: -8px;
    margin-bottom: 1rem;
}

#addition-info .row > [class^="col-"],
#addition-info .row > [class*=" col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

/* Force the documented column widths even on smaller viewports — the form
 * lives inside a col-lg-6, so we don't want it stacking awkwardly. */
@media (min-width: 768px) {
    #addition-info .row .col-lg-3 { flex: 0 0 25%;  max-width: 25%;  }
    #addition-info .row .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    #addition-info .row .col-lg-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
    #addition-info .row .col-lg-6 { flex: 0 0 50%;  max-width: 50%;  }
    #addition-info .row .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* select2 widgets should fill their column. The saved HTML had inline
 * width: 96px / 216px / etc. that's too narrow on a fresh render. */
#addition-info .select2.select2-container,
#addition-info .select2-container--default {
    width: 100% !important;
    min-width: 0 !important;
}

#addition-info .select2-selection--single {
    height: calc(1.5em + 1.5rem + 2px);
    line-height: calc(1.5em + 1rem);
    padding: 0.5rem 0.75rem;
    background-color: #fff;
    border-radius: 4px;
}

#addition-info .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 0;
    color: #333;
}

#addition-info .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 8px;
}

/* Keep raw <select> elements visually hidden when select2 has decorated
 * them (the script-21 init is responsible for the actual hiding via class;
 * this is a fallback for visuals only). */
#addition-info select.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

/* Date-of-birth input group: make sure the calendar icon doesn't overlap
 * the text and the input fills its column. */
#addition-info #dob-subscribe {
    width: 100%;
    height: calc(1.5em + 1.5rem + 2px);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}
#addition-info .input-group-icon-append .date-icon-append {
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
}

/* Plain text inputs (last name, first name) match the styled selects. */
#addition-info input.form-control {
    height: calc(1.5em + 1.5rem + 2px);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
}

/* Error labels should clear into the next line, not push columns around. */
#addition-info p.error,
#addition-info p.hint-text {
    margin-top: 4px;
    font-size: 0.8125rem;
}

/* Checkbox row: make agreement text wrap nicely beside the checkbox. */
#addition-info .form-check-input.agree-conditions {
    margin-top: 4px;
}

/* Email "is not valid" validation message — hidden by default, only shown
 * when JS explicitly removes .dp-none after a failed subscribe attempt. */
.email-subs-err { display: none !important; }
.email-subs-err:not(.dp-none) { display: block !important; }
/* Same pattern for the other inline field errors so they only render when
 * the validation logic toggles dp-none off. */
.lastName-err, .firstName-err { display: none !important; }
.lastName-err:not(.dp-none),
.firstName-err:not(.dp-none) { display: block !important; }

/* ----- 인기 있는 여행지 (Popular Destinations) right preview card -----
 * The screenshot expects this to overlap the hero panel at bottom-right.
 * Combo CSS already does this at min-width:992px, but our cleanup path
 * sometimes leaves slick state that 0-collapses the inner sliders.
 * Force visibility + positioning explicitly so the card never disappears. */
.slider-location-2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0, 48, 91, 0.8);
    border-radius: 16px 16px 0 0;
    max-width: 360px;
}
@media (min-width: 992px) {
    .slider-location-2 {
        position: absolute !important;
        bottom: 0 !important;
        right: 24px !important;
        margin-top: 0 !important;
        z-index: 5;
    }
}
.slider-location-2 .location {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
}
.slider-location-2 .images {
    flex: 0 0 168px;
    max-width: 168px;
    min-height: 120px;
    margin-top: -24px;
}
.slider-location-2 .images .slick-list,
.slider-location-2 .images .slick-track {
    height: 120px;
}
.slider-location-2 .contents {
    flex: 0 0 calc(100% - 168px);
    padding: 20px 24px 24px;
    min-height: 120px;
}
.slider-location-2 .contents > div { /* #popularFlightId */
    width: 100%;
}
.slider-location-2 .image {
    box-shadow: 0 12px 16px -4px rgba(16,24,40,.08), 0 4px 6px -2px rgba(16,24,40,.03);
    border-radius: 8px 8px 8px 0;
    position: relative;
    display: flex;
    overflow: hidden;
    width: 168px;
    height: 120px;
}
.slider-location-2 img {
    width: 100%;
    max-width: 100%;
    height: 120px;
    object-fit: cover;
}
.slider-location-2 .content {
    color: #fff;
}
.slider-location-2 ul.slick-dots {
    margin-top: 8px;
    justify-content: flex-start;
    flex-wrap: wrap;
    row-gap: 8px;
    list-style: none;
    padding: 0;
    display: flex !important;
}
.slider-location-2 ul.slick-dots li {
    background: #FCFCFD;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin: 0 4px;
    cursor: pointer;
}
.slider-location-2 ul.slick-dots li.slick-active {
    background: #64AF53;
    width: 16px;
    border-radius: 4px;
}
.slider-location-2 ul.slick-dots li button {
    display: none;
}

/* The hero wrapper is .position-relative — make sure it actually is. */
#popularId, #popularId + .slider-location-2 { /* sanity */ }

/* ----- Slick carousel nav arrows -----
 * The original CSS only positioned them at >=992px viewport with no base
 * styling, so on smaller screens (or when the parent isn't position:relative)
 * the SVG chevrons disappeared. Pin a baseline that matches the live site:
 * round button, white bg, subtle shadow, SVG chevron centered. */
button.slick-arrow {
    position: absolute;
    z-index: 10;
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #d0d5dd;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: transparent;       /* hide the "btn" fallback text */
    font-size: 0 !important;
    line-height: 0;
}
button.slick-arrow svg {
    width: 24px;
    height: 24px;
    display: block;
    flex: none;
}
button.slick-arrow svg path {
    stroke: #344054;
}
button.slick-arrow:hover {
    background: #f9fafb;
    border-color: #98a2b3;
}
button.slick-prev.slick-arrow { left: -22px; }
button.slick-next.slick-arrow { right: -22px; }
@media (min-width: 992px) {
    button.slick-prev.slick-arrow { left: -53px; }
    button.slick-next.slick-arrow { right: -53px; }
}

/* Slick arrows live OUTSIDE the .slick-list overflow-hidden box, so the
 * carousel root needs position:relative to anchor them. */
#addCarousel,
.bamboo-exp-big-sliderss .slider-nav-v,
.slider-location-2 .images,
.slider-location-2 #popularFlightId,
#popularId {
    position: relative;
}

/* Hide the default button text node ("btn") slick uses as a label fallback
 * even when the SVG renders. */
button.slick-arrow {
    text-indent: -9999px;
    overflow: hidden;
}
button.slick-arrow svg {
    text-indent: 0;
    overflow: visible;
}

/* ----- Booking widget submit button (.btn-bamboo) -----
 * Live site has: dark green base + leaf-decoration PNG anchored bottom-right.
 * The original CSS only set the flat green; the leaf image was on a remote
 * URL we now host locally at assets/bg/background-btn.png. */
.btn-bamboo,
.btn-bamboo.btn-bamboo-image,
input.btn-bamboo,
#search-flight-btn.btn-bamboo {
    background-color: #327C23 !important;
    background-image: url('../bg/background-btn.png') !important;
    background-repeat: no-repeat !important;
    background-position: right bottom !important;
    background-size: 48px !important;
    color: #FFFFFF !important;
    border: 0 !important;
    border-radius: 8px !important;
    height: 50px;
    padding: 16px;
    font-family: 'Maven Pro', sans-serif;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
    text-transform: capitalize;
    cursor: pointer;
}
.btn-bamboo:hover,
.btn-bamboo.btn-bamboo-image:hover {
    background-color: #2a6a1d !important;
}


/* ----- Cookies popup -----
 * Bottom banner that appears once per browser. Carry over the white card
 * background from the combo CSS (which my earlier rule had overridden) and
 * pin the position behavior. */
.popup-overlay-full {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.5);
}
.popup-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
}
.popup-cookies {
    background-color: #fff !important;
    border-radius: 16px 0 0 0 !important;
    border-top: 2px solid #64AF53 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
    margin: 0 auto;
    max-width: 100%;
    width: min(1127px, 100%) !important;
    padding: 0 !important;
}
.popup-cookies #artboard { display: none !important; }
#txt-popup-cookies {
    color: #101828 !important;
    font-size: 16px !important;
    font-family: 'Open Sans', sans-serif !important;
    line-height: 150% !important;
    margin-left: 24px !important;
    text-align: left !important;
    padding: 26px 0 !important;
}
#txt-popup-cookies a {
    color: #00558F;
    text-decoration: underline !important;
}
#cookie-popup-agree {
    background-color: #00558F !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    padding: 12px 32px !important;
    margin: 16px 0 !important;
    cursor: pointer;
}
#cookie-popup-agree:hover {
    background-color: #003f6c !important;
}

/* Hide the WpbavCanonicalModule developer placeholder portlet. */
[id^="p_p_id_com_bav_canonical"],
[id^="p_p_id_WpbavCanonicalModule"] {
    display: none !important;
}

/* Footer social icons: inline SVGs scale and inherit color. */
.content-footer a svg {
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
}
.content-footer a:hover svg path { fill: #64AF53; }

/* ----- Booking widget: hide empty error summary -----
 * #bookingErrorSummaryContainerHeader sits between the payment-method radios
 * (현금 / 포인트 / 현금&포인트) and the trip-type radios (편도 / 왕복 /
 * 다구간) and is meant to hold booking validation errors injected by JS.
 * Offline its <ul> never gets populated, so the container just renders as
 * blank vertical padding. Hide unless an error is actually present. */
#bookingErrorSummaryContainerHeader,
#bookingErrorSummaryHeader,
#bookingErrorHeader {
    display: none;
}
/* Re-show when the JS adds an active marker (.has-error) or fills the list. */
#bookingErrorSummaryContainerHeader.has-error,
#bookingErrorSummaryContainerHeader:has(#bookingErrorListHeader li) {
    display: block;
}
#bookingErrorSummaryContainerHeader.has-error #bookingErrorSummaryHeader,
#bookingErrorSummaryContainerHeader:has(#bookingErrorListHeader li) #bookingErrorSummaryHeader,
#bookingErrorSummaryContainerHeader.has-error #bookingErrorHeader,
#bookingErrorSummaryContainerHeader:has(#bookingErrorListHeader li) #bookingErrorHeader {
    display: block;
}

/* Same pattern for the popup-form variant if it exists. */
#bookingErrorSummaryContainerPopup,
#bookingErrorSummaryPopup,
#bookingErrorPopup {
    display: none;
}
#bookingErrorSummaryContainerPopup.has-error,
#bookingErrorSummaryContainerPopup:has(#bookingErrorListPopup li) {
    display: block;
}