/* Add custom CSS styles below */ 
/* Original Tme9 CSS1 Styles */
@keyframes alternateRotate {
    0%, 100% { 
        transform: rotate(-3deg); 
        box-shadow: none;
        color: initial;
    }
    50% { 
        transform: rotate(3deg); 
        box-shadow: 0 5px 15px rgba(234, 99, 38, 0.4);
        color: #EA6326;
    }
}

.p--features__item.angel_anime {
    animation: alternateRotate 3s infinite;
    transition: box-shadow 0.3s, color 0.3s;
}

/* Logo Animation with Long Pause */
@keyframes jumpInSpinLoopWithLongPause {
    0%, 20%, 80%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    35% {
        transform: scale(1.2) rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: scale(1) rotate(180deg);
        opacity: 1;
    }
    65% {
        transform: scale(1.2) rotate(270deg);
        opacity: 1;
    }
}

.logo-footer {
    animation: jumpInSpinLoopWithLongPause 8s ease infinite;
}

/* New Hover Enlargement Effect for Product Cards */
.s-product-card-entry {
    transition: transform 0.3s ease;
}

.s-product-card-entry:hover {
    transform: scale(1.05); /* Slightly enlarges the card on hover */
    z-index: 10; /* Ensures the enlarged card is above others */
}

/* Enhanced Product Description Styles */
.product__description {
    background-color: #0F0F0F; /* Dark background for product description */
    border: 1px solid #1a1a1a; /* Subtle border */
    padding: 15px; /* Padding for readability */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(234, 99, 38, 0.4); /* Orange-like highlight */
    font-size: 1.1em; /* Slightly larger font size */
    line-height: 1.6; /* Improved line spacing */
    color: #ffffff; /* Light text color for readability */
}

.product__description strong {
    color: #EA6326; /* Brand orange color for strong tags */
    font-weight: bold;
}

.product__description a {
    color: #234099; /* Standout color for links */
    text-decoration: underline;
}

.product__description ul {
    list-style-type: disc; /* Bullet points for lists */
    margin-left: 20px;
}

.product__description p {
    margin-bottom: 10px; /* Spacing between paragraphs */
}
/* Style for Discord Button in Footer */
.footer-middle .contact-links a[href*="discord.gg"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #000; /* Set text color to white */
    transition: color 0.3s ease;
}

.footer-middle .contact-links a[href*="discord.gg"]:hover {
    color: #EA6326; /* Highlight color on hover */
}
/* Highlight Effect for Banner */
.banner {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    display: block; /* Ensure the link takes the shape of its content */
    border-radius: 5px; /* Optional: rounded corners */
}

.banner:hover {
    box-shadow: 0 0 10px rgba(234, 99, 38, 0.4); /* Orange-like glow */
    transform: scale(1.05); /* Slightly enlarges the banner on hover */
}
@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 12px rgba(255, 165, 0, 0.75); /* Start and end with a moderate glow */
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 165, 0, 1); /* Peak with a stronger glow */
    }
}
/* Slide-in animation */
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Slide-out animation */
@keyframes slideOutToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.AddedToCartPreviewCon {
  animation: slideInFromLeft 0.5s forwards;
}

.AddedToCartPreviewCon.hide {
  animation: slideOutToLeft 0.5s forwards;
}
.AddedToCartPreviewCon .text p {
  color: #ffffff; /* Sets the font color to white */
}
.AddedToCartPreviewCon {
  border: 1px solid #EA6326; /* Retains the border color */
}

@import url('https://fonts.googleapis.com/css2?family=Handjet&display=swap');

/* Applying Handjet font with increased specificity and !important rule */
footer.store-footer .handjet-footer-text,
footer.store-footer .handjet-footer-text span {
  font-family: 'Handjet', sans-serif !important;
  font-optical-sizing: auto !important;
  font-weight: 400 !important; /* Regular weight, adjust as needed */
  font-style: normal !important;
  font-variation-settings: "ELGR" 1, "ELSH" 2 !important;
  color: #EA6326 !important; /* Your specific color */
  text-align: center !important;
}

/* Adjusted sizes for parts of the footer text, with increased specificity */
footer.store-footer .handjet-footer-text .custom-text {
    font-size: 18px !important; /* Increased size */
}

footer.store-footer .handjet-footer-text .custom-text.larger {
    font-size: 40px !important; /* Increased size */
}
/* Style for inactive tabs to have transparent background and white text */
.tabs__product .tab-trigger {
    background-color: transparent !important; /* Transparent background for inactive tabs */
    color: #000 !important; /* White color for text of inactive tabs */
}

/* Specific style for the active tab to have #0f0f0f background and orange text */
.tabs__product .tab-trigger.is-active {
    background-color: #0f0f0f !important; /* Dark background for the active tab */
    color: #EA6326 !important; /* Orange color for text of the active tab */
}

/* Ensure icons within the tabs also inherit the correct color for visibility */
.tabs__product .tab-trigger i {
    color: inherit !important; /* Icons inherit the color of their parent tab */
}
.AddedToCartPreviewCon::after {
    content: '✕'; /* Using a more stylized 'X' character */
    position: absolute;
    top: 5px; /* Adjust as needed for alignment */
    right: 5px; /* Adjust as needed for alignment */
    padding: 5px;
    color: #ffffff; /* White color for the 'X' */
    cursor: pointer;
    font-weight: bold;
    font-size: 20px; /* Adjust size as needed for visibility */
    background-color: rgba(0, 0, 0, 0.5); /* Optional: Adding a slight background for better visibility */
    border-radius: 50%; /* Making it circular */
    width: 30px; /* Ensuring a square shape */
    height: 30px; /* Ensuring a square shape */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* Optional: Adding a subtle shadow for depth */
}
button.search-btn {
    background-color: transparent; /* Makes the button background transparent */
    border: none; /* Removes any border */
    padding: 5px; /* Provides some padding around the icon */
    cursor: pointer; /* Changes the cursor to a pointer to indicate it's clickable */
    transition: transform 0.2s ease; /* Smooth transition for the transform */
}

button.search-btn:hover {
    transform: scale(1.5); /* Scales up the icon size more significantly on hover */
}

/* If you're using an <i> tag for the icon, ensure it's centered and visible */
button.search-btn i {
    text-align: center;
    line-height: 1; /* Adjusts the line height to help center the icon vertically */
    background-repeat: no-repeat; /* Ensures the background image doesn't repeat */
    background-position: center; /* Centers the background image */
}
.custom-user-icon {
    width: 48px; /* Initial size */
    height: auto;
    transition: transform 0.3s ease; /* Smooth transition for scaling */
}

button.header-btn[aria-label="user"]:hover .custom-user-icon {
    transform: scale(1.5); /* Increase size on hover */
}
/* Target the modified icon */
.header-btn.btn i {
  transition: transform 0.3s ease; /* Smooth transition for zoom effect */
}

/* Zoom effect on hover */
.header-btn.btn i:hover {
  transform: scale(1.5); /* Adjust scale value for desired zoom level */
}
.s-block--features .s-block__title h2 {
    font-size: 1.8rem; /* Adjust the size as needed */
}
@import url('https://fonts.googleapis.com/css2?family=Handjet&display=swap');

/* Targeting the specific h2 element */
.s-block--features .s-block__title h2 {
  font-family: 'Handjet', sans-serif !important;
  font-weight: normal !important; /* Adjust based on the font's appearance */
}
.header-btn[aria-label="user"] .custom-user-icon {
    width: 48px !important; /* Adjust size as needed */
    height: 20px !important; /* Adjust size as needed */
}
div[slot="icon"].header-btn.btn > i {
    width: 48px !important; /* Adjust the size as needed */
    height: 20px !important; /* Adjust the size as needed */
}
.header-container {
    width: 100%; /* Ensures the header spans the full width */
    top: 0;
    left: 0;
    z-index: 999; /* High z-index to stay on top */
}

/* Assuming .s-product-card-entry is the class for product cards */
.s-product-card-entry:hover {
    z-index: 1; /* Lower than the header */
}
/* Ensure the sidebar displays its children in a column layout */
.sidebar {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the children horizontally */
}

/* Adjust the "Add to Cart" section to fit under the image */
.sticky-product-bar {
    width: 100%; /* Adjust this as necessary to fit the design */
    margin-top: 20px; /* Adds space between the image and the button */
    order: 2; /* Ensures it comes after the image container if needed */
}

/* Ensure the image container takes precedence in order */
.sidebar .relative {
    order: 1;
}
@media (max-width: 768px) { /* Adjusts for mobile views */
  .sidebar .relative .wish-share {
    position: absolute;
    top: 0;
    left: 90;
    transform: translate(0, 0);
    z-index: 2; /* Ensure it's above the image slider */
  }
}
@media (min-width: 768px) {
    .sub-cat-icon {
        max-width: none; /* Removes any max-width restrictions */
        width: auto; /* Allows the container to grow */
        height: auto; /* Maintains proportionate growth */
    }

    .sub-cat-icon a {
        padding: 20px; /* Increases padding for larger appearance */
    }

    .sub-cat-icon h3 {
        font-size: 1.3rem; /* Larger font size for better readability */
    }
}
@media (max-width: 767px) {
    .sub-cat-icon {
        max-width: none; /* Removes any max-width restrictions */
        width: auto; /* Allows the container to grow */
        height: auto; /* Maintains proportionate growth */
    }
}
@media (max-width: 767px) { /* Target mobile devices */
    .btn--wishlist, .btn--share {
        display: none; /* Hides the buttons */
    }
}
@media (max-width: 767px) {
    .navbar-brand .logo-dark {
        width: 30px !important; /* Set the desired width */
        height: 25px !important; /* Set the desired height */
    }
}
.sub-cat-icon:hover .sub-title {
    text-decoration: underline;
    text-decoration-color: #ea6326;
}
.banner-square .box-img img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform, box-shadow;
}

.banner-square:hover .box-img img {
  transform: translateY(-8px);
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.25), 
              0 18px 40px rgba(0, 0, 0, 0.15);
}
.menu-list > h3 {
    color: #000 !important;
    text-decoration: underline;
    text-decoration-color: #EA6326;
    text-underline-offset: 4px; /* optional: pushes the line a bit lower for style */
}
h3.title.text-center {
    color: #000 !important;
    text-decoration: underline;
    text-decoration-color: #EA6326;
    text-underline-offset: 4px;
}

/* Minimal margin per slide */
#squares-1 .swiper-slide {
  margin: 0 2px !important;
}
/* Image behavior */
#squares-1 .banner-square img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
}
/* Subtle zoom */
#squares-1 .banner-square:hover img {
  transform: scale(1.03);
}
/* Keep content above overlays */
.s-block--banners.has-bg .container {
  position: relative;
  z-index: 1;
}
/* Optional: make sure full layout is centered and clean */
#squares-1 .swiper-wrapper {
  padding-top: 20px;
  padding-bottom: 10px;
  justify-content: center;
  align-items: flex-start;
}
/* Intercom widget hover text */
.intercom-lightweight-app-launcher {
  position: relative;
  font-family: 'IBM Plex Sans Arabic', sans-serif !important;
}

/* Tooltip */
.intercom-lightweight-app-launcher::after {
  content: "تواصل معنا";
  position: absolute;
  top: 50%;
  left: 105%;
  transform: translateY(-50%);
  background-color: #ea6326;
  color: #000;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Arrow */
.intercom-lightweight-app-launcher::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-right-color: #ea6326;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Show always on hover, regardless of Intercom state */
.intercom-lightweight-app-launcher:hover::after,
.intercom-lightweight-app-launcher:hover::before {
  opacity: 1;
}
.way-item__icon.sicon-cart + .way-item__content h4::after {
  content: "لكل ريال";
  font-size: 16px;
  color: #EA6326;
}