/* app/assets/stylesheets/devise/sessions.css */

.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f5f5f5; padding: 1rem; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.login-card { display: flex; width: 100%; max-width: 1000px; background: white; border-radius: 24px; box-shadow: 0 25px 50px rgba(0,0,0,0.15); overflow: hidden; }
.login-sidebar { flex: 1; background: linear-gradient(135deg, #1e293b, #0f172a); padding: 3rem 2rem; display: flex; flex-direction: column; position: relative; }
.login-language { position: absolute; top: 24px; left: 24px; z-index: 10; }
.login-language-wrapper { position: relative; }
.login-language-btn { display: flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 30px; padding: 0.5rem 1rem; color: white; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.login-language-btn:hover { background: rgba(255,255,255,0.2); }
.login-language-flag { width: 24px; height: 18px; overflow: hidden; border-radius: 4px; }
.login-language-flag img { width: 100%; height: 100%; object-fit: cover; }
.login-language-chevron { font-size: 11px; opacity: 0.8; }
.login-language-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 0.5rem; background: white; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.2); min-width: 160px; overflow: hidden; z-index: 20; }
.login-language-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; text-decoration: none; color: #333; font-size: 0.9rem; transition: background 0.2s; background: white; width: 100%; border: none; text-align: left; cursor: pointer; }
.login-language-item:hover { background: #f8fafc; }
.login-sidebar-content { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; }
.login-logo { max-width: 180px; margin-bottom: 1.5rem; }
.login-title { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg, #fff, #e2e8f0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-welcome { font-size: 2rem; font-weight: 600; margin-bottom: 1rem; }
.login-description { font-size: 1rem; opacity: 0.8; max-width: 280px; line-height: 1.6; }
.login-form-side { flex: 1; padding: 3rem 2.5rem; display: flex; align-items: center; justify-content: center; background: white; }
.login-form-wrapper { width: 100%; max-width: 360px; }
.login-form-header { margin-bottom: 2rem; }
.login-form-title { font-size: 1.8rem; font-weight: 600; color: #111; margin-bottom: 0.5rem; }
.login-form-subtitle { color: #666; font-size: 0.95rem; }
.login-field { margin-bottom: 1.5rem; }
.login-label { display: block; font-size: 0.9rem; font-weight: 500; color: #333; margin-bottom: 0.5rem; }
.login-input { width: 100%; padding: 0.85rem 1rem; font-size: 1rem; border: 2px solid #e1e1e1; border-radius: 12px; outline: none; transition: all 0.2s; box-sizing: border-box; }
.login-input:focus { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.1); }
.login-input::placeholder { color: #aaa; }
.login-input-with-icon { position: relative; width: 100%; }
.login-password-input { padding-right: 40px !important; }
.login-password-toggle { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #666; padding: 0; display: flex; align-items: center; justify-content: center; transition: color 0.2s; font-size: 1.2rem; }
.login-password-toggle:hover { color: #f97316; }
.login-remember { display: flex; align-items: center; margin: 1.5rem 0; }
.login-checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.login-checkbox { width: 18px; height: 18px; accent-color: #f97316; margin: 0; }
.login-checkbox-text { font-size: 0.95rem; color: #444; }
.login-submit { width: 100%; padding: 0.9rem; background: linear-gradient(135deg, #f97316, #ea580c); color: white; border: none; border-radius: 12px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 6px rgba(249,115,22,0.2); }
.login-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(249,115,22,0.3); }

/* Footer */
.login-footer { text-align: center; color: #999; font-size: 0.8rem; margin-top: 2rem; }

@media (max-width: 768px) {
  .login-card { flex-direction: column; max-width: 450px; }
  .login-sidebar { padding: 4rem 2rem 2rem; }
  .login-welcome { font-size: 1.5rem; }
  .login-title { font-size: 2rem; }
  .login-form-title { font-size: 1.5rem; }
}