/* Ensure the variations table has no margin at the bottom */
.woocommerce div.product form.cart .variations {
    margin-bottom: 0;
}




/* Add new styles to the .quantinoticer */
.quantinoticer {
    border: 4px solid #E4EC36;
    background-color: #efffa9;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    margin-top: 0;
}

/* Increase font size for the icon inside .quantinoticer */
.quantinoticer .et-pb-icon {
    width: 50px;
    font-size: 36px !important; /* Increase font size as requested */
    line-height: 1.5;
    color: #001F58;
}

.quantinoticer div {
    flex-grow: 1;
}

.free-shipping-message, .limitnoticer {
    margin: 0;
    padding-left: 10px;
    color: #555;
}

/* Custom styling for the attribute selection boxes */
.pack-of-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pack-of-boxes .box {
    background-color: #001F58;
    color: #ffffff;
    padding: 10px;
    cursor: pointer;
    border: 4px solid transparent; /* Followed your instruction: 4px solid transparent */
    width: 48%;
    text-align: center;
    border-radius: 10px;
    transition: box-shadow 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

.pack-of-boxes .box.selected {
    border: 4px solid #E4EC36; /* Active border color */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow for selected */
}

.pack-of-boxes .box:hover {
    /* No more changes to border on hover, following your instructions */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3); /* Subtle hover shadow effect */
}

/* Style for the quantity input wrapper */
body .woocommerce .quantity {
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: 120px; /* Adjust as needed */
    margin: 0 auto !important;
    height: 40px !important;
}

/* Style for the minus button */
body .woocommerce .quantity .minus {
    background-color: #f3f3f3 !important;
    border: 1px solid #ccc !important;
    width: 30px !important;
    height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    user-select: none !important;
}

/* Style for the quantity input itself */
.et_pb_wc_add_to_cart .quantity input.qty {
    width: 60px !important;
    height: 40px !important;
    text-align: center !important;
    font-size: 16px !important;
    border: 1px solid #ccc !important;
    border-left: none !important;
    border-right: none !important;
    -moz-appearance: textfield; /* For Firefox */
    height: 40px !important;
}

/* Remove the default arrows (spinners) on quantity input for all browsers */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Style for the plus button */
body .woocommerce .quantity .plus {
    background-color: #f3f3f3 !important;
    border: 1px solid #ccc !important;
    width: 30px !important;
    height: 40px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    user-select: none !important;
}

/* Optional: Add some hover and focus effects for interactivity */
body .woocommerce .quantity .plus:hover, body .woocommerce .quantity .minus:hover {
    background-color: #e3e3e3 !important;
}

body .woocommerce .quantity input[type="number"]:focus {
    outline: none !important;
    border-color: #0071a1 !important; /* Optional: accent color */
}

.single-product .woocommerce-variation-add-to-cart {margin-top:20px;}
.single-product .woocommerce-variation-add-to-cart .minus, .single-product .woocommerce-variation-add-to-cart .plus {height:40px !important; cursor:pointer;}
/* Hide the span inside .variations .value */
.variations .value span {
    display: none !important;
}

/* Hide the reset variations button/link */
.variations .value .reset_variations {
    display: none !important;
}
.woocommerce-variation-availability p {font-weight:700; color:#000000 !important;}