body.modal-open .modal-backdrop {
    background: transparent !important;
    opacity: 0 !important;
} 

#auth-modal .modal-dialog {
    transform: translateY(90px);
}

.auth-modal {
   background: #fff;
    padding: 25px;
    max-width: 400px;
    height: 340px; /* підбери під свій контент */
    margin: 40px auto;
    border-radius: 10px;
    position: relative;
    z-index: 9999;
    background: #fff !important; 
	border: 2px solid #E6E6E6;
    border-color: #fff !important; /* помаранчевий фон */
	box-shadow: inset 0 1px 0 0 #fff;
-moz-box-shadow: inset 0 1px 0 0 #fff;
-webkit-box-shadow: inset 0 1px 0 0 #fff;
border-bottom-color: brown; 
text-shadow: 0 -1px 0 #196ebb;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
	
}

.auth-tabs {
    display: flex;
    margin-bottom: 15px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    cursor: pointer;
    background: {{ cxz }}; /*#eee;*/
    border: none;
    outline: none;
}

.tab-btn.active {
    background:  #5BBCCB;
    color: #fff;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}
#login-btn, #register-btn {
  background:  #5BBCCB;
  color:#fff;
  height:30px;
}

.form-row {
    margin-bottom: 10px;
}
.form-row input {
    border-radius: 10px;
	height:30px;
    border: 1px solid #ccc; /* Usually looks better with a defined border */
    padding: 10px;          /* Optional: adds space inside the box */
}
.password-field {
    position: relative;
}

.password-field input {
    width: 100%;
    padding-right: 40px;
}

.toggle-pass {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.form-error {
    color: red;
    font-size: 0.9em;
    margin-bottom: 10px;
}

@media (max-width:768px){
.auth-modal {
    height: 350px; 
}
#auth-modal .modal-dialog {
    transform: translateY(30px);
}

}