/* ========================================================================== GWL My Account — Guest Auth Pages (Arabic RTL) Create Account, Sign In, Forgot Password (pre-login pages — no account sidebar). Loaded via: customer_account_create.xml, customer_account_login.xml, customer_account_forgotpassword.xml (direct , since these pages do not include the customer_account handle). ========================================================================== */ /* ========================================================================== GWL Create Account — Figma "My Account" design (customer_account_create) Pure CSS restyle of the stock Magento_Customer register.phtml. Same technique already used on customer_account_edit / customer_address_form: `display:contents` on both fieldsets promotes every .field to a direct child of one CSS Grid on the
, so First/Last, Email/Mobile and Password/Confirm can be paired side-by-side across the two fieldsets without touching the template or the two-fieldset markup Magento/ Magedelight_SMSProfile/newsletter/remember-me functionality relies on. Desktop 2-column grid, mobile (<=767px) single column. EN + AR. ========================================================================== */ .customer-account-create .page-title-wrapper { width: 100% !important; max-width: 640px !important; float: none !important; margin: 56px auto 40px !important; padding: 0 !important; text-align: center; } /* Figma Create Account title — Outfit Light 300 / 32px / #0A053D (Dev Mode) */ .customer-account-create .page-title-wrapper .page-title, .customer-account-create .page-title-wrapper .page-title .base, .customer-account-create .page-title-wrapper .page-title span { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 !important; letter-spacing: 0 !important; } .customer-account-create .page-title-wrapper .page-title:after { content: none !important; } /* Figma subtitle — Outfit Regular 16/#0A053D (cool gray-violet in design; was #7A8FA3 blue-muted which looked off) */ .customer-account-create .page-title-wrapper .account-page-subtitle { margin: 12px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #0A053D !important; opacity: 0.6; letter-spacing: 0 !important; } .customer-account-create .columns .column.main { width: 100% !important; max-width: 640px !important; float: none !important; margin: 0 auto 72px !important; } /* both fieldsets disappear from the box model — their .field children join the single grid on below, keeping fieldset/legend semantics and the OTP/newsletter/remember-me scripts untouched in the DOM */ .customer-account-create .form-create-account { width: 100% !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; box-sizing: border-box !important; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); /* Figma: 16px row + column gap between fields */ gap: 16px 16px; align-items: start; font-family: 'Outfit', sans-serif; } .customer-account-create .form-create-account .fieldset.create.info, .customer-account-create .form-create-account .fieldset.create.account, .customer-account-create .form-create-account .fieldset.additional_info { display: contents; } .customer-account-create .form-create-account .fieldset > .legend, .customer-account-create .form-create-account .fieldset > br { display: none !important; } .customer-account-create .form-create-account .fieldset:after { display: none !important; } /* row order: First/Last, Email/Mobile, Password/Confirm, Newsletter, Remember Me, Terms, Actions — full-width checkbox rows after passwords */ .customer-account-create .form-create-account .field-name-firstname { order: 1; grid-column: span 3; } .customer-account-create .form-create-account .field-name-lastname { order: 2; grid-column: span 3; } .customer-account-create .form-create-account .fieldset.create.account > .field.required:not(.password):not(.confirmation):not(.choice) { order: 3; grid-column: span 3; } .customer-account-create .form-create-account .field-name-customer_mobile { order: 4; grid-column: span 3; } .customer-account-create .form-create-account .field.password { order: 5; grid-column: span 3; } .customer-account-create .form-create-account .field.confirmation { order: 6; grid-column: span 3; } .customer-account-create .form-create-account .field.choice.newsletter { order: 7; grid-column: 1 / -1; } .customer-account-create .form-create-account #remember-me-box { order: 8; grid-column: 1 / -1; } .customer-account-create .form-create-account .gwl-terms-condition { order: 7; grid-column: 1 / -1; } .customer-account-create .form-create-account .actions-toolbar { order: 8; grid-column: 1 / -1; } /* fields: label above input, Figma spacing/type */ .customer-account-create .form-create-account .field { margin: 0 !important; } .customer-account-create .form-create-account .field > .label { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } /* Field labels (First Name, Password, etc.) — Figma weight 300 (was 500; that is what DevTools showed as not changing) */ .customer-account-create .form-create-account .field > .label > span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } .customer-account-create .form-create-account .field > .control { width: 100% !important; float: none !important; } .customer-account-create .form-create-account input.input-text { height: 44px; width: 100%; background: #fff; border: 1px solid #E5E8EE; border-radius: 4px; padding: 0 16px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; box-sizing: border-box; } /* Figma P4 Regular — Bg-Inset #838384 / weight 300 */ .customer-account-create .form-create-account input.input-text::placeholder { color: #838384 !important; opacity: 1; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; } .customer-account-create .form-create-account input.input-text::-webkit-input-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; opacity: 1; } .customer-account-create .form-create-account input.input-text::-moz-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; opacity: 1; } .customer-account-create .form-create-account input.input-text:focus { border-color: var(--gwl-account-blue); box-shadow: none; outline: none; } /* Password / Confirm Password show-hide eye icon (Figma 20×20 SVG in register.phtml) */ .customer-account-create .form-create-account .field.password .control, .customer-account-create .form-create-account .field.confirmation .control { position: relative; } .customer-account-create .form-create-account .field.password input.input-text, .customer-account-create .form-create-account .field.confirmation input.input-text { padding-inline-end: 44px; } .customer-account-create .form-create-account .gwl-password-toggle { position: absolute; inset-inline-end: 14px; /* Center on the 44px input only (not label) — input is first meaningful box in .control */ top: 22px; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: 0; color: #0A053D; cursor: pointer; z-index: 2; line-height: 0; } .customer-account-create .form-create-account .gwl-password-toggle svg { display: block; width: 20px; height: 20px; } .customer-account-create .form-create-account .gwl-password-toggle:hover, .customer-account-create .form-create-account .gwl-password-toggle--visible { color: #0A053D; opacity: 0.75; } /* Figma has no password-strength meter / phone format note under the field. Idle .otp_generatenote used to hold   (~19px) and made Mobile taller than Email — that is why First/Last→Email gap looked different from Email/Mobile→Password. Hide only when empty; OTP JS can still fill it. */ .customer-account-create #password-strength-meter-container, .customer-account-create .profile-notice-phone { display: none !important; } .customer-account-create .form-create-account .otp_generatenote:empty { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; line-height: 0 !important; overflow: hidden !important; } .customer-account-create .password-strength-meter { height: 32px; line-height: 32px; padding: 0 12px; border-radius: 4px; font-family: 'Outfit', sans-serif; font-size: 12px; color: var(--gwl-account-text); } /* Mobile number: single bordered field — flag/dial-code inside the input */ .customer-account-create .form-create-account .field-name-customer_mobile .flag-top-section-with-input { position: relative !important; display: block; width: 100%; min-height: 44px; box-sizing: border-box; } /* .custom-flag-main-section (the flag/dial-code prefix) must stay pinned to the TOP of the input, not stretch to fill the whole box — this box also contains the Generate OTP button / verification block below the input, which need the box to grow past 44px (min-height above) once the OTP flow is revealed; a bottom:1px anchor here would stretch the flag prefix across that extra height. */ .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section { position: absolute !important; inset-inline-start: 1px; top: 1px; height: 42px; width: auto !important; z-index: 2; pointer-events: auto; background: transparent !important; border: 0 !important; box-shadow: none !important; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section .iti__flag-container { top: 0 !important; bottom: 0 !important; height: 100% !important; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section .iti__selected-flag { height: 100% !important; padding: 0 8px 0 12px !important; display: flex !important; align-items: center !important; gap: 6px; background: transparent !important; border: 0 !important; box-shadow: none !important; } .customer-account-create .form-create-account .field-name-customer_mobile .custom-flag-main-section .iti__selected-dial-code { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1 !important; color: #100F1B !important; margin: 0; padding: 0; display: inline-flex !important; align-items: center !important; } .customer-account-create .form-create-account .field-name-customer_mobile #customer_mobile { height: 44px !important; width: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline-start: 94px !important; padding-inline-end: 16px !important; border: 1px solid var(--gwl-account-border) !important; border-radius: 4px !important; box-sizing: border-box !important; background: #fff !important; } .customer-account-create .form-create-account .field-name-customer_mobile #customer_mobile:focus { border-color: var(--gwl-account-blue) !important; } /* Kill idle OTP spacing under the mobile input so grid row height matches Email. display MUST NOT be !important here — Magento's own JS (profile-phone-validation.js) shows .send_otp via a plain (non-!important) inline style once a 9-digit number is typed, and !important on this rule would permanently block that toggle. */ .customer-account-create .form-create-account .field-name-customer_mobile .send_otp, .customer-account-create .form-create-account .field-name-customer_mobile .resendotp-block, .customer-account-create .form-create-account .field-name-customer_mobile .otp_text:empty { display: none; margin: 0 !important; } /* Checkboxes (Terms) — Figma square, darker stroke */ .customer-account-create .form-create-account .field.choice { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 10px; padding-top: 0; margin-top: 0 !important; } .customer-account-create .form-create-account .field.choice input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0 !important; width: 18px !important; height: 18px !important; border: 1.5px solid #0A053D !important; border-radius: 4px !important; background-color: #fff !important; background-repeat: no-repeat; background-position: center; background-size: 11px 11px; cursor: pointer; outline: none !important; box-shadow: none !important; } .customer-account-create .form-create-account .field.choice input[type="checkbox"]::after, .customer-account-create .form-create-account .field.choice input[type="checkbox"]::before { content: none !important; } .customer-account-create .form-create-account .field.choice input[type="checkbox"]:checked { background-color: var(--gwl-account-blue) !important; border-color: var(--gwl-account-blue) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .customer-account-create .form-create-account .field.choice .label, .customer-account-create .form-create-account .field.choice .label > span { display: inline-flex !important; align-items: center; min-height: 18px; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } /* keep link inside terms at 400 — overrides span 300 above */ .customer-account-create .form-create-account .field.choice .label > span > a { display: inline !important; font-weight: 400 !important; color: #160B8B !important; text-decoration: underline !important; } .customer-account-create .form-create-account .field.choice div.mage-error { flex: 1 0 100%; margin: 4px 0 0 !important; } /* Figma: "Terms of Services" + "Sign In" always underlined, brand blue */ .customer-account-create .form-create-account .gwl-terms-condition .label a, .customer-account-create .form-create-account #remember-me-box .tooltip.toggle { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; cursor: pointer; } .customer-account-create .form-create-account .gwl-terms-condition .label a:hover, .customer-account-create .form-create-account #remember-me-box .tooltip.toggle:hover { text-decoration: underline; } /* Actions: full-width primary button, centered "Already have an account? Sign In" */ .customer-account-create .form-create-account .actions-toolbar { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; margin: 8px 0 0 !important; width: 100% !important; } .customer-account-create .form-create-account .actions-toolbar .primary { width: 100% !important; float: none !important; margin: 0 !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary span { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px !important; min-height: 40px !important; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; box-shadow: none !important; cursor: pointer; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary:hover, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary:hover { background: #221796 !important; } .customer-account-create .form-create-account .actions-toolbar .secondary { float: none !important; margin: 24px auto 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 4px !important; width: auto !important; max-width: 100%; font-family: 'Outfit', sans-serif; font-size: 14px; line-height: 20px; white-space: nowrap; text-align: center; } .customer-account-create .form-create-account .actions-toolbar .action.back { display: inline !important; float: none !important; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; cursor: pointer; vertical-align: baseline; } .customer-account-create .form-create-account .actions-toolbar .action.back:hover { text-decoration: underline !important; } .customer-account-create .form-create-account .actions-toolbar .action.back span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; } /* Already have an account? — P4 Regular #100F1B / 300 */ .customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-style: normal !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; text-align: center; } /* Mobile (<=767px): single column — Figma mobile Create Account */ @media (max-width: 767px) { .customer-account-create .page-title-wrapper, .customer-account-create .columns .column.main { max-width: none !important; padding-inline: 16px; } .customer-account-create .page-title-wrapper { margin: 32px auto 28px !important; } .customer-account-create .columns .column.main { margin-bottom: 48px !important; } .customer-account-create .page-title-wrapper .page-title, .customer-account-create .page-title-wrapper .page-title .base, .customer-account-create .page-title-wrapper .page-title span { font-size: 28px !important; line-height: 36px !important; font-weight: 300 !important; color: #0A053D !important; } .customer-account-create .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 22px !important; margin-top: 8px !important; color: #0A053D !important; opacity: 0.6; } .customer-account-create .form-create-account { grid-template-columns: 1fr; gap: 16px; } .customer-account-create .form-create-account .field-name-firstname, .customer-account-create .form-create-account .field-name-lastname, .customer-account-create .form-create-account .fieldset.create.account > .field.required:not(.password):not(.confirmation):not(.choice), .customer-account-create .form-create-account .field-name-customer_mobile, .customer-account-create .form-create-account .field.password, .customer-account-create .form-create-account .field.confirmation, .customer-account-create .form-create-account .gwl-terms-condition { grid-column: 1 / -1; } .customer-account-create .form-create-account .actions-toolbar { gap: 0 !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span { font-size: 15px !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar .primary button.action.submit.primary { height: 40px !important; min-height: 40px !important; } } /* ===== Figma typography hard-lock (weights) — beat styles-m/l leftovers ===== Critical: Magento wraps "By continuing…" in , and `.field > .label > span { font-weight:500 }` was winning over the label rule. Fields (inputs + placeholders) + By continuing text = 300. Terms / Sign In links stay 400. */ .customer-account-create .form-create-account input.input-text, .customer-account-create .form-create-account input.input-text[type="text"], .customer-account-create .form-create-account input.input-text[type="email"], .customer-account-create .form-create-account input.input-text[type="password"], .customer-account-create .form-create-account input.input-text[type="tel"], .customer-account-create .form-create-account #customer_mobile, .customer-account-create .form-create-account .iti__selected-dial-code { font-weight: 300 !important; } .customer-account-create .form-create-account input.input-text::placeholder, .customer-account-create .form-create-account input.input-text::-webkit-input-placeholder, .customer-account-create .form-create-account input.input-text::-moz-placeholder, .customer-account-create .form-create-account #customer_mobile::placeholder, .customer-account-create .form-create-account #customer_mobile::-webkit-input-placeholder { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #838384 !important; opacity: 1 !important; } /* By continuing text (label + inner span) — NOT the Terms link */ .customer-account-create .form-create-account .field.choice .label, .customer-account-create .form-create-account .field.choice .label > span, .customer-account-create .form-create-account .gwl-terms-condition .label, .customer-account-create .form-create-account .gwl-terms-condition .label > span, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label > span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } .customer-account-create .form-create-account .gwl-terms-condition .label a, .customer-account-create .form-create-account .gwl-terms-condition .label a span, .customer-account-create .form-create-account .actions-toolbar .action.back, .customer-account-create .form-create-account .actions-toolbar .action.back span { font-weight: 400 !important; color: #160B8B !important; } .customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt { font-weight: 300 !important; color: #100F1B !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span { font-weight: 400 !important; } /* ========================================================================== GWL Sign In — Figma "Sign In to Your Account" design (customer_account_login) Same approach as the Create Account page: title/subtitle via layout XML (page.main.title + a child block), pill-style Email/Mobile toggle and a per-field password eye icon via a theme override of Magedelight_SMSProfile::login.phtml (the template this page actually renders — see that file's own header comment), everything else pure CSS. Single centered column (720px), stacking the stock 2-column float layout (.login-container .block at 48%/float) down to one. Desktop + mobile (<=767px). EN + AR. Every selector below is scoped to :is(.customer-account-login, .multishipping-checkout-login) — the multishipping checkout's guest login step (Magento_Multishipping's block-authentication popup) renders the exact same Magedelight_SMSProfile login.phtml form (login.phtml doesn't branch on route), just inside different KO-driven wrapper markup (.block-authentication instead of .login-container). Reusing the same rule set here keeps both pages' UI identical without duplicating ~60 rules; wherever the multishipping wrapper's markup doesn't match a given selector (e.g. ".login-container .block", which that page's DOM doesn't have), the rule is simply a no-op there. ========================================================================== */ :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper { width: 100% !important; max-width: 485px !important; float: none !important; margin: 56px auto 40px !important; padding: 0 !important; text-align: center; } /* Figma Sign In title — Outfit Light 300 / 32 / #0A053D (same as Create Account) */ :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title .base, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title span { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 !important; letter-spacing: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title:after { content: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .account-page-subtitle { margin: 12px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #0A053D !important; opacity: 0.6; letter-spacing: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { width: 100% !important; max-width: 485px !important; float: none !important; margin: 0 auto 72px !important; } :is(.customer-account-login, .multishipping-checkout-login) .login-container { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .login-container .block { width: 100% !important; float: none !important; clear: both !important; margin: 0 0 16px !important; } :is(.customer-account-login, .multishipping-checkout-login) .login-container .block:last-child { margin-bottom: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-title { display: none !important; } /* Email/Mobile pill toggle */ :is(.customer-account-login, .multishipping-checkout-login) .field.reset_type_login { text-align: center; margin: 0 0 24px !important; } :is(.customer-account-login, .multishipping-checkout-login) .field.reset_type_login > .label { display: none !important; } :is(.customer-account-login, .multishipping-checkout-login) #reset_type_login { display: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-toggle { display: inline-flex; gap: 4px; padding: 4px; background: #F7F9FB; border-radius: 4px; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn { min-width: 120px; height: 40px; padding: 0 24px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: transparent; border: 0; border-radius: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1 !important; color: #100F1B !important; cursor: pointer; box-sizing: border-box; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn--active { background: #0A053D !important; color: #fff !important; font-weight: 400 !important; } /* fields */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .fieldset.login { margin: 0; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field { margin: 0 0 16px !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field > .label, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field .form-field__label { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field > .label > span, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field .form-field__label > span { display: inline; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.required .form-field__label:after, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.required > .label:after { content: '*'; color: #F04438; margin-inline-start: 4px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field > .control, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field .form-field__control { width: 100% !important; float: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input { height: 44px !important; width: 100%; max-width: 485px; background: #fff; border: 1px solid #E5E8EE !important; border-radius: 4px !important; padding: 0 16px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; box-sizing: border-box; } :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text::placeholder, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input::placeholder, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text::-webkit-input-placeholder, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input::-webkit-input-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; opacity: 1 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login input.input-text:focus, :is(.customer-account-login, .multishipping-checkout-login) .form-login input.form-field__input:focus { border-color: #160B8B !important; box-shadow: none; outline: none; } /* Mobile number: flag/dial vertically centered in 44px field (input lives inside .custom-flag-main-section — keep wrapper relative, not absolute) */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile { position: relative !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .custom-flag-main-section { position: relative !important; display: block !important; width: 100% !important; max-width: 485px; height: 44px !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__flag-container { position: absolute !important; inset-inline-start: 0; top: 0 !important; bottom: 0 !important; height: 100% !important; z-index: 2; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__selected-flag { height: 100% !important; padding: 0 8px 0 12px !important; display: flex !important; align-items: center !important; gap: 6px; background: transparent !important; border: 0 !important; box-shadow: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__selected-dial-code { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1 !important; color: #100F1B !important; margin: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .control.mobile .iti__flag { flex-shrink: 0; } :is(.customer-account-login, .multishipping-checkout-login) .form-login #login_mobile { height: 44px !important; width: 100% !important; max-width: 485px; padding-top: 0 !important; padding-bottom: 0 !important; padding-inline-start: 94px !important; padding-inline-end: 16px !important; border: 1px solid #E5E8EE !important; border-radius: 4px !important; box-sizing: border-box !important; line-height: 20px !important; } :is(.customer-account-login, .multishipping-checkout-login) .profile-notice-phone { display: none !important; } /* OTP action buttons */ :is(.customer-account-login, .multishipping-checkout-login) .send_otp_login.action.primary, :is(.customer-account-login, .multishipping-checkout-login) .resendotp.action.primary, :is(.customer-account-login, .multishipping-checkout-login) .verif_otp_login.action.primary, .customer-account-create .send_otp.action.primary, .customer-account-create .resendotp.action.primary, .customer-account-create .verif_otp.action.primary { align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; } :is(.customer-account-login, .multishipping-checkout-login) .send_otp_login.action.primary:hover, :is(.customer-account-login, .multishipping-checkout-login) .resendotp.action.primary:hover, :is(.customer-account-login, .multishipping-checkout-login) .verif_otp_login.action.primary:hover, .customer-account-create .send_otp.action.primary:hover, .customer-account-create .resendotp.action.primary:hover, .customer-account-create .verif_otp.action.primary:hover { background: #221796 !important; } :is(.customer-account-create, .customer-account-login) .otp_generatenote { display: block; text-align: center; font-family: 'Outfit', sans-serif; font-size: 13px; color: #A19FA8; } :is(.customer-account-create, .customer-account-login) .resendotp-block { margin-top: 12px; } :is(.customer-account-create, .customer-account-login) .resend-wait { font-family: 'Outfit', sans-serif; font-size: 13px; color: #A19FA8; margin: 0 0 4px; } :is(.customer-account-create, .customer-account-login) .resendlink { margin: 0 0 8px; } :is(.customer-account-create, .customer-account-login) .resendlink button { width: auto; height: auto; background: none !important; border: 0 !important; color: #160B8B !important; font-family: 'Outfit', sans-serif !important; font-size: 13px; font-weight: 400 !important; padding: 0; text-decoration: underline; box-shadow: none !important; cursor: pointer; } :is(.customer-account-create, .customer-account-login) .resend-link-attempt { font-size: 13px; color: #A19FA8; margin: 0 0 8px; } :is(.customer-account-create, .customer-account-login) .field-name-otp .label, :is(.customer-account-create, .customer-account-login) .field-name-otp .label span { margin-top: 8px !important; margin-bottom: 8px !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field-name-otp #otp { height: 44px !important; width: 100% !important; max-width: 485px; border: 1px solid #E5E8EE !important; border-radius: 4px !important; padding: 0 16px !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #100F1B !important; box-sizing: border-box !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field-name-otp #otp::placeholder { color: #838384 !important; font-weight: 300 !important; } :is(.customer-account-create, .customer-account-login) .otp_text { display: block; font-size: 13px; font-weight: 400; margin-top: 8px; } /* Password eye */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.password .control { position: relative; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.password input.input-text { padding-inline-end: 44px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle { position: absolute; inset-inline-end: 14px; top: 22px; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: 0; color: #100F1B; cursor: pointer; z-index: 2; line-height: 0; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle svg { display: block; width: 20px; height: 20px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle:hover, :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-password-toggle--visible { color: #100F1B; opacity: 0.75; } /* Remember Me + Forgot Password */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-remember-forgot-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; white-space: nowrap; gap: 12px; margin: 0 0 24px !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-remember-forgot-row #remember-me-box { margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .gwl-remember-forgot-row .tooltip.content { white-space: normal; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .action.remind, :is(.customer-account-login, .multishipping-checkout-login) .form-login .action.remind span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .action.remind:hover { text-decoration: underline !important; } /* Checkbox Remember Me */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice { display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 8px; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"] { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; flex-shrink: 0; position: relative !important; top: 0 !important; margin: 0 !important; padding: 0; width: 18px !important; height: 18px !important; border: 1px solid #CECDD8 !important; border-radius: 0 !important; background-color: #FFF !important; background-repeat: no-repeat; background-position: center; background-size: 11px 11px; cursor: pointer; outline: none !important; box-shadow: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"]::after, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"]::before { content: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice input[type="checkbox"]:checked { background-color: #160B8B !important; border-color: #160B8B !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.2 4.3 6.5 11 2.8 7.3' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .label, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .label > span { display: inline-flex !important; align-items: center; min-height: 18px; margin: 0 !important; padding: 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } /* Figma Sign In: Remember Me only — hide Magento Persistent "What's this?" */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .tooltip.toggle, :is(.customer-account-login, .multishipping-checkout-login) .form-login .field.choice .tooltip.content, :is(.customer-account-login, .multishipping-checkout-login) .form-login #remember-me-box .tooltip { display: none !important; } /* Mobile OTP mode: Figma shows phone + CTA only (no Remember / Forgot) */ :is(.customer-account-login, .multishipping-checkout-login) .form-login.gwl-login-mode-mobile .gwl-remember-forgot-row { display: none !important; } /* Sign In / Login using OTP button */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar { display: block; margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar .primary { width: 100%; float: none !important; margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary, :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary span { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; box-shadow: none !important; cursor: pointer; } /* Login using OTP stays disabled until OTP verified (match migrate behavior) */ :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary:disabled, :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary[disabled] { background: #160B8B !important; color: #fff !important; opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary:hover:not(:disabled) { background: #221796 !important; } /* Don't have an account? Create Account */ :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .block-content > p { display: none !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .actions-toolbar { display: flex; justify-content: center; margin: 24px 0 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .actions-toolbar .primary { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 4px; float: none !important; margin: 0 !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer .gwl-create-account-prompt { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary, :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary:hover { text-decoration: underline !important; } :is(.customer-account-login, .multishipping-checkout-login) .block-new-customer a.action.create.primary span { display: inline; } /* Mobile Sign In */ @media (max-width: 767px) { :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper, :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { max-width: none !important; padding-inline: 16px; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper { margin: 32px auto 28px !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title .base, :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .page-title span { font-size: 28px !important; line-height: 36px !important; font-weight: 300 !important; color: #0A053D !important; } :is(.customer-account-login, .multishipping-checkout-login) .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 22px !important; margin-top: 8px !important; color: #0A053D !important; opacity: 0.6; } :is(.customer-account-login, .multishipping-checkout-login) .columns .column.main { margin-bottom: 48px !important; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-btn { min-width: 0; flex: 1 1 0; } :is(.customer-account-login, .multishipping-checkout-login) .gwl-login-type-toggle { width: 100%; max-width: 100%; box-sizing: border-box; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary { height: 40px !important; } :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary, :is(.customer-account-login, .multishipping-checkout-login) .form-login .actions-toolbar button.action.login.primary span { font-size: 15px !important; } } /* ===== Figma typography hard-lock (weights) — beat styles-m/l leftovers ===== Critical: Magento wraps "By continuing…" in , and `.field > .label > span { font-weight:500 }` was winning over the label rule. Fields (inputs + placeholders) + By continuing text = 300. Terms / Sign In links stay 400. */ .customer-account-create .form-create-account input.input-text, .customer-account-create .form-create-account input.input-text[type="text"], .customer-account-create .form-create-account input.input-text[type="email"], .customer-account-create .form-create-account input.input-text[type="password"], .customer-account-create .form-create-account input.input-text[type="tel"], .customer-account-create .form-create-account #customer_mobile, .customer-account-create .form-create-account .iti__selected-dial-code { font-weight: 300 !important; } .customer-account-create .form-create-account input.input-text::placeholder, .customer-account-create .form-create-account input.input-text::-webkit-input-placeholder, .customer-account-create .form-create-account input.input-text::-moz-placeholder, .customer-account-create .form-create-account #customer_mobile::placeholder, .customer-account-create .form-create-account #customer_mobile::-webkit-input-placeholder { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #838384 !important; opacity: 1 !important; } /* By continuing text (label + inner span) — NOT the Terms link */ .customer-account-create .form-create-account .field.choice .label, .customer-account-create .form-create-account .field.choice .label > span, .customer-account-create .form-create-account .gwl-terms-condition .label, .customer-account-create .form-create-account .gwl-terms-condition .label > span, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label, .customer-account-create .form-create-account .field.choice.gwl-terms-condition > .label > span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; } .customer-account-create .form-create-account .gwl-terms-condition .label a, .customer-account-create .form-create-account .gwl-terms-condition .label a span, .customer-account-create .form-create-account .actions-toolbar .action.back, .customer-account-create .form-create-account .actions-toolbar .action.back span { font-weight: 400 !important; color: #160B8B !important; } .customer-account-create .form-create-account .actions-toolbar .gwl-signin-prompt { font-weight: 300 !important; color: #100F1B !important; } .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, .customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary, body.customer-account-create .form-create-account .actions-toolbar button.action.submit.primary span { font-weight: 400 !important; } /* ========================================================================== GWL Forgot Password — Figma tokens (match Sign In / Create Account) Outfit + #0A053D / #838384 / #160B8B; inputs 44px; form 485px. Captcha kept (not in Figma) — label/input match other fields. EN + AR. ========================================================================== */ .customer-account-forgotpassword .page-title-wrapper { width: 100% !important; max-width: 485px !important; float: none !important; margin: 56px auto 40px !important; padding: 0 !important; text-align: center; } .customer-account-forgotpassword .page-title-wrapper .page-title, .customer-account-forgotpassword .page-title-wrapper .page-title .base, .customer-account-forgotpassword .page-title-wrapper .page-title span { font-family: 'Outfit', sans-serif !important; font-size: 32px !important; line-height: 40px !important; font-weight: 300 !important; color: #0A053D !important; margin: 0 !important; letter-spacing: 0 !important; } .customer-account-forgotpassword .page-title-wrapper .page-title:after { content: none !important; } .customer-account-forgotpassword .page-title-wrapper .account-page-subtitle { margin: 12px 0 0 !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; line-height: 24px !important; font-weight: 400 !important; color: #0A053D !important; opacity: 0.6; letter-spacing: 0 !important; } .customer-account-forgotpassword .columns .column.main { width: 100% !important; max-width: 485px !important; float: none !important; margin: 0 auto 72px !important; } .customer-account-forgotpassword .login-container { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border-radius: 0 !important; } .customer-account-forgotpassword .login-container .block { width: 100% !important; float: none !important; clear: both !important; margin: 0 !important; } .customer-account-forgotpassword .block-title { display: none !important; } .customer-account-forgotpassword .form.password.forget { background: none !important; padding: 0 !important; border-radius: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: 485px !important; margin: 0 auto !important; } .customer-account-forgotpassword .form.password.forget .fieldset { margin: 0 !important; } .customer-account-forgotpassword .form.password.forget > .fieldset > .field.note { text-align: center; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #A19FA8 !important; margin: 0 0 16px !important; } .customer-account-forgotpassword #reset_type { display: none !important; } .customer-account-forgotpassword .field.email, .customer-account-forgotpassword .field.mobile > .form-field, .customer-account-forgotpassword .field.mobile > .profile-notice-phone { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Hide Mobile OTP UI until Mobile mode is active (button lives outside clipped .form-field) */ .customer-account-forgotpassword .field.mobile > .field { display: none !important; } .customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"] .field.mobile > .field { display: block !important; } .customer-account-forgotpassword .form.password.forget .field { margin: 0 0 16px !important; } .customer-account-forgotpassword .form.password.forget .field > .label, .customer-account-forgotpassword .form.password.forget .field .form-field__label, .customer-account-forgotpassword .form.password.forget .field > .label > span, .customer-account-forgotpassword .form.password.forget .field .form-field__label > span, .customer-account-forgotpassword .form.password.forget .field.captcha > .label, .customer-account-forgotpassword .form.password.forget .field.captcha > .label > span { display: block; float: none !important; width: auto !important; margin: 0 0 8px !important; padding: 0 !important; text-align: start !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #0A053D !important; } .customer-account-forgotpassword .form.password.forget .field > .label > span, .customer-account-forgotpassword .form.password.forget .field .form-field__label > span, .customer-account-forgotpassword .form.password.forget .field.captcha > .label > span { display: inline; margin: 0 !important; } .customer-account-forgotpassword .form.password.forget .field.required .form-field__label:after, .customer-account-forgotpassword .form.password.forget .field.required > .label:after { content: '*'; color: #F04438; margin-inline-start: 4px; } .customer-account-forgotpassword .form.password.forget .field > .control, .customer-account-forgotpassword .form.password.forget .field .form-field__control, .customer-account-forgotpassword .form.password.forget .field.captcha .control.captcha { width: 100% !important; float: none !important; } .customer-account-forgotpassword .form.password.forget input.input-text, .customer-account-forgotpassword .form.password.forget input.form-field__input, .customer-account-forgotpassword .form.password.forget .field.captcha input.input-text { height: 44px !important; width: 100%; max-width: 485px; background: #fff; border: 1px solid #E5E8EE !important; border-radius: 4px !important; padding: 0 16px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 20px !important; color: #100F1B !important; box-sizing: border-box; } .customer-account-forgotpassword .form.password.forget input.input-text::placeholder, .customer-account-forgotpassword .form.password.forget input.form-field__input::placeholder, .customer-account-forgotpassword .form.password.forget input.input-text::-webkit-input-placeholder, .customer-account-forgotpassword .form.password.forget input.form-field__input::-webkit-input-placeholder { color: #838384 !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 300 !important; opacity: 1 !important; } .customer-account-forgotpassword .form.password.forget input.input-text:focus, .customer-account-forgotpassword .form.password.forget input.form-field__input:focus, .customer-account-forgotpassword .form.password.forget .field.captcha input.input-text:focus { border-color: #160B8B !important; box-shadow: none; outline: none; } /* Captcha image row under the styled input */ .customer-account-forgotpassword .form.password.forget .field.captcha .captcha-image { margin-top: 8px; } .customer-account-forgotpassword .form.password.forget .field.captcha .captcha-img { border-radius: 4px; border: 1px solid #E5E8EE; } .customer-account-forgotpassword #password-strength-meter-container { display: none !important; } .customer-account-forgotpassword .form.password.forget button.first-attempt.send_otp_password { align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; margin: 8px 0 0 !important; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; } .customer-account-forgotpassword .form.password.forget button.first-attempt.send_otp_password:hover { background: #221796 !important; } .customer-account-forgotpassword .form.password.forget .otp_generatenote:empty, .customer-account-forgotpassword .form.password.forget .otp_generatenote:blank { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .customer-account-forgotpassword .form.password.forget .otp_generatenote { display: block; text-align: center; font-family: 'Outfit', sans-serif; font-size: 13px; color: #A19FA8; } .customer-account-forgotpassword .gwl-sr-only, .customer-account-forgotpassword .gwl-otp-real { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .customer-account-forgotpassword .field-name-otp { text-align: center; } .customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="otp"] .gwl-fp-identifier, .customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="password"] .gwl-fp-identifier { display: none !important; } .customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="otp"] .field.captcha.required[role="user_forgotpassword"] { display: none !important; } .customer-account-forgotpassword .gwl-otp-boxes { display: flex; justify-content: center; gap: 10px; margin: 4px 0 40px; } .customer-account-forgotpassword .gwl-otp-box { width: 48px; height: 48px; border: 1px solid #58575F !important; border-radius: 4px !important; background: #FFF; text-align: center; font-family: 'Outfit', sans-serif !important; font-size: 20px !important; font-style: normal !important; font-weight: 400 !important; line-height: 24px !important; letter-spacing: -0.25px !important; color: #100F1B !important; padding: 0; box-sizing: border-box; } .customer-account-forgotpassword .gwl-otp-box:focus { border-color: #160B8B !important; outline: none; box-shadow: none; } .customer-account-forgotpassword .gwl-otp-actions { display: flex; flex-direction: row; align-items: stretch; gap: 24px; } .customer-account-forgotpassword .gwl-otp-actions button.verif_otp_password { flex: 1 1 0; width: auto; } .customer-account-forgotpassword .gwl-otp-actions .gwl-fp-mobile-back { padding-top: 0 !important; padding-bottom: 0 !important; flex: 1 1 0; display: flex !important; align-items: center; justify-content: center; height: 40px; background: #fff; border: 1px solid #E5E8EE !important; border-radius: 4px !important; box-sizing: border-box; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; color: #160B8B !important; text-decoration: none !important; } .customer-account-forgotpassword .gwl-otp-actions .gwl-fp-mobile-back:hover { text-decoration: none; border-color: #160B8B !important; } .customer-account-forgotpassword button.verif_otp_password { align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; box-shadow: none !important; cursor: pointer; } .customer-account-forgotpassword button.verif_otp_password:hover { background: #221796 !important; } .customer-account-forgotpassword .otp_text { display: block; text-align: center; font-family: 'Outfit', sans-serif; font-size: 13px; margin-top: 8px; } .customer-account-forgotpassword .resendotp-block { text-align: center; margin-top: 0; } /* Figma: resend copy sits under Confirm OTP + Go Back (keep attempt counter) */ .customer-account-forgotpassword .gwl-fp-resend-meta { margin-top: 24px; text-align: center; } .customer-account-forgotpassword .resend-wait { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #100F1B !important; margin: 0; } .customer-account-forgotpassword .gwl-fp-resend-prefix { color: #100F1B !important; } .customer-account-forgotpassword .gwl-fp-resend-timer { color: #160B8B !important; font-weight: 400 !important; } .customer-account-forgotpassword .resend-wait .time { color: inherit; font-weight: inherit; } .customer-account-forgotpassword .resendlink { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; line-height: 20px !important; } /* Magento .show() sets display:block inline — keep flex layout when visible */ .customer-account-forgotpassword .resendlink[style*="display: block"], .customer-account-forgotpassword .resendlink[style*="display:block"] { display: flex !important; } .customer-account-forgotpassword .resendlink button.send_otp_password { width: auto; height: auto; background: none !important; color: #160B8B !important; font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; padding: 0; margin: 0; border: 0 !important; text-decoration: underline; box-shadow: none !important; cursor: pointer; } .customer-account-forgotpassword .resend-link-attempt { font-family: 'Outfit', sans-serif !important; font-size: 13px !important; font-weight: 400 !important; color: #A19FA8 !important; margin-top: 8px; } .customer-account-forgotpassword .gwl-fp-mobile-back, .customer-account-forgotpassword .gwl-fp-mobile-back-row { display: none; } .customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"][data-gwl-fp-step="start"] .gwl-fp-mobile-back-row { display: block; text-align: center; margin-top: 24px; } .customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"][data-gwl-fp-step="start"] .gwl-fp-mobile-back-row .gwl-fp-mobile-back { display: inline-block; } .customer-account-forgotpassword .md-forget-password[data-gwl-reset-type="Mobile"][data-gwl-fp-step="otp"] .field-name-otp .gwl-fp-mobile-back { display: inline-block; } .customer-account-forgotpassword .gwl-fp-mobile-back { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #160B8B !important; text-decoration: underline !important; } .customer-account-forgotpassword .gwl-fp-mobile-back:hover { text-decoration: underline !important; } .customer-account-forgotpassword .field.password .form-field__control, .customer-account-forgotpassword .field.confirmation .form-field__control, .customer-account-forgotpassword .field.password .control, .customer-account-forgotpassword .field.confirmation .control { position: relative; } .customer-account-forgotpassword .field.password input.input-text, .customer-account-forgotpassword .field.confirmation input.input-text { padding-inline-end: 44px; } .customer-account-forgotpassword .gwl-password-toggle { position: absolute; inset-inline-end: 14px; /* Label is outside .control — center on 44px input (Figma / Sign In) */ top: 22px; transform: translateY(-50%); display: flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin: 0; background: none; border: 0; color: #100F1B; cursor: pointer; z-index: 2; line-height: 0; } .customer-account-forgotpassword .gwl-password-toggle svg { display: block; width: 18px; height: 18px; } .customer-account-forgotpassword .gwl-password-toggle:hover, .customer-account-forgotpassword .gwl-password-toggle--visible { color: #100F1B; opacity: 0.75; } .customer-account-forgotpassword .actions-toolbar.reset-pwd { margin: 8px 0 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd:after { display: none !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .primary { width: 100%; float: none !important; margin: 0 !important; padding: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .primary .action, .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action { margin-bottom: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary, .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary span { font-family: 'Outfit', sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; width: 100%; height: 40px; background: #160B8B !important; border: 0 !important; border-radius: 4px !important; color: #fff !important; box-shadow: none !important; cursor: pointer; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary:hover { background: #221796 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary { width: 100%; float: none !important; clear: both !important; display: flex !important; justify-content: center; align-items: center; text-align: center; margin: 24px 0 0 !important; padding: 0 !important; line-height: 20px !important; font-size: 14px !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back, .customer-account-forgotpassword .form.password.forget .actions-toolbar.reset-pwd > .secondary .action.back { margin: 0 !important; padding: 0 !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back, .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back span { font-family: 'Outfit', sans-serif !important; font-size: 14px !important; font-weight: 400 !important; line-height: 20px !important; color: #160B8B !important; text-decoration: underline !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd .secondary .action.back:hover { text-decoration: underline !important; } .customer-account-forgotpassword .md-forget-password[data-gwl-fp-step="password"] .actions-toolbar.reset-pwd .secondary { display: none !important; } /* Auth form fields — force 44px height + centered intl dial-code */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) input.input-text, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) input.form-field__input, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .field.captcha input.input-text { height: 44px !important; min-height: 44px !important; box-sizing: border-box !important; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .iti__selected-flag { display: flex !important; align-items: center !important; height: 100% !important; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .iti__selected-dial-code { line-height: 1 !important; display: inline-flex !important; align-items: center !important; } /* Auth CTAs — vertically center label in 40px buttons. Theme .action.primary uses padding:15px 20px which pushes text down. OTP toggle buttons (send_otp*/verif_otp*/resendotp) are excluded from display:inline-flex — Magento JS hides/shows them via inline style. */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.submit.primary, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.login.primary, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) a.gwl-fp-mobile-back, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .gwl-otp-actions .gwl-fp-mobile-back { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1 !important; box-sizing: border-box !important; vertical-align: middle; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.submit.primary > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.action.login.primary > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) a.gwl-fp-mobile-back > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) .gwl-otp-actions .gwl-fp-mobile-back > span { line-height: 1 !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } /* OTP buttons: size/type only — do not set display (JS owns visibility) */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt { padding-top: 0 !important; padding-bottom: 0 !important; line-height: 40px !important; box-sizing: border-box !important; text-align: center; } :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password > span, :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt > span { line-height: 40px !important; margin: 0 !important; padding: 0 !important; } /* OTP/toggle CTAs — center label ONLY when JS has shown them. Never force display on .send_otp* / .verif_otp* / .resendotp — that broke Magento hide/show (Generate OTP appearing on Email + empty Mobile). */ :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_login[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.send_otp_password[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.resendotp[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_login[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.verif_otp_password[style*="display:block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt[style*="display: block"], :is(.customer-account-create, .customer-account-login, .multishipping-checkout-login, .customer-account-forgotpassword) button.first-attempt[style*="display:block"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; } @media (max-width: 767px) { .customer-account-forgotpassword .page-title-wrapper, .customer-account-forgotpassword .columns .column.main { max-width: none !important; padding-inline: 16px; } .customer-account-forgotpassword .page-title-wrapper { margin: 32px auto 28px !important; } .customer-account-forgotpassword .page-title-wrapper .page-title, .customer-account-forgotpassword .page-title-wrapper .page-title .base, .customer-account-forgotpassword .page-title-wrapper .page-title span { font-size: 28px !important; line-height: 36px !important; } .customer-account-forgotpassword .page-title-wrapper .account-page-subtitle { font-size: 14px !important; line-height: 22px !important; margin-top: 8px !important; color: #0A053D !important; opacity: 0.6; } .customer-account-forgotpassword .columns .column.main { margin-bottom: 48px !important; } .customer-account-forgotpassword .actions-toolbar.reset-pwd button.action.submit.primary { height: 40px !important; } .customer-account-forgotpassword .gwl-otp-box { width: 44px; height: 44px; font-size: 16px !important; } }