/* LineGate - Custom Styles */

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}

/* Custom button styles */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background-color: #22c55e;
  border-radius: 0.5rem;
  transition: background-color 0.15s ease;
}

.btn-primary:hover {
  background-color: #16a34a;
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #171717;
  background-color: white;
  border: 1px solid #e5e5e5;
  border-radius: 0.5rem;
  transition: all 0.15s ease;
}

.btn-secondary:hover {
  background-color: #fafafa;
  border-color: #d4d4d4;
}

/* Focus states for accessibility */
.btn-primary:focus,
.btn-secondary:focus {
  outline: none;
  box-shadow: 0 0 0 2px white, 0 0 0 4px #22c55e;
}

/* Form input focus states */
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px #171717;
  border-color: transparent;
}

/* Error state for form inputs */
input.error,
select.error,
textarea.error {
  border-color: #ef4444;
}

input.error:focus,
select.error:focus,
textarea.error:focus {
  box-shadow: 0 0 0 2px #ef4444;
}

/* Loading spinner animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Mobile menu (if needed later) */
@media (max-width: 768px) {
  .mobile-menu {
    display: none;
  }

  .mobile-menu.open {
    display: flex;
  }
}

/* Selection color */
::selection {
  background-color: #171717;
  color: white;
}

/* Scrollbar styling (webkit browsers) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f5f5f5;
}

::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;
}