/**
 * Mobile Book Button - Custom CSS (Treatment Pages & Home Page)
 *
 * Styles for mobile-only sticky "Book Treatment" button displayed on:
 * - Treatment pages (single, archive, taxonomy)
 * - Home page (front page and blog home)
 * Matches the eRide theme's mobile filter toggle button design.
 * Includes teal background bar and responsive button styling.
 *
 * Add this code via WordPress Code Snippets plugin as a CSS snippet,
 * or it will be automatically loaded via treatment-mobile-book-button.php
 *
 * @package eRide
 * @version 1.2.0 - Treatment pages & home page only (previously 1.1.0 - site-wide)
 * @compatibility Mobile only (max-width: 1023px)
 */

/* ===== MOBILE BOOK BUTTON - HIDDEN BY DEFAULT ===== */

.treatment-mobile-book-bar {
    display: none; /* Hidden by default on desktop */
}

/* ===== MOBILE-ONLY STICKY BAR (max-width: 1023px) ===== */

@media (max-width: 1023px) {
    /* Sticky bar container with glassmorphism effect */
    .treatment-mobile-book-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999; /* Below loading overlays (9999) but above content */
        width: 100%;

        /* Glassmorphism effect */
        background: rgba(100, 197, 178, 0.25); /* Semi-transparent teal */
        backdrop-filter: blur(12px) saturate(180%);
        -webkit-backdrop-filter: blur(12px) saturate(180%);

        /* Subtle border for depth */
        border-top: 1px solid rgba(255, 255, 255, 0.2);

        justify-content: center;
        padding: 22px 0;

        /* Softer shadow for glass effect */
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.1),
                    0 -2px 8px rgba(0, 0, 0, 0.05);
    }

    /* Book button styling - matches eRide theme buttons */
    .treatment-mobile-book-bar .latepoint-book-button,
    .treatment-mobile-book-bar .timely-booking-trigger {
        background-color: var(--wp--preset--color--primary, #64c5b2);
        color: white;
        border: none;
        border-radius: 50px;
        padding: 12px 24px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-block;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .treatment-mobile-book-bar .latepoint-book-button:hover,
    .treatment-mobile-book-bar .timely-booking-trigger:hover {
        background-color: var(--wp--preset--color--secondary, #52a892);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .treatment-mobile-book-bar .latepoint-book-button:active,
    .treatment-mobile-book-bar .timely-booking-trigger:active {
        transform: translateY(0);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }
}

    /* Add padding to bottom of body to prevent content being hidden behind button */
    /* Only applied on treatment pages and home page where button is displayed */
    body.single-treatment,
    body.post-type-archive-treatment,
    body.tax-treatment_category,
    body.tax-treatment_tag,
    body.home,
    body.page.page-template-default {
        padding-bottom: 80px;
    }
}

/* ===== ACCESSIBILITY & POLISH ===== */

/* Focus state for keyboard navigation */
@media (max-width: 1023px) {
    .treatment-mobile-book-bar .latepoint-book-button:focus,
    .treatment-mobile-book-bar a[class*="latepoint"]:focus {
        outline: 2px solid var(--wp--preset--color--primary) !important;
        outline-offset: 2px !important;
    }

    /* Focus visible for better accessibility */
    .treatment-mobile-book-bar .latepoint-book-button:focus-visible,
    .treatment-mobile-book-bar a[class*="latepoint"]:focus-visible {
        outline: 3px solid var(--wp--preset--color--primary) !important;
        outline-offset: 3px !important;
    }
}

/* ===== ANIMATION & TRANSITIONS ===== */

/* Smooth slide-up animation on page load */
@media (max-width: 1023px) {
    @keyframes slideUpFadeIn {
        from {
            opacity: 0;
            transform: translateY(100%);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .treatment-mobile-book-bar {
        animation: slideUpFadeIn 0.4s ease-out;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .treatment-mobile-book-bar {
        animation: none !important;
    }

    .treatment-mobile-book-bar .latepoint-book-button,
    .treatment-mobile-book-bar a[class*="latepoint"] {
        transition: none !important;
    }

    .treatment-mobile-book-bar .latepoint-book-button:hover,
    .treatment-mobile-book-bar .latepoint-book-button:active,
    .treatment-mobile-book-bar a[class*="latepoint"]:hover,
    .treatment-mobile-book-bar a[class*="latepoint"]:active {
        transform: none !important;
    }
}

/* ===== SMALL MOBILE ADJUSTMENTS (max-width: 480px) ===== */

@media (max-width: 480px) {
    /* Slightly smaller padding on very small screens */
    .treatment-mobile-book-bar {
        padding: 18px 0;
    }

    /* Adjust button font size for tiny screens if needed */
    .treatment-mobile-book-bar .latepoint-book-button,
    .treatment-mobile-book-bar a[class*="latepoint"] {
        font-size: clamp(13px, 3vw, 14px) !important;
        padding: 9px 16px !important;
    }
}

/* ===== ADMIN BAR COMPENSATION ===== */

/* Adjust for WordPress admin bar on mobile (if logged in) */
@media (max-width: 1023px) {
    body.admin-bar.single-treatment,
    body.admin-bar.post-type-archive-treatment,
    body.admin-bar.tax-treatment_category,
    body.admin-bar.tax-treatment_tag,
    body.admin-bar.home,
    body.admin-bar.page.page-template-default {
        padding-bottom: 80px; /* Same as non-admin-bar - no adjustment needed for fixed bottom positioning */
    }
}