/**
 * LatePoint Category Highlight - Animated Gradient Border & Service Notices
 *
 * @package eRide Theme
 * @version 1.6.0
 * @created 2025-12-13
 * @updated 2025-12-14
 *
 * Adds animated purple/teal flowing border to LatePoint category ID 10 header.
 * Uses background-position animation for universal mobile support.
 * Includes promotional notices for specific services.
 *
 * v1.6.0: Animation runs for one cycle only (3s), then stops
 * v1.5.0: Added promotional notice for service ID 44 (Profhilo)
 * v1.4.0: New approach - background-position animation (universal mobile support)
 * v1.2.1: Rollback from v1.3.0, @property with gradient fallback
 * v1.2.0: Fixed selector to target category header (data-id="10")
 * v1.1.0: Restored default LatePoint hover border for all categories
 */

/* ============================================
   Color Variables
   ============================================ */

:root {
    --lp-highlight-purple: #8A2BE2;  /* BlueViolet */
    --lp-highlight-teal: #00ced1;    /* DarkTurquoise */
}

/* ============================================
   Category Header Targeting - Category ID 10 Only
   ============================================ */

.os-item-category-w[data-id="10"] > .os-item-category-info-w {
    position: relative;
    overflow: visible;
    z-index: 1;
    border-radius: 5px !important;
}

/* ============================================
   Animated Gradient Border - Universal Support
   Uses background-position animation instead of @property
   ============================================ */

.os-item-category-w[data-id="10"] > .os-item-category-info-w::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 8px;
    padding: 3px;

    /* Large gradient that we'll animate across */
    background: linear-gradient(
        90deg,
        var(--lp-highlight-purple),
        var(--lp-highlight-teal),
        var(--lp-highlight-purple),
        var(--lp-highlight-teal),
        var(--lp-highlight-purple)
    );
    background-size: 300% 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;

    /* Animate background position - one cycle then stop */
    animation: lp-gradient-flow 3s linear 1 forwards;

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

/* ============================================
   Gradient Flow Animation - Universal Support
   ============================================ */

@keyframes lp-gradient-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* ============================================
   Hover Enhancement - Faster Animation
   ============================================ */

.os-item-category-w[data-id="10"] > .os-item-category-info-w:hover::before {
    animation-duration: 1.5s;
}

/* ============================================
   Expanded State - Subtle Glow
   ============================================ */

.os-item-category-w[data-id="10"].os-item-category-selected > .os-item-category-info-w::before {
    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .os-item-category-w[data-id="10"] > .os-item-category-info-w::before {
        animation: none;
        background: linear-gradient(
            135deg,
            var(--lp-highlight-purple),
            var(--lp-highlight-teal)
        );
        background-size: 100% 100%;
    }
}

/* ============================================
   RESTORED: Default LatePoint Hover Borders
   All categories should show brand color on hover
   ============================================ */

/* Service items - os-services wrapper */
.latepoint-w .os-services .os-selectable-item:hover {
    border-color: var(--latepoint-brand-primary, #64c5b2) !important;
    box-shadow: 0 0 0 1px var(--latepoint-brand-primary, #64c5b2) !important;
}

/* Generic selectable items in booking forms */
.latepoint-w .latepoint-booking-form-element .os-items .os-item .os-item-i:hover,
.latepoint-w .latepoint-transaction-payment-form .os-items .os-item .os-item-i:hover {
    border-color: var(--latepoint-brand-primary, #64c5b2) !important;
    box-shadow: 0 0 0 1px var(--latepoint-brand-primary, #64c5b2) !important;
    text-decoration: none;
}

/* Agent items */
.latepoint-w .os-agents .os-selectable-item:hover {
    border-color: var(--latepoint-brand-primary, #64c5b2) !important;
    box-shadow: 0 0 0 1px var(--latepoint-brand-primary, #64c5b2) !important;
}

/* Location items */
.latepoint-w .os-locations .os-selectable-item:hover {
    border-color: var(--latepoint-brand-primary, #64c5b2) !important;
    box-shadow: 0 0 0 1px var(--latepoint-brand-primary, #64c5b2) !important;
}

/* Category items */
.latepoint-w .os-categories .os-selectable-item:hover {
    border-color: var(--latepoint-brand-primary, #64c5b2) !important;
    box-shadow: 0 0 0 1px var(--latepoint-brand-primary, #64c5b2) !important;
}

/* Selected state should also maintain border */
.latepoint-w .os-services .os-selectable-item.selected,
.latepoint-w .os-agents .os-selectable-item.selected,
.latepoint-w .os-locations .os-selectable-item.selected,
.latepoint-w .os-categories .os-selectable-item.selected {
    border-color: var(--latepoint-brand-primary, #64c5b2) !important;
    box-shadow: 0 0 0 1px var(--latepoint-brand-primary, #64c5b2) !important;
}

/* Ensure category ID 10 header doesn't get double borders when hovered */
.os-item-category-w[data-id="10"] > .os-item-category-info-w:hover {
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ============================================
   Service ID 44 (Profhilo) - Promotional Notice
   Launch Special Banner (below service box)
   ============================================ */

.os-selectable-item[data-item-id="44"] {
    position: relative;
    overflow: visible;
    margin-bottom: 36px; /* Space for banner below */
}

/* Promotional banner below the service item */
.os-selectable-item[data-item-id="44"]::after {
    content: '🎉 Launch Special\a Full Treatment Package (2-sessions) - 10% OFF';
    white-space: pre-wrap;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);

    /* Styling */
    background: linear-gradient(135deg, var(--lp-highlight-purple), var(--lp-highlight-teal));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.4;
    width: 70vw;

    /* Subtle shadow */
    box-shadow: 0 2px 8px rgba(138, 43, 226, 0.3);

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