/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* --- CUSTOM WOOCOMMERCE ERROR ALERTS --- */

/* 1. Container Styling: Bold Red Alert Box */
.woocommerce-error {
    background-color: #fee2e2 !important; /* Light red background */
    border: 1px solid #ef4444 !important; /* Red border */
    border-left: 5px solid #dc2626 !important; /* Thick red accent on left */
    color: #7f1d1d !important; /* Dark red text */
    padding: 16px 20px !important;
    margin: 0 0 20px 0 !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    list-style: none !important; /* Remove bullet points */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important; /* Subtle shadow */
    
    /* Animation: Shake to grab attention */
    animation: sotpErrorShake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* 2. Add an Icon Before the Text */
.woocommerce-error li {
    display: flex;
    align-items: center;
}

.woocommerce-error li::before {
    content: "⚠️"; /* Warning Emoji */
    margin-right: 10px;
    font-size: 18px;
}

/* 3. Shake Animation Keyframes */
@keyframes sotpErrorShake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* 4. Ensure it floats above other elements if needed */
.woocommerce-notices-wrapper {
    width: 100%;
    z-index: 9999;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}