/*
 * Header Styles for Experience Travel Theme
 * Updated: GTranslate Fix + Layout Alignment Fix (Restored Right Side Position)
 */
.site-header { width: 100%; background-color: #ffffff; box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative; }

/* --- HEADER TOP BAR --- */
.header-top-bar { 
    background-color: #FFD700; 
    color: #333333; 
    padding: 8px 0; 
    font-size: 14px; 
    position: relative; 
    z-index: 200; 
    overflow: visible !important; 
}

/* 
   LAYOUT FIX: Ensure the flex container takes full width 
   so 'justify-content: space-between' works properly.
*/
.header-top-bar .container,
.header-top-bar .row {
    overflow: visible !important;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1200px; /* Standard width, adjust if needed */
    margin: 0 auto;
}

.top-bar-content { 
    display: flex; 
    justify-content: space-between; /* Pushes items to Left and Right */
    align-items: center; 
    gap: 20px; 
    overflow: visible !important; 
    width: 100% !important; /* CRITICAL: Forces full width to separate items */
    flex: 1;
}

/* Right Side Controls */
.top-bar-controls { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    overflow: visible !important; 
    position: relative;
    z-index: 201;
    margin-left: auto; /* Double check: Force to right side */
}

.top-bar-info { display: flex; align-items: center; gap: 20px; }
.top-bar-phone, .top-bar-email { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 500; }
.top-bar-phone i, .top-bar-email i { font-size: 16px; }
.top-bar-phone:hover, .top-bar-email:hover { opacity: 0.8; }

/* --- MAIN HEADER --- */
.main-header-area { padding: 15px 0; background-color: #ffffff; position: relative; z-index: 100; }
.main-header-content { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 20px; }
.site-branding { flex-shrink: 0; }
.site-branding img { max-height: 60px; width: auto; display: block; max-width: 200px; }
.header-navigation-wrapper { display: flex; flex-grow: 1; width: auto; }
.main-navigation .menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 25px; }
.main-navigation .menu-item a { text-decoration: none; color: #333; font-weight: 500; font-size: 16px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.main-navigation .menu-item a:hover { color: #D94AAB; }
.main-navigation .menu-item-icon-image { max-height: 24px; width: auto; margin-bottom: 5px; }
.header-button-area { flex-shrink: 0; }
.header-button-area .button.header-button { background-color: #FFD700; color: #000000; border: none; border-radius: 30px; padding: 10px 30px; text-decoration: none; font-weight: 700; transition: all 0.3s ease; white-space: nowrap; }
.header-button-area .button.header-button:hover { background-color: #e6c200; transform: translateY(-2px); }

/* --- SWITCHERS WRAPPER --- */
.language-switcher-area,
.currency-switcher-area {
    position: relative; 
    z-index: 100;
    display: flex; 
    align-items: center;
    overflow: visible !important;
}

/* =========================================
   1. CURRENCY SWITCHER
   ========================================= */
.currency-switcher-area .wmc-currency-wrapper, 
.currency-switcher-area .woocommerce-currency-switcher-form { background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; }
#masthead .currency-switcher-area select, body .currency-switcher-area select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-color: transparent !important; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 10px !important; border: 1px solid #333333 !important; border-radius: 0 !important; color: #333333 !important; font-weight: 500 !important; font-size: 14px !important; padding: 5px 30px 5px 10px !important; height: auto !important; min-width: 120px; cursor: pointer; }
#masthead .currency-switcher-area select option, .currency-switcher-area select option { background-color: #fedd00 !important; color: #000000 !important; padding: 5px; }

/* =========================================
   2. GTRANSLATE STYLING (THE FIX)
   ========================================= */
#google_translate_element2 { display: none !important; }

/* Wrapper & Clipping Fixes */
body .gtranslate_wrapper { position: relative !important; overflow: visible !important; z-index: 1000 !important; }
body .gt_switcher { margin: 0 !important; padding: 0 !important; vertical-align: middle !important; position: relative !important; overflow: visible !important; }

/* TRIGGER BOX */
body .gt_switcher .gt_selected,
body .gt_switcher .gt_selected a {
    background-color: transparent !important;
    border: 1px solid #333333 !important;
    color: #333333 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 5px 30px 5px 10px !important; 
    min-width: 120px !important;
    height: auto !important;
    border-radius: 0 !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px !important;
}

body .gt_switcher .gt_selected a { border: none !important; padding: 0 !important; background-image: none !important; }
body .gt_switcher .gt_selected img { margin-right: 8px !important; vertical-align: middle !important; width: 24px !important; height: 24px !important; box-shadow: none !important; }
body .gt_switcher .gt_selected::after, body .gt_switcher .gt_selected a::after,
body .gt_switcher .gt_selected::before, body .gt_switcher .gt_selected a::before { display: none !important; content: none !important; }

/* DROPDOWN LIST */
body .gt_switcher .gt_option {
    background-color: #fedd00 !important;
    border: 1px solid #333333 !important;
    border-top: none !important;
    position: absolute !important; 
    top: 100% !important; 
    left: 0 !important; 
    right: auto !important;
    width: 100% !important; 
    min-width: 120px !important;
    z-index: 999999 !important;
    height: auto !important; 
    max-height: 300px !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Failsafe Hover */
body .gt_switcher:hover .gt_option { display: block !important; }

/* Items */
body .gt_switcher .gt_option a { background-color: #fedd00 !important; color: #000000 !important; font-size: 14px !important; padding: 8px 10px !important; display: block !important; text-decoration: none !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; text-align: left !important; }
body .gt_switcher .gt_option a:hover { background-color: #e6c200 !important; color: #000000 !important; }
body .gt_switcher .gt_option img { margin-right: 8px !important; vertical-align: middle !important; width: 24px !important; height: 24px !important; }

/* --- MOBILE --- */
.mobile-menu-toggle { display: none; background: none; border: 1px solid #ddd; border-radius: 4px; padding: 8px 10px; font-size: 24px; color: #333; cursor: pointer; margin-left: auto; }
@media (max-width: 992px) {
    .mobile-menu-toggle { display: block; }
    .header-navigation-wrapper { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 20px; flex-direction: column; gap: 20px; z-index: 1000; width: 100%; box-sizing: border-box; justify-content: center !important; margin: 0 !important; }
    .header-navigation-wrapper.toggled { display: flex; }
    .header-button-area { display: none; }
}
@media (max-width: 767px) { .header-top-bar { display: none; } .top-bar-content { flex-direction: column; align-items: flex-start; } .site-branding img { max-height: 50px; } }