/* ================================
PURELOCAL AUTH THEME
Used for: Login / Register / OTP
================================ */

/* ------ CSS RESET / BASE ------ */

*,
*::before,
*::after {
box-sizing: border-box;
}

html,
body {
margin: 0;
padding: 0;
}

body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-webkit-font-smoothing: antialiased;
color: #111827;
background: #f3f4f6;
}

/* basic link style for auth pages */
a {
color: inherit;
}

/* generic icon styling reused from main theme */
.icon-generic {
width: 18px;
height: 18px;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
stroke: currentColor;
}

/* ------ THEME VARIABLES (AUTH) ------ */

:root {
--primary: #2563eb;
--primary-soft: #eff6ff;
--accent: #f97316;
--text-main: #111827;
--text-muted: #6b7280;
--border-soft: #e5e7eb;
--bg-page: #f3f4f6;
}

/* ===== AUTH PAGES (LOGIN / REGISTER) ===== */

.auth-wrapper {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 24px 16px;
background: radial-gradient(circle at top, #eff6ff 0, #f3f4f6 40%, #e5e7eb 100%);
}

.auth-card {
max-width: 900px;
width: 100%;
display: grid;
grid-template-columns: 1.2fr 1.1fr;
gap: 0;
border-radius: 20px;
background: #ffffff;
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.18);
overflow: hidden;
}

/* left intro */

.auth-intro {
padding: 26px 26px 28px;
background: linear-gradient(135deg, #1d4ed8, #2563eb, #f97316);
color: #f9fafb;
position: relative;
}

.auth-logo-mark {
width: 44px;
height: 44px;
border-radius: 16px;
background: rgba(15, 23, 42, 0.35);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}

.auth-logo-mark .icon-generic {
width: 22px;
height: 22px;
stroke: #ffffff;
}

.auth-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 6px;
}

.auth-subtitle {
font-size: 13px;
line-height: 1.6;
color: #e5e7eb;
}

/* right form */

.auth-form-block {
padding: 26px 26px 24px;
background: #ffffff;
overflow: auto;
    max-height: 90vh;
}

.auth-form {
width: 100%;
}

/* fields */

.auth-field {
margin-bottom: 14px;
}

.auth-label {
display: block;
font-size: 12px;
font-weight: 500;
color: #374151;
margin-bottom: 4px;
}

.auth-input-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 7px 10px;
border-radius: 999px;
border: 1px solid var(--border-soft);
background: #f9fafb;
}

.auth-input-wrap:focus-within {
border-color: #2563eb;
background: #ffffff;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.06);
}

.auth-input-prefix {
display: flex;
align-items: center;
justify-content: center;
color: #9ca3af;
}

.auth-input-prefix .icon-generic {
width: 18px;
height: 18px;
}

.auth-input-wrap input {
border: none;
outline: none;
background: transparent;
font-size: 13px;
width: 100%;
color: #111827;
}

.auth-input-wrap input::placeholder {
color: #9ca3af;
}

/* error */

.auth-error {
margin-top: 4px;
font-size: 11px;
color: #b91c1c;
}

/* options row */

.auth-options-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-top: 4px;
margin-bottom: 14px;
font-size: 12px;
}

.auth-checkbox {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
color: #374151;
}

.auth-checkbox input {
width: 14px;
height: 14px;
}

.auth-link-sm {
font-size: 12px;
color: #2563eb;
text-decoration: none;
}

.auth-link-sm:hover {
text-decoration: underline;
}

/* primary button */

.auth-submit-btn {
width: 100%;
border-radius: 999px;
border: none;
background: #2563eb;
color: #ffffff;
font-size: 14px;
font-weight: 600;
padding: 9px 14px;
cursor: pointer;
box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.auth-submit-btn:hover {
background: #1d4ed8;
transform: translateY(-1px);
box-shadow: 0 18px 35px rgba(37, 99, 235, 0.4);
}

/* divider */

.auth-divider {
margin: 14px 0 10px;
display: flex;
align-items: center;
gap: 8px;
font-size: 11px;
color: #9ca3af;
}

.auth-divider span {
flex: 1;
height: 1px;
background: #e5e7eb;
}

/* secondary links */

.auth-secondary-links {
font-size: 12px;
color: #6b7280;
}

.auth-secondary-actions {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.auth-ghost-btn {
border-radius: 999px;
border: 1px solid #e5e7eb;
padding: 5px 10px;
font-size: 12px;
background: #ffffff;
color: #374151;
text-decoration: none;
cursor: pointer;
}

.auth-ghost-btn:hover {
border-color: #cbd5f5;
background: #f9fafb;
}

/* responsive */

@media (max-width: 880px) {
.auth-card {
grid-template-columns: 1fr;
}

.auth-intro {
padding: 20px 20px 18px;
}

.auth-form-block {
padding: 20px 20px 18px;
}
}

@media (max-width: 480px) {
.auth-wrapper {
padding: 16px 10px;
}

.auth-card {
border-radius: 16px;
}
}



/* small note text */
.auth-note {
margin-top: 4px;
font-size: 11px;
color: #6b7280;
}

/* row with Send OTP + Verify button */
.auth-otp-row {
display: flex;
gap: 8px;
align-items: center;
margin-top: 6px;
margin-bottom: 10px;
}

.auth-otp-row .auth-ghost-btn {
flex-shrink: 0;
white-space: nowrap;
}

.auth-otp-row .auth-submit-btn {
flex: 1;
}
/* file upload area on auth pages */
.auth-file-wrap {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 12px;
}

.auth-file-wrap input[type="file"] {
font-size: 12px;
}

.auth-file-hint {
font-size: 11px;
color: #6b7280;
}

/* small generic note text (can be reused) */
.auth-note {
font-size: 11px;
color: #6b7280;
}
/* ------ Forgot Password / Stepper & Password Eye ------ */

/* hide helper */
.auth-hidden {
display: none;
}

/* reused note text (if not already defined) */
.auth-note {
font-size: 11px;
color: #6b7280;
}

/* stepper */
.auth-stepper {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 14px;
font-size: 11px;
}

.auth-step-badge {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 52px;
padding: 4px 6px;
border-radius: 999px;
background: #f9fafb;
color: #6b7280;
border: 1px solid #e5e7eb;
}

.auth-step-badge span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
border-radius: 999px;
background: #e5e7eb;
font-size: 11px;
font-weight: 600;
}

.auth-step-badge p {
margin: 0;
font-size: 10px;
}

.auth-step-active {
background: #eef2ff;
border-color: #c7d2fe;
color: #1d4ed8;
}

.auth-step-active span {
background: #2563eb;
color: #ffffff;
}

.auth-step-line {
flex: 1;
height: 1px;
background: #e5e7eb;
}

/* OTP row buttons */
.auth-otp-row {
display: flex;
gap: 8px;
align-items: center;
margin-top: 6px;
margin-bottom: 10px;
}

.auth-otp-row .auth-ghost-btn {
flex-shrink: 0;
}

/* password eye button */
.auth-password-wrap {
padding-right: 6px; /* space for eye icon */
}

.auth-eye-btn {
border: none;
background: transparent;
cursor: pointer;
padding: 2px;
margin-left: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #9ca3af;
}

.auth-eye-btn .icon-generic {
width: 18px;
height: 18px;
}

/* when visible, make icon a bit darker */
.auth-eye-btn.auth-eye-visible {
color: #4b5563;
}
/* ===== BUSINESS REGISTRATION (STEP 1) ===== */

.br-intro-list {
margin: 14px 0 0;
padding-left: 18px;
font-size: 12px;
color: #e5e7eb;
list-style: disc;
}

.br-intro-list li + li {
margin-top: 3px;
}

/* inline rows for city/locality and email/website */
.br-inline-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.br-inline-field {
flex: 1 1 0;
}

/* select inside auth-input-wrap */
.br-select {
border: none;
outline: none;
background: transparent;
font-size: 13px;
width: 100%;
color: #111827;
}

/* checkbox inline under field */
.br-checkbox-inline {
margin-top: 6px;
font-size: 11px;
color: #4b5563;
}
/* ===== BUSINESS REGISTRATION STEP 2: ADDRESS & TIMINGS ===== */

/* reuse br-intro-list / br-inline-row / br-inline-field from step 1 */

/* textarea styling */
.br-textarea {
width: 100%;
border-radius: 12px;
border: 1px solid var(--border-soft);
padding: 8px 10px;
font-size: 13px;
resize: vertical;
min-height: 70px;
font-family: inherit;
}

.br-textarea:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.06);
background: #ffffff;
}

/* section heading for working hours */
.br-section-heading {
margin-top: 12px;
margin-bottom: 4px;
}

.br-section-heading h3 {
font-size: 14px;
font-weight: 600;
}

.br-section-heading span {
font-size: 12px;
color: #6b7280;
}

/* working hours card */
.br-hours-card {
border-radius: 14px;
border: 1px solid var(--border-soft);
background: #f9fafb;
padding: 10px 10px 10px;
margin-top: 6px;
}

/* grid of days */
.br-hours-grid {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12px;
}

.br-day-row {
display: grid;
grid-template-columns: 1.2fr 1.1fr auto 1.1fr 1.4fr;
align-items: center;
gap: 6px;
}

.br-day-label {
font-weight: 500;
color: #374151;
}

.br-time-input {
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #ffffff;
padding: 4px 8px;
font-size: 12px;
min-width: 0;
}

.br-time-input:focus {
outline: none;
border-color: #2563eb;
box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.06);
}

.br-time-sep {
text-align: center;
color: #6b7280;
font-size: 11px;
}

.br-day-closed {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: #4b5563;
}

.br-day-closed input {
width: 13px;
height: 13px;
}

/* actions row */
.br-actions-row {
margin-top: 14px;
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
}

/* responsive */
@media (max-width: 640px) {
.br-day-row {
grid-template-columns: 1.4fr 1.2fr auto 1.2fr;
grid-template-rows: auto auto;
row-gap: 4px;
}

.br-day-closed {
grid-column: 1 / -1;
justify-self: flex-start;
}
}




/* ===== BUSINESS REGISTRATION STEP 3: VERIFICATION & DOCS ===== */

.br-doc-card {
border-radius: 14px;
border: 1px solid var(--border-soft);
background: #f9fafb;
padding: 10px 11px 10px;
margin-top: 6px;
}

.br-doc-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}

.br-doc-col {
font-size: 12px;
}

.br-doc-title {
font-size: 13px;
font-weight: 600;
margin-bottom: 4px;
color: #111827;
}

.br-doc-optional {
font-size: 11px;
font-weight: 400;
color: #6b7280;
}

.br-doc-text {
font-size: 12px;
color: #6b7280;
margin-bottom: 6px;
line-height: 1.5;
}

/* small pill tags under docs */
.br-doc-tags {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}

.br-pill {
display: inline-flex;
align-items: center;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
background: #ecfdf5;
color: #15803d;
}

/* review note box */
.br-review-note {
margin-top: 10px;
padding: 8px 10px;
border-radius: 12px;
background: #fefce8;
border: 1px solid #facc15;
font-size: 12px;
color: #854d0e;
line-height: 1.5;
}

/* responsive for docs */
@media (max-width: 640px) {
.br-doc-grid {
grid-template-columns: 1fr;
}
}