/* Gym & Pool Premium Style Sheets - Design System variables */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --surface: #f9f9fc;
    --surface-dim: #dadadc;
    --surface-bright: #f9f9fc;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f3f3f6;
    --surface-container: #eeeef0;
    --surface-container-high: #e8e8ea;
    --surface-container-highest: #e2e2e5;
    --on-surface: #1a1c1e;
    --on-surface-variant: #3e4850;
    --inverse-surface: #2f3133;
    --inverse-on-surface: #f0f0f3;
    --outline: #6e7881;
    --outline-variant: #bdc8d1;
    --surface-tint: #00658d;
    --primary: #00658d;
    --on-primary: #ffffff;
    --primary-container: #00aeef;
    --on-primary-container: #003e58;
    --inverse-primary: #82cfff;
    --secondary: #496800;
    --on-secondary: #ffffff;
    --secondary-container: #c2f366;
    --on-secondary-container: #4d6e00;
    --tertiary: #ba1c00;
    --on-tertiary: #ffffff;
    --tertiary-container: #ff7c62;
    --on-tertiary-container: #750e00;
    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;
    --on-error-container: #93000a;
    --primary-fixed: #c6e7ff;
    --primary-fixed-dim: #82cfff;
    --on-primary-fixed: #001e2d;
    --on-primary-fixed-variant: #004c6b;
    --secondary-fixed: #c2f366;
    --secondary-fixed-dim: #a6d64d;
    --on-secondary-fixed: #131f00;
    --on-secondary-fixed-variant: #364e00;
    --tertiary-fixed: #ffdad3;
    --tertiary-fixed-dim: #ffb4a5;
    --on-tertiary-fixed: #3f0400;
    --on-tertiary-fixed-variant: #8e1300;
    --background: #f9f9fc;
    --on-background: #1a1c1e;
}

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

/* Material Icons setting */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.fill-icon {
    font-variation-settings: 'FILL' 1 !important;
}

/* Glassmorphism card utilities */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Scroll behavior and spacing tweaks */
html {
    scroll-behavior: smooth;
}

/* Override viewport heights inside the admin dashboard heatmap preview iframe */
body.in-iframe .min-h-\[90vh\] {
    min-height: 800px !important;
    height: 800px !important;
}

/* Carousel navigation buttons and slides styling */
.carousel-nav-btn {
    display: none;
}
@media (min-width: 768px) {
    .carousel-nav-btn {
        display: flex;
    }
}
.carousel-nav-btn.inactive {
    display: none !important;
}

/* Slide item transitions */
.carousel-slide {
    transition: opacity 0.3s ease;
}