/* ===== CUSTOM BRANDED LOADER ===== */
.screen{
	height: 100%;
    width: 100%;
    display: grid;
    place-items: center;
    position: fixed;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(2px);
    top: 0;
    left: 0;
    z-index: 9998;
    transition: opacity 0.3s ease-in-out;
}

/* Main spinner with custom branding */
.spinner {
   width: 88px;
   height: 88px;
   display: grid;
   border: 7px solid transparent;
   border-radius: 50%;
   border-color: #e9ecef transparent;
   animation: spinner-e04l1k 1s infinite linear;
   position: relative;
}

.spinner::before,
.spinner::after {
   content: "";
   grid-area: 1/1;
   margin: 3.5px;
   border: inherit;
   border-radius: 50%;
}

/* Inner spinner with custom theme color */
.spinner::before {
   border-color: var(--custom-theme-color, #019683) transparent;
   animation: inherit;
   animation-duration: 0.5s;
   animation-direction: reverse;
}

.spinner::after {
   margin: 14px;
   border-color: rgba(1, 150, 131, 0.3) transparent;
   animation: inherit;
   animation-duration: 1.5s;
   animation-direction: normal;
}

/* Enhanced animation with smooth easing */
@keyframes spinner-e04l1k {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

/* Alternative loader styles for different contexts */
.theme-branded .spinner {
   border-color: #f8f9fa transparent;
}

.theme-branded .spinner::before {
   border-color: var(--custom-theme-color, #019683) transparent;
}

.theme-branded .spinner::after {
   border-color: rgba(1, 150, 131, 0.2) transparent;
}

/* Button spinner (for inline loading states) */
.spinner-border {
   border-color: var(--custom-theme-color, #019683) transparent var(--custom-theme-color, #019683) transparent;
   border-width: 2px;
   width: 1rem;
   height: 1rem;
   animation: spinner-border 0.75s linear infinite;
}

@keyframes spinner-border {
   to {
      transform: rotate(360deg);
   }
}

/* Loading text styling */
.loading-text {
   color: var(--custom-theme-color, #019683);
   font-weight: 500;
   margin-top: 1rem;
   font-size: 0.9rem;
}