/* LA Micro Rewards – horizontal layout on desktop, stacked on mobile */
.lamicro-form-wrap{ 
    display: flex; 
    justify-content: center; 
}

.lamicro-form-card{ 
    max-width: 720px; 
    margin: 0 auto; 
    background: #fff; 
    border-radius: 8px; 
    box-shadow: 0 8px 24px rgba(0,0,0,.08); 
    padding: 28px; 
}

.lamicro-form{ 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
}

.lamicro-label{ 
    font-size: .9rem; 
    color: #6b7280; 
    margin-bottom: 6px; 
    display: block;
}

.lamicro-input{ 
    width: 100%; 
    border: 1px solid #d1d5db; 
    border-radius: 8px; 
    padding: 12px; 
    font-size: 1rem; 
    color: #111827; 
    outline: none; 
    transition: border-color .2s;
    box-sizing: border-box;
}

.lamicro-input:focus{ 
    border-color: #005EB8; 
}

.lamicro-password-wrap{ 
    position: relative; 
}

.lamicro-eye{ 
    position: absolute; 
    right: 10px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 36px; 
    height: 36px; 
    border: none; 
    background: transparent; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lamicro-btn-primary{ 
    width: 100%; 
    border: none; 
    border-radius: 8px; 
    padding: 14px 16px; 
    font-weight: 600; 
    color: #fff; 
    background: #005EB8; 
    cursor: pointer; 
    transition: background .2s;
    font-size: 1rem;
}

.lamicro-btn-primary:hover{ 
    background: #004C92; 
}

.lamicro-btn-primary:active{ 
    background: #003A73; 
}

.lamicro-btn-primary:focus{ 
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 94, 184, 0.3);
}

.lamicro-secondary{ 
    margin: 0; 
    text-align: center; 
}

.lamicro-link{ 
    color: #374151; 
    text-decoration: none; 
    font-size: .9rem; 
    transition: color .2s ease-in-out;
}

.lamicro-link:hover{ 
    color: #005EB8; 
    text-decoration: underline; 
}

.lamicro-error{ 
    color: #B91C1C; 
    font-size: .9rem; 
    margin-top: 8px; 
}

.lamicro-success{ 
    color: #065f46; 
    font-size: .95rem; 
    margin-top: 8px; 
}

.lamicro-zrl-embed{ 
    min-height: 850px; 
}

/* Form validation states */
.lamicro-input.error {
    border-color: #B91C1C;
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
}

.lamicro-input.success {
    border-color: #065f46;
    box-shadow: 0 0 0 3px rgba(6, 95, 70, 0.1);
}

/* Desktop Layout - Grid System */
@media (min-width: 768px){
    .lamicro-form{ 
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 24px;
        grid-row-gap: 16px;
        align-items: end;
    }
    
    .lamicro-form .lamicro-label{ 
        margin-bottom: 6px; 
        display: block; 
    }
    
    #lamicro-email{ 
        grid-column: 1 / span 1; 
    }
    
    .lamicro-password-wrap{ 
        grid-column: 2 / span 1; 
    }
    
    #lamicro-password{ 
        width: 100%; 
    }
    
    .lamicro-btn-primary{ 
        grid-column: 1 / span 2; 
        height: 46px; 
    }
    
    .lamicro-secondary, .lamicro-error, .lamicro-success{ 
        grid-column: 1 / span 2; 
    }
}

/* Mobile Optimisation */
@media (max-width: 480px){ 
    .lamicro-form-card{ 
        padding: 22px; 
        margin: 1rem;
        box-shadow: 0 4px 16px rgba(0,0,0,.06);
    }
    
    .lamicro-input {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Additional utility classes for enhanced functionality */
.lamicro-form-group {
    display: flex;
    flex-direction: column;
}

.lamicro-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.lamicro-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #005EB8;
}

.lamicro-checkbox-label {
    font-size: .9rem;
    color: #374151;
    cursor: pointer;
}

/* Loading state for button */
.lamicro-btn-primary:disabled {
    background: #9CA3AF;
    cursor: not-allowed;
}

.lamicro-btn-primary.loading {
    position: relative;
}

.lamicro-btn-primary.loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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