/**
 * Backorder Feature Styles
 * Netable Digital Agency
 */

/* Orange color for backorder selected swatches */
.swatch-option.backorder-selected {
    border-color: #ff8c00 !important;
    outline: 2px solid #ff8c00 !important;
}

.swatch-option.color.backorder-selected::after,
.swatch-option.text.backorder-selected::after {
    border-color: #ff8c00 !important;
}

/* Backorder stock status */
.stock.backorder {
    color: #ff8c00;
    font-weight: 600;
}

.stock.backorder span {
    color: #ff8c00;
}

/* Backorder button styling */
button#product-addtocart-button.backorder-btn {
    background-color: #ff8c00;
    border-color: #ff8c00;
}

button#product-addtocart-button.backorder-btn:hover {
    background-color: #e67e00;
    border-color: #e67e00;
}

/* Backorder note below button */
.backorder-note {
    display: none;
    margin-top: 10px;
    padding: 12px 15px;
    background-color: #fff3e0;
    border-left: 4px solid #ff8c00;
    color: #663c00;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px;
}

.backorder-note:before {
    content: "\f05a";
    font-family: "FontAwesome";
    margin-right: 8px;
    color: #ff8c00;
}

/* Backorder label in cart/minicart */
.backorder-label {
    display: inline-block;
    background-color: #fff3e0; /* light orange */
    color: #4a2a00; /* dark brown for contrast */
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
    border: 1px solid #ff8c00; /* subtle orange border */
}

/* Minicart backorder label */
.minicart-items .product-item-name .backorder-label {
    display: inline-block;
    margin-left: 5px;
}

/* Cart page backorder label */
.cart.table-wrapper .product-item-name .backorder-label {
    display: inline-block;
    margin-left: 8px;
}

/* Checkout backorder label */
.opc-block-summary .product-item-name .backorder-label {
    display: inline-block;
    margin-left: 5px;
    font-size: 10px;
    padding: 2px 6px;
}

/* Order summary backorder label */
.order-details-items .product-item-name .backorder-label {
    display: inline-block;
    margin-left: 8px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .backorder-note {
        font-size: 13px;
        padding: 10px 12px;
    }
    
    .backorder-label {
        font-size: 10px;
        padding: 2px 6px;
    }
}