/* Wedding Portal — Custom styles beyond Tailwind utilities */

/* ===== Design Tokens ===== */
:root {
  --color-champagne: #D4A574;
  --color-champagne-light: #E8C9A0;
  --color-champagne-dark: #B8884E;
  --color-champagne-glow: rgba(212, 165, 116, 0.15);
  --color-champagne-glow-strong: rgba(212, 165, 116, 0.25);

  /* Timing */
  --t-instant: 80ms;
  --t-responsive: 150ms;
  --t-deliberate: 300ms;
  --t-modal: 400ms;

  /* Easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== Champagne accent color utilities ===== */
.text-champagne { color: var(--color-champagne); }
.text-champagne-light { color: var(--color-champagne-light); }
.bg-champagne { background-color: var(--color-champagne); }
.bg-champagne\/10 { background-color: var(--color-champagne-glow); }
.bg-champagne\/20 { background-color: var(--color-champagne-glow-strong); }
.border-champagne { border-color: var(--color-champagne); }
.border-champagne\/20 { border-color: rgba(212, 165, 116, 0.2); }
.border-champagne\/30 { border-color: rgba(212, 165, 116, 0.3); }
.ring-champagne\/20 { --tw-ring-color: rgba(212, 165, 116, 0.2); }
.ring-champagne\/30 { --tw-ring-color: rgba(212, 165, 116, 0.3); }
.shadow-champagne { box-shadow: 0 0 20px rgba(212, 165, 116, 0.15); }
.from-champagne { --tw-gradient-from: var(--color-champagne); }
.to-champagne-dark { --tw-gradient-to: var(--color-champagne-dark); }

/* ===== Progress bar fills ===== */
.progress-champagne {
  background: linear-gradient(90deg, var(--color-champagne-dark), var(--color-champagne));
}

/* ===== Bottom Nav ===== */
.bottom-nav-item {
  transition: color var(--t-responsive) ease, transform var(--t-responsive) var(--ease-spring);
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item:active {
  transform: scale(0.92);
}
.bottom-nav-item.active .nav-icon {
  color: var(--color-champagne);
}
.bottom-nav-item.active .nav-label {
  color: var(--color-champagne);
}
.bottom-nav-item.active .nav-dot {
  opacity: 1;
  transform: scaleX(1);
}
.nav-dot {
  opacity: 0;
  transform: scaleX(0);
  transition: all var(--t-responsive) var(--ease-out-expo);
}

/* ===== Card interactions ===== */
.card-press {
  transition: transform var(--t-responsive) var(--ease-spring),
              box-shadow var(--t-responsive) ease;
  -webkit-tap-highlight-color: transparent;
}
.card-press:active {
  transform: scale(0.98);
}
@media (hover: hover) {
  .card-press:hover {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(212, 165, 116, 0.1);
  }
}

/* ===== Featured / Top Pick card glow ===== */
.card-featured {
  border-color: rgba(212, 165, 116, 0.3);
  box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.1), 0 4px 24px rgba(212, 165, 116, 0.08);
}
@media (hover: hover) {
  .card-featured:hover {
    box-shadow: 0 0 0 1px rgba(212, 165, 116, 0.2), 0 4px 32px rgba(212, 165, 116, 0.15);
  }
}

/* ===== FAB ===== */
.fab-button {
  transition: transform var(--t-deliberate) var(--ease-spring),
              box-shadow var(--t-responsive) ease;
  -webkit-tap-highlight-color: transparent;
}
.fab-button:active {
  transform: scale(0.9);
}
.fab-button.open {
  transform: rotate(45deg);
}
.fab-button.open:active {
  transform: rotate(45deg) scale(0.9);
}
.fab-menu-item {
  opacity: 0;
  transform: translateY(16px) scale(0.8);
  transition: all var(--t-deliberate) var(--ease-out-expo);
  pointer-events: none;
}
.fab-menu.open .fab-menu-item {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.fab-menu.open .fab-menu-item:nth-child(1) { transition-delay: 0ms; }
.fab-menu.open .fab-menu-item:nth-child(2) { transition-delay: 50ms; }
.fab-menu.open .fab-menu-item:nth-child(3) { transition-delay: 100ms; }
.fab-menu.open .fab-menu-item:nth-child(4) { transition-delay: 150ms; }
.fab-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-deliberate) ease;
}
.fab-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Swipe hint animation ===== */
@keyframes swipe-hint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-8px); }
}
.swipe-hint {
  animation: swipe-hint 2s ease-in-out infinite;
  animation-delay: 3s;
}

/* ===== Timeline connector ===== */
.timeline-line {
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: -16px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(212, 165, 116, 0.4), rgba(212, 165, 116, 0.1));
}

/* ===== Login screen ===== */
.login-ring {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(212, 165, 116, 0.3) 90deg,
    rgba(212, 165, 116, 0.05) 180deg,
    transparent 270deg,
    rgba(212, 165, 116, 0.2) 360deg
  );
  animation: ring-rotate 12s linear infinite;
}
@keyframes ring-rotate {
  to { transform: rotate(360deg); }
}
.login-input:focus {
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.3),
              0 0 20px rgba(212, 165, 116, 0.1);
}

/* ===== Details / Summary touch-friendly ===== */
details summary {
  padding: 8px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  -webkit-tap-highlight-color: transparent;
}
details summary::-webkit-details-marker {
  display: none;
}
details summary::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-right: 8px;
  transition: transform var(--t-responsive) var(--ease-out-expo);
  flex-shrink: 0;
}
details[open] summary::before {
  transform: rotate(90deg);
}

/* ===== Favorite button — ensure 44px touch target ===== */
.btn-favorite {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-responsive) ease;
}
@media (hover: hover) {
  .btn-favorite:hover {
    background-color: rgba(63, 63, 70, 0.5);
  }
}
.btn-favorite:active {
  background-color: rgba(63, 63, 70, 0.8);
}

/* ===== Wow Factor badge — venue score ===== */
.wow-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.wow-badge .wow-score {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}
.wow-badge .wow-label {
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* ===== Page loading indicator (htmx body class OR JS .active) ===== */
.htmx-request .page-loading-bar,
.page-loading-bar.active {
  opacity: 1;
  animation: loading-slide 1.5s ease-in-out infinite;
}
.page-loading-bar {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  opacity: 0;
  background: linear-gradient(90deg, transparent, var(--color-champagne), transparent);
  transition: opacity var(--t-responsive) ease;
}
@keyframes loading-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ===== Empty state illustration ===== */
.empty-state-icon {
  color: rgba(113, 113, 122, 0.5);
}

/* ===== More menu sheet ===== */
.more-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  transform: translateY(100%);
  transition: transform var(--t-deliberate) var(--ease-out-expo);
}
.more-sheet.open {
  transform: translateY(0);
}
.more-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(9, 9, 11, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-deliberate) ease;
}
.more-sheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .fab-button.open { transform: rotate(0deg); }
  .login-ring { animation: none; }
  .page-loading-bar { animation: none; }
}

/* ===== Desktop sidebar ===== */
@media (min-width: 1024px) {
  .sidebar-item {
    transition: background-color var(--t-responsive) ease,
                border-color var(--t-responsive) ease;
  }
  .sidebar-item:hover {
    background-color: rgba(212, 165, 116, 0.08);
  }
  .sidebar-item.active {
    background-color: rgba(212, 165, 116, 0.1);
    border-left-color: var(--color-champagne);
  }
}

/* ===== Mobile-first responsive fixes ===== */

/* Prevent horizontal overflow on all pages */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevent iOS auto-zoom on input focus — inputs must be >= 16px.
   This is the single most common mobile UX bug on iOS Safari. */
@media screen and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Badge text: bump from 11px to 12px minimum for readability on mobile.
   The [11px] badges carry semantic meaning (tier, LGBTQ+, RSVP status)
   so they must remain legible at arm's length. */
@media (max-width: 767px) {
  .text-\[11px\] {
    font-size: 12px;
  }
  .text-\[10px\] {
    font-size: 11px;
  }
}

/* Budget totals grid: use smaller font on very narrow screens
   to prevent text overflow in the 3-column layout */
@media (max-width: 374px) {
  .budget-amount {
    font-size: 1.25rem; /* text-xl instead of text-2xl */
  }
}

/* FAB safe-area inset: on notched iPhones the FAB sits in the
   bottom-right corner. Ensure it clears the home indicator. */
@media (max-width: 1023px) {
  #fab-container {
    bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    right: max(1rem, env(safe-area-inset-right, 0px));
  }
}

/* All interactive elements: enforce minimum 44px touch target
   using an invisible padding expansion. This catches any buttons
   or links that are visually small but need a larger tap area. */
@media (pointer: coarse) {
  /* Small icon-only buttons (favorite hearts, action icons) */
  button:not(.fab-button):not([type="submit"]) {
    position: relative;
  }

  /* Ensure all links inside card rows are tappable */
  a[href] {
    -webkit-tap-highlight-color: transparent;
  }

  /* Details summary needs comfortable tap zone */
  details > summary {
    min-height: 44px;
    cursor: pointer;
  }
}

/* ===== Scrollbar styling ===== */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(212, 165, 116, 0.2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(212, 165, 116, 0.4);
}

/* ===== Smooth scroll for the whole page ===== */
html {
  scroll-behavior: smooth;
}

/* ===== Top pick ribbon ===== */
.top-pick-ribbon {
  position: absolute;
  top: 12px;
  right: -6px;
  z-index: 10;
}
.top-pick-ribbon::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  border-width: 0 6px 6px 0;
  border-style: solid;
  border-color: transparent;
  border-right-color: var(--color-champagne-dark);
}