/* ========================================================= VANAFLY REGION / LANGUAGE / CURRENCY ========================================================= */ /* ========================================================= TRIGGER ========================================================= */ .vf-region-currency-trigger { display: grid; grid-template-columns: minmax(0, 1fr) 1px 52px; align-items: center; column-gap: 8px; /* * Fixed width prevents the header/footer from shifting * when English changes to Español. */ width: 190px; min-width: 190px; min-height: 40px; margin: 0; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; box-sizing: border-box; color: #252a31; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .vf-region-currency-trigger:hover { background: #f3f6f8; } .vf-region-currency-trigger:focus, .vf-region-currency-trigger:focus-visible, .vf-region-currency-trigger:active { outline: none !important; box-shadow: none !important; } /* ========================================================= TRIGGER LANGUAGE ========================================================= */ .vf-region-currency-trigger__language { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; width: 100%; min-width: 0; overflow: hidden; } .vf-region-currency-trigger__language-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 0; line-height: 1; color: #435466; } .vf-region-currency-trigger__flag { display: block; width: 24px; height: 16px; object-fit: cover; border: 1px solid rgba(25, 35, 45, 0.12); border-radius: 2px; } .vf-region-currency-trigger__language-icon svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; } .vf-region-currency-trigger__language-name { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } /* ========================================================= TRIGGER DIVIDER ========================================================= */ .vf-region-currency-trigger__divider { display: block; width: 1px; height: 20px; margin: 0; background: #d7dde3; justify-self: center; } /* ========================================================= TRIGGER CURRENCY ========================================================= */ .vf-region-currency-trigger__currency { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; width: 52px; min-width: 52px; } .vf-region-currency-trigger__currency-symbol { font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; } .vf-region-currency-trigger__currency-code { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; } /* ========================================================= PAGE LOCK ========================================================= */ html.vf-preferences-open, body.vf-preferences-open { overflow: hidden !important; } /* ========================================================= MODAL ROOT ========================================================= */ .vf-preferences-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 28px; box-sizing: border-box; } .vf-preferences-modal[hidden] { display: none !important; } /* ========================================================= BACKDROP ========================================================= */ .vf-preferences-modal__backdrop { position: absolute; inset: 0; background: rgba( 24, 35, 46, .48 ); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* ========================================================= DIALOG ========================================================= */ .vf-preferences-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: min( 920px, calc(100vw - 56px) ); max-height: min( 760px, calc(100dvh - 56px) ); padding: 26px 28px 30px; overflow: hidden; background: #fff; border: 1px solid #e2e8ee; border-radius: 20px; box-sizing: border-box; box-shadow: 0 24px 70px rgba(0, 0, 0, .22); } /* ========================================================= CLOSE BUTTON ========================================================= */ .vf-preferences-modal__close { position: absolute; z-index: 4; top: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #526170; cursor: pointer; } .vf-preferences-modal__close:hover { background: #f1f4f6; } .vf-preferences-modal__close:focus, .vf-preferences-modal__close:focus-visible, .vf-preferences-modal__close:active { outline: none !important; box-shadow: none !important; } .vf-preferences-modal__close .material-symbols-outlined { font-size: 24px !important; } /* ========================================================= TABS ========================================================= */ .vf-preferences-modal__tabs { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 34px; min-height: 44px; padding-right: 54px; border-bottom: 1px solid #edf0f3; } .vf-preferences-modal__tab { position: relative; display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0 2px 13px; border: 0; background: transparent; color: #536173; font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer; } .vf-preferences-modal__tab.is-active { color: #151b23; } .vf-preferences-modal__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: #128add; } .vf-preferences-modal__tab:focus, .vf-preferences-modal__tab:focus-visible { outline: none; box-shadow: none; } /* ========================================================= PANELS ========================================================= */ .vf-preferences-panel { flex: 1 1 auto; min-height: 0; padding-top: 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .vf-preferences-panel[hidden] { display: none !important; } /* ========================================================= SEARCH ========================================================= */ .vf-preferences-search { position: relative; display: flex; align-items: center; width: min( 100%, 620px ); height: 48px; margin-bottom: 22px; border: 1px solid #ccd7e2; border-radius: 10px; background: #fff; box-sizing: border-box; } .vf-preferences-search:focus-within { border-color: #128add; box-shadow: 0 0 0 2px rgba(18, 138, 221, .08); } .vf-preferences-search .material-symbols-outlined { flex: 0 0 auto; margin-left: 14px; font-size: 21px !important; color: #8a9aaa; } .vf-preferences-search input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 14px 0 10px; border: 0; outline: 0; background: transparent; color: #26313d; font: inherit; font-size: 15px; } .vf-preferences-search input::placeholder { color: #8897a6; opacity: 1; } /* ========================================================= HEADINGS ========================================================= */ .vf-preferences-heading { margin: 0 0 12px; font-size: 15px; line-height: 21px; font-weight: 700; color: #252c34; } .vf-preferences-grid + .vf-preferences-heading { margin-top: 24px; } /* ========================================================= GRID ========================================================= */ .vf-preferences-grid { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 10px; } .vf-preferences-grid--popular { max-width: 610px; } /* ========================================================= OPTION CARD ========================================================= */ .vf-preferences-option { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; column-gap: 10px; width: 100%; min-height: 66px; margin: 0; padding: 10px 12px; border: 1px solid #d9e2ea; border-radius: 11px; background: #fff; box-sizing: border-box; color: #202831; text-align: left; text-decoration: none !important; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .vf-preferences-option:hover { border-color: #a9cdeb; background: #fbfdff; text-decoration: none !important; } .vf-preferences-option:focus, .vf-preferences-option:focus-visible, .vf-preferences-option:active { outline: none !important; box-shadow: none !important; text-decoration: none !important; } .vf-preferences-option.is-selected { border-color: #128add; background: #f4faff; box-shadow: inset 0 0 0 1px #128add; } /* ========================================================= OPTION VISUAL ========================================================= */ .vf-preferences-option__visual { display: flex; align-items: center; justify-content: center; width: 36px; height: 34px; overflow: hidden; border-radius: 5px; } .vf-preferences-option__flag { display: block; width: 30px; height: 20px; object-fit: cover; border-radius: 2px; } .vf-preferences-option__emoji { display: block; font-size: 27px; line-height: 1; } .vf-preferences-option__language-icon { font-size: 24px !important; color: #128add; } /* ========================================================= OPTION COPY ========================================================= */ .vf-preferences-option__copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .vf-preferences-option__copy strong { display: block; overflow: hidden; font-size: 14px; line-height: 18px; font-weight: 650; color: #202831; white-space: normal; } .vf-preferences-option__copy small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: #627386; } /* ========================================================= SELECTED CHECK ========================================================= */ .vf-preferences-option__check { display: none; justify-self: end; font-size: 22px !important; color: #128add; } .vf-preferences-option.is-selected .vf-preferences-option__check { display: block; } /* ========================================================= FILTERED ITEMS ========================================================= */ .vf-preferences-option.is-filtered-out { display: none !important; } /* ========================================================= HEADER ACTION GROUP ========================================================= */ .vf-header-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 18px !important; width: auto !important; margin: 0 !important; padding: 0 !important; position: static !important; } .vf-header-preferences { display: flex !important; align-items: center !important; flex: 0 0 190px; width: 190px; margin: 0 !important; padding: 0 !important; position: static !important; } /* ========================================================= HEADER SUPPORT ========================================================= */ .vf-header-support { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-height: 40px !important; margin: 0 !important; padding: 7px 12px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: #707070 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; transition: background-color .15s ease, color .15s ease !important; } .vf-header-support:hover { background: #f3f6f8 !important; color: #3d3d3d !important; text-decoration: none !important; } .vf-header-support:focus, .vf-header-support:focus-visible, .vf-header-support:active { outline: none !important; box-shadow: none !important; text-decoration: none !important; } /* * Support now uses a local SVG , not a * Material Symbols ligature. */ .vf-header-support__icon { display: block !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; margin: 0 !important; padding: 0 !important; object-fit: contain; } .vf-header-support__label { display: inline-flex !important; align-items: center !important; color: inherit !important; line-height: 20px !important; } /* ========================================================= DESKTOP HEADER ========================================================= */ @media (min-width: 992px) { .currency_and_help.vf-header-actions { height: 100%; } .site-header .header-menu > .hideonmobile2 { display: flex !important; align-items: center !important; height: 62px !important; margin: 0 !important; padding: 0 !important; } .site-header .header-menu > .hideonmobile2 > div, .site-header .header-menu > .hideonmobile2 > nav { margin: 0 !important; } .site-header .header-menu ul { align-items: center !important; margin-top: 0 !important; margin-bottom: 0 !important; } .site-header .vf-header-support { position: static !important; flex: 0 0 auto !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 11px !important; box-sizing: border-box !important; transform: none !important; } .site-header .vf-header-preferences { position: static !important; display: flex !important; align-items: center !important; align-self: center !important; flex: 0 0 190px !important; width: 190px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } .site-header .vf-header-preferences .vf-region-currency-trigger { position: static !important; width: 190px !important; min-width: 190px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 11px !important; box-sizing: border-box !important; transform: none !important; } .site-header .vf-region-currency-trigger__language { height: 20px !important; line-height: 20px !important; } .site-header .vf-region-currency-trigger__currency { height: 20px !important; line-height: 20px !important; } .site-header .vf-region-currency-trigger__language-icon { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; } .site-header .vf-region-currency-trigger__language-icon svg { width: 18px !important; height: 18px !important; } .site-header .vf-region-currency-trigger__language-name, .site-header .vf-region-currency-trigger__currency-symbol, .site-header .vf-region-currency-trigger__currency-code { line-height: 20px !important; } .site-header .vf-region-currency-trigger__divider { height: 20px !important; } } /* ========================================================= FOOTER SWITCHER ========================================================= */ .site-footer .vf-footer-preferences { display: flex; align-items: center; margin-top: 20px; } .site-footer .vf-region-currency-trigger { width: 190px; min-width: 190px; min-height: 42px; padding: 8px 12px; border: 1px solid rgba( 255, 255, 255, .20 ); border-radius: 9px; background: rgba( 255, 255, 255, .06 ); color: #ffffff; } .site-footer .vf-region-currency-trigger:hover { border-color: rgba( 255, 255, 255, .34 ); background: rgba( 255, 255, 255, .11 ); color: #ffffff; } .site-footer .vf-region-currency-trigger:focus, .site-footer .vf-region-currency-trigger:focus-visible { border-color: rgba( 255, 255, 255, .45 ); background: rgba( 255, 255, 255, .10 ); } .site-footer .vf-region-currency-trigger__language-icon { color: #ffffff; } .site-footer .vf-region-currency-trigger__language-name, .site-footer .vf-region-currency-trigger__currency-symbol, .site-footer .vf-region-currency-trigger__currency-code { color: #ffffff; } .site-footer .vf-region-currency-trigger__divider { background: rgba( 255, 255, 255, .28 ); } /* ========================================================= MOBILE MENU SWITCHER ========================================================= */ @media (max-width: 991px) { .vf-mobile-menu-new__preferences { width: 100%; padding: 14px 10px; border-top: 1px solid #e5eaee; box-sizing: border-box; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger { width: 190px; min-width: 190px; margin: 0; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .vf-preferences-modal { padding: 20px; } .vf-preferences-modal__dialog { width: calc( 100vw - 40px ); max-height: calc( 100dvh - 40px ); } .vf-preferences-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .vf-region-currency-trigger { width: 184px; min-width: 184px; grid-template-columns: minmax(0, 1fr) 1px 50px; column-gap: 7px; padding: 7px 9px; } .vf-region-currency-trigger__language-name, .vf-region-currency-trigger__currency-code, .vf-region-currency-trigger__currency-symbol { font-size: 13px; } .vf-region-currency-trigger__currency { width: 50px; min-width: 50px; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger { width: 184px; min-width: 184px; } .site-footer .vf-region-currency-trigger { width: 184px; min-width: 184px; } .vf-preferences-modal { display: block; padding: 0; } .vf-preferences-modal__backdrop { display: none; } .vf-preferences-modal__dialog { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; padding: calc( 12px + env(safe-area-inset-top) ) 16px calc( 18px + env(safe-area-inset-bottom) ); border: 0; border-radius: 0; box-shadow: none; } .vf-preferences-modal__close { top: calc( 10px + env(safe-area-inset-top) ); right: 12px; } .vf-preferences-modal__tabs { gap: 22px; min-height: 54px; padding-right: 46px; } .vf-preferences-modal__tab { min-height: 54px; padding-bottom: 13px; font-size: 14px; } .vf-preferences-panel { padding-top: 16px; } .vf-preferences-search { width: 100%; height: 48px; margin-bottom: 20px; } .vf-preferences-grid { grid-template-columns: 1fr; gap: 8px; } .vf-preferences-grid--popular { max-width: none; } .vf-preferences-option { min-height: 62px; padding: 9px 11px; } .vf-preferences-heading { margin-bottom: 10px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .vf-region-currency-trigger { width: 118px; min-width: 118px; grid-template-columns: 18px 1px 50px; column-gap: 8px; } .vf-region-currency-trigger__language { width: 18px; justify-content: center; } .vf-region-currency-trigger__language-name { display: none; } .vf-region-currency-trigger__currency { width: 50px; min-width: 50px; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger, .site-footer .vf-region-currency-trigger { width: 118px; min-width: 118px; } } /* ========================================================= GLOBAL SWITCHER TEXT COLOR ========================================================= */ .vf-region-currency-trigger { color: #707070; } .vf-region-currency-trigger__language-icon { color: #707070; } /* ========================================================= MOBILE PREFERENCES ABOVE MOBILE MENU ========================================================= */ @media (max-width: 767px) { /* * The mobile menu remains logically open underneath * the language/currency screen so Android Back can * return to it. * * We hide it visually while the preferences modal * is active. */ body.vf-preferences-open #vf-mobile-menu-new.is-open { visibility: hidden !important; pointer-events: none !important; } /* * Preferences must sit above every VANAFLY overlay. */ #vf-preferences-modal { position: fixed !important; z-index: 2147483647 !important; } } /* ========================================================= HEADER REGION / CURRENCY SWITCHER ALWAYS SHOW LIGHT CONTAINER FOOTER REMAINS UNCHANGED ========================================================= */ @media (min-width: 992px) { header.site-header .vf-region-currency-trigger { background: #f5f7f9 !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; } header.site-header .vf-region-currency-trigger:hover, header.site-header .vf-region-currency-trigger:focus, header.site-header .vf-region-currency-trigger:focus-visible, header.site-header .vf-region-currency-trigger:active { background: #f5f7f9 !important; border: 0 !important; box-shadow: none !important; outline: none !important; } } /* ========================================================= VANAFLY REGION / LANGUAGE / CURRENCY ========================================================= */ /* ========================================================= TRIGGER ========================================================= */ .vf-region-currency-trigger { display: grid; grid-template-columns: minmax(0, 1fr) 1px 52px; align-items: center; column-gap: 8px; /* * Fixed width prevents the header/footer from shifting * when English changes to Español. */ width: 190px; min-width: 190px; min-height: 40px; margin: 0; padding: 7px 12px; border: 0; border-radius: 9px; background: transparent; box-sizing: border-box; color: #252a31; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .vf-region-currency-trigger:hover { background: #f3f6f8; } .vf-region-currency-trigger:focus, .vf-region-currency-trigger:focus-visible, .vf-region-currency-trigger:active { outline: none !important; box-shadow: none !important; } /* ========================================================= TRIGGER LANGUAGE ========================================================= */ .vf-region-currency-trigger__language { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; width: 100%; min-width: 0; overflow: hidden; } .vf-region-currency-trigger__language-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 0; line-height: 1; color: #435466; } .vf-region-currency-trigger__language-icon svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; } .vf-region-currency-trigger__language-name { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } /* ========================================================= TRIGGER DIVIDER ========================================================= */ .vf-region-currency-trigger__divider { display: block; width: 1px; height: 20px; margin: 0; background: #d7dde3; justify-self: center; } /* ========================================================= TRIGGER CURRENCY ========================================================= */ .vf-region-currency-trigger__currency { display: inline-flex; align-items: center; justify-content: flex-start; gap: 5px; width: 52px; min-width: 52px; } .vf-region-currency-trigger__currency-symbol { font-size: 14px; line-height: 20px; font-weight: 700; white-space: nowrap; } .vf-region-currency-trigger__currency-code { font-size: 14px; line-height: 20px; font-weight: 600; white-space: nowrap; } /* ========================================================= PAGE LOCK ========================================================= */ html.vf-preferences-open, body.vf-preferences-open { overflow: hidden !important; } /* ========================================================= MODAL ROOT ========================================================= */ .vf-preferences-modal { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: 28px; box-sizing: border-box; } .vf-preferences-modal[hidden] { display: none !important; } /* ========================================================= BACKDROP ========================================================= */ .vf-preferences-modal__backdrop { position: absolute; inset: 0; background: rgba( 24, 35, 46, .48 ); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } /* ========================================================= DIALOG ========================================================= */ .vf-preferences-modal__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: min( 920px, calc(100vw - 56px) ); max-height: min( 760px, calc(100dvh - 56px) ); padding: 26px 28px 30px; overflow: hidden; background: #fff; border: 1px solid #e2e8ee; border-radius: 20px; box-sizing: border-box; box-shadow: 0 24px 70px rgba(0, 0, 0, .22); } /* ========================================================= CLOSE BUTTON ========================================================= */ .vf-preferences-modal__close { position: absolute; z-index: 4; top: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #526170; cursor: pointer; } .vf-preferences-modal__close:hover { background: #f1f4f6; } .vf-preferences-modal__close:focus, .vf-preferences-modal__close:focus-visible, .vf-preferences-modal__close:active { outline: none !important; box-shadow: none !important; } .vf-preferences-modal__close .material-symbols-outlined { font-size: 24px !important; } /* ========================================================= TABS ========================================================= */ .vf-preferences-modal__tabs { flex: 0 0 auto; display: flex; align-items: flex-end; gap: 34px; min-height: 44px; padding-right: 54px; border-bottom: 1px solid #edf0f3; } .vf-preferences-modal__tab { position: relative; display: flex; align-items: center; min-height: 44px; margin: 0; padding: 0 2px 13px; border: 0; background: transparent; color: #536173; font-size: 15px; line-height: 20px; font-weight: 600; cursor: pointer; } .vf-preferences-modal__tab.is-active { color: #151b23; } .vf-preferences-modal__tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: #128add; } .vf-preferences-modal__tab:focus, .vf-preferences-modal__tab:focus-visible { outline: none; box-shadow: none; } /* ========================================================= PANELS ========================================================= */ .vf-preferences-panel { flex: 1 1 auto; min-height: 0; padding-top: 20px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .vf-preferences-panel[hidden] { display: none !important; } /* ========================================================= SEARCH ========================================================= */ .vf-preferences-search { position: relative; display: flex; align-items: center; width: min( 100%, 620px ); height: 48px; margin-bottom: 22px; border: 1px solid #ccd7e2; border-radius: 10px; background: #fff; box-sizing: border-box; } .vf-preferences-search:focus-within { border-color: #128add; box-shadow: 0 0 0 2px rgba(18, 138, 221, .08); } .vf-preferences-search .material-symbols-outlined { flex: 0 0 auto; margin-left: 14px; font-size: 21px !important; color: #8a9aaa; } .vf-preferences-search input { flex: 1 1 auto; min-width: 0; height: 100%; margin: 0; padding: 0 14px 0 10px; border: 0; outline: 0; background: transparent; color: #26313d; font: inherit; font-size: 15px; } .vf-preferences-search input::placeholder { color: #8897a6; opacity: 1; } /* ========================================================= HEADINGS ========================================================= */ .vf-preferences-heading { margin: 0 0 12px; font-size: 15px; line-height: 21px; font-weight: 700; color: #252c34; } .vf-preferences-grid + .vf-preferences-heading { margin-top: 24px; } /* ========================================================= GRID ========================================================= */ .vf-preferences-grid { display: grid; grid-template-columns: repeat( 3, minmax(0, 1fr) ); gap: 10px; } .vf-preferences-grid--popular { max-width: 610px; } /* ========================================================= OPTION CARD ========================================================= */ .vf-preferences-option { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 24px; align-items: center; column-gap: 10px; width: 100%; min-height: 66px; margin: 0; padding: 10px 12px; border: 1px solid #d9e2ea; border-radius: 11px; background: #fff; box-sizing: border-box; color: #202831; text-align: left; text-decoration: none !important; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; } .vf-preferences-option:hover { border-color: #a9cdeb; background: #fbfdff; text-decoration: none !important; } .vf-preferences-option:focus, .vf-preferences-option:focus-visible, .vf-preferences-option:active { outline: none !important; box-shadow: none !important; text-decoration: none !important; } .vf-preferences-option.is-selected { border-color: #128add; background: #f4faff; box-shadow: inset 0 0 0 1px #128add; } /* ========================================================= OPTION VISUAL ========================================================= */ .vf-preferences-option__visual { display: flex; align-items: center; justify-content: center; width: 36px; height: 34px; overflow: hidden; border-radius: 5px; } .vf-preferences-option__flag { display: block; width: 30px; height: 20px; object-fit: cover; border-radius: 2px; } .vf-preferences-option__emoji { display: block; font-size: 27px; line-height: 1; } .vf-preferences-option__language-icon { font-size: 24px !important; color: #128add; } /* ========================================================= OPTION COPY ========================================================= */ .vf-preferences-option__copy { display: flex; flex-direction: column; min-width: 0; gap: 2px; } .vf-preferences-option__copy strong { display: block; overflow: hidden; font-size: 14px; line-height: 18px; font-weight: 650; color: #202831; white-space: normal; } .vf-preferences-option__copy small { display: block; font-size: 12px; line-height: 16px; font-weight: 500; color: #627386; } /* ========================================================= SELECTED CHECK ========================================================= */ .vf-preferences-option__check { display: none; justify-self: end; font-size: 22px !important; color: #128add; } .vf-preferences-option.is-selected .vf-preferences-option__check { display: block; } /* ========================================================= FILTERED ITEMS ========================================================= */ .vf-preferences-option.is-filtered-out { display: none !important; } /* ========================================================= HEADER ACTION GROUP ========================================================= */ .vf-header-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 18px !important; width: auto !important; margin: 0 !important; padding: 0 !important; position: static !important; } .vf-header-preferences { display: flex !important; align-items: center !important; flex: 0 0 190px; width: 190px; margin: 0 !important; padding: 0 !important; position: static !important; } /* ========================================================= HEADER SUPPORT ========================================================= */ .vf-header-support { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-height: 40px !important; margin: 0 !important; padding: 7px 12px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important; color: #707070 !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; transition: background-color .15s ease, color .15s ease !important; } .vf-header-support:hover { background: #ffffff !important; color: #3d3d3d !important; text-decoration: none !important; } .vf-header-support:focus, .vf-header-support:focus-visible, .vf-header-support:active { outline: none !important; box-shadow: none !important; text-decoration: none !important; } /* * Support now uses a local SVG , not a * Material Symbols ligature. */ .vf-header-support__icon { display: block !important; flex: 0 0 20px !important; width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important; margin: 0 !important; padding: 0 !important; object-fit: contain; } .vf-header-support__label { display: inline-flex !important; align-items: center !important; color: inherit !important; line-height: 20px !important; } /* ========================================================= DESKTOP HEADER ========================================================= */ @media (min-width: 992px) { .currency_and_help.vf-header-actions { height: 100%; } .site-header .header-menu > .hideonmobile2 { display: flex !important; align-items: center !important; height: 62px !important; margin: 0 !important; padding: 0 !important; } .site-header .header-menu > .hideonmobile2 > div, .site-header .header-menu > .hideonmobile2 > nav { margin: 0 !important; } .site-header .header-menu ul { align-items: center !important; margin-top: 0 !important; margin-bottom: 0 !important; } .site-header .vf-header-support { position: static !important; flex: 0 0 auto !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 11px !important; box-sizing: border-box !important; transform: none !important; } .site-header .vf-header-preferences { position: static !important; display: flex !important; align-items: center !important; align-self: center !important; flex: 0 0 190px !important; width: 190px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } .site-header .vf-header-preferences .vf-region-currency-trigger { position: static !important; width: 190px !important; min-width: 190px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 11px !important; box-sizing: border-box !important; transform: none !important; } .site-header .vf-region-currency-trigger__language { height: 20px !important; line-height: 20px !important; } .site-header .vf-region-currency-trigger__currency { height: 20px !important; line-height: 20px !important; } .site-header .vf-region-currency-trigger__language-icon { width: 18px !important; height: 18px !important; flex: 0 0 18px !important; } .site-header .vf-region-currency-trigger__language-icon svg { width: 18px !important; height: 18px !important; } .site-header .vf-region-currency-trigger__language-name, .site-header .vf-region-currency-trigger__currency-symbol, .site-header .vf-region-currency-trigger__currency-code { line-height: 20px !important; } .site-header .vf-region-currency-trigger__divider { height: 20px !important; } } /* ========================================================= FOOTER SWITCHER ========================================================= */ .site-footer .vf-footer-preferences { display: flex; align-items: center; margin-top: 20px; } .site-footer .vf-region-currency-trigger { width: 190px; min-width: 190px; min-height: 42px; padding: 8px 12px; border: 1px solid rgba( 255, 255, 255, .20 ); border-radius: 9px; background: rgba( 255, 255, 255, .06 ); color: #ffffff; } .site-footer .vf-region-currency-trigger:hover { border-color: rgba( 255, 255, 255, .34 ); background: rgba( 255, 255, 255, .11 ); color: #ffffff; } .site-footer .vf-region-currency-trigger:focus, .site-footer .vf-region-currency-trigger:focus-visible { border-color: rgba( 255, 255, 255, .45 ); background: rgba( 255, 255, 255, .10 ); } .site-footer .vf-region-currency-trigger__language-icon { color: #ffffff; } .site-footer .vf-region-currency-trigger__language-name, .site-footer .vf-region-currency-trigger__currency-symbol, .site-footer .vf-region-currency-trigger__currency-code { color: #ffffff; } .site-footer .vf-region-currency-trigger__divider { background: rgba( 255, 255, 255, .28 ); } /* ========================================================= MOBILE MENU SWITCHER ========================================================= */ @media (max-width: 991px) { .vf-mobile-menu-new__preferences { width: 100%; padding: 14px 10px; border-top: 1px solid #e5eaee; box-sizing: border-box; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger { width: 190px; min-width: 190px; margin: 0; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) { .vf-preferences-modal { padding: 20px; } .vf-preferences-modal__dialog { width: calc( 100vw - 40px ); max-height: calc( 100dvh - 40px ); } .vf-preferences-grid { grid-template-columns: repeat( 2, minmax(0, 1fr) ); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .vf-region-currency-trigger { width: 184px; min-width: 184px; grid-template-columns: minmax(0, 1fr) 1px 50px; column-gap: 7px; padding: 7px 9px; } .vf-region-currency-trigger__language-name, .vf-region-currency-trigger__currency-code, .vf-region-currency-trigger__currency-symbol { font-size: 13px; } .vf-region-currency-trigger__currency { width: 50px; min-width: 50px; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger { width: 184px; min-width: 184px; } .site-footer .vf-region-currency-trigger { width: 184px; min-width: 184px; } .vf-preferences-modal { display: block; padding: 0; } .vf-preferences-modal__backdrop { display: none; } .vf-preferences-modal__dialog { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; padding: calc( 12px + env(safe-area-inset-top) ) 16px calc( 18px + env(safe-area-inset-bottom) ); border: 0; border-radius: 0; box-shadow: none; } .vf-preferences-modal__close { top: calc( 10px + env(safe-area-inset-top) ); right: 12px; } .vf-preferences-modal__tabs { gap: 22px; min-height: 54px; padding-right: 46px; } .vf-preferences-modal__tab { min-height: 54px; padding-bottom: 13px; font-size: 14px; } .vf-preferences-panel { padding-top: 16px; } .vf-preferences-search { width: 100%; height: 48px; margin-bottom: 20px; } .vf-preferences-grid { grid-template-columns: 1fr; gap: 8px; } .vf-preferences-grid--popular { max-width: none; } .vf-preferences-option { min-height: 62px; padding: 9px 11px; } .vf-preferences-heading { margin-bottom: 10px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 390px) { .vf-region-currency-trigger { width: 118px; min-width: 118px; grid-template-columns: 18px 1px 50px; column-gap: 8px; } .vf-region-currency-trigger__language { width: 18px; justify-content: center; } .vf-region-currency-trigger__language-name { display: none; } .vf-region-currency-trigger__currency { width: 50px; min-width: 50px; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger, .site-footer .vf-region-currency-trigger { width: 118px; min-width: 118px; } } /* ========================================================= GLOBAL SWITCHER TEXT COLOR ========================================================= */ .vf-region-currency-trigger { color: #707070; } .vf-region-currency-trigger__language-icon { color: #707070; } /* ========================================================= MOBILE PREFERENCES ABOVE MOBILE MENU ========================================================= */ @media (max-width: 767px) { /* * The mobile menu remains logically open underneath * the language/currency screen so Android Back can * return to it. * * We hide it visually while the preferences modal * is active. */ body.vf-preferences-open #vf-mobile-menu-new.is-open { visibility: hidden !important; pointer-events: none !important; } /* * Preferences must sit above every VANAFLY overlay. */ #vf-preferences-modal { position: fixed !important; z-index: 2147483647 !important; } } /* ========================================================= HEADER REGION / CURRENCY SWITCHER ALWAYS SHOW LIGHT CONTAINER FOOTER REMAINS UNCHANGED ========================================================= */ @media (min-width: 992px) { header.site-header .vf-region-currency-trigger { background: #f5f7f9 !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; } header.site-header .vf-region-currency-trigger:hover, header.site-header .vf-region-currency-trigger:focus, header.site-header .vf-region-currency-trigger:focus-visible, header.site-header .vf-region-currency-trigger:active { background: #f5f7f9 !important; border: 0 !important; box-shadow: none !important; outline: none !important; } } /* ========================================================= HEADER ACTIONS — FINAL DESKTOP ALIGNMENT ========================================================= */ @media (min-width: 992px) { /* ----------------------------------------------------- SUPPORT + PREFERENCES GROUP ----------------------------------------------------- */ header.site-header .vf-header-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; width: auto !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- SUPPORT BUTTON ----------------------------------------------------- */ header.site-header .vf-header-support { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 10px !important; transform: none !important; } /* ----------------------------------------------------- PREFERENCES WRAPPER ----------------------------------------------------- */ header.site-header .vf-header-preferences { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 190px !important; width: 190px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- SWITCHER TRIGGER ----------------------------------------------------- */ header.site-header .vf-region-currency-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 190px !important; min-width: 190px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 10px !important; background: #f5f7f9 !important; border: 0 !important; border-radius: 10px !important; box-sizing: border-box !important; box-shadow: none !important; transform: none !important; } /* ----------------------------------------------------- LANGUAGE ----------------------------------------------------- */ header.site-header .vf-region-currency-trigger__language { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; gap: 6px !important; width: auto !important; min-width: 0 !important; height: 20px !important; margin: 0 !important; padding: 0 !important; } header.site-header .vf-region-currency-trigger__language-icon { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; } header.site-header .vf-region-currency-trigger__language-name { display: block !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: nowrap !important; line-height: 20px !important; } /* ----------------------------------------------------- DIVIDER ----------------------------------------------------- */ header.site-header .vf-region-currency-trigger__divider { display: block !important; flex: 0 0 1px !important; width: 1px !important; height: 20px !important; margin: 0 2px !important; background: #d7dde3 !important; } /* ----------------------------------------------------- CURRENCY ----------------------------------------------------- */ header.site-header .vf-region-currency-trigger__currency { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; gap: 4px !important; width: auto !important; min-width: 0 !important; height: 20px !important; margin: 0 !important; padding: 0 !important; } header.site-header .vf-region-currency-trigger__currency-symbol, header.site-header .vf-region-currency-trigger__currency-code { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; line-height: 20px !important; white-space: nowrap !important; } } /* ========================================================= DESKTOP HEADER SWITCHER — HARD FINAL OVERRIDE Keep a stable footprint while TranslatePress replaces text. ========================================================= */ @media (min-width: 992px) { /* ----------------------------------------------------- HEADER ACTION GROUP ----------------------------------------------------- */ header.site-header .currency_and_help.vf-header-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- SUPPORT ----------------------------------------------------- */ header.site-header .vf-header-support { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 40px !important; margin: 0 !important; padding: 0 9px !important; box-sizing: border-box !important; } /* ----------------------------------------------------- STABLE PREFERENCES WRAPPER ----------------------------------------------------- */ header.site-header .vf-header-preferences { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 164px !important; width: 164px !important; min-width: 164px !important; max-width: 164px !important; inline-size: 164px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; } /* ----------------------------------------------------- STABLE TRIGGER ----------------------------------------------------- */ header.site-header .vf-header-preferences .vf-region-currency-trigger { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; flex: 0 0 auto !important; gap: 7px !important; width: 164px !important; min-width: 164px !important; max-width: 164px !important; inline-size: 164px !important; height: 40px !important; min-height: 40px !important; margin: 0 !important; padding: 0 11px !important; background: #f5f7f9 !important; border: 0 !important; border-radius: 10px !important; box-sizing: border-box !important; box-shadow: none !important; } /* ----------------------------------------------------- LANGUAGE ----------------------------------------------------- */ header.site-header .vf-region-currency-trigger__language { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; flex: 0 0 82px !important; gap: 6px !important; width: 82px !important; min-width: 82px !important; max-width: 82px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } header.site-header .vf-region-currency-trigger__language-icon { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; padding: 0 !important; } header.site-header .vf-region-currency-trigger__language-name { display: inline-block !important; flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; white-space: nowrap !important; } /* ----------------------------------------------------- DIVIDER ----------------------------------------------------- */ header.site-header .vf-region-currency-trigger__divider { display: block !important; flex: 0 0 1px !important; width: 1px !important; height: 20px !important; margin: 0 2px !important; padding: 0 !important; background: #d7dde3 !important; } /* ----------------------------------------------------- CURRENCY ----------------------------------------------------- */ header.site-header .vf-region-currency-trigger__currency { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; flex: 0 0 40px !important; gap: 4px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; margin: 0 !important; padding: 0 !important; } header.site-header .vf-region-currency-trigger__currency-symbol, header.site-header .vf-region-currency-trigger__currency-code { display: inline-block !important; flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } } /* ========================================================= LANGUAGE / CURRENCY TRIGGER — FINAL BORDER ========================================================= */ .vf-region-currency-trigger { box-sizing: border-box !important; border: 1px solid #cfd4da !important; border-radius: 9px !important; background: #fff !important; box-shadow: none !important; } .vf-region-currency-trigger:hover, .vf-region-currency-trigger:focus, .vf-region-currency-trigger:focus-visible, .vf-region-currency-trigger:active { border-color: #b9c0c7 !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(18, 138, 221, 0.07) !important; outline: none !important; } /* ========================================================= MOBILE DRAWER SWITCHER — COMPACT WIDTH ========================================================= */ @media (max-width: 991px) { .vf-mobile-menu-new__preferences .vf-region-currency-trigger { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; width: 184px !important; min-width: 184px !important; max-width: 184px !important; inline-size: 184px !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 7px 11px !important; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger__language, .vf-mobile-menu-new__preferences .vf-region-currency-trigger__currency { display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; gap: 6px !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger__divider { flex: 0 0 1px !important; width: 1px !important; height: 20px !important; margin: 0 1px !important; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger__language-icon { flex: 0 0 24px !important; width: 24px !important; height: 16px !important; margin: 0 !important; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger__language-name, .vf-mobile-menu-new__preferences .vf-region-currency-trigger__currency-symbol, .vf-mobile-menu-new__preferences .vf-region-currency-trigger__currency-code { width: auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger__language { flex: 0 0 86px !important; width: 86px !important; min-width: 86px !important; max-width: 86px !important; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger__currency { flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; } } @media (max-width: 390px) { .vf-mobile-menu-new__preferences .vf-region-currency-trigger { width: 118px !important; min-width: 118px !important; max-width: 118px !important; inline-size: 118px !important; } .vf-mobile-menu-new__preferences .vf-region-currency-trigger__language { flex-basis: 24px !important; width: 24px !important; min-width: 24px !important; max-width: 24px !important; } } .vf-region-currency-trigger__flag { display: block; width: 18px; height: 13px; margin: 0; padding: 0; border: 0; border-radius: 1px; object-fit: cover; } /* Keep the header preference switcher compact on 10-inch tablets in landscape. */ @media (min-width: 992px) and (max-width: 1366px) and (orientation: landscape) { html body header.site-header .header-menu .currency_and_help.vf-header-actions { align-self: center !important; margin-right: 0 !important; margin-left: auto !important; transform: translateX(-12px) !important; } header.site-header .vf-header-preferences { flex: 0 0 150px !important; width: 150px !important; inline-size: 150px !important; } header.site-header .vf-header-preferences .vf-region-currency-trigger { justify-content: center !important; width: 150px !important; min-width: 150px !important; max-width: 150px !important; inline-size: 150px !important; gap: 4px !important; padding-right: 8px !important; padding-left: 8px !important; } header.site-header .vf-region-currency-trigger__language { gap: 4px !important; } header.site-header .vf-region-currency-trigger__divider { margin-right: 0 !important; margin-left: 0 !important; } header.site-header .vf-region-currency-trigger__currency { gap: 2px !important; } } /* Final footer switcher rendering for tablet portrait. */ @media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) { body .site-footer .vf-footer-preferences { display: flex !important; align-items: center !important; width: auto !important; } body .site-footer .vf-footer-preferences .vf-region-currency-trigger { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; width: auto !important; min-width: 0 !important; max-width: max-content !important; min-height: 42px !important; padding: 8px 11px !important; border: 1px solid #ffffff !important; border-radius: 9px !important; background: #101b2b !important; color: #ffffff !important; } body .site-footer .vf-region-currency-trigger__language, body .site-footer .vf-region-currency-trigger__currency { display: inline-flex !important; align-items: center !important; visibility: visible !important; opacity: 1 !important; } body .site-footer .vf-region-currency-trigger__language-name, body .site-footer .vf-region-currency-trigger__currency-symbol, body .site-footer .vf-region-currency-trigger__currency-code { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #ffffff !important; } } /* Newsletter controls on portrait tablets, including Mailchimp wrappers. */ @media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) { html body .join-our-box .subscribe-form, html body .join-our-box .mc4wp-form-fields .subscribe-form { display: grid !important; align-items: stretch !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(118px, auto) !important; gap: 10px !important; width: 100% !important; } html body .join-our-box .subscribe-form > *, html body .join-our-box .subscribe-form > .vf-newsletter-email, html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"], html body .join-our-box .subscribe-form .vf-newsletter-airport, html body .join-our-box .subscribe-form .sec-btn { position: relative !important; inset: auto !important; flex: 0 0 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } html body .join-our-box .subscribe-form > .vf-newsletter-email, html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"] { grid-column: 1 !important; width: 100% !important; } html body .join-our-box .subscribe-form .vf-newsletter-airport { grid-column: 2 !important; width: 100% !important; } html body .join-our-box .subscribe-form .sec-btn { grid-column: 3 !important; width: auto !important; min-width: 118px !important; padding-right: 18px !important; padding-left: 18px !important; } html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"], html body .join-our-box .subscribe-form .vf-newsletter-email, html body .join-our-box .vf-newsletter-airport__display, html body .join-our-box .subscribe-form .sec-btn { height: 50px !important; border-radius: 8px !important; } html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"], html body .join-our-box .subscribe-form .vf-newsletter-email, html body .join-our-box .vf-newsletter-airport__display { border: 1px solid #e1e6ea !important; background: #ffffff !important; } html body .join-our-box .vf-newsletter-airport { display: block !important; height: 50px !important; } html body .join-our-box .vf-newsletter-airport__display, html body .join-our-box .vf-newsletter-airport .vf-home-airport-input, html body .join-our-box .vf-newsletter-airport .form-input { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 50px !important; margin: 0 !important; padding: 0 18px !important; border: 1px solid #e1e6ea !important; border-radius: 8px !important; background: #ffffff !important; color: #101b2b !important; font-family: "Poppins", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 48px !important; text-align: left !important; box-shadow: none !important; outline: none !important; -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; } } /* Phone footer: keep Mailchimp controls contained and restore the full switcher. */ @media (max-width: 767px) { html body .join-our-box .subscribe-form, html body .join-our-box .mc4wp-form-fields .subscribe-form { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; width: 100% !important; } html body .join-our-box .subscribe-form > *, html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"], html body .join-our-box .subscribe-form .vf-newsletter-email, html body .join-our-box .subscribe-form .vf-newsletter-airport, html body .join-our-box .subscribe-form .sec-btn { position: relative !important; inset: auto !important; grid-column: 1 !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 50px !important; margin: 0 !important; box-sizing: border-box !important; } html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"], html body .join-our-box .subscribe-form .vf-newsletter-email, html body .join-our-box .vf-newsletter-airport .vf-home-airport-input, html body .join-our-box .vf-newsletter-airport .form-input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 50px !important; padding: 0 16px !important; border: 1px solid #e1e6ea !important; border-radius: 8px !important; background: #ffffff !important; color: #101b2b !important; font: 400 16px/48px "Poppins", sans-serif !important; outline: none !important; box-shadow: none !important; box-sizing: border-box !important; -webkit-appearance: none !important; appearance: none !important; } html body .join-our-box .vf-newsletter-airport .vf-home-airport-input:focus, html body .join-our-box .vf-newsletter-airport .form-input:focus, html body .join-our-box .subscribe-form input[type="email"]:focus, html body .join-our-box .subscribe-form input[name="EMAIL"]:focus { border-color: #c8d1d8 !important; outline: none !important; box-shadow: 0 0 0 2px rgba(18, 138, 221, .12) !important; } html body .join-our-box .vf-newsletter-airport { z-index: 20 !important; overflow: visible !important; } html body .join-our-box .vf-newsletter-airport-results { position: absolute !important; top: calc(100% + 8px) !important; right: auto !important; bottom: auto !important; left: 0 !important; z-index: 10000 !important; display: block; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto !important; max-height: min(320px, 42vh) !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden !important; overflow-y: auto !important; border: 1px solid #dbe3ea !important; border-radius: 10px !important; background: #ffffff !important; box-shadow: 0 12px 28px rgba(16, 27, 43, .16) !important; box-sizing: border-box !important; } html body .join-our-box .vf-newsletter-airport-results[hidden] { display: none !important; } html body .join-our-box .vf-newsletter-airport-group, html body .join-our-box .vf-newsletter-airport-country { width: 100% !important; height: auto !important; min-height: 0 !important; box-sizing: border-box !important; } html body .join-our-box .vf-newsletter-airport-country { display: flex !important; align-items: center !important; gap: 7px !important; padding: 9px 12px 6px !important; color: #2c3742 !important; } html body .join-our-box .vf-newsletter-airport-result { position: relative !important; z-index: auto !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; width: 100% !important; height: auto !important; min-height: 62px !important; margin: 0 !important; padding: 10px 12px !important; overflow: visible !important; border: 0 !important; border-bottom: 1px solid #eef2f5 !important; border-radius: 0 !important; outline: none !important; background: #ffffff !important; color: #202731 !important; font-family: "Poppins", sans-serif !important; line-height: 1.3 !important; text-align: left !important; white-space: normal !important; box-shadow: none !important; box-sizing: border-box !important; } html body .join-our-box .vf-newsletter-airport-result:last-child { border-bottom: 0 !important; } html body .join-our-box .vf-newsletter-airport-result__branch, html body .join-our-box .vf-newsletter-airport-result__icon { flex: 0 0 auto !important; } html body .join-our-box .vf-newsletter-airport-result__content { display: block !important; flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; } html body .join-our-box .vf-newsletter-airport-result__topline { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; } html body .join-our-box .vf-newsletter-airport-result__title { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body .join-our-box .vf-newsletter-airport-result__code { flex: 0 0 auto !important; white-space: nowrap !important; } html body .join-our-box .subscribe-form .sec-btn { z-index: 1 !important; } html body .join-our-box .subscribe-form .sec-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 16px !important; border-radius: 8px !important; white-space: nowrap !important; } body .site-footer .vf-footer-preferences { display: flex !important; align-items: center !important; width: auto !important; max-width: 100% !important; } body .site-footer .vf-footer-preferences .vf-region-currency-trigger { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; width: max-content !important; min-width: 0 !important; max-width: 100% !important; min-height: 42px !important; padding: 8px 11px !important; border: 1px solid rgba(255, 255, 255, .7) !important; border-radius: 9px !important; background: rgba(255, 255, 255, .06) !important; color: #ffffff !important; } body .site-footer .vf-region-currency-trigger__language, body .site-footer .vf-region-currency-trigger__currency { display: inline-flex !important; align-items: center !important; gap: 4px !important; width: auto !important; visibility: visible !important; opacity: 1 !important; } body .site-footer .vf-region-currency-trigger__language-name, body .site-footer .vf-region-currency-trigger__currency-symbol, body .site-footer .vf-region-currency-trigger__currency-code { display: inline-block !important; width: auto !important; color: #ffffff !important; visibility: visible !important; opacity: 1 !important; white-space: nowrap !important; } body .site-footer .vf-region-currency-trigger__divider { display: block !important; width: 1px !important; height: 20px !important; margin: 0 1px !important; background: rgba(255, 255, 255, .45) !important; } } /* Footer Trustpilot and region controls share a stable, responsive footprint. */ body .site-footer .vf-footer-trustpilot { width: min(100%, 220px) !important; max-width: 100% !important; height: 24px !important; min-height: 24px !important; margin-left: 0 !important; clip-path: none !important; } body .site-footer .vf-footer-preferences { width: min(100%, 182px) !important; max-width: 100% !important; } body .site-footer .vf-footer-preferences { justify-content: flex-start !important; } body .site-footer .vf-footer-preferences .vf-region-currency-trigger { width: 182px !important; min-height: 44px !important; justify-content: center !important; } /* ========================================================= FOOTER UTILITY ROW ========================================================= */ body .site-footer .vf-footer-utility-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; height: 56px; min-height: 56px; margin-top: 64px; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); box-sizing: border-box; } body .site-footer .site-info { padding-bottom: 0 !important; } body .site-footer .vf-footer-utility-row .vf-footer-preferences, body .site-footer .vf-footer-utility-row .vf-footer-trustpilot { margin: 0 !important; } body .site-footer .vf-footer-utility-row .vf-footer-preferences { display: flex !important; flex: 0 0 auto; justify-content: flex-start !important; width: auto !important; min-width: 0; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot { display: block; flex: 0 1 220px; width: 220px !important; min-width: 0; transform: none; } body .site-footer .vf-footer-utility-row .vf-region-currency-trigger { width: 182px !important; min-width: 182px !important; max-width: 182px !important; inline-size: 182px !important; padding-right: 0 !important; padding-left: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; justify-content: flex-start !important; } body .site-footer .vf-footer-utility-row .vf-region-currency-trigger__language, body .site-footer .vf-footer-utility-row .vf-region-currency-trigger__currency { flex: 0 0 auto !important; justify-content: flex-start !important; width: auto !important; min-width: 0 !important; max-width: none !important; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot, body .site-footer .vf-footer-utility-row .vf-footer-trustpilot .trustpilot-widget { text-align: right !important; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot .trustpilot-widget { display: flex !important; align-items: center !important; justify-content: flex-end !important; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot .trustpilot-widget > a, body .site-footer .vf-footer-utility-row .vf-footer-trustpilot iframe { display: block !important; margin-right: 0 !important; margin-left: auto !important; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot .trustpilot-widget > a { transform: none; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot .trustpilot-widget > a.vf-footer-trustpilot__fallback { display: inline-flex !important; align-items: center; justify-content: flex-end; gap: 4px; color: #ffffff !important; font-size: 14px; line-height: 24px; text-decoration: none; white-space: nowrap; } body .site-footer .vf-footer-trustpilot__star { color: #00b67a; font-size: 18px; line-height: 1; } @media (max-width: 991px) { body .site-footer .vf-footer-utility-row { margin-top: 56px; } } @media (max-width: 575px) { body .site-footer .vf-footer-utility-row { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 8px; } body .site-footer .vf-footer-utility-row .vf-footer-preferences { width: 100% !important; max-width: 100% !important; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot { width: 220px !important; max-width: 220px !important; justify-self: end; } body .site-footer .vf-footer-utility-row .vf-region-currency-trigger { width: 100% !important; min-width: 0 !important; max-width: 100% !important; inline-size: 100% !important; gap: 5px !important; padding-right: 0 !important; padding-left: 0 !important; } body .site-footer .vf-footer-utility-row .vf-region-currency-trigger__language, body .site-footer .vf-footer-utility-row .vf-region-currency-trigger__currency { gap: 3px !important; } body .site-footer .vf-footer-utility-row .vf-region-currency-trigger__language-name, body .site-footer .vf-footer-utility-row .vf-region-currency-trigger__currency-symbol, body .site-footer .vf-footer-utility-row .vf-region-currency-trigger__currency-code { font-size: 13px !important; } } @media (max-width: 390px) { body .site-footer .vf-footer-utility-row { grid-template-columns: 1fr; height: auto; min-height: 88px; padding: 10px 0; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot { justify-self: start; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot, body .site-footer .vf-footer-utility-row .vf-footer-trustpilot .trustpilot-widget { text-align: left !important; justify-content: flex-start !important; } body .site-footer .vf-footer-utility-row .vf-footer-trustpilot .trustpilot-widget > a, body .site-footer .vf-footer-utility-row .vf-footer-trustpilot iframe { margin-right: auto !important; margin-left: 0 !important; } } /* ========================================================= COPYRIGHT / SOCIAL ROW ALIGNMENT ========================================================= */ body .site-footer > .copyright .copyright-text { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px; width: 100% !important; text-align: left !important; } body .site-footer > .copyright .copyright-text .leftside { display: flex !important; align-items: center !important; flex: 0 0 auto; min-height: 24px; float: none !important; position: static !important; top: auto !important; } body .site-footer > .copyright .copyright-text .leftside p { display: flex !important; align-items: center !important; min-height: 24px; margin: 0 !important; line-height: 24px !important; } body .site-footer > .copyright .copyright-text .rightside { display: flex !important; flex: 0 0 auto; align-items: center !important; justify-content: flex-end; min-height: 24px; margin-left: auto !important; float: none !important; position: static !important; top: auto !important; } body .site-footer > .copyright .social-footer-icons { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 24px; margin: 0 !important; padding: 0 !important; line-height: 24px !important; } body .site-footer > .copyright .social-footer-icons > span { display: inline-flex; align-items: center; min-height: 24px; margin: 0 !important; padding: 0 !important; line-height: 24px !important; white-space: nowrap; } body .site-footer > .copyright .social-footer-icons > span .firstone { margin-left: 6px !important; } body .site-footer > .copyright .social-footer-icons > span .fa-heart + .fa-heart { margin-left: 4px !important; } body .site-footer > .copyright .social-footer-icons ul.menu.simple { display: flex !important; align-items: center; justify-content: flex-end; gap: 12px; min-height: 24px; margin: 0 !important; padding: 0 !important; list-style: none; } body .site-footer > .copyright .social-footer-icons ul.menu.simple li, body .site-footer > .copyright .social-footer-icons ul.menu.simple li a, body .site-footer > .copyright .social-footer-icons ul.menu.simple li a i { margin: 0 !important; padding: 0 !important; } body .site-footer > .copyright .social-footer-icons ul.menu.simple li a { display: inline-flex; align-items: center; justify-content: center; height: 24px; line-height: 24px !important; } /* ========================================================= STABLE HEADER PREFERENCE COLUMNS Accommodates longer values such as A$ AUD without shifting. ========================================================= */ @media (min-width: 992px) { body header.site-header .vf-header-preferences { flex: 0 0 168px !important; width: 168px !important; min-width: 168px !important; max-width: 168px !important; } body header.site-header .vf-header-preferences .vf-region-currency-trigger { display: grid !important; grid-template-columns: 82px 1px 46px !important; column-gap: 7px !important; width: 168px !important; min-width: 168px !important; max-width: 168px !important; inline-size: 168px !important; } body header.site-header .vf-region-currency-trigger__language { width: 82px !important; min-width: 82px !important; max-width: 82px !important; } body header.site-header .vf-region-currency-trigger__currency { width: 46px !important; min-width: 46px !important; max-width: 46px !important; gap: 4px !important; } body header.site-header .vf-region-currency-trigger__currency-symbol, body header.site-header .vf-region-currency-trigger__currency-code { font-size: 13px !important; } } @media (max-width: 991px) { body .vf-mobile-menu-new__preferences .vf-region-currency-trigger { display: grid !important; grid-template-columns: 86px 1px 52px !important; column-gap: 8px !important; width: 178px !important; min-width: 178px !important; max-width: 178px !important; inline-size: 178px !important; } body .vf-mobile-menu-new__preferences .vf-region-currency-trigger__currency { width: 52px !important; min-width: 52px !important; max-width: 52px !important; gap: 4px !important; } body .vf-mobile-menu-new__preferences .vf-region-currency-trigger__currency-symbol, body .vf-mobile-menu-new__preferences .vf-region-currency-trigger__currency-code { font-size: 13px !important; } } @media (max-width: 390px) { body .vf-mobile-menu-new__preferences .vf-region-currency-trigger { grid-template-columns: 24px 1px 52px !important; width: 116px !important; min-width: 116px !important; max-width: 116px !important; inline-size: 116px !important; } body .vf-mobile-menu-new__preferences .vf-region-currency-trigger__language { width: 24px !important; min-width: 24px !important; max-width: 24px !important; } } @media (max-width: 767px) { body .site-footer > .copyright .copyright-text { flex-direction: column; justify-content: center !important; gap: 8px; text-align: center !important; } body .site-footer > .copyright .copyright-text .rightside { margin-left: 0 !important; } } /* Landscape phones: keep newsletter controls visually consistent and contained. */ @media (orientation: landscape) and (max-width: 932px) and (max-height: 500px) { html body .join-our-box .subscribe-form, html body .join-our-box .mc4wp-form-fields .subscribe-form { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(118px, auto) !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; } html body .join-our-box .subscribe-form > *, html body .join-our-box .subscribe-form > .vf-newsletter-email, html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"], html body .join-our-box .subscribe-form .vf-newsletter-airport, html body .join-our-box .subscribe-form .sec-btn { position: relative !important; inset: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; box-sizing: border-box !important; } html body .join-our-box .subscribe-form > .vf-newsletter-email, html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"] { grid-column: 1 !important; } html body .join-our-box .subscribe-form .vf-newsletter-airport { grid-column: 2 !important; height: 50px !important; } html body .join-our-box .subscribe-form .sec-btn { grid-column: 3 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 118px !important; padding: 0 18px !important; white-space: nowrap !important; } html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"], html body .join-our-box .vf-newsletter-airport__display, html body .join-our-box .vf-newsletter-airport .vf-home-airport-input, html body .join-our-box .vf-newsletter-airport .form-input, html body .join-our-box .subscribe-form .sec-btn { height: 50px !important; min-height: 50px !important; border-radius: 8px !important; box-sizing: border-box !important; } html body .join-our-box .subscribe-form input[type="email"], html body .join-our-box .subscribe-form input[name="EMAIL"], html body .join-our-box .vf-newsletter-airport__display, html body .join-our-box .vf-newsletter-airport .vf-home-airport-input, html body .join-our-box .vf-newsletter-airport .form-input { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 0 16px !important; border: 1px solid #e1e6ea !important; background: #ffffff !important; color: #101b2b !important; font: 400 16px/48px "Poppins", sans-serif !important; outline: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } } /* ========================================================= MOBILE PREFERENCES SHEET — COMPACT, TOUCH-FRIENDLY RHYTHM Keep this cumulative override after the shared page styles. ========================================================= */ @media (max-width: 767px) { body.vf-preferences-open .vf-preferences-modal__dialog, #vf-preferences-modal .vf-preferences-modal__dialog { padding: env(safe-area-inset-top) 0 calc(12px + env(safe-area-inset-bottom)) !important; } body.vf-preferences-open .vf-preferences-modal__tabs, #vf-preferences-modal .vf-preferences-modal__tabs { align-items: center !important; gap: 24px !important; height: 64px !important; min-height: 64px !important; padding: 0 64px 0 16px !important; box-sizing: border-box !important; } body.vf-preferences-open .vf-preferences-modal__tab, #vf-preferences-modal .vf-preferences-modal__tab { align-items: center !important; height: 64px !important; min-height: 64px !important; padding: 0 !important; font-size: 15px !important; line-height: 20px !important; font-weight: 600 !important; white-space: nowrap !important; } body.vf-preferences-open .vf-preferences-modal__close, #vf-preferences-modal .vf-preferences-modal__close { top: calc(10px + env(safe-area-inset-top)) !important; right: 12px !important; width: 44px !important; height: 44px !important; border-radius: 10px !important; } body.vf-preferences-open .vf-preferences-panel, #vf-preferences-modal .vf-preferences-panel { padding: 16px !important; box-sizing: border-box !important; } body.vf-preferences-open .vf-preferences-search, #vf-preferences-modal .vf-preferences-search { height: 48px !important; margin: 0 0 22px !important; border-radius: 10px !important; } body.vf-preferences-open .vf-preferences-search input, #vf-preferences-modal .vf-preferences-search input { font-size: 16px !important; line-height: 22px !important; } body.vf-preferences-open .vf-preferences-heading, #vf-preferences-modal .vf-preferences-heading { margin: 0 0 10px !important; font-size: 17px !important; line-height: 24px !important; font-weight: 700 !important; } body.vf-preferences-open .vf-preferences-grid + .vf-preferences-heading, #vf-preferences-modal .vf-preferences-grid + .vf-preferences-heading { margin-top: 24px !important; } body.vf-preferences-open .vf-preferences-grid, #vf-preferences-modal .vf-preferences-grid { gap: 8px !important; } body.vf-preferences-open .vf-preferences-option, #vf-preferences-modal .vf-preferences-option { grid-template-columns: 34px minmax(0, 1fr) 24px !important; column-gap: 10px !important; min-height: 60px !important; padding: 8px 12px !important; border-radius: 10px !important; } body.vf-preferences-open .vf-preferences-option__visual, #vf-preferences-modal .vf-preferences-option__visual { width: 34px !important; height: 30px !important; } body.vf-preferences-open .vf-preferences-option__flag, #vf-preferences-modal .vf-preferences-option__flag { width: 30px !important; height: 20px !important; } body.vf-preferences-open .vf-preferences-option__copy, #vf-preferences-modal .vf-preferences-option__copy { gap: 1px !important; } body.vf-preferences-open .vf-preferences-option__copy strong, #vf-preferences-modal .vf-preferences-option__copy strong { font-size: 15px !important; line-height: 20px !important; font-weight: 600 !important; } body.vf-preferences-open .vf-preferences-option__copy small, #vf-preferences-modal .vf-preferences-option__copy small { font-size: 12px !important; line-height: 16px !important; } } @media (max-width: 390px) { body.vf-preferences-open .vf-preferences-modal__tabs, #vf-preferences-modal .vf-preferences-modal__tabs { gap: 16px !important; } body.vf-preferences-open .vf-preferences-modal__tab, #vf-preferences-modal .vf-preferences-modal__tab { font-size: 14px !important; } } /* ========================================================= PRODUCT PAGE SPACING REPAIR — 2026-09-16 Scoped to the affected templates. Footer, newsletter, header, and shared banner layouts are intentionally untouched. ========================================================= */ body.page-template-template-airport-transfer section.main-banner.flights-banner { height: auto !important; min-height: 0 !important; } body.page-template-template-airport-transfer .search-flights.airporttransfer { margin-top: 0 !important; } @media (min-width: 992px) { body.page-template-template-hotels section.main-banner.flights-banner.hotels .row > .col-lg-8 { display: flex; align-items: center; } body.page-template-template-hotels section.main-banner.flights-banner.hotels .banner-content.hotels-titles { width: 100%; padding-top: 0 !important; } } @media (min-width: 768px) { body.page-template-template-hotels section.benefits-section.inner-benefits.new-inf-section { padding-top: 80px !important; } }