/* Beauty Oasis — international phone, country picker and licence upload. Server-rendered controls; the script only adds behaviour (see bo-intl.js). Loaded on every front-end page (the login/register popup lives in the footer). Flag glyphs: Twemoji (CC-BY 4.0, https://twemoji.twitter.com) via the country-flag-emoji-polyfill subset — used only where the platform has no flag emoji of its own (Windows), gated by html.bo-noflag. */ @font-face{ font-family:"Twemoji Country Flags"; src:url("TwemojiCountryFlags.woff2") format("woff2"); unicode-range:U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; font-display:block; } html.bo-noflag .bo-pick__flag, html.bo-noflag .bo-pick__opt-flag, html.bo-noflag .bo-pick__native{ font-family:"Twemoji Country Flags", var(--bo-font, "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif); } /* ---------- progressive enhancement gate ---------- */ /* Before the script runs (or without it) the native controls stand in; the enhanced button and popover are hidden from the first paint, never shown then swapped. */ /* ".is-native" is the same gate per control: the script marks a control it could not enhance and that one keeps its native select or file input. */ html:not(.bo-js) .bo-pick__button, html:not(.bo-js) .bo-pick__pop, .bo-pick.is-native .bo-pick__button, .bo-pick.is-native .bo-pick__pop{ display:none !important; } html.bo-js .bo-pick:not(.is-native) > select.bo-pick__native, html.bo-js .bo-form .bo-pick:not(.is-native) > select.bo-pick__native, html.bo-js .xoo-el-form-container .bo-pick:not(.is-native) > select.bo-pick__native, html.bo-js .woocommerce form .bo-pick:not(.is-native) > select.bo-pick__native{ position:absolute !important; inset:0 auto auto 0 !important; width:1px !important; height:1px !important; min-height:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; border:0 !important; opacity:0 !important; pointer-events:none !important; overflow:hidden !important; clip:rect(0 0 0 0) !important; clip-path:inset(50%) !important; white-space:nowrap; } html:not(.bo-js) .bo-pick > select.bo-pick__native, .bo-pick.is-native > select.bo-pick__native{ width:100%; } /* The native dial select would size itself to its longest option name; the wrapper caps it (the form's own select rule forces max-width:none). */ html:not(.bo-js) .bo-phone .bo-pick--dial, .bo-phone .bo-pick--dial.is-native{ flex:0 1 200px; width:200px; max-width:45%; min-width:0; } /* narrow screens: the number keeps more than half */ /* ---------- picker button (dial code + country) ---------- */ /* Selectors carry the element name on purpose: Woodmart styles every button/.button/[type=button] at (0,1,0), so ours must sit at (0,2,1) whatever the stylesheet order. Its keyboard-focus outline is different: `:is(a,button,…):focus-visible{ outline:… !important }` at (0,2,1), so the focus rules below carry `html` (0,2,2) and `!important` of their own. */ .bo-pick{ position:relative; display:block; min-width:0; } .bo-pick button.bo-pick__button{ display:inline-flex; align-items:center; justify-content:flex-start; gap:8px; box-sizing:border-box; width:100%; height:46px; min-height:44px; margin:0; padding:0 10px 0 12px; border:1px solid var(--bo-field, #C9D0DC); border-radius:8px; background:#fff; color:var(--bo-ink, #333); font-family:var(--bo-font, "Sora", sans-serif); font-size:14px; font-weight:400; line-height:1.2; text-align:left; cursor:pointer; box-shadow:none; transition:border-color .15s ease, box-shadow .15s ease; -webkit-appearance:none; appearance:none; text-transform:none; letter-spacing:0; } .bo-pick button.bo-pick__button:hover{ border-color:#AEB8C9; background:#fff; color:var(--bo-ink, #333); box-shadow:none; } .bo-pick button.bo-pick__button:focus{ outline:none; } html .bo-pick button.bo-pick__button:focus-visible, html .bo-pick button.bo-pick__button[aria-expanded="true"]{ border-color:var(--bo-action, #1C61E7); background:#fff; color:var(--bo-ink, #333); box-shadow:0 0 0 3px rgba(28,97,231,.16); outline:none !important; } .bo-pick button.bo-pick__button.is-placeholder .bo-pick__value{ color:var(--bo-muted, #5C6675); } .bo-pick button.bo-pick__button.is-placeholder .bo-pick__flag:empty{ display:none; } .bo-pick__flag{ flex:0 0 auto; font-size:20px; line-height:24px; width:24px; height:24px; overflow:hidden; text-align:center; font-family:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } .bo-pick__value{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; } .bo-pick__chev{ flex:0 0 auto; display:inline-flex; color:var(--bo-muted, #5C6675); transition:transform .15s ease; } .bo-pick button.bo-pick__button[aria-expanded="true"] .bo-pick__chev{ transform:rotate(180deg); } .bo-pick.bo-pick--dial button.bo-pick__button{ width:auto; min-width:104px; padding:0 8px 0 12px; } .bo-pick--dial .bo-pick__value{ flex:0 0 auto; } /* invalid state, both WooCommerce's and ours */ .woocommerce-invalid .bo-pick button.bo-pick__button, .bo-pick.is-invalid button.bo-pick__button, .bo-pick button.bo-pick__button[aria-invalid="true"], .woocommerce-invalid .bo-phone input.bo-phone__num, .bo-phone.is-invalid input.bo-phone__num, .bo-form .form-row.woocommerce-invalid .bo-phone input.bo-phone__num{ border-color:var(--bo-bad, #B50808); } .bo-phone.is-invalid input.bo-phone__num:focus, .woocommerce-invalid .bo-phone input.bo-phone__num:focus{ box-shadow:0 0 0 3px rgba(181,8,8,.14); } .woocommerce-validated .bo-pick button.bo-pick__button, .woocommerce-validated .bo-phone input.bo-phone__num{ border-color:var(--bo-field, #C9D0DC); } /* ---------- popover ---------- */ .bo-pick__pop{ position:fixed; left:0; top:0; z-index:1000000001; box-sizing:border-box; display:flex; flex-direction:column; width:320px; max-width:calc(100vw - 16px); max-height:min(380px, calc(100vh - 16px)); background:#fff; border:1px solid var(--bo-line, #E3E7EF); border-radius:8px; box-shadow:0 12px 32px rgba(14,18,42,.16), 0 2px 6px rgba(14,18,42,.08); font-family:var(--bo-font, "Sora", sans-serif); color:var(--bo-ink, #333); text-align:left; line-height:1.3; text-transform:none; letter-spacing:0; touch-action:none; } .bo-pick__pop[hidden]{ display:none !important; } .bo-pick__pop.is-up{ box-shadow:0 -8px 28px rgba(14,18,42,.14), 0 -1px 4px rgba(14,18,42,.08); } /* The popover already draws an edge; a bordered field inside it drew a second one round the same corner. The search is a band across the top of the card, parted from the list by one hairline. */ .bo-pick__search{ position:relative; display:flex; align-items:center; gap:6px; padding:0; border-bottom:1px solid var(--bo-line, #E3E7EF); } /* the storefront's own form CSS gives every input position:relative;z-index:2, so the mark that sits inside the field has to be raised above it */ .bo-pick__search-icon{ position:absolute; z-index:3; left:13px; top:50%; transform:translateY(-50%); display:inline-flex; color:var(--bo-muted, #5C6675); pointer-events:none; } .bo-pick__pop input.bo-pick__input, .bo-form .bo-pick__pop input.bo-pick__input, .xoo-el-form-container .xoo-aff-input-group .bo-pick__pop input.bo-pick__input, .woocommerce form .form-row .bo-pick__pop input.bo-pick__input{ flex:1 1 auto; box-sizing:border-box; width:100% !important; max-width:none !important; height:44px !important; min-height:0 !important; margin:0 !important; padding:0 12px 0 38px !important; border:0 !important; border-radius:8px 8px 0 0 !important; background:#fff !important; font-family:var(--bo-font, "Sora", sans-serif) !important; font-size:14px !important; color:var(--bo-ink, #333) !important; box-shadow:none !important; outline:none !important; -webkit-appearance:none; appearance:none; } .bo-pick__pop input.bo-pick__input::placeholder{ color:var(--bo-muted, #5C6675); opacity:1; } /* the indicator stays inside the card: a ring here would paint over its edge */ .bo-pick__pop input.bo-pick__input:focus, .bo-pick__pop input.bo-pick__input:focus-visible{ border:0 !important; background:var(--bo-ground, #F6F6F6) !important; box-shadow:inset 0 -2px 0 0 var(--bo-action, #1C61E7) !important; } .bo-pick__pop button.bo-pick__close{ display:none; flex:0 0 auto; width:44px; height:44px; min-width:44px; min-height:44px; align-items:center; justify-content:center; gap:0; margin:0; padding:0; border:0; border-radius:8px; background:transparent; color:var(--bo-ink2, #595959); cursor:pointer; font-family:var(--bo-font, "Sora", sans-serif); font-size:14px; font-weight:400; line-height:1; text-transform:none; letter-spacing:0; -webkit-appearance:none; appearance:none; box-shadow:none; transition:background .15s ease, color .15s ease; } .bo-pick__pop button.bo-pick__close:hover{ background:var(--bo-ground, #F6F6F6); color:var(--bo-ink, #333); box-shadow:none; } html .bo-pick__pop button.bo-pick__close:focus-visible{ outline:2px solid var(--bo-royal, #212AA9) !important; outline-offset:2px !important; box-shadow:none; } /* The live region that reports "No match" is text for assistive tech only. */ .bo-pick__status{ position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } .bo-pick__list{ position:relative; display:flex; flex-direction:column; flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:4px; outline:none; scroll-padding:4px; touch-action:pan-y; } .bo-pick__group{ display:block; flex:0 0 auto; padding:10px 12px 4px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--bo-muted, #5C6675); } .bo-pick__group[hidden]{ display:none; } .bo-pick__opt{ display:flex; flex:0 0 auto; align-items:center; gap:10px; box-sizing:border-box; min-height:44px; padding:6px 12px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--bo-ink, #333); scroll-margin:4px; } .bo-pick__opt[hidden]{ display:none; } .bo-pick__opt:hover{ background:var(--bo-ground, #F6F6F6); } /* Keyboard focus lives on the search box; the active row shows a ring instead. */ .bo-pick__opt.is-active{ background:var(--bo-ground, #F6F6F6); outline:2px solid var(--bo-action, #1C61E7); outline-offset:-2px; } .bo-pick__opt[aria-selected="true"]{ font-weight:600; color:var(--bo-royal, #212AA9); background:var(--bo-soft, #E1EBFF); } .bo-pick__opt[aria-selected="true"].is-active{ background:#D2E1FF; } /* A list that is not countries carries one mark, painted as a mask so it takes the row's own colour — the flag slot, filled differently. */ .bo-pick__mark{ flex:0 0 auto; width:20px; height:20px; background:var(--bo-muted, #5C6675); -webkit-mask:var(--bo-pick-ico) center/20px 20px no-repeat; mask:var(--bo-pick-ico) center/20px 20px no-repeat; } .bo-pick__opt[aria-selected="true"] .bo-pick__mark, .bo-pick__opt.is-active .bo-pick__mark{ background:var(--bo-royal, #212AA9); } .bo-pick__button .bo-pick__mark{ margin-inline-end:2px; } .bo-pick__opt-flag{ flex:0 0 auto; width:24px; text-align:center; font-size:20px; line-height:1; font-family:"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; } .bo-pick__opt-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .bo-pick__opt-code{ flex:0 0 auto; color:var(--bo-muted, #5C6675); font-variant-numeric:tabular-nums; font-size:13px; } .bo-pick__opt[aria-selected="true"] .bo-pick__opt-code{ color:inherit; } .bo-pick__empty{ display:block; padding:16px 14px; font-size:13px; color:var(--bo-muted, #5C6675); line-height:1.5; } .bo-pick__empty[hidden]{ display:none; } /* Phones: the popover becomes a bottom sheet with a real close control. */ @media (max-width:640px){ .bo-pick__pop{ top:auto !important; left:0 !important; right:0 !important; bottom:0; width:auto; max-width:none; max-height:min(72vh, 520px); border-radius:12px 12px 0 0; border-bottom:0; padding-bottom:env(safe-area-inset-bottom, 0); box-shadow:0 -12px 40px rgba(14,18,42,.22); } .bo-pick__pop.is-up{ box-shadow:0 -12px 40px rgba(14,18,42,.22); } .bo-pick__pop button.bo-pick__close{ display:inline-flex; } .bo-pick__search{ padding:0 8px 0 0; } .bo-pick__pop input.bo-pick__input, .bo-form .bo-pick__pop input.bo-pick__input, .xoo-el-form-container .xoo-aff-input-group .bo-pick__pop input.bo-pick__input, .woocommerce form .form-row .bo-pick__pop input.bo-pick__input{ font-size:16px !important; height:44px !important; } .bo-pick__search-icon{ left:13px; } .bo-pick__opt{ min-height:48px; } } .bo-pick__backdrop{ display:none; position:fixed; inset:0; z-index:1000000000; background:rgba(14,18,42,.35); touch-action:none; } @media (max-width:640px){ .bo-pick__backdrop:not([hidden]){ display:block; } } /* ---------- phone ---------- */ .bo-phone{ position:relative; display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; width:100%; min-width:0; box-sizing:border-box; } .bo-phone .bo-pick--dial{ flex:0 0 auto; } .bo-phone input.bo-phone__num, .bo-form .bo-phone input[data-bo-num].bo-phone__num, .xoo-el-form-container .xoo-aff-input-group .bo-phone input[data-bo-num].bo-phone__num, .bo-reg-section__fields .bo-phone input[data-bo-num].bo-phone__num, .woocommerce form .form-row .bo-phone input[data-bo-num].bo-phone__num{ flex:1 1 0; min-width:0; width:auto !important; max-width:none !important; box-sizing:border-box; height:46px; margin:0; font-variant-numeric:tabular-nums; direction:ltr; text-align:left; } .bo-form__xoo .bo-phone input.bo-phone__num.xoo-aff-field::placeholder, .bo-phone input.bo-phone__num::placeholder{ color:var(--bo-muted, #5C6675); opacity:1; } /* The hint is always in the tree (a live region must exist before it speaks); while empty it is clipped away rather than removed. */ .bo-phone__hint{ display:block; flex:0 0 100%; width:100%; margin:-2px 0 0; font-size:12px; line-height:1.5; color:var(--bo-muted, #5C6675); font-family:var(--bo-font, "Sora", sans-serif); } .bo-phone__hint.is-warn{ color:#7A5A17; } .bo-phone__hint.is-bad{ color:var(--bo-bad, #B50808); } .bo-phone__hint.is-ok{ color:var(--bo-ok, #3D7A35); } .bo-phone__hint:empty, .bo-upload__hint:empty, .bo-upload__sr{ position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } /* ---------- licence upload ---------- */ .bo-upload{ position:relative; display:block; width:100%; box-sizing:border-box; font-family:var(--bo-font, "Sora", sans-serif); } .bo-upload__files, .bo-upload__queue{ display:block; } .bo-upload__file, .bo-upload__q{ display:flex; align-items:center; gap:10px; box-sizing:border-box; min-height:52px; padding:6px 6px 6px 12px; margin:0 0 8px; border:1px solid var(--bo-line, #E3E7EF); border-radius:8px; background:#fff; } .bo-upload__q{ border-color:#C9DAFF; background:#F5F8FF; } .bo-upload__q.is-bad{ border-color:#F0B9B9; background:#FFF5F5; } .bo-upload__icon{ flex:0 0 auto; display:inline-flex; color:var(--bo-muted, #5C6675); } .bo-upload__meta{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } .bo-upload__name{ display:block; min-width:0; min-height:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:600; color:var(--bo-ink, #333); text-decoration:none; } a.bo-upload__name:hover{ color:var(--bo-action, #1C61E7); text-decoration:underline; } .bo-upload__sub{ display:block; font-size:12px; color:var(--bo-muted, #5C6675); } .bo-upload__q.is-bad .bo-upload__sub{ color:var(--bo-bad, #B50808); } /* (0,2,1) on purpose: `.bo-form label` / `.xoo-aff-group label` and Woodmart's button rule all sit at (0,1,x). */ .bo-upload label.bo-upload__remove, .bo-upload label.bo-upload__replace, .bo-upload button.bo-upload__q-remove{ position:relative; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:0; width:auto; min-width:44px; min-height:44px; margin:0; padding:0 10px; border:0; border-radius:8px; background:transparent; cursor:pointer; font-family:var(--bo-font, "Sora", sans-serif); font-size:13px; font-weight:600; line-height:1; color:var(--bo-ink2, #595959); text-decoration:none; text-transform:none; letter-spacing:0; -webkit-appearance:none; appearance:none; box-shadow:none; transition:background .15s ease, color .15s ease; } .bo-upload label.bo-upload__remove:hover, .bo-upload button.bo-upload__q-remove:hover{ background:var(--bo-ground, #F6F6F6); color:var(--bo-bad, #B50808); box-shadow:none; } .bo-upload label.bo-upload__replace:hover{ background:var(--bo-ground, #F6F6F6); color:var(--bo-action, #1C61E7); box-shadow:none; } html .bo-upload label.bo-upload__remove:focus-within, html .bo-upload label.bo-upload__replace:focus-within, html .bo-upload button.bo-upload__q-remove:focus-visible{ outline:2px solid var(--bo-royal, #212AA9) !important; outline-offset:2px !important; box-shadow:none; } /* Replace (staff only): the file input is the control, the label its face; without a script the input itself shows. A chosen replacement is named on a line under the file and the label turns into Undo. */ .bo-upload__replace input.bo-upload__replace-in[type="file"], .bo-upload[data-bo-upload] .bo-upload__replace input.bo-upload__replace-in[type="file"]{ position:absolute !important; left:0; top:0; width:1px !important; height:1px !important; min-height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; opacity:0 !important; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; box-shadow:none !important; } html:not(.bo-js) .bo-upload[data-bo-upload] .bo-upload__replace input.bo-upload__replace-in[type="file"], html .bo-upload.is-native[data-bo-upload] .bo-upload__replace input.bo-upload__replace-in[type="file"]{ position:static !important; width:auto !important; height:auto !important; opacity:1 !important; clip:auto; clip-path:none; margin:0 6px 0 0 !important; font-size:12px; } .bo-upload__swap{ display:block; font-size:12px; color:var(--bo-action, #1C61E7); } .bo-upload__swap[hidden]{ display:none; } .bo-upload__file.is-replacing .bo-upload__replace-text{ display:none; } .bo-upload__file.is-replacing .bo-upload__replace .bo-upload__undo-text{ display:inline; } .bo-upload .bo-upload__file.is-replacing label.bo-upload__replace{ color:var(--bo-action, #1C61E7); } .bo-upload .bo-upload__file.is-replacing label.bo-upload__replace:hover{ color:var(--bo-royal, #212AA9); } .bo-upload__remove input[type="checkbox"], .bo-form .bo-upload__remove input[type="checkbox"]{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; } html:not(.bo-js) .bo-upload__remove input[type="checkbox"], html .bo-upload.is-native .bo-upload__remove input[type="checkbox"]{ position:static; width:auto; height:auto; margin:0 6px 0 0; clip:auto; clip-path:none; } .bo-upload__undo-text{ display:none; } /* Marked for removal: muted colours rather than opacity, so the Undo control keeps its full contrast. */ .bo-upload__file.is-removed{ background:var(--bo-ground, #F6F6F6); } .bo-upload__file.is-removed .bo-upload__name, .bo-upload__file.is-removed .bo-upload__icon, .bo-upload__file.is-removed .bo-upload__sub{ color:var(--bo-muted, #5C6675); } .bo-upload__file.is-removed .bo-upload__name{ text-decoration:line-through; } .bo-upload__file.is-removed .bo-upload__remove .bo-upload__remove-text{ display:none; } /* Scoped to the Remove control: the admin row carries a second Undo text inside the Replace label, and only its own state may show it. */ .bo-upload__file.is-removed .bo-upload__remove .bo-upload__undo-text{ display:inline; } .bo-upload .bo-upload__file.is-removed label.bo-upload__remove{ color:var(--bo-action, #1C61E7); } .bo-upload .bo-upload__file.is-removed label.bo-upload__remove:hover{ color:var(--bo-royal, #212AA9); } /* The drop zone is a