/*
Theme Name: GETSMARTCA Lite
Theme URI: https://getsmartca.com/
Author: GETSMARTCA
Description: Tema ultraligero para WooCommerce (Core Web Vitals) con catálogo y ficha de producto optimizados y login propio.
Version: 1.1.5
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: getsmartca-lite
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: e-commerce, woocommerce, lightweight, fast, responsive
*/

/* Nota: estilos principales en /assets/css/main.css */


/* Footer social icons and payment logos sizing (prevent huge icons from global SVG rules) */
.gs-footer-social svg{
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  display:block;
}
.gs-footer-social a{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
}

.gs-footer-payments{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:10px;
}
.gs-pay-logo{
  height:20px;
  width:auto;
  max-width:140px;
  display:block;
  opacity:.95;
}
@media (max-width: 520px){
  .gs-pay-logo{ height:18px; }
}


/* === Footer scheme + payment logos (optical alignment + mono option) === */
.gs-scheme-dark{
  background:#0B1220;
  color:#E5E7EB;
}
.gs-scheme-dark a{ color:#E5E7EB; }
.gs-scheme-dark .gs-footer-col,
.gs-scheme-dark .gs-footer-small{ color:#CBD5E1; }
.gs-scheme-dark .gs-footer-title{ color:#F1F5F9; }

.gs-footer-payments.is-mono .gs-pay-logo{
  filter: grayscale(1) saturate(0) brightness(0);
  opacity:.92;
}
.gs-scheme-dark .gs-footer-payments.is-mono .gs-pay-logo{
  /* invert to white for dark background */
  filter: grayscale(1) saturate(0) brightness(0) invert(1);
  opacity:.95;
}

.gs-pay-logo{
  height:22px;
  width:auto;
  max-width:150px;
  display:block;
}

/* Optical tweaks per brand */
.gs-pay-logo--visa{ height:18px; transform: translateY(1px); }
.gs-pay-logo--mastercard{ height:22px; transform: translateY(0px); }
.gs-pay-logo--paypal{ height:20px; transform: translateY(1px); }
.gs-pay-logo--mp{ height:18px; transform: translateY(2px); }
.gs-pay-logo--spei{ height:20px; transform: translateY(1px); }

@media (max-width:520px){
  .gs-pay-logo{ height:20px; max-width:140px; }
}

/* =====================================================================
   Hard guard: payment logos sizing (footer + trust blocks)
   Prevents huge logos if any global CSS forces img to 100% width.
   ===================================================================== */

.gs-footer .gs-footer-payments .gs-pay-logo,
.gs-cc-card .gs-footer-payments .gs-pay-logo{
  width: auto !important;
  height: 22px !important;
  max-height: 22px !important;
  max-width: 150px !important;
  object-fit: contain;
}

@media (max-width: 520px){
  .gs-footer .gs-footer-payments .gs-pay-logo,
  .gs-cc-card .gs-footer-payments .gs-pay-logo{
    height: 20px !important;
    max-height: 20px !important;
    max-width: 140px !important;
  }
}

/* Skeleton Loading Effect */
.gs-placeholder {
    background: #eee;
    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
    border-radius: 8px;
    background-size: 200% 100%;
    animation: 1.5s shine linear infinite;
}

@keyframes shine {
    to { background-position-x: -200%; }
}

/* Tabs UX */
.gs-hidden { display: none; }
.gs-tab {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: all 0.3s;
}
.gs-tab.active {
    color: #007cba;
    border-bottom: 2px solid #007cba;
    font-weight: bold;
}

/* Dropdown de búsqueda */
.gs-search-results-dropdown {
    position: absolute;
    background: white;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 0 0 8px 8px;
}
.gs-search-item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    align-items: center;
}