/*
 * Chroudakais Auth - Layout Height Fix v3.4.0
 */

/* --- Flicker-Free Hiding Rule (Layout Fix) --- */
/* This is the key change. By making the form's position absolute,
   it no longer takes up any vertical space in the page layout. */
.chroudakais-is-loading #customer_login {
    position: absolute !important;
    width: 100%; /* Ensure it doesn't collapse horizontally */
    visibility: hidden !important;
    opacity: 0 !important;
}
div#chroudakais-skeleton-container {
    margin-top: 70px!important;
}
/* --- Reveal Animation --- */
/* When revealed, we return the position to 'relative' so it fits
   back into the page layout correctly. */
#customer_login.loaded {
    position: relative !important; /* Puts the form back in the normal flow */
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.4s ease-in-out;
}

/* --- Main Skeleton Container --- */
.skeleton-loader-container {
    display: flex;
    gap: 2.5rem;
    max-width: 960px;
    margin: 50px auto;
    padding: 0 15px;
    box-sizing: border-box;
	margin-top:70px;
}

.skeleton-column {
    flex: 1;
    padding: 2.5rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07);
    border: 1px solid #e2e8f0;
}

/* --- General Skeleton Item Styles --- */
.skeleton-item { background: #f0f3f6; border-radius: 8px; position: relative; overflow: hidden; }
.skeleton-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    height: 100%;
    width: 150%;
    background: linear-gradient(to right, transparent 0%, #e2e8f0 50%, transparent 100%);
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 100% { left: 150%; } }

/* --- Skeleton Block Sizes --- */
.skeleton-title { height: 28px; margin-bottom: 2rem; width: 50%; }
.skeleton-input { height: 50px; margin-top: 10px; margin-bottom: 20px; }
.skeleton-button { height: 50px; margin-top: 25px; border-radius: 12px; }
.skeleton-line { height: 16px; margin-bottom: 12px; }
.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 60%; }
.skeleton-line.long { width: 85%; }
.skeleton-line.full { width: 100%; }

/* --- Text Animation Styles --- */
.skeleton-text-animation {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.skeleton-text-header {
    font-size: 1.5em;
    font-weight: 600;
    color: #a0aec0;
    margin-bottom: 1.5rem;
    text-align: center;
    animation: pulse-text 2s ease-in-out infinite;
}
@keyframes pulse-text {
    0% { color: #a0aec0; }
    50% { color: #718096; }
    100% { color: #a0aec0; }
}

/* --- Responsive --- */
@media (max-width: 768px) { 
    .skeleton-loader-container { flex-direction: column; gap: 2rem; }
}