:root {
   --color-default: #4abc9d;
   --color-default-2: #d4d408;
   --color-default-gradient: linear-gradient(280deg, rgba(74, 188, 157, 1) 0%, rgba(0, 162, 233, 1) 100%) !important;
   --color-default-secondary: #eee;
   --font-size: 1rem;
   --menu-prime-color: #707070;
   --bs-form-valid-border-color: #198754;
   --bs-form-invalid-border-color: #dc3545;
}

.daftar-header {
   background-color: var(--color-white);
   /* ganti dengan warna yang kamu inginkan */
   /* border-bottom: 5px solid var(--color-default-2); */
   /* garis bawah */
   color: var(--color-default);
   display: flex;
   align-items: center;
   justify-content: center;
}

.color-zagi {
   color: var(--color-default);
}

.bg-zagi {
   background-color: var(--color-default);
   /* ganti dengan warna yang kamu inginkan */
}

.bg-zagi-secondary {
   background-color: var(--color-default-secondary);
   /* ganti dengan warna yang kamu inginkan */
}

.bg-zagi-gradient {
   background: var(--color-default-gradient);
   /* ganti dengan warna yang kamu inginkan */
}

.hp {
   display: none;
}

/* .daftar-header {
   background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
} */

.floating-label {
   position: relative;
   width: 100%;
}

.floating-label>.form-select {
   box-shadow: none !important;
}


label.label-zagi {
   font-size: var(--font-size);
   padding-left: 1.5rem;
   color: var(--menu-prime-color);
}



.form-select,
.form-control {
   font-size: var(--font-size);
   /* padding: 0.5rem;
   padding-left: 1rem; */
   border-radius: 0.25rem;
   border: 1px solid #ced4da;
   background-color: #fff;
   color: #495057;
   transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.form-select {
   line-height: 1.6 !important;
   box-shadow: none !important;
}


.floating-label input,
.floating-label select,
.floating-label textarea {
   font-weight: 500;
   padding: 0.5rem;
   padding-left: 1rem;
   outline: none;
   transition: border-color 0.2s ease-in-out;
}

/* Mengatasi background autocomplete pada Chrome/Safari */
.floating-label input:-webkit-autofill,
.floating-label input:-webkit-autofill:hover,
.floating-label input:-webkit-autofill:focus,
.floating-label input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 30px white inset !important;
   -webkit-text-fill-color: #000 !important;
}

/* Mengatasi background autocomplete pada Firefox */
.floating-label input:autofill {
   background-color: #fff !important;
}

.floating-label input:focus,
.floating-label select:focus,
.floating-label textarea:focus {
   border: 2px solid #2196f3;
   cursor: text;
   box-shadow: none !important;
}

.floating-label input:disabled,
.floating-label select:disabled,
.floating-label textarea:disabled,
.floating-label .form-select:disabled {
   background-color: var(--input-border) !important;
   cursor: not-allowed !important;
   color: var(--bs-secondary-color) !important;
   pointer-events: all !important;
}

.floating-label .form-control:disabled+label.label-zagi,
.floating-label .form-select:disabled+label.label-zagi {
   background-color: inherit !important;
}

.floating-label label.label-zagi {
   position: absolute;
   top: 0.5rem;
   left: 0.75rem;
   font-size: var(--font-size);
   background-color: #fff;
   padding: 0 0.25rem 0 0;
   color: var(--menu-prime-color);
   transition: all 0.2s ease-in-out;
   pointer-events: none;
   width: 80%;
}


.floating-label .label-zagi.active-label,
.floating-label input:focus+label.label-zagi,
.floating-label input:not(:placeholder-shown)+label.label-zagi,
.floating-label textarea:focus+label.label-zagi,
.floating-label textarea:not(:placeholder-shown)+label.label-zagi,
.floating-label select:focus+label.label-zagi,
.floating-label select:valid+label.label-zagi {
   top: -0.75rem !important;
   left: 1rem !important;
   font-size: var(--font-size) !important;
   color: #2196f3 !important;
   width: auto !important;
   height: 1.25rem !important;
}

/* Penyesuaian untuk tombol mata */
.floating-label .toggle-password {
   z-index: 3;
   color: var(--menu-prime-color);
   background: transparent;
   border: none;
   padding: 0 10px;
   top: 50%;
   transform: translateY(-50%);
}

.floating-label .toggle-password:hover {
   color: var(--color-default);
}

/* Padding untuk memberi ruang tombol mata */
.floating-label .form-control.pe-5 {
   padding-right: 2.5rem !important;
}

.valid-feedback,
.invalid-feedback {
   position: relative !important;
}

/* .was-validated .form-control:invalid,
.form-control.is-invalid {
   margin-bottom: 0.75rem !important;
} */

.form-control.is-valid~.toggle-password,
.was-validated .form-control:valid~.toggle-password,
.was-validated .form-control:invalid~.toggle-password,
.form-control.is-invalid~.toggle-password {
   top: 20%;
   transform: translateY(-0%);
}

.form-control.is-valid,
.was-validated .form-control:valid {
   background-image: none !important;
}

.form-control.is-valid {
   border-color: var(--bs-form-valid-border-color) !important;
}

.form-control.is-invalid {
   border-color: var(--bs-form-invalid-border-color) !important;
}

/* Override Bootstrap's was-validated if needed */
.was-validated .form-control:invalid {
   border-color: var(--bs-form-invalid-border-color);
}

.was-validated .form-control:valid {
   border-color: var(--bs-form-valid-border-color);
}

/* Enhanced Form Loading States CSS */

/* Submit button loading state */
#submitButton {
   position: relative;
   transition: all 0.3s ease;
   min-height: 45px;
}

#submitButton:disabled {
   background-color: #6c757d !important;
   border-color: #6c757d !important;
   cursor: not-allowed !important;
   opacity: 0.8;
}

#submitButton.disabled {
   pointer-events: none;
}

/* Loading spinner styling */
#loadingSpinner {
   width: 1rem;
   height: 1rem;
   margin-right: 0.5rem;
}


.loading-indicator {
   position: absolute;
   right: 40px;
   top: 50%;
   transform: translateY(-50%);
   display: none;
}

.spinner {
   width: 20px;
   height: 20px;
   border: 2px solid #f3f3f3;
   border-top: 2px solid #0d6efd;
   border-radius: 50%;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

.alert-dismissible {
   padding-right: 1.75rem !important;
}

ul.zagi-list {
   font-size: 0.875rem;
   padding-left: 1rem;
}

/* ul.zagi-list li {
   padding: 0.5rem 0rem;
} */

.alert-dismissible .btn-close {
   padding: 1.25rem 1rem !important;
   font-size: 12px !important;
   color: #000 !important;
   text-shadow: 0 1px 0 #fff !important;
}

.alert-primary.custom-alert-icon {
   border-inline-start: 0.313rem solid var(--mdb-primary-rgb) !important;
   color: var(--mdb-gray);
   background-color: var(--mdb-white);
   border: 1px solid var(--bs-alert-border-color);
   font-size: 0.813rem;
}

.alert-primary.custom-alert-icon .btn-close {
   color: var(--default-text-color);
}

.alert-secondary.custom-alert-icon {
   border-inline-start: 0.313rem solid rgb(var(--mdb-secondary-rgb)) !important;
   color: var(--mdb-gray);
   background-color: var(--mdb-white);
   border: 1px solid var(--bs-alert-border-color);
   font-size: 0.813rem;
}

.alert-secondary.custom-alert-icon .btn-close {
   color: var(--default-text-color);
}

.alert-warning.custom-alert-icon {
   border-inline-start: 0.313rem solid rgb(var(--mdb-warning-rgb)) !important;
   color: var(--mdb-gray);
   background-color: var(--mdb-white);
   border: 1px solid var(--bs-alert-border-color);
   font-size: 0.813rem;
}

.alert-warning.custom-alert-icon .btn-close {
   color: var(--default-text-color);
}

.alert-danger.custom-alert-icon {
   border-inline-start: 0.313rem solid rgb(var(--mdb-danger-rgb)) !important;
   color: var(--mdb-gray);
   background-color: var(--mdb-white);
   border: 1px solid var(--bs-alert-border-color);
   font-size: 0.813rem;
}

.alert-danger.custom-alert-icon .btn-close {
   color: var(--default-text-color);
}

.alert-success.custom-alert-icon {
   border-inline-start: 0.313rem solid rgb(var(--mdb-success-rgb)) !important;
   color: var(--mdb-gray);
   background-color: var(--mdb-white);
   border: 1px solid var(--bs-alert-border-color);
   font-size: 0.813rem;
}

.alert-success.custom-alert-icon .btn-close {
   color: var(--default-text-color);
}

.alert-info.custom-alert-icon {
   border-inline-start: 0.313rem solid rgb(var(--mdb-info-rgb)) !important;
   color: var(--mdb-gray);
   background-color: var(--mdb-white);
   border: 1px solid var(--bs-alert-border-color);
   font-size: 0.813rem;
}

.alert-info.custom-alert-icon .btn-close {
   color: var(--default-text-color);
}

.alert-light.custom-alert-icon {
   border-inline-start: 0.313rem solid rgb(var(--mdb-light-rgb)) !important;
   color: var(--mdb-gray);
   background-color: var(--mdb-white);
   border: 1px solid var(--bs-alert-border-color);
   font-size: 0.813rem;
}

.alert-light.custom-alert-icon .btn-close {
   color: var(--default-text-color);
}

.alert-dark.custom-alert-icon {
   border-inline-start: 0.313rem solid rgb(var(--mdb-dark-rgb)) !important;
   color: var(--mdb-gray);
   background-color: var(--mdb-white);
   border: 1px solid var(--bs-alert-border-color);
   font-size: 0.813rem;
}

.alert-dark.custom-alert-icon .btn-close {
   color: var(--default-text-color);
}

.invalid-feedback {
   font-size: 0.875rem;
   color: var(--bs-form-invalid-border-color);
}

.toast-container {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 9999;
   display: flex;
   flex-direction: column;
   gap: 10px;
   max-width: 350px;
}

.toast-item {
   animation: slideInRight 0.3s ease-out;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   border-radius: 8px;
}

.toast-item.hiding {
   animation: slideOutRight 0.3s ease-out;
}

@keyframes slideInRight {
   from {
      transform: translateX(400px);
      opacity: 0;
   }

   to {
      transform: translateX(0);
      opacity: 1;
   }
}

@keyframes slideOutRight {
   from {
      transform: translateX(0);
      opacity: 1;
   }

   to {
      transform: translateX(400px);
      opacity: 0;
   }
}