/*
 * RMV - Rate My Vet
 * Custom styles to supplement Tailwind CSS.
 * Keep this minimal; prefer Tailwind utility classes in templates.
 */

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: flex;
}

/* Disable submit buttons during HTMX requests to prevent double-submission */
.htmx-request button[type="submit"],
.htmx-request [hx-get],
.htmx-request [hx-post] {
    pointer-events: none;
    opacity: 0.6;
}

/* Smooth transitions for HTMX swaps */
.htmx-swapping {
    opacity: 0;
    transition: opacity 150ms ease-out;
}
.htmx-settling {
    opacity: 1;
    transition: opacity 150ms ease-in;
}

/* Auth-required content: hidden until JS confirms authentication.
   Prevents flash of protected content before client-side redirect. */
.auth-required {
    display: none;
}
.auth-required.auth-verified {
    display: block;
}

/* Form field error state (applied by JS validation) */
input.ring-red-500,
select.ring-red-500,
textarea.ring-red-500 {
    --tw-ring-color: var(--rmv-destructive);
    box-shadow: var(--tw-ring-inset) 0 0 0 2px var(--tw-ring-color);
}

/* Focus styles for accessibility */
:focus-visible {
    outline: 2px solid var(--rmv-brand-strong);
    outline-offset: 2px;
}

/* Star rating interactive styling */
.star-rating input:checked ~ label svg,
.star-rating label:hover svg,
.star-rating label:hover ~ label svg {
    color: #facc15;
}

/* Mobile menu smooth open/close transition */
#mobile-menu.mobile-menu-open {
    max-height: 20rem;
    opacity: 1;
}

/* Active vet card highlight (map hover sync) */
.vet-card-active {
    box-shadow: 0 0 0 2px var(--rmv-brand-strong);
    border-radius: 0.75rem;
}

/* Respect reduced-motion preference (accessibility) */
@media (prefers-reduced-motion: reduce) {
    .htmx-swapping,
    .htmx-settling {
        transition: none;
    }
    #mobile-menu {
        transition: none !important;
    }
    .animate-pulse {
        animation: none;
    }
    .transition-colors,
    .transition-all {
        transition: none;
    }
}

/* Search page two-column layout (sidebar + map panel) */
#search-layout {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 4rem);
}
@media (min-width: 1024px) {
    #search-layout { flex-direction: row; }
    #search-sidebar { width: 420px; min-width: 420px; overflow-y: auto; max-height: calc(100vh - 4rem); }
    #search-map-wrap { flex: 1; position: sticky; top: 4rem; height: calc(100vh - 4rem); }
}

/* Leaflet popup — follows the active theme via the design tokens */
.leaflet-popup-content-wrapper { border-radius: 0.75rem; background: var(--rmv-bg-surface); color: var(--rmv-ink-primary); }
.leaflet-popup-tip { background: var(--rmv-bg-surface); }
.leaflet-popup-content { margin: 12px 16px; font-size: 0.875rem; }
.vet-popup-name { font-weight: 600; color: var(--rmv-ink-primary); }
.vet-popup-rating { color: var(--rmv-brand); }
.vet-popup-link { color: var(--rmv-brand); font-weight: 500; }
.vet-popup-link:hover { text-decoration: underline; }

/* Leaflet z-index fixes (below sticky header) */
.leaflet-top,
.leaflet-bottom {
    z-index: 30 !important;
}
.leaflet-pane {
    z-index: 20 !important;
}
.leaflet-popup-pane {
    z-index: 35 !important;
}

/* Force-hide nav elements when auth JS overrides responsive Tailwind classes.
   Using !important so this wins over md:flex and other responsive utilities. */
.nav-auth-hidden {
    display: none !important;
}