/* ============================================
   CUSTOM LAYOUT UTILITIES
   ============================================ */

/* --- THEME UTILITIES --- */
:root {
  --color-bg: #F3F5F7;
  --color-text: #111316;
  --color-muted: #6A7280;
  --color-accent: #FF6E3A;
  --color-accent-dark: #C44A1F;
  --shadow-soft: 0 20px 40px -10px rgba(0,0,0,0.05), 0 0 15px rgba(0,0,0,0.02);
  --shadow-hard: 0 25px 50px -12px rgba(0,0,0,0.15);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.glass-card {
  background: white;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(0,0,0,0.02);
  border-radius: 32px;
  transition: all 0.3s ease;
}

.glass-card:hover {
  box-shadow: var(--shadow-hard);
  transform: translateY(-2px);
}

.squish-hover {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.squish-hover:hover {
  transform: scale(1.02);
}
.squish-hover:active {
  transform: scale(0.98);
}

/* ANIMATIONS */
@keyframes float-orb-1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}
@keyframes float-orb-2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-30px, 50px) scale(1.1); }
    66% { transform: translate(20px, -20px) scale(0.9); }
}

.animate-orb-1 { animation: float-orb-1 15s ease-in-out infinite; }
.animate-orb-2 { animation: float-orb-2 18s ease-in-out infinite; }

@keyframes float-avatar {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(2deg); }
  75% { transform: translateY(4px) rotate(-1deg); }
}

.avatar-float {
  animation: float-avatar 6s ease-in-out infinite;
}

@layer components {
  /* CONTAINER & WRAPPER UTILITIES */

  /* Main page container - replaces: px-4 md:px-6 lg:px-8 py-6 md:py-8 max-w-7xl mx-auto w-full */
  .container-page {
    @apply px-4 md:px-6 lg:px-8 py-6 md:py-8 max-w-7xl mx-auto w-full;
  }

  /* Content-width container - for forms, articles */
  .container-content {
    @apply max-w-2xl mx-auto;
  }

  /* Narrow container - for modals, hero CTAs */
  .container-narrow {
    @apply max-w-md mx-auto;
  }

  /* Medium container - for "How It Works" style sections */
  .container-medium {
    @apply max-w-5xl mx-auto;
  }

  /* Hero container - for hero sections */
  .container-hero {
    @apply max-w-3xl mx-auto;
  }


  /* PADDING UTILITIES */

  /* Standard card padding (large) */
  .padding-card {
    @apply p-6;
  }

  /* Compact card padding */
  .padding-card-compact {
    @apply p-4;
  }

  /* Vertical-only section padding */
  .padding-section {
    @apply py-6;
  }

  /* Empty state padding */
  .padding-empty-state {
    @apply py-12;
  }


  /* SECTION SPACING (MARGINS) */

  /* Major section spacing - between major page sections */
  .section-spacing-major {
    @apply mt-20;
  }

  /* Section spacing - between subsections */
  .section-spacing {
    @apply mt-8;
  }

  /* Small section spacing - within sections */
  .section-spacing-sm {
    @apply mt-6;
  }


  /* GRID & STACK SPACING */

  /* Card grid gap - for creator cards, trip grids */
  .grid-gap-cards {
    @apply gap-6;
  }

  /* Form grid gap - for form layouts */
  .grid-gap-form {
    @apply gap-4;
  }

  /* Generic list gap */
  .stack-gap {
    @apply gap-4;
  }

  /* Vertical stacking with space-y */
  .stack-vertical {
    @apply space-y-4;
  }

  .stack-vertical-tight {
    @apply space-y-3;
  }

  .stack-vertical-loose {
    @apply space-y-6;
  }


  /* COMPONENT-SPECIFIC LAYOUTS */

  /* Trip/itinerary card */
  .trip-card {
    @apply p-4 bg-base-200 rounded-lg;
  }

  /* Creator card container */
  .creator-card {
    @apply bg-base-100 p-6;
  }

  /* Empty state container */
  .empty-state {
    @apply flex flex-col items-center text-center py-12;
  }


  /* iOS-STYLE SETTINGS COMPONENTS */

  /* Settings group container - rounded container with border */
  .settings-group {
    @apply bg-base-100 rounded-xl border border-base-300 overflow-hidden;
  }

  /* Settings row - full-width clickable row */
  .settings-row {
    @apply flex items-center justify-between px-4 py-3.5 w-full text-left;
    @apply text-base-content no-underline;
    @apply transition-colors duration-150;
    @apply border-b border-base-300 last:border-b-0;
    @apply bg-transparent;
    @apply cursor-pointer;
  }

  /* Remove default button styles when used as settings-row */
  button.settings-row {
    @apply appearance-none border-0;
  }

  button.settings-row:focus {
    @apply outline-none;
  }

  .settings-row:hover {
    @apply bg-base-200;
  }

  .settings-row:active {
    @apply bg-base-300;
  }

  /* Settings row label */
  .settings-row-label {
    @apply text-base font-normal text-base-content;
  }

  /* Danger/destructive row (e.g., Log Out) */
  .settings-row-danger .settings-row-label {
    @apply text-error;
  }

  .settings-row-danger:hover {
    @apply bg-error/10;
  }

  .settings-row-danger:active {
    @apply bg-error/20;
  }


  /* TRIP CARD COMPONENTS */

  /* Trip group container - rounded container with border (like settings-group) */
  .trip-group {
    @apply bg-base-100 rounded-xl border border-base-300 overflow-hidden;
  }

  /* Trip row - full-width row with content */
  .trip-row {
    @apply flex items-center justify-between px-4 py-3.5 w-full;
    @apply transition-colors duration-150;
    @apply border-b border-base-300 last:border-b-0;
  }

  .trip-row:hover {
    @apply bg-base-200;
  }

  /* Trip date text - smaller */
  .trip-date {
    @apply text-xs;
  }

  /* Trip edit button - icon only */
  .trip-edit-btn {
    @apply flex items-center justify-center;
    @apply w-8 h-8 rounded-lg;
    @apply text-base-content/70 hover:text-base-content;
    @apply hover:bg-base-300;
    @apply transition-colors duration-150;
    @apply no-underline;
    @apply flex-shrink-0;
  }


  /* DATE INPUT STYLING */

  /* Style date input placeholder text to be lighter gray */
  input[type="date"].date-input::-webkit-datetime-edit-text,
  input[type="date"].date-input::-webkit-datetime-edit-month-field,
  input[type="date"].date-input::-webkit-datetime-edit-day-field,
  input[type="date"].date-input::-webkit-datetime-edit-year-field {
    @apply text-base-content/50;
  }

  input[type="date"].date-input:invalid::-webkit-datetime-edit-text,
  input[type="date"].date-input:invalid::-webkit-datetime-edit-month-field,
  input[type="date"].date-input:invalid::-webkit-datetime-edit-day-field,
  input[type="date"].date-input:invalid::-webkit-datetime-edit-year-field {
    @apply text-base-content/50;
  }

  /* For Firefox */
  input[type="date"].date-input:invalid {
    @apply text-base-content/50;
  }
}

/* ANIMATIONS */
@keyframes gradient-x {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 8s ease infinite;
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
/* Dark mode glass */
@media (prefers-color-scheme: dark) {
    .glass-panel {
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
}