/* ========================================================== Boddor GWS Checkout — Language Switch (Google Translate) - Scoped to our UltraWhite checkout page - Minimal, non-invasive UI ========================================================== */ /* Anti-flicker: hide checkout wrapper briefly while translation is being applied */ html.bgccou-gt-pending .bgccou-wrap{ visibility:hidden; } html.bgccou-gt-ready .bgccou-wrap{ visibility:visible; } .blc-checkout .bgccou-lang-row{ display:flex; justify-content:flex-end; margin: 6px 0 12px; } .blc-checkout .bgccou-lang-wrap{ position:relative; width: min(320px, 100%); } .blc-checkout .bgccou-lang-btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 10px 12px; border: 1px solid var(--bgccou-card-border, #e5e7eb); border-radius: 12px; background:#fff; cursor:pointer; font: inherit; } .blc-checkout .bgccou-lang-left{ display:flex; align-items:center; gap:10px; } .blc-checkout .bgccou-lang-ico{ width: 16px; height: 16px; display:inline-flex; align-items:center; justify-content:center; border-radius: 6px; border: 1px solid var(--bgccou-card-border, #e5e7eb); background: #f9fafb; flex: 0 0 auto; } /* Flag Icons (https://flagicons.lipis.dev/) */ .blc-checkout .bgccou-lang-flag, .blc-checkout .bgccou-lang-item-flag{ width: 16px; height: 12px; display: inline-block; border-radius: 4px; overflow: hidden; flex: 0 0 auto; } .blc-checkout .bgccou-lang-item-left{ display:flex; align-items:center; gap:10px; } .blc-checkout .bgccou-lang-label{ font-weight: 700; } .blc-checkout .bgccou-lang-sub{ font-size: 12px; color: #6b7280; line-height: 1.1; } .blc-checkout .bgccou-lang-chevron{ width: 16px; height: 16px; opacity: .65; flex: 0 0 auto; } .blc-checkout .bgccou-lang-menu{ position:absolute; right:0; left:0; top: calc(100% + 8px); z-index: 9999; border: 1px solid var(--bgccou-card-border, #e5e7eb); border-radius: 14px; background:#fff; overflow:hidden; max-height: 320px; overflow-y:auto; display:none; } .blc-checkout .bgccou-lang-menu.is-open{ display:block; } .blc-checkout .bgccou-lang-item{ width:100%; text-align:left; padding: 10px 12px; background: transparent; border: 0; cursor:pointer; font: inherit; display:flex; align-items:center; justify-content:space-between; gap:12px; } .blc-checkout .bgccou-lang-item:hover{ background: #f9fafb; } .blc-checkout .bgccou-lang-item .bgccou-lang-code{ font-size: 12px; color: #6b7280; } /* Hide Google UI */ .goog-te-banner-frame, .goog-te-balloon-frame { display:none !important; } #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover { display:none !important; } body { top: 0 !important; } /* ========================================================== RTL Support (Arabic / Hebrew) - Applied when body has .bgccou-rtl (set by lang-switch.js) - Keeps phone/email/payment fields LTR for usability ========================================================== */ /* NOTE: On UltraWhite checkout, the class `blc-checkout` is applied on (via body_class filter). Therefore we target body.blc-checkout, not a descendant element named .blc-checkout. */ body.bgccou-rtl.blc-checkout{ direction: rtl; unicode-bidi: plaintext; } body.bgccou-rtl.blc-checkout h1, body.bgccou-rtl.blc-checkout h2, body.bgccou-rtl.blc-checkout h3, body.bgccou-rtl.blc-checkout p, body.bgccou-rtl.blc-checkout label, body.bgccou-rtl.blc-checkout .woocommerce-checkout-review-order-table, body.bgccou-rtl.blc-checkout .shop_table, body.bgccou-rtl.blc-checkout .woocommerce-error, body.bgccou-rtl.blc-checkout .woocommerce-message, body.bgccou-rtl.blc-checkout .woocommerce-info{ text-align: right; } body.bgccou-rtl.blc-checkout input[type="text"], body.bgccou-rtl.blc-checkout input[type="email"], body.bgccou-rtl.blc-checkout input[type="tel"], body.bgccou-rtl.blc-checkout input[type="number"], body.bgccou-rtl.blc-checkout input[type="search"], body.bgccou-rtl.blc-checkout input[type="password"], body.bgccou-rtl.blc-checkout textarea, body.bgccou-rtl.blc-checkout select, body.bgccou-rtl.blc-checkout .select2-container .select2-selection{ direction: rtl; text-align: right; } /* Keep code-like fields LTR */ body.bgccou-rtl.blc-checkout #billing_email, body.bgccou-rtl.blc-checkout #billing_phone, body.bgccou-rtl.blc-checkout input[name="billing_email"], body.bgccou-rtl.blc-checkout input[name="billing_phone"], body.bgccou-rtl.blc-checkout .bgccou-phone-input, body.bgccou-rtl.blc-checkout .bgccou-phone-input input, body.bgccou-rtl.blc-checkout .wc-stripe-elements-field, body.bgccou-rtl.blc-checkout iframe{ direction: ltr !important; text-align: left !important; } /* Language menu in RTL */ body.bgccou-rtl.blc-checkout .bgccou-lang-row{ justify-content: flex-start; } body.bgccou-rtl.blc-checkout .bgccou-lang-btn{ text-align: right; } body.bgccou-rtl.blc-checkout .bgccou-lang-item{ text-align: right; flex-direction: row-reverse; } /* ========================================================== RTL Fixes — WooCommerce widgets (billing_country / billing_phone) - Select2 dropdown is appended to (not inside .blc-checkout) - intl-tel-input needs LTR input, but RTL country list ========================================================== */ /* Select2: direction + arrow alignment */ body.bgccou-rtl .select2-container--open .select2-dropdown, body.bgccou-rtl .select2-container--open .select2-results, body.bgccou-rtl .select2-container--open .select2-results__options{ direction: rtl !important; text-align: right !important; } body.bgccou-rtl .select2-container--default .select2-selection--single .select2-selection__rendered{ direction: rtl !important; text-align: right !important; padding-right: 12px !important; padding-left: 34px !important; /* room for arrow */ } body.bgccou-rtl .select2-container--default .select2-selection--single .select2-selection__arrow{ right: auto !important; left: 12px !important; } /* intl-tel-input: keep phone input LTR; allow country list to be RTL */ body.bgccou-rtl .iti{ direction: ltr !important; } body.bgccou-rtl .iti input#billing_phone{ direction: ltr !important; text-align: left !important; } body.bgccou-rtl .iti__country-list, body.bgccou-rtl .iti__country, body.bgccou-rtl .iti__search-input{ direction: rtl !important; text-align: right !important; } body.bgccou-rtl .iti__dial-code{ direction: ltr !important; unicode-bidi: isolate; } /* ========================================================== Anti-style-shift: Keep UltraWhite colors after translation - Google/GTranslate may wrap text with / highlights - Prevent unexpected color/background changes inside checkout ========================================================== */ .blc-checkout font, .blc-checkout font *{ color: inherit !important; background: inherit !important; } .blc-checkout .goog-text-highlight, .blc-checkout .goog-text-highlight *{ color: inherit !important; background: inherit !important; box-shadow: none !important; } .blc-checkout span[style*="vertical-align"], .blc-checkout span[style*="vertical-align"] *{ color: inherit !important; background: inherit !important; } /* ========================================================== Arabic Font (IBM Plex Sans Arabic) - Applied only when Arabic is selected in our switcher ========================================================== */ body.bgccou-lang-ar.blc-checkout{ font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; } body.bgccou-lang-ar.blc-checkout input, body.bgccou-lang-ar.blc-checkout textarea, body.bgccou-lang-ar.blc-checkout select, body.bgccou-lang-ar.blc-checkout button{ font-family: inherit !important; } /* Select2 dropdown (appended to ) */ body.bgccou-lang-ar .select2-container, body.bgccou-lang-ar .select2-dropdown, body.bgccou-lang-ar .select2-results, body.bgccou-lang-ar .select2-results__options, body.bgccou-lang-ar .select2-search__field{ font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; } /* intl-tel-input dropdown list */ body.bgccou-lang-ar .iti__country-list, body.bgccou-lang-ar .iti__search-input{ font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; } /* ========================================================== Language Switch — Secure Badge Style + Flags ========================================================== */ /* When switcher is inside the brand row, space items nicely */ .blc-checkout .blc-brand-row--has-lang{ justify-content: space-between !important; gap: 10px; } .blc-checkout .bgccou-lang-row{ display:flex; align-items:center; justify-content:flex-end; margin: 0 !important; position: relative; } /* Make the toggle look like the Secure checkout badge */ .blc-checkout .bgccou-lang-wrap{ width: auto !important; min-width: 160px; } .blc-checkout .bgccou-lang-btn{ width:auto !important; padding: 3px 8px !important; border-radius: 999px !important; background: rgba(22,163,74,.08) !important; color: #166534 !important; border: 1px solid rgba(22,163,74,.60) !important; gap: 8px !important; } .blc-checkout .bgccou-lang-ico{ width:auto !important; height:auto !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; } .blc-checkout .bgccou-lang-flag{ font-size: 14px; line-height: 1; } .blc-checkout .bgccou-lang-sub{ display:none !important; } .blc-checkout .bgccou-lang-label{ font-weight: 700; } .blc-checkout .bgccou-lang-chevron{ opacity:.8; } /* Menu items with flags */ .blc-checkout .bgccou-lang-item{ display:flex; align-items:center; justify-content:flex-start; gap:10px; } .blc-checkout .bgccou-lang-item-left{ display:inline-flex; align-items:center; gap:10px; } .blc-checkout .bgccou-lang-item-flag{ width: 20px; text-align:center; } /* ========================================================== UltraWhite — Language switch matches "Secure checkout" badge - No blue/link styling, compact pill - Sits under Secure checkout badge ========================================================== */ .blc-checkout .bgccou-lang-row{ justify-content:flex-start; margin: 8px 0 0; } .blc-checkout .bgccou-lang-wrap{ width: auto; min-width: 0; } .blc-checkout .bgccou-lang-btn{ width:auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: rgba(22,163,74,.08); color: #166534; border: 1px solid rgba(22,163,74,.60); } .blc-checkout .bgccou-lang-btn:hover{ background: rgba(22,163,74,.12); } .blc-checkout .bgccou-lang-ico{ width:auto; height:auto; border: 0; background: transparent; border-radius: 0; font-size: 14px; line-height: 1; padding: 0; } .blc-checkout .bgccou-lang-label{ font-weight: 700; font-size: 12px; } .blc-checkout .bgccou-lang-sub{ display:none; /* keep badge compact */ } .blc-checkout .bgccou-lang-chevron{ width: 16px; height: 16px; } .blc-checkout .bgccou-lang-menu{ top: calc(100% + 10px); border-radius: 14px; min-width: 240px; width: max-content; } .blc-checkout .bgccou-lang-item{ font-size: 13px; } /* ========================================================== UltraWhite — Language switch (Translate icon) - Blue pill style (matches Google blue) - Centered under Secure checkout - RTL-friendly ========================================================== */ .blc-checkout .bgccou-lang-row{ justify-content: center !important; margin: 10px 0 0 !important; } .blc-checkout .bgccou-lang-wrap{ width: auto !important; } .blc-checkout .bgccou-lang-btn{ width: auto !important; padding: 3px 8px !important; border-radius: 999px !important; font-size: 11px !important; border: 1px solid rgb(25, 103, 210) !important; color: rgb(25, 103, 210) !important; background-color: rgba(25, 103, 210, 0.15) !important; /* 15% */ } .blc-checkout .bgccou-lang-btn:hover{ background-color: rgba(25, 103, 210, 0.22) !important; } .blc-checkout .bgccou-lang-ico{ width: auto !important; height: auto !important; border: 0 !important; background: transparent !important; padding: 0 !important; } .blc-checkout .bgccou-lang-svg{ display:inline-block; width: 16px; height: 16px; fill: rgb(25, 103, 210); } .blc-checkout .bgccou-lang-label{ font-weight: 700 !important; font-size: 11px !important; color: rgb(25, 103, 210) !important; } .blc-checkout .bgccou-lang-sub{ display:none !important; } .blc-checkout .bgccou-lang-chevron{ width: 14px !important; height: 14px !important; } .blc-checkout .bgccou-lang-chevron path{ stroke: rgb(25, 103, 210) !important; } /* Dropdown alignment */ .blc-checkout .bgccou-lang-menu{ left: 50% !important; right: auto !important; transform: translateX(-50%); min-width: 240px; } /* RTL: keep button content natural, dropdown centered */ .blc-checkout[dir="rtl"] .bgccou-lang-left, body[dir="rtl"].blc-checkout .bgccou-lang-left{ flex-direction: row-reverse; } .blc-checkout[dir="rtl"] .bgccou-lang-code, body[dir="rtl"].blc-checkout .bgccou-lang-code{ direction: ltr; } .blc-checkout .bgccou-lang-item.is-active { background-color: rgba(25, 103, 210, 0.15) !important; }