/* ── Page banner: anchor cover image to top so heads are not cropped ── */
.breadcrumb.page-banner,
.breadcrumb.country-breadcrumb,
.breadcrumb.blog-banner,
.breadcrumb.bg_img,
.breadcrumb.error-page-banner {
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    padding-bottom: 200px !important;
}

@media (max-width: 1199px) {
    .breadcrumb.page-banner,
    .breadcrumb.country-breadcrumb,
    .breadcrumb.blog-banner,
    .breadcrumb.bg_img,
    .breadcrumb.error-page-banner {
        min-height: 460px !important;
    }
}

@media (max-width: 767px) {
    .breadcrumb.page-banner,
    .breadcrumb.country-breadcrumb,
    .breadcrumb.blog-banner,
    .breadcrumb.bg_img,
    .breadcrumb.error-page-banner {
        background-position: center top !important;
        padding-bottom: 150px !important;
        min-height: 390px !important;
    }
}

/* ── Header base layout (all screen sizes) ── */
.header__inner { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; }
.header__logo { flex: 0 0 auto; }
.header__logo img,
.xb-logo-mobile img {
    max-height: 72px;
}
.xb-hamburger-menu { flex: 0 0 auto; }
.header__action { flex: 0 0 auto; display: flex; gap: 10px; flex-wrap: nowrap; align-items: center; flex-shrink: 0; }
.header__action li { display: inline-flex; align-items: center; }
.header__search { padding: 6px 10px !important; font-size: 13px !important; }

/* Hide both legacy and patched preloaders to prevent layout breakage when JS hook ids differ. */
#xb-loadding,
#gz-loading {
    display: none !important;
}

/* Keep cloned sticky header hidden until it becomes fixed. */
.stricked-menu:not(.stricky-fixed) {
    display: none !important;
}

/* ── Desktop nav visible only on desktop (≥ 992px) ── */
@media (min-width: 992px) {
    .main-menu__wrap { flex: 1 1 auto; min-width: 0; display: flex; margin-left: 20px; }
    .main-menu { display: flex !important; flex-wrap: nowrap; min-width: 0; }
    .main-menu.collapse { display: flex !important; }
    .main-menu.navbar-collapse { display: flex !important; }
    #main-nav { display: flex !important; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; min-width: 0; }
    #main-nav > li { display: inline-block !important; white-space: nowrap; }
    .header__language { max-width: 120px; }
}

/* ── Desktop stabilization (keep Search visible, keep spacing consistent) ── */
@media (min-width: 1200px) {
    .site-header .main-menu__wrap {
        min-width: 0;
    }

    .site-header .header__action {
        margin-left: auto;
        gap: 10px;
        padding-left: 0;
        border-left: 0;
    }

    .site-header .header__search {
        white-space: nowrap;
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
}

/* ── 1200–1366px: theme collapses search to icon-only (34px); restore that ── */
@media (min-width: 1200px) and (max-width: 1366px) {
    .site-header .header__search {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        font-size: 0 !important;
        justify-content: center !important;
    }
    .site-header .header__search span {
        margin-right: 0 !important;
    }
}

@media (min-width: 1025px) and (max-width: 1500px) {
    .site-header .main-menu__wrap {
        margin-left: 10px;
        margin-right: 8px;
    }

    .site-header #main-nav > li > a {
        padding-left: 6px;
        padding-right: 6px;
        font-size: 12px;
    }

    .site-header .header__action {
        gap: 8px;
    }
}

/* ── Remove shadow from sticky/floating header ── */
.stricked-menu.stricky-fixed {
    box-shadow: none !important;
    border-bottom: 1px solid #e6edf3 !important;
}

/* ── Mobile (≤ 991px): hide desktop nav so hamburger & language are reachable ── */
@media (max-width: 991px) {
    .main-menu__wrap { display: none !important; }
    .header__inner { gap: 8px; }
    /* language selector must stay visible in header on mobile */
    .header__language { display: block !important; max-width: none; }
    .site-header .header__language .lang-btn { display: inline-flex !important; align-items: center; }
    .site-header .header__language .lang_sub_list { right: 0; z-index: 1001; position: absolute; }
}

/* Keep language dropdown usable on touch devices (no hover). */
.site-header .header__language ul > li:focus-within > .lang_sub_list,
.site-header .header__language ul > li.lang-open > .lang_sub_list,
.site-header .header__language ul > li:hover > .lang_sub_list {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	top: 100% !important;
}

@media (max-width: 1199px) {
	.header__action {
		display: flex !important;
	}

	.header__language {
		display: block !important;
		max-width: none;
	}

	.site-header .header__language .lang-btn {
		display: inline-flex !important;
		align-items: center;
	}

	.site-header .header__language .lang_sub_list {
		right: 0;
		z-index: 1001;
	}
}

/* ── Country sidebar: scrollable list (all screen sizes) ── */
ul.widget-category.country-widget,
ul#country-list {
	max-height: 480px;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
}

/* Show ALL countries – override the JS-injected hidden-country rule */
ul#country-list .hidden-country,
ul.country-widget .hidden-country {
	display: list-item !important;
}

/* Hide the "More Country" toggle button since everything is visible */
ul#country-list .more-button,
ul.country-widget .more-button {
	display: none !important;
}

/* Scrollbar styling – subtle but visible on desktop */
ul#country-list::-webkit-scrollbar {
	width: 6px;
}
ul#country-list::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}
ul#country-list::-webkit-scrollbar-thumb {
	background: #b0c4de;
	border-radius: 4px;
}
ul#country-list::-webkit-scrollbar-thumb:hover {
	background: #0077bb;
}

/* ── Mobile sidebar language selector ── */
.xb-mobile-lang {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.xb-mobile-lang-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    margin: 0 0 10px;
}
.xb-mobile-lang ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.xb-mobile-lang ul li a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #0F172A;
    padding: 5px 14px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.xb-mobile-lang ul li a:hover,
.xb-mobile-lang ul li a.active-lang {
    color: #0077BB;
    border-color: #0077BB;
}

/* ── Visa sidebar directory: make gray frame sit flush (not floating) ── */
.page-template-gz-template .sidebar-widget .widget {
    border: 1px solid #dbe7f1 !important;
    border-radius: 14px !important;
    padding: 20px !important;
    box-shadow: none !important;
    background: #edf3f5 !important;
}

.page-template-gz-template .sidebar-widget .widget.widget-banner.tourist-visa-info-box,
.page-template-gz-template .tourist-visa-info-box {
    background: #edf3f5 !important;
    border: 1px solid #dbe7f1 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    padding: 20px !important;
}

.page-template-gz-template .tourist-visa-info-box .gz-card-info {
    background: #edf3f5 !important;
    border: 1px solid #dbe7f1 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.page-template-gz-template .sidebar-widget .widget-category li {
    margin: 0 0 8px !important;
}

.page-template-gz-template .sidebar-widget .widget-category li:last-child {
    margin-bottom: 0 !important;
}

.page-template-gz-template .sidebar-widget .widget-category {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

/* Visa Directory buttons: clear blue hover / active */
.page-template-gz-template .sidebar-widget .widget-category li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border: 1px solid #c5daf0 !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease !important;
}

.page-template-gz-template .sidebar-widget .widget-category li a:hover,
.page-template-gz-template .sidebar-widget .widget-category li a:focus-visible {
    background: #00aeef !important;
    border-color: #00aeef !important;
    color: #ffffff !important;
    box-shadow: 0 8px 18px rgba(0, 174, 239, 0.28) !important;
    transform: translateY(-1px);
    outline: none !important;
}

.page-template-gz-template .sidebar-widget .widget-category li.active a,
.page-template-gz-template .sidebar-widget .widget-category li a.active {
    background: #0077bb !important;
    border-color: #0077bb !important;
    color: #ffffff !important;
    box-shadow: 0 6px 14px rgba(0, 119, 187, 0.22) !important;
}

.page-template-gz-template .sidebar-widget .widget-category li.active a:hover,
.page-template-gz-template .sidebar-widget .widget-category li a.active:hover {
    background: #00aeef !important;
    border-color: #00aeef !important;
}

@media (max-width: 767px) {
    .page-template-gz-template .sidebar-widget .widget {
        padding: 16px !important;
    }

    .page-template-gz-template .sidebar-widget .widget.widget-banner.tourist-visa-info-box,
    .page-template-gz-template .tourist-visa-info-box {
        padding: 16px !important;
    }
}

/* ── Tablet range (992–1199px): compact header ── */
@media (min-width: 992px) and (max-width: 1199px) {
    .site-header .header__action { display: flex !important; }
    .site-header .header__language { display: block !important; max-width: 110px; }
    .site-header .header__language .lang-btn { font-size: 12px; }
}

/* ============================================================
   Map Override: Suvarnabhumi Airport (BKK)
   - wrapper replaces the old absolute .google-map
   - label sits above the map, same width as map
   - map is 30% smaller than original (45% → 31.5%)
   ============================================================ */
.xb-contact .gz-map-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    height: 88%;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.xb-contact .gz-map-label {
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    padding: 10px 12px;
    color: #131923;
    background: #f5f8ff;
    border-bottom: 2px solid #0077BB;
    line-height: 1.5;
    letter-spacing: 0.01em;
    white-space: normal;
    word-break: break-word;
    width: 100%;
    box-sizing: border-box;
}
.xb-contact .gz-map-wrapper .google-map {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: auto !important;
    flex: 1;
    min-height: 180px;
}
.xb-contact .gz-map-wrapper .google-map iframe {
    width: 100%;
    height: 100%;
    min-height: 180px;
    display: block;
}
@media (max-width: 991px) {
    .xb-contact .gz-map-wrapper {
        position: unset;
        width: 100%;
        height: auto;
        margin-top: 30px;
    }
    .xb-contact .gz-map-wrapper .gz-map-label {
        white-space: normal;
    }
    .xb-contact .gz-map-wrapper .google-map {
        height: 250px !important;
        flex: none;
    }
}

/* ============================================================
   Hero section: 3 content boxes
   ============================================================ */
.gz-placeholder-boxes {
    margin-top: 40px;
    position: relative;
    z-index: 1;
}
.gz-box {
    border: 1px solid #dce8f0;
    border-radius: 16px;
    padding: 28px 24px;
    text-align: left;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 13.5px;
    font-weight: 400;
    color: #444;
    height: 100%;
    box-shadow: 0 6px 24px rgba(0, 55, 110, 0.07), 0 1px 4px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.gz-box:hover {
    box-shadow: 0 10px 32px rgba(0, 55, 110, 0.13), 0 2px 6px rgba(0,0,0,0.06);
}
.gz-box .gz-box-title {
    font-size: 15.5px;
    font-weight: 700;
    color: #0077BB;
    margin-bottom: 6px;
    line-height: 1.4;
}
.gz-box .gz-box-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: #555;
    margin-bottom: 16px;
    line-height: 1.5;
}
.gz-box .gz-box-section {
    font-weight: 700;
    color: #131923;
    margin-bottom: 4px;
    font-size: 13.5px;
}
.gz-box ul.gz-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px 0;
}
.gz-box ul.gz-list li {
    padding: 2px 0;
    font-size: 13px;
    color: #444;
    line-height: 1.6;
}
.gz-placeholder-boxes .col-lg-4 {
    margin-bottom: 24px;
    display: flex;
}

/* Prevent horizontal page drifting on mobile hero/layout sections. */
html,
body {
    overflow-x: hidden;
}

@media (max-width: 991px) {
    .site,
    .site_wrapper,
    .gz-main-wrap,
    .elementor,
    .elementor-section,
    .hero,
    .hero__style-one {
        max-width: 100%;
        overflow-x: clip;
    }

    .elementor-inner,
    .elementor-section-boxed .elementor-container.elementor-column-gap-extended {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ── Thai nav: 6 long items need special handling ── */

/* 992-1199px: Bootstrap container = 960px, 6 Thai items won't fit → use hamburger */
@media (min-width: 992px) and (max-width: 1199px) {
    html[lang="th"] .site-header .main-menu__wrap { display: none !important; }
    html[lang="th"] .site-header .xb-hamburger-menu { display: block !important; }
}

/* 1200-1500px: container = 1140px, tight fit → compress items */
@media (min-width: 1200px) and (max-width: 1500px) {
    html[lang="th"] .site-header .main-menu__wrap {
        margin-left: 10px !important;
        margin-right: 0 !important;
    }
    html[lang="th"] .site-header #main-nav > li > a {
        font-size: 10.5px !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        letter-spacing: -0.2px !important;
    }
    html[lang="th"] .site-header #main-nav > li {
        margin-right: 2px !important;
    }
}

/* 1501-1800px: more room, can relax a little */
@media (min-width: 1501px) and (max-width: 1800px) {
    html[lang="th"] .site-header #main-nav > li > a {
        font-size: 12.5px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* ── FAQ Accordion: icon & responsive fixes ── */

/* ── Fix: accordion arrow icon renders as □ (square) because the theme CSS
   requests font-family:"Font Awesome 5 Pro" at font-weight:500, but only
   weight-900 is registered in the @font-face. The browser cannot match the
   font and falls back to a tofu (□) glyph.

   Strategy: register the solid-900 file for BOTH weight-500 and weight-400
   so ANY weight request gets a valid font, AND also register it under the
   free-tier family names so every alias resolves.

   As a belt-and-suspenders fallback, we also replace the ::before content
   with a plain + / − character rendered in a guaranteed system font so
   the button always looks correct even if Font Awesome never loads. ── */

@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 500;
    font-display: block;
    src: url('../../wp-content/themes/gatezip/assets/fonts/fa-solid-900.woff2') format('woff2'),
         url('../../wp-content/themes/gatezip/assets/fonts/fa-solid-900.ttf') format('truetype');
}
@font-face {
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('../../wp-content/themes/gatezip/assets/fonts/fa-solid-900.woff2') format('woff2'),
         url('../../wp-content/themes/gatezip/assets/fonts/fa-solid-900.ttf') format('truetype');
}
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url('../../wp-content/themes/gatezip/assets/fonts/fa-solid-900.woff2') format('woff2'),
         url('../../wp-content/themes/gatezip/assets/fonts/fa-solid-900.ttf') format('truetype');
}

/* Fallback: render + / − via system font in case FA still fails */
.accordion_box .block .acc-btn .arrow {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.accordion_box .block .acc-btn .arrow::before {
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', Arial, sans-serif !important;
    font-weight: 900 !important;
    font-style: normal !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    speak: never !important;
}
/* Active/open state: minus glyph */
.accordion_box .block.active-block .acc-btn .arrow::before {
    font-family: 'Font Awesome 5 Pro', 'Font Awesome 5 Free', Arial, sans-serif !important;
    font-weight: 900 !important;
}

/* Compact accordion on mobile (< 576px) */
@media (max-width: 575px) {
    .accordion_box .block .acc-btn {
        padding: 18px 52px 18px 18px !important;
        font-size: 16px !important;
    }
    .accordion_box .block .acc-btn .arrow {
        right: 12px !important;
        top: 14px !important;
        width: 36px !important;
        height: 36px !important;
    }
    .accordion_box .block .acc-btn .arrow::before {
        top: 7px !important;
        left: 12px !important;
    }
    .accordion_box .block .content {
        padding: 0 18px 22px !important;
    }
}

/* Tablet accordion (576–991px) */
@media (min-width: 576px) and (max-width: 991px) {
    .accordion_box .block .acc-btn {
        padding: 22px 60px 22px 24px !important;
    }
    .accordion_box .block .content {
        padding: 0 24px 28px !important;
    }
}

/* Hybrid Elementor pages: Bootstrap mega menu above legacy content */
body > .gz-topbar,
body > .gz-navbar {
    position: relative;
    z-index: 1040;
}
body > .gz-navbar.sticky-top {
    z-index: 1040;
}