/* mobile-login.css - Fixed Mobile-Only Styles */

/* Small phones (portrait) - 480px and below */
@media (max-width: 480px) {
  /* Container adjustments */
  body {
    padding: 15px !important;
    background: linear-gradient(135deg, #0d6efd 0%, #6c63ff 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Login card adjustments */
  .login-card {
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    border-radius: 25px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
  }
  
  .login-card img {
    height: 70px !important;
    margin-bottom: 15px !important;
  }
  
  .login-card h3 {
    font-size: 1.6rem !important;
    margin-bottom: 20px !important;
  }
  
  /* Form elements */
  .form-label {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    color: #333 !important;
  }
  
  .form-control {
    padding: 14px 18px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
    border-radius: 30px !important;
    border: 1px solid #e0e0e0 !important;
    background: #f8f9fa !important;
    transition: all 0.3s ease !important;
  }
  
  .form-control:focus {
    border-color: #0d6efd !important;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.15) !important;
    background: #fff !important;
  }
  
  /* Login button */
  .btn-login {
    padding: 14px 20px !important;
    font-size: 1.1rem !important;
    border-radius: 30px !important;
    margin-top: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
    border: none !important;
    color: white !important;
    width: 100% !important;
    position: relative;
    overflow: hidden;
  }
  
  .btn-login:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
  
  /* Sign up link */
  .login-card p {
    font-size: 0.95rem !important;
    margin-top: 20px !important;
  }
  
  .login-card a {
    color: #0d6efd !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 5px 10px !important;
  }
  
  .login-card a:active {
    opacity: 0.7 !important;
  }
  
  /* Alert messages */
  .alert {
    padding: 12px 16px !important;
    margin-bottom: 20px !important;
    border-radius: 15px !important;
    font-size: 0.95rem !important;
    border: none !important;
  }
  
  .alert-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(200, 35, 51, 0.1)) !important;
    border-left: 4px solid #dc3545 !important;
    color: #b02a37 !important;
  }
  
  .alert i {
    font-size: 1rem !important;
  }
  
  /* Modal adjustments for mobile */
  .modal-dialog {
    margin: 15px !important;
  }
  
  .modal-content {
    border-radius: 25px !important;
    padding: 15px !important;
  }
  
  .modal-body {
    padding: 20px 10px !important;
  }
  
  .checkmark, .crossmark {
    font-size: 50px !important;
  }
  
  .modal-body h3 {
    font-size: 1.5rem !important;
    margin-top: 15px !important;
  }
  
  .modal-body p {
    font-size: 1rem !important;
    margin-bottom: 20px !important;
  }
  
  .modal-body .btn-danger {
    padding: 12px 25px !important;
    border-radius: 30px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    border: none !important;
    width: auto !important;
    min-width: 150px !important;
  }
  
  .modal-body .btn-danger:active {
    transform: scale(0.98) !important;
  }
}

/* Large phones / small tablets (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .login-card {
    max-width: 450px !important;
    padding: 35px 30px !important;
  }
  
  .login-card img {
    height: 75px !important;
  }
  
  .login-card h3 {
    font-size: 1.8rem !important;
  }
  
  .form-control {
    padding: 15px 20px !important;
  }
  
  .btn-login {
    padding: 15px 20px !important;
  }
}

/* Extra small phones (360px and below) */
@media (max-width: 360px) {
  .login-card {
    padding: 20px 15px !important;
  }
  
  .login-card img {
    height: 60px !important;
  }
  
  .login-card h3 {
    font-size: 1.4rem !important;
  }
  
  .form-label {
    font-size: 0.85rem !important;
  }
  
  .form-control {
    padding: 12px 15px !important;
  }
  
  .btn-login {
    padding: 12px 15px !important;
    font-size: 1rem !important;
  }
  
  .checkmark, .crossmark {
    font-size: 40px !important;
  }
  
  .modal-body h3 {
    font-size: 1.3rem !important;
  }
}

/* Landscape orientation - only for mobile devices */
@media (max-height: 600px) and (orientation: landscape) and (max-width: 768px) {
  body {
    padding: 10px !important;
    align-items: flex-start !important;
    overflow-y: auto !important;
  }
  
  .login-card {
    padding: 20px !important;
    margin: 10px auto !important;
  }
  
  .login-card img {
    height: 50px !important;
    margin-bottom: 10px !important;
  }
  
  .login-card h3 {
    font-size: 1.3rem !important;
    margin-bottom: 15px !important;
  }
  
  .mb-3 {
    margin-bottom: 0.8rem !important;
  }
  
  .form-control {
    padding: 10px 15px !important;
  }
  
  .btn-login {
    padding: 10px 15px !important;
    margin-top: 10px !important;
  }
}

/* Touch device improvements - only for mobile */
@media (hover: none) and (pointer: coarse) and (max-width: 768px) {
  .btn-login:hover {
    transform: none !important;
    background: linear-gradient(135deg, #0d6efd, #0a58ca) !important;
  }
  
  .login-card a:hover {
    color: #0d6efd !important;
    text-decoration: none !important;
  }
  
  .btn-login,
  .login-card a,
  .modal-body .btn-danger {
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* Global improvements for mobile only */
@media (max-width: 768px) {
  input, select, textarea, button {
    font-size: 16px !important; /* Prevents zoom on focus in iOS */
  }
  
  html {
    scroll-behavior: smooth !important;
  }
  
  /* Focus states for accessibility */
  .form-control:focus-visible,
  .btn-login:focus-visible,
  .login-card a:focus-visible {
    outline: 2px solid #0d6efd !important;
    outline-offset: 2px !important;
  }
  
  /* Loading state for button */
  .btn-login:disabled {
    opacity: 0.7 !important;
    transform: none !important;
    cursor: not-allowed !important;
  }
  
  /* Animation for modal */
  .modal.fade .modal-dialog {
    transform: scale(0.9) !important;
    transition: transform 0.2s ease-out !important;
  }
  
  .modal.fade.show .modal-dialog {
    transform: scale(1) !important;
  }
  
  /* Success checkmark animation */
  @keyframes checkmarkPop {
    0% {
      transform: scale(0);
      opacity: 0;
    }
    70% {
      transform: scale(1.2);
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
  
  .checkmark {
    animation: checkmarkPop 0.4s ease-out !important;
    display: inline-block;
  }
  
  /* Error crossmark animation */
  @keyframes crossmarkPop {
    0% {
      transform: scale(0) rotate(-90deg);
      opacity: 0;
    }
    70% {
      transform: scale(1.2) rotate(10deg);
    }
    100% {
      transform: scale(1) rotate(0);
      opacity: 1;
    }
  }
  
  .crossmark {
    animation: crossmarkPop 0.4s ease-out !important;
    display: inline-block;
  }
  
  /* Prevent body scroll when modal is open */
  body.modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }
}