/* Ensure full height for proper centering */
html, body, #app, main {
    height: 100%;
    margin: 0;
}

/* Page background */
body {
    background-color: #f6f8f9; /* light grey */
    font-family: 'Golos Text', sans-serif;
}

/* Center the card vertically and horizontally */
.container-fluid.h-100 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}

/* Card styling */
.card {
    background-color: #ffffff; /* white form */
    border: none;              
    border-radius: 0.25rem;    
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 400px;
    padding: 1.5rem 2rem;  /* reduce top/bottom padding to better center logo */
    text-align: center;     /* ensures all content including logo is centered */
}
/* Small, muted placeholders inside the card/form */
.card ::placeholder {
    font-size: 0.875rem; /* smaller font (14px) */
    color: #6c757d;      /* Bootstrap's muted gray */
    opacity: 1;          /* ensure color is fully applied in all browsers */
}
/* Remove blue border and shadow on focus for inputs inside the card */
.card input.form-control,
.card textarea.form-control,
.card select.form-control {
    border-color: #ced4da;   /* neutral border */
    box-shadow: none;         /* remove blue shadow on focus */
}

.card input.form-control:focus,
.card textarea.form-control:focus,
.card select.form-control:focus {
    border-color: #ced4da;   /* neutral border on focus */
    box-shadow: none;         /* remove default blue focus shadow */
    outline: none;            /* remove outline */
}
#customBtn {
    background-color: #3d67ab; /* your custom color */
    color: white;               /* text color */
    border: none;               /* optional: remove border */
}

#customBtn:hover {
    background-color: #3d67ab; /* slightly darker on hover */
}
/* Custom input height */
#register-form .form-control,
#register-form .form-select {
    height: 40px; /* adjust as needed */
    font-size: 14px; /* optional: larger text */
    padding: 0.5rem 0.75rem; /* adjust vertical padding */
    border-radius: 12px;
}
/* Reduce vertical spacing between inputs in the registration form */
#register-form .mb-3 {
    margin-bottom: 0.5rem; /* reduce from 1rem to 0.5rem */
}
/* Custom modal border radius */
#registerModal .modal-content {
    border-radius: 1rem; /* adjust as needed */
}
/* Reduce space between modal-header and modal-body */
#registerModal .modal-header {
    padding-bottom: 0.5rem; /* reduce bottom padding */
}

#registerModal .modal-body {
    padding-top: 0.5rem; /* reduce top padding */
}

#registerBtn {
    border-radius: 12px;
}



/* Disabled state */
#registerBtn:disabled {
    background-color: #dfe3e5; /* grey */
    color: #b2bdc4;
    cursor: not-allowed;
}

/* Enabled state */
#registerBtn:not(:disabled) {
    background-color: #4e7c05; /* red */
    color: #fff;
    transition: background-color 0.3s;
}

/* Hover effect */
#registerBtn:not(:disabled):hover {
    background-color: #4e7c05; /* darker red on hover */
}