/** * Egy4Gamers OTP — "Glass" form preset. * * Applied only when a form carries the .e4g-glass class, which the plugin * adds when the preset is selected, so nothing here can reach the rest of * the site. Colours come from the brand settings as custom properties that * the plugin prints inline; the values below are only fallbacks. * * Written with logical properties throughout so the Arabic (RTL) layout is * a mirror rather than a separate stylesheet. */ .e4g-otp-login-form.e4g-glass, #e4g-signup-container.e4g-glass, .e4g-otp-popup.e4g-glass .e4g-otp-popup-content { --e4g-g-brand: var(--e4g-brand, #E97510); --e4g-g-brand-hi: var(--e4g-brand-hi, #F79438); --e4g-g-ink: #fff; /* Body text at 78% on this card measures about 9:1 — comfortably past AA. The reference design sat near 3:1, which is hard work on a phone in daylight, and checkout is exactly where that matters. */ --e4g-g-ink-2: rgba(255, 255, 255, .78); --e4g-g-ink-3: rgba(255, 255, 255, .58); --e4g-g-line: rgba(255, 255, 255, .13); --e4g-g-field: rgba(255, 255, 255, .045); --e4g-g-radius: 22px; position: relative; box-sizing: border-box; padding: 38px 34px 30px; border: 1px solid var(--e4g-g-line); border-radius: var(--e4g-g-radius); /* Tinted dark rather than translucent white. The blur still does the frosting over a dark backdrop, but if there is no backdrop -- the setting is off, or a theme paints the page light -- the card stays dark enough for its white text instead of turning white on white. */ background: rgba(21, 27, 39, .62); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .10); color: var(--e4g-g-ink); } /* Older browsers, and anything that refuses the filter, get a solid card rather than a washed-out translucent one nobody can read. */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .e4g-otp-login-form.e4g-glass, #e4g-signup-container.e4g-glass, .e4g-otp-popup.e4g-glass .e4g-otp-popup-content { background: #1b2330; } } .e4g-otp-login-form.e4g-glass *, #e4g-signup-container.e4g-glass *, .e4g-otp-popup.e4g-glass .e4g-otp-popup-content * { box-sizing: border-box; } /* ---------------------------------------------------------------- panel -- Something for the glass to actually frost. Without it the card sits on the theme's white page and the effect disappears entirely. Drawn behind the card and bled outwards, so no theme markup is touched. */ .e4g-otp-login-form.e4g-glass.e4g-glass-panel::before, #e4g-signup-container.e4g-glass.e4g-glass-panel::before { content: ""; position: absolute; inset: -46px -40px; z-index: -1; border-radius: 34px; background: radial-gradient(120% 90% at 78% 8%, #2a3346 0%, transparent 60%), radial-gradient(90% 70% at 8% 96%, rgba(233, 117, 16, .30) 0%, transparent 62%), linear-gradient(160deg, #0d1118 0%, #151b27 50%, #0b0e14 100%); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .55); } /* Whole-page variant: the plugin adds this class to . */ body.e4g-glass-page { background: radial-gradient(1100px 620px at 78% 14%, #2a3346 0%, transparent 62%), radial-gradient(900px 540px at 12% 88%, rgba(233, 117, 16, .22) 0%, transparent 60%), linear-gradient(160deg, #0d1118 0%, #151b27 48%, #0b0e14 100%) fixed; } /* --------------------------------------------------------------- header -- */ .e4g-glass .e4g-login-branding, .e4g-glass #e4g-signup-branding, .e4g-otp-popup.e4g-glass .e4g-otp-box { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0 0 18px; padding: 0; border: 0; background: none; } .e4g-glass .e4g-logo img, .e4g-glass .Egy4Gamers-signup-logo { height: 52px; width: auto; max-width: 220px; filter: drop-shadow(0 6px 18px rgba(233, 117, 16, .35)); } .e4g-glass .e4g-login-title, .e4g-glass .e4g-signup-title, .e4g-otp-popup.e4g-glass .e4g-title { margin: 0; color: var(--e4g-g-ink); font-size: 25px; font-weight: 700; line-height: 1.25; letter-spacing: -.3px; text-align: center; } .e4g-glass .e4g-login-description, .e4g-glass .e4g-description, .e4g-otp-popup.e4g-glass .e4g-desc { margin: 6px 0 0; color: var(--e4g-g-ink-2); font-size: 14px; line-height: 1.6; text-align: center; } .e4g-otp-popup.e4g-glass .e4g-icon-wrapper { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(233, 117, 16, .14); border: 1px solid rgba(233, 117, 16, .30); color: var(--e4g-g-brand-hi); font-size: 28px; } /* ----------------------------------------------------------------- tabs -- */ .e4g-glass .e4g-tab-list { display: flex; gap: 5px; margin: 20px 0; padding: 5px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; background: rgba(255, 255, 255, .05); list-style: none; } .e4g-glass .e4g-tab-list .e4g-tab { flex: 1; margin: 0; padding: 9px 6px; border: 0; border-radius: 10px; background: none; color: var(--e4g-g-ink-2); font-size: 13.5px; text-align: center; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .e4g-glass .e4g-tab-list .e4g-tab:hover { background: rgba(255, 255, 255, .07); color: var(--e4g-g-ink); } .e4g-glass .e4g-tab-list .e4g-tab.active { background: linear-gradient(135deg, var(--e4g-g-brand-hi), var(--e4g-g-brand)); color: #fff; font-weight: 600; box-shadow: 0 6px 18px -6px rgba(233, 117, 16, .65); } /* --------------------------------------------------------------- fields -- */ .e4g-glass .e4g-form-group { margin-bottom: 16px; } .e4g-glass .e4g-form-group > label, .e4g-glass label { display: block; margin-bottom: 8px; color: var(--e4g-g-ink-2); font-size: 13px; font-weight: 600; } .e4g-glass .e4g-required { color: var(--e4g-g-brand-hi); } .e4g-glass input[type="text"], .e4g-glass input[type="tel"], .e4g-glass input[type="email"], .e4g-glass input[type="password"], .e4g-glass input[type="number"], .e4g-glass input[type="url"], .e4g-glass select, .e4g-glass textarea, .e4g-otp-popup.e4g-glass #e4g_otp_input { width: 100%; height: 50px; padding: 0 14px; border: 1px solid var(--e4g-g-line); border-radius: 13px; background: var(--e4g-g-field); color: var(--e4g-g-ink); font-size: 15px; font-family: inherit; line-height: normal; box-shadow: none; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease; } .e4g-glass textarea { height: auto; min-height: 96px; padding: 12px 14px; } .e4g-glass input::placeholder, .e4g-glass textarea::placeholder { color: rgba(255, 255, 255, .40); } .e4g-glass input:focus, .e4g-glass select:focus, .e4g-glass textarea:focus, .e4g-otp-popup.e4g-glass #e4g_otp_input:focus { outline: none; border-color: var(--e4g-g-brand); background: rgba(233, 117, 16, .07); box-shadow: 0 0 0 3px rgba(233, 117, 16, .22); } /* Keyboard users still get a visible ring even where a theme kills outlines. */ .e4g-glass a:focus-visible, .e4g-glass button:focus-visible, .e4g-glass .e4g-tab:focus-visible { outline: 2px solid var(--e4g-g-brand-hi); outline-offset: 2px; } /* The single code field that used to live here is hidden behind six boxes now; the boxes are styled with the dialog further down. */ /* The country selector the phone field sits in. */ .e4g-glass .iti { width: 100%; } .e4g-glass .iti__country-list { background: #1b2330; border: 1px solid var(--e4g-g-line); color: var(--e4g-g-ink); } .e4g-glass .iti__country.iti__highlight { background: rgba(255, 255, 255, .08); } .e4g-glass .iti__dial-code { color: var(--e4g-g-ink-3); } /* ------------------------------------------------------- password extras -- */ .e4g-glass .e4g-toggle-password { color: var(--e4g-g-ink-3); background: none; border: 0; } .e4g-glass .e4g-toggle-password:hover { color: var(--e4g-g-ink); } .e4g-glass #password-strength-bar, .e4g-glass .e4g-password-strength-bar { border-radius: 99px; background: rgba(255, 255, 255, .10); overflow: hidden; } .e4g-glass .e4g-password-strength-text, .e4g-glass #password-requirements, .e4g-glass .e4g-password-requirements .e4g-requirement { color: var(--e4g-g-ink-3); font-size: 12.5px; } /* -------------------------------------------------------------- buttons -- */ .e4g-glass .e4g-btn, .e4g-glass .e4g-submit-button, .e4g-otp-popup.e4g-glass .e4g-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 52px; padding: 0 18px; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--e4g-g-brand-hi), var(--e4g-g-brand)); color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; box-shadow: 0 10px 26px -8px rgba(233, 117, 16, .75); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .e4g-glass .e4g-btn:hover:not(:disabled), .e4g-glass .e4g-submit-button:hover:not(:disabled), .e4g-otp-popup.e4g-glass .e4g-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 16px 34px -8px rgba(233, 117, 16, .9); } .e4g-glass .e4g-btn:active:not(:disabled), .e4g-glass .e4g-submit-button:active:not(:disabled) { transform: translateY(0); } .e4g-glass .e4g-btn:disabled, .e4g-glass .e4g-submit-button:disabled, .e4g-otp-popup.e4g-glass .e4g-btn:disabled { background: rgba(255, 255, 255, .07); color: var(--e4g-g-ink-3); box-shadow: none; cursor: not-allowed; transform: none; } /* Secondary actions: resend, edit, "use email instead". The checkout popup's resend is no longer one of these -- it reads as a sentence under the confirm button -- so it is not listed here. */ .e4g-glass .e4g-resend-otp-btn:not(.e4g-otp-resend), .e4g-glass .e4g-edit-button { background: rgba(255, 255, 255, .06); border: 1px solid var(--e4g-g-line); color: var(--e4g-g-ink-2); font-weight: 600; box-shadow: none; } .e4g-glass .e4g-resend-otp-btn:not(.e4g-otp-resend):hover:not(:disabled), .e4g-glass .e4g-edit-button:hover:not(:disabled) { background: rgba(255, 255, 255, .10); color: var(--e4g-g-ink); filter: none; } .e4g-glass .e4g-btn-group, .e4g-otp-popup.e4g-glass .e4g-btn-group { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } /* ------------------------------------------------------- notes and links -- */ .e4g-glass a { color: var(--e4g-g-brand-hi); font-weight: 600; text-decoration: none; } .e4g-glass a:hover { text-decoration: underline; } .e4g-glass .e4g-otp-resend, .e4g-glass p { color: var(--e4g-g-ink-2); } .e4g-glass .e4g-error-message { color: #ffb4a8; font-size: 12.5px; } .e4g-glass .e4g-message, .e4g-glass .e4g-popup-message p, .e4g-otp-popup.e4g-glass .e4g-popup-message p { margin: 0 0 14px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; text-align: center; } .e4g-glass .e4g-popup-message p.error, .e4g-glass p.error { border: 1px solid rgba(255, 120, 100, .35); background: rgba(255, 90, 70, .14); color: #ffd0c8; } .e4g-glass .e4g-popup-message p.success, .e4g-glass p.success { border: 1px solid rgba(110, 231, 160, .32); background: rgba(60, 200, 130, .14); color: #c9f7de; } /* --------------------------------------------------------- popup chrome -- */ .e4g-otp-popup.e4g-glass { background: rgba(8, 10, 16, .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .e4g-otp-popup.e4g-glass .e4g-otp-popup-content { width: min(430px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; } .e4g-otp-popup.e4g-glass .e4g-otp-popup-close { position: absolute; inset-block-start: 14px; inset-inline-end: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: rgba(255, 255, 255, .06); color: var(--e4g-g-ink-2); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .18s ease, color .18s ease; } .e4g-otp-popup.e4g-glass .e4g-otp-popup-close:hover { background: rgba(255, 255, 255, .12); color: var(--e4g-g-ink); } /* ----------------------------------------------------------- appearance -- */ /* Tell the browser these are dark surfaces so its own widgets (scrollbars, autofill, date pickers) match instead of flashing white. */ .e4g-otp-login-form.e4g-glass, #e4g-signup-container.e4g-glass, .e4g-otp-popup.e4g-glass .e4g-otp-popup-content { color-scheme: dark; } /* ------------------------------------------------------------- narrower -- */ @media (max-width: 480px) { .e4g-otp-login-form.e4g-glass, #e4g-signup-container.e4g-glass, .e4g-otp-popup.e4g-glass .e4g-otp-popup-content { padding: 28px 20px 24px; border-radius: 18px; } .e4g-otp-login-form.e4g-glass.e4g-glass-panel::before, #e4g-signup-container.e4g-glass.e4g-glass-panel::before { inset: -18px -14px; border-radius: 24px; } .e4g-glass .e4g-login-title, .e4g-glass .e4g-signup-title, .e4g-otp-popup.e4g-glass .e4g-title { font-size: 21px; } /* backdrop-filter is GPU work. On a small screen the card fills most of it, so there is little left to see through and plenty to pay for. */ .e4g-otp-login-form.e4g-glass, #e4g-signup-container.e4g-glass, .e4g-otp-popup.e4g-glass .e4g-otp-popup-content { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(22, 28, 40, .88); } } /* --------------------------------------------------------------- motion -- */ @media (prefers-reduced-motion: reduce) { .e4g-glass, .e4g-glass * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .e4g-glass .e4g-btn:hover:not(:disabled), .e4g-glass .e4g-submit-button:hover:not(:disabled) { transform: none; } } /* ------------------------------------------------- beating an id -------- The base stylesheets style some of these elements by id, which outranks any class selector here no matter how many are stacked. Matching the id is the proportionate answer; !important is not needed for these. */ /* Dark navy on a dark card, from checkout.css. */ .e4g-otp-popup.e4g-glass #user_phone_number { color: var(--e4g-g-ink); font-weight: 700; /* A phone number is a Latin run even in Arabic. */ direction: ltr; unicode-bidi: isolate; } /* The rules that beat #e4g_resend_otp_btn into a readable slab are gone with the slab: the checkout resend is a text link now, styled with the rest of the dialog further down. */ /* 52px by id, which overflows the 60px ring it now sits in. */ .e4g-otp-popup.e4g-glass #otp-icon { font-size: 28px; line-height: 1; color: var(--e4g-g-brand-hi); } /* ------------------------------------------------- beating !important -- The three base stylesheets set a few declarations with !important, so no amount of specificity here reaches them. Each one below is a case where leaving the base value would make the preset unreadable, not merely off-brand, and the override is limited to exactly those declarations. */ /* Resend sits on a dark card; the base paints it #141b38 on #f1f1f1, which on this card is dark navy text on dark glass. Set in e4g-otp-frontend.css and e4g-signup.css, which the login and signup forms still use. */ .e4g-glass .e4g-resend-otp-btn:not(.e4g-otp-resend) { color: var(--e4g-g-ink-2) !important; border: 1px solid var(--e4g-g-line) !important; } .e4g-glass .e4g-resend-otp-btn:not(.e4g-otp-resend):disabled { color: var(--e4g-g-ink-3) !important; } /* checkout.css gives any focused element inside a block theme a blue border, which lands on the code field and fights the focus ring. */ .e4g-otp-popup.e4g-glass :focus, .e4g-glass :focus { border-color: var(--e4g-g-brand) !important; } .e4g-otp-popup.e4g-glass :focus:not(input):not(select):not(textarea), .e4g-glass :focus:not(input):not(select):not(textarea) { border-color: transparent !important; } /* #ea0038 on this card is about 3.4:1 — under the threshold for body text. */ .e4g-glass .e4g-otp-error { color: #ffb4a8 !important; } /* The password field is shrunk to 11px by the base so dots line up; at this size on a dark card it is needlessly hard to read. */ .e4g-glass .e4g-password-container input[type="password"] { font-size: 15px !important; } /* ------------------------------------------------- beating the theme ---- The preset owns the fields inside its own card. Themes style inputs hard (Woodmart paints them solid white), and losing that fight leaves white text on a white box — the field becomes unusable rather than merely off-brand. Scoped to .e4g-glass, so no input outside these three forms is affected. */ .e4g-glass input[type="text"], .e4g-glass input[type="tel"], .e4g-glass input[type="email"], .e4g-glass input[type="password"], .e4g-glass input[type="number"], .e4g-glass input[type="url"], .e4g-glass select, .e4g-glass textarea, .e4g-otp-popup.e4g-glass #e4g_otp_input { background-color: rgba(255, 255, 255, .045) !important; background-image: none !important; color: var(--e4g-g-ink) !important; border-color: var(--e4g-g-line) !important; -webkit-text-fill-color: var(--e4g-g-ink); } .e4g-glass input:focus, .e4g-glass select:focus, .e4g-glass textarea:focus, .e4g-otp-popup.e4g-glass #e4g_otp_input:focus { background-color: rgba(233, 117, 16, .07) !important; border-color: var(--e4g-g-brand) !important; } /* Chrome paints an autofilled field with its own background and text colour and ignores both properties. A large inset shadow is the only way to cover it, and -webkit-text-fill-color the only way to recolour the text. */ .e4g-glass input:-webkit-autofill, .e4g-glass input:-webkit-autofill:hover, .e4g-glass input:-webkit-autofill:focus { -webkit-text-fill-color: var(--e4g-g-ink) !important; -webkit-box-shadow: inset 0 0 0 1000px #1e2633 !important; box-shadow: inset 0 0 0 1000px #1e2633 !important; caret-color: var(--e4g-g-ink); transition: background-color 9999s ease-out 0s; } /* The country selector sits inside the field, so it must not paint a light slab of its own over it. */ .e4g-glass .iti__flag-container, .e4g-glass .iti__selected-flag { background: transparent !important; } .e4g-glass .iti__selected-flag:hover, .e4g-glass .iti__selected-flag:focus { background: rgba(255, 255, 255, .06) !important; } .e4g-glass .iti__arrow { border-top-color: var(--e4g-g-ink-3); } .e4g-glass .iti__arrow--up { border-bottom-color: var(--e4g-g-ink-3); } .e4g-glass .iti__country-list { box-shadow: 0 20px 45px -15px rgba(0, 0, 0, .7); } .e4g-glass .iti__country { color: var(--e4g-g-ink-2); } .e4g-glass .iti__search { background: rgba(255, 255, 255, .06) !important; color: var(--e4g-g-ink) !important; border-color: var(--e4g-g-line) !important; } /* The validation line under the phone field, on a dark card. */ .e4g-glass .intl-tel-status.is-waiting { color: var(--e4g-g-ink-3); } .e4g-glass .intl-tel-status.is-valid { color: #6ee7a8; } .e4g-glass .intl-tel-status.is-invalid { color: #ffb4a8; } /* ------------------------------------------- the checkout code dialog -- */ /* * Laid out to the design the store supplied: the mark, the heading, one line * naming the number, six separate boxes for the code, a full-width confirm, * and the resend offered as a sentence rather than a second button competing * with the first. */ .e4g-otp-popup.e4g-glass .e4g-otp-popup-content { position: relative; /* checkout.css makes this a flex column and caps it at 400px; the dialog below is written as ordinary flow, so it says so here rather than fighting the column rules one property at a time. */ display: block; width: min(420px, calc(100vw - 32px)); max-width: min(420px, calc(100vw - 32px)); padding: 34px 32px 26px; overflow: visible; text-align: center; border-radius: 22px; } /* The confirm button is the one thing that does fill the card. */ .e4g-otp-popup.e4g-glass #e4g_verify_otp_btn { width: 100%; max-width: 100%; } .e4g-otp-popup.e4g-glass .e4g-otp-brand { margin: 0 0 18px; min-height: 0; } .e4g-otp-popup.e4g-glass .e4g-otp-brand:empty { display: none; } .e4g-otp-popup.e4g-glass .e4g-otp-brand img { width: auto; height: 64px; max-width: 70%; object-fit: contain; /* The mark is lit from behind rather than boxed, so a logo with its own transparent edges does not gain a visible rectangle. */ filter: drop-shadow(0 6px 22px rgba(233, 117, 16, .45)); } .e4g-otp-popup.e4g-glass .e4g-title { margin: 0 0 10px; font-size: 24px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; color: var(--e4g-g-ink); } .e4g-otp-popup.e4g-glass .e4g-desc { margin: 0 auto 22px; max-width: 30ch; font-size: 15px; line-height: 1.55; color: var(--e4g-g-ink-2); } /* The number is Latin digits in an Arabic sentence, so it is isolated from the surrounding direction rather than reordered by it. */ .e4g-otp-popup.e4g-glass .e4g-desc strong, .e4g-otp-popup.e4g-glass #user_phone_number { color: var(--e4g-g-ink); font-weight: 700; direction: ltr; unicode-bidi: isolate; } /* ------------------------------------------------------ the code boxes -- */ .e4g-otp-popup.e4g-glass .e4g-otp-digits { display: flex; justify-content: center; gap: 10px; margin: 0 0 22px; /* A code reads left to right in every language this form is shown in. */ direction: ltr; } .e4g-otp-popup.e4g-glass .e4g-otp-digit { /* checkout.css puts width:100% !important on every text input, which in a flex row squeezes six boxes into six slivers. They are fixed-size by nature, so they say so with the same force. */ flex: 1 1 0; min-width: 0; width: auto !important; max-width: 48px !important; height: 58px; padding: 0; font-size: 24px; font-weight: 700; text-align: center; color: var(--e4g-g-ink) !important; background-color: rgba(255, 255, 255, .06) !important; border: 1px solid var(--e4g-g-line) !important; border-radius: 14px; -webkit-text-fill-color: var(--e4g-g-ink); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .e4g-otp-popup.e4g-glass .e4g-otp-digit:focus { outline: none; border-color: var(--e4g-g-brand) !important; background-color: rgba(233, 117, 16, .10) !important; box-shadow: 0 0 0 3px rgba(233, 117, 16, .22); } /* A box that already holds a digit is marked, so progress through the code is visible without counting. The class is set by the script: :placeholder-shown needs a placeholder to be meaningful, and with none every empty box matched :not(:placeholder-shown) and lit up. */ .e4g-otp-popup.e4g-glass .e4g-otp-digit.is-filled { border-color: var(--e4g-g-brand) !important; background-color: rgba(233, 117, 16, .08) !important; } @media (max-width: 420px) { .e4g-otp-popup.e4g-glass .e4g-otp-popup-content { padding: 28px 18px 22px; } .e4g-otp-popup.e4g-glass .e4g-otp-digits { gap: 7px; } .e4g-otp-popup.e4g-glass .e4g-otp-digit { max-width: 44px !important; height: 52px; font-size: 21px; } .e4g-otp-popup.e4g-glass .e4g-title { font-size: 23px; } } /* ------------------------------------------------------- confirm/resend -- */ .e4g-otp-popup.e4g-glass .e4g-otp-confirm { display: block; width: 100%; margin: 0 0 16px; padding: 16px 20px; font-size: 16px; font-weight: 700; border: 0; border-radius: 14px; cursor: pointer; color: #fff; background: linear-gradient(180deg, var(--e4g-g-brand-hi), var(--e4g-g-brand)); box-shadow: 0 10px 30px rgba(233, 117, 16, .38); } .e4g-otp-popup.e4g-glass .e4g-otp-confirm:hover { filter: brightness(1.05); } .e4g-otp-popup.e4g-glass .e4g-otp-confirm:active { transform: translateY(1px); } .e4g-otp-popup.e4g-glass .e4g-otp-resend-line { display: flex; align-items: baseline; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: 14px; color: var(--e4g-g-ink-3); } /* The resend is a sentence, not a second button competing with the confirm. Addressed by id, because checkout.css paints #e4g_resend_otp_btn a light grey pill with !important on its colour and border: a class selector loses to that on specificity and the button came out as an empty outline with invisible text on the dark card. */ .e4g-otp-popup.e4g-glass #e4g_resend_otp_btn, .e4g-otp-popup.e4g-glass .e4g-otp-resend { display: inline; width: auto !important; min-width: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font: inherit; font-weight: 700; line-height: inherit; text-decoration: none; color: var(--e4g-g-brand-hi) !important; cursor: pointer; transition: color .15s ease; } /* Still brand-coloured while counting down: the wait is the message, and a greyed-out control says "broken" rather than "not yet". */ .e4g-otp-popup.e4g-glass #e4g_resend_otp_btn[disabled], .e4g-otp-popup.e4g-glass .e4g-otp-resend[disabled] { cursor: default; opacity: 1; color: var(--e4g-g-brand) !important; } .e4g-otp-popup.e4g-glass #e4g_resend_otp_btn:not([disabled]):hover, .e4g-otp-popup.e4g-glass .e4g-otp-resend:not([disabled]):hover { color: var(--e4g-g-brand-hi) !important; text-decoration: underline; } /* The countdown sits in its own span; it must not inherit a pill either. */ .e4g-otp-popup.e4g-glass #e4g_resend_timer { color: inherit; font: inherit; } .e4g-otp-popup.e4g-glass .e4g-otp-popup-close { position: absolute; top: 12px; inset-inline-end: 14px; width: 32px; height: 32px; padding: 0; font-size: 20px; line-height: 1; border: 0; border-radius: 50%; cursor: pointer; color: var(--e4g-g-ink-3); background: rgba(255, 255, 255, .07); } .e4g-otp-popup.e4g-glass .e4g-otp-popup-close:hover { color: var(--e4g-g-ink); } /* The message only takes space when there is something to say. */ .e4g-otp-popup.e4g-glass .e4g-popup-message:empty { display: none; } .e4g-otp-popup.e4g-glass .e4g-popup-message { margin: 0 0 16px; padding: 11px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; } /* ------------------------------------------- the code field, everywhere -- The boxes and the resend sentence are shared with the login and signup forms, so the preset paints them wherever they appear rather than only inside the checkout dialog. */ .e4g-glass .e4g-otp-digits .e4g-otp-digit { color: var(--e4g-g-ink) !important; background-color: rgba(255, 255, 255, .06) !important; border-color: var(--e4g-g-line) !important; -webkit-text-fill-color: var(--e4g-g-ink); } .e4g-glass .e4g-otp-digits .e4g-otp-digit:focus { border-color: var(--e4g-g-brand) !important; background-color: rgba(233, 117, 16, .10) !important; box-shadow: 0 0 0 3px rgba(233, 117, 16, .22); } .e4g-glass .e4g-otp-digits .e4g-otp-digit.is-filled { border-color: var(--e4g-g-brand) !important; background-color: rgba(233, 117, 16, .08) !important; box-shadow: inset 0 0 0 1px var(--e4g-g-brand); } .e4g-glass .e4g-otp-resend-line { color: var(--e4g-g-ink-3); } .e4g-glass .e4g-otp-resend-line .e4g-otp-resend { color: var(--e4g-g-brand-hi) !important; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: auto !important; } .e4g-glass .e4g-otp-resend-line .e4g-otp-resend[disabled] { color: var(--e4g-g-brand) !important; opacity: 1; }