/* ============================================================
   BuhayAhente — Registration Page (standalone, replaces the
   old homepage signup modal). Scoped under .regpage so it can
   never leak into any other page/layout.

   Visual-only redesign to match the approved reference designs
   (desktop split layout with photo panel, full-bleed white form
   side, and a dedicated mobile layout that hides the promo
   panel entirely). No field names/ids/endpoints changed — see
   register.php header comment for details.
   ============================================================ */

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

.regpage h1,
.regpage h2,
.regpage p,
.regpage ul {
    margin: 0;
}

html:has(body.regpage) {
    height: 100%;
}

.regpage {
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    overflow: hidden; /* desktop: the outer page never scrolls — only .regpage-form-col does */
}

.regpage-shell {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    display: flex;
    align-items: stretch;
    animation: regpageFadeInUp 0.5s ease both;
}

@keyframes regpageFadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .regpage-shell { animation: none; }
}

/* ---------- Left: marketing / promo column ---------- */
/* Fixed, never scrolls. All spacing below uses clamp()/vh so the
   logo, headline, description, feature list AND footer copyright
   all fit inside the viewport with no clipping and no scrolling,
   from short 1366x768 laptop screens up through tall 2560x1440
   displays — see TESTING REQUIREMENTS in the task brief. */
.regpage-marketing {
    width: 40%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    padding: clamp(28px, 5vh, 56px) clamp(32px, 4vw, 56px) clamp(20px, 3vh, 36px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    color: #ffffff;
    background-image:
        linear-gradient(190deg, rgba(8, 16, 42, 0.62) 0%, rgba(6, 12, 32, 0.82) 100%),
        url('../images/register-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Content block grows to fill whatever space is left after the logo
   and footer, then centers itself and spaces its own children out
   evenly (gap) — so extra room on tall/short screens gets shared
   across every gap instead of collecting in one spot near the
   bottom. */
.regpage-marketing-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(22px, 4.5vh, 52px);
}

.regpage-logo-wrap {
    display: inline-flex;
    align-self: flex-start;
    flex: none;
}

.regpage-logo-wrap a {
    display: block;
    transition: opacity .15s ease;
}
.regpage-logo-wrap a:hover {
    opacity: .85;
}

.regpage-logo {
    max-width: 190px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.regpage-hero {
    font-size: clamp(26px, 3.6vh, 44px);
    font-weight: 800;
    line-height: 1.24;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
    flex: none;
}

.regpage-hero .regpage-hero-highlight {
    color: #ef4444;
}

.regpage-description {
    font-size: clamp(14px, 1.9vh, 18px);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 42ch;
    flex: none;
}

.regpage-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2.6vh, 26px);
    flex: none;
}

.regpage-features li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.regpage-icon-badge {
    flex: none;
    width: clamp(34px, 4.4vh, 44px);
    height: clamp(34px, 4.4vh, 44px);
    border-radius: 50%;
    background: #ffffff;
    color: #0f1f4b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(14px, 1.9vh, 17px);
    margin-top: 1px;
}

.regpage-feature-title {
    display: block;
    font-size: clamp(14px, 1.8vh, 16px);
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 3px;
}

.regpage-feature-text {
    display: block;
    font-size: clamp(12px, 1.5vh, 14px);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.75);
}

.regpage-marketing-footer {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-top: clamp(20px, 3.5vh, 40px);
    flex: none;
}

/* ---------- Right: registration form column ---------- */
/* Independently scrollable — this is the ONLY element that scrolls
   on desktop. The outer .regpage / .regpage-shell stay locked to
   100vh with overflow hidden (see above), so the browser page itself
   never scrolls; only this panel does. */
.regpage-form-col {
    width: 60%;
    height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Shrinks on shorter laptop screens (e.g. 1366x768) so the whole
       form fits without an internal scrollbar; stays roomy on tall
       displays. overflow-y:auto below remains as a safety net for
       anything shorter still (very small windows, high browser zoom). */
    padding: clamp(20px, 4vh, 56px) clamp(40px, 6vw, 80px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.regpage-form-inner {
    width: 100%;
    max-width: 620px;
    margin: auto;
}

.regpage-form-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: clamp(14px, 2.6vh, 28px);
}

.regpage-form-avatar {
    flex: none;
    width: clamp(44px, 6vh, 56px);
    height: clamp(44px, 6vh, 56px);
    border-radius: 50%;
    background: #fce8e8;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(18px, 2.6vh, 22px);
}

.regpage-form-heading {
    font-size: clamp(22px, 3vh, 30px);
    font-weight: 700;
    color: #0f1f4b;
    margin-bottom: 6px;
}

.regpage-form-subtitle {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 0;
}

.regpage-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}

.regpage-required {
    color: #dc2626;
}

.regpage-input-wrap {
    position: relative;
}

.regpage-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    font-size: 15px;
    pointer-events: none;
}

.regpage-input.regpage-has-leading-icon {
    padding-left: 44px;
}

.regpage-input,
.regpage-form-col input.form-control {
    height: clamp(44px, 6.5vh, 56px);
    width: 100%;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px;
    color: #111827;
    background: #ffffff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.regpage-input:focus,
.regpage-form-col input.form-control:focus {
    outline: none;
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}

.regpage-input.is-invalid {
    border-color: #dc2626;
}

.regpage-input-wrap .regpage-toggle-pw {
    position: absolute;
    right: 4px;
    top: 4px;
    height: 48px;
    width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #9ca3af;
    border-radius: 10px;
}

.regpage-input-wrap .regpage-toggle-pw:hover {
    color: #4b5563;
    background: #f3f4f6;
}

.regpage-input-wrap input[type="password"],
.regpage-input-wrap input[type="text"].regpage-has-toggle {
    padding-right: 52px;
}

/* Confirm-password field also reserves room for the match icon,
   which sits just to the left of the show/hide toggle button.
   (Confirm password isn't shown in the reference mockups, but the
   backend requires it for match validation, so it's kept — styled
   to match the rest of the form — rather than removed.) */
#regPasswordConfirm {
    padding-right: 80px;
}

/* URL / username field */
.regpage-url-group {
    display: flex;
    align-items: stretch;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    overflow: hidden;
    background: #ffffff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.regpage-url-group:focus-within {
    border-color: #dc2626;
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.10);
}

.regpage-url-prefix {
    flex: none;
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: #f8fafc;
    color: #6b7280;
    font-size: 15px;
    border-right: 1px solid #e5e7eb;
    white-space: nowrap;
}

.regpage-url-group input {
    border: none;
    box-shadow: none !important;
    height: clamp(42px, 6.3vh, 54px);
    min-width: 0; /* let the input actually shrink inside the flex row on narrow screens */
    flex: 1 1 auto;
}

.regpage-url-group:focus-within input { border: none; }

@media (max-width: 380px) {
    .regpage-url-prefix {
        font-size: 13px;
        padding: 0 8px;
    }
    /* Hide the "https://" scheme at very narrow widths — the domain
       itself stays visible so the field's purpose is still clear,
       but this frees up meaningful width for the actual input on a
       320–375px phone. */
    .regpage-url-scheme {
        display: none;
    }
}

.regpage-hint {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 6px;
}

/* Availability status (✓ Available / ✖ Already taken) — scoped to
   this page only; the shared .auth-field-status color rules in
   app.css still apply, this just adds the inline icon + spacing. */
.regpage-form-col .auth-field-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 16px;
}

.regpage-form-col .auth-field-status i {
    font-size: 12px;
}

/* Password strength meter */
.regpage-strength {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .25s ease, margin .25s ease;
}

.regpage-strength.is-visible {
    max-height: 40px;
    opacity: 1;
    margin-top: clamp(6px, 1.2vh, 10px);
}

.regpage-strength-track {
    height: 5px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.regpage-strength-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: #dc2626;
    transition: width .25s ease, background-color .25s ease;
}

.regpage-strength-fill.is-level-1 { width: 33%; background: #ef4444; }
.regpage-strength-fill.is-level-2 { width: 66%; background: #f59e0b; }
.regpage-strength-fill.is-level-3 { width: 100%; background: #16a34a; }

.regpage-strength-label {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
}

/* Live password requirements checklist — purely visual feedback;
   does not change any server-side password rule. */
.regpage-pw-checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .25s ease, margin .25s ease;
}

.regpage-pw-checklist.is-visible {
    max-height: 60px;
    opacity: 1;
    margin-top: clamp(5px, 1vh, 8px);
}

.regpage-pw-checklist li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9ca3af;
    transition: color .2s ease;
}

.regpage-pw-checklist li i {
    font-size: 12px;
    color: #d1d5db;
    transition: color .2s ease;
}

.regpage-pw-checklist li.is-met {
    color: #15803d;
}

.regpage-pw-checklist li.is-met i {
    color: #16a34a;
}

/* Confirm-password match icon */
.regpage-match-icon {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    color: #16a34a;
    font-size: 15px;
    pointer-events: none;
}

.regpage-match-icon.is-visible {
    display: inline-flex;
}

.regpage-field-terms {
    margin-top: -4px;
}

.regpage-terms {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.regpage-terms input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex: none;
    accent-color: #dc2626;
}

.regpage-terms label {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

.regpage-terms a {
    color: #dc2626;
    font-weight: 600;
    text-decoration: none;
}

.regpage-terms a:hover {
    text-decoration: underline;
}

/* Security-check (math CAPTCHA) field — not part of the reference
   mockups, but required server-side (Core\Captcha::verify), so it's
   restyled to match the rest of the form instead of being removed. */
.regpage-form-col .captcha-field {
    margin-bottom: clamp(12px, 2.2vh, 22px);
}

.regpage-form-col .captcha-field label {
    display: block;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 6px !important;
}

.regpage-btn {
    width: 100%;
    height: clamp(46px, 6.5vh, 56px);
    border-radius: 12px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 55%, #b91c1c 100%);
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    border: none;
    box-shadow: 0 8px 20px rgba(220, 38, 38, 0.22);
    transition: all .3s ease;
    margin-top: 4px;
}

.regpage-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #f87171 0%, #dc2626 55%, #991b1b 100%);
    box-shadow: 0 10px 24px rgba(220, 38, 38, 0.3);
    transform: translateY(-2px);
}

.regpage-btn:disabled {
    opacity: 0.85;
    transform: none;
    cursor: not-allowed;
}

p.regpage-login-link {
    text-align: center;
    font-size: 14px;
    color: #6b7280;
    margin-top: clamp(14px, 2.2vh, 22px);
}

.regpage-login-link a {
    color: #dc2626;
    font-weight: 600;
    text-decoration: none;
}

.regpage-login-link a:hover {
    text-decoration: underline;
}

.regpage-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 14px;
    margin-bottom: clamp(10px, 2vh, 18px);
    white-space: pre-line;
}

.regpage-alert.regpage-alert-success {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #15803d;
}

/* Focus visibility for accessibility */
.regpage-btn:focus-visible,
.regpage-toggle-pw:focus-visible,
.regpage-terms input:focus-visible,
.regpage-input:focus-visible {
    outline: 3px solid rgba(15, 31, 75, 0.4);
    outline-offset: 2px;
}

.regpage-field {
    margin-bottom: clamp(12px, 2.2vh, 22px);
}

/* Group related fields side-by-side on desktop (Full name + Email,
   Password + Confirm password) to reduce vertical scrolling — pure
   layout change, each .regpage-field keeps its own label/input/error
   exactly as before. Collapses to a single column below 993px. */
.regpage-field-row {
    display: flex;
    gap: 20px;
}

.regpage-field-row > .regpage-field {
    flex: 1 1 0;
    min-width: 0;
}

/* Desktop-only logo (hidden on mobile, since mobile uses regpage-logo-mobile-wrap) */
.regpage-logo-mobile-wrap {
    display: none;
}

/* ============================================================
   TABLET (<= 992px): two columns still shown side by side but
   scaled down proportionally — no overlap, tighter spacing.
   ============================================================ */
@media (max-width: 992px) and (min-width: 641px) {
    .regpage-marketing {
        padding: 40px 36px 28px;
    }

    .regpage-marketing-inner {
        gap: 20px;
    }

    .regpage-logo {
        max-width: 150px;
    }

    .regpage-hero {
        font-size: 30px;
    }

    .regpage-description {
        font-size: 14px;
    }

    .regpage-features {
        gap: 16px;
    }

    .regpage-icon-badge {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .regpage-feature-title {
        font-size: 14px;
    }

    .regpage-feature-text {
        font-size: 12px;
    }

    .regpage-form-col {
        padding: 40px 32px;
    }

    .regpage-form-heading {
        font-size: 24px;
    }

    .regpage-field-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ============================================================
   MOBILE (<= 640px): matches the approved Mobile Design View
   exactly — promo/photo panel, feature highlights and background
   image are not rendered at all (lighter DOM + no image request),
   leaving only: logo, heading, registration form, submit button,
   and the login link.
   ============================================================ */
@media (max-width: 640px) {
    .regpage {
        background: #ffffff;
        height: auto;
        min-height: 100vh;
        max-height: none;
        overflow: visible; /* mobile keeps normal page scrolling, unchanged */
    }

    .regpage-shell {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
    }

    .regpage-marketing {
        display: none;
    }

    .regpage-form-col {
        width: 100%;
        height: auto;
        min-height: 100vh;
        padding: 32px 22px 40px;
        justify-content: flex-start;
        overflow-y: visible;
    }

    .regpage-form-inner {
        max-width: 100%;
        margin: 0 auto;
    }

    .regpage-field-row {
        flex-direction: column;
        gap: 0;
    }

    .regpage-logo-mobile-wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 22px;
    }

    .regpage-logo-mobile-wrap a {
        display: block;
        transition: opacity .15s ease;
    }
    .regpage-logo-mobile-wrap a:hover {
        opacity: .85;
    }

    .regpage-logo-mobile {
        max-width: 190px;
        width: auto;
        height: auto;
        object-fit: contain;
    }

    .regpage-form-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        margin-bottom: 22px;
    }

    .regpage-form-avatar {
        display: none;
    }

    .regpage-form-heading {
        font-size: 30px;
        font-weight: 800;
    }

    .regpage-form-subtitle {
        font-size: 15px;
    }

    .regpage-label {
        margin-bottom: 5px;
    }

    .regpage-input,
    .regpage-form-col input.form-control {
        height: 50px;
        font-size: 15px;
    }

    .regpage-url-group input {
        height: 48px;
        font-size: 15px;
    }

    .regpage-input-wrap .regpage-toggle-pw {
        height: 40px;
        width: 40px;
        top: 5px;
        right: 4px;
    }

    .regpage-match-icon {
        right: 42px;
        font-size: 14px;
    }

    #regPasswordConfirm {
        padding-right: 72px;
    }

    .regpage-field {
        margin-bottom: 18px;
    }

    .regpage-btn {
        height: 52px;
        font-size: 17px;
    }

    .regpage-alert {
        padding: 10px 14px;
        margin-bottom: 16px;
        font-size: 13px;
    }
}

/* ============================================================
   "Continue with Google" button + divider (register.php)
   Purely additive — matches the existing .regpage-input border/
   radius language so it feels native to this form, not bolted on.
   ============================================================ */
.regpage-oauth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: clamp(42px, 6.3vh, 52px);
    border-radius: 12px;
    border: 1.5px solid #e2e5f0;
    background: #ffffff;
    color: #1f2937;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
    margin-bottom: clamp(12px, 2.2vh, 22px);
}

.regpage-oauth-btn:hover {
    background: #f9fafb;
    border-color: #cbd2e0;
    color: #1f2937;
    transform: translateY(-1px);
}

.regpage-oauth-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.regpage-oauth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    margin: 0 0 clamp(12px, 2.2vh, 22px);
}

.regpage-oauth-divider::before,
.regpage-oauth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e5e7eb;
}

.regpage-oauth-divider span {
    padding: 0 14px;
    white-space: nowrap;
}

@media (max-width: 380px) {
    .regpage-oauth-btn {
        font-size: 14px;
        height: 48px;
    }
}