/* Auth Page Custom Styles */
.auth-page {
  background: #FFF5E9 !important;
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

.auth-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

.auth-container .decoration-top {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.auth-container .decoration-bottom {
  position: fixed;
  bottom: 0;
  right: 0;
  width: auto;
  height: auto;
  z-index: 0;
  pointer-events: none;
}


/* Icon Filters */
.lock-icon {
  filter: invert(36%) sepia(95%) saturate(6143%) hue-rotate(18deg) brightness(102%) contrast(101%);
}
/* Social Button Hover Effects */
.google-btn:hover img {
  filter: invert(27%) sepia(95%) saturate(2573%) hue-rotate(3deg) brightness(104%) contrast(97%);
}

.facebook-btn:hover img {
  filter: invert(24%) sepia(99%) saturate(2449%) hue-rotate(217deg) brightness(97%) contrast(97%);
}

.line-btn:hover img {
  filter: invert(64%) sepia(98%) saturate(1613%) hue-rotate(81deg) brightness(119%) contrast(119%);
}

/* Responsive Design */
@media (max-width: 768px) {
  .auth-container {
    padding: 0 10px;
  }
  
  .auth-container .decoration-top,
  .auth-container .decoration-bottom {
    display: none;
  }
  
  .login-left {
    background: linear-gradient(180deg, 
      rgba(255, 70, 18, 0.12) 0%, 
      rgba(255, 123, 0, 0.18) 50%, 
      rgba(255, 70, 18, 0.1) 100%);
  }
  
  .login-right::before {
    background: linear-gradient(to bottom, 
      rgba(255, 70, 18, 0.02) 0%, 
      transparent 20%);
  }
  
  .card {
    margin: 0 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
  }
  
  .form-control-lg {
    padding: 0.75rem 1rem;
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .card-body {
    padding: 1.5rem !important;
  }
  
  .btn {
    font-size: 0.9rem;
  }
  
  .fs-2 {
    font-size: 1.75rem !important;
  }
  
  .fs-7 {
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .login-left img {
    max-width: 140px;
  }
  
  .card-body {
    padding: 1rem !important;
  }
  
  .btn-lg {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
  
  .form-control-lg {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }
  
  .gap-3 {
    gap: 1rem !important;
  }
}

@media (max-width: 360px) {
  .login-left img {
    max-width: 120px;
  }
  
  .card-body {
    padding: 0.75rem !important;
  }
  
  .btn-lg {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
  }
  
  .form-control-lg {
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
  }
}

/* Custom button size classes */
.btn-md-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

@media (min-width: 768px) {
  .btn-md-lg {
    padding: 0.75rem 2rem;
    font-size: 1.25rem;
  }
}