/* ------------------------------------------------------------------------- * auth.css — validation styling for the shared login / signup modals. * Pairs with js/auth.js. Kept out of styles.css so the theme stays upgradable. * ---------------------------------------------------------------------- */ .auth-field-error { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: #b00020; } .tf-field .auth-invalid, .form-log .auth-invalid { border-color: #b00020 !important; } .auth-msg { margin: 12px 0 4px; font-size: 13.5px; line-height: 1.5; min-height: 0; } .auth-msg:empty { margin: 0; } .auth-msg.is-error { color: #b00020; } .auth-msg.is-success { color: #1a7f37; } /* The submit button is disabled while a request is in flight — make that visible rather than leaving it looking clickable. */ .form-log .btn-submit:disabled { opacity: .65; cursor: not-allowed; } /* -------------------------------------------------- focus & stacking ---- * The login box is opened from the cart drawer's CHECKOUT NOW. js/auth.js * closes the drawer first, but these rules make the outcome robust even if a * drawer or its backdrop is somehow still up: the auth modal and its own * backdrop sit above the offcanvas layer (Bootstrap puts offcanvas at 1045 and * its backdrop at 1040), so the popup is never greyed out by another overlay. */ #log, #register { z-index: 1090; } /* Do NOT set a z-index here. * * Bootstrap's defaults already stack correctly: modal 1055 > backdrop 1050 > * offcanvas 1045 > offcanvas-backdrop 1040. An earlier version of this file * raised the backdrop to 1080 to get it over the cart drawer — but the backdrop * is a body-level sibling shared by EVERY modal, so that lifted it above the * rakhi popup, quick-add and cart (all at the default 1055) and swallowed their * clicks. Only the auth modals were given 1090, so only they still worked. * * The auth modal at 1090 with the stock 1050 backdrop already clears the * offcanvas layer, so nothing needed raising in the first place. Colour and * opacity are safe to set — they change no stacking. */ body.modal-open .modal-backdrop { background-color: #000; } body.modal-open .modal-backdrop.show { opacity: .68; } /* Belt and braces on the scroll lock. Bootstrap sets overflow:hidden on via .modal-open, but the offcanvas closing in the same moment can clear it — this keeps the page behind the popup still. */ body.modal-open { overflow: hidden !important; } /* Give the panel a little more presence against the darker backdrop. */ .modal-log .modal-content { box-shadow: 0 24px 60px rgba(0, 0, 0, .45); } /* ------------------------------------------------ forgot / reset password */ .auth-forgot-wrap { margin-top: 14px; text-align: center; } .auth-forgot-link { font-size: 13.5px; text-decoration: underline; text-underline-offset: 3px; color: var(--main-4, #666); } .auth-forgot-link:hover { color: var(--primary, #AE873E); } .auth-note { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: var(--main-4, #666); } .auth-hint { margin: 10px 0 16px; font-size: 12.5px; color: var(--main-4, #666); } /* reset-password.html — the standalone page the emailed link opens */ .auth-card { max-width: 460px; margin: 0 auto; padding: 32px 28px; border: 1px solid var(--line, #e6e6e6); border-radius: 12px; background: #fff; } .auth-card .title { margin-bottom: 22px; } .auth-state { text-align: center; } .auth-state .tf-btn { margin-top: 14px; } /* ------------------------------------------------- mobile scrollbar pad -- * Bootstrap adds `padding-right` to while a modal is open, sized to * (window.innerWidth - documentElement.clientWidth), so the page does not jump * when the scrollbar is hidden. That assumes the difference IS the scrollbar. * * On a phone it is not: this layout is wider than a phone viewport, so those * two measurements diverge by hundreds of pixels and the padding lands at * ~1000px, shoving the page sideways and knocking the popup out of alignment. * * Touch browsers use overlay scrollbars that take no layout width, so there is * nothing to compensate for below the desktop breakpoint. js/auth.js also * strips any implausible value at runtime; this is the belt-and-braces half, * and being CSS it applies even before the script reacts. */ @media (max-width: 991px) { body.modal-open, body.offcanvas-open { padding-right: 0 !important; } /* The damaging one. Bootstrap _adjustDialog() puts the same bad figure on the .modal element, and ~1080px of padding-right there pushes the dialog right off the screen — the overlay renders, the popup does not. */ .modal { padding-right: 0 !important; padding-left: 0 !important; } }