/* ================================================================
   BINNDU — Variation Swatches CSS v2
   File: assets/css/swatches.css
   ================================================================ */

/* ── Label row ── */
.binndu-swatch-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 10px;
    display: block;
}
.binndu-swatch-selected {
    color: #5C1E3A;
    font-weight: 700;
    font-size: 13px;
}

/* ── Items row ── */
.binndu-swatch-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

/* ── Color Circle ── */
.binndu-swatch--color {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2.5px solid #e5e7eb;
    cursor: pointer;
    position: relative;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    flex-shrink: 0;
    padding: 0;
    outline: none;
}
.binndu-swatch--color:hover {
    transform: scale(1.15);
    border-color: #5C1E3A;
    box-shadow: 0 0 0 3px rgba(92,30,58,.18);
}
.binndu-swatch--color.active {
    border-color: #5C1E3A;
    box-shadow: 0 0 0 3px rgba(92,30,58,.22);
    transform: scale(1.1);
}

/* Tooltip */
.binndu-swatch--color::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    z-index: 10;
}
.binndu-swatch--color::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #111827;
    opacity: 0;
    transition: opacity .15s;
    z-index: 10;
}
.binndu-swatch--color:hover::after,
.binndu-swatch--color:hover::before { opacity: 1; }

/* Light colors need visible border */
.binndu-swatch--color[style*="#f8fafc"],
.binndu-swatch--color[style*="#fffff0"],
.binndu-swatch--color[style*="#faf7f0"],
.binndu-swatch--color[style*="#fffbeb"] {
    border-color: #d1d5db !important;
}

/* Checkmark on active color */
.binndu-swatch--color.active::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
    bottom: auto;
    left: auto;
    transform: none;
    background: none;
    border-radius: 0;
    padding: 0;
    pointer-events: none;
    opacity: 1;
    width: auto;
}
.binndu-swatch--color.active::before { display: none; }

/* ── Size Pill ── */
.binndu-swatch--size {
    min-width: 50px;
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    white-space: nowrap;
}
.binndu-swatch--size:hover {
    border-color: #5C1E3A;
    background: #fdf2f6;
    color: #5C1E3A;
}
.binndu-swatch--size.active {
    border-color: #5C1E3A;
    background: #5C1E3A;
    color: #fff;
    box-shadow: 0 2px 8px rgba(92,30,58,.25);
}

/* Disabled swatch */
.binndu-swatch.disabled {
    opacity: .35;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: line-through;
}

/* ── WC Table override ── */
.sp-details table.variations,
.woocommerce div.product form.variations_form table.variations {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    border: none !important;
    margin-bottom: 12px !important;
}
.sp-details table.variations tr,
.woocommerce div.product form.variations_form table.variations tr {
    display: flex !important;
    flex-direction: column !important;
}
.sp-details table.variations th.label label,
.sp-details table.variations td.label label,
.woocommerce div.product form.variations_form table.variations td.label {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    padding: 0 0 6px 0 !important;
    border: none !important;
    display: block !important;
}
.sp-details table.variations td.value,
.woocommerce div.product form.variations_form table.variations td.value {
    display: block !important;
    padding: 0 !important;
}

/* Hide original selects */
.sp-details table.variations select,
.woocommerce div.product form.variations_form table.variations select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}

/* Reset link */
.reset_variations {
    font-size: 12px !important;
    color: #5C1E3A !important;
    text-decoration: underline !important;
    margin-top: 6px !important;
    display: inline-block !important;
    cursor: pointer !important;
}

/* ── Main image fade transition ── */
#spMainImg,
.woocommerce-product-gallery__image img {
    transition: opacity .15s ease !important;
}

/* ── Gallery thumb active ── */
.sp-gallery__thumb.active,
.sp-gallery__thumb:focus {
    border-color: #5C1E3A !important;
    box-shadow: 0 0 0 2px rgba(92,30,58,.2) !important;
}

/* ── Variation price update ── */
.woocommerce-variation-price .price {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #5C1E3A !important;
}
.woocommerce-variation-price .price del {
    font-size: 15px !important;
    color: #9ca3af !important;
    font-weight: 400 !important;
}
.woocommerce-variation-price .price ins {
    text-decoration: none !important;
}

/* Stock status */
.woocommerce-variation-availability .stock {
    font-size: 13px !important;
    font-weight: 600 !important;
}
.woocommerce-variation-availability .in-stock  { color: #16a34a !important; }
.woocommerce-variation-availability .out-of-stock { color: #ef4444 !important; }