body{
    height:100%;
}

.row{
    margin-bottom: 0;
    text-align: center;
}
.row .btn{
    background-color: #d1c4e9;
    width: 100%;
}

.row .label{
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
}

/* ============================================
   Signup form – field labels and hints
   (loaded with forgot_pass.css for .flex / .input-field base)
   ============================================ */

/* Signup form: show field labels as floating hints (including email and province).
   z-index above input (forgot_pass sets input z-index: 10) so hint sits on top when empty. */
form[name="signup-form"] .input-field label,
form[name="signup-form"] .input-field label[for="email"],
form[name="signup-form"] .input-field #province-display + label,
form[name="signup-form"] .province-dropdown-container label[for="province-display"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transform-origin: 0 0 !important;
    font-size: 1rem !important;
    pointer-events: none !important;
    z-index: 11 !important;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out, color 0.2s ease-out !important;
    margin: 0 !important;
}
/* Hide hint when user focuses or types – only their text should be visible */
form[name="signup-form"] .input-field input:focus + label,
form[name="signup-form"] .input-field input:not(:placeholder-shown) + label,
form[name="signup-form"] .input-field input.active + label,
form[name="signup-form"] .input-field #province-display:focus + label,
form[name="signup-form"] .input-field #province-display:not(:placeholder-shown) + label {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out !important;
}
/* Hide province hint when a province has been selected (JS adds .active to the label) */
form[name="signup-form"] .input-field #province-display + label.active,
form[name="signup-form"] .province-dropdown-container label[for="province-display"].active {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out !important;
}

/* Force email label visible when empty (above input so hint is visible in light mode) */
form[name="signup-form"] .input-field label[for="email"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    clip-path: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 11 !important;
    transition: opacity 0.15s ease-out, visibility 0.15s ease-out !important;
}
/* Hide email hint when focused or when field has content */
form[name="signup-form"] .input-field #email:focus + label[for="email"],
form[name="signup-form"] .input-field #email:not(:placeholder-shown) + label[for="email"],
form[name="signup-form"] .input-field #email.active + label[for="email"] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Placeholder is only used for :placeholder-shown (hide hint when typing) – keep it invisible */
form[name="signup-form"] .input-field input::placeholder,
form[name="signup-form"] .input-field input::-webkit-input-placeholder,
form[name="signup-form"] .input-field input::-moz-placeholder {
    color: transparent !important;
    opacity: 1;
}

/* Light mode: signup field hints and info text gray for contrast (override .input-field { color: white }) */
html:not(.theme-dark) form[name="signup-form"] .info-text {
    color: #6b7280 !important;
}
html:not(.theme-dark) form[name="signup-form"] .input-field label,
html:not(.theme-dark) form[name="signup-form"] .input-field .label {
    color: #6b7280 !important;
}

/* Light mode: email hint must be visible and gray (white input background) */
html:not(.theme-dark) form[name="signup-form"] .input-field label[for="email"] {
    color: #6b7280 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Light mode: province hint – visible, gray, only when no province selected (no .active) */
html:not(.theme-dark) form[name="signup-form"] .input-field #province-display + label:not(.active),
html:not(.theme-dark) form[name="signup-form"] .province-dropdown-container label[for="province-display"]:not(.active) {
    color: #6b7280 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 1rem !important;
}
/* Hide province hint when selected (light + dark) – must override show rules */
html:not(.theme-dark) form[name="signup-form"] .input-field #province-display + label.active,
html:not(.theme-dark) form[name="signup-form"] .province-dropdown-container label[for="province-display"].active,
html.theme-dark form[name="signup-form"] .input-field #province-display + label.active,
html.theme-dark form[name="signup-form"] .province-dropdown-container label[for="province-display"].active {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}
html:not(.theme-dark) form[name="signup-form"] .input-field #province-display:focus + label,
html:not(.theme-dark) form[name="signup-form"] .input-field #province-display:not(:placeholder-shown) + label {
    color: #4b5563 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Dark mode: signup labels visible and muted */
html.theme-dark form[name="signup-form"] .input-field label,
html.theme-dark form[name="signup-form"] .input-field .label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Dark mode: keep signup password inputs dark on focus (override shared forgot_pass styles). */
html.theme-dark form[name="signup-form"] #password,
html.theme-dark form[name="signup-form"] #confirm_password {
    background-color: rgba(17, 24, 39, 0.95) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

html.theme-dark form[name="signup-form"] #password:focus,
html.theme-dark form[name="signup-form"] #confirm_password:focus {
    background-color: rgba(17, 24, 39, 1) !important;
    border-color: #E31262 !important;
    box-shadow: 0 4px 16px rgba(227, 18, 98, 0.25), 0 0 0 4px rgba(227, 18, 98, 0.15) !important;
}

/* Dark mode: lock signup field widths to match light mode. */
html.theme-dark form[name="signup-form"] .row,
html.theme-dark form[name="signup-form"] .col.s12,
html.theme-dark form[name="signup-form"] .input-field,
html.theme-dark form[name="signup-form"] .input-field input,
html.theme-dark form[name="signup-form"] #province-display,
html.theme-dark form[name="signup-form"] .province-dropdown-container,
html.theme-dark form[name="signup-form"] .province-dropdown,
html.theme-dark form[name="signup-form"] .btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}