/*
Theme Name: Special Bid Child
Theme URI: https://special-bid.com
Description: Tema hijo de Storefront con el look and feel de Special Bid (paleta violeta/teal, tipografía Plus Jakarta Sans, modo oscuro con toggle, cards estilo catálogo).
Author: Special Bid
Template: storefront
Version: 1.0.0
Text Domain: specialbid-child
*/

/* ============================================================
   TOKENS DE DISEÑO — mismos valores que special-bid.com
   ============================================================ */
:root{
  --accent:#4F46E5;
  --accent-light:#818CF8;
  --radius:14px;
  --nav-h:64px;
  --transition:.3s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --bg:#09090B; --bg-card:#121214; --bg-card2:#18181B;
  --border:rgba(255,255,255,.08); --border-hover:rgba(255,255,255,.16);
  --text:#FAFAFA; --text-mute:#A1A1AA;
  --nav-bg:rgba(9,9,11,.85); --footer-bg:#09090B;
}
[data-theme="light"]{
  --bg:#FAFAFA; --bg-card:#FFFFFF; --bg-card2:#F4F4F5;
  --border:rgba(0,0,0,.08); --border-hover:rgba(0,0,0,.16);
  --text:#09090B; --text-mute:#71717A;
  --nav-bg:rgba(250,250,250,.85); --footer-bg:#09090B;
}
html{ background:var(--bg); overflow-x:hidden; }
body{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  background:var(--bg) !important;
  color:var(--text) !important;
  transition:background var(--transition), color var(--transition);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:'Plus Jakarta Sans',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.02em;
  color:var(--text) !important;
}
a{ color:var(--accent); }
a:hover{ color:var(--accent-light); }
::selection{ background:var(--accent); color:#fff; }

/* ============================================================
   HEADER / NAV (Storefront: #masthead, .site-branding, .main-navigation)
   ============================================================ */
#masthead{
  background:var(--footer-bg) !important;
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px) saturate(1.2);
  padding:14px 0;
}
#masthead .col-full{
  display:flex; align-items:center; flex-wrap:wrap; gap:16px 28px;
  justify-content:space-between;
}
#masthead .site-branding{ margin:0 !important; }
#masthead .site-branding img{ max-height:36px; width:auto; }
#masthead .site-title a,
#masthead .site-description{ color:#FAFAFA !important; }
#masthead .site-title{ margin:0 !important; font-size:1.3rem !important; }

/* Nav principal en la misma fila, sin caja/borde propio */
.storefront-primary-navigation,
#masthead .main-navigation{
  background:transparent !important; margin:0 !important; flex:1 1 auto;
}
.main-navigation ul{ display:flex !important; flex-wrap:wrap; gap:4px; }
.main-navigation ul li{ margin:0 !important; }
.main-navigation ul li a{
  color:rgba(255,255,255,.75) !important;
  font-weight:600;
  font-size:.88rem;
  padding:8px 14px !important;
  border-radius:8px;
  transition:color .2s, background .2s;
}
.main-navigation ul li a:hover{
  color:#fff !important;
  background:rgba(255,255,255,.06);
}
.main-navigation ul.sub-menu,
.main-navigation ul.children{
  background:#18181B !important;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; overflow:hidden; margin-top:6px !important;
}

/* Bloque derecho: buscador + carrito + toggle de tema, todo en línea */
.header-widget-region,
#masthead .widget_product_search,
#masthead .site-header-cart{
  display:flex !important; align-items:center; gap:14px; margin:0 !important;
}

/* Buscador: caja oscura integrada, con ícono propio (SVG), sin depender
   del ícono/botón default de Storefront (que puede solaparse con el texto) */
.woocommerce-product-search{
  display:flex; align-items:center; position:relative; margin:0 !important;
}
.woocommerce-product-search input[type="search"]{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  color:#FAFAFA !important;
  border-radius:50px !important;
  padding:9px 16px 9px 38px !important;
  font-size:.85rem !important;
  min-width:180px;
  transition:border-color .2s, background .2s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A1A1AA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:14px center;
  background-size:15px 15px;
}
.woocommerce-product-search input[type="search"]::placeholder{ color:rgba(255,255,255,.4) !important; }
.woocommerce-product-search input[type="search"]:focus{
  outline:none; border-color:var(--accent) !important; background-color:rgba(255,255,255,.09) !important;
}
/* El botón submit default de Storefront queda oculto visualmente pero accesible
   por teclado/lector de pantalla, para no duplicar el ícono de lupa */
.woocommerce-product-search button[type="submit"]{
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;
  background:transparent !important; box-shadow:none !important;
}

/* Carrito: ícono + monto, alineados prolijamente */
#masthead .site-header-cart .cart-contents{
  display:flex !important; align-items:center; gap:8px;
  color:#FAFAFA !important; font-size:.85rem; font-weight:600;
  padding:8px 14px; border:1px solid rgba(255,255,255,.14); border-radius:50px;
  transition:border-color .2s;
}
#masthead .site-header-cart .cart-contents:hover{ border-color:var(--accent); }
#masthead .site-header-cart .cart-contents .amount{ color:var(--accent-light) !important; }
#masthead .site-header-cart .cart-contents::before{ display:none; }

/* Botón de tema (dark/light) — ahora enganchado justo al lado del carrito */
.sb-theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,.14);
  background:transparent; color:#FAFAFA; cursor:pointer; font-size:.95rem;
  margin:0 0 0 10px; transition:all .2s; flex-shrink:0; vertical-align:middle;
}
.sb-theme-toggle:hover{ background:rgba(255,255,255,.08); border-color:var(--accent); }

@media (max-width:768px){
  #masthead .col-full{ flex-direction:column; align-items:flex-start; }
  .main-navigation ul{ flex-direction:column; width:100%; }
  .header-widget-region, #masthead .widget_product_search, #masthead .site-header-cart{
    width:100%; justify-content:space-between;
  }
}

/* ============================================================
   HERO (solo en portada, inyectado por functions.php)
   ============================================================ */
.sb-hero{
  position:relative; overflow:hidden; background:#09090B; color:#fff;
  padding:96px 24px 72px; text-align:center;
}
.sb-hero-content{ position:relative; z-index:2; max-width:820px; margin:0 auto; }
.sb-hero-badge{
  display:inline-flex; padding:6px 16px; border-radius:50px;
  border:1px solid rgba(255,255,255,.12); font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent-light);
  margin-bottom:24px;
}
.sb-hero h1{
  font-size:clamp(2.2rem,5.5vw,3.8rem) !important; color:#fff !important;
  line-height:1.08; margin-bottom:20px;
}
.sb-hero p{ color:rgba(255,255,255,.72); font-size:1.05rem; max-width:600px; margin:0 auto 32px; }
.sb-hero .sb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 28px; border-radius:50px; font-weight:700;
  text-decoration:none; margin:0 6px; transition:transform .2s, opacity .2s;
  border:1.5px solid transparent;
}
#sbParticles{ position:absolute; inset:0; z-index:1; pointer-events:none; }

/* ============================================================
   BOTONES — clases explícitas, sin ambigüedad de color por herencia
   ============================================================ */
.sb-btn-solid{ background:var(--accent) !important; color:#fff !important; border-color:transparent !important; }
.sb-btn-solid:hover{ color:#fff !important; opacity:.92; transform:translateY(-2px); }
.sb-btn-outline{ background:transparent !important; color:#fff !important; border-color:rgba(255,255,255,.5) !important; }
.sb-btn-outline:hover{ background:rgba(255,255,255,.12) !important; color:#fff !important; }
.sb-btn-white{ background:#fff !important; color:var(--accent) !important; border-color:transparent !important; }
.sb-btn-white:hover{ color:var(--accent) !important; opacity:.92; transform:translateY(-2px); }

/* Estos botones viven dentro de #colophon (la sección de contacto se
   inyecta ahí) — sin este bloque, la regla general "#colophon a" (que
   tiene más prioridad por usar un ID) les gana el color a las clases. */
#colophon .sb-btn-solid{ color:#fff !important; }
#colophon .sb-btn-outline{ color:#fff !important; }
#colophon .sb-btn-white{ color:var(--accent) !important; }

/* ============================================================
   CATÁLOGO (grillas de producto WooCommerce estándar)
   ============================================================ */
ul.products{ display:grid !important; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px !important; }
ul.products li.product{
  background:var(--bg-card) !important; border:1px solid var(--border) !important;
  border-radius:var(--radius) !important; padding:18px !important; margin:0 !important;
  transition:transform .2s, border-color .2s; float:none !important; width:auto !important;
}
ul.products li.product:hover{ transform:translateY(-4px); border-color:var(--accent) !important; }
ul.products li.product img{ border-radius:10px; }
ul.products li.product .woocommerce-loop-product__title{
  color:var(--text) !important; font-weight:700 !important; font-size:1rem !important; margin:12px 0 4px !important;
}
ul.products li.product .price{ color:var(--accent-light) !important; font-weight:700 !important; }
ul.products li.product .price del{ color:var(--text-mute) !important; opacity:.7; }
ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:var(--accent) !important; color:#fff !important; border-radius:50px !important;
  border:none !important; font-weight:700 !important; padding:10px 20px !important;
  transition:transform .2s, opacity .2s;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover{
  opacity:.9; transform:translateY(-1px); color:#fff !important;
}
.woocommerce span.onsale{
  background:var(--accent) !important; border-radius:50px; font-weight:700;
}

/* ============================================================
   FICHA DE PRODUCTO
   ============================================================ */
.single-product div.product .product_title{ color:var(--text) !important; }
.single-product div.product p.price{ color:var(--accent-light) !important; font-size:1.4rem !important; font-weight:800 !important; }
.woocommerce-tabs ul.tabs li a{ color:var(--text-mute) !important; }
.woocommerce-tabs ul.tabs li.active a{ color:var(--accent) !important; border-color:var(--accent) !important; }
.woocommerce-Reviews, .woocommerce-tabs, .related.products{
  border-top:1px solid var(--border) !important;
}
.related.products h2{ color:var(--text) !important; }

/* ============================================================
   CARRITO / CHECKOUT
   ============================================================ */
.woocommerce-cart table.shop_table, .woocommerce-checkout table.shop_table{
  background:var(--bg-card) !important; border:1px solid var(--border) !important; border-radius:var(--radius);
}
.woocommerce-cart table.shop_table th, .woocommerce-checkout table.shop_table th{
  color:var(--text-mute) !important; border-bottom:1px solid var(--border) !important;
}
.woocommerce-cart table.shop_table td, .woocommerce-checkout table.shop_table td{
  color:var(--text) !important; border-bottom:1px solid var(--border) !important;
}
#order_review, .woocommerce-checkout-payment, .cart_totals{
  background:var(--bg-card) !important; border:1px solid var(--border) !important; border-radius:var(--radius);
}
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, select{
  background:var(--bg) !important; color:var(--text) !important; border:1px solid var(--border) !important;
  border-radius:8px !important; padding:10px 12px !important;
}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder{
  color:var(--text-mute) !important; opacity:1 !important;
}
.woocommerce form .form-row label{ color:var(--text) !important; }
.woocommerce form .form-row .required{ color:#EF4444; }

/* Avisos (error / info / éxito) — reemplazan el rosa/blanco default por
   algo que combine con el tema oscuro, con un borde de color para distinguir */
.woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce-noreviews,
.woocommerce-NoticeGroup .woocommerce-error,
.woocommerce-NoticeGroup .woocommerce-info{
  background:var(--bg-card) !important; color:var(--text) !important;
  border:1px solid var(--border) !important; border-left:4px solid var(--accent) !important;
  border-radius:8px !important; padding:14px 18px !important; list-style:none !important;
}
.woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before{
  color:var(--accent-light) !important;
}
.woocommerce-error li, .woocommerce-info li, .woocommerce-message li{ color:var(--text) !important; }

/* Encabezados de sección del checkout (Información de contacto,
   Dirección de facturación, Opciones de pago) — más aire y una
   línea sutil debajo para separar secciones */
.woocommerce-checkout h3,
.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3{
  margin:36px 0 18px !important; padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.woocommerce-checkout h3:first-child{ margin-top:0 !important; }

/* Radios/checkboxes (métodos de envío, métodos de pago) */
.woocommerce ul.payment_methods li, .woocommerce ul.wc_payment_methods li{
  border-color:var(--border) !important;
}
.woocommerce ul.payment_methods label, .woocommerce ul.wc_payment_methods label{
  color:var(--text) !important;
}
.woocommerce-checkout #payment{
  background:var(--bg-card) !important; border:1px solid var(--border) !important; border-radius:var(--radius);
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--bg-card2) !important; color:var(--text) !important;
}
.woocommerce-checkout #payment div.payment_box::before{ border-bottom-color:var(--bg-card2) !important; }

/* ============================================================
   SECCIÓN DE CONTACTO (footer, id="contacto")
   ============================================================ */
.sb-contact{
  background:linear-gradient(135deg, var(--accent), #3730A3);
  color:#fff; padding:64px 24px; text-align:center;
  /* "Escapa" del contenedor angosto (.col-full) donde WordPress/Storefront
     inyecta esta sección, para que ocupe todo el ancho de la pantalla,
     igual que el hero de la portada. */
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  box-sizing:border-box;
}
.sb-contact .col-full{ max-width:640px; margin:0 auto; }
.sb-contact h2{ color:#fff !important; font-size:clamp(1.6rem,3vw,2.2rem) !important; margin-bottom:14px; }
.sb-contact p{ color:rgba(255,255,255,.85); font-size:1.02rem; margin-bottom:28px; }
.sb-contact-buttons{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.sb-contact .sb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 28px; border-radius:50px; font-weight:700;
  text-decoration:none; transition:transform .2s, opacity .2s;
  border:1.5px solid transparent;
}

/* ============================================================
   FOOTER (#colophon)
   ============================================================ */
#colophon{
  background:var(--footer-bg) !important; color:rgba(255,255,255,.55) !important;
  border-top:1px solid rgba(255,255,255,.08);
}
#colophon a{ color:rgba(255,255,255,.8) !important; }
#colophon .widget-title{
  color:#fff !important; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.site-info{ color:rgba(255,255,255,.4) !important; }

/* Ocultar elementos default de Storefront que no queremos (ej. handheld footer bar) */
.storefront-handheld-footer-bar{ display:none !important; }