/**
 * Utility Classes
 * Common utility classes for component styling
 * Extracted from components.css for better organization
 *
 * Tailwind color utilities: remapped in themes/dark-mode.css (dark) and Tailwind defaults (light).
 * Do not add global .text-blue-* overrides here — they fight Tailwind and page-specific CSS.
 */

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

.focus-ring:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

/* ============================================================================
   ANIMATION UTILITIES
   ============================================================================ */

.animation-delay-50 { animation-delay: 0.05s; }
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }

/* ============================================================================
   ACCESSIBILITY UTILITIES FROM CUSTOM.CSS
   ============================================================================ */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rounded-full img,
.rounded-full div {
  display: block !important;
  visibility: visible !important;
}

/* ============================================================================
   IMAGE OVERLAY FIXES
   ============================================================================ */

img::before,
img::after {
  content: none !important;
  display: none !important;
}

[jsname][role="button"],
div[aria-label="Visual search"] {
  display: none !important;
}

/* ============================================================================
   ENHANCED FOCUS STATES
   ============================================================================ */

.focus-enhanced:focus,
.focus-enhanced:focus-visible {
  outline: 2px solid var(--color-primary-blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
}

/* ============================================================================
   TRANSITION UTILITIES
   ============================================================================ */

.transition-smooth {
  transition:
    color var(--transition-base, 0.2s ease),
    background-color var(--transition-base, 0.2s ease),
    border-color var(--transition-base, 0.2s ease),
    box-shadow var(--transition-base, 0.2s ease),
    transform var(--transition-base, 0.2s ease);
}

.transition-smooth:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-medium);
}

/* ============================================================================
   ICON SIZE SYSTEM
   ============================================================================ */

/* Default icon sizing in main content only; nav/toolbar icons set size in component CSS */
main#main-content svg:not(.ai-action-icon):not(.listspot-map-tool-icon):not(.compact-map-tool-icon):not(.gtb-icon):not([class*="notif-prefs-"]):not(.auth-recovery-icon-svg):not(.swiftspot-app-store-badge__mark):not([width]):not([height]):not([class*="w-"]):not([class*="h-"]) {
  width: auto;
  height: auto;
}

.wizard-step header h2 svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
}

.dropdown-button svg,
#user-menu-button svg,
nav.swiftspot-main-nav .dropdown-trigger svg,
nav.swiftspot-main-nav button.dropdown-trigger svg {
  width: inherit !important;
  height: inherit !important;
}

/* ============================================================================
   REMOVE NUMBER INPUT SPINNER BUTTONS
   ============================================================================ */

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
}

/* ============================================================================
   LISTSPOT UNIFIED ACCESSIBILITY STYLES
   ============================================================================ */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  z-index: var(--z-toast);
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 2px solid var(--primary-color);
  border-radius: 0.375rem;
  text-decoration: none;
  font-weight: 600;
}

@media (prefers-contrast: high) {
  .skip-link:focus {
    outline: 3px solid currentColor;
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-step-segment-bar,
  .mobile-back-btn {
    transition: none;
  }
}

/* Global toast stack (replaces per-template z-[5000] / z-[9000] Tailwind hacks) */
#toast-container,
.ss-toast-stack {
  position: fixed;
  top: max(4.75rem, calc(env(safe-area-inset-top, 0px) + 3.75rem));
  right: max(1rem, env(safe-area-inset-right, 0px));
  left: auto;
  width: min(22rem, calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  z-index: var(--z-toast);
  pointer-events: none;
  box-sizing: border-box;
}

/* Mobile: narrower flash/toast banners; background hugs content */
@media (max-width: 640px) {
  #toast-container,
  .ss-toast-stack {
    right: max(1.25rem, env(safe-area-inset-right, 0px));
    width: min(16.5rem, calc(100vw - 2.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
    align-items: flex-end;
  }

  #toast-container > *,
  .ss-toast-stack-item,
  .ss-toast {
    width: fit-content;
    max-width: 100%;
  }

  #flash-notifications {
    width: min(16.5rem, calc(100vw - 2.5rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  }

  #flash-notifications .flash-notification {
    width: fit-content;
    max-width: 100%;
  }
}

.swiftspot-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: calc(var(--z-toast, 9000) + 1);
  padding: 0.5rem 1rem;
  padding-top: max(0.5rem, env(safe-area-inset-top, 0px));
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
  background: rgba(234, 88, 12, 0.96);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.15);
}

.swiftspot-offline-banner.hidden {
  display: none;
}

#toast-container > *,
.ss-toast-stack-item {
  pointer-events: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

.ss-toast-stack-item {
  opacity: 0;
  transform: translateX(0.75rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.ss-toast-stack-item--visible {
  opacity: 1;
  transform: translateX(0);
}

.ss-toast-stack-item--exit {
  opacity: 0;
  transform: translateX(0.75rem);
}

.ss-toast-title,
.ss-toast-body,
.ss-toast-actions {
  pointer-events: auto;
}

.ss-toast-action {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

/* Inline / page-level flash rows */
.ss-flash-stack {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.ss-flash-callout {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  box-sizing: border-box;
}

.ss-flash-callout p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ss-flash-callout--dismissing {
  opacity: 0;
  transform: translateY(-0.25rem);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

@keyframes slideDownFade {
  from {
    opacity: 0;
    transform: translateY(-0.625rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-toast-stack-item,
  .ss-toast-stack-item--visible,
  .ss-toast-stack-item--exit {
    transition: none;
    transform: none;
  }

  #flash-notifications .flash-notification {
    animation: none !important;
  }
}

/* Skip-to-content: sit above most chrome when focused (see --z-my-bookings-header) */
.skip-to-main:focus,
.skip-to-main:focus-visible {
  z-index: var(--z-my-bookings-header);
}

/* Floating support widget (replaces Tailwind z-[9999]) */
#supportChatWidget {
  z-index: var(--z-support-chat);
}

/* Checkout saved cards / delete confirm (stacked modals; replaces z-[9999] / z-[99999]) */
#card-management-modal {
  z-index: var(--z-high-modal);
}

#delete-card-confirm-modal {
  z-index: calc(var(--z-high-modal) + 1);
}

/* My bookings flash strip (replaces z-[9999999]) */
#flash-notifications {
  position: fixed;
  top: max(5rem, calc(env(safe-area-inset-top, 0px) + 1rem));
  left: 50%;
  transform: translateX(-50%);
  width: min(28rem, calc(100vw - 2rem - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-width: 100%;
  box-sizing: border-box;
  z-index: calc(var(--z-high-modal) + 2);
  pointer-events: none;
}

#flash-notifications .flash-notification {
  pointer-events: auto;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Opt-in section rhythm for templates that stack titled blocks (host/renter shells) */
.ui-section-stack {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap-md, var(--spacing-xl));
}

.ui-section-stack--compact {
  gap: var(--section-gap-sm, var(--spacing-lg));
}

/* Shared typography roles. These are opt-in so page-specific hierarchy can stay intentional. */
.sp-page-title {
  color: var(--text-heading);
  font-size: var(--type-page-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--type-page-title-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.sp-section-title {
  color: var(--text-heading);
  font-size: var(--type-section-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--type-section-title-line-height);
  letter-spacing: -0.01em;
}

.sp-card-title {
  color: var(--text-heading);
  font-size: var(--type-card-title-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.sp-body {
  color: var(--text-body);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-body);
  line-height: var(--type-body-line-height);
}

.sp-muted {
  color: var(--text-supporting);
  font-size: var(--type-muted-size);
  line-height: var(--line-height-body);
}

.sp-label {
  color: var(--text-supporting);
  font-size: var(--type-label-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.sp-caption {
  color: var(--text-caption);
  font-size: var(--type-caption-size);
  line-height: var(--line-height-body);
}

.sp-button-label {
  font-size: var(--type-button-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.sp-badge-label {
  font-size: var(--type-badge-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* Neutral callouts: prefer these over pastel blue/purple/indigo tinted boxes */
.ss-callout {
  background-color: var(--surface-subtle, #f8fafc);
  border: 1px solid var(--border-ui-subtle, #e2e8f0);
}

html.dark .ss-callout,
body.dark .ss-callout,
.dark .ss-callout {
  background-color: var(--color-dark-surface);
  border-color: var(--color-dark-border);
}

/* Host portal tinted status banners (listings setup, property context).
   Uses explicit light/dark colors — indigo/sky Tailwind dark: utilities are not always in the build. */
.host-status-callout {
  border-width: 1px;
  border-style: solid;
}

.host-status-callout--indigo {
  border-color: #c7d2fe;
  background-color: #eef2ff;
  color: #312e81;
}

html.dark .host-status-callout--indigo,
body.dark .host-status-callout--indigo,
.dark .host-status-callout--indigo {
  border-color: #4338ca;
  background-color: rgba(30, 27, 75, 0.55);
  color: #e0e7ff;
}

.host-status-callout--sky {
  border-color: #bae6fd;
  background-color: #f0f9ff;
  color: #0c4a6e;
}

html.dark .host-status-callout--sky,
body.dark .host-status-callout--sky,
.dark .host-status-callout--sky {
  border-color: #0369a1;
  background-color: rgba(8, 47, 73, 0.55);
  color: #e0f2fe;
}

.host-status-callout__link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

.host-status-callout--indigo .host-status-callout__link {
  color: #4338ca;
}

html.dark .host-status-callout--indigo .host-status-callout__link,
body.dark .host-status-callout--indigo .host-status-callout__link,
.dark .host-status-callout--indigo .host-status-callout__link {
  color: #c7d2fe;
}

.host-status-callout--indigo .host-status-callout__link:hover {
  color: #3730a3;
}

html.dark .host-status-callout--indigo .host-status-callout__link:hover,
body.dark .host-status-callout--indigo .host-status-callout__link:hover,
.dark .host-status-callout--indigo .host-status-callout__link:hover {
  color: #ffffff;
}

.ss-callout--inner {
  background-color: var(--bg-subtle, #f1f5f9);
  border-radius: var(--border-radius-base, 0.5rem);
}

html.dark .ss-callout--inner,
body.dark .ss-callout--inner,
.dark .ss-callout--inner {
  background-color: var(--color-dark-surface-raised);
}

.ss-callout-accent-blue {
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--color-primary-blue, #2563eb);
}

.ss-callout-accent-violet {
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-inline-start-color: #7c3aed;
}

.ss-callout-accent-amber {
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--state-warning, #d97706);
}

.ss-callout-accent-green {
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--state-success, #059669);
}

.ss-callout-accent-rose {
  border-inline-start-width: 3px;
  border-inline-start-style: solid;
  border-inline-start-color: #e11d48;
}

.ss-callout-icon--success {
  color: var(--state-success, #059669);
}

.ss-callout-icon--error {
  color: var(--state-error, #e11d48);
}

.ss-callout-icon--warning {
  color: var(--state-warning, #d97706);
}

.ss-callout-icon--info {
  color: var(--color-primary-blue, #2563eb);
}

.ss-toast {
  box-shadow:
    0 4px 6px -1px rgb(15 23 42 / 0.12),
    0 10px 20px -4px rgb(15 23 42 / 0.14);
  backdrop-filter: blur(10px);
}

/* Transient toasts only (flash banners, cancel/refund notices) — slightly stronger than inline callouts */
.ss-toast.ss-callout {
  background-color: rgb(255 255 255 / 0.97);
  border-color: #cbd5e1;
}

.ss-toast.ss-callout-accent-green {
  background-color: rgb(240 253 244 / 0.97);
  border-color: #a7f3d0;
}

.ss-toast.ss-callout-accent-rose {
  background-color: rgb(255 241 242 / 0.97);
  border-color: #fecdd3;
}

.ss-toast.ss-callout-accent-amber {
  background-color: rgb(255 251 235 / 0.97);
  border-color: #fde68a;
}

.ss-toast.ss-callout-accent-blue {
  background-color: rgb(239 246 255 / 0.97);
  border-color: #bfdbfe;
}

html.dark .ss-toast.ss-callout,
body.dark .ss-toast.ss-callout,
.dark .ss-toast.ss-callout {
  background-color: var(--color-dark-surface-raised);
  border-color: var(--color-dark-border-strong);
}

html.dark .ss-toast.ss-callout-accent-green,
body.dark .ss-toast.ss-callout-accent-green,
.dark .ss-toast.ss-callout-accent-green {
  background-color: rgb(6 78 59 / 0.42);
  border-color: rgb(16 185 129 / 0.4);
}

html.dark .ss-toast.ss-callout-accent-rose,
body.dark .ss-toast.ss-callout-accent-rose,
.dark .ss-toast.ss-callout-accent-rose {
  background-color: rgb(136 19 55 / 0.38);
  border-color: rgb(244 63 94 / 0.4);
}

html.dark .ss-toast.ss-callout-accent-amber,
body.dark .ss-toast.ss-callout-accent-amber,
.dark .ss-toast.ss-callout-accent-amber {
  background-color: rgb(69 26 3 / 0.45);
  border-color: rgb(245 158 11 / 0.4);
}

html.dark .ss-toast.ss-callout-accent-blue,
body.dark .ss-toast.ss-callout-accent-blue,
.dark .ss-toast.ss-callout-accent-blue {
  background-color: rgb(30 58 138 / 0.38);
  border-color: rgb(59 130 246 / 0.4);
}

.ss-callout-dismiss {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
  padding: 0.25rem;
  min-width: 2rem;
  min-height: 2rem;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  box-shadow: none;
  color: var(--text-hint, #64748b);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ss-callout-dismiss:hover {
  color: var(--text-supporting, #475569);
  background: transparent;
}

.ss-callout-dismiss:focus {
  outline: none;
  box-shadow: none;
}

.ss-callout-dismiss:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}

html.dark .ss-callout-accent-amber,
body.dark .ss-callout-accent-amber,
.dark .ss-callout-accent-amber {
  background-color: rgb(69 26 3 / 0.35);
  border-color: rgb(180 83 9 / 0.4);
  border-inline-start-color: #f59e0b;
}

html.dark .ss-callout-accent-amber .ss-callout--inner,
body.dark .ss-callout-accent-amber .ss-callout--inner,
.dark .ss-callout-accent-amber .ss-callout--inner {
  background-color: rgb(120 53 15 / 0.4);
}

html.dark .ss-callout-accent-amber .ss-callout-icon,
body.dark .ss-callout-accent-amber .ss-callout-icon,
.dark .ss-callout-accent-amber .ss-callout-icon {
  color: #fbbf24;
}

html.dark .ss-callout-accent-violet .ss-callout-icon,
body.dark .ss-callout-accent-violet .ss-callout-icon,
.dark .ss-callout-accent-violet .ss-callout-icon {
  color: #c4b5fd;
}

html.dark .ss-callout-accent-blue .ss-callout-icon,
body.dark .ss-callout-accent-blue .ss-callout-icon,
.dark .ss-callout-accent-blue .ss-callout-icon {
  color: #93c5fd;
}

html.dark .ss-callout-icon--success,
body.dark .ss-callout-icon--success,
.dark .ss-callout-icon--success {
  color: #34d399;
}

html.dark .ss-callout-icon--error,
body.dark .ss-callout-icon--error,
.dark .ss-callout-icon--error {
  color: #fb7185;
}

html.dark .ss-callout-icon--warning,
body.dark .ss-callout-icon--warning,
.dark .ss-callout-icon--warning {
  color: #fbbf24;
}

html.dark .ss-callout-icon--info,
body.dark .ss-callout-icon--info,
.dark .ss-callout-icon--info {
  color: #93c5fd;
}

html.dark .ss-callout-dismiss,
body.dark .ss-callout-dismiss,
.dark .ss-callout-dismiss {
  color: var(--color-dark-text-secondary);
}

html.dark .ss-callout-dismiss:hover,
body.dark .ss-callout-dismiss:hover,
.dark .ss-callout-dismiss:hover {
  color: var(--color-dark-text-muted);
}

/* ============================================================================
   TOOLTIP BEHAVIOR (site-wide)
   Popups are display-only on hover. Only the trigger keeps them open.
   ============================================================================ */

.enhanced-tooltip,
.availability-schedule-tooltip,
.cancellation-tooltip,
.amenity-tooltip,
.ls-tooltip-content,
#fee-tooltip,
[data-checkout-tooltip-trigger] > .absolute {
  pointer-events: none !important;
}

.enhanced-tooltip.show:not(.tooltip-pinned),
.availability-schedule-tooltip.show:not(.tooltip-pinned),
body > .availability-schedule-tooltip.show:not(.tooltip-pinned),
body > .enhanced-tooltip.show:not(.tooltip-pinned) {
  pointer-events: none !important;
}

.enhanced-tooltip.tooltip-pinned.show,
.availability-schedule-tooltip.tooltip-pinned.show {
  pointer-events: auto !important;
}