.homeEventCards,
.homePortfolio,
.homeAnimSlide {
   position: relative;
}

/* .homeEventCards,
.homeAnimSlide {
   &:nth-child(even) {
      left: 100vw;
   }
   
   &:nth-child(odd) {
      left: -100vw;
   }
} */

@media (min-width: 1280px) {
   .homeEventCards {
      bottom: 0;
      transition: bottom 0.3s;
   }
   .homeEventCards:hover {
      bottom: 3%;
   }
}

#custom-list {
   position: relative;
}

.grow-size {
   position: relative;
   z-index: 1;
   left: 0;
   transition: all 0.15s ease-in-out;
}

.grow-size:hover {
   transform: scale(1.07);
   left: 0.7em;
}

#home_mainbanner {
   box-sizing: border-box;
}

#home_arrows {
   position: absolute;
   animation: arrows 2s infinite;
}

@keyframes arrows {
   0%,
   100% {
      bottom: 0%;
   }
   50% {
      bottom: 20%;
   }
}

@keyframes slidingFromLeft {
   0% {
      left: -100vw;
   }
   70% {
      left: 2.5vw;
   }
   80% {
      left: -1.25vw;
   }
   90% {
      left: 0.625vw;
   }
   100% {
      left: 0;
   }
}

@keyframes slidingToLeft {
   from {
      left: 0;
   }
   to {
      left: -100vw;
   }
}

@keyframes slidingFromRight {
   0% {
      left: 100vw;
   }
   70% {
      left: -2.5vw;
   }
   80% {
      left: 1.25vw;
   }
   90% {
      left: -0.625vw;
   }
   100% {
      left: 0;
   }
}

@keyframes slidingToRight {
   from {
      left: 0;
   }
   to {
      left: 100vw;
   }
}

@keyframes fadeIn {
   from {
      opacity: 0;
      top: 7vh;
   }
   to {
      opacity: 1;
      top: 0;
   }
}

@keyframes fadeOut {
   from {
      opacity: 1;
      top: 0;
   }
   to {
      opacity: 0;
      top: 7vh;
   }
}

#custom-shopping-styles
   > div
   > div
   > div
   > div.elementor-menu-cart__container.elementor-lightbox
   > div
   > div.widget_shopping_cart_content {
   & > ul {
      padding: 20px;
      background-color: #f9f9f9;
      list-style: none;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

      /* Shopping cart items */
      & > li {
         position: relative;
         padding: 10px 0;
         border-bottom: 1px solid #e0e0e0;

         /* Last item without border */
         &:last-child {
            border-bottom: none;
         }

         /* Product image */
         & img {
            border-radius: 5px;
         }

         /* Product name */
         & .wpr-mini-cart-name {
            font-size: 16px;
            font-weight: bold;
            color: #333;
         }

         /* Product price and quantity */
         & .wpr-mini-cart-quantity {
            font-size: 14px;
            color: #666;
         }

         /* Remove item link */
         & .wpr-mini-cart-remove {
            position: absolute;
            color: #ff4d4d;
            font-size: 2em;
            margin-left: 10px;
            transition: color 0.3s;
            right: -10px;
            top: 0;

            &:hover {
               color: #ff0000;
            }
         }
      }
   }

   & .woocommerce-mini-cart__total {
      margin-top: 1em;
      color: #333;
   }

   & .buttons {
      display: flex;
      flex-direction: column;
      gap: 0.5em;
      margin-top: 20px;

      /* Continue shopping button */
      & a.wc-forward {
         display: block;
         text-align: center;
         background-color: #0073aa;
         color: #fff;
         padding: 10px;
         border-radius: 4px;
         text-decoration: none;
         transition: background-color 0.3s;

         &:hover {
            background-color: #005a8c;
         }
      }

      /* Checkout button */
      & a.checkout {
         display: block;
         text-align: center;
         background-color: #0073aa;
         color: #fff;
         padding: 10px;
         border-radius: 4px;
         text-decoration: none;
         transition: background-color 0.3s;

         &:hover {
            background-color: #005a8c;
         }
      }
   }
}

.custom-category-button {
   display: inline-block;
   margin-top: 10px;
   padding: 10px 15px;
   background-color: #0073e6;
   color: #fff;
   text-align: center;
   border-radius: 5px;
   font-size: 14px;
   text-decoration: none;
   transition: background-color 0.3s ease;
}

.custom-category-button:hover {
   background-color: #005bb5;
   color: #ffffff;
}

#home-events div[id^='uc_woocommerce_product_list_elementor'] > ul.product-list > li,
#custom-list div[id^='uc_woocommerce_product_list_elementor'] > ul.product-list > li {
   flex-direction: column !important;
   background-color: rgb(245,245,245);
   border-radius: 30px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   margin: 0.5em 0;
   padding-bottom: 1em;
   transition: all 0.3s ease-in-out;

   & .product-img {
      border-radius: 30px 30px 0 0;
   }
}

ul.product-list > li.product-items > div.product-text > a.product-text-name {
   text-decoration: underline !important;
}

#home-events div[id^='uc_woocommerce_product_list_elementor'] > ul.product-list > li > div.product-text > div.product-text-wrapper.uc-buttons > a:not(.custom-category-button),
#home-events div[id^='uc_woocommerce_product_list_elementor'] > div.product-text > div.product-text-wrapper.uc-buttons > a:not(.custom-category-button),
#related-events-list div[id^='uc_woocommerce_product_list_elementor'] > ul.product-list > li > div.product-text > div.product-text-wrapper.uc-buttons > a:not(.custom-category-button),
#related-events-list div[id^='uc_woocommerce_product_list_elementor'] > div.product-text > div.product-text-wrapper.uc-buttons > a:not(.custom-category-button),
#custom-list div[id^='uc_woocommerce_product_list_elementor'] > ul.product-list > li > div.product-text > div.product-text-wrapper.uc-buttons > a:not(.custom-category-button),
#custom-list div[id^='uc_woocommerce_product_list_elementor'] > div.product-text > div.product-text-wrapper.uc-buttons > a:not(.custom-category-button){
   cursor: not-allowed;
   background-color: #666;
   animation: fadeInOut 1s ease-in-out infinite alternate;
}

@keyframes fadeInOut {
   from {
      opacity: 0.25;
   }
   to {
      opacity: 0.75;
   }
}

/* @media (min-width: 1440px){
   #header-actions > div > div.elementor-element.elementor-menu-cart--cart-type-mini-cart.remove-item-position--top.toggle-icon--cart-medium.elementor-menu-cart--items-indicator-bubble.elementor-menu-cart--show-subtotal-yes.elementor-menu-cart--show-remove-button-yes.elementor-widget.elementor-widget-woocommerce-menu-cart {
      position: -webkit-sticky;
      position: sticky;
      top: 20px; 
      z-index: 9999;
      background-color: #05608F;
      border-radius: 5px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   }
} */

div:has(#custom-go-to-cart-button) {
   display: flex;
   justify-content: flex-end;
   width: 100%;
   height: fit-content;
   position: relative;

   & > #custom-go-to-cart-button {
      display: inline-block;
      position: fixed;
      background-color: #05608F;
      border-color: #05608F;
      z-index: 999;
      color: #ffffff;
      padding: 10px 20px;
      border-radius: 5px;
      margin: 5em 2em 0 0;

      &:hover {
         background-color: #05405E;
         border-color: #05405E;
      }
   }
}

/* Styles to the thankyou page buttons */
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-769af34.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > div > div > table > tbody > tr > td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions > a,
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-769af34.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > div > div > section.woocommerce-order-details > p > a,
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-769af34.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > div > div > section.woocommerce-order-details > table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details > tfoot:nth-child(3) > tr > td > a,
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-769af34.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > div > div > div.wooccm_order_attachments_wrapper > p > a,
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-b320402.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > section.woocommerce-order-details > table > tfoot:nth-child(3) > tr > td > a,
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-b320402.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > section.woocommerce-order-details > p > a,
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-b320402.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > div > p > a {
   background-color: #05608F !important;
   border-color: #05608F !important;
   color: white !important;

   &:hover {
      background-color: #103253 !important;
      border-color: #103253 !important;
      color: white !important;
   }
}

/* Styles to the thankyou and my account pages anchors */
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-b320402.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > section.woocommerce-order-details > table.order-details.widefat.shadow-table > tbody > tr a,
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-b320402.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > section.woocommerce-order-details > table.woocommerce-table.woocommerce-table--order-details.shop_table.order_details > tbody > tr > td.woocommerce-table__product-name.product-name > a,
#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-769af34.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > div > div > table > tbody > tr > th > a {
   color: #05608F !important;

   &:hover {
      color: #103253 !important;
   }
}

#content > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-769af34.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div > div > div > div > div > div > section.woocommerce-order-details > p {
   margin-bottom: 1.5em;
}

/* a.button.wc-forward {
   padding: 1rem !important;
   border-radius: 3px !important;
   font-weight: bold !important;
   background-color: #05608F !important;
   border-color: #05608F !important;
   color: white !important;

   &:hover {
      background-color: #103253 !important;
      border-color: #103253 !important;
      color: white !important;
   }
} */

/* Currency icon */
span.woocs_price_info_icon{
   /* the url function will aim to the svg image 'info_11712819.svg' located inside the gallery of the WordPress environment in "https://onlyticket.net/wp-admin/upload.php?item=9436" */
   background-image: url('https://onlyticket.net/wp-content/uploads/2025/02/info_11712819.svg') !important;
}

/* Adjust the price and the currency icon in the same line */

div.elementor-widget-container:has(p.price + div.woocs_price_info) {
   display: flex;
   align-items: baseline;
}

#event-data > div:nth-child(2) > table {
   border: none !important;
   border-spacing: 0 10px !important;
   border-collapse: separate !important;

   & tr > th {
      border: none !important;
      text-align: left;
      border-radius: 8px 0 0 8px;
   }

   & tr > td {
      border: none !important;
      border-radius: 0 8px 8px 0;
   }

   & tr:nth-child(odd) {
      background-color: rgb(102,35,174, 0.35);
      color: black;
      transition-duration: 0.3s, 0.15s, 0.3s;
      transition-property: background-color, color, transform;
   }

   & tr:nth-child(odd):hover {
      background-color: rgb(102,35,174);
      color: white;
      transform: scale(1.07);
   }
   
   & tr:nth-child(even) {
      background-color: rgb(40,147,193, 0.35);
      color: black;
      transition-duration: 0.3s, 0.15s, 0.3s;
      transition-property: background-color, color, transform;
   }
   
   & tr:nth-child(even):hover {
      background-color: rgb(40,147,193);
      color: white;
      transform: scale(1.07);
   }
}

form.cart {
   display: flex;
   flex-direction: column;
   gap: 0.5em;
}

button.single_add_to_cart_button {
   margin: 0 !important;
   width: 50%;
}

body > div.tc_seating_map.active > div.tc-wrapper.tc-woo-active > div.tc-bottom-controls > div.tc-bottom-controls-inside > div.tc-seating-tooltips > p {
   font-weight: bold;
   font-size: 1.2em;
}

.legend_separator {
   font-weight: 500;
   margin-top: 1em;
   color: #333;
}

div.e-checkout__order_review td.product-name:has(> div > span.tc-single-cart-seat) {
   display: flex;
   gap: 10px;
   min-width: fit-content !important;
   white-space: nowrap;

   & * {
      width: max-content;
      margin: 0;
   }

   & .tc_cart_remove_icon {
      display: none;
   }
}

@media (max-width: 768px) {
   p:has(> button.tc_seating_map_button),
   .elementor-toc__list-wrapper {
      display: flex !important;
      flex-direction: column;
      gap: 20px;
   }
}

@media (min-width: 769px) {
   p:has(> button.tc_seating_map_button),
   .elementor-toc__list-wrapper {
      display: flex !important;
      flex-direction: row;
      gap: 20px;
   }
}

button.tc_seating_map_button,
li.elementor-toc__list-item {
   background-color: #05608f !important;
   border-color: #05608f !important;
   color: white !important;
   border-radius: 10px;
   font-weight: bold;

   &.elementor-toc__list-item {
      padding: 0.5em;
   }
}

ul.menu-list.uc-items-wrapper {
   & > li.menu-items {
      &:nth-child(1) {
         & .menu-title {
            font-weight: bold;
            font-size: 1.5em;
            color: #e847d8;
         } 
      }
      &:nth-child(2) {
         & .menu-title {
            font-weight: bold;
            font-size: 1.5em;
            color: #f2de4b;
         }
      }
      &:nth-child(3) {
         & .menu-title {
            font-weight: bold;
            font-size: 1.5em;
            color: #48e2ea;
         }
      }
      &:nth-child(4) {
         & .menu-title {
            font-weight: bold;
            font-size: 1.5em;
            color: #81d742;
         }
      }

      & .menu-price {
         font-weight: bold;
         font-size: 1.5em;
      }
   }
}

/*Formulario de la tarjeta de credito*/

.woocommerce #payment div.payment_method_cybersource_credit_card {
   padding: 1em 0 !important;
   background-color: white !important;

   & .woocommerce #payment div.payment_method_cybersource_credit_card #wc-cybersource-credit-card-account-number-hosted, 
   & .woocommerce #payment div.payment_method_cybersource_credit_card #wc-cybersource-credit-card-csc-hosted {
      border-radius: 4px !important;
   }

   & #wc-cybersource-credit-card-expiry_field {
      padding: 1em !important;
   }
}

#order_review button#place_order[type='submit'] {
   display: block;
   text-align: center;
   background-color: #0073aa;
   color: #fff;
   padding: 10px;
   border-radius: 4px;
   text-decoration: none;
   transition: background-color 0.3s;

   &:hover {
      background-color: #005a8c;
   }
}