/* Baztera Design System - Custom Styles for Laravel */

/* Hide elements with x-cloak before Alpine.js initializes */
[x-cloak] { display: none !important; }

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* CSS Variables - Design Tokens */
:root {
    color-scheme: light;

    --background: 220 20% 98%;
    --foreground: 220 20% 10%;

    --card: 0 0% 100%;
    --card-foreground: 220 20% 10%;

    --popover: 0 0% 100%;
    --popover-foreground: 220 20% 10%;

    --primary: 210 100% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 14% 94%;
    --secondary-foreground: 220 20% 20%;

    --muted: 220 14% 91%;
    --muted-foreground: 220 10% 46%;

    --accent: 195 90% 45%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 12% 88%;
    --input: 220 12% 88%;
    --ring: 210 100% 50%;

    --radius: 0.5rem;

    /* Animation system */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --anim-duration: 800ms;

    /* Custom Baztera tokens - cool blue palette */
    --gradient-primary: linear-gradient(125deg, hsl(210 100% 50%) 0%, hsl(195 90% 45%) 50%, hsl(220 85% 60%) 100%);
    --gradient-hero: linear-gradient(185deg, hsl(215 35% 96%) 0%, hsl(220 20% 98%) 100%);
    --gradient-glow: radial-gradient(ellipse 60% 40% at 40% -10%, hsl(210 100% 50% / 0.08) 0%, transparent 60%);
    --gradient-card: linear-gradient(145deg, hsl(215 22% 99%) 0%, hsl(215 22% 97%) 100%);

    --shadow-glow: 0 4px 40px hsl(210 100% 50% / 0.15);
    --shadow-card: 0 4px 24px hsl(220 20% 10% / 0.08);
    --shadow-button: 0 6px 20px hsl(210 100% 50% / 0.2);

    --sidebar-background: 220 22% 97%;
    --sidebar-foreground: 220 20% 15%;
    --sidebar-primary: 210 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 14% 92%;
    --sidebar-accent-foreground: 220 20% 15%;
    --sidebar-border: 220 12% 88%;
    --sidebar-ring: 210 100% 50%;
}

/* Dark Mode */
.dark {
    color-scheme: dark;

    --background: 220 20% 4%;
    --foreground: 45 20% 95%;

    --card: 220 18% 7%;
    --card-foreground: 45 20% 95%;

    --popover: 220 18% 7%;
    --popover-foreground: 45 20% 95%;

    --primary: 210 100% 60%;
    --primary-foreground: 210 50% 98%;

    --secondary: 215 25% 10%;
    --secondary-foreground: 210 20% 95%;

    --muted: 215 20% 14%;
    --muted-foreground: 210 15% 55%;

    --accent: 195 90% 55%;
    --accent-foreground: 210 50% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 45 20% 95%;

    --border: 220 12% 16%;
    --input: 220 12% 16%;
    --ring: 210 100% 60%;

    --gradient-primary: linear-gradient(125deg, hsl(210 100% 60%) 0%, hsl(195 90% 55%) 50%, hsl(220 85% 65%) 100%);
    --gradient-hero: linear-gradient(185deg, hsl(215 35% 12%) 0%, hsl(220 20% 4%) 100%);
    --gradient-glow: radial-gradient(ellipse 60% 40% at 40% -10%, hsl(210 100% 50% / 0.12) 0%, transparent 60%);
    --gradient-card: linear-gradient(145deg, hsl(215 22% 9%) 0%, hsl(215 22% 6%) 100%);

    --shadow-glow: 0 4px 40px hsl(210 100% 50% / 0.2);
    --shadow-card: 0 12px 40px hsl(0 0% 0% / 0.5);
    --shadow-button: 0 6px 20px hsl(210 100% 50% / 0.25);

    --sidebar-background: 215 22% 7%;
    --sidebar-foreground: 210 20% 95%;
    --sidebar-primary: 210 100% 60%;
    --sidebar-primary-foreground: 210 50% 98%;
    --sidebar-accent: 215 25% 10%;
    --sidebar-accent-foreground: 210 20% 95%;
    --sidebar-border: 215 18% 16%;
    --sidebar-ring: 210 100% 60%;
}

/* Base Styles */
* {
    border-color: hsl(var(--border));
}

html {
    background-color: hsl(var(--background));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Utility Classes */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-hero {
    background: var(--gradient-hero);
}

.bg-gradient-glow {
    background: var(--gradient-glow);
}

.bg-gradient-card {
    background: var(--gradient-card);
}

.shadow-glow {
    box-shadow: var(--shadow-glow);
}

.shadow-card {
    box-shadow: var(--shadow-card);
}

/* Grain texture for authenticity */
.grain {
    position: relative;
}

.grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 1;
}

/* Glass effects */
.glass {
    background: hsl(0 0% 100% / 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid hsl(220 12% 88% / 0.6);
}

.glass-strong {
    background: hsl(0 0% 100% / 0.88);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid hsl(220 12% 85% / 0.5);
}

.dark .glass {
    background: hsl(220 18% 8% / 0.7);
    border-color: hsl(220 12% 18% / 0.6);
}

.dark .glass-strong {
    background: hsl(220 18% 6% / 0.85);
    border-color: hsl(220 12% 20% / 0.5);
}

/* Liquid glass — glass-strong plus saturation, depth and a specular rim.
   Used by the floating mobile tab bar and its sheets. */
/* No `position` here on purpose: landing.css loads after Tailwind, so a
   `position: relative` would override `.fixed`/`.absolute` on consumers.
   Apply a positioning utility yourself — the ::before rim needs one. */
.liquid-glass {
    isolation: isolate;
    background:
        linear-gradient(180deg, hsl(0 0% 100% / 0.55) 0%, hsl(0 0% 100% / 0.3) 100%),
        hsl(0 0% 100% / 0.62);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    border: 1px solid hsl(220 12% 85% / 0.5);
    box-shadow:
        0 10px 30px hsl(220 25% 10% / 0.12),
        0 2px 6px hsl(220 25% 10% / 0.05),
        inset 0 1px 0 hsl(0 0% 100% / 0.6);
}

/* Specular rim: a 1px gradient border that catches light on two corners */
.liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(140deg, hsl(0 0% 100% / 0.65), transparent 38%, transparent 62%, hsl(0 0% 100% / 0.25));
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* Scrollable panels: the rim is absolutely positioned, so it would scroll
   away with the content. Drop it and lean on the border + shadow instead. */
.liquid-glass.no-rim::before {
    content: none;
}

/* Dark surfaces sit just above .dark .glass-strong (hsl(220 18% 6% / 0.85)).
   The sheen is a hint of lift at the top edge, not a grey fill — anything
   lighter than ~14% here reads as a washed-out panel on the near-black page. */
.dark .liquid-glass {
    background:
        linear-gradient(180deg, hsl(220 16% 14% / 0.22) 0%, hsl(220 22% 4% / 0.4) 100%),
        hsl(220 18% 6% / 0.78);
    border-color: hsl(220 12% 20% / 0.55);
    box-shadow:
        0 10px 30px hsl(0 0% 0% / 0.45),
        0 2px 6px hsl(0 0% 0% / 0.25),
        inset 0 1px 0 hsl(0 0% 100% / 0.05);
}

.dark .liquid-glass::before {
    background: linear-gradient(140deg, hsl(0 0% 100% / 0.1), transparent 38%, transparent 62%, hsl(0 0% 100% / 0.025));
}

/* Sliding indicator behind the active tab, shared by the tab bar and the
   sheet's Business/Account switch so both read as the same control. */
.tab-lozenge {
    background: linear-gradient(180deg, hsl(var(--primary) / 0.22), hsl(var(--primary) / 0.1));
    box-shadow:
        inset 0 1px 0 hsl(0 0% 100% / 0.35),
        0 2px 10px hsl(var(--primary) / 0.25);
}

/* On dark the white top highlight is what reads as a hard outline; keep it in
   line with .dark .liquid-glass rather than the light-mode value. */
.dark .tab-lozenge {
    box-shadow:
        inset 0 1px 0 hsl(0 0% 100% / 0.07),
        0 2px 10px hsl(var(--primary) / 0.16);
}

/* Applied one tick after mount, so the initial position lands without sliding
   in from the first tab on every page load. */
.tab-lozenge.is-ready {
    transition:
        transform 520ms cubic-bezier(0.34, 1.4, 0.64, 1),
        opacity 200ms ease;
}

/* Sheet pager height easing. Applied only once the swipe has settled, so the
   card holds its size under the finger and then resizes in one smooth move. */
.pager-height-anim {
    transition: height 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Indeterminate line shown while a tab navigation is in flight */
.nav-progress {
    overflow: hidden;
}

.nav-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.85), transparent);
    animation: nav-progress-sweep 900ms ease-in-out infinite;
}

@keyframes nav-progress-sweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tab-lozenge.is-ready,
    .pager-height-anim {
        transition: none;
    }

    .nav-progress::after {
        animation: none;
        background: hsl(var(--primary) / 0.5);
    }
}

/* Typography */
.font-display {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-weight: 800;
}

.font-body {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Color Classes */
.bg-background {
    background-color: hsl(var(--background));
}

.bg-foreground {
    background-color: hsl(var(--foreground));
}

.bg-card {
    background-color: hsl(var(--card));
}

.bg-primary {
    background-color: hsl(var(--primary));
}

.bg-secondary {
    background-color: hsl(var(--secondary));
}

.bg-muted {
    background-color: hsl(var(--muted));
}

.bg-accent {
    background-color: hsl(var(--accent));
}

.text-foreground {
    color: hsl(var(--foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.text-primary {
    color: hsl(var(--primary));
}

.text-primary-foreground {
    color: hsl(var(--primary-foreground));
}

.text-card-foreground {
    color: hsl(var(--card-foreground));
}

.border-border {
    border-color: hsl(var(--border));
}

.border-primary {
    border-color: hsl(var(--primary));
}

/* Post Card Styles */
.post-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    transition: all 0.2s ease;
}

.post-card:hover {
    border-color: hsl(var(--primary) / 0.3);
}

/* Avatar Styles */
.avatar {
    border-radius: 9999px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avatar-sm {
    width: 2rem;
    height: 2rem;
}

.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
}

.avatar-lg {
    width: 3rem;
    height: 3rem;
}

.avatar-xl {
    width: 4rem;
    height: 4rem;
}

/* Badge Styles */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: calc(var(--radius) - 2px);
    background-color: hsl(var(--primary) / 0.1);
    color: hsl(var(--primary));
}

.badge-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    outline: none;
}

.btn:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

.btn-primary {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover {
    background-color: hsl(var(--primary) / 0.9);
}

.btn-secondary {
    background-color: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.btn-secondary:hover {
    background-color: hsl(var(--secondary) / 0.8);
}

.btn-ghost {
    background-color: transparent;
    color: hsl(var(--foreground));
}

.btn-ghost:hover {
    background-color: hsl(var(--accent) / 0.1);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.btn-outline:hover {
    background-color: hsl(var(--accent) / 0.1);
}

/* Input Styles */
.input {
    display: flex;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: all 0.2s ease;
}

.input:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.input::placeholder {
    color: hsl(var(--muted-foreground));
}

/* Textarea Styles */
.textarea {
    display: flex;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--input));
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: all 0.2s ease;
    min-height: 80px;
    resize: vertical;
}

.textarea:focus {
    outline: none;
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.textarea::placeholder {
    color: hsl(var(--muted-foreground));
}

/* Sidebar Styles */
.sidebar {
    background-color: hsl(var(--sidebar-background));
    border-right: 1px solid hsl(var(--sidebar-border));
    color: hsl(var(--sidebar-foreground));
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    border-radius: var(--radius);
    transition: all 0.2s ease;
    cursor: pointer;
}

.sidebar-item:hover {
    background-color: hsl(var(--sidebar-accent));
}

.sidebar-item.active {
    background-color: hsl(var(--sidebar-primary) / 0.1);
    color: hsl(var(--sidebar-primary));
}

/* Scrollbar Styles */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--background));
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--muted));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground));
}

/* Animation Classes */
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out;
}

.animate-slide-up {
    animation: slide-up 0.6s ease-out;
}

.animate-slide-down {
    animation: slide-down 0.6s ease-out;
}

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

/* ── Scroll/Load Animation System ───────────────────────────────────────── */

/* Transition for all animated elements (does NOT hide them) */
[data-anim] {
    transition: opacity var(--anim-duration) var(--ease),
                transform var(--anim-duration) var(--ease);
}

/*
 * Landing page only — CSS hides elements before JS loads (no Livewire = safe).
 * All other pages: JS sets inline opacity/transform, so morph-stripping
 * just makes elements visible again (correct default).
 */
[data-page="landing"] [data-anim] {
    opacity: 0;
    transform: translateY(30px);
}
[data-page="landing"] [data-anim].from-left  { transform: translateX(-40px); }
[data-page="landing"] [data-anim].from-right { transform: translateX(40px);  }
[data-page="landing"] [data-anim].from-down  { transform: translateY(-20px); }

/* Revealed state (used on landing page via class toggle) */
[data-anim].is-visible {
    opacity: 1;
    transform: none;
}

/* Float cards: once revealed, apply the looping float animation */
[data-anim="hero-float-card"].is-visible {
    animation: float 6s ease-in-out infinite;
}

/* Reduced motion — instantly show everything, no transitions */
@media (prefers-reduced-motion: reduce) {
    [data-anim] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Responsive Utilities */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* Loading Spinner */
.spinner {
    border: 2px solid hsl(var(--muted));
    border-top-color: hsl(var(--primary));
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Hover Effects */
.hover-lift {
    transition: transform 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-scale {
    transition: transform 0.2s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* Button Scale Hover Effect (CSS fallback) */
.btn-scale-hover {
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-scale-hover:hover {
    transform: scale(1.02);
}

/* Sticky Sidebar */
.sidebar-sticky {
    position: sticky;
    top: 6rem; /* 96px = top-24 in Tailwind */
}

/* Initial state for animated elements */
[data-anim] {
    /* Elements will be animated by GSAP, but provide fallback */
}

/* Fallback animations if GSAP fails to load */
.animate-fallback [data-anim] {
    animation: fade-in 0.6s ease-out forwards;
}

.animate-fallback [data-anim="hero-tag"] {
    animation: slide-down 0.5s ease-out forwards;
}

.animate-fallback [data-anim="hero-headline"] {
    animation: slide-up 0.7s ease-out 0.1s forwards;
    opacity: 0;
}

.animate-fallback [data-anim="hero-headline-2"] {
    animation: slide-up 0.6s ease-out 0.25s forwards;
    opacity: 0;
}

/* Truncate Text */
.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Scrollable rows that shouldn't show a scrollbar (mobile section nav) */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hero floating showcase cards */
.hero-float-card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.hero-float-card:hover {
    border-color: hsl(var(--primary) / 0.3);
    box-shadow: var(--shadow-glow);
}

/* Landing page pill style */
.landing-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 9999px;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground) / 0.8);
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.landing-pill:hover {
    border-color: hsl(var(--primary) / 0.4);
    color: hsl(var(--foreground));
}

/* Marquee animation for audience pills */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.animate-marquee {
    animation: marquee 30s linear infinite;
    width: max-content;
}

.animate-marquee:hover {
    animation-play-state: paused;
}

/* Fade In Up Animation for Cards */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0;
}


/* ══════════════════════════════════════════════════════════════
   Booking modal (livewire/public/book-service)
   Accent follows the business theme via --profile-primary,
   falling back to the app primary when no profile theme is set.
   ══════════════════════════════════════════════════════════════ */
:root {
    --bk-accent: var(--profile-primary, hsl(var(--primary)));
    --bk-accent-rgb: var(--profile-primary-rgb, 59, 130, 246);
    --bk-accent-dark: var(--profile-primary-dark, hsl(var(--primary)));
}

.bk-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bk-accent);
}

.bk-label span {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    opacity: 0.5;
}

/* Inner panel — one step lighter than the modal surface */
.bk-well {
    border-radius: 1rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--secondary));
}

.bk-focus:focus-visible {
    outline: 2px solid var(--bk-accent);
    outline-offset: 2px;
}

/* ── Calendar cells ── */
.bk-day {
    position: relative;
    display: flex;
    aspect-ratio: 1 / 1;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.bk-day--open {
    background-color: rgba(var(--bk-accent-rgb), 0.1);
}

.bk-day--open:hover {
    background-color: rgba(var(--bk-accent-rgb), 0.22);
}

.bk-day--today {
    box-shadow: inset 0 0 0 1px var(--bk-accent);
    font-weight: 700;
}

.bk-day--muted {
    color: hsl(var(--muted-foreground) / 0.35);
    cursor: not-allowed;
}

.bk-day[aria-pressed='true'] {
    background: linear-gradient(135deg, var(--bk-accent), var(--bk-accent-dark));
    color: #fff;
    box-shadow: 0 2px 10px rgba(var(--bk-accent-rgb), 0.45);
}

/* ── Time slots ── */
.bk-slot {
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    padding: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.bk-slot:hover {
    border-color: rgba(var(--bk-accent-rgb), 0.5);
    background-color: rgba(var(--bk-accent-rgb), 0.1);
}

.bk-slot[aria-pressed='true'] {
    border-color: transparent;
    background: linear-gradient(135deg, var(--bk-accent), var(--bk-accent-dark));
    color: #fff;
    box-shadow: 0 2px 10px rgba(var(--bk-accent-rgb), 0.35);
}

/* ── Primary action ── */
.bk-cta {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 1rem;
    padding: 0.875rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--bk-accent), var(--bk-accent-dark));
    box-shadow: 0 4px 20px rgba(var(--bk-accent-rgb), 0.35);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.bk-cta:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.bk-cta:disabled {
    opacity: 0.6;
    transform: none;
}

/* ── Neutral empty state (not a warning) ── */
.bk-empty {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    border-radius: 1rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--secondary));
    padding: 1rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* ── Accent surfaces ── */
.bk-accent-tile {
    background-color: rgba(var(--bk-accent-rgb), 0.14);
    color: var(--bk-accent);
}

.bk-accent-bar {
    background: linear-gradient(90deg, var(--bk-accent), var(--bk-accent-dark));
}

.bk-accent-text {
    color: var(--bk-accent);
}

/* Sits on .input / .textarea and lifts them onto the modal's surface.
   Declared after those rules so it wins the unlayered cascade. */
.bk-field {
    border-radius: 0.75rem;
    border-color: hsl(var(--border));
    background-color: hsl(var(--secondary));
    padding: 0.625rem 1rem;
}

textarea.bk-field {
    min-height: 4.5rem;
    resize: none;
}

.bk-field:focus {
    outline: none;
    border-color: var(--bk-accent);
    box-shadow: 0 0 0 2px rgba(var(--bk-accent-rgb), 0.25);
}

/* Spinner variants — declared after .spinner so they win the cascade */
.bk-spinner {
    border-top-color: var(--bk-accent);
}

.bk-spinner-light {
    width: 16px;
    height: 16px;
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

@keyframes bk-pop {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.bk-pop {
    animation: bk-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ══════════════════════════════════════════════════════════════
   Schedule page (livewire/dashboard/manage-business-hours)
   Tames the native time/date controls so they read as part of
   the design system instead of browser chrome.
   ══════════════════════════════════════════════════════════════ */

.sch-row {
    transition: background-color 0.2s ease;
}

.sch-row:hover {
    background-color: hsl(var(--secondary) / 0.4);
}

/* Segmented pill holding a from/to pair of native time inputs */
.sch-times {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border-radius: 0.75rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
    padding: 0.375rem 0.75rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sch-times:focus-within {
    border-color: hsl(var(--ring));
    box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.sch-times-sm {
    padding: 0.25rem 0.625rem;
    background-color: hsl(var(--secondary) / 0.6);
}

.sch-time {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    width: auto;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--foreground));
    cursor: text;
}

.sch-times-sm .sch-time {
    font-size: 0.8125rem;
    font-weight: 500;
}

.sch-time:focus {
    outline: none;
}

.sch-time::-webkit-calendar-picker-indicator,
.sch-time::-webkit-inner-spin-button,
.sch-time::-webkit-clear-button {
    display: none;
    -webkit-appearance: none;
}

.sch-time::-webkit-datetime-edit,
.sch-time::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
}

.sch-time::-webkit-datetime-edit-ampm-field {
    color: hsl(var(--muted-foreground));
}

/* Date field — the whole box opens the native calendar */
.sch-date {
    position: relative;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.sch-date::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

.sch-date::-webkit-datetime-edit {
    color: hsl(var(--muted-foreground));
}

.sch-date:focus::-webkit-datetime-edit,
.sch-date:in-range::-webkit-datetime-edit {
    color: hsl(var(--foreground));
}

/* Week strip in the summary card */
.sch-pip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.sch-pip-on {
    background-color: hsl(var(--primary) / 0.12);
    border-color: hsl(var(--primary) / 0.3);
    color: hsl(var(--primary));
}

.sch-pip-off {
    background-color: hsl(var(--secondary));
    color: hsl(var(--muted-foreground));
}