/**
 * WooCommerce Multi-Country Store Manager - Frontend Styles
 */

/* Country Selector Menu Item in Navigation */
.wcmcsm-country-selector-menu,
.menu-item.wcmcsm-country-selector-menu {
    position: relative;
}

.wcmcsm-country-selector-menu > a,
.menu-item.wcmcsm-country-selector-menu > a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 10px !important;
    min-height: 40px;
    box-sizing: border-box;
}

/* Prevent size changes on hover */
.wcmcsm-country-selector-menu > a:hover,
.menu-item.wcmcsm-country-selector-menu > a:hover {
    padding: 5px 10px !important;
    border: none !important;
    background: transparent !important;
    min-height: 40px;
}

/* Prevent Avada/WordPress from showing submenu on hover, focus, or after closing */
.wcmcsm-country-selector-menu:not(.wcmcsm-open):hover .sub-menu,
.wcmcsm-country-selector-menu:not(.wcmcsm-open):hover > ul,
.menu-item.wcmcsm-country-selector-menu:not(.wcmcsm-open):hover .sub-menu,
.wcmcsm-country-selector-menu.wcmcsm-just-closed .sub-menu,
.wcmcsm-country-selector-menu.wcmcsm-just-closed:hover .sub-menu,
.wcmcsm-country-selector-menu:not(.wcmcsm-open):focus .sub-menu,
.wcmcsm-country-selector-menu:not(.wcmcsm-open):focus-within .sub-menu,
.wcmcsm-country-selector-menu:not(.wcmcsm-open).focus .sub-menu,
.wcmcsm-country-selector-menu:not(.wcmcsm-open).active .sub-menu,
.wcmcsm-country-selector-menu:not(.wcmcsm-open) > a:focus + .sub-menu,
.wcmcsm-country-selector-menu:not(.wcmcsm-open) > a:focus ~ .sub-menu,
.wcmcsm-country-selector-menu:not(.wcmcsm-open) > a:active + .sub-menu,
.wcmcsm-country-selector-menu:not(.wcmcsm-open) > a:active ~ .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Flag Container for uniform sizing */
.wcmcsm-flag-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 22px !important;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
    flex-grow: 0;
    pointer-events: none; /* Let clicks pass through to parent link */
}

/* Ensure dropdown items have the same flag size and alignment */
.wcmcsm-country-item .wcmcsm-flag-container {
    width: 30px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* Hover effect for dropdown items only */
.wcmcsm-country-item a:hover .wcmcsm-flag-container {
    border-color: #007cba;
    box-shadow: 0 2px 5px rgba(0, 124, 186, 0.2);
}

/* No hover effects on main menu item */
.wcmcsm-country-selector-menu > a:hover .wcmcsm-flag-container {
    width: 30px !important;
    height: 22px !important;
    transform: none !important;
}

/* Flag Images */
.wcmcsm-flag-container img.wcmcsm-flag {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
    border: none;
}

/* Country code display */
.wcmcsm-country-code {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    pointer-events: none; /* Let clicks pass through to parent link */
}

/* Dropdown arrow */
.wcmcsm-dropdown-arrow {
    pointer-events: none; /* Let clicks pass through to parent link */
}

/* Hide country names completely since we only want codes */
.wcmcsm-country-name {
    display: none;
}

/* Dropdown arrow */
.wcmcsm-dropdown-arrow {
    font-size: 10px;
    margin-left: 5px;
    transition: transform 0.3s ease;
    opacity: 0.6;
    display: inline-block;
}

.wcmcsm-country-selector-menu.wcmcsm-open > a .wcmcsm-dropdown-arrow {
    transform: rotate(180deg);
}

/* Hide default WordPress/theme dropdown arrows */
.wcmcsm-country-selector-menu > a::after,
.wcmcsm-country-selector-menu > a::before,
.menu-item.wcmcsm-country-selector-menu > a::after,
.menu-item.wcmcsm-country-selector-menu > a::before,
.menu-item-has-children.wcmcsm-country-selector-menu > a::after,
.menu-item-has-children.wcmcsm-country-selector-menu > a::before {
    display: none !important;
    content: none !important;
}

/* Hide any span or i elements that might be arrows */
.wcmcsm-country-selector-menu > a > .arrow,
.wcmcsm-country-selector-menu > a > .caret,
.wcmcsm-country-selector-menu > a > i[class*="arrow"],
.wcmcsm-country-selector-menu > a > i[class*="caret"],
.wcmcsm-country-selector-menu > a > i[class*="chevron"] {
    display: none !important;
}

/* Specifically hide Avada's hover submenu opener */
.wcmcsm-country-selector-menu span.awb-menu__open-nav-submenu-hover,
.menu-item.wcmcsm-country-selector-menu span.awb-menu__open-nav-submenu-hover {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Avada Theme Specific Styles */
.fusion-main-menu .wcmcsm-country-selector-menu > a {
    padding: 0 15px !important;
    height: auto !important;
    line-height: inherit !important;
    min-height: inherit !important;
    transition: none !important;
}

/* Remove Avada's focus styles */
.fusion-main-menu .wcmcsm-country-selector-menu > a:focus,
.fusion-main-menu .wcmcsm-country-selector-menu > a:focus-visible,
.fusion-main-menu .wcmcsm-country-selector-menu.focus > a,
.fusion-main-menu .wcmcsm-country-selector-menu:focus-within > a {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Hide Avada's default dropdown arrows/carets */
.fusion-main-menu .wcmcsm-country-selector-menu > a .fusion-caret,
.fusion-main-menu .wcmcsm-country-selector-menu > a .fusion-dropdown-indicator,
.fusion-main-menu .wcmcsm-country-selector-menu .fusion-dropdown-svg,
.fusion-main-menu .wcmcsm-country-selector-menu > a > .fusion-megamenu-icon,
.fusion-main-menu .wcmcsm-country-selector-menu .awb-menu__open-nav-submenu-hover,
.wcmcsm-country-selector-menu .awb-menu__open-nav-submenu-hover {
    display: none !important;
}

/* Remove Avada's ::after arrow */
.fusion-main-menu .wcmcsm-country-selector-menu > a::after,
.fusion-main-menu .wcmcsm-country-selector-menu > a::before {
    display: none !important;
    content: none !important;
}

/* Prevent Avada hover effects that cause jumping */
.fusion-main-menu .wcmcsm-country-selector-menu > a:hover,
.fusion-main-menu .wcmcsm-country-selector-menu:hover > a {
    padding: 0 15px !important;
    margin: 0 !important;
    border: none !important;
    transform: none !important;
    top: 0 !important;
    bottom: 0 !important;
}

.fusion-main-menu .wcmcsm-flag-container {
    width: 30px !important;
    height: 22px !important;
}

/* Lock dimensions for Avada menu items */
.fusion-main-menu .wcmcsm-country-selector-menu {
    transition: none !important;
}

.fusion-main-menu .wcmcsm-country-selector-menu > a > * {
    transition: none !important;
    transform: none !important;
}

.fusion-main-menu .wcmcsm-country-code {
    font-size: 13px;
    font-weight: 600;
}

/* Override Avada's hover and focus behavior - only when not open or just closed */
.fusion-main-menu .wcmcsm-country-selector-menu:not(.wcmcsm-open):hover .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu:not(.wcmcsm-open).hover .sub-menu,
.fusion-main-menu li.wcmcsm-country-selector-menu:not(.wcmcsm-open):hover > .sub-menu,
.fusion-main-menu li.wcmcsm-country-selector-menu:not(.wcmcsm-open):hover > ul,
.fusion-main-menu .wcmcsm-country-selector-menu.wcmcsm-just-closed .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu.wcmcsm-just-closed:hover .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu:not(.wcmcsm-open):focus .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu:not(.wcmcsm-open):focus-within .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu:not(.wcmcsm-open).focus .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu:not(.wcmcsm-open).fusion-dropdown-highlight .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu:not(.wcmcsm-open) > a:focus + .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu:not(.wcmcsm-open) > a:focus ~ .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu.wcmcsm-just-closed:focus .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu.wcmcsm-just-closed:focus-within .sub-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Show on click for Avada and keep stable */
.fusion-main-menu .wcmcsm-country-selector-menu.wcmcsm-open .sub-menu,
.fusion-main-menu .wcmcsm-country-selector-menu.wcmcsm-open > ul {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
    z-index: 999999;
    border-radius: 8px;
    top: 100%;
    margin-top: 5px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 90px;
    width: auto;
}

/* Avada sticky header adjustments - keep same size */
.fusion-is-sticky .wcmcsm-flag-container {
    width: 30px !important;
    height: 22px !important;
    transition: none;
}

.fusion-is-sticky .wcmcsm-country-code {
    font-size: 12px;
}

.fusion-main-menu .wcmcsm-country-item.current-country > a {
    font-weight: 600;
    position: relative;
}

.fusion-main-menu .wcmcsm-country-item.current-country > a:before {
    content: '✓';
    position: absolute;
    left: -20px;
    color: #28a745;
}

/* Mobile Menu Styles for Avada */
.fusion-mobile-menu-icons .wcmcsm-country-selector-menu {
    order: -1;
}

.fusion-mobile-nav .wcmcsm-country-selector-menu .wcmcsm-flag {
    margin-right: 10px;
}

/* General Theme Compatibility */
.menu-item.wcmcsm-country-selector-menu > a {
    cursor: pointer;
}

.wcmcsm-country-item a {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.wcmcsm-country-item.current-country {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Dropdown submenu styling - hidden by default */
.wcmcsm-country-selector-menu .sub-menu,
.wcmcsm-country-selector-menu ul.sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    min-width: 90px;
    width: auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 8px;
    z-index: 999999;
    margin-top: 5px;
    grid-template-columns: 1fr;
    gap: 4px;
}

/* Show dropdown when wcmcsm-open class is present */
.wcmcsm-country-selector-menu.wcmcsm-open .sub-menu,
.wcmcsm-country-selector-menu.wcmcsm-open > ul.sub-menu,
.wcmcsm-country-selector-menu.wcmcsm-open > ul {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

/* Keep dropdown stable when hovering over it */
.wcmcsm-country-selector-menu.wcmcsm-open:hover .sub-menu,
.wcmcsm-country-selector-menu.wcmcsm-open:hover > ul {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all !important;
}

/* Dropdown items styling - compact grid layout */
.wcmcsm-country-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wcmcsm-country-item a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    padding: 8px 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
    gap: 0;
    border-radius: 6px;
    flex-direction: row;
    line-height: 22px; /* Match flag height for perfect alignment */
    min-height: 38px; /* Ensure consistent height */
}

.wcmcsm-country-item a:hover {
    background-color: #f0f7ff;
    transform: scale(1.05);
}

.wcmcsm-country-item .wcmcsm-country-code {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 6px;
    line-height: 22px; /* Match the flag container height */
    display: inline-flex;
    align-items: center;
}

.wcmcsm-country-item.current-country a {
    background-color: #007cba;
    color: white;
}

.wcmcsm-country-item.current-country a .wcmcsm-country-code {
    color: white;
    font-weight: 700;
}

/* Country Selector Shortcode Styles */
.wcmcsm-country-selector {
    margin: 10px 0;
}

.wcmcsm-selector-dropdown select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

.wcmcsm-selector-dropdown select:hover {
    border-color: #999;
}

.wcmcsm-country-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.wcmcsm-country-list li {
    margin: 0;
}

.wcmcsm-country-list a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.wcmcsm-country-list a:hover {
    background: #f5f5f5;
    border-color: #999;
}

.wcmcsm-country-list li.active a {
    background: #007cba;
    color: white;
    border-color: #007cba;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .wcmcsm-country-selector-menu .sub-menu {
        position: fixed;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
        width: 90%;
        max-width: 320px;
        top: auto;
        bottom: 20px;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 12px;
        grid-template-columns: repeat(3, 1fr);
    }

    .wcmcsm-country-selector-menu.wcmcsm-open .sub-menu {
        transform: translateX(-50%) translateY(0);
        display: flex !important;
        flex-direction: column !important;
    }

    .wcmcsm-flag-container {
        width: 30px !important;
        height: 22px !important;
    }

    .wcmcsm-country-item .wcmcsm-country-code {
        font-size: 12px;
    }

    .wcmcsm-country-item a {
        padding: 8px;
    }
}

/* Fix for Avada sticky header */
.fusion-is-sticky .wcmcsm-country-selector-menu .wcmcsm-flag {
    transition: font-size 0.3s ease;
}

/* Remove focus outline from country selector */
.wcmcsm-country-selector-menu > a:focus,
.wcmcsm-country-selector-menu > a:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Keep accessibility for dropdown items but make it subtle */
.wcmcsm-country-item a:focus {
    outline: none;
    background-color: #f0f7ff;
}