/**
 * OZ User Account Dropdown Styles
 * Premium dark theme UI inspired by Spotify/Amazon
 */

/* CSS Custom Properties */
:root {
    --oz-uad-text: #d8d8d8;
    --oz-uad-text-muted: #9a9a9a;
    --oz-uad-brand: #3176ce;
    --oz-uad-brand-hover: #4a8fe0;
    --oz-uad-bg-dropdown: #1e1e1e;
    --oz-uad-bg-hover: #2a2a2a;
    --oz-uad-border: #333333;
    --oz-uad-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
    --oz-uad-radius: 2px;
    --oz-uad-radius-sm: 2px;
    --oz-uad-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --oz-uad-icon-size: 24px;
    --oz-uad-dropdown-width: 240px;
}

/* Screen reader only */
.oz-uad__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Main container */
.oz-uad {
    position: relative;
    display: inline-flex;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    line-height: 1.5;
    z-index: 9999;
}

/* Trigger button */
.oz-uad__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: transparent !important;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: var(--oz-uad-text, #d8d8d8);
    transition: color var(--oz-uad-transition), transform var(--oz-uad-transition);
    /* Remove any pink/focus overlays */
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* Hover: Stay #d8d8d8, NO background change */
.oz-uad__trigger:hover {
    background: transparent !important;
    color: var(--oz-uad-text, #d8d8d8);
}

/* Focus visible: subtle outline only, no background */
.oz-uad__trigger:focus-visible {
    background: transparent !important;
    outline: 2px solid var(--oz-uad-brand, #3176ce) !important;
    outline-offset: 2px;
}

/* Active/Click state - NO pink overlay */
.oz-uad__trigger:active,
.oz-uad__trigger:focus {
    transform: scale(0.95);
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* When dropdown is open - keep text color, no background */
.oz-uad[data-open="true"] .oz-uad__trigger {
    background: transparent !important;
    color: var(--oz-uad-text, #d8d8d8);
}

/* User icon */
.oz-uad__icon {
    width: var(--oz-uad-icon-size);
    height: var(--oz-uad-icon-size);
    flex-shrink: 0;
}

/* Dropdown panel */
.oz-uad__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: var(--oz-uad-dropdown-width);
    background: var(--oz-uad-bg-dropdown);
    border: 1px solid var(--oz-uad-border);
    border-radius: var(--oz-uad-radius);
    box-shadow: var(--oz-uad-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: 
        opacity var(--oz-uad-transition),
        visibility var(--oz-uad-transition),
        transform var(--oz-uad-transition);
    pointer-events: none;
    z-index: 10000;
}

.oz-uad[data-open="true"] .oz-uad__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Dropdown inner wrapper */
.oz-uad__dropdown-inner {
    padding: 8px 0;
    overflow: hidden;
    border-radius: var(--oz-uad-radius);
}

/* Header section */
.oz-uad__header {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--oz-uad-border);
    margin-bottom: 8px;
}

.oz-uad__greeting {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--oz-uad-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.oz-uad__header--guest .oz-uad__greeting {
    color: var(--oz-uad-text-muted);
}

/* Navigation */
.oz-uad__nav {
    display: flex;
    flex-direction: column;
}

/* Links */
.oz-uad__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--oz-uad-text);
    text-decoration: none;
    transition: 
        background-color var(--oz-uad-transition),
        color var(--oz-uad-transition),
        padding-left var(--oz-uad-transition);
}

.oz-uad__link:hover,
.oz-uad__link:focus-visible {
    background-color: var(--oz-uad-bg-hover);
    color: #ffffff;
    padding-left: 20px;
    text-decoration: none;
}

.oz-uad__link:focus-visible {
    outline: none;
    box-shadow: inset 3px 0 0 var(--oz-uad-brand);
}

.oz-uad__link:active {
    background-color: #333333;
}

/* Link icon */
.oz-uad__link-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--oz-uad-text-muted);
    transition: color var(--oz-uad-transition);
}

.oz-uad__link:hover .oz-uad__link-icon,
.oz-uad__link:focus-visible .oz-uad__link-icon {
    color: var(--oz-uad-brand);
}

/* Logout link special styling */
.oz-uad__link--logout {
    color: var(--oz-uad-text-muted);
}

.oz-uad__link--logout:hover,
.oz-uad__link--logout:focus-visible {
    color: #ff6b6b;
}

.oz-uad__link--logout:hover .oz-uad__link-icon,
.oz-uad__link--logout:focus-visible .oz-uad__link-icon {
    color: #ff6b6b;
}

/* Divider */
.oz-uad__divider {
    height: 1px;
    background: var(--oz-uad-border);
    margin: 8px 16px;
}

/* Mobile/Tablet positioning adjustments */
@media (max-width: 1024px) {
    .oz-uad__dropdown {
        --oz-uad-dropdown-width: 220px;
    }
}

@media (max-width: 768px) {
    .oz-uad__dropdown {
        /* FIXED: Position dropdown underneath user icon on phone, same as desktop */
        position: absolute;
        top: calc(100% + 8px);
        bottom: auto;
        left: auto;
        right: 0;
        width: var(--oz-uad-dropdown-width, 220px);
        max-width: calc(100vw - 20px);
        border-radius: var(--oz-uad-radius);
        transform: translateY(-8px) scale(0.98);
        transform-origin: top right;
        /* Ensure dropdown is NOT blurred on mobile */
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: var(--oz-uad-bg-dropdown) !important;
        isolation: isolate;
    }

    .oz-uad[data-open="true"] .oz-uad__dropdown {
        transform: translateY(0) scale(1);
        -webkit-transform: translateY(0) scale(1);
        z-index: 10002 !important;
        pointer-events: auto !important;
    }

    .oz-uad__dropdown-inner {
        padding: 16px 0;
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Ensure text is crisp */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .oz-uad__header {
        padding: 16px 20px 12px;
        filter: none !important;
    }

    .oz-uad__link {
        padding: 14px 20px;
        font-size: 15px;
        /* Ensure links are tappable */
        pointer-events: auto !important;
        touch-action: manipulation;
        filter: none !important;
    }

    .oz-uad__link:hover,
    .oz-uad__link:focus-visible {
        padding-left: 24px;
    }

    .oz-uad__divider {
        margin: 12px 20px;
    }
}

/* Tablet specific fixes */
@media (min-width: 769px) and (max-width: 1024px) {
    .oz-uad__dropdown {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Add bottom margin to account for sticky player on tablet */
        bottom: auto;
        top: calc(100% + 8px);
    }
    
    .oz-uad[data-open="true"] .oz-uad__dropdown {
        z-index: 10002 !important;
        pointer-events: auto !important;
    }
    
    .oz-uad__dropdown-inner {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    .oz-uad__dropdown-inner *,
    .oz-uad__header,
    .oz-uad__nav,
    .oz-uad__link,
    .oz-uad__greeting {
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Backdrop - REMOVED: No dark overlay/dimming should occur */
.oz-uad__backdrop {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.oz-uad__backdrop--visible {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* CRITICAL FIX: Ensure dropdown itself is NEVER blurred on mobile/tablet */
/* The dropdown must be crisp, clear, and fully tappable */
.oz-uad__dropdown {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    isolation: isolate;
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Ensure dropdown content is always crisp and clear */
.oz-uad__dropdown-inner,
.oz-uad__header,
.oz-uad__nav,
.oz-uad__link,
.oz-uad__greeting,
.oz-uad__link span,
.oz-uad__link-icon,
.oz-uad__divider {
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* Force dropdown above backdrop blur - must be higher than backdrop */
.oz-uad[data-open="true"] .oz-uad__dropdown {
    z-index: 10002 !important;
    pointer-events: auto !important;
}

/* Ensure all dropdown links are tappable on mobile */
.oz-uad__link {
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Animation keyframes for extra polish */
@keyframes oz-uad-fade-in {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes oz-uad-slide-up {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --oz-uad-border: #555555;
        --oz-uad-text: #ffffff;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .oz-uad__trigger,
    .oz-uad__dropdown,
    .oz-uad__link,
    .oz-uad__link-icon,
    .oz-uad__backdrop {
        transition: none;
    }
}

/* Ensure Elementor compatibility */
.elementor-widget-shortcode .oz-uad,
.elementor-widget-text-editor .oz-uad {
    display: inline-flex;
}

/* Reset any inherited styles */
.oz-uad * {
    box-sizing: border-box;
}

.oz-uad a {
    box-shadow: none;
}

.oz-uad button {
    font-family: inherit;
}

/* CRITICAL FIX: Dropdown text color must ALWAYS be #d8d8d8 regardless of page */
/* Override any inherited styles from WooCommerce pages (my-account, checkout, cart, etc.) */
.woocommerce-account .oz-uad__link,
.woocommerce-account .oz-uad__link span,
.woocommerce-account .oz-uad__greeting,
.woocommerce-account .oz-uad__nav a,
.woocommerce-account .oz-uad a,
body.woocommerce-account .oz-uad__link,
body.woocommerce-account .oz-uad__link span,
body.woocommerce-account .oz-uad__greeting,
/* Checkout page overrides */
.woocommerce-checkout .oz-uad__link,
.woocommerce-checkout .oz-uad__link span,
.woocommerce-checkout .oz-uad__greeting,
.woocommerce-checkout .oz-uad__nav a,
.woocommerce-checkout .oz-uad a,
body.woocommerce-checkout .oz-uad__link,
body.woocommerce-checkout .oz-uad__link span,
body.woocommerce-checkout .oz-uad__greeting,
/* Cart page overrides */
.woocommerce-cart .oz-uad__link,
.woocommerce-cart .oz-uad__link span,
.woocommerce-cart .oz-uad__greeting,
body.woocommerce-cart .oz-uad__link,
body.woocommerce-cart .oz-uad__link span,
/* Generic WooCommerce page overrides */
.woocommerce-page .oz-uad__link,
.woocommerce-page .oz-uad__link span,
.woocommerce-page .oz-uad__greeting,
body.woocommerce-page .oz-uad__link,
body.woocommerce-page .oz-uad__link span {
    color: var(--oz-uad-text, #d8d8d8) !important;
}

/* Ensure hover states work correctly on all WooCommerce pages */
.woocommerce-account .oz-uad__link:hover,
.woocommerce-account .oz-uad__link:hover span,
.woocommerce-account .oz-uad__link:focus-visible,
.woocommerce-account .oz-uad__link:focus-visible span,
body.woocommerce-account .oz-uad__link:hover,
body.woocommerce-account .oz-uad__link:hover span,
/* Checkout hover */
.woocommerce-checkout .oz-uad__link:hover,
.woocommerce-checkout .oz-uad__link:hover span,
.woocommerce-checkout .oz-uad__link:focus-visible,
body.woocommerce-checkout .oz-uad__link:hover,
body.woocommerce-checkout .oz-uad__link:hover span,
/* Cart hover */
.woocommerce-cart .oz-uad__link:hover,
.woocommerce-cart .oz-uad__link:hover span,
body.woocommerce-cart .oz-uad__link:hover,
/* Generic WooCommerce hover */
.woocommerce-page .oz-uad__link:hover,
.woocommerce-page .oz-uad__link:hover span,
body.woocommerce-page .oz-uad__link:hover {
    color: #ffffff !important;
}

/* Logout link should remain muted color on all WooCommerce pages */
.woocommerce-account .oz-uad__link--logout,
.woocommerce-account .oz-uad__link--logout span,
body.woocommerce-account .oz-uad__link--logout,
body.woocommerce-account .oz-uad__link--logout span,
.woocommerce-checkout .oz-uad__link--logout,
.woocommerce-checkout .oz-uad__link--logout span,
body.woocommerce-checkout .oz-uad__link--logout,
.woocommerce-cart .oz-uad__link--logout,
.woocommerce-cart .oz-uad__link--logout span,
.woocommerce-page .oz-uad__link--logout,
.woocommerce-page .oz-uad__link--logout span {
    color: var(--oz-uad-text-muted, #9a9a9a) !important;
}

.woocommerce-account .oz-uad__link--logout:hover,
.woocommerce-account .oz-uad__link--logout:hover span,
body.woocommerce-account .oz-uad__link--logout:hover,
body.woocommerce-account .oz-uad__link--logout:hover span,
.woocommerce-checkout .oz-uad__link--logout:hover,
.woocommerce-checkout .oz-uad__link--logout:hover span,
body.woocommerce-checkout .oz-uad__link--logout:hover,
.woocommerce-cart .oz-uad__link--logout:hover,
.woocommerce-cart .oz-uad__link--logout:hover span,
.woocommerce-page .oz-uad__link--logout:hover,
.woocommerce-page .oz-uad__link--logout:hover span {
    color: #ff6b6b !important;
}