/**
 * WMC Multi Currency Switcher — Frontend Styles
 * Version: 1.0.0
 */

/* ============================================================
   CSS Custom Properties (overridable via admin settings)
   ============================================================ */
:root {
    --wmc-bg:             var(--wmc-bg-color, transparent);
    --wmc-text:           var(--wmc-text-color, inherit);
    --wmc-hover-bg:       var(--wmc-hover-bg-color, #f5f5f5);
    --wmc-hover-text:     var(--wmc-hover-text-color, #333);
    --wmc-border:         rgba(0, 0, 0, 0.1);
    --wmc-radius:         var(--wmc-border-radius, 4px);
    --wmc-font-size:      var(--wmc-fs, 14px);
    --wmc-flag-size:      var(--wmc-flag-w, 20px);
    --wmc-dropdown-width: var(--wmc-dd-width, 200px);
    --wmc-shadow:         0 4px 16px rgba(0, 0, 0, 0.12);
    --wmc-transition:     all 0.2s ease;
    --wmc-z-index:        9999;
}

/* ============================================================
   Base Switcher
   ============================================================ */
.wmc-switcher {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: var(--wmc-font-size);
    color: var(--wmc-text);
    background: var(--wmc-bg);
    border-radius: var(--wmc-radius);
    user-select: none;
}

.wmc-flag {
    width: var(--wmc-flag-size);
    height: auto;
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    object-fit: cover;
    flex-shrink: 0;
}

.wmc-flag-wrapper {
    display: inline-flex;
    align-items: center;
    margin-right: 6px;
    flex-shrink: 0;
}

.wmc-symbol {
    font-weight: 600;
    margin-right: 2px;
}

.wmc-code {
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-right: 2px;
}

.wmc-name {
    color: inherit;
    opacity: 0.85;
}

/* ============================================================
   Dropdown Style
   ============================================================ */
.wmc-switcher--dropdown {
    position: relative;
}

.wmc-switcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background-color: transparent !important;
    color: var(--wmc-text);
    border: 1px solid var(--wmc-border);
    border-radius: var(--wmc-radius);
    cursor: pointer;
    font-size: var(--wmc-font-size);
    font-family: inherit;
    transition: var(--wmc-transition);
    white-space: nowrap;
    line-height: 1.4;
    position: relative;
}

.wmc-switcher__trigger:hover,
.wmc-switcher__trigger:focus {
    background-color: transparent !important;
    color: var(--wmc-hover-text);
    outline: none;
    border-color: var(--wmc-hover-text);
}

.wmc-switcher__trigger[aria-expanded="true"] {
    background-color: transparent !important;
    border-color: var(--wmc-hover-text);
}

.wmc-trigger-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.wmc-arrow {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    transition: transform 0.2s ease;
    color: currentColor;
    opacity: 0.6;
}

.wmc-switcher__trigger[aria-expanded="true"] .wmc-arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.wmc-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: var(--wmc-dropdown-width);
    background: #fff;
    border: 1px solid var(--wmc-border);
    border-radius: var(--wmc-radius);
    box-shadow: var(--wmc-shadow);
    z-index: var(--wmc-z-index);
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 320px;
    overflow-y: auto;
    animation: wmcFadeIn 0.15s ease;
}

.wmc-dropdown-menu.wmc-open {
    display: block;
}

/* Right-align dropdown if near right edge */
.wmc-switcher--dropdown.wmc-align-right .wmc-dropdown-menu {
    left: auto;
    right: 0;
}

@keyframes wmcFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.wmc-dropdown-item {
    margin: 0;
    padding: 0;
}

.wmc-currency-btn {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--wmc-font-size);
    font-family: inherit;
    color: #333;
    text-align: left;
    transition: background 0.15s ease;
    gap: 6px;
    line-height: 1.4;
}

.wmc-currency-btn:hover {
    background: var(--wmc-hover-bg);
    color: var(--wmc-hover-text);
}

.wmc-dropdown-item.wmc-active .wmc-currency-btn {
    background: #f0f7ff;
    color: #0073aa;
    font-weight: 600;
}

.wmc-currency-info {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    flex: 1;
}

.wmc-checkmark {
    margin-left: auto;
    color: #0073aa;
    flex-shrink: 0;
}

/* Scrollbar styling for dropdown */
.wmc-dropdown-menu::-webkit-scrollbar {
    width: 4px;
}
.wmc-dropdown-menu::-webkit-scrollbar-track {
    background: transparent;
}
.wmc-dropdown-menu::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

/* ============================================================
   List Style
   ============================================================ */
.wmc-switcher--list .wmc-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wmc-switcher--list .wmc-list-item .wmc-currency-btn {
    padding: 4px 8px;
    border: 1px solid var(--wmc-border);
    border-radius: var(--wmc-radius);
    background: var(--wmc-bg);
    color: var(--wmc-text);
    width: auto;
}

.wmc-switcher--list .wmc-list-item .wmc-currency-btn:hover {
    background: var(--wmc-hover-bg);
    color: var(--wmc-hover-text);
    border-color: var(--wmc-hover-bg);
}

.wmc-switcher--list .wmc-list-item.wmc-active .wmc-currency-btn {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
    font-weight: 600;
}

/* ============================================================
   Select Style
   ============================================================ */
.wmc-switcher--select {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--wmc-border);
    border-radius: var(--wmc-radius);
    padding: 4px 8px;
    background: var(--wmc-bg);
}

.wmc-select {
    border: none;
    background: transparent;
    font-size: var(--wmc-font-size);
    font-family: inherit;
    color: var(--wmc-text);
    cursor: pointer;
    outline: none;
    padding: 2px 4px;
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================================
   Loading State
   ============================================================ */
.wmc-switcher.wmc-loading .wmc-switcher__trigger,
.wmc-switcher.wmc-loading .wmc-currency-btn,
.wmc-switcher.wmc-loading .wmc-select {
    pointer-events: none;
}

.wmc-switcher.wmc-loading .wmc-switcher__trigger {
    opacity: 1;
}

.wmc-loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    flex-shrink: 0;
}

.wmc-loading-spinner::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: wmcSpin 0.8s linear infinite;
}

@keyframes wmcSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================================
   WoodMart Header Integration
   ============================================================ */

/* WoodMart header bar compatibility */
.woodmart-header .wmc-switcher {
    height: 100%;
    display: flex;
    align-items: center;
}

.woodmart-header .wmc-switcher__trigger {
    border: none;
    border-radius: 0;
    padding: 0 12px;
    height: 100%;
    background-color: transparent !important;
    color: inherit;
}

.woodmart-header .wmc-switcher__trigger:hover {
    background-color: transparent !important;
}

.woodmart-header .wmc-dropdown-menu {
    top: 100%;
}

/* WoodMart dark header */
.woodmart-color-dark .wmc-switcher__trigger,
.woodmart-color-dark .wmc-currency-btn {
    color: #fff;
}

.woodmart-color-dark .wmc-dropdown-menu {
    background: #1a1a1a;
    border-color: rgba(255,255,255,0.1);
}

.woodmart-color-dark .wmc-currency-btn {
    color: #eee;
}

.woodmart-color-dark .wmc-currency-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.woodmart-color-dark .wmc-dropdown-item.wmc-active .wmc-currency-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* WoodMart sticky header */
.woodmart-sticky-header .wmc-switcher {
    transition: var(--wmc-transition);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .wmc-dropdown-menu {
        min-width: 160px;
        max-height: 260px;
    }

    .wmc-switcher--list .wmc-list {
        gap: 2px;
    }

    .wmc-name {
        display: none;
    }
}

@media (max-width: 480px) {
    .wmc-switcher__trigger {
        padding: 4px 8px;
    }
}