/**
 * P4U Element Focus Module - CSS Styles
 * 
 * @author    Presta4you.com
 * @copyright 2024 Presta4you.com
 * @license   Commercial License
 * @contact   info@presta4you.com
 */

/* Default CSS custom properties - will be overridden by dynamic values */
:root {
    --p4u-focus-color: #007cba;
    --p4u-focus-width: 2px;
    --p4u-focus-radius: 4px;
    --p4u-button-color: #28a745;
    --p4u-link-color: #007cba;
    --p4u-form-color: #6c757d;
    --p4u-animation-duration: 200ms;
}

/* Remove default browser focus outline */
*:focus {
    outline: none;
}

/* Base focus-visible styles */
*:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-focus-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    box-shadow: 0 0 0 1px var(--p4u-focus-color) !important;
    transition: outline var(--p4u-animation-duration) ease, 
                box-shadow var(--p4u-animation-duration) ease, 
                border-color var(--p4u-animation-duration) ease !important;
}

/* Button-specific focus styles */
button:focus-visible,
.btn:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
[role="button"]:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-button-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    box-shadow: 0 0 0 1px var(--p4u-button-color) !important;
}

/* Link-specific focus styles */
a:focus-visible,
[role="link"]:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-link-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    box-shadow: 0 0 0 1px var(--p4u-link-color) !important;
}

/* Form field-specific focus styles */
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="password"]:focus-visible,
input[type="number"]:focus-visible,
input[type="tel"]:focus-visible,
input[type="url"]:focus-visible,
input[type="search"]:focus-visible,
input[type="date"]:focus-visible,
input[type="time"]:focus-visible,
input[type="datetime-local"]:focus-visible,
input[type="month"]:focus-visible,
input[type="week"]:focus-visible,
input[type="color"]:focus-visible,
input[type="range"]:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="textbox"]:focus-visible,
[role="combobox"]:focus-visible,
[role="listbox"]:focus-visible {
    border-color: var(--p4u-form-color) !important;
    box-shadow: 0 0 0 var(--p4u-focus-width) var(--p4u-form-color) !important;
    border-radius: var(--p4u-focus-radius) !important;
    outline: none !important;
}

/* Checkbox and radio button styles */
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-form-color) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 1px var(--p4u-form-color) !important;
}

/* Navigation and menu items */
.nav a:focus-visible,
.menu a:focus-visible,
.dropdown-item:focus-visible,
[role="menuitem"]:focus-visible,
[role="tab"]:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-link-color) !important;
    outline-offset: 1px !important;
    border-radius: var(--p4u-focus-radius) !important;
    background-color: rgba(0, 124, 186, 0.1) !important;
}

/* Special styles for menu items with empty or missing href */
.tt-menu-horizontal a[href=""]:focus-visible,
.tt-menu-horizontal a:not([href]):focus-visible,
.tt-menu-horizontal a[href="#"]:focus-visible,
.tt-menu-horizontal .ttinnermenu:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-link-color) !important;
    outline-offset: 1px !important;
    border-radius: var(--p4u-focus-radius) !important;
    background-color: rgba(0, 124, 186, 0.1) !important;
    cursor: pointer !important;
}

/* Focus styles for parent menu items */
.tt-menu-horizontal li.parent > a:focus-visible,
.tt-menu-horizontal li.parent > .ttinnermenu:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-link-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    background-color: rgba(0, 124, 186, 0.15) !important;
    box-shadow: 0 0 0 1px var(--p4u-link-color) !important;
}

/* Focus styles for dropdown menu items */
.tt-menu-horizontal .menu-dropdown a:focus-visible,
.tt-menu-horizontal .tt-sub-menu a:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-link-color) !important;
    outline-offset: 1px !important;
    border-radius: var(--p4u-focus-radius) !important;
    background-color: rgba(0, 124, 186, 0.1) !important;
}

/* Ensure dropdown menus are focusable when parent is focused */
.tt-menu-horizontal li.parent:focus-within .menu-dropdown,
.tt-menu-horizontal li.parent:focus-within .tt-sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Additional styles for better menu focus visibility */
.tt-menu-horizontal a:focus,
.tt-menu-horizontal .ttinnermenu:focus {
    outline: var(--p4u-focus-width) solid var(--p4u-link-color) !important;
    outline-offset: 1px !important;
    border-radius: var(--p4u-focus-radius) !important;
    background-color: rgba(0, 124, 186, 0.1) !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Ensure menu items without href are still focusable */
.tt-menu-horizontal a[href=""],
.tt-menu-horizontal a:not([href]),
.tt-menu-horizontal a[href="#"] {
    cursor: pointer !important;
    display: inline-block !important;
}

/* Focus styles for mobile menu items */
.tt-menu-horizontal .icon-drop-mobile:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-link-color) !important;
    outline-offset: 1px !important;
    border-radius: var(--p4u-focus-radius) !important;
    background-color: rgba(0, 124, 186, 0.1) !important;
}

/* Enhanced focus styles for menu items with empty href */
.tt-menu-horizontal a[href=""]:focus,
.tt-menu-horizontal a:not([href]):focus,
.tt-menu-horizontal a[href="#"]:focus,
.tt-menu-horizontal .ttinnermenu:focus {
    outline: var(--p4u-focus-width) solid var(--p4u-link-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    background-color: rgba(0, 124, 186, 0.15) !important;
    position: relative !important;
    z-index: 1001 !important;
    box-shadow: 0 0 0 1px var(--p4u-link-color) !important;
}

/* Ensure proper tabindex for all menu items */
.tt-menu-horizontal a[tabindex="0"],
.tt-menu-horizontal .ttinnermenu[tabindex="0"] {
    cursor: pointer !important;
    display: inline-block !important;
}

/* Focus ring for better visibility */
.tt-menu-horizontal a:focus-visible,
.tt-menu-horizontal .ttinnermenu:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-link-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    background-color: rgba(0, 124, 186, 0.1) !important;
    position: relative !important;
    z-index: 1000 !important;
    box-shadow: 0 0 0 1px var(--p4u-link-color) !important;
}

/* Prevent focus from jumping to other elements */
.tt-menu-horizontal {
    position: relative;
    z-index: 100;
}

/* Ensure menu items are in proper tab order */
.tt-menu-horizontal .menu-content > li > a,
.tt-menu-horizontal .menu-content > li > .ttinnermenu {
    tabindex: 0;
}

/* Carousel focus styles - exclude from normal tab flow */
.carousel .carousel-item,
.homeslider .carousel-item,
[data-ride="carousel"] .carousel-item {
    outline: none !important;
    box-shadow: none !important;
}

/* Only show focus for active/visible carousel items */
.carousel .carousel-item:focus,
.homeslider .carousel-item:focus,
[data-ride="carousel"] .carousel-item:focus {
    outline: var(--p4u-focus-width) solid var(--p4u-focus-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Hide focus for hidden carousel items */
.carousel .carousel-item[aria-hidden="true"]:focus,
.homeslider .carousel-item[aria-hidden="true"]:focus,
[data-ride="carousel"] .carousel-item[aria-hidden="true"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Exclude stretched links from normal tab flow */
.stretched-link {
    outline: none !important;
    box-shadow: none !important;
}

/* Carousel navigation controls */
.carousel .direction a:focus-visible,
.homeslider .direction a:focus-visible,
[data-ride="carousel"] .direction a:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-focus-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    background-color: rgba(0, 124, 186, 0.1) !important;
}

/* Skip carousel items in normal tab navigation */
.carousel-item[tabindex="0"] {
    outline: none !important;
}

.carousel-item[tabindex="0"]:focus {
    outline: var(--p4u-focus-width) solid var(--p4u-focus-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* PrestaShop specific elements */
.product-miniature:focus-visible,
.product-item:focus-visible,
.category-item:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-focus-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    transform: scale(1.02);
}

/* Cart and checkout elements */
.cart-item:focus-visible,
.checkout-step:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-focus-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
}

/* Admin panel specific styles */
.btn-toolbar .btn:focus-visible,
.form-control:focus-visible {
    border-color: var(--p4u-form-color) !important;
    box-shadow: 0 0 0 var(--p4u-focus-width) var(--p4u-form-color) !important;
    border-radius: var(--p4u-focus-radius) !important;
}

/* High contrast mode styles */
@media (prefers-contrast: high) {
    :root {
        --p4u-focus-color: #ffffff !important;
        --p4u-button-color: #ffffff !important;
        --p4u-link-color: #ffff00 !important;
        --p4u-form-color: #ffffff !important;
    }
    
    *:focus-visible {
        outline-width: 3px !important;
        box-shadow: 0 0 0 2px #000000, 0 0 0 4px #ffffff !important;
    }
}

/* High contrast mode class */
.p4u-high-contrast {
    --p4u-focus-color: #ffffff !important;
    --p4u-button-color: #ffffff !important;
    --p4u-link-color: #ffff00 !important;
    --p4u-form-color: #ffffff !important;
}

.p4u-high-contrast *:focus-visible {
    outline-width: 3px !important;
    box-shadow: 0 0 0 2px #000000, 0 0 0 4px #ffffff !important;
}

/* Keyboard navigation detection */
.p4u-keyboard-navigation *:focus-visible {
    outline-style: solid !important;
}

.p4u-mouse-navigation *:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Focus trap styles for modals */
.p4u-focus-trap {
    position: relative;
}

.p4u-focus-trap::before,
.p4u-focus-trap::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Animation styles */
@keyframes p4u-focus-pulse {
    0% { box-shadow: 0 0 0 0 var(--p4u-focus-color); }
    50% { box-shadow: 0 0 0 4px rgba(0, 124, 186, 0.3); }
    100% { box-shadow: 0 0 0 0 var(--p4u-focus-color); }
}

.p4u-focus-pulse:focus-visible {
    animation: p4u-focus-pulse 1s infinite;
}

/* Ensure visibility on dark backgrounds */
.bg-dark *:focus-visible,
.navbar-dark *:focus-visible,
.dark-theme *:focus-visible {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 1px #ffffff !important;
}

/* Focus indicators for custom elements */
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-focus-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
}

/* Improved visibility for small elements */
.btn-sm:focus-visible,
.btn-xs:focus-visible,
small:focus-visible {
    outline-width: 2px !important;
    outline-offset: 1px !important;
}

/* Focus styles for interactive cards and tiles */
.card:focus-visible,
.tile:focus-visible,
.panel:focus-visible {
    outline: var(--p4u-focus-width) solid var(--p4u-focus-color) !important;
    outline-offset: 2px !important;
    border-radius: var(--p4u-focus-radius) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--p4u-focus-color) !important;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        --p4u-animation-duration: 0ms !important;
        transition: none !important;
        animation: none !important;
    }
    
    .product-miniature:focus-visible,
    .product-item:focus-visible,
    .card:focus-visible,
    .tile:focus-visible,
    .panel:focus-visible {
        transform: none !important;
    }
}