/**
 * WooCommerce Variations Styling
 * Custom styles for product variations
 * Using !important to override theme/Elementor/WooLentor styles
 *
 * @package Malazem_Center_Smart
 */

/* CSS Variables (set dynamically via inline style from settings) */
:root {
    --mvs-primary: #00875A;
    --mvs-secondary: #e8f5e9;
    --mvs-text: #1a1a1a;
    --mvs-border: #c8e6c9;
    --mvs-button-bg: #ffffff;
    --mvs-active-bg: #00875A;
    --mvs-active-text: #ffffff;
    --mvs-hover-bg: #e8f5e9;
    --mvs-radius: 8px;
    --mvs-padding: 10px 16px;
    --mvs-gap: 8px;
    --mvs-font-size: 14px;
    --mvs-disabled-opacity: 0.5;
}

/* RTL Support */
html[dir="rtl"] .malazem-variations-styled,
body.rtl .malazem-variations-styled {
    direction: rtl !important;
    text-align: right !important;
}

/* ==========================================================================
   BASE CONTAINER - Override all theme styles
   ========================================================================== */

.malazem-variations-styled {
    margin-bottom: 20px !important;
}

.malazem-variations-styled .variations,
.malazem-variations-styled table.variations {
    width: 100% !important;
    border-collapse: collapse !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.malazem-variations-styled .variations tbody {
    display: block !important;
    background: transparent !important;
}

/* Override Bootstrap/Theme table styles */
.malazem-variations-styled .variations.table-bordered,
.malazem-variations-styled .variations.table-striped,
.malazem-variations-styled table.table-bordered,
.malazem-variations-styled table.table-striped {
    border: none !important;
    background: transparent !important;
}

.malazem-variations-styled .variations.table-bordered th,
.malazem-variations-styled .variations.table-bordered td,
.malazem-variations-styled .variations.table-striped th,
.malazem-variations-styled .variations.table-striped td,
.malazem-variations-styled table.table th,
.malazem-variations-styled table.table td {
    border: none !important;
    background: transparent !important;
}

.malazem-variations-styled .variations tbody tr:nth-child(odd),
.malazem-variations-styled .variations tbody tr:nth-child(even) {
    background: transparent !important;
}

/* ==========================================================================
   DROPDOWN MODE - Enhanced Select Styling
   ========================================================================== */

.malazem-variations-styled.mode-dropdown .variations tr {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 16px !important;
    background: transparent !important;
    border: none !important;
}

.malazem-variations-styled.mode-dropdown .variations th.label,
.malazem-variations-styled.mode-dropdown .variations td.label {
    display: block !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    font-weight: 600 !important;
    font-size: var(--mvs-font-size) !important;
    color: var(--mvs-text) !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    text-align: right !important;
}

.malazem-variations-styled.mode-dropdown .variations td.value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.malazem-variations-styled.mode-dropdown .variations select {
    width: 100% !important;
    padding: var(--mvs-padding) !important;
    font-size: var(--mvs-font-size) !important;
    font-family: inherit !important;
    color: var(--mvs-text) !important;
    background-color: #fff !important;
    border: 2px solid var(--mvs-border) !important;
    border-radius: var(--mvs-radius) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231a1a1a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 20px !important;
    padding-left: 40px !important;
    height: auto !important;
    min-height: 44px !important;
    box-shadow: none !important;
}

/* LTR direction for dropdown arrow */
html[dir="ltr"] .malazem-variations-styled.mode-dropdown .variations select,
body:not(.rtl) .malazem-variations-styled.mode-dropdown .variations select {
    background-position: right 12px center !important;
    padding-left: 16px !important;
    padding-right: 40px !important;
}

.malazem-variations-styled.mode-dropdown .variations select:hover {
    border-color: var(--mvs-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.malazem-variations-styled.mode-dropdown .variations select:focus {
    border-color: var(--mvs-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 135, 90, 0.15) !important;
    outline: none !important;
}

.malazem-variations-styled.mode-dropdown .variations select option {
    padding: 10px !important;
    font-size: var(--mvs-font-size) !important;
}

.malazem-variations-styled.mode-dropdown .variations select option:disabled {
    color: #adb5bd !important;
}

/* Reset link styling for dropdown mode */
.malazem-variations-styled.mode-dropdown .reset_variations {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 12px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--mvs-primary) !important;
    background: var(--mvs-secondary) !important;
    border: none !important;
    border-radius: var(--mvs-radius) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.malazem-variations-styled.mode-dropdown .reset_variations:hover {
    background: var(--mvs-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   BUTTON MODE - Pills/Buttons Layout
   ========================================================================== */

.malazem-variations-styled.mode-buttons .variations tr {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 20px !important;
    background: transparent !important;
    border: none !important;
}

.malazem-variations-styled.mode-buttons .variations th.label,
.malazem-variations-styled.mode-buttons .variations td.label {
    display: block !important;
    margin-bottom: 12px !important;
    padding: 0 !important;
    font-weight: 600 !important;
    font-size: var(--mvs-font-size) !important;
    color: var(--mvs-text) !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    text-align: right !important;
}

.malazem-variations-styled.mode-buttons .variations td.value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Hide original select in button mode, show our button wrapper */
.malazem-variations-styled.mode-buttons .variations select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Button container */
.malazem-vs-buttons-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--mvs-gap) !important;
}

/* Individual button */
.malazem-vs-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--mvs-padding) !important;
    font-size: var(--mvs-font-size) !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: var(--mvs-text) !important;
    background: var(--mvs-button-bg) !important;
    border: 2px solid var(--mvs-border) !important;
    border-radius: var(--mvs-radius) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    user-select: none !important;
    min-width: 60px !important;
    text-align: center !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    line-height: 1.4 !important;
    height: auto !important;
    margin: 0 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.malazem-vs-button:hover:not(.disabled):not(.selected) {
    background: var(--mvs-hover-bg) !important;
    border-color: var(--mvs-primary) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    color: var(--mvs-text) !important;
}

.malazem-vs-button.selected {
    background: var(--mvs-active-bg) !important;
    border-color: var(--mvs-active-bg) !important;
    color: var(--mvs-active-text) !important;
    box-shadow: 0 4px 12px rgba(0, 135, 90, 0.3) !important;
    transform: translateY(-1px) !important;
}

.malazem-vs-button.disabled {
    opacity: var(--mvs-disabled-opacity) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.malazem-vs-button.out-of-stock {
    position: relative !important;
}

.malazem-vs-button.out-of-stock.strikethrough::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 10% !important;
    right: 10% !important;
    height: 2px !important;
    background: var(--mvs-text) !important;
    transform: rotate(-10deg) !important;
    opacity: 0.7 !important;
}

.malazem-vs-button.out-of-stock.hide {
    display: none !important;
}

/* Reset button styling for button mode */
.malazem-variations-styled.mode-buttons .reset_variations {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 16px !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--mvs-primary) !important;
    background: var(--mvs-secondary) !important;
    border: 2px solid var(--mvs-border) !important;
    border-radius: var(--mvs-radius) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.malazem-variations-styled.mode-buttons .reset_variations:hover {
    background: var(--mvs-primary) !important;
    border-color: var(--mvs-primary) !important;
    color: #fff !important;
}

/* ==========================================================================
   Label Styling
   ========================================================================== */

.malazem-variations-styled .variations .label label,
.malazem-variations-styled .variations th label,
.malazem-variations-styled .variations td.label label {
    font-weight: 600 !important;
    font-size: var(--mvs-font-size) !important;
    color: var(--mvs-text) !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes mvs-pulse {
    0%, 100% { transform: scale(1) translateY(-1px); }
    50% { transform: scale(1.03) translateY(-1px); }
}

.malazem-vs-button.selected {
    animation: mvs-pulse 0.3s ease;
}

@keyframes mvs-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.malazem-variations-styled {
    animation: mvs-fadeIn 0.4s ease-out;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .malazem-vs-buttons-container {
        gap: 6px !important;
    }

    .malazem-vs-button {
        padding: 8px 14px !important;
        font-size: 13px !important;
        min-width: 50px !important;
    }

    .malazem-variations-styled.mode-dropdown .variations select {
        font-size: 16px !important; /* Prevent zoom on iOS */
        padding: 12px 40px 12px 14px !important;
    }

    html[dir="rtl"] .malazem-variations-styled.mode-dropdown .variations select,
    body.rtl .malazem-variations-styled.mode-dropdown .variations select {
        padding: 12px 14px 12px 40px !important;
    }
}

@media (max-width: 480px) {
    .malazem-vs-button {
        flex: 1 1 calc(50% - var(--mvs-gap) / 2) !important;
        min-width: unset !important;
    }

    .malazem-variations-styled.mode-buttons .variations tr,
    .malazem-variations-styled.mode-dropdown .variations tr {
        margin-bottom: 12px !important;
    }
}

/* ==========================================================================
   Theme/Plugin Compatibility Overrides
   ========================================================================== */

/* Override WooLentor styles */
.wl-addto-cart .malazem-variations-styled .variations,
.wl-addto-cart .malazem-variations-styled table {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
}

.wl-addto-cart .malazem-variations-styled .variations th,
.wl-addto-cart .malazem-variations-styled .variations td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* WooLentor Button/Variation Colors Override - wl-style-4 and all styles */
.wl-addto-cart .malazem-vs-button,
.wl-addto-cart.variable .malazem-vs-button,
.wl-addto-cart.wl-style-4 .malazem-vs-button,
.wl-addto-cart .malazem-variations-styled .malazem-vs-button,
.wl-addto-cart.variable.wl-style-4 .malazem-vs-button,
body .wl-addto-cart .malazem-vs-button {
    color: var(--mvs-text) !important;
    background: var(--mvs-button-bg) !important;
    background-color: var(--mvs-button-bg) !important;
    border: 2px solid var(--mvs-border) !important;
    border-color: var(--mvs-border) !important;
}

.wl-addto-cart .malazem-vs-button:hover:not(.disabled):not(.selected),
.wl-addto-cart.variable .malazem-vs-button:hover:not(.disabled):not(.selected),
.wl-addto-cart.wl-style-4 .malazem-vs-button:hover:not(.disabled):not(.selected),
body .wl-addto-cart .malazem-vs-button:hover:not(.disabled):not(.selected) {
    background: var(--mvs-hover-bg) !important;
    background-color: var(--mvs-hover-bg) !important;
    border-color: var(--mvs-primary) !important;
    color: var(--mvs-text) !important;
}

.wl-addto-cart .malazem-vs-button.selected,
.wl-addto-cart.variable .malazem-vs-button.selected,
.wl-addto-cart.wl-style-4 .malazem-vs-button.selected,
body .wl-addto-cart .malazem-vs-button.selected {
    background: var(--mvs-active-bg) !important;
    background-color: var(--mvs-active-bg) !important;
    border-color: var(--mvs-active-bg) !important;
    color: var(--mvs-active-text) !important;
}

/* Override WooLentor variation swatches */
.wl-addto-cart .woolentor-variation-swatches,
.wl-addto-cart .woolentor-variation-swatch-item,
.wl-addto-cart .woolentor-swatch-button {
    background: transparent !important;
    border: none !important;
}

/* WooLentor label colors */
.wl-addto-cart .malazem-variations-styled .variations .label label,
.wl-addto-cart .malazem-variations-styled .variations th label,
.wl-addto-cart .malazem-variations-styled .variations td.label label,
body .wl-addto-cart .malazem-variations-styled label {
    color: var(--mvs-text) !important;
}

/* WooLentor select dropdown colors */
.wl-addto-cart .malazem-variations-styled select,
.wl-addto-cart.variable .malazem-variations-styled select,
.wl-addto-cart.wl-style-4 .malazem-variations-styled select,
body .wl-addto-cart .malazem-variations-styled select {
    color: var(--mvs-text) !important;
    background-color: #fff !important;
    border-color: var(--mvs-border) !important;
}

.wl-addto-cart .malazem-variations-styled select:hover,
.wl-addto-cart .malazem-variations-styled select:focus {
    border-color: var(--mvs-primary) !important;
}

/* Reset variations link */
.wl-addto-cart .malazem-variations-styled .reset_variations,
body .wl-addto-cart .reset_variations {
    color: var(--mvs-primary) !important;
    background: var(--mvs-secondary) !important;
}

.wl-addto-cart .malazem-variations-styled .reset_variations:hover,
body .wl-addto-cart .reset_variations:hover {
    background: var(--mvs-primary) !important;
    color: #fff !important;
}

/* Override Elementor styles */
.elementor-widget-container .malazem-variations-styled .variations,
.elementor .malazem-variations-styled .variations {
    border: none !important;
    background: transparent !important;
}

.elementor-widget-container .malazem-variations-styled .variations th,
.elementor-widget-container .malazem-variations-styled .variations td,
.elementor .malazem-variations-styled .variations th,
.elementor .malazem-variations-styled .variations td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Override common theme table styles */
.malazem-variations-styled .variations th,
.malazem-variations-styled .variations td {
    vertical-align: top !important;
    border: none !important;
    background: transparent !important;
}

.malazem-variations-styled .variations tbody tr {
    background: transparent !important;
    border: none !important;
}

.malazem-variations-styled .variations tbody tr:hover {
    background: transparent !important;
}

/* WooCommerce default reset link override */
.malazem-variations-styled a.reset_variations {
    visibility: visible !important;
}

/* Hide reset button when disabled in settings */
.malazem-variations-styled a.reset_variations.mvs-hidden,
.malazem-variations-styled .reset_variations.mvs-hidden,
body .reset_variations.mvs-hidden {
    display: none !important;
    visibility: hidden !important;
}

/* Ensure proper stacking */
.malazem-variations-styled .variations td.value {
    position: relative !important;
}

/* Override Flatsome and similar themes */
.single-product .malazem-variations-styled .variations,
.product .malazem-variations-styled .variations {
    border: none !important;
    background: transparent !important;
}

/* Override Astra theme */
.ast-single-product .malazem-variations-styled .variations th,
.ast-single-product .malazem-variations-styled .variations td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Override OceanWP theme */
.owp-product .malazem-variations-styled .variations th,
.owp-product .malazem-variations-styled .variations td {
    border: none !important;
    background: transparent !important;
}

/* Override GeneratePress theme */
.woocommerce .malazem-variations-styled .variations th,
.woocommerce .malazem-variations-styled .variations td {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Override Storefront theme */
.storefront .malazem-variations-styled .variations th,
.storefront .malazem-variations-styled .variations td {
    border: none !important;
    background: transparent !important;
}

/* Fix for Bootstrap styles bleeding in */
.malazem-variations-styled .table > :not(caption) > * > * {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.malazem-variations-styled .table > tbody {
    border: none !important;
}