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

/* Label row — shows selected value */
.binndu-swatch-label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    margin-bottom: 8px;
    display: block;
}

.binndu-swatch-selected {
    color: #5c1e3a;
    font-weight: 700;
    font-size: 12px;
}

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

/* ── Color Circle Swatch ── */
.binndu-swatch--color {
    width: 36px;
    height: 36px;
    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(232,114,58,.2);
}

.binndu-swatch--color.active {
    border-color: #5c1e3a;
    box-shadow: 0 0 0 3px rgba(232,114,58,.25);
    transform: scale(1.1);
}

/* Tooltip on hover */
.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;
}

/* White color needs dark border */
.binndu-swatch--color[style*="#f9fafb"],
.binndu-swatch--color[style*="#fffff0"],
.binndu-swatch--color[style*="#faf7f0"],
.binndu-swatch--color[style*="#fffbeb"],
.binndu-swatch--color[style*="#ffb6c1"] {
    border-color: #d1d5db !important;
}

/* ── Size Pill Swatch ── */
.binndu-swatch--size {
    min-width: 52px;
    height: 40px;
    padding: 0 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-size: 16px;
    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: #fff7f4;
    color: #5c1e3a;
}

.binndu-swatch--size.active {
    border-color: #5c1e3a;
    background: #5c1e3a;
    color: #fff;
    box-shadow: 0 2px 8px rgba(232,114,58,.3);
}

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

/* ── Override WC variations table to use flex ── */
.sp-details table.variations {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    border: none !important;
}

.sp-details table.variations tr {
    display: flex !important;
    flex-direction: column !important;
}

/* Show th.label as heading */
.sp-details table.variations td.label,
.sp-details table.variations th.label {
    display: block !important;
    padding: 0 0 6px 0 !important;
    border: none !important;
    text-align: left !important;
    width: 100% !important;
}

.sp-details table.variations td.label label,
.sp-details table.variations th.label label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #374151 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    display: block !important;
}

.sp-details table.variations td.value {
    display: block !important;
    padding: 0 !important;
}

/* Hide original select completely */
.sp-details table.variations select {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Reset link */
.sp-details .reset_variations {
    display: inline-block !important;
    font-size: 12px !important;
    color: #5c1e3a !important;
    text-decoration: underline !important;
    margin-top: 4px !important;
    cursor: pointer !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Variation price */
.sp-details .woocommerce-variation-price .price {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #5c1e3a !important;
}

.sp-details .woocommerce-variation-price .price del {
    font-size: 16px !important;
    color: #9ca3af !important;
    font-weight: 400 !important;
}

/* Cart row — qty + button */
.sp-details .cart {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.sp-details .quantity {
    display: flex !important;
    align-items: center !important;
}

.sp-details .quantity input[type="number"] {
    width: 80px !important;
    height: 48px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    padding: 0 !important;
}

.sp-details .quantity input:focus {
    outline: none !important;
    border-color: #5c1e3a !important;
    box-shadow: 0 0 0 3px rgba(232,114,58,.12) !important;
}

.sp-details .single_add_to_cart_button {
    flex: 1 !important;
    min-width: 160px !important;
    height: 48px !important;
    padding: 0 24px !important;
    background: #5c1e3a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .2s !important;
}

.sp-details .single_add_to_cart_button:hover {
    background: #d4612b !important;
}

.sp-details .single_add_to_cart_button.disabled,
.sp-details .single_add_to_cart_button[disabled] {
    background: #d1d5db !important;
    cursor: not-allowed !important;
}