/* Variables CSS */
:root {
    --color-primary: #2C9BFF;
    --color-primary-dark: #19488F;
    --color-primary-light: #D9F0FF;
    --color-secondary: #007BFF;
    --color-secondary-hover: #0056b3;
    --color-text: #4E4B66;
    --color-text-light: #6E7191;
    --color-border: #D9DBE9;
    --color-background: #FCFCFC;
    --color-error: #FF0000;
    
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 40px;
    --spacing-xxl: 60px;
    
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 20px;
    --font-size-xsl: 24px;
    --font-size-xml: 28px;
    --font-size-xxl: 36px;
    --font-size-hero: 56px;
  }
  
  /* Reset y estilos base */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Estilos generales - Mobile First */
  .faq-hero-section {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background: var(--color-primary-light);
  }
  
  .faq-hero-content {
    padding: var(--spacing-lg);
    text-align: center;
    margin: auto;
  }
  
  .faq-hero-content h2 {
    font-size: var(--font-size-xsl);
    font-weight: 700;
    line-height: 1.4;
    color: var(--color-primary-dark);
    margin-bottom: var(--spacing-sm);
  }
  
  .faq-hero-content span {
    font-size: var(--font-size-sm);
    color: var(--color-text);
  }
  
  /* Sección de Tabs */
  .faq-container {
    margin: var(--spacing-xl) 0 var(--spacing-lg);
  }
  
  .faq-tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .faq-tabs-container::-webkit-scrollbar {
    display: none;
  }
  
  .faq-tabs {
    display: flex;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-text-light);
    /*justify-content: center;*/
  }

  .mgt-10{
    margin-top: 10px !important;
  }
  
  .faq-tab {
    padding: var(--spacing-xs) var(--spacing-lg);
    font-weight: 500;
    font-size: var(--font-size-lg);
    color: var(--color-text);
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
    margin-bottom: -1px;
    border-bottom: 1px solid var(--color-text-light);
  }
  
  .faq-tab.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    font-weight: 600;
  }
  
  /* Sección de FAQs */
  .faq-list {
    list-style: none;
    padding: 0;
    margin-top: var(--spacing-xl);
  }
  
  .faq-item {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--color-border);
    background: var(--color-background);
    overflow: hidden;
  }
  
  .faq-question {
    font-size: var(--font-size-lg);
    font-weight: 700;
    padding: var(--spacing-md) var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-bottom: 0;
  }

  .faq-icon {
    font-size: var(--font-size-xml);
    color: var(--color-primary);
    font-weight: normal;
  }
  
  .faq-answer {
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    display: none;
  }
  
  /* Sección de Contacto */
  .pqrs-contact {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    width: 100vw;
    background: var(--color-background);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
  }
  
  .contact-container {
    max-width: 350px;
    margin: 0 auto;
  }
  
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  .contact-form h3 {
    font-size: var(--font-size-xsl);
    color: var(--color-text);
    line-height: 30px;
    font-weight: 700;
    margin-bottom: 0px;
  }
  
  .contact-form h3 span {
    color: var(--color-primary);
  }
  
  .contact-form p {
    color: var(--color-text);
    font-size: var(--font-size-lg);
  }

  /* Estilos del formulario */
  .form-group-faqs {
    position: relative;
    margin-bottom: var(--spacing-lg);
  }
  
  .form-group-faqs input,
  .form-group-faqs textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    border: none;
    border-bottom: 2px solid var(--color-border);
    font-size: var(--font-size-md);
    background: var(--color-background);
    outline: none;
    color: var(--color-text-light);
    transition: all 0.3s;
  }

  .form-group-faqs label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    color: var(--color-text-light);
    font-size: var(--font-size-md);
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease;
}

    .form-group-faqs input::placeholder, 
    .form-group-faqs input:-ms-input-placeholder,
    .form-group-faqs input::-ms-input-placeholder,
    .form-group-faqs textarea::placeholder, 
    .form-group-faqs textarea:-ms-input-placeholder, 
    .form-group-faqs textarea::-ms-input-placeholder {
        color: var(--color-text-light) !important;
        font-size: var(--font-size-sm);
    }

    /* Efectos de focus y estado activo */
    .form-group-faqs input:focus,
    .form-group-faqs textarea:focus {
        border-bottom: 2px solid var(--color-secondary);
    }

    .form-group-faqs input:focus + label,
    .form-group-faqs input:not(:placeholder-shown) + label,
    .form-group-faqs textarea:focus + label,
    .form-group-faqs textarea:not(:placeholder-shown) + label {
        top: -5px;
        font-size: var(--font-size-sm);
        color: var(--color-secondary);
        opacity: 1;
    }

  @media (max-width: 768px) {
    .form-group-faqs input,
    .form-group-faqs textarea {
      font-size: 16px !important;
    }
  }
  
  .form-group-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text);
    margin: var(--spacing-md) 0;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .form-group-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none; 
    -moz-appearance: none;
    width: 18px; 
    height: 18px;
    background-color: var(--color-border); 
    border: 1px solid var(--color-border);
    border-radius: 4px; 
    cursor: pointer;
    position: relative;
    margin-right: 0px;
    outline: none;
}

.form-group-checkbox input[type="checkbox"]:checked {
    background-color:#2c9bff ; 
    border-color:#2c9bff ; 
}

.form-group-checkbox input[type="checkbox"]::after {
    content: '\2713';
    color: white;
    font-size: 12px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}



  .form-group-checkbox label a {
    color: var(--color-text);
    text-decoration: underline;
  }

  .form-group-submit {
    display: grid;
    align-items: center;
    justify-content: center;
    width: 50%;
    margin: 0 auto;
  }
  
  .btn-submit {
    font-size: var(--font-size-lg);
    padding: var(--spacing-sm) var(--spacing-xxl);
    background-color: var(--color-primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .btn-submit::hover{
    background-color: var(--color-primary);
  }
  
  .faqs-error-message {
    font-size: var(--font-size-xs);
    color: var(--color-error);
    text-align: center;
    margin-top: var(--spacing-xs);
  }
  
  .contact-image {
    display: none;
  }

  #faqs-response-message {
    padding: 15px;
    border-radius: 5px;
    font-size: 14px;
    line-height: 12px;
    display: none;
    text-align: center;
}

.success-message {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}

.error-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}
  
  /* Tablet (768px y superior) */
  @media (min-width: 768px) {
    .contact-container {
      max-width: 600px;
    }
    
    .faq-hero-content {
      padding: var(--spacing-xl) var(--spacing-xl);
      font-size: var(--font-size-hero);
    }

    .faq-hero-content h2 {
      font-size: var(--font-size-hero);
    }

    .faq-hero-content span {
      font-size: var(--font-size-lg);
      width: 752px;
      line-height: 0px;
    }

    .faq-question {
      font-size: var(--font-size-xl);
      font-weight: 700;
      padding: var(--spacing-md) var(--spacing-lg);
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      transition: background-color 0.3s;
      margin-bottom: 0;
    }
  
    
    .faq-answer {
      padding: var(--spacing-md) var(--spacing-lg);
      font-size: var(--font-size-lg);
      color: var(--color-text);
      display: none;
    }
    
    .contact-form h3 {
      font-size: var(--font-size-xxl);
      color: var(--color-text);
      line-height: 40px;
      font-weight: 700;
    }

  }
  
  /* Desktop (1024px y superior) */
  @media (min-width: 1024px) {
    .contact-container {
      max-width: 1100px;
      display: flex;
      gap: 80px;
    }
  
    .contact-image {
      display: block;
      flex: 1;
    }
  
    .contact-image img {
      width: 100%;
      height: auto;
      object-fit: cover;
    }
  
    .contact-form {
      flex: 1;
    }
  
    .faq-hero-content {
      max-width: 1100px;
    }
  }


  /*estilos mis favoritos wishlist*/

  .mis-favoritos-lista .woocommerce .wishlist_table a.add_to_cart.button.alt:not(.yith-wcwl-themed-button-style) {
    background: #2C9BFF !important;
    color: #fff;
    border-color: #2C9BFF;
    border-radius: 0px;
    text-transform: none;
  }

  .mis-favoritos-lista .woocommerce .wishlist_table a.add_to_cart.button.alt:not(.yith-wcwl-themed-button-style):hover {
    background: #fff !important; 
    color: #2C9BFF !important;  
    border: 2px solid #2C9BFF; 
}

  .mis-favoritos-lista thead {
    background: #fff !important;
    border-bottom: 1px solid #ccc;
    font-size: 10px;
  }

  .mis-favoritos-lista .woocommerce table.shop_table.wishlist_table thead th{
    padding: 20px 5px 20px 5px;
    text-transform: uppercase;
    color: #4E4B66;
    background: none;
  }

  .mis-favoritos-lista .shop_table.wishlist_table .quickview, .woocommerce table.wishlist_table .quickview{
    border: 2px solid #2C9BFF;
    text-transform: none;
    color: #2C9BFF;
    white-space: nowrap;
    min-width: 110px;
  }

  .mis-favoritos-lista .add-links .button:focus, .add-links .button:hover, .add-links .quickview:hover, .product-image .yith-compare:hover, .yith-wcwl-add-to-wishlist a:hover, li.product-default:hover .add-links .add_to_cart_button, li.product-default:hover .add-links .add_to_cart_read_more{
    background: #2C9BFF !important;
    color: #fff !important;
    border-color: #2C9BFF;
  }

  .mis-favoritos-lista .shop_table.wishlist_table .add_to_cart.button, .shop_table.wishlist_table .add_to_cart_read_more.button, .shop_table.wishlist_table .quickview, .shop_table.wishlist_table .yith-compare, .woocommerce table.wishlist_table .add_to_cart.button, .woocommerce table.wishlist_table .add_to_cart_read_more.button, .woocommerce table.wishlist_table .quickview, .woocommerce table.wishlist_table .yith-compare {
    width: 160px;
    padding: 0px 15px !important;
  }

  .mis-favoritos-lista .wishlist-items-wrapper td.product-price{
    text-align: center !important;
  }  

  .mis-favoritos-lista .wishlist-items-wrapper td.product-stock-status{
  text-align: center !important;
  }  

  .mis-favoritos-lista .wishlist-items-wrapper td.product-add-to-cart{
    text-align: center !important;
    } 

    .mis-favoritos-lista .page-share.wishlist-share.yith-wcwl-share {
      display: none !important;
    }

    .mis-favoritos-lista .product-name a{
      font-size: 16px !important;
      color: #4E4B66 !important;
      font-weight: 400 !important;
  }

  .mis-favoritos-lista .product-price span .woocommerce-Price-amount .amount{
    font-size: 16px !important;
    color: #4E4B66 !important;
    font-weight: 400 !important;
}

.mis-favoritos-lista .product-stock-status .wishlist-in-stock .text-v-dark{
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #A0A3BD !important;
}

    @media (max-width: 767px) {
      .shop_table.responsive,
      .shop_table.shop_table_responsive {
          border: none !important;
          box-shadow: none;
      }
      
      .wishlist-items-wrapper {
          display: flex;
          flex-direction: column;
          gap: 10px;
      }
  
      .shop_table.responsive tr, 
      .shop_table.shop_table_responsive tr {
          display: flex;
          padding: 20px 0;
          position: relative;
      }
  
      .wishlist-items-wrapper tr {
          display: flex;
          flex-wrap: wrap;
          background: #fff;
          border-radius: 0px;
          border: 1px solid #D9DBE9;
          padding: 10px;
          border-top: 1px solid #D9DBE9 !important;
      }
  
      .wishlist-items-wrapper td {
          display: block;
      }
  
      .product-thumbnail {
          flex: 1 1 30%;
          max-width: 30%;
          display: flex;
          align-items: center;
          justify-content: center;
      }
  
      .product-thumbnail img {
          width: 100%;
          height: auto;
          border-radius: 8px;
      }
  
      .product-name {
          flex: 1 1 70%;
          max-width: 70%;
          padding: 5px 10px;
          text-align: left !important;
          display: flex;
          align-items: center;
          min-height: 100%;
      }

      .product-name a {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 100%;
    }
  
      /* Nuevo contenedor para price y stock status */
      .product-price,
      .product-stock-status {
          flex: 1 1 35%;
          max-width: 100%;
          padding: 5px 10px;
          display: flex;
          align-items: center;
      }
  
      .product-add-to-cart {
          flex: 1 1 100%;
          max-width: 100%;
          text-align: center;
          padding-top: 10px;
      }
  
      .product-add-to-cart button {
          width: 100%;
          max-width: 150px;
          padding: 10px;
          border-radius: 5px;
          font-size: 14px;
      }
  
      .product-add-to-cart {
          grid-column: 2;
          display: flex;
          gap: 8px;
      }
  
      .add-links {
          display: flex;
          width: 100%;
          gap: 8px;
      }
  
      .add-links a,
      .add-links .quickview {
          flex: 1;
          text-align: center;
          padding: 8px 16px;
          font-size: 14px;
          text-decoration: none;
      }
  
      .add_to_cart {
          background: #2C9BFF;
          color: white !important;
      }
  
      .quickview {
          background: white;
          color: #2C9BFF !important;
          border: 1px solid #2C9BFF;
      }

      .shop_table.cart-table a.remove, .shop_table.review-order a.remove, .widget_shopping_cart .product-image .remove-product, .wishlist-popup .remove_from_wishlist, .wishlist_table.traditional .remove_from_wishlist:not(.button){
        z-index: 999 !important;
      }
      
      ul.product_list_widget li .product-image img{
        margin-top:15px;
      }

      dl.variation {
      display: none;
      }
  }

  .cart-minus-custom {
    opacity: 0.2 !important;
    cursor: not-allowed !important;
    pointer-events: none !important; 
}