/*!
Theme Name: Sakuren Design Academy
Theme URI: https://onixstudio.ir/
Author: Onix Stuio Team
Author URI: https://onixstudio.ir/
Description: Launch your store with Onix. We proudly introduce Onix, with a modern and clean design that will effortlessly match your brand. Onix has been developed from the ground up with clean code for optimal performance. You’ll get a mobile-optimized theme that looks and works great on any device and comes with plenty of customization options as well. Discover the theme that will transform your online business.
Version: 1.0.0
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

.coupon-error-notice {
   margin: 0;
   color: var(--space-red-500);
   font-size: 0.75rem;
}

.cart-checkout-sticky {
   margin-top: -97px;
}
.dot-4 {
   font-variation-settings: "dots" 4;
}

.course-content p:last-child {
   margin-bottom: 0;
}

.shadow-3xl {
   box-shadow: 0 10px 26px rgba(0, 0, 0, 0.05);
}

.woocommerce div.product form.cart .variations td.value select {
   display: none;
}

.reset_variations {
   display: none;
}

.rating-star:hover .rating-star-item {
   color: var(--space-amber-500);
   text-shadow: var(--space-amber-500) 0 0 20px;
}

.rating-star .rating-star-item:hover ~ .rating-star-item {
   color: var(--space-silver-200);
   text-shadow: none;
   transition: color 200ms, text-shadow 200ms;
   transition-delay: 0;
}

.reviews-sidebar {
   top: 182px;
}

strong {
   font-weight: 600;
   color: var(--space-silver-900);
}

#commentform .form-submit {
   margin-bottom: 0;
}

/* Toast Notification Styles */
.woocommerce-notices-wrapper {
   position: fixed; /* Fixed position to stay on screen */
   top: 40px; /* Distance from the top */
   left: 50%; /* Center horizontally */
   transform: translateX(-50%); /* Adjust to center */
   z-index: 9999; /* Ensure it appears above other elements */
   max-width: 350px; /* Maximum width of the toast */
   display: flex; /* Use flexbox for alignment */
   flex-direction: column; /* Stack notices vertically */
   gap: 10px; /* Space between notices */
}

/* Individual Notice Styles */
.woocommerce-notice {
   background-color: #ffffff; /* White background for contrast */
   border-radius: 8px; /* Rounded corners */
   padding: 15px; /* Padding inside the notice */
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
   transition: opacity 0.5s ease, transform 0.5s ease; /* Smooth transitions */
   opacity: 0; /* Start hidden */
   transform: translateY(-10px); /* Slightly move up for entrance effect */
}

/* Show the notice */
.woocommerce-notice.show {
   opacity: 1; /* Fully visible */
   transform: translateY(0); /* Reset position */
}

/* Success Notice Styles */
.woocommerce-notice.success {
   border-left: 5px solid #28a745; /* Green left border for success */
   color: #155724; /* Dark green text */
}

/* Error Notice Styles */
.woocommerce-notice.error {
   border-left: 5px solid #dc3545; /* Red left border for error */
   color: #721c24; /* Dark red text */
}

/* Info Notice Styles */
.woocommerce-notice.info {
   border-left: 5px solid #17a2b8; /* Blue left border for info */
   color: #0c5460; /* Dark blue text */
}

/* Warning Notice Styles */
.woocommerce-notice.warning {
   border-left: 5px solid #ffc107; /* Yellow left border for warning */
   color: #856404; /* Dark yellow text */
}

.wave {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translateX(-50%) translateY(-50%);
   display: block;
   width: 120px;
   height: 120px;
   background: var(--space-accent-1);
   border-radius: 50%;
   animation: waves 2s ease-in-out infinite;
}

@keyframes waves {
   0% {
      transform: translate(-50%, -50%) scale(0.2, 0.2);
      opacity: 1;
   }
   100% {
      transform: translate(-50%, -50%) scale(1.2, 1.2);
      opacity: 0;
   }
}

.lazy-load {
   display: block;
   width: 100%; /* Adjust as needed */
   height: auto; /* Maintain aspect ratio */
   position: relative;
   overflow: hidden;
}

.lazy-load::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(110deg, #e3e5e8 25%, #f1f2f4 50%, #e3e5e8 75%);
   background-size: 200% 100%;
   animation: loading 1.5s infinite;
   z-index: 1; /* Ensure it is above the image */
}

@keyframes loading {
   0% {
      background-position: 200% 0;
   }
   100% {
      background-position: 0 0;
   }
}

.lazy-load.loaded::before {
   display: none; /* Hide skeleton when image is loaded */
}

.top-full {
   top: 100%;
}

.border-y-solid {
   border-top-style: solid;
   border-bottom-style: solid;
}