/* Extracted from auth\login.blade.php (block 1) */
.auth-page {
min-height: 100vh;
background: linear-gradient(135deg, var(--background, #FEF9F3) 0%, var(--muted, #F9E8D0) 50%, var(--caramel, #EDBB89) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 6rem 1rem 2rem;
}

.auth-container {
width: 100%;
max-width: 500px;
}

.auth-card {
background: white;
border-radius: 1.5rem;
box-shadow: 0 20px 60px rgba(47, 13, 1, 0.1);
padding: 3rem;
animation: slideUp 0.5s ease;
}

@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.auth-header {
text-align: center;
margin-bottom: 2rem;
}

.auth-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem;
background: linear-gradient(135deg, var(--primary-light, #754D34) 0%, var(--caramel, #EDBB89) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
box-shadow: 0 8px 24px rgba(117, 77, 52, 0.3);
}

.auth-header h1 {
font-size: 2rem;
font-weight: 700;
color: var(--coffee-dark, #2F0D01);
margin-bottom: 0.5rem;
}

.auth-header p {
color: var(--mocha, #754D34);
font-size: 1rem;
}

.auth-form {
margin-top: 2rem;
}

.form-group {
margin-bottom: 1.5rem;
}

.form-group label {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: var(--coffee-dark, #2F0D01);
margin-bottom: 0.5rem;
}

.form-group label i {
color: var(--mocha, #754D34);
}

.form-control {
width: 100%;
padding: 0.875rem 1rem;
border: 2px solid var(--caramel, #EDBB89);
border-radius: 0.75rem;
font-size: 1rem;
transition: all 0.3s;
}

.form-control:focus {
outline: none;
border-color: var(--primary-light, #754D34);
box-shadow: 0 0 0 3px rgba(117, 77, 52, 0.1);
}

.form-control::placeholder {
color: #c4a99a;
}

.error-message {
display: block;
color: #ef4444;
font-size: 0.875rem;
margin-top: 0.5rem;
}

.alert {
padding: 1rem 1.25rem;
border-radius: 0.75rem;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
animation: slideDown 0.3s ease;
}

@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.alert-success {
background: #dcfce7;
border: 1px solid #86efac;
color: #166534;
}

.alert-success::before {
content: "✓";
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #22c55e;
color: white;
border-radius: 50%;
font-weight: bold;
}

.alert-danger {
background: #fee2e2;
border: 1px solid #fca5a5;
color: #991b1b;
}

.alert-danger::before {
content: "!";
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
background: #ef4444;
color: white;
border-radius: 50%;
font-weight: bold;
}

.btn-submit {
width: 100%;
padding: 1rem;
background: var(--coffee-dark, #2F0D01);
color: var(--cream, #F9E8D0);
border: none;
border-radius: 0.75rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 4px 12px rgba(47, 13, 1, 0.2);
}

.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(47, 13, 1, 0.3);
background: var(--espresso, #311004);
}

.btn-submit:active {
transform: translateY(0);
}

.btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}

.auth-footer {
text-align: center;
margin-top: 1.5rem;
}

.back-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--mocha, #754D34);
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
}

.back-link:hover {
color: var(--coffee-dark, #2F0D01);
gap: 0.75rem;
}

.back-link i {
transition: transform 0.3s;
}

.back-link:hover i {
transform: translateX(-4px);
}

@media (max-width: 640px) {
.auth-card {
padding: 2rem 1.5rem;
}

.auth-header h1 {
font-size: 1.75rem;
}

.auth-icon {
width: 70px;
height: 70px;
font-size: 1.75rem;
}
}