@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  /* === GLASSMORPHISM CARD STYLES === */
  .glass-card {
    @apply relative overflow-hidden rounded-2xl;
    @apply bg-white/70 dark:bg-gray-900/70;
    @apply backdrop-blur-xl;
    @apply border border-white/30 dark:border-gray-700/50;
    @apply shadow-glass;
  }

  .glass-card-subtle {
    @apply relative overflow-hidden rounded-xl;
    @apply bg-white/50 dark:bg-gray-800/50;
    @apply backdrop-blur-md;
    @apply border border-white/20 dark:border-gray-700/30;
    @apply shadow-glass-sm;
  }

  /* === GLASS INPUT STYLES === */
  .glass-input {
    @apply w-full rounded-xl px-4 py-3;
    @apply bg-white/60 dark:bg-gray-800/60;
    @apply backdrop-blur-sm;
    @apply border border-gray-200/50 dark:border-gray-600/50;
    @apply text-gray-900 dark:text-white;
    @apply placeholder:text-gray-500 dark:placeholder:text-gray-400;
    @apply focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20;
    @apply transition-all duration-200;
  }

  .glass-input:focus {
    @apply bg-white/80 dark:bg-gray-800/80;
    @apply shadow-glow-green;
  }

  /* === SEGMENTED CONTROL (Amount Buttons) === */
  .segmented-control {
    @apply inline-flex w-full rounded-xl p-1;
    @apply bg-gray-100/80 dark:bg-gray-800/80;
    @apply backdrop-blur-sm;
    @apply border border-gray-200/30 dark:border-gray-700/30;
  }

  .segmented-btn {
    @apply flex-1 px-4 py-3 text-center font-medium;
    @apply text-gray-700 dark:text-gray-300;
    @apply rounded-lg transition-all duration-200;
    @apply hover:bg-white/50 dark:hover:bg-gray-700/50;
  }

  .segmented-btn.active,
  .segmented-btn[aria-selected="true"] {
    @apply bg-white dark:bg-gray-700;
    @apply text-emerald-600 dark:text-emerald-400;
    @apply shadow-md;
    @apply font-semibold;
  }

  /* === DONATION TYPE TABS (iOS-style with slide animation - matches amount selector) === */
  .donation-tabs {
    @apply relative inline-flex w-full rounded-xl p-1;
    @apply bg-gradient-to-r from-gray-100/90 to-gray-50/90;
    @apply dark:from-gray-800/90 dark:to-gray-900/90;
    @apply backdrop-blur-md;
    @apply border border-white/40 dark:border-gray-600/40;
    @apply shadow-glass-sm;
  }

  .donation-tab {
    @apply flex-1 py-2.5 sm:py-3 px-1 sm:px-2 text-sm font-medium text-center;
    @apply text-gray-700 dark:text-gray-300;
    @apply rounded-lg transition-all duration-300 ease-out;
    @apply relative z-10;
  }

  .donation-tab:hover:not(.donation-tab-active):not([aria-selected="true"]) {
    @apply text-gray-900 dark:text-gray-100;
  }

  .donation-tab-active,
  .donation-tab[aria-selected="true"] {
    @apply text-white font-bold;
  }

  /* Sliding background indicator - emerald like amount selector */
  .donation-tabs::before {
    content: '';
    @apply absolute top-1 bottom-1 left-1 rounded-lg;
    @apply bg-emerald-500;
    @apply shadow-glow-green;
    @apply transition-all duration-300 ease-out;
    /* Width = (container width - left padding - right padding) / tab count */
    width: calc((100% - 0.5rem) / var(--tab-count, 3));
    /* Left = padding + (slot width * active tab index) */
    transform: translateX(calc(var(--active-tab, 0) * 100%));
  }

  /* === AMOUNT BUTTON GROUP (Segmented iOS-style with slide animation) === */
  .amount-group {
    @apply relative inline-flex w-full rounded-xl p-1;
    @apply bg-gradient-to-r from-gray-100/90 to-gray-50/90;
    @apply dark:from-gray-800/90 dark:to-gray-900/90;
    @apply backdrop-blur-md;
    @apply border border-white/40 dark:border-gray-600/40;
    @apply shadow-glass-sm;
  }

  .amount-btn {
    @apply flex-1 relative py-2.5 sm:py-3 px-1 sm:px-2 text-center;
    @apply text-gray-700 dark:text-gray-300 font-medium;
    @apply rounded-lg transition-all duration-300 ease-out;
    @apply relative z-10;
  }

  .amount-btn span {
    @apply text-base sm:text-lg;
  }

  .amount-btn:hover:not(.selected) {
    @apply text-gray-900 dark:text-gray-100;
  }

  .amount-btn.selected {
    @apply text-white font-bold;
  }

  /* Sliding background for amounts */
  .amount-group::before {
    content: '';
    @apply absolute top-1 bottom-1 rounded-lg;
    @apply bg-emerald-500;
    @apply shadow-glow-green;
    @apply transition-all duration-300 ease-out;
    @apply opacity-0;
    width: calc(100% / var(--amount-count, 4) - 0.25rem);
    left: calc((100% / var(--amount-count, 4)) * var(--active-amount, 0) + 0.25rem);
  }

  .amount-group.has-selection::before {
    @apply opacity-100;
  }

  /* Popular badge styling */
  .amount-badge {
    @apply absolute -bottom-6 left-1/2 transform -translate-x-1/2;
    @apply px-2 py-0.5 text-xs font-semibold;
    @apply bg-emerald-500 text-white rounded-full;
    @apply shadow-sm whitespace-nowrap;
  }

  /* === GLASS CHECKBOX === */
  .glass-checkbox {
    @apply w-5 h-5 rounded-md;
    @apply bg-white/70 dark:bg-gray-700/70;
    @apply border-2 border-gray-300 dark:border-gray-600;
    @apply checked:bg-emerald-500 checked:border-emerald-500;
    @apply focus:ring-2 focus:ring-emerald-500/30 focus:ring-offset-0;
    @apply transition-all duration-200;
  }

  /* === GLASS SELECT === */
  .glass-select {
    @apply w-full rounded-xl px-4 py-3;
    @apply bg-white/60 dark:bg-gray-800/60;
    @apply backdrop-blur-sm;
    @apply border border-gray-200/50 dark:border-gray-600/50;
    @apply text-gray-900 dark:text-white;
    @apply focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20;
    @apply transition-all duration-200;
  }

  /* === GLASS BUTTON === */
  .glass-btn-primary {
    @apply w-full py-4 px-6 rounded-xl;
    @apply bg-gradient-to-r from-emerald-500 to-emerald-600;
    @apply text-white font-semibold text-lg;
    @apply shadow-lg shadow-emerald-500/30;
    @apply hover:shadow-xl hover:shadow-emerald-500/40;
    @apply hover:from-emerald-600 hover:to-emerald-700;
    @apply active:scale-[0.98];
    @apply transition-all duration-200;
  }

  .glass-btn-secondary {
    @apply w-full py-3 px-6 rounded-xl;
    @apply bg-white/50 dark:bg-gray-800/50;
    @apply border border-gray-200 dark:border-gray-700;
    @apply text-emerald-600 dark:text-emerald-400 font-medium;
    @apply hover:bg-white dark:hover:bg-gray-800;
    @apply hover:text-emerald-700 dark:hover:text-emerald-300;
    @apply hover:border-emerald-300 dark:hover:border-emerald-700;
    @apply active:scale-[0.98];
    @apply transition-all duration-200;
  }

  .glass-btn-secondary-gold {
    @apply w-full py-3 px-6 rounded-xl;
    @apply bg-white/50 dark:bg-gray-800/50;
    @apply border border-gray-200 dark:border-gray-700;
    @apply text-amber-600 dark:text-amber-400 font-medium;
    @apply hover:bg-white dark:hover:bg-gray-800;
    @apply hover:text-amber-700 dark:hover:text-amber-300;
    @apply hover:border-amber-300 dark:hover:border-amber-700;
    @apply active:scale-[0.98];
    @apply transition-all duration-200;
  }

  /* === GLASS DIVIDER === */
  .glass-divider {
    @apply flex items-center my-6;
  }

  .glass-divider::before,
  .glass-divider::after {
    @apply flex-1 h-px;
    @apply bg-gradient-to-r from-transparent via-gray-300/50 to-transparent;
    content: '';
  }

  .glass-divider-text {
    @apply px-4 text-sm text-gray-500 dark:text-gray-400;
  }

  /* === GLASS ALERT/INFO BOX === */
  .glass-alert {
    @apply rounded-xl p-4;
    @apply backdrop-blur-sm;
    @apply border;
  }

  .glass-alert-info {
    @apply bg-blue-50/80 dark:bg-blue-900/30;
    @apply border-blue-200/50 dark:border-blue-700/50;
    @apply text-blue-800 dark:text-blue-200;
  }

  .glass-alert-success {
    @apply bg-emerald-50/80 dark:bg-emerald-900/30;
    @apply border-emerald-200/50 dark:border-emerald-700/50;
    @apply text-emerald-800 dark:text-emerald-200;
  }

  /* === DONATION SUMMARY CARD === */
  .summary-card {
    @apply rounded-2xl overflow-hidden;
    @apply bg-gradient-to-br from-white/80 via-white/70 to-gray-50/80;
    @apply dark:from-gray-800/80 dark:via-gray-800/70 dark:to-gray-900/80;
    @apply backdrop-blur-xl;
    @apply border border-white/40 dark:border-gray-700/40;
    @apply shadow-glass-lg;
  }

  .summary-card-header {
    @apply px-5 py-4;
    @apply bg-gradient-to-r from-emerald-500/10 to-transparent;
    @apply dark:from-emerald-500/20;
    @apply border-b border-white/30 dark:border-gray-700/30;
  }

  /* === PROCESSING OVERLAY === */
  .glass-overlay {
    @apply fixed inset-0 z-50;
    @apply bg-gray-900/60 backdrop-blur-md;
    @apply flex items-center justify-center;
  }

  .glass-overlay-content {
    @apply p-8 rounded-2xl;
    @apply bg-white/90 dark:bg-gray-800/90;
    @apply backdrop-blur-xl;
    @apply shadow-glass-lg;
    @apply text-center;
  }

  /* === PAYMENT METHOD BUTTONS === */
  .payment-method-btn {
    @apply flex-1 flex items-center justify-center gap-2 py-3 px-4;
    @apply rounded-xl font-medium;
    @apply border-2 border-gray-200 dark:border-gray-700;
    @apply text-gray-700 dark:text-gray-300;
    @apply transition-all duration-200;
    @apply hover:border-emerald-300 hover:bg-emerald-50/50;
    @apply dark:hover:border-emerald-600 dark:hover:bg-emerald-900/30;
  }

  .payment-method-btn.active {
    @apply border-emerald-500 bg-emerald-50 text-emerald-700;
    @apply dark:border-emerald-500 dark:bg-emerald-900/40 dark:text-emerald-300;
    @apply shadow-glow-green;
  }

  /* === STEP INDICATOR WITH PROGRESS BAR === */
  .step-indicator {
    @apply flex items-center justify-center gap-0;
  }

  .step-dot {
    @apply w-8 h-8 rounded-full flex items-center justify-center;
    @apply bg-gray-200 dark:bg-gray-700;
    @apply text-gray-500 dark:text-gray-400 text-sm font-semibold;
    @apply transition-all duration-500 ease-out;
    @apply relative z-10;
  }

  .step-dot.active {
    @apply bg-emerald-500 text-white;
    @apply shadow-glow-green;
    @apply scale-110;
    animation: pulse-glow 2s ease-in-out infinite;
  }

  .step-dot.completed {
    @apply bg-emerald-500 text-white;
  }

  .step-line {
    @apply w-16 h-1 rounded-full;
    @apply bg-gray-200 dark:bg-gray-700;
    @apply relative overflow-hidden;
  }

  .step-line::after {
    content: '';
    @apply absolute inset-y-0 left-0 w-0;
    @apply bg-emerald-500;
    @apply transition-all duration-500 ease-out;
    @apply rounded-full;
  }

  .step-line.active::after {
    @apply w-full;
  }

  .step-line.filling::after {
    animation: fill-progress 0.5s ease-out forwards;
  }

  @keyframes fill-progress {
    from { width: 0; }
    to { width: 100%; }
  }

  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
  }

  /* === STEP CONTENT WITH SLIDE ANIMATION === */
  .step-content {
    @apply transition-opacity duration-200 ease-out;
  }

  .step-content.slide-out-left {
    @apply opacity-0;
    transform: translateX(-20px);
  }

  .step-content.slide-out-right {
    @apply opacity-0;
    transform: translateX(20px);
  }

  .step-content.slide-in-left,
  .step-content.slide-in-right {
    animation: fadeSlideIn 0.25s ease-out forwards;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideOutLeft {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-30px);
    }
  }

  @keyframes slideOutRight {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(30px);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* === EXPRESS CHECKOUT ANIMATIONS === */
  /* Smooth upward slide when hiding express checkout */
  .express-hiding {
    animation: expressSlideUp 0.3s ease-out forwards;
    overflow: hidden;
  }

  .express-hidden {
    display: none !important;
  }

  .express-showing {
    animation: expressSlideDown 0.3s ease-out forwards;
    overflow: hidden;
  }

  @keyframes expressSlideUp {
    from {
      opacity: 1;
      max-height: 200px;
      margin-bottom: 1.5rem;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      max-height: 0;
      margin-bottom: 0;
      transform: translateY(-20px);
    }
  }

  @keyframes expressSlideDown {
    from {
      opacity: 0;
      max-height: 0;
      margin-bottom: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      max-height: 200px;
      margin-bottom: 1.5rem;
      transform: translateY(0);
    }
  }

  /* === LAST 10 NIGHTS GOLD THEME === */

  /* Gold primary button */
  .glass-btn-primary-gold {
    @apply w-full py-4 px-6 rounded-xl;
    @apply bg-gradient-to-r from-amber-500 to-amber-600;
    @apply text-white font-semibold text-lg;
    @apply shadow-lg shadow-amber-500/30;
    @apply hover:shadow-xl hover:shadow-amber-500/40;
    @apply hover:from-amber-600 hover:to-amber-700;
    @apply active:scale-[0.98];
    @apply transition-all duration-200;
  }

  /* Gold checkbox */
  .glass-checkbox-gold {
    @apply w-5 h-5 rounded-md;
    @apply bg-white/70 dark:bg-gray-700/70;
    @apply border-2 border-gray-300 dark:border-gray-600;
    @apply checked:bg-amber-500 checked:border-amber-500;
    @apply focus:ring-2 focus:ring-amber-500/30 focus:ring-offset-0;
    @apply transition-all duration-200;
  }

  /* Gold input focus */
  .glass-input-gold:focus {
    @apply border-amber-500 ring-2 ring-amber-500/20;
    @apply bg-white/80 dark:bg-gray-800/80;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
  }

  /* Gold step indicators */
  .step-dot.gold-theme.active {
    @apply bg-amber-500 text-white;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
    animation: pulse-glow-gold 2s ease-in-out infinite;
  }

  .step-dot.gold-theme.completed {
    @apply bg-amber-500 text-white;
  }

  .step-line.gold-theme::after {
    @apply bg-amber-500;
  }

  @keyframes pulse-glow-gold {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(245, 158, 11, 0);
    }
  }

  /* Gold amount selector */
  .amount-group.gold-theme::before {
    @apply bg-amber-500;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
  }

  /* === LAST 10 NIGHTS ANIMATIONS === */

  /* Smooth transition container */
  .last-ten-nights-transition {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Fade out animation for normal donation types */
  .l10n-fade-out {
    animation: l10nFadeOut 0.3s ease-out forwards;
  }

  /* Fade in animation for Last 10 Nights mode */
  .l10n-fade-in {
    animation: l10nFadeIn 0.4s ease-out forwards;
  }

  /* Golden glow pulse on activation */
  .l10n-glow-pulse {
    animation: l10nGlowPulse 0.8s ease-out;
  }

  /* Shimmer effect for the toggle section */
  .l10n-shimmer {
    position: relative;
    overflow: hidden;
  }

  .l10n-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(245, 158, 11, 0.2),
      rgba(245, 158, 11, 0.4),
      rgba(245, 158, 11, 0.2),
      transparent
    );
    animation: l10nShimmer 0.8s ease-out forwards;
    pointer-events: none;
  }

  /* Staggered element fade-in for theme change */
  .l10n-stagger-1 { animation-delay: 0.05s; }
  .l10n-stagger-2 { animation-delay: 0.1s; }
  .l10n-stagger-3 { animation-delay: 0.15s; }
  .l10n-stagger-4 { animation-delay: 0.2s; }

  @keyframes l10nFadeOut {
    0% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateY(-10px) scale(0.98);
    }
  }

  @keyframes l10nFadeIn {
    0% {
      opacity: 0;
      transform: translateY(10px) scale(0.98);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes l10nGlowPulse {
    0% {
      box-shadow: 0 8px 32px 0 rgba(245, 158, 11, 0.12), 0 0 20px rgba(245, 158, 11, 0.08);
    }
    40% {
      box-shadow: 0 8px 32px 0 rgba(245, 158, 11, 0.2), 0 0 35px rgba(245, 158, 11, 0.15);
    }
    100% {
      box-shadow: 0 8px 32px 0 rgba(245, 158, 11, 0.12), 0 0 20px rgba(245, 158, 11, 0.08);
    }
  }

  @keyframes l10nShimmer {
    0% {
      left: -100%;
    }
    100% {
      left: 100%;
    }
  }

  /* Smooth color transition for theme elements */
  .l10n-color-transition {
    transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  }

  /* Gold donation tabs when Last 10 Nights theme is active */
  .last-ten-nights-theme .donation-tabs {
    @apply bg-gradient-to-r from-gray-100/90 to-gray-50/90;
    @apply dark:from-gray-800/90 dark:to-gray-900/90;
    @apply border border-white/40 dark:border-gray-600/40;
  }

  .last-ten-nights-theme .donation-tabs::before {
    @apply bg-amber-500;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
  }

  .last-ten-nights-theme .donation-tab {
    @apply text-gray-700 dark:text-gray-300;
  }

  .last-ten-nights-theme .donation-tab:hover:not(.donation-tab-active):not([aria-selected="true"]) {
    @apply text-gray-900 dark:text-gray-100;
  }

  .last-ten-nights-theme .donation-tab-active,
  .last-ten-nights-theme .donation-tab[aria-selected="true"] {
    @apply text-white font-bold;
  }

  /* Gold input focus when Last 10 Nights theme is active */
  .last-ten-nights-theme .glass-input:focus {
    @apply border-amber-500 ring-2 ring-amber-500/20;
    @apply bg-white/80 dark:bg-gray-800/80;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
  }

  .last-ten-nights-theme .glass-select:focus {
    @apply border-amber-500 ring-2 ring-amber-500/20;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.15);
  }

  /* Gold tip/info alert when Last 10 Nights theme is active */
  .last-ten-nights-theme .glass-alert-info {
    @apply bg-amber-50/80 dark:bg-amber-900/30;
    @apply border-amber-200/50 dark:border-amber-700/50;
    @apply text-amber-800 dark:text-amber-200;
  }

  /* Gold alert for Last 10 Nights info */
  .glass-alert-gold {
    @apply bg-amber-50/80 dark:bg-amber-900/30;
    @apply border-amber-200/50 dark:border-amber-700/50;
    @apply text-amber-800 dark:text-amber-200;
  }

  /* Gold glow shadow */
  .shadow-glow-gold {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
  }

  /* Persistent gold glow for glass-card in Last 10 Nights mode */
  .glass-card.gold-glow {
    box-shadow: 0 8px 32px 0 rgba(180, 120, 0, 0.18), 0 0 25px rgba(180, 120, 0, 0.12) !important;
    border-color: rgba(180, 120, 0, 0.25) !important;
    transition: box-shadow 0.5s ease, border-color 0.5s ease;
  }

  @media (prefers-color-scheme: dark) {
    .glass-card.gold-glow {
      box-shadow: 0 8px 32px 0 rgba(245, 158, 11, 0.15), 0 0 25px rgba(245, 158, 11, 0.1) !important;
      border-color: rgba(245, 158, 11, 0.25) !important;
    }
  }

  /* Gold summary card header */
  .summary-card-header.gold-theme {
    @apply bg-gradient-to-r from-amber-500/10 to-transparent;
    @apply dark:from-amber-500/20;
  }

  /* Gold payment method button active state */
  .payment-method-btn.gold-theme.active {
    @apply border-amber-500 bg-amber-50 text-amber-700;
    @apply dark:border-amber-500 dark:bg-amber-900/40 dark:text-amber-300;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.3);
  }

  .payment-method-btn.gold-theme:hover {
    @apply hover:border-amber-300 hover:bg-amber-50/50;
    @apply dark:hover:border-amber-600 dark:hover:bg-amber-900/30;
  }

  /* Last 10 Nights toggle switch */
  .toggle-gold {
    @apply relative inline-flex h-6 w-11 items-center rounded-full;
    @apply bg-gray-200 dark:bg-gray-700;
    @apply transition-colors duration-200;
  }

  .toggle-gold:checked {
    @apply bg-amber-500;
  }

  .toggle-gold::before {
    content: '';
    @apply absolute left-0.5 h-5 w-5 rounded-full bg-white;
    @apply shadow-sm transition-transform duration-200;
  }

  .toggle-gold:checked::before {
    @apply translate-x-5;
  }
}

@layer utilities {
  /* Gradient text utility */
  .text-gradient-primary {
    @apply bg-gradient-to-r from-emerald-500 to-emerald-600 bg-clip-text text-transparent;
  }

  .text-gradient-gold {
    @apply bg-gradient-to-r from-amber-500 to-amber-600 bg-clip-text text-transparent;
  }

  /* Glass border glow */
  .border-glow {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  }

  /* Hide scrollbar for carousel */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }

  /* Line clamp utilities */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Heartbeat animation for donate button */
  .animate-heartbeat {
    animation: heartbeat 3s ease-in-out infinite;
  }

  @keyframes heartbeat {
    0%, 100% {
      transform: scale(1);
    }
    7% {
      transform: scale(1.15);
    }
    14% {
      transform: scale(1);
    }
    21% {
      transform: scale(1.15);
    }
    28% {
      transform: scale(1);
    }
  }

  /* Subtle pulse animation for login button */
  .animate-pulse-subtle {
    animation: pulse-subtle 2s ease-in-out infinite;
  }

  @keyframes pulse-subtle {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.85;
      transform: scale(1.05);
    }
  }

  /* Auth menu animations */
  .auth-menu {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }

  .auth-menu.menu-open {
    opacity: 1;
    transform: translateY(0);
  }

  .auth-menu-item {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  }

  .auth-menu.menu-open .auth-menu-item {
    opacity: 1;
    transform: scale(1);
  }

  .auth-menu.menu-open .auth-menu-item:nth-child(1) {
    transition-delay: 0.1s;
  }

  .auth-menu.menu-open .auth-menu-item:nth-child(2) {
    transition-delay: 0.05s;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */