/* My Khanh Milk Tea - Brand Colors */
:root {
    /* Colors - use dynamic profile if available, fallback to defaults */
    --mk-primary: var(--color-primary, #8B4513);
    --mk-primary-light: var(--color-primary-light, #D2691E);
    --mk-secondary: var(--color-secondary, #FFF8DC);
    --mk-accent: var(--color-accent, #FF6B35);
    --mk-success: var(--color-success, #28A745);
    --mk-warning: var(--color-warning, #FFC107);
    --mk-error: var(--color-error, #DC3545);
    --mk-text: var(--color-text, #333333);
    --mk-text-muted: var(--color-text-muted, #666666);
    --mk-background: var(--color-background, #FFFAF5);
    --mk-card-bg: var(--color-card-background, #FFFFFF);
    --mk-border: var(--color-border, #E0D5C8);

    /* Type Scale (spec Section 6.2) */
    --font-size-h1: 2rem;        /* 32px */
    --font-size-h2: 1.5rem;      /* 24px */
    --font-size-h3: 1.25rem;     /* 20px */
    --font-size-h4: 1.125rem;    /* 18px */
    --font-size-body: 1rem;      /* 16px */
    --font-size-small: 0.875rem; /* 14px */
    --font-size-caption: 0.75rem;/* 12px */

    /* Spacing Scale (spec Section 6.4) */
    --spacing-xs: 0.25rem;  /* 4px */
    --spacing-sm: 0.5rem;   /* 8px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-xxl: 3rem;    /* 48px */
}

/* Base Styles */
html {
    font-size: 16px;
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: var(--font-size-body);
    line-height: 1.5;
    background-color: var(--mk-background);
    color: var(--mk-text);
    margin-bottom: 0;
    padding-top: 52px; /* Compensate for fixed header only on mobile */
}

/* Desktop: Add padding for header + nav */
@media (min-width: 992px) {
    body {
        padding-top: 92px; /* header (52px) + nav (40px) */
    }
}

/* Type Scale (spec Section 6.2) */
h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.2;
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.3;
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: 1.4;
}

h4 {
    font-size: var(--font-size-h4);
    font-weight: 600;
    line-height: 1.4;
}

h5 {
    font-size: var(--font-size-body);
    font-weight: 600;
    line-height: 1.5;
}

h6 {
    font-size: var(--font-size-small);
    font-weight: 600;
    line-height: 1.5;
}

small, .small {
    font-size: var(--font-size-small);
}

.caption {
    font-size: var(--font-size-caption);
}

/* Container max-width (spec Section 6.4) */
.container {
    max-width: 1200px;
}

/* Override Bootstrap Primary Color */
.bg-primary {
    background-color: var(--mk-primary) !important;
}

.btn-primary {
    background-color: var(--mk-primary);
    border-color: var(--mk-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--mk-primary-light);
    border-color: var(--mk-primary-light);
}

.btn-accent {
    background-color: var(--mk-accent);
    border-color: var(--mk-accent);
    color: white;
}

.btn-accent:hover {
    background-color: #e55a2b;
    border-color: #e55a2b;
    color: white;
}

.text-primary {
    color: var(--mk-primary) !important;
}

.text-accent {
    color: var(--mk-accent) !important;
}

/* Override Bootstrap text colors for better visibility on bright backgrounds */
.text-info {
    color: #0a7c8c !important; /* Darker cyan - more readable */
}

.text-warning {
    color: #b38600 !important; /* Darker gold - more readable */
}

.text-muted {
    color: #8a939c !important; /* Brighter gray - more readable on dark backgrounds */
}

/* Focus States */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--mk-primary-light);
}

/* Card Styles */
.card {
    border: 1px solid var(--mk-border);
    border-radius: 12px;
}

/* Equal height cards in grid - columns need d-flex class */
[class*="col-"].d-flex {
    align-items: stretch;
}

[class*="col-"].d-flex > a {
    display: flex;
    flex: 1 1 auto;
}

[class*="col-"].d-flex > a > .card {
    flex: 1 1 auto;
    width: 100%;
}

.card.h-100 {
    display: flex;
    flex-direction: column;
}

.card.h-100 .card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Admin action cards - center content and prevent badge from stretching */
.card.action-card .card-body {
    align-items: center;
}

.card.h-100 .card-body .card-text {
    flex: 1 1 auto;
}

.card-img-top {
    border-radius: 12px 12px 0 0;
    object-fit: cover;
    height: 200px;
}

/* Product Card */
.product-card {
    cursor: pointer;
}

.product-card .card-title {
    color: var(--mk-text);
    font-weight: 600;
}

.product-card .price {
    color: var(--mk-accent);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Hero Section */
.hero-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo-container svg {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
}

.hero-logo-container svg path {
    fill: white; /* Change logo color to white for visibility on dark gradient */
}

@media (max-width: 768px) {
    .hero-logo-container svg {
        max-width: 200px;
    }
}

.hero-section {
    background: linear-gradient(135deg, var(--mk-primary) 0%, var(--mk-primary-light) 100%);
    color: white;
    padding: 4rem 0;
    margin-bottom: 2rem;
}

.hero-section h1 {
    font-weight: 700;
}

.hero-cta-btn {
    background-color: var(--mk-primary);
    color: white;
    border: 2px solid white;
}

.hero-cta-btn:hover,
.hero-cta-btn:focus {
    background-color: white;
    color: var(--mk-primary);
    border-color: white;
}

/* Category Card */
.category-card {
    background: var(--mk-card-bg);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all 0.2s ease;
    text-decoration: none;
    color: var(--mk-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    min-height: 120px;
}

.category-card:hover {
    background: var(--mk-secondary);
    color: var(--mk-primary);
    transform: translateY(-2px);
}

.category-card i {
    font-size: 2.5rem;
    color: var(--mk-primary);
}

.category-card span {
    line-height: 1.3;
}

/* Navbar */
.navbar-brand {
    font-size: 1.4rem;
}

.nav-link {
    font-weight: 500;
}

/* Navbar dark - brighter text for better visibility */
.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.navbar-dark .nav-link:hover,
.navbar-dark .nav-link:focus {
    color: #fff !important;
}

.navbar-dark .navbar-brand {
    color: #fff !important;
}

.navbar-dark .navbar-toggler-icon {
    opacity: 1;
}

/* Footer */
footer {
    margin-top: auto;
}

footer h5,
footer h6 {
    color: var(--mk-secondary);
}

/* Badges */
.badge-custom {
    background-color: var(--mk-accent);
    color: white;
}

/* Forms */
.form-control:focus {
    border-color: var(--mk-primary);
}

/* Price Display */
.price-display {
    color: var(--mk-accent);
    font-weight: 700;
}

.price-original {
    text-decoration: line-through;
    color: var(--mk-text-muted);
    font-size: 0.9rem;
}

/* Loading Spinner */
.spinner-milk-tea {
    color: var(--mk-primary);
}

/* Toast Notifications */
.toast-success {
    background-color: var(--mk-success);
}

.toast-error {
    background-color: var(--mk-error);
}

/* Customization Options */
.customization-btn {
    border: 2px solid var(--mk-border);
    background: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.customization-btn:hover {
    border-color: var(--mk-primary);
}

.customization-btn.active {
    background: var(--mk-primary);
    border-color: var(--mk-primary);
    color: white;
}

/* Responsive Utilities */
@media (max-width: 767px) {
    .hero-section {
        padding: var(--spacing-xl) 0;
    }

    .hero-section h1 {
        font-size: var(--font-size-h2);
    }

    .container {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

/* Animations (spec Section 9.2) */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

/* Button Hover Scale - 1.02, 150ms, ease-out */
.btn {
    transition: transform 0.15s ease-out, background-color 0.15s ease-out, border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

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

.btn:active:not(:disabled) {
    transform: scale(0.98);
}

/* Cart Pulse Animation - 400ms, ease-in-out */
@keyframes cartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.cart-pulse {
    animation: cartPulse 0.4s ease-in-out;
}

/* Toast Slide In - 300ms from right, ease-out */
@keyframes toastSlideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toastSlideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast.showing {
    animation: toastSlideIn 0.3s ease-out forwards;
}

.toast.hiding {
    animation: toastSlideOut 0.2s ease-in forwards;
}

/* Card Hover - lift with shadow, 200ms */
.card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.card.product-card:hover,
.card.category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15);
}

/* =====================
   Skeleton Loading
   ===================== */

/* Shimmer animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--mk-border) 25%,
        #f0ebe5 50%,
        var(--mk-border) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: 4px;
}

.skeleton-card {
    border: 1px solid var(--mk-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mk-card-bg);
}

.skeleton-img {
    height: 200px;
    border-radius: 12px 12px 0 0;
}

.skeleton-title {
    height: 1.25rem;
    width: 70%;
    margin-bottom: 0.5rem;
}

.skeleton-text {
    height: 0.875rem;
    width: 100%;
    margin-bottom: 0.25rem;
}

.skeleton-text-short {
    height: 0.875rem;
    width: 60%;
}

.skeleton-price {
    height: 1.1rem;
    width: 40%;
}

.skeleton-btn {
    height: 32px;
    width: 32px;
    border-radius: 4px;
}

/* Category skeleton */
.skeleton-category {
    border-radius: 12px;
    padding: 1.5rem;
    background: var(--mk-card-bg);
    border: 1px solid var(--mk-border);
}

.skeleton-icon {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    margin: 0 auto 0.5rem;
}

.skeleton-category-text {
    height: 1rem;
    width: 60%;
    margin: 0 auto;
}

/* Hide skeleton when content loaded */
.skeleton-container.loaded {
    display: none !important;
}

.content-container {
    display: none !important;
}

.content-container.loaded {
    display: flex !important;
    flex-wrap: wrap;
}

/* For section elements with content-container */
section.content-container.loaded {
    display: block !important;
}

/* =====================
   Page Transitions
   ===================== */

/* Page fade-in animation - 200ms, ease-out (spec Section 9.2) */
@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-content {
    animation: pageEnter 0.2s ease-out forwards;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .page-content {
        animation: none;
    }

    .skeleton {
        animation: none;
    }

    .btn:hover:not(:disabled) {
        transform: none;
    }

    .card.product-card:hover,
    .card.category-card:hover {
        transform: none;
    }
}

/* =====================
   Tabbable Navigation
   - Mobile: Fixed at bottom
   - Desktop: Fixed at top below header
   ===================== */

.tabbable-nav {
    display: flex;
    position: fixed;
    justify-content: space-around;
    align-items: center;
    z-index: 1030;
    transition: top 0.3s ease-in-out;
}

.tabbable-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: var(--font-size-caption);
    padding: var(--spacing-xs) var(--spacing-sm);
    min-width: 80px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.tabbable-nav-item i {
    font-size: 1.25rem;
    margin-bottom: 2px;
}

.tabbable-nav-item .nav-label {
    font-weight: 500;
}

/* Mobile: Bottom navigation */
@media (max-width: 991.98px) {
    .tabbable-nav {
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--mk-primary); /* Same as header */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    .tabbable-nav-item {
        color: rgba(255, 255, 255, 0.7);
    }

    .tabbable-nav-item:hover,
    .tabbable-nav-item:focus {
        color: white;
    }

    .tabbable-nav-item.active {
        color: white;
    }

    /* Add margin to footer to prevent content being hidden behind bottom nav */
    footer {
        margin-bottom: 60px; /* Height of bottom nav */
    }
}

/* Desktop: Top navigation below header */
@media (min-width: 992px) {
    .tabbable-nav {
        top: 52px; /* Below header */
        left: 0;
        right: 0;
        height: 40px;
        background-color: var(--mk-primary); /* Same as header */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        justify-content: center;
        gap: 0;
    }

    .tabbable-nav-item {
        flex-direction: row;
        color: rgba(255, 255, 255, 0.85);
        padding: 0.5rem 1.5rem;
        min-width: auto;
        border-bottom: 2px solid transparent;
    }

    .tabbable-nav-item i {
        font-size: 1rem;
        margin-bottom: 0;
        margin-right: 0.5rem;
    }

    .tabbable-nav-item:hover,
    .tabbable-nav-item:focus {
        color: white;
    }

    .tabbable-nav-item.active {
        color: white;
        border-bottom-color: white;
    }

    /* When header is hidden, nav moves to top */
    body.header-is-hidden .tabbable-nav {
        top: 0;
    }
}

/* =====================
   Skip to Content (Accessibility)
   ===================== */

.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--mk-primary);
    color: #fff;
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    color: #fff;
    outline: 2px solid var(--mk-accent);
    outline-offset: 2px;
}

/* =====================
   Touch Target Enforcement (44x44px minimum)
   ===================== */

/* Buttons - ensure minimum touch target and vertical centering */
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-sm {
    min-height: 44px;
    min-width: 44px;
    padding: 0.5rem 0.75rem;
}

.btn-lg {
    min-height: 48px;
}

/* Navigation links */
.navbar .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

/* Form controls */
.form-control,
.form-select {
    min-height: 44px;
}

/* Checkboxes and radios - use larger click area */
.form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.form-check-input {
    width: 20px;
    height: 20px;
    margin-top: 0;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.form-check-label {
    margin-bottom: 0;
}

/* Dropdown items */
.dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

/* Customization buttons (ice level, toppings) */
.customization-btn {
    min-height: 44px;
    min-width: 44px;
}

/* Quantity controls */
.quantity-btn,
input[type="number"].quantity-input {
    min-height: 44px;
    min-width: 44px;
}

/* Icon-only buttons */
.btn-icon {
    min-height: 44px;
    min-width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Bottom nav items already have sufficient touch area */

/* Product card add button */
.product-card .btn-sm {
    min-height: 44px;
    min-width: 44px;
}

/* Close buttons */
.btn-close {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem;
}

/* Alert close button vertical centering */
.alert-dismissible .btn-close {
    top: 50%;
    transform: translateY(-50%);
}

/* ========================================
   Floating Cart Button (Primary Action)
   ======================================== */

.floating-cart-btn {
    position: fixed;
    bottom: 30px; /* Below contact buttons */
    right: 16px;
    width: 56px;
    height: 56px;
    background-color: var(--mk-accent);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1050;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
}

.floating-cart-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    color: white;
}

/* Fly-to-cart animation */
.fly-to-cart {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.6s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .fly-to-cart {
        transition: none;
        display: none;
    }
}

.floating-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
    background-color: var(--mk-error);
    color: white;
    border-radius: 10px;
}

/* Mobile: Adjust floating cart position above bottom nav */
@media (max-width: 991.98px) {
    .floating-cart-btn {
        bottom: 80px; /* Above bottom nav (60px) + spacing */
    }
}

/* ========================================
   Floating Contact Buttons (Secondary)
   ======================================== */
.floating-contact {
    position: fixed;
    bottom: 150px; /* Above cart button on mobile */
    right: 16px;
    z-index: 1040;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none; /* Container doesn't block clicks when collapsed */
}

.floating-contact.open {
    pointer-events: auto; /* Allow clicks when menu is open */
}

@media (min-width: 992px) {
    .floating-contact {
        bottom: 100px; /* Above cart button on desktop */
        right: 40px; /* More offset on desktop */
    }

    .floating-cart-btn {
        right: 40px; /* More offset on desktop */
    }
}

/* When cart is hidden (cart/checkout pages), move contact down */
.floating-contact.cart-hidden {
    bottom: 80px; /* Same as cart position on mobile */
}

@media (min-width: 992px) {
    .floating-contact.cart-hidden {
        bottom: 30px; /* Same as cart position on desktop */
    }
}

/* Toggle button */
.floating-contact-toggle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--color-primary, #8B4513);
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    pointer-events: auto; /* Always clickable */
    flex-shrink: 0; /* Prevent button from shrinking */
}

.floating-contact-toggle:hover {
    transform: scale(1.1);
    background: var(--color-primary-light, #A0522D);
}

.floating-contact-toggle .toggle-icon,
.floating-contact-toggle .close-icon {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.floating-contact-toggle .close-icon {
    opacity: 0;
    transform: rotate(-90deg);
}

.floating-contact.open .floating-contact-toggle .toggle-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.floating-contact.open .floating-contact-toggle .close-icon {
    opacity: 1;
    transform: rotate(0);
}

/* Menu container */
.floating-contact-menu {
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    pointer-events: none; /* Prevent clicks when hidden */
}

.floating-contact.open .floating-contact-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* Allow clicks when visible */
}

/* Contact items */
.floating-contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 28px;
    text-decoration: none;
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.floating-contact-item:hover {
    transform: translateX(-5px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    color: white;
}

.floating-contact-item i {
    font-size: 1.25rem;
}

/* Phone button */
.floating-contact-phone {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

/* Zalo button */
.floating-contact-zalo {
    background: linear-gradient(135deg, #0068ff 0%, #00a1ff 100%);
}

.floating-contact-zalo .zalo-icon {
    font-weight: 700;
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Facebook/Messenger button */
.floating-contact-facebook {
    background: linear-gradient(135deg, #0084ff 0%, #00c6ff 100%);
}

/* Labels - hide on mobile, show on desktop */
.floating-contact-label {
    display: none;
}

@media (min-width: 768px) {
    .floating-contact-label {
        display: inline;
    }

    .floating-contact-item {
        padding: 12px 20px;
    }
}

/* Animation delays for staggered appearance */
.floating-contact-menu .floating-contact-item:nth-child(1) {
    transition-delay: 0s;
}

.floating-contact-menu .floating-contact-item:nth-child(2) {
    transition-delay: 0.05s;
}

.floating-contact-menu .floating-contact-item:nth-child(3) {
    transition-delay: 0.1s;
}

.floating-contact.open .floating-contact-menu .floating-contact-item:nth-child(1) {
    transition-delay: 0.1s;
}

.floating-contact.open .floating-contact-menu .floating-contact-item:nth-child(2) {
    transition-delay: 0.05s;
}

.floating-contact.open .floating-contact-menu .floating-contact-item:nth-child(3) {
    transition-delay: 0s;
}

/* ========================================
   Sticky Controls (Menu, Order Lookup, etc.)
   ======================================== */

/* Menu page sticky filter */
.menu-sticky-controls {
    position: sticky;
    top: 52px; /* Below header only (mobile: nav at bottom) */
    z-index: 1020;
    background: var(--mk-background);
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
}

/* Product Detail - Sticky Breadcrumb */
.product-breadcrumb-sticky {
    position: sticky;
    top: 52px; /* Below header only (mobile: nav at bottom) */
    z-index: 1020;
    background: var(--mk-background);
    padding: var(--spacing-sm) 0;
    margin: calc(-1 * var(--spacing-lg)) calc(-0.75rem) var(--spacing-md); /* Offset container padding */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    border-bottom: 1px solid var(--mk-border);
}

/* Menu Search & Filter - Responsive Layout */
/* Mobile: Full width for search, filter and clear button share line */
.menu-search-input {
    width: 100% !important;
    min-width: 0 !important;
}

.menu-filter-select {
    min-width: 0 !important;
}

.menu-clear-btn {
    width: auto !important;
    flex-shrink: 0;
}

/* Mobile: Keep clear button on same line as filter */
@media (max-width: 767px) {
    .menu-search-input {
        width: 100% !important;
    }
    
    .menu-filter-select {
        width: auto !important;
        flex: 1 1 auto;
        min-width: 120px;
    }
    
    .menu-clear-btn {
        width: auto !important;
        min-width: 44px;
        flex-shrink: 0;
    }
}

/* Desktop: Equal width for search and filter */
@media (min-width: 768px) {
    .menu-search-input {
        width: auto !important;
        min-width: 150px !important;
        flex: 1 1 0;
        max-width: none;
    }

    .menu-filter-select {
        width: auto !important;
        min-width: 120px !important;
        flex: 1 1 0;
    }

    .menu-clear-btn {
        width: auto !important;
        flex-shrink: 0;
    }
}

/* Order lookup sticky controls */
.order-lookup-sticky-controls {
    position: sticky;
    top: 52px; /* Below header only (mobile: nav at bottom) */
    z-index: 1020;
    background: var(--mk-background);
    padding-top: var(--spacing-sm);
    margin-left: calc(-1 * var(--spacing-md));
    margin-right: calc(-1 * var(--spacing-md));
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* Sticky back/continue buttons for Cart, Checkout, Order Detail */
.sticky-back-action {
    position: sticky;
    top: 52px; /* Below header only (mobile: nav at bottom) */
    z-index: 1020;
    background: var(--mk-background);
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
}

/* Cart Order Summary Sticky */
.cart-order-summary-sticky {
    position: sticky;
    top: 120px; /* Below header + sticky-back-action on mobile */
    z-index: 1010;
    transition: top 0.3s ease-in-out;
}

@media (min-width: 992px) {
    .cart-order-summary-sticky {
        top: 160px; /* Below header (52px) + nav (40px) + sticky-back-action (~68px) on desktop */
    }
}

/* When header is hidden, adjust cart order summary position */
body.header-is-hidden .cart-order-summary-sticky {
    top: 68px; /* Only sticky-back-action on mobile */
}

@media (min-width: 992px) {
    body.header-is-hidden .cart-order-summary-sticky {
        top: 108px; /* nav (40px) + sticky-back-action (~68px) on desktop */
    }
}

/* Checkout Order Summary Sticky */
.checkout-order-summary-sticky {
    position: sticky;
    top: 120px; /* Below header + sticky-back-action on mobile */
    z-index: 1010;
    transition: top 0.3s ease-in-out;
}

@media (min-width: 992px) {
    .checkout-order-summary-sticky {
        top: 160px; /* Below header (52px) + nav (40px) + sticky-back-action (~68px) on desktop */
    }
}

/* When header is hidden, adjust checkout order summary position */
body.header-is-hidden .checkout-order-summary-sticky {
    top: 68px; /* Only sticky-back-action on mobile */
}

@media (min-width: 992px) {
    body.header-is-hidden .checkout-order-summary-sticky {
        top: 108px; /* nav (40px) + sticky-back-action (~68px) on desktop */
    }
}

/* Desktop: sticky controls below header + nav */
@media (min-width: 992px) {
    .menu-sticky-controls,
    .order-lookup-sticky-controls,
    .sticky-back-action,
    .product-breadcrumb-sticky {
        top: 92px; /* header (52px) + nav (40px) */
    }
}

/* Sort button active state */
.sort-btn.active {
    background-color: var(--mk-primary);
    border-color: var(--mk-primary);
    color: white;
}

.sort-btn.active:hover {
    background-color: var(--mk-primary-light);
    border-color: var(--mk-primary-light);
}

/* ========================================
   Disabled Product Cards
   ======================================== */

.product-card-disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.product-card-disabled:hover {
    transform: none;
    box-shadow: none;
}

.product-card-disabled .card-img-top {
    filter: grayscale(30%);
}

/* ========================================
   Site Header (Scroll-Aware)
   ======================================== */

.site-header {
    background-color: var(--mk-primary);
    height: 52px;
}

.site-header a i {
    font-size: 1.25rem;
}

.scroll-aware-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    transition: transform 0.3s ease-in-out;
    will-change: transform;
}

/* Ensure no gap between header and nav */
.site-header .container {
    height: 100%;
}

.site-header .container > div {
    height: 100%;
}

.scroll-aware-header.header-hidden {
    transform: translateY(-100%);
}

/* Sticky controls use CSS variable for top position, adjusted by JS when header hides */
.menu-sticky-controls,
.order-lookup-sticky-controls,
.sticky-back-action,
.product-breadcrumb-sticky {
    transition: top 0.3s ease-in-out;
}

/* When header is hidden on mobile, sticky controls go to top */
body.header-is-hidden .menu-sticky-controls,
body.header-is-hidden .order-lookup-sticky-controls,
body.header-is-hidden .sticky-back-action,
body.header-is-hidden .product-breadcrumb-sticky {
    top: 0; /* No header on mobile (nav at bottom) */
}

/* When header is hidden on desktop, sticky controls below nav only */
@media (min-width: 992px) {
    body.header-is-hidden .menu-sticky-controls,
    body.header-is-hidden .order-lookup-sticky-controls,
    body.header-is-hidden .sticky-back-action,
    body.header-is-hidden .product-breadcrumb-sticky {
        top: 40px; /* Nav height only */
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .scroll-aware-header {
        transition: none;
    }

    .menu-sticky-controls,
    .order-lookup-sticky-controls,
    .sticky-back-action,
    .product-breadcrumb-sticky {
        transition: none;
    }
}