/* 
  STS Store Custom CSS
  Contains logic for Custom Cart Buttons and Fixed Notification System
*/

/* =========================================
   1. STS Custom Add to Cart Button
   ========================================= */

/* Button Wrapper */
.sts-loop-wrapper {
    display: inline-block;
}

/* Hide default injected 'View Cart' link */
.sts-loop-wrapper a.added_to_cart {
    display: none !important;
}

/* STS Add to Cart Button Base */
.sts-loop-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 35px;
    padding: 5px 10px;
    background-image: linear-gradient(135deg, rgb(10, 10, 31) 0%, rgb(9, 7, 30) 100%);
    background-color: grey;
    color: rgb(255, 255, 255);
    border-radius: 6px;
    border: none;
    font-size: 15px;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

@media (max-width: 767px) {
    .sts-loop-cart-btn {
        border-radius: 6px 6px 6px 6px;
        padding: 10px 10px 10px 10px;
    }
}

/* Hover State */
.sts-loop-cart-btn:hover {
	background-image: none;
    background-image: linear-gradient(135deg, #1A1A3E 0%, #270076 100%);
    color: #fff;
}

/* STS Icon Container (Masked Icon) */
.sts-btn-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #fff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM408 168h-48v-40c0-8.837-7.163-16-16-16h-16c-8.837 0-16 7.163-16 16v40h-48c-8.837 0-16 7.163-16 16v16c0 8.837 7.163 16 16 16h48v40c0 8.837 7.163 16 16 16h16c8.837 0 16-7.163 16-16v-40h48c8.837 0 16-7.163 16-16v-16c0-8.837-7.163-16-16-16z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M504.717 320H211.572l6.545 32h268.418c15.401 0 26.816 14.301 23.403 29.319l-5.517 24.276C523.112 414.668 536 433.828 536 456c0 31.202-25.519 56.444-56.824 55.994-29.823-.429-54.35-24.631-55.155-54.447-.44-16.287 6.085-31.049 16.803-41.548H231.176C241.553 426.165 248 440.326 248 456c0 31.813-26.528 57.431-58.67 55.938-28.54-1.325-51.751-24.385-53.251-52.917-1.158-22.034 10.436-41.455 28.051-51.586L93.883 64H24C10.745 64 0 53.255 0 40V24C0 10.745 10.745 0 24 0h102.529c11.401 0 21.228 8.021 23.513 19.19L159.208 64H551.99c15.401 0 26.816 14.301 23.403 29.319l-47.273 208C525.637 312.246 515.923 320 504.717 320zM408 168h-48v-40c0-8.837-7.163-16-16-16h-16c-8.837 0-16 7.163-16 16v40h-48c-8.837 0-16 7.163-16 16v16c0 8.837 7.163 16 16 16h48v40c0 8.837 7.163 16 16 16h16c8.837 0 16-7.163 16-16v-40h48c8.837 0 16-7.163 16-16v-16c0-8.837-7.163-16-16-16z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Added State: Checkmark SVG */
.sts-loop-cart-btn.added .sts-btn-icon {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
}

/* Added State - Maintain Dark Look, change Icon only */
.sts-loop-cart-btn.added {
    background-color: rgb(51, 51, 51);
	background-image: none;
    cursor: default;
    opacity: 0.8;
}


/* =========================================
   2. STS Fixed Notification System
   ========================================= */

/* STS Close Notice (The X) */
.sts-close-notice {
    position: absolute;
    top: 27px;
    right: 15px;
    transform: translateY(-50%);
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: #46b450; WooCommerce Standard Green */
	border: 1px solid #46b450;
    color: #46b450;
    border-radius: 50%;
    transition: background 0.3s ease;
}

.sts-close-notice:hover {
    background: #3a9c42;
	color: #fff;
}

/* Ensure WooCommerce Message has relative positioning for the X */
.woocommerce-message {
    position: relative !important;
    padding-right: 50px !important; /* Make space for the X */
}

.woocommerce .elementor-widget-container .woocommerce-message .button, .woocommerce .woocommerce-info .button, .woocommerce .woocommerce-error .button {
    margin-right: 30px;
}

/* 1. Bar Container - Fixed Position BELOW Header */
.elementor-widget-container .e-woocommerce-notices-wrapper:has(.woocommerce-message),
.elementor-widget-container .e-woocommerce-notices-wrapper:has(.woocommerce-info),
.elementor-widget-container .e-woocommerce-notices-wrapper:has(.woocommerce-error) {
    position: fixed !important;
    top: 96px; /* Below the header */
    left: 0;
    width: 100%;
    z-index: 99998; /* Just below header z-index if needed, or above content */
    display: flex;
    justify-content: center;
    height: 0; /* Wrapper is invisible */
}

@media (max-width: 767px) {
	.elementor-widget-container .e-woocommerce-notices-wrapper:has(.woocommerce-message),
	.elementor-widget-container .e-woocommerce-notices-wrapper:has(.woocommerce-info),
	.elementor-widget-container .e-woocommerce-notices-wrapper:has(.woocommerce-error) {
    	top: 48px;
  	}
}

/* 2. Message Box Styling */
.elementor-widget-container .woocommerce-message,
.elementor-widget-container .woocommerce-info,
.elementor-widget-container .woocommerce-error {
    /* Dimensions */
    width: 1295px !important;
    max-width: 100% !important;
    min-height: 57px; 
    margin: 0 !important;
}

/* 3. THE PUSH - Clean White Space AFTER Global Header */
body:has(.elementor-widget-container .woocommerce-message) [data-elementor-type="header"]::after,
body:has(.elementor-widget-container .woocommerce-info) [data-elementor-type="header"]::after,
body:has(.elementor-widget-container .woocommerce-error) [data-elementor-type="header"]::after {
    content: "";
    display: block;
    width: 100%;
    height: 57px; /* The Push Space */
    background: #fff;
    transition: height 0.3s ease; /* Smooth animation */
}

/* 4. Responsive & Small Screens */
@media (max-width: 1315px) {
    .elementor-widget-container .woocommerce-message,
    .elementor-widget-container .woocommerce-info,
    .elementor-widget-container .woocommerce-error {
        width: 100% !important;
        border-radius: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}