/* Premium styles for QR-Generator */

body {
  font-family: 'Quicksand', sans-serif;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Outfit', sans-serif;
}

/* Glassmorphism custom panel */
.glass-panel {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(46, 41, 78, 0.08);
}

/* Subtle depth shadow using brand purple color for soft, premium tint */
.shadow-premium {
  box-shadow: 0 10px 30px -5px rgba(46, 41, 78, 0.06), 
              0 4px 12px -2px rgba(46, 41, 78, 0.04);
}

.shadow-premium-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shadow-premium-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px -5px rgba(46, 41, 78, 0.1), 
              0 8px 20px -2px rgba(46, 41, 78, 0.06);
}

/* Interactive focus states */
.custom-input {
  transition: all 0.2s ease-in-out;
}

.custom-input:focus {
  outline: none;
  border-color: #1B998B;
  box-shadow: 0 0 0 3px rgba(27, 153, 139, 0.15);
  background-color: #ffffff;
}

/* Tab buttons hover animations */
.tab-btn-active {
  background-color: rgba(27, 153, 139, 0.1);
  border-color: #1B998B;
  color: #1B998B;
}

/* Custom bounce popup animations */
@keyframes pop-in {
  0% {
    transform: scale(0.96);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-pop-in {
  animation: pop-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Custom micro-transitions */
.transition-all-custom {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}