@font-face {
  font-family: 'Libre Franklin';
  src: url('../webfonts/librefranklin/LibreFranklin-Regular.otf') format('opentype');
  src: url('../webfonts/librefranklin/LibreFranklin-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Libre Franklin';
  src: url('../webfonts/librefranklin/LibreFranklin-Light.otf') format('opentype');
  src: url('../webfonts/librefranklin/LibreFranklin-Light.ttf') format('truetype');
  font-weight: lighter;
  font-style: normal;
}

@font-face {
  font-family: 'Libre Franklin';
  src: url('../webfonts/librefranklin/LibreFranklin-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

html,
body {
  height: 100%;
  font-family: 'Libre Franklin', sans-serif;
  background: transparent;
}

.invalid-input {
  border: 1px solid #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.4);
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

/* Glass Container */
.glass-container {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  animation: glass-fade-in 500ms ease-out 60ms both;
  will-change: opacity, transform;
}

.glass-input {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.glass-input:focus {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(98, 27, 208, 0.4);
  box-shadow: 0 8px 32px rgba(98, 27, 208, 0.12);
  transform: translateY(-1px);
}

.glass-button {
  background: linear-gradient(135deg, rgba(32, 63, 164, 0.85), rgba(98, 27, 208, 0.85));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 24px rgba(98, 27, 208, 0.15);
  position: relative;
  overflow: hidden;
}

.glass-button:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 40px rgba(98, 27, 208, 0.25);
  background: linear-gradient(135deg, rgba(32, 63, 164, 0.9), rgba(98, 27, 208, 0.9));
}

.glass-button-light {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.9));
  backdrop-filter: blur(10px);
  border: 1px solid rgba(98, 27, 208, 0.15);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.glass-button-light:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 40px rgba(98, 27, 208, 0.25);
  background: linear-gradient(135deg, rgba(32, 63, 164, 0.9), rgba(98, 27, 208, 0.9));
}

.glass-button-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.glass-button-light:hover::before {
  left: 100%;
}

.glass-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.glass-button:hover::before {
  left: 100%;
}

/* Fade-in on page load for the glass pane */
@keyframes glass-fade-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.995);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .glass-container {
    animation: none !important;
  }
}

.group:focus-within .icon-svg,
.group:hover .icon-svg {
  color: #621BD0;
}

.glass-input:invalid:not(:placeholder-shown) {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.1);
}

.glass-input:valid:not(:placeholder-shown) {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.1);
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(98, 27, 208, 0.3) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #621BD0, #203fa4);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(45deg, #4a1599, #1a2d73);
}

.icon-svg {
  color: #203fa4;
}

/* Mobile responsiveness - Only one breakpoint at 1024px (lg) */
@media (max-width: 1023px) {
  .glass-container {
    margin: 1rem;
    height: auto;
    min-height: 500px;
    max-height: 90vh;
    flex-direction: column;
  }

  .glass-input {
    font-size: 16px;
    /* Prevents zoom on iOS */
  }

  /* Ensure proper vertical stacking on mobile */
  .glass-container>div:first-child {
    min-height: 40%;
    max-height: 45%;
  }

  .glass-container>div:last-child {
    min-height: 55%;
    max-height: 60%;
  }

  /* Better mobile touch targets */
  .glass-button {
    min-height: 44px;
  }

  .glass-input {
    min-height: 44px;
  }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
  .glass-container {
    margin: 0.5rem;
    border-radius: 1rem;
    max-height: 95vh;
  }

  .glass-container>div:first-child {
    min-height: 35%;
    max-height: 40%;
  }

  .glass-container>div:last-child {
    min-height: 60%;
    max-height: 65%;
  }
}