/* Wonders of Blue Planet — standalone auth pages + phone country picker */ :root { --wbp-navy: #0c4a6e; --wbp-teal: #0077b6; --wbp-teal-deep: #023e8a; --wbp-cyan: #00b4d8; --wbp-border: #d0dde8; --wbp-muted: #64748b; --wbp-text: #0f172a; --wbp-white: #ffffff; --wbp-soft: #eef6fa; } /* Scoped to auth pages only — never paint storefront dark */ body.customer-login-body { margin: 0 !important; padding: 0 !important; padding-top: 0 !important; min-height: 100vh; min-height: 100dvh; overflow-x: hidden !important; font-family: Outfit, Inter, system-ui, sans-serif; color: var(--wbp-text); background: #0a2540 !important; } /* Storefront photo — fixed full viewport layer */ body.customer-login-body::after { content: ''; position: fixed; inset: 0; z-index: 0; background: url('../assets/images/storefront-auth.png') center center / cover no-repeat; pointer-events: none; } /* Even dark veil over the whole viewport — no scroll banding */ body.customer-login-body::before { content: ''; position: fixed; inset: 0; z-index: 1; background: rgba(0, 0, 0, 0.45); pointer-events: none; } body.customer-login-body .customer-login-screen { position: relative !important; z-index: 2 !important; inset: auto !important; width: 100% !important; max-width: 100% !important; min-height: 100vh !important; min-height: 100dvh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 28px 16px !important; box-sizing: border-box !important; overflow: visible !important; margin: 0 !important; background: transparent !important; } /* Kill old screen overlay that caused the horizontal dark band */ body.customer-login-body .customer-login-screen::before { content: none !important; display: none !important; } body.customer-login-body .customer-login-card { position: relative; z-index: 3; width: 100% !important; max-width: 420px !important; margin: auto !important; box-sizing: border-box !important; background: var(--wbp-white); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); padding: 36px 32px; } body.customer-login-body .customer-login-card--signup { max-width: 520px !important; } .login-logo { text-align: center; margin-bottom: 26px; } .login-logo img { display: block; margin: 0 auto 12px; width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: var(--wbp-soft); padding: 6px; box-sizing: border-box; } .login-logo h1 { margin: 0; font-size: 1.2rem; color: var(--wbp-teal); font-weight: 700; } .login-logo p { margin: 4px 0 0; font-size: 0.875rem; color: var(--wbp-muted); } .customer-login-form .form-group { margin-bottom: 16px; } .customer-login-form .form-group label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--wbp-muted); margin-bottom: 6px; } .customer-login-form .form-group input, .customer-login-form .form-group textarea, .customer-login-form .form-group select { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1.5px solid var(--wbp-border); border-radius: 10px; font: inherit; color: var(--wbp-text); background: #fff; } .customer-login-form .form-group input:focus, .customer-login-form .form-group textarea:focus, .customer-login-form .form-group select:focus, .pass-toggle:focus-visible, .btn-login:focus-visible { outline: none; border-color: rgba(0, 119, 182, 0.55); box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.18); } .pass-toggle:focus-visible { color: var(--wbp-teal); background: rgba(0, 180, 216, 0.1); } .pass-wrap { position: relative; } .pass-wrap input { padding-right: 44px !important; } .pass-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--wbp-muted); cursor: pointer; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; } .pass-toggle:hover { color: var(--wbp-teal); background: rgba(0, 180, 216, 0.1); } .login-error { color: #dc2626; font-size: 0.875rem; margin: 0 0 12px; min-height: 1.2em; } .login-error.hidden { display: none; } .btn-login { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; border: none; border-radius: 10px; background: var(--wbp-teal); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: background 0.15s ease; } .btn-login:hover { background: var(--wbp-teal-deep); } .btn-login:disabled { opacity: 0.7; cursor: not-allowed; } .login-forgot, .login-hint { text-align: center; font-size: 0.875rem; color: var(--wbp-muted); margin: 14px 0 0; } .login-forgot a, .login-hint a { color: var(--wbp-teal); font-weight: 600; text-decoration: none; } .login-forgot a:hover, .login-hint a:hover { text-decoration: underline; } .password-rules-wrap--compact { margin-top: 10px; padding: 12px 14px; background: var(--wbp-soft); border-radius: 10px; border: 1px solid var(--wbp-border); } .password-rules-title { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; color: var(--wbp-navy); } .password-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .password-rule { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--wbp-muted); } .password-rule i { width: 14px; color: #94a3b8; } .password-rule--ok { color: #059669; } .password-rule--ok i { color: #059669; } /* Phone input + flag picker (profile + signup) */ .phone-input-row, body.customer-login-body .phone-input-row { display: grid; grid-template-columns: minmax(170px, 210px) minmax(0, 1fr); gap: 12px; align-items: stretch; } .phone-country-picker { position: relative; min-width: 0; max-width: 210px; } .phone-country-select-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; } .phone-country-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 9px 12px; border: 1.5px solid var(--wbp-border); border-radius: 10px; background: #fff; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; } .phone-country-trigger:hover { border-color: rgba(0, 119, 182, 0.4); } .phone-country-trigger:focus { outline: none; border-color: var(--wbp-teal); box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.18); } .phone-country-flag { font-size: 1.35rem; line-height: 1; flex-shrink: 0; } .phone-country-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .phone-country-name { font-size: 0.875rem; font-weight: 600; color: var(--wbp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .phone-country-dial { font-size: 0.75rem; color: var(--wbp-muted); font-weight: 500; } .phone-country-chevron { font-size: 0.7rem; color: var(--wbp-muted); flex-shrink: 0; } .phone-country-panel { position: absolute; z-index: 80; top: calc(100% + 4px); left: 0; right: 0; min-width: 220px; background: #fff; border: 1.5px solid var(--wbp-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14); overflow: hidden; } .phone-country-search { width: 100%; padding: 10px 12px; border: none; border-bottom: 1.5px solid var(--wbp-border); border-radius: 0; background: #fff; font: inherit; font-size: 0.875rem; box-sizing: border-box; } .phone-country-search:focus { outline: none; background: rgba(0, 180, 216, 0.06); } .phone-country-menu { max-height: 240px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; } .phone-country-empty { padding: 12px 10px; text-align: center; font-size: 0.875rem; color: var(--wbp-muted); } .phone-country-option { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; } .phone-country-option:hover, .phone-country-option.is-selected { background: rgba(0, 180, 216, 0.12); } .phone-country-option .phone-country-name { flex: 1; font-weight: 500; } .phone-country-option .phone-country-dial { font-size: 0.8125rem; font-weight: 600; } .phone-input-row input[type="tel"], .profile-phone-row input[type="tel"] { width: 100%; min-width: 0; min-height: 46px; padding: 11px 12px; border: 1.5px solid var(--wbp-border); border-radius: 10px; background: #fff; font: inherit; box-sizing: border-box; } .customer-login-form .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 560px) { .customer-login-form .form-row-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { body.customer-login-body .customer-login-card, body.customer-login-body .customer-login-card--signup { padding: 28px 18px; } .phone-input-row, .profile-phone-row, .customer-login-form .form-group .phone-input-row { grid-template-columns: 1fr; } .phone-country-picker { max-width: none; } }