@import "tailwindcss";

/* Custom Theme Variables */
@theme {
  /* Blush Pink Palette */
  --color-blush-50: #fdf2f4;
  --color-blush-100: #fce7ea;
  --color-blush-200: #f9d0d9;
  --color-blush-300: #f4a9ba;
  --color-blush-400: #ec7a96;
  --color-blush-500: #e04d74;
  --color-blush-600: #cc2d5a;
  --color-blush-700: #ab2049;
  --color-blush-800: #8e1e41;
  --color-blush-900: #791d3c;

  /* Gold Palette */
  --color-gold-50: #fefce8;
  --color-gold-100: #fef9c3;
  --color-gold-200: #fef08a;
  --color-gold-300: #fde047;
  --color-gold-400: #d4af37;
  --color-gold-500: #b8960c;
  --color-gold-600: #9a7b0a;
  --color-gold-700: #7c630d;
  --color-gold-800: #674f12;
  --color-gold-900: #574215;

  /* Cream Palette */
  --color-cream-50: #fdfbf7;
  --color-cream-100: #f9f5ed;
  --color-cream-200: #f3eadb;

  /* Burgundy Palette */
  --color-burgundy-50: #fdf2f4;
  --color-burgundy-100: #fce7ea;
  --color-burgundy-200: #f9d0d9;
  --color-burgundy-300: #f4a9ba;
  --color-burgundy-400: #bb4a6c;
  --color-burgundy-500: #9B3558;
  --color-burgundy-600: #992C52;
  --color-burgundy-700: #6a163a;
  --color-burgundy-800: #5a1030;
  --color-burgundy-900: #4a0d28;

  /* Custom Fonts */
  --font-script: 'Great Vibes', 'Parisienne', cursive;
  --font-caprasimo: 'Caprasimo', cursive;
  --font-abeezee: 'ABeeZee', sans-serif;
  --font-titan: 'Titan One', cursive;
}

/* ============================================
   CAROUSEL STYLES
   ============================================ */

@layer components {
  /* Slide Base Styles */
  .slide {
    @apply absolute inset-0 flex items-baseline justify-center mt-10 mx-8;
    @apply opacity-0 pointer-events-none;
    transform: translateX(100%) scale(0.95);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .slide.active {
    @apply opacity-100 pointer-events-auto z-10;
    transform: translateX(0) scale(1);
  }

  .slide.previous {
    @apply opacity-0;
    transform: translateX(-100%) scale(0.95);
  }

  .slide.next {
    @apply opacity-0;
    transform: translateX(100%) scale(0.95);
  }

  /* Swipe Animations */
  .slide.swipe-left {
    animation: swipe-out-left 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .slide.swipe-right {
    animation: swipe-out-right 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* Slide Content Card (Legacy) */
  .slide-content {
    @apply relative overflow-hidden rounded-2xl shadow-2xl;
    @apply bg-white;
    width: min(90vw, 400px);
    height: min(80vh, 600px);
    max-width: 400px;
    max-height: 600px;
  }

  @media (min-width: 768px) {
    .slide-content {
      width: min(80vw, 450px);
      height: min(75vh, 650px);
    }
  }

  /* Slide Overlay (Legacy) */
  .slide-overlay {
    @apply absolute bottom-0 left-0 right-0 p-6;
    @apply bg-gradient-to-t from-black/70 via-black/30 to-transparent;
    padding-top: 4rem;
  }

  /* Invite Card - Dating App Style */
  .invite-card {
    @apply relative overflow-hidden rounded-2xl w-full;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 6px -2px rgba(90, 16, 48, 0.15),
                0 10px 15px -3px rgba(90, 16, 48, 0.3);
    min-height: 600px;
  }

  @media (min-width: 768px) {
    .invite-card {
      width: min(80vw, 360px);
    }
  }

  .invite-card-photo {
    @apply relative w-full rounded-2xl;
    height: min(55vh, 380px);
  }

  .invite-card-photo-image {
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
  }

  .invite-card-photo::before {
    content: '';
    @apply absolute inset-0 rounded-xl pointer-events-none z-10;
    border: 2px solid rgba(255, 255, 255);
    border-radius: 18px;
    border-bottom-left-radius: 35px;
    border-bottom-right-radius: 35px;
    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 30%, transparent 100%);
  }

  @media (min-width: 768px) {
    .invite-card-photo {
      height: min(50vh, 400px);
    }
  }

  .invite-card-photo img {
    @apply w-full h-full;
  }

  .invite-card-photo-overlay {
    @apply absolute bottom-0 left-0 right-0 p-4;
    padding-top: 3rem;
  }

  .invite-card-like {
    @apply absolute bottom-2 right-4;
    @apply w-14 h-14 rounded-full;
    @apply bg-burgundy-400 flex items-center justify-center;
    @apply shadow-lg;
    @apply transform translate-y-1/2;
  }

  .invite-card-content {
    @apply p-5 pt-10;
    @apply pb-2;
  }

  /* Burgundy Button (base style for all burgundy buttons) */
  .btn-burgundy,
  .swipe-button {
    @apply inline-flex items-center justify-center;
    @apply px-8 py-1.5;
    @apply bg-burgundy-400 text-white;
    @apply rounded-full;
    @apply transition-all duration-200;
    @apply cursor-pointer;
    font-family: var(--font-abeezee);
  }

  .btn-burgundy:hover,
  .swipe-button:hover {
    @apply bg-burgundy-500;
  }

  .btn-burgundy:active,
  .swipe-button:active {
    @apply bg-burgundy-600;
  }

  .btn-burgundy:disabled,
  .swipe-button:disabled {
    @apply text-white/40;
    @apply cursor-not-allowed;
    @apply opacity-70;
  }

  /* Navigation Indicators */
  .indicator {
    @apply transition-all duration-300;
  }

  .indicator.active {
    @apply bg-white w-6;
  }

  /* Navigation Buttons */
  .nav-button {
    @apply fixed top-1/2 -translate-y-1/2;
    @apply w-12 h-12 rounded-full;
    @apply bg-white/20 backdrop-blur-sm;
    @apply flex items-center justify-center;
    @apply text-white;
    @apply hover:bg-white/30;
    @apply transition-all duration-300;
    @apply z-30;
    @apply hidden md:flex;
  }

  .nav-button-burgundy {
    @apply fixed top-1/2 -translate-y-1/2;
    @apply w-12 h-12 rounded-full;
    @apply bg-burgundy-400/50 backdrop-blur-sm;
    @apply flex items-center justify-center;
    @apply text-white;
    @apply hover:bg-burgundy-400/70;
    @apply transition-all duration-300;
    @apply z-30;
    @apply hidden md:flex;
  }

  .nav-prev {
    @apply left-4;
  }

  .nav-next {
    @apply right-4;
  }
}

@keyframes swipe-out-left {
  to {
    transform: translateX(-150%) rotate(-15deg) scale(0.9);
    opacity: 0;
  }
}

@keyframes swipe-out-right {
  to {
    transform: translateX(150%) rotate(15deg) scale(0.9);
    opacity: 0;
  }
}

/* ============================================
   FADING BORDER EFFECT
   ============================================ */

@layer components {
  .fading-border {
    @apply relative;
  }

  .fading-border::before {
    content: '';
    @apply absolute inset-0 rounded-2xl pointer-events-none;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  }
}

.rsvp-card.fading-border::before {
  border-bottom-left-radius: 18px;
  border-bottom-right-radius: 18px;
}

.find-invite-card.fading-border::before {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

/* ============================================
   LOADING OVERLAY STYLES
   ============================================ */

@layer components {
  .loading-overlay {
    @apply fixed inset-0 z-50;
    @apply flex items-center justify-center;
    background: rgba(42, 86, 71, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    opacity: 1;
    transition: opacity 300ms ease-out;
  }

  .loading-overlay.fading {
    opacity: 0;
    pointer-events: none;
  }

  .loading-overlay-content {
    @apply flex flex-col items-center justify-center;
    @apply text-center px-8;
  }
}

/* ============================================
   MATCH SCREEN STYLES
   ============================================ */

@layer components {
  .match-screen {
    @apply transition-opacity duration-300;
  }

  .match-content {
    @apply opacity-0;
    transform: scale(0.9);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .match-content.animate-in {
    @apply opacity-100;
    transform: scale(1);
  }

  /* Match Photos Container */
  .match-photos {
    @apply relative flex items-center justify-center;
  }

  .match-photo {
    @apply absolute;
  }

  .match-photo-frame {
    @apply w-36 h-44 rounded-xl overflow-hidden;
  }

  @media (min-width: 400px) {
    .match-photo-frame {
      @apply w-40 h-52;
    }
  }

  /* Left photo - tilted right, positioned bottom-left */
  .match-photo-left {
    left: 10%;
    bottom: 0;
    transform: rotate(8deg);
    z-index: 2;
    animation: photo-float-left 3s ease-in-out infinite;
  }

  /* Right photo - tilted left, positioned top-right */
  .match-photo-right {
    right: 10%;
    top: 0;
    transform: rotate(-6deg);
    z-index: 1;
    animation: photo-float-right 3s ease-in-out infinite;
    animation-delay: 0.5s;
  }

  /* Heart Badges */
  .match-heart-badge {
    @apply absolute w-10 h-10 rounded-full;
    @apply bg-burgundy-400 flex items-center justify-center;
    @apply shadow-lg;
    animation: heart-pulse 2s ease-in-out infinite;
  }

  .match-heart-left {
    bottom: -8px;
    left: 10px;
    animation-delay: 0.3s;
  }

  .match-heart-right {
    top: -8px;
    right: -8px;
    animation-delay: 0s;
  }
}

@keyframes photo-float-left {
  0%, 100% {
    transform: rotate(8deg) translateY(0);
  }
  50% {
    transform: rotate(8deg) translateY(-8px);
  }
}

@keyframes photo-float-right {
  0%, 100% {
    transform: rotate(-6deg) translateY(0);
  }
  50% {
    transform: rotate(-6deg) translateY(-8px);
  }
}

@keyframes heart-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* ============================================
   CONFIRMATION PAGE STYLES
   ============================================ */

@layer components {
  .confirmation-photo {
    @apply relative;
  }

  /* Heart badge positioned top-right of photo */
  .confirmation-heart-right {
    position: absolute;
    top: 5%;
    right: -16px;
    animation-delay: 0s;
  }

  /* Heart badge positioned bottom-left of photo */
  .confirmation-heart-left {
    position: absolute;
    bottom: 5%;
    left: -16px;
    animation-delay: 0.3s;
  }

  .confirmation-card {
    background: rgba(90, 16, 48, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Calendar Button & Dropdown */
  .calendar-btn {
    background-color: rgba(187, 74, 108, 0.6);
  }

  .calendar-btn:hover {
    background-color: rgba(187, 74, 108, 0.8);
  }

  .calendar-dropdown {
    background: rgba(90, 16, 48, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
  }

  .calendar-dropdown-item {
    @apply flex items-center gap-3 px-4 py-3;
    @apply text-white transition-colors duration-150;
    font-family: var(--font-abeezee);
  }

  .calendar-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  .calendar-dropdown-item:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ============================================
   RSVP FORM STYLES
   ============================================ */

@layer components {
  .rsvp-card {
    @apply rounded-2xl p-6;
    @apply mx-4;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .rsvp-form {
    @apply space-y-1;
  }

  .rsvp-field {
    @apply py-3;
  }

  .rsvp-label {
    @apply text-white font-abeezee text-sm;
  }

  .rsvp-input {
    @apply w-full bg-transparent border-0 border-b border-white/30;
    @apply text-white placeholder-white/50;
    @apply py-2 px-0;
    @apply focus:outline-none focus:border-white/60;
    @apply transition-colors duration-200;
    font-family: var(--font-abeezee);
  }

  .rsvp-input-readonly {
    @apply text-white cursor-default;
  }

  .rsvp-select {
    @apply w-full bg-transparent border-0;
    @apply text-white;
    @apply py-2 px-0;
    @apply focus:outline-none;
    @apply transition-colors duration-200;
    @apply cursor-pointer;
    @apply appearance-none;
    font-family: var(--font-abeezee);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 20px;
    padding-right: 28px;
  }

  .rsvp-select option {
    @apply bg-burgundy-700 text-white;
  }

  /* Heart Toggle Styles */
  .heart-toggle {
    @apply cursor-pointer transition-all duration-200;
    @apply flex items-center justify-center;
  }

  .heart-icon {
    @apply w-8 h-8 transition-all duration-200;
  }

  .heart-toggle.heart-inactive {
    @apply text-white;
    @apply opacity-40;
  }

  .heart-toggle.heart-active {
    @apply opacity-100;
  }

  .heart-toggle:hover {
    @apply opacity-80;
  }

  .heart-toggle.heart-active:hover {
    @apply opacity-100;
  }

  /* Submit Button */
  .rsvp-submit {
    @apply py-3 px-18;
    @apply rounded-full;
    @apply text-white font-abeezee;
    @apply cursor-pointer;
    @apply transition-all duration-200;
    background: linear-gradient(135deg, var(--color-burgundy-400) 0%, var(--color-burgundy-500) 100%);
    box-shadow: 0 4px 15px rgba(155, 53, 88, 0.4);
  }

  .rsvp-submit:hover {
    background: linear-gradient(135deg, var(--color-burgundy-500) 0%, var(--color-burgundy-600) 100%);
    box-shadow: 0 6px 20px rgba(155, 53, 88, 0.5);
  }

  .rsvp-submit:active {
    @apply scale-98;
    box-shadow: 0 2px 10px rgba(155, 53, 88, 0.3);
  }
}

/* ============================================
   BUTTON STYLES
   ============================================ */

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center;
    @apply px-6 py-3;
    @apply bg-gradient-to-r from-gold-400 to-gold-500;
    @apply text-white font-semibold;
    @apply rounded-full;
    @apply shadow-lg;
    @apply transition-all duration-300;
    @apply transform;
  }

  .btn-primary:hover {
    @apply from-gold-500 to-gold-600;
    @apply scale-105;
  }

  .btn-primary:active {
    @apply from-gold-600 to-gold-700;
    @apply scale-100;
  }

  .btn-primary:disabled {
    @apply from-gold-300 to-gold-400 text-white/50;
    @apply cursor-not-allowed scale-100;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center;
    @apply px-6 py-3;
    @apply border-2 border-blush-400;
    @apply text-blush-600;
    @apply font-semibold;
    @apply rounded-full;
    @apply transition-all duration-300;
  }

  .btn-secondary:hover {
    @apply bg-blush-50;
  }

  .btn-secondary:active {
    @apply bg-blush-100;
  }

  .btn-secondary:disabled {
    @apply border-blush-200 text-blush-300;
    @apply cursor-not-allowed;
  }
}

/* ============================================
   FORM STYLES
   ============================================ */

@layer components {
  .form-input {
    @apply w-full px-4 py-3;
    @apply rounded-xl;
    @apply border border-blush-200;
    @apply bg-white/80 backdrop-blur-sm;
    @apply focus:border-gold-400 focus:ring-2 focus:ring-gold-400/20;
    @apply transition-all duration-200;
    @apply text-gray-800;
  }

  .form-label {
    @apply block text-sm font-medium text-blush-700 mb-2;
  }

  .form-radio-group {
    @apply flex gap-4 flex-wrap;
  }

  .form-radio-label {
    @apply flex items-center gap-2;
    @apply cursor-pointer;
    @apply px-4 py-3;
    @apply rounded-xl;
    @apply border border-blush-200;
    @apply hover:border-gold-400;
    @apply transition-all duration-200;
  }

  .form-radio-label:has(input:checked) {
    @apply border-gold-400 bg-gold-50;
  }
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

@layer components {
  .font-script {
    font-family: var(--font-script);
  }
}

/* ============================================
   UTILITY ANIMATIONS
   ============================================ */

@layer utilities {
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
}

/* ============================================
   RESPONSIVE & ACCESSIBILITY
   ============================================ */

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .slide,
  .match-content,
  .match-photo,
  .match-heart-badge {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }

  .slide.active {
    transform: none !important;
  }

  .match-photo-left {
    transform: rotate(8deg) !important;
  }

  .match-photo-right {
    transform: rotate(-6deg) !important;
  }
}

/* Touch device optimizations */
.touch-device .slide-content {
  cursor: grab;
}

.touch-device .slide-content:active {
  cursor: grabbing;
}

/* Hide scrollbar but allow scrolling */
.carousel-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.carousel-container::-webkit-scrollbar {
  display: none;
}