:root {
  --lightp-color: #6C6470;
  --darkp-color: #3B363D;
  --border-color: #CCCCCC;
  --light-border-color: #CCCCCC;
  --main-color: #621E83;
}

/* ========== PRODUCT ATTRIBUTES TABLE ========== */
.woocommerce table.shop_attributes {
  border-collapse: collapse;
  border: none !important;
  margin: 0 !important;
}

.woocommerce table.shop_attributes .woocommerce-product-attributes-item {
  border-bottom: 1px solid var(--border-color);
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border: none !important;
  background-color: unset !important;
  font-style: normal !important;
  font-weight: 500;
  font-size: 15px;
  text-align: left;
}

.woocommerce table.shop_attributes th {
  color: var(--lightp-color);
}

.woocommerce table.shop_attributes td {
  color: var(--darkp-color);
}

.woocommerce table.shop_attributes td p {
  padding: 0;
}

/* ========== PRODUCT GALLERY THUMBNAILS ========== */
.wc-block-product-gallery-thumbnails__thumbnail {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--light-border-color);
}

.wc-block-product-gallery-thumbnails__scrollable {
  flex-direction: row;
  overflow-y: hidden;
  scrollbar-width: auto;
}

.wc-block-product-gallery-thumbnails__scrollable::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.wc-block-product-gallery-thumbnails__scrollable::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 0.5s ease;
}

.wc-block-product-gallery-thumbnails__scrollable::-webkit-scrollbar-track {
  background: transparent;
}

.wc-block-product-gallery-thumbnails__scrollable:hover::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
}

.wc-block-product-gallery-thumbnails__scrollable:hover::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.5);
}

:where(.wc-block-product-gallery-large-image) .wc-block-next-previous-buttons {
  width: 98%;
  margin: auto;
}

.wc-block-next-previous-buttons__button svg {
  box-sizing: content-box;
}

.wc-block-next-previous-buttons__button {
  width: 25px;
  height: 25px;
  border-radius: 8px;
  color: var(--main-color);
}



/* Labels */
.comment-form label {
  display: block;
  font-weight: 400;
  color: #19191A;
  margin-bottom: 0;
  font-size: 14px;
}
/* Input and Textarea Styling */
.comment-form input[type="text"], input[type="text"], input[type="password"] , 
.comment-form input[type="email"], input[type="email"], input[type="tel"],
.comment-form textarea , textarea {
  width: 100%  !important;
  padding: 12px 15px ;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  color: #333 !important;
  box-sizing: border-box !important;
  margin-top: 5px !important;
  outline: none !important;
  transition: all .4s !important;
}

.comment-form input[type="text"]:focus, input[type="text"]:focus,
.comment-form input[type="email"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
.comment-form textarea:focus , textarea:focus {
  outline: none !important;
  border-color: var(--main-color) !important;
}
.comment-form-rating label {
  font-weight: 700;
  color: #1f2937;
}

.comment-form-rating label .required {
  display: none;
}



/* Hide default stars */
.comment-form-rating .stars,
p.stars {
  display: none !important;
}

/* ========== CUSTOM DROPDOWN/SELECT DESIGN ========== */
.comment-form-rating , .gform_wrapper form .gfield--type-select {
  position: relative;
}

/* Style the select element */
.comment-form-rating select,
.comment-form select {
  width: 100%  !important;
  padding: 12px 40px 12px 15px;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  color: #333 !important;
  box-sizing: border-box !important;
  margin-top: 5px !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.4s ease !important;
  
  /* Remove default arrow */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
.gform_wrapper form select{
  width: 100%  !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
  background: #ffffff !important;
  font-size: 14px !important;
  color: #333 !important;
  box-sizing: border-box !important;
  margin-top: 5px !important;
  outline: none !important;
  cursor: pointer !important;
  transition: all 0.4s ease !important;
  
  /* Remove default arrow */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}

/* Focus state */
.comment-form-rating select:focus, .gform_wrapper form select:focus,
.comment-form select:focus {
  outline: none;
  border-color: var(--main-color);
  box-shadow: 0 0 0 3px rgba(98, 30, 131, 0.1);
}

/* Custom dropdown arrow */
.comment-form-rating::after  , .gform_wrapper form .gfield--type-select::after{
  content: '';
  position: absolute;
  right: 15px;
  bottom: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #6b7280;
  pointer-events: none;
  transition: all 0.3s ease;
}
.gform_wrapper form .gfield--type-select::after{
  bottom: 16px;
}

/* Rotate arrow on focus */
.comment-form-rating:focus-within::after {
  transform: rotate(180deg);
  border-top-color: var(--main-color);
}

/* Hover state */
.comment-form-rating select:hover , .gform_wrapper form select:hover {
  border-color: #9ca3af;
}

/* Style the dropdown options */
.comment-form-rating select option , .gform_wrapper form select option {
  padding: 10px;
  background: #ffffff;
  color: #333;
}

/* Custom styling for the select when an option is selected */
.comment-form-rating select option:checked , .gform_wrapper form select option:checked {
  background: var(--main-color);
  color: #ffffff;
}

/* ========== CUSTOM CHECKBOX ========== */
.comment-form p.comment-form-cookies-consent {
  display: flex !important;
  align-items: center  !important;
  gap: 10px !important;
  margin-top: 15px !important;
}

/* Hide default checkbox */
.comment-form p.comment-form-cookies-consent input[type="checkbox"]{
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Custom checkbox label */
.comment-form p.comment-form-cookies-consent label{
  font-weight: 400 !important;
  color: #6b7280 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  user-select: none !important;
  position: relative !important;
  padding-left: 26px  !important;
}

/* Custom checkbox box */
.comment-form p.comment-form-cookies-consent label::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 16px !important;
  height: 16px !important;
  border: 2px solid #d1d5db !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  transition: all 0.3s ease !important;
}

/* Checked state */
.comment-form p.comment-form-cookies-consent input[type="checkbox"]:checked + label::before {
  background: var(--main-color) !important;
  border-color: var(--main-color) !important;
}

/* Checkmark */
.comment-form p.comment-form-cookies-consent label::after{
  content: '';
  position: absolute !important;
  left: 5px !important;
  top: 50% !important;
  transform: translateY(-50%) rotate(45deg) !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #ffffff !important;
  border-width: 0 2px 2px 0 !important;
  opacity: 0 !important;
  transition: all 0.2s ease !important;
}

/* Show checkmark when checked */
.comment-form p.comment-form-cookies-consent input[type="checkbox"]:checked + label::after{
  opacity: 1 !important;
}

/* Hover state */
.comment-form p.comment-form-cookies-consent label:hover::before{
  border-color: var(--main-color) !important;
}

/* Focus state */
.comment-form p.comment-form-cookies-consent input[type="checkbox"]:focus + label::before{
  box-shadow: 0 0 0 3px rgba(98, 30, 131, 0.2) !important;
}

/* ========== FORM ORDERING ========== */
.comment-form .comment-notes {
  width: 100%;
  order: 1;
}

.comment-form .comment-form-rating {
  width: 100%;
  order: 4;
}

.comment-form .comment-form-author {
  order: 2;
}

.comment-form .comment-form-email {
  order: 3;
}

.comment-form .comment-form-comment {
  order: 5;
}

.comment-form .comment-form-cookies-consent {
  order: 6;
  margin: 0 !important;
}

.comment-form  .form-submit {
  order: 7;
}



.woocommerce-Tabs-panel--reviews{
  max-width: 900px;
  margin: auto !important;
}

.woocommerce #reviews #comments ol.commentlist li .description , .wp-block-comments ol li .description {
    background-color: #F6F5F7;
    padding: 10px;
    border-radius: 8px;
    p{
      margin: 0;
    }
}
.woocommerce #reviews #comments ol.commentlist .byuser .description {
  background-color: #f8f2fa !important;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar , .wp-block-comments ol li img.avatar {
    width: 50px;
    height: 50px;
    border-radius: 100% !important;
    border: none;
    background: unset;
    padding: 0;
    margin: 0;
    @media (max-width:768px){
      display: none;
    }
}
.woocommerce #reviews #comments ol.commentlist li .comment-text , .wp-block-comments ol li .comment-text {
    margin: 0 0 0 55px;
    border: none;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    @media (max-width:768px){
      margin: 0;
      padding: 0;
    }
}
.woocommerce #reviews #comments ol.commentlist ul.children , .wp-block-comments ol ul.children{
    @media (max-width:768px){
      margin: 20px 0 0 25px;
    }
}
.woocommerce #reviews #comments ol.commentlist li::before , .wp-block-comments ol li::before{
  display: none;
}
.woocommerce .star-rating{
    float: left;
    width: 100%;
    margin-bottom: 8px;
}
/* 1. RESET THE STAR RATING BOX */
#reviews #comments ol.commentlist li.review .comment-text .meta .star-rating , .wp-block-comments ol li.comment  .comment-text .meta .star-rating {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    font-size: 14px !important; /* Adjust size if needed */
    width: 7em !important;      /* Exactly 5 stars width */
    height: 1.5em !important;   /* Exact height */
    letter-spacing: 2px !important;
    position: relative !important;
    overflow: hidden !important;
    font-family: 'star', sans-serif !important; /* REQUIRED for WooCommerce stars */
    color: transparent !important; /* Hides default weird colors */
}

/* 2. CREATE THE EMPTY GRAY BACKGROUND STARS */
#reviews #comments ol.commentlist li.review .comment-text .meta .star-rating::before  , .wp-block-comments ol li.comment  .comment-text .meta .star-rating::before {
    content: "\53\53\53\53\53" !important; /* 5 empty star shapes */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    color: #d1d5db !important; /* <-- CHANGE THIS COLOR for your empty star color */
    letter-spacing: 2px !important;
    width: 100% !important;
    z-index: 0 !important;
}

/* 3. SHOW THE YELLOW FILLED STARS ON TOP */
#reviews #comments ol.commentlist li.review .comment-text .meta .star-rating span , .wp-block-comments ol li.comment  .comment-text .meta .star-rating span {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    overflow: hidden !important;
    float: left !important;
    height: 100% !important;
    z-index: 1 !important;
    padding-top: 1.5em !important; /* Pushes text "Rated 3 out of 5" down out of sight */
    display: block !important;
    color: #fbbf24 !important; /* <-- CHANGE THIS COLOR for your filled star color */
}





/* --- Container Reset --- */
ul.tabs.wc-tabs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    border-bottom: 1px solid #e5e5e5;
    justify-content: flex-start;
    gap: 0;
}

ul.tabs.wc-tabs li {
    position: relative;
    margin: 0;
    padding: 0;
}

ul.tabs.wc-tabs li a {
    display: block;
    padding: 15px 25px;
    font-size: 16px;
    font-weight: 600;
    color: #444;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    border-bottom: 3px solid transparent; /* Reserve space for the underline */
    background: transparent;
}

/* --- Hover State --- */
ul.tabs.wc-tabs li a:hover {
    color: #000;
}

/* --- Active State (Matches your purple underline design) --- */
ul.tabs.wc-tabs li.active a {
    color: #000;
    border-bottom-color: #8e44ad; /* Change this hex code to your desired purple */
}

/* Optional: Remove WooCommerce's default background styling on tabs */
ul.tabs.wc-tabs li.active::before,
ul.tabs.wc-tabs li.active::after,
ul.tabs.wc-tabs li::before,
ul.tabs.wc-tabs li::after {
    display: none !important; 
}

/* --- RESPONSIVE DESIGN (Mobile & Tablet) --- */
@media (max-width: 768px) {
    ul.tabs.wc-tabs {
        flex-direction: column;
        border-bottom: none;
        margin-bottom: 20px;
    }

    ul.tabs.wc-tabs li {
        width: 100%;
        border: 1px solid #e5e5e5;
        border-bottom: none; /* Prevent double borders */
        margin-bottom: 0;
    }
    
    /* Add bottom border to the last item */
    ul.tabs.wc-tabs li:last-child {
        border-bottom: 1px solid #e5e5e5;
    }

    ul.tabs.wc-tabs li a {
        padding: 18px 20px;
        font-size: 15px;
        background: #f9f9f9;
        border-bottom: none; /* Remove the underline on mobile */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }


    /* Mobile Active State */
    ul.tabs.wc-tabs li.active {
        border-color: #8e44ad; /* Match purple to the active tab */
    }
    ul.tabs.wc-tabs li.active a {
      background-color: #f8f2fa;
      color: #621E83 !important;
      font-weight: 700 !important;
      border-bottom: none !important;
    }
}

/* --- Optional: Align Center for Desktop if you prefer --- */
@media (max-width: 769px) {
  .single-product{
    h1{
      font-size: 20px !important;
    }
    .wc-block-components-product-price{
      font-size: 18px;
    }
    .woocommerce-variation-price{
      font-size: 15px;
    }
    .customSizeBox{
      padding: 10px !important;
    }
  }
  .mytheme-delivery-estimation{
    font-size: 16px;
    margin-bottom: 15px;
  }
}

.woocommerce-variation-price{
  span.price{
    display: flex;
    flex-direction: column;
    gap: 4px;
    del{
      font-size: 12px;
      font-weight: 400;
    }
  }
  &::before {
    content: 'Final Price: ';
    font-size: 14px;
    font-weight: 400;
  }
}

html {
    scroll-behavior: smooth;
}

.stickyBtnSingle{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 3;
  display: none !important;
  /* @media (max-width:768px){
    display: block;
  } */
}

.navbarTempWrapper{
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.navbarTempWrapperHighlight{
  background-color: #FCF5FF;
  border-radius: 100%;
  padding: 8px;
  box-sizing: content-box;
}





/* --- HIDE ON DESKTOP --- */
@media (min-width: 769px) {
    .bottomNavbar.wp-block-group {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* --- MOBILE STYLES --- */
@media (max-width: 768px) {
  .hideOnMobile{
    display: none !important;
  }
  .lowerHeaderSection{
    p{
      font-size: 12px;
    }
  }
    /* Reset ALL conflicting block styles */
    .bottomNavbar.wp-block-group {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important; /* Ensure full width */
        width: 100% !important;
        max-width: 100% !important;
        z-index: 2 !important; /* Max z-index */
        
        display:none; /* Force Flex */

        background-color: #ffffff !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
        border-top: 1px solid #f0f0f0 !important;
        border-radius: 20px 20px 0 0 !important;
        margin: 0 !important;
        min-height: 70px !important;

        /* Reset visibility */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        height: auto !important;
        padding-left: 32px !important;
        padding-right: 32px !important;

        /* Animation - Start hidden */
        /* transform: translateY(100%) !important;  */
    }

    @keyframes slideUpNav {
        0% { transform: translateY(100%); opacity: 0; }
        100% { transform: translateY(0); opacity: 1; }
    }

    /* Style the icons */
    .bottomNavbar > .wp-block-ic-icons,
    .bottomNavbar > .wc-block-mini-cart {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .bottomNavbar .wc-block-mini-cart__icon {
        width: 36px !important;
        height: 36px !important;
    }
    .bottomNavbar .wc-block-mini-cart {
        max-width: none !important;
        width: auto !important;
        padding: 0 !important;
    }
    .bottomNavbar .wc-block-mini-cart__button {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        background: transparent !important;
    }
    .bottomNavbar .wc-block-mini-cart__badge {
        transform: translate(8px, -8px) !important;
    }

    /* Body padding to prevent hiding content */
    body {
        padding-bottom: 85px !important;
    }
}


/* Sticky state (added by jQuery) */
.mainHeaderSectionWrapper.is-sticky {
  z-index: 3;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 0 !important;
    /* Optional: Add a subtle shadow when it sticks */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
    .ic-logo-svg-wrapper{
      transform: scale(0.8);
    }
}
.ic-logo-svg-wrapper{
  transition: all .4s;
}












/* Hide the word "(Required)" but keep the span */
.gform_wrapper .gfield_required_text {
    display: none !important;
}

/* Create a red asterisk to replace it */
.gform_wrapper .gfield_required {
    color: #e74c3c; /* Red color for the star */
    font-size: 15px; /* Make the star slightly larger */
    vertical-align: middle;
}

/* Since we hid the text, manually add a ' *' after the label */
.gform_wrapper .gfield_label::after {
    content: " *";
    color: #e74c3c;
    font-size: 15px;
    font-weight: 700;
}
/* =========================================
   1. TARGETING THE PLACEHOLDER TEXT
   ========================================= */

/* For modern browsers (Chrome, Edge, Safari) */
.gform_wrapper input::placeholder,
.gform_wrapper select,
.gform_wrapper textarea::placeholder {
    color: #9ca3af;           /* Light gray color - matches your image */
    font-weight: 400;         /* Normal weight (not bold) */
    font-size: 12px;          /* Matches the input text size */
    font-family: inherit;     /* Uses your site's default font */
    opacity: 1;               /* Ensures it isn't faded out */
}

/* For Firefox (to ensure consistency) */
.gform_wrapper input::-moz-placeholder,
.gform_wrapper textarea::-moz-placeholder {
    color: #9ca3af;
    opacity: 1;
}
.privaryMessage{
  border: none !important;
}
.privaryMessage h3{
  font-size: 13px;
  color: #3E3D40;
  line-height: 1.4;
  position: relative;
  padding-left: 20px;
  font-weight: 400;
  &::after{
    position: absolute;
    content: '';
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuNjY3IDUuNjE2di0uOTVhNC42NjcgNC42NjcgMCAwIDAtOS4zMzQgMHYuOTVhMy4zMyAzLjMzIDAgMCAwLTIgMy4wNXY0QTMuMzM3IDMuMzM3IDAgMCAwIDQuNjY3IDE2aDYuNjY2YTMuMzM3IDMuMzM3IDAgMCAwIDMuMzM0LTMuMzMzdi00YTMuMzMgMy4zMyAwIDAgMC0yLTMuMDUxbS04LS45NWEzLjMzMyAzLjMzMyAwIDEgMSA2LjY2NiAwdi42NjdINC42Njd6bTguNjY2IDhhMiAyIDAgMCAxLTIgMkg0LjY2N2EyIDIgMCAwIDEtMi0ydi00YTIgMiAwIDAgMSAyLTJoNi42NjZhMiAyIDAgMCAxIDIgMnoiIGZpbGw9IiM2MjFlODMiLz48cGF0aCBkPSJNOCA5LjMzM2EuNjY3LjY2NyAwIDAgMC0uNjY3LjY2N3YxLjMzM2EuNjY3LjY2NyAwIDEgMCAxLjMzNCAwVjEwQS42NjcuNjY3IDAgMCAwIDggOS4zMzMiIGZpbGw9IiM2MjFlODMiLz48L3N2Zz4=');
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: center;
  }
}
.gform_fields{
  gap: 12px !important;
}
.gform_button{
  background-color: #621E83 !important;
  padding: 15px !important;
}
.gform-footer{
  margin-top: 8px !important;
}