/* Deen Core – Variation Swatches Frontend Styles */

/* ── Override WooCommerce variations table → inline flex rows ── */
table.variations,
table.variations tbody {
    display: block !important;
    width: 100% !important;
    border: none !important;
}

table.variations tr {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
    border: none !important;
}

table.variations th.label {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 60px !important;
    padding: 0 4px 0 0 !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    border: none !important;
    vertical-align: unset !important;
}

table.variations td.value {
    display: flex !important;
    align-items: center !important;
    flex: 1 !important;
    padding: 0 !important;
    border: none !important;
    vertical-align: unset !important;
}

table.variations td.value .deen-vs-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
}

table.variations .reset_variations {
    display: none !important;
}

/* ── Swatch container ── */
.deen-vs-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ── Shop / archive loop swatches ──
   !important throughout: themes like Astra rebuild the loop card's own
   summary wrap with aggressive block/width rules on its child elements
   and links, which otherwise stack these one-per-line instead of a row. */
.deen-vs-loop-swatches {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 6px 0 10px !important;
}
.deen-vs-loop-swatches .deen-vs-swatch {
    flex: 0 0 auto !important;
}
.deen-vs-loop-swatch-link {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    text-decoration: none !important;
}

/* ── Base swatch ── */
.deen-vs-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1.5px solid #d1d5db;
    outline: none;
    background: #fff;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    user-select: none;
    box-sizing: border-box;
    text-decoration: none;
}

.deen-vs-swatch:focus-visible {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .35);
}

/* ── Shapes ── */
.deen-vs-shape-circle  .deen-vs-swatch { border-radius: 50%; }
.deen-vs-shape-square  .deen-vs-swatch { border-radius: 0; }
.deen-vs-shape-rounded .deen-vs-swatch { border-radius: 8px; }

/* default rounded for label buttons */
.deen-vs-type-label { border-radius: 6px; }

/* ── Sizes ── */
.deen-vs-size-small  .deen-vs-swatch { height: 26px; min-width: 26px; font-size: 11px; }
.deen-vs-size-medium .deen-vs-swatch { height: 36px; min-width: 36px; font-size: 13px; }
.deen-vs-size-large  .deen-vs-swatch { height: 44px; min-width: 44px; font-size: 15px; }

/* label swatches get horizontal padding instead of fixed width */
.deen-vs-size-small  .deen-vs-type-label { padding: 0 12px; }
.deen-vs-size-medium .deen-vs-type-label { padding: 0 16px; }
.deen-vs-size-large  .deen-vs-type-label { padding: 0 20px; }

/* color/image swatches are square */
.deen-vs-size-small  .deen-vs-type-color,
.deen-vs-size-small  .deen-vs-type-image { width: 30px; }
.deen-vs-size-medium .deen-vs-type-color,
.deen-vs-size-medium .deen-vs-type-image { width: 36px; }
.deen-vs-size-large  .deen-vs-type-color,
.deen-vs-size-large  .deen-vs-type-image { width: 44px; }

/* ── Color swatch ── */
.deen-vs-type-color {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

/* ── Image swatch ── */
.deen-vs-type-image {
    overflow: hidden;
    background: #f3f3f3;
}
.deen-vs-type-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Label swatch ── */
.deen-vs-type-label {
    background: #fff;
    color: #374151;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: .01em;
}

/* ── Hover ── */
.deen-vs-swatch:not(.disabled):hover {
    border-color: #4f46e5;
    color: #4f46e5;
}
.deen-vs-type-color:not(.disabled):hover,
.deen-vs-type-image:not(.disabled):hover {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4f46e5;
    border-color: transparent;
}

/* ── Selected state ── */
.deen-vs-type-label.selected {
    background: #222;
    color: #fff;
    border-color: #222;
}

.deen-vs-type-color.selected,
.deen-vs-type-image.selected {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4f46e5;
    border-color: transparent;
}

/* ── Disabled / out-of-stock ── */
.deen-vs-swatch.disabled {
    cursor: not-allowed;
}

.deen-vs-oos-crossed {
    opacity: .6;
}
.deen-vs-oos-cross-mark {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom right,
            transparent calc(50% - 1.25px),
            #ef4444 calc(50% - 1.25px),
            #ef4444 calc(50% + 1.25px),
            transparent calc(50% + 1.25px)
        ),
        linear-gradient(
            to top right,
            transparent calc(50% - 1.25px),
            #ef4444 calc(50% - 1.25px),
            #ef4444 calc(50% + 1.25px),
            transparent calc(50% + 1.25px)
        );
    border-radius: inherit;
    pointer-events: none;
}

.deen-vs-oos-grayed {
    opacity: .3;
    filter: grayscale(1);
}

.deen-vs-oos-hidden {
    display: none !important;
}

/* ── Tooltip base ── */
.deen-vs-swatch[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    background: #111827;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 4px 9px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 9999;
    line-height: 1.4;
    /* reset any inherited position values */
    top: auto; bottom: auto; left: auto; right: auto;
}
.deen-vs-swatch[data-tooltip]::after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s ease;
    z-index: 9999;
    top: auto; bottom: auto; left: auto; right: auto;
}
.deen-vs-swatch[data-tooltip]:hover::before,
.deen-vs-swatch[data-tooltip]:focus-visible::before,
.deen-vs-swatch[data-tooltip]:hover::after,
.deen-vs-swatch[data-tooltip]:focus-visible::after { opacity: 1; }

/* ── Direction: top ── */
.deen-vs-tip-top .deen-vs-swatch[data-tooltip]::before {
    bottom: calc(100% + 8px);
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(4px);
}
.deen-vs-tip-top .deen-vs-swatch[data-tooltip]:hover::before,
.deen-vs-tip-top .deen-vs-swatch[data-tooltip]:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}
.deen-vs-tip-top .deen-vs-swatch[data-tooltip]::after {
    bottom: calc(100% + 2px);
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-top-color: #111827;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

/* ── Direction: bottom ── */
.deen-vs-tip-bottom .deen-vs-swatch[data-tooltip]::before {
    top: calc(100% + 8px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(-4px);
}
.deen-vs-tip-bottom .deen-vs-swatch[data-tooltip]:hover::before,
.deen-vs-tip-bottom .deen-vs-swatch[data-tooltip]:focus-visible::before {
    transform: translateX(-50%) translateY(0);
}
.deen-vs-tip-bottom .deen-vs-swatch[data-tooltip]::after {
    top: calc(100% + 2px);
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-bottom-color: #111827;
    border-top-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}

/* ── Direction: left ── */
.deen-vs-tip-left .deen-vs-swatch[data-tooltip]::before {
    right: calc(100% + 8px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(4px);
}
.deen-vs-tip-left .deen-vs-swatch[data-tooltip]:hover::before,
.deen-vs-tip-left .deen-vs-swatch[data-tooltip]:focus-visible::before {
    transform: translateY(-50%) translateX(0);
}
.deen-vs-tip-left .deen-vs-swatch[data-tooltip]::after {
    right: calc(100% + 2px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-left-color: #111827;
    border-right-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/* ── Direction: right ── */
.deen-vs-tip-right .deen-vs-swatch[data-tooltip]::before {
    left: calc(100% + 8px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-4px);
}
.deen-vs-tip-right .deen-vs-swatch[data-tooltip]:hover::before,
.deen-vs-tip-right .deen-vs-swatch[data-tooltip]:focus-visible::before {
    transform: translateY(-50%) translateX(0);
}
.deen-vs-tip-right .deen-vs-swatch[data-tooltip]::after {
    left: calc(100% + 2px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    border-right-color: #111827;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

/* ── Wishlist — Add to Wishlist button (replaces Add to Cart for OOS swatches) ── */
.deen-vs-wl-atc-btn {
    display: none; /* shown by JS only when an OOS swatch is selected */
    width: 100%;
    padding: 14px 20px;
    font-size: inherit;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
    vertical-align: middle;
}
.deen-vs-wl-atc-btn svg {
    pointer-events: none;
}

/* ── Wishlist heart icon on OOS swatches ── */
/* No background — just an outlined heart SVG. Size/color/position from Deen_VS_Frontend::inline_css(). */
.deen-vs-wl-badge {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    background: transparent;
    padding: 0;
    border: none;
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: auto;
    box-sizing: content-box;
}
.deen-vs-swatch:hover .deen-vs-wl-badge,
.deen-vs-swatch:focus-visible .deen-vs-wl-badge,
.deen-vs-wl-badge.deen-vs-wl-active {
    opacity: 1;
}
.deen-vs-wl-badge:hover {
    transform: scale(1.2);
}
.deen-vs-wl-badge svg {
    display: block;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    overflow: visible;
}
.deen-vs-wl-badge.deen-vs-wl-active svg {
    fill: currentColor;
}

/* ── OOS tooltip — always top, always visible (overrides direction + global off) ── */
/* Higher specificity (3 classes) beats direction variants (2 classes), so no !important needed */
.deen-vs-swatch.disabled[data-tooltip]::before {
    bottom: calc(100% + 8px);
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(4px);
}
.deen-vs-swatch.disabled[data-tooltip]:hover::before,
.deen-vs-swatch.disabled[data-tooltip]:focus-visible::before {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.deen-vs-swatch.disabled[data-tooltip]::after {
    bottom: calc(100% + 2px);
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-top-color: #111827;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-right-color: transparent;
}
.deen-vs-swatch.disabled[data-tooltip]:hover::after,
.deen-vs-swatch.disabled[data-tooltip]:focus-visible::after {
    opacity: 1;
}

/* ── Clear / reset link ── */
.deen-vs-clear {
    font-size: 11px;
    color: #9ca3af;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 4px;
    align-self: center;
}
.deen-vs-clear:hover { color: #374151; }