/** * HouseKase SMS OTP - frontend styles. * Neutral so the widget inherits sensibly inside the Woodmart theme. */ .houskase-otp-widget { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .houskase-otp-heading { margin: 0 0 14px; font-size: 15px; font-weight: 600; } .houskase-phone-wrap { display: flex; align-items: stretch; border: 1px solid #d5d5d5; border-radius: 3px; overflow: hidden; } .houskase-phone-wrap:focus-within { border-color: #333; } .houskase-cc { display: flex; align-items: center; padding: 0 11px; background: #f4f4f4; border-right: 1px solid #d5d5d5; font-weight: 600; font-size: 14px; flex-shrink: 0; } .houskase-phone-wrap .houskase-mobile { border: none !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; flex: 1; min-width: 0; } .houskase-otp-widget .otp-input { text-align: center; letter-spacing: 6px; font-size: 19px; font-weight: 600; } .houskase-otp-sent { font-size: 14px; margin: 0 0 12px; } .houskase-btn-primary { display: block; width: 100%; margin-top: 6px; } .houskase-btn-link { display: block; width: 100%; background: none; border: none; padding: 8px 0; margin: 0; font-size: 13px; text-decoration: underline; cursor: pointer; color: inherit; } .houskase-btn-link:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: none; } .houskase-message:empty, .alert-container:empty { display: none; } .houskase-otp-widget .alert, .houskase-modal .alert { padding: 10px 13px; border-radius: 3px; font-size: 13px; margin: 12px 0 0; } .alert-success { background: #e6f4ea; color: #1b5e2b; border: 1px solid #bfe3ca; } .alert-error { background: #fdecea; color: #8a1c14; border: 1px solid #f5c4bf; } /* Checkout modal The dialog is moved to by the script, and the layout properties are forced because theme checkout styles otherwise win on specificity and the dialog ends up rendering inline in the page instead of over it. */ body.houskase-modal-open { overflow: hidden; } .houskase-modal { display: none; } .houskase-modal.is-open { display: flex !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 2147483000 !important; align-items: center !important; justify-content: center !important; padding: 20px !important; margin: 0 !important; } .houskase-modal[hidden] { display: none !important; } .houskase-modal-backdrop { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); } .houskase-modal-panel { position: relative !important; background: #fff !important; border-radius: 5px; padding: 28px 26px 24px !important; width: 100% !important; max-width: 400px !important; max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); text-align: left; } .houskase-modal-panel h3 { margin: 0 0 8px !important; font-size: 18px; } .houskase-modal-intro { margin: 0 0 18px !important; font-size: 14px; opacity: 0.85; } .houskase-modal-panel .form-group { margin-bottom: 14px; } .houskase-modal-panel label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; } .houskase-modal-panel .otp-input { width: 100% !important; padding: 12px !important; border: 1px solid #d5d5d5 !important; border-radius: 3px; text-align: center; letter-spacing: 6px; font-size: 20px; font-weight: 600; background: #fff; } .houskase-modal-panel .otp-input[readonly] { background: #f2f2f2; color: #666; cursor: not-allowed; } .houskase-countdown { margin: 8px 0 0 !important; font-size: 12px; opacity: 0.75; text-align: center; } .houskase-modal-panel .houskase-btn-primary { width: 100%; margin-top: 4px; } .houskase-modal-panel .houskase-btn-primary:disabled { opacity: 0.55; cursor: not-allowed; } .houskase-modal-close { position: absolute; top: 6px; right: 10px; background: none; border: none; font-size: 26px; line-height: 1; cursor: pointer; padding: 4px 8px; color: #666; } @media (max-width: 480px) { .houskase-modal-panel { padding: 24px 18px 20px !important; } } .houskase-otp-widget .houskase-code[readonly] { background: #f2f2f2; color: #666; cursor: not-allowed; }