/* =====================================================
   LOGIN & SIGNUP PAGES STYLES
   ===================================================== */

/* Reset and base styles */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   background-color: var(--bg-secondary);
   color: var(--text-primary);
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
}

/* Main container */
.auth-container {
   background: var(--bg-primary);
   border-radius: 16px;
   box-shadow: 0 10px 40px var(--shadow-medium);
   padding: 40px;
   width: 100%;
   max-width: 400px;
   border: 1px solid var(--border-light);
}

/* Header section */
.auth-header {
   text-align: center;
   margin-bottom: 30px;
}

.auth-logo {
   width: 120px;
   height: 120px;
   margin: 0 auto 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}

.auth-logo img {
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.auth-title {
   font-size: 1.8em;
   font-weight: 600;
   color: var(--text-primary);
   margin-bottom: 8px;
}

.auth-subtitle {
   color: var(--text-tertiary);
   font-size: 0.95em;
}

/* Form styles */
.auth-form {
   margin-bottom: 25px;
}

.form-group {
   margin-bottom: 20px;
}

.form-label {
   display: block;
   margin-bottom: 8px;
   font-weight: 500;
   color: var(--text-secondary);
   font-size: 0.9em;
}

.form-input {
   width: 100%;
   padding: 14px 16px;
   border: 2px solid var(--border-light);
   border-radius: 8px;
   font-size: 16px;
   background: var(--bg-primary);
   color: var(--text-primary);
   transition: all 0.3s ease;
}

.form-input:focus {
   outline: none;
   border-color: var(--green-primary);
   box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-input::placeholder {
   color: var(--text-muted);
}

/* Button styles */
.btn-primary {
   width: 100%;
   padding: 14px 20px;
   background: linear-gradient(135deg, var(--green-primary) 0%, var(--green-secondary) 100%);
   color: white;
   border: none;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   margin-bottom: 15px;
}

.btn-primary:hover {
   background: linear-gradient(135deg, var(--green-secondary) 0%, var(--green-dark) 100%);
   transform: translateY(-1px);
   box-shadow: 0 4px 15px rgba(21, 179, 146, 0.3);
}

.btn-secondary {
   width: 100%;
   padding: 12px 20px;
   background: transparent;
   color: var(--text-secondary);
   border: 2px solid var(--border-light);
   border-radius: 8px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
   text-decoration: none;
   display: inline-block;
   text-align: center;
}

.btn-secondary:hover {
   border-color: var(--brown-primary);
   color: var(--brown-primary);
   background: rgba(179, 85, 26, 0.05);
}

/* Links and text */
.auth-links {
   text-align: center;
   margin-top: 20px;
}

.auth-link {
   color: var(--green-primary);
   text-decoration: none;
   font-weight: 500;
   transition: color 0.3s ease;
}

.auth-link:hover {
   color: var(--green-dark);
   text-decoration: underline;
}

.auth-text {
   color: var(--text-tertiary);
   font-size: 0.9em;
   margin-bottom: 10px;
}

/* Form validation styles */
.form-input.error {
   border-color: #dc3545;
   box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

.error-message {
   color: #dc3545;
   font-size: 0.8em;
   margin-top: 5px;
   display: none;
}

.error-message.show {
   display: block;
}

/* Success message */
.success-message {
   background: rgba(21, 179, 146, 0.1);
   color: var(--green-dark);
   padding: 12px;
   border-radius: 6px;
   margin-bottom: 20px;
   font-size: 0.9em;
   border-left: 4px solid var(--green-primary);
}

/* Responsive design */
@media (max-width: 480px) {
   .auth-container {
       margin: 20px;
       padding: 30px 25px;
   }
   
   .auth-title {
       font-size: 1.6em;
   }
   
   .form-input {
       padding: 12px 14px;
   }
   
   .btn-primary {
       padding: 12px 18px;
   }
}

/* Loading state */
.btn-primary.loading {
   opacity: 0.7;
   cursor: not-allowed;
   position: relative;
}

.btn-primary.loading::after {
   content: '';
   position: absolute;
   width: 16px;
   height: 16px;
   margin: auto;
   border: 2px solid transparent;
   border-top-color: white;
   border-radius: 50%;
   animation: button-loading-spinner 1s ease infinite;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
}

@keyframes button-loading-spinner {
   from {
       transform: rotate(0turn);
   }
   to {
       transform: rotate(1turn);
   }
}

/* Forgot password link */
.forgot-password-link {
   text-align: right;
   margin-top: 8px;
}

.forgot-password-link .auth-link {
   font-size: 0.9rem;
   color: var(--green-primary);
   text-decoration: none;
}

.forgot-password-link .auth-link:hover {
   text-decoration: underline;
}

/* Success message */
.success-message {
   text-align: center;
   padding: 30px;
   background: var(--bg-secondary);
   border-radius: 12px;
   border: 1px solid var(--green-primary);
}

.success-message h3 {
   color: var(--green-primary);
   margin-bottom: 15px;
}

.success-message p {
   color: var(--text-secondary);
   line-height: 1.6;
   margin-bottom: 20px;
}

.success-message .btn-primary {
   display: inline-block;
   padding: 12px 24px;
   background: var(--green-primary);
   color: white;
   text-decoration: none;
   border-radius: 8px;
   font-weight: 500;
   transition: all 0.2s ease;
   margin-top: 15px;
}

.success-message .btn-primary:hover {
   background: var(--green-dark);
}

/* Modal */
.modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
}

.modal-content {
   background: var(--bg-primary);
   border-radius: 16px;
   width: 90%;
   max-width: 450px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
   border: 1px solid var(--border-light);
}

.modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 24px 24px 16px;
   border-bottom: 1px solid var(--border-light);
}

.modal-header h2 {
   margin: 0;
   font-size: 1.5rem;
   font-weight: 600;
   color: var(--text-primary);
}

.close-button {
   background: none;
   border: none;
   font-size: 24px;
   color: var(--text-secondary);
   cursor: pointer;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 4px;
}

.close-button:hover {
   background: var(--bg-tertiary);
}

.modal-form {
   padding: 24px;
}

.modal-form .form-group {
   margin-bottom: 24px;
}

.modal-form .form-label {
   display: block;
   margin-bottom: 8px;
   font-weight: 500;
   color: var(--text-primary);
   font-size: 0.95rem;
}

.modal-form .form-input {
   width: 100%;
   padding: 12px 16px;
   border: 1px solid var(--border-light);
   border-radius: 8px;
   font-size: 1rem;
   background: var(--bg-secondary);
   color: var(--text-primary);
   box-sizing: border-box;
}

.modal-form .form-input:focus {
   outline: none;
   border-color: var(--green-primary);
   box-shadow: 0 0 0 3px rgba(44, 85, 48, 0.1);
}

/* Modal buttons */
.modal-buttons {
   display: flex;
   gap: 12px;
   margin-top: 32px;
}

.modal-btn {
   flex: 1;
   padding: 14px 20px;
   border-radius: 8px;
   font-weight: 500;
   font-size: 1rem;
   border: none;
   cursor: pointer;
   min-height: 50px;
}

.modal-btn-cancel {
   background: #f5f5f5;
   color: #666;
   border: 1px solid #ddd;
}

.modal-btn-cancel:hover {
   background: #e9e9e9;
   color: #333;
}

.modal-btn-primary {
   background: var(--green-primary);
   color: white;
}

.modal-btn-primary:hover {
   background: var(--green-dark);
}

/* Error messages */
.error-message.show {
   display: block;
   color: #e74c3c;
   font-size: 0.9rem;
   margin-top: 5px;
}

.form-input.error {
   border-color: #e74c3c;
   background-color: #fdf2f2;
}

/* Google OAuth Button Styles */
.oauth-section {
   margin: 24px 0;
}

.divider {
   text-align: center;
   margin: 20px 0;
   position: relative;
}

.divider::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 0;
   right: 0;
   height: 1px;
   background: var(--border-light);
}

.divider span {
   background: var(--bg-primary);
   padding: 0 16px;
   color: var(--text-secondary);
   font-size: 0.9rem;
}

.btn-google {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   width: 100%;
   padding: 12px 16px;
   border: 1px solid #dadce0;
   border-radius: 8px;
   background: white;
   color: #333;
   text-decoration: none;
   font-weight: 500;
   transition: all 0.2s ease;
}

.btn-google:hover {
   background: #f8f9fa;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.btn-google img {
   flex-shrink: 0;
}