/**
 * Desktop Book Button - Animated Gradient Border
 *
 * @package eRide Theme
 * @version 2.1.0
 * @created 2026-01-01
 * @updated 2026-01-01
 *
 * Adds animated purple/teal flowing border to desktop "Book Treatment" button.
 * Uses CSS @property for true color interpolation - teal overtakes purple/white.
 * Icon added via PHP filter in custom-code-loader.php
 *
 * v2.1.0: @property color animation - teal overtakes purple and white
 *         - True gradient color interpolation via CSS @property
 *         - Flow animation + color takeover animation
 *         - Firefox fallback: static teal border (no animation)
 *         - Browser support: Chrome 85+, Safari 16.4+, Edge 85+
 * v2.0.0: Two-layer opacity architecture (replaced in v2.1.0)
 * v1.6.0: Fixed mini-cart icon unicode (\edce), stronger selectors for SVG hiding
 * v1.5.0: Add white to gradient from start for natural transition to final color
 * v1.4.0: Replace WooCommerce mini-cart icon with Flaticon shopping bag
 * v1.3.0: After 2 passes, gracefully transitions to white then #64C5B2
 * v1.2.0: Slower animation, 2 passes then settles to teal, icon inherits text color
 * v1.1.0: Pill shape (50px radius), proper case text, icon via HTML element
 * v1.0.0: Initial implementation
 *
 * Targets: .wp-block-button.latepoint-book-button in desktop header
 */

/* ============================================
   Color Variables (reuse from latepoint-service-highlight)
   ============================================ */

:root {
    --book-btn-purple: #8A2BE2;  /* BlueViolet */
    --book-btn-teal: #00ced1;    /* DarkTurquoise */
    --book-btn-final: #64C5B2;   /* Final settled color */
}

/* ============================================
   Desktop Book Button - Base Styles
   ============================================ */

.desktop-header .wp-block-button.latepoint-book-button {
    position: relative;
    overflow: visible;
    z-index: 1;
    border-radius: 50px;
}

/* White background with custom styling */
.desktop-header .wp-block-button.latepoint-book-button .wp-block-button__link {
    background: #ffffff !important;
    color: #1a1a1a !important;
    border: none !important;
    border-radius: 50px !important;
    /* padding: 10px 24px !important; */
    font-weight: 600;
    font-size: 14px;
    text-transform: none !important; /* Proper case, not uppercase */
    letter-spacing: normal !important;
    position: relative;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ============================================
   Calendar Icon Styling (HTML element injected via PHP)
   Icon inherits text color
   ============================================ */

.desktop-header .wp-block-button.latepoint-book-button .wp-block-button__link i.fi {
    font-size: 16px;
    color: inherit; /* Same color as text */
    line-height: 1;
}

/* ============================================
   Animated Gradient Border - @property Color Animation
   v2.1.0: Teal overtakes purple and white with true color interpolation

   Uses CSS @property for animatable gradient color stops.
   Firefox fallback: static teal border (no animation).

   Animation sequence:
   1. White → Teal → Purple flowing left-to-right
   2. Teal gradually expands, overtaking purple then white
   3. Settles on solid teal (#64C5B2)
   ============================================ */

/* ============================================
   @property Definitions - Animatable Color Stops
   Chrome 85+, Safari 16.4+, Edge 85+
   ============================================ */

@property --gradient-color-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: #8A2BE2;
}

@property --gradient-color-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ffffff;
}

@property --gradient-color-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: #00ced1;
}

@property --gradient-color-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: #8A2BE2;
}

@property --gradient-color-5 {
    syntax: '<color>';
    inherits: false;
    initial-value: #ffffff;
}

/* ============================================
   Animated Gradient Border (Modern Browsers)
   ============================================ */

.desktop-header .wp-block-button.latepoint-book-button::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50px;
    padding: 3px;

    /* Initialize animatable color properties */
    --gradient-color-1: #8A2BE2;  /* Purple */
    --gradient-color-2: #ffffff;  /* White */
    --gradient-color-3: #00ced1;  /* Teal */
    --gradient-color-4: #8A2BE2;  /* Purple */
    --gradient-color-5: #ffffff;  /* White */

    /* Gradient using animatable custom properties */
    background: linear-gradient(
        90deg,
        var(--gradient-color-1),
        var(--gradient-color-2),
        var(--gradient-color-3),
        var(--gradient-color-4),
        var(--gradient-color-5),
        var(--gradient-color-3)
    );
    background-size: 200% 100%;

    /* Mask to show only border */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;

    /* Flow + color transition to teal */
    animation:
        book-btn-flow 3s ease-in-out 2,
        book-btn-teal-takeover 6s ease-out forwards;

    z-index: -1;
    pointer-events: none;
}

/* ============================================
   Gradient Flow Animation (position)
   2 passes × 3s = 6s of flowing
   ============================================ */

@keyframes book-btn-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* ============================================
   Teal Takeover Animation (color interpolation)
   Teal gradually overtakes purple, then white
   ============================================ */

@keyframes book-btn-teal-takeover {
    0%, 50% {
        /* Original colors during flow phase */
        --gradient-color-1: #8A2BE2;
        --gradient-color-2: #ffffff;
        --gradient-color-3: #00ced1;
        --gradient-color-4: #8A2BE2;
        --gradient-color-5: #ffffff;
    }
    65% {
        /* Teal starts overtaking purple */
        --gradient-color-1: #00ced1;
        --gradient-color-2: #ffffff;
        --gradient-color-3: #64C5B2;
        --gradient-color-4: #00ced1;
        --gradient-color-5: #ffffff;
    }
    80% {
        /* Teal overtakes white */
        --gradient-color-1: #64C5B2;
        --gradient-color-2: #64C5B2;
        --gradient-color-3: #64C5B2;
        --gradient-color-4: #64C5B2;
        --gradient-color-5: #b8e6de;
    }
    100% {
        /* All teal - settled */
        --gradient-color-1: #64C5B2;
        --gradient-color-2: #64C5B2;
        --gradient-color-3: #64C5B2;
        --gradient-color-4: #64C5B2;
        --gradient-color-5: #64C5B2;
    }
}

/* ============================================
   Firefox Fallback - Static Teal Border
   Firefox doesn't support @property yet
   ============================================ */

@supports not (background: linear-gradient(in oklch, red, blue)) {
    .desktop-header .wp-block-button.latepoint-book-button::before {
        animation: none;
        background: #64C5B2;
        background-size: 100% 100%;
    }
}

/* ============================================
   Hover Enhancement
   ============================================ */

.desktop-header .wp-block-button.latepoint-book-button:hover .wp-block-button__link {
    background: #f8f8f8 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(100, 197, 178, 0.25);
}

.desktop-header .wp-block-button.latepoint-book-button:hover::before {
    box-shadow: 0 0 20px rgba(100, 197, 178, 0.35);
    animation-play-state: paused;
}

/* ============================================
   Focus State for Accessibility
   ============================================ */

.desktop-header .wp-block-button.latepoint-book-button .wp-block-button__link:focus,
.desktop-header .wp-block-button.latepoint-book-button .wp-block-button__link:focus-visible {
    outline: 2px solid var(--book-btn-final);
    outline-offset: 4px;
}

/* ============================================
   Accessibility - Reduced Motion
   Shows final color border immediately (no animation)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    /* Show only the solid color border (no animation) */
    .desktop-header .wp-block-button.latepoint-book-button::before {
        animation: none;
        background: var(--book-btn-final);
    }
}

/* ============================================
   Hide on Mobile (mobile has separate sticky button)
   ============================================ */

@media (max-width: 1023px) {
    .desktop-header .wp-block-button.latepoint-book-button {
        display: none;
    }
}

/* ============================================
   WooCommerce Mini-Cart Icon Override
   Replace default SVG with Flaticon uicons
   v1.6.0: Fixed unicode, stronger selectors
   ============================================ */

/* Hide the default WooCommerce SVG icon */
.wc-block-mini-cart .wc-block-mini-cart__icon,
.wc-block-mini-cart__button .wc-block-mini-cart__icon,
.wc-block-mini-cart svg.wc-block-mini-cart__icon {
    display: none !important;
}

/* Remove default background color from badge */
.wc-block-mini-cart .wc-block-mini-cart__badge,
.wc-block-mini-cart__button .wc-block-mini-cart__badge {
    background-color: transparent !important;
}

/* Add Flaticon shopping bag icon: fi-rr-shopping-bag */
.wc-block-mini-cart .wc-block-mini-cart__quantity-badge::before,
.wc-block-mini-cart__button .wc-block-mini-cart__quantity-badge::before {
    content: '\edce'; /* fi-rr-shopping-bag - correct unicode */
    font-family: 'uicons-regular-rounded' !important;
    font-style: normal;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: inherit;
    display: inline-block;
    margin-right: 2px;
}