/*

Theme Name:   Apol Theme
Theme URI:    https://apol.com
Description:  Child theme for Apol Theme
Author:       Your Name
Template:     astra
Version:      1.0.0

*/


// Variables
$bg-dark: #161616;
$primary-color: #007bff;
$primary-color-rgb-opacity-2: rgba(0, 123, 255, 0.2);
$border-color: #DFDFDF;
$secondary-color-2: #777777;
$btn-radius: 8px;
$search-radius: 8px;
$box-radius: 8px;
$transition: 0.3s ease;
$text-white: #ffffff;
$text-gray:#6c757d;
$overlay-bg: rgba(0, 0, 0, 0.6);



:root {
    /* Color Variables */
    --ast-global-color-0: #007BF6;
    --ast-global-color-1: #0066cc;
    --primary-color: #007BF6;
    --secondary-color: #1a1a1a;
    --background-color: #333;
    --text-color: #fff;
    --border-color: #343434;
    --hover-color: #0066cc;
    --text-dark: #161616;
    --background-gray: #f8f8f8;
    --overlay-bg: rgba(0, 0, 0, 0.6);
    --text-gray: #777777;
    --border-gray-1: #DFDFDF;
    --swiper-pagination-bullet-width: 12px;
    --swiper-pagination-bullet-height: 12px;
    --cui-primary: #007BF6;
    --cui-primary-rgb: 0, 123, 255;
    --cui-primary-rgb-opacity-2: rgba(0, 123, 255, 0.2);
    
  
    /* Font Size Variables */
    --font-size-extra-small: 12px;
    --font-size-small: 14px;
    --font-size-medium: 16px;
    --font-size-large: 18px;
    --font-size-xlarge: 20px;
    --font-size-xxlarge: 24px;
  
    /* Border Radius */
    --border-radius: 10px;
    --border-radius-small: 5px;
    --border-radius-medium: 8px;
     --heart-color: #dc3545;
  }

  .common-animate {
    animation: fadeInUp 0.6s ease-out;
  }
  
  @keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.woocommerce-js form .form-row textarea, .woocommerce-js input[type=email], .woocommerce-js input[type=number], .woocommerce-js input[type=password], .woocommerce-js input[type=reset], .woocommerce-js input[type=search], .woocommerce-js input[type=tel], .woocommerce-js input[type=text], .woocommerce-js input[type=url], .woocommerce-js textarea, .woocommerce-page form .form-row textarea, .woocommerce-page input[type=email], .woocommerce-page input[type=number], .woocommerce-page input[type=password], .woocommerce-page input[type=reset], .woocommerce-page input[type=search], .woocommerce-page input[type=tel], .woocommerce-page input[type=text], .woocommerce-page input[type=url], .woocommerce-page textarea {
    border-color: var(--ast-border-color);
    border-radius: 4px;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}
.woocommerce-js form .form-row textarea:focus, .woocommerce-js input[type=email]:focus, .woocommerce-js input[type=number]:focus, .woocommerce-js input[type=password]:focus, .woocommerce-js input[type=reset]:focus, .woocommerce-js input[type=search]:focus, .woocommerce-js input[type=tel]:focus, .woocommerce-js input[type=text]:focus, .woocommerce-js input[type=url]:focus, .woocommerce-js textarea:focus, .woocommerce-page form .form-row textarea:focus, .woocommerce-page input[type=email]:focus, .woocommerce-page input[type=number]:focus, .woocommerce-page input[type=password]:focus, .woocommerce-page input[type=reset]:focus, .woocommerce-page input[type=search]:focus, .woocommerce-page input[type=tel]:focus, .woocommerce-page input[type=text]:focus, .woocommerce-page input[type=url]:focus, .woocommerce-page textarea:focus{
    border-color: #046BD2;
    box-shadow: none;

  }
.woocommerce-js input[type="text"]:focus,
.woocommerce-js input[type="email"]:focus,
.woocommerce-js input[type="number"]:focus,
.woocommerce-js textarea:focus,
.comments-area textarea#comment:focus,
.comments-area textarea#comment:active,
.comments-area .ast-comment-formwrap input[type="text"]:focus,
.comments-area .ast-comment-formwrap input[type="text"]:active {
  border-color: #86b7fe; /* Bootstrap 5 focus border color */
  outline: 0; /* remove default outline */
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrap focus glow */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  border-style: solid;
}


:root{
      --wp--custom--ast-container-width: 100%;
    --wp--custom--ast-content-width-size: 100%;
}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals{
  width: 100%;
}
.woocommerce-cart{
  .wc-proceed-to-checkout{
    display: flex;
    gap: 10px;
    &::after, &::before{
      display: none;
    }
  }
}

.apol-megamenu{
  .apol-megamenu-bg { display: none !important; }
  .product-mobile-menu:hover + .apol-megamenu-bg.open,
  .product-mobile-menu.active + .apol-megamenu-bg.open{ display: block !important; }
}
@import "megamenu.scss";
  .mySwiper_hero,
  .mySwiper_featured,
  .mySwiper_products {
    &.swiper-horizontal{
      overflow: hidden;
    }
    .swiper-button-next, .swiper-button-prev{
      position: relative !important;
    }
    .swiper-button-wrapper{
          display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    .swiper-pagination{
      position: relative !important;
      margin-top: 20px;
    }
    }
  }
  .mySwiper_hero{
    width: 100%;
    .swiper-link{
      display: block;
      width: 100%;
    }
  }

  .swiper-pagination.swiper-pagination-hero.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal{
    position: relative !important;
    margin-top: 20px;
  }


.woocommerce-js{
  @import "custom-dropdown.scss";
  @import "search-container.scss";
  @import "customTable.scss";
  @import "bootstrap-like-container.scss";
  @import "header/_desktop-header-button.scss";
  @import "header/_desktop-header-search.scss";
  @import "header/_mobile-header-search.scss";
  @import "header/_mobile-header-profile.scss";
  @import "header/_mobile-header-navbar.scss";
  @import "footer/_footer.scss";
  @import "home/_category_card.scss";
  @import "home/_heading.scss";
  @import "daterangepicker.scss";
  @import "filter.scss";
  @import "sideMenu.scss";
  @import "products.scss";
  @import "FeaturedProducts.scss";
  @import "tablePagination.scss";
  @import "button.scss";
  @import "header/_header.scss";
  @import "wishlist.scss";
  @import "hero.scss";
}
@import "alert.scss";
@import "woocommerce-loader.scss";
@import "page-transition-loader.scss";
@import "caseForm.scss";
@import "fonts.scss";


.my_sync_UI{
    padding-top: 70px;
    margin-bottom: 30px;

    .categ_list_show .ui-sortable{
        margin: 0;
    }
   
    & .accordion-body{
        .btn-primary{
            padding: 10px 30px; 
        }
    }

    .ab.sortable1{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
      gap: 10px;
      width: 100%;
      margin-bottom: 0;
    }

    .category_main_array1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 0;
        .ab.sortable1.ui-sortable{
            display: flex;
            gap: 10px;
            flex-direction: column;
            .sortable1.ui-sortable{
              li{
                margin-bottom: 10px;
              }
            }
        }
        li {
            list-style: none;
            padding: 10px 15px;
            font-size: var(--font-size-medium);
            border-color: #e3e3e3;
            // margin: 0;
    
            & ul {
                margin-top: 10px !important;
               
               
            }

            .toggle{
                font-size: var(--font-size-xxlarge);
                line-height: 22px;
            }

            a {
                padding: 15px;
                display: block;
                width: 100%;
                background-color: rgb(0 0 0 / 8%);
                border-radius: var(--border-radius);
                color: var(--text-dark);
                &.active {
                    background-color: var(--text-dark) !important;
                    color: white;
                    cursor: default;
                    &:hover {
                        text-decoration: none;
                    }
                }
            }
        }
    }

    .handle{
        font-size: var(--font-size-xxlarge);
        font-weight: 600;
        margin-bottom: 15px;
    }
    #buttonupdate{
        margin-top: 15px;
    }
    #buttonupdate,
    .woocommerce a.button{
        padding: 15px 25px;
        background-color: var(--primary-color);
        border-radius: var(--border-radius);
        color: white;
        font-weight: 500;
        text-decoration: none;
            line-height: normal;
    }
  
    h1{
        font-size: var(--font-size-xxlarge);
        margin-bottom: 15px;
    }
    .cart-side-menu{

        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;
        gap: 10px;
        margin: 0;
        padding: 0;

      

        li.last-li {
            list-style: none;
            width: 100%;
            
           & a{
                padding: 15px;
                display: block;
                width: 100%;
                background-color: rgb(0 0 0 / 8%);
                border-radius: var(--border-radius);
                color: var(--text-dark);
                &.active{
                    background-color:var(--text-dark) !important;
                    color: white;
                    cursor: default;
                        text-decoration: none;

                    &:hover{
                        text-decoration: none;
                    }
                }
            }
        }
    }

// panel css
.panel-group{
    display: flex;
    gap: 10px;
    flex-direction: column;
}

.panel-group .panel+.panel{
    margin: 0;
}
.panel-heading {
    padding: 0;
    border:0;
  }
  .panel-title>a, .panel-title>a:active{
    display:block;
    padding:15px;
    color:#555;
    font-size:var(--font-size-medium);
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    word-spacing:3px;
    text-decoration:none;
  }
  .panel-heading  a:before {
   font-family:'FontAwesome';
    content:"\f107";
     float: right;
     transition: all 0.5s;
  }
  .panel-heading.active a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
  } 
  .new_wraper .panel-title>a, .new_wraper .panel-title>a:active{
    padding:12px 15px;
  }
  .new_wraper .panel-default>.panel-heading{
    background:#eee !important;
    background-image:#eee  !important;
  }
  .new_wraper{
    padding-top:0px;
  }
  .new_wraper h4.panel-title h2 {
    font-size:var(--font-size-medium);
      margin: 0px;
      padding: 0px;
      display: inline-block;
  }
  
  
  .new_wraper .panel-group .panel{
    border-radius:0px !important;
  }
  .new_wraper h5 {
      font-weight: 400;
      font-size: var(--font-size-medium);
  }
  .new_wraper h5 b{
      font-weight: 600;
    margin:0px;
    font-size: var(--font-size-medium);

  }
  .new_wraper .btnConfirm {
      background: var(--primary-color) ;
      padding: 15px 25px;
  
      color: #fff !important;
      margin-bottom: 15px !important;
      border-radius: var(--border-radius);
  }
  .new_wraper h5 b:first-child {
      font-size: 16px;
      line-height: 29px;
      font-family: RobotoCondensed-Bold  !important;
      color: var(--primary-color) ;
  }

}

.offcanvas-width-set{
    width: 300px !important;
}



span.select2-container{
  z-index: 0 !important;
}


  .ast-hfb-header,
  .ast-desktop{
    
      .ast-builder-grid-row{
        grid-template-columns: auto 1fr;
        .ast-grid-right-section{
          justify-content: flex-end;
        }
      }

      .site-header-section .ast-builder-menu{
         margin-left:0;
         float:left;
         margin-right:auto;
      }

      .ast-header-custom-right-content {
          display: flex;
          align-items: center;
          gap: 10px;
      }

      &.ast-header-break-point{
        .ast-builder-grid-row{
         .ast-grid-right-section{
          justify-content: flex-end;
        }
        }
      }
  
  }

  .site-branding.ast-site-identity {
    display: none!important;
}

.site-header {
  position: sticky !important;
  top: 0;
  z-index: 9999;
}

// Keep sticky behavior explicit for both desktop and mobile breakpoints.
@media (min-width: 922px) {
  .site-header {
    position: sticky !important;
    top: 0;
    z-index: 9999;
  }
}

@media (max-width: 921px) {
  .site-header {
    position: sticky !important;
    top: 0;
    z-index: 99999;
  }
}