/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

/* onsale badge adjustment */
.woocommerce .products .badge.onsale, 
.woocommerce.products .badge.onsale {
    position: absolute;
    top: 10px; /* Adjust vertical position */
    left: 10px; /* Adjust horizontal position */
    background-color: #ff6b00 !important; /* Ensure background color applies */
    color: #ffffff !important; /* Force white text */
    font-size: 14px; /* Adjust font size */
    padding: 5px 10px; /* Adjust padding */
    border-radius: 50px; /* Make it rounded */
}

/* Proceed to Checkout adjustment */
.woocommerce .wc-proceed-to-checkout a.checkout-button {
    padding: 15px 35px !important; /* Adjust padding for thinner look */
    height: 25px !important; /* Adjust height */
    font-size: 16px !important; /* Adjust text size */
    border-radius: 30px !important; /* Reduce border radius */
    width: fit-content !important; /* Adjust width */
}

/* Reduce width of the quantity box */
.woocommerce .quantity {
    width: 130px !important;  /* Adjust width as needed */
}

/* Reduce width of the input field */
.woocommerce .quantity input.qty {
    width: 50px !important; /* Adjust width of the number input */
    text-align: center; /* Keep number centered */
    padding: 0px; /* Reduce padding for a compact look */
}

@media (max-width: 991px) and (min-width: 420px) {
    /* Reduce the height of the quantity box */
    .woocommerce .quantity input.qty {
        height: 30px !important;  /* Adjust height as needed */
        font-size: 14px;  /* Adjust font size for better fit */
        padding: 3px;  /* Reduce padding */
    }

    /* Reduce the height of the quantity container */
    .woocommerce .quantity {
        min-height: 30px !important;  /* Adjust as needed */
        align-items: center;  /* Keep elements aligned */
    }

    /* Adjust the plus and minus buttons */
    .woocommerce .quantity .action {
        height: 30px !important;  /* Match input height */
        line-height: 30px !important;  /* Center align text/icons */
    }
}

@media (max-width: 768px) and (min-width: 420px) {
    /* Reduce width of the quantity box */
.woocommerce .quantity {
    width: 80px !important;  /* Adjust width as needed */
	}
	
   /* Reduce the height of the quantity box */
    .woocommerce .quantity input.qty {
        height: 20px !important;  /* Adjust height as needed */
        font-size: 12px;  /* Adjust font size for better fit */
        padding: 5px;  /* Reduce padding */
    }

/* Reduce width of the input field */
.woocommerce .quantity input.qty {
    width: 40px !important; /* Adjust width of the number input */
    text-align: center; /* Keep number centered */
    padding: 0px; /* Reduce padding for a compact look */
}
	
 /* Adjust the plus and minus buttons */
    .woocommerce .quantity .action {
        height: 20px !important;  /* Match input height */
        line-height: 30px !important;  /* Center align text/icons */
    }
}


@media (max-width: 767px) {
    #woofc-count {
        position: fixed !important;
        top: 80% !important;
        right: 30px !important; /* Adjust distance from right */
        transform: translateY(-130%) !important; /* Center vertically */
        left: auto !important;
        z-index: 9999 !important; /* Ensure visibility */
    }
}

@media (max-width: 478px) {
    #woofc-count {
        right: 15px !important; /* Adjust for smaller screens */
    }
	
}


/*WPC Fly Cart Custom Styling*/

#wpc-fly-cart {
    background: #ffffff; /* White background */
    color: #1e1e1e; /* Dark text */
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow */
}
.header-cart-icon {
    font-size: 20px; /* Adjust size */
    color: #1e1e1e; /* Dark icon */
    transition: color 0.3s ease-in-out;
}

.header-cart-icon:hover {
    color: #3CB371; /* Green hover effect */
}
#wpc-fly-cart .wpc-fly-cart-buttons a {
    background: #3CB371; /* Green */
    color: #ffffff; /* White text */
    border-radius: 8px; /* Rounded buttons */
    padding: 10px 15px;
}

#wpc-fly-cart .wpc-fly-cart-buttons a:hover {
    background: #2E8B57; /* Darker green on hover */
}
@media (max-width: 768px) {
    #wpc-fly-cart {
        width: 90%; /* Adjust width for mobile */
        height: auto;
        bottom: 10px; /* Position adjustment */
    }
}