/* XSigns Price Calculator — capa de diseño "Instant Price Calculator".
   Toda la UI nativa de formx queda oculta (.xpc-native) y este CSS dibuja la
   tarjeta. Scope estricto bajo .xpc + reset agresivo para neutralizar los
   estilos globales del tema (BeTheme aplica fondo/borde/radio a button/input). */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

/* ===================================================================
   0) RESET defensivo contra el tema (button / input dentro de .xpc)
   =================================================================== */
.xpc button,
.xpc input {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  margin: 0;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  line-height: normal !important;
  text-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.xpc button {
  width: auto;
  height: auto;
  background: none !important;
  background-image: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: #23262C !important;
  cursor: pointer;
  transition: none;
}
.xpc button::before,
.xpc button::after { content: none !important; }
.xpc button:hover,
.xpc button:focus,
.xpc button:active {
  transform: none !important;
  box-shadow: none !important;
}

/* ----- reset del contenedor formx heredado ----- */
.xpc.formx {
  /* sin max-width: el ancho lo controla el contenedor externo del usuario */
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #23262C;
  position: relative;
  /* OJO: no fijar z-index aqui — crearia un stacking context que ATRAPARIA el
     popover. Lo dejamos en auto para que .xpc-dd-pop (z-index alto) gane en el
     contexto raiz frente al contenido siguiente de la pagina. */
}
.xpc, .xpc * { box-sizing: border-box; }

/* motor formx nativo: presente y funcional, pero invisible */
.xpc .xpc-native {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.xpc .formx-loading-overlay,
.xpc .formx-spinner { display: none !important; }

.xpc-error {
  font: 14px/1.5 -apple-system, sans-serif;
  color: #8a1f1f; background: #fdecec; border: 1px solid #f3c2c2;
  padding: 12px 16px; border-radius: 8px;
}

/* ===================================================================
   1) Tarjeta
   =================================================================== */
.xpc .xpc-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #ECEEF0;
  box-shadow: 0 14px 34px rgba(35,38,44,0.08);
  overflow: visible;
}

.xpc .xpc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 20px 32px 14px;
}
.xpc .xpc-title { font-size: 17px; font-weight: 700; color: #23262C; }
.xpc .xpc-note  { font-size: 12px; color: #9AA0A6; }

/* switch para mostrar/ocultar el bloque de precios por volumen */
.xpc .xpc-vol-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.xpc .xpc-vol-switch[hidden] { display: none; } /* respeta el atributo hidden (tiers_switch="no") */
.xpc .xpc-vol-switch-text { font-size: 12px; font-weight: 600; color: #6F757D; }
.xpc .xpc-volume-toggle { position: absolute; opacity: 0; width: 0 !important; height: 0 !important; pointer-events: none; }
.xpc .xpc-switch {
  width: 36px; height: 20px; border-radius: 20px; background: #DDE0E4;
  position: relative; transition: background .15s; flex: 0 0 auto;
}
.xpc .xpc-switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF;
  transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.xpc .xpc-volume-toggle:checked + .xpc-switch { background: #F9B13C; }
.xpc .xpc-volume-toggle:checked + .xpc-switch::after { transform: translateX(16px); }

/* ===================================================================
   2) Tabs
   =================================================================== */
.xpc .xpc-tabsbar {
  display: flex; align-items: center; gap: 24px;
  padding: 0 32px; border-bottom: 1px solid #ECEEF0;
}
.xpc .xpc-tabs { display: flex; gap: 26px; flex-wrap: wrap; }
.xpc .xpc-tab {
  font-size: 14px !important; font-weight: 600 !important;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 2px 14px !important; color: #82888F !important;
  white-space: nowrap;
  border-bottom: 3px solid transparent !important;
}
.xpc .xpc-tab.is-active { color: #23262C !important; border-bottom-color: #F9B13C !important; }
.xpc .xpc-tab-badge {
  font-size: 11px; font-weight: 700; color: #E5443C;
  background: #FBEAE9; padding: 2px 7px; border-radius: 20px; line-height: 1.2;
}

/* ===================================================================
   3) Fila de campos
   =================================================================== */
.xpc .xpc-fields {
  padding: 20px 32px 0;
  display: flex; flex-wrap: wrap; gap: 14px 12px; align-items: flex-end;
}
.xpc.is-loading .xpc-fields { min-height: 84px; }
.xpc.is-loading .xpc-fields::after {
  content: ''; display: block;
  width: 22px; height: 22px; margin: 24px auto;
  border: 3px solid #ECEEF0; border-top-color: #F9B13C; border-radius: 50%;
  animation: xpcSpin 0.7s linear infinite;
}
@keyframes xpcSpin { to { transform: rotate(360deg); } }

.xpc .xpc-field { flex: 1 1 0; min-width: 120px; max-width: 240px; position: relative; }
.xpc .xpc-field-label { font-size: 11px; font-weight: 600; color: #6F757D; margin-bottom: 6px; }

/* dropdown */
.xpc .xpc-dd-btn {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #DDE0E4 !important; border-radius: 9px !important;
  font-size: 13px !important; font-weight: 500 !important; color: #23262C !important;
  background: #FFFFFF !important;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left;
  transition: border-color .15s, box-shadow .15s !important;
}
.xpc .xpc-dd-btn:hover { border-color: #C7CCD1 !important; }
.xpc .xpc-dd-btn.is-open { border-color: #F9B13C !important; box-shadow: 0 0 0 3px rgba(249,177,60,0.15) !important; }
.xpc .xpc-dd-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xpc .xpc-dd-arrow {
  flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 1.5px solid #82888F; border-bottom: 1.5px solid #82888F;
  transform: rotate(45deg); margin-top: -3px; transition: transform .18s ease;
}
.xpc .xpc-dd-btn.is-open .xpc-dd-arrow { transform: rotate(-135deg); margin-top: 2px; }

/* El popover se "porta" a <body> (position:fixed) para escapar de cualquier
   overflow:hidden o stacking-context del tema. Por eso estas reglas NO van
   bajo .xpc (el popover ya no es descendiente de .xpc cuando esta abierto) e
   incluyen su propio reset de botones. */
@keyframes xpcDdIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.xpc-dd-pop {
  position: fixed;
  background: #FFFFFF; border: 1px solid #ECEEF0; border-radius: 10px;
  box-shadow: 0 14px 30px rgba(35,38,44,0.16);
  padding: 6px; z-index: 99999; max-height: 260px; overflow: auto;
  animation: xpcDdIn .15s ease;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  box-sizing: border-box;
}
.xpc-dd-pop, .xpc-dd-pop * { box-sizing: border-box; }
.xpc-dd-pop[hidden] { display: none; }
.xpc-dd-pop .xpc-opt {
  width: 100% !important; margin: 0 !important; height: auto !important;
  border: none !important; box-shadow: none !important;
  text-transform: none !important; letter-spacing: normal !important; min-width: 0 !important;
  background: #FFFFFF !important; color: #23262C !important; cursor: pointer;
  font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important;
  padding: 9px 10px !important; border-radius: 7px !important;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left;
  -webkit-appearance: none; appearance: none;
}
.xpc-dd-pop .xpc-opt:hover { background: #F6F7F8 !important; }
.xpc-dd-pop .xpc-opt.is-sel { background: #FFF6E3 !important; font-weight: 600 !important; }
.xpc-dd-pop .xpc-opt-check { color: #F9B13C !important; font-weight: 700; }

/* stepper (quantity / wirestands qty) */
.xpc .xpc-qty { flex: 0 0 140px; }
.xpc .xpc-qty.xpc-qty-ws { flex: 0 0 140px; } /* mismo ancho que Quantity */
.xpc .xpc-qty-row { display: flex; align-items: stretch; gap: 6px; }
.xpc .xpc-qty-btn {
  width: 34px !important;
  border: 1px solid #DDE0E4 !important; background: #FFFFFF !important; border-radius: 9px !important;
  font-size: 16px !important; font-weight: 600 !important; color: #23262C !important;
  padding: 0 !important;
}
.xpc .xpc-qty-btn:hover { background: #F6F7F8 !important; }
.xpc .xpc-qty-input {
  flex: 1; min-width: 0; text-align: center; padding: 10px 6px !important;
  border: 1px solid #DDE0E4 !important; border-radius: 9px !important;
  background: #FFFFFF !important;
  font-size: 14px !important; font-weight: 600 !important; color: #23262C !important;
}
.xpc .xpc-qty-input:focus { border-color: #F9B13C !important; outline: none; }
.xpc .xpc-qty-input::-webkit-outer-spin-button,
.xpc .xpc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.xpc .xpc-qty-input[type=number] { -moz-appearance: textfield; }

/* custom size (un input numerico) */
.xpc .xpc-field.xpc-field-custom { flex: 0 0 120px; }

/* checkbox/options genericas */
.xpc .xpc-optchecks { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.xpc .xpc-optcheck { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #23262C; cursor: pointer; }
.xpc .xpc-optcheck input { width: 15px !important; height: 15px !important; accent-color: #F9B13C; }

/* full bleed bar */
.xpc .xpc-fbbar { padding: 14px 32px 0; }
.xpc .xpc-fbbar[hidden] { display: none; }
.xpc .xpc-fbbar label {
  display: flex; align-items: center; gap: 10px;
  background: #FFF6E3; border: 1px solid #F3D9A4; border-radius: 10px;
  padding: 12px 16px; cursor: pointer;
}
.xpc .xpc-fbbar input { width: 16px !important; height: 16px !important; accent-color: #F9B13C; cursor: pointer; }
.xpc .xpc-fbbar span { font-size: 13px; color: #23262C; }
.xpc .xpc-fbbar.xpc-attn label { box-shadow: 0 0 0 3px rgba(229,68,60,0.25); border-color: #E5443C; }

/* ===================================================================
   3.b) Volume Pricing
   =================================================================== */
.xpc .xpc-volume { padding: 18px 32px 22px; }
.xpc .xpc-volume[hidden] { display: none; }
.xpc .xpc-volume-title {
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  color: #9AA0A6; margin-bottom: 8px; text-transform: uppercase;
}
.xpc .xpc-volume-chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* mensaje promocional opcional (param promo del shortcode): elemento independiente
   bajo el bloque de tramos, SIEMPRE visible (no depende del interruptor). Lleva su
   propio margen horizontal porque ya no vive dentro de .xpc-volume. */
.xpc .xpc-volume-promo {
  margin: 0 32px 18px; padding: 13px 16px; border-radius: 10px;
  background: #FFEFCB; border: 1px solid #F2C56B; color: #8A4B00;
  font-size: 14px; font-weight: 700; line-height: 1.45; text-align: center;
  letter-spacing: .2px;
}
.xpc .xpc-volume-promo a { color: #8A4B00; text-decoration: underline; }
/* separacion del elemento de arriba consistente, haya tramos o no:
   - con tramos visibles, el bloque .xpc-volume ya aporta su padding inferior -> poco margen;
   - sin tramos (.xpc-volume[hidden]), el promo sigue al formulario -> mas margen. */
.xpc .xpc-volume:not([hidden]) + .xpc-volume-promo { margin-top: 4px; }
.xpc .xpc-volume[hidden] + .xpc-volume-promo { margin-top: 20px; }
.xpc .xpc-vchip {
  border: 1px solid #E3E6E9 !important; background: #FFFFFF !important;
  border-radius: 9px !important; padding: 8px 14px !important;
  text-align: left; display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
.xpc .xpc-vchip:hover { border-color: #F9B13C !important; }
.xpc .xpc-vchip.is-active { background: #FFF6E3 !important; border-color: #F9B13C !important; }
.xpc .xpc-vchip { min-width: 78px !important; } /* anchos uniformes (vence el reset) */
.xpc .xpc-vchip-qty { font-size: 11px; font-weight: 600; color: #82888F; }
.xpc .xpc-vchip-price { font-size: 14px; font-weight: 700; color: #23262C; }
.xpc .xpc-vchip-off { font-size: 10px; font-weight: 700; color: #E5443C; }
.xpc .xpc-vchip-off.is-empty { visibility: hidden; } /* placeholder: mantiene la altura */

@media (max-width: 1023px) { .xpc .xpc-volume { padding: 18px 24px 20px; } }
@media (max-width: 639px)  { .xpc .xpc-volume { padding: 16px 16px 18px; } }

/* ===================================================================
   4) Footer
   =================================================================== */
.xpc .xpc-footer {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 32px; border-top: 1px solid #ECEEF0; background: #FAFBFB;
  border-radius: 0 0 16px 16px; margin-top: 20px;
}
.xpc .xpc-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.xpc .xpc-total { font-size: 28px; font-weight: 700; color: #23262C; }
.xpc .xpc-each  { font-size: 13px; font-weight: 500; color: #6F757D; }
.xpc .xpc-old   { font-size: 13px; color: #B4B9BF; text-decoration: line-through; }
.xpc .xpc-old[hidden], .xpc .xpc-off[hidden] { display: none; }
.xpc .xpc-off   { font-size: 13px; font-weight: 600; color: #E5443C; }
.xpc .xpc-details-toggle {
  padding: 0 !important; background: none !important; color: #23262C !important;
  font-size: 12px !important; font-weight: 600 !important;
  text-decoration: underline !important; text-underline-offset: 3px;
}
.xpc .xpc-continue {
  background: #F9B13C !important; color: #23262C !important;
  font-size: 14px !important; font-weight: 700 !important;
  padding: 14px 40px !important; border-radius: 10px !important;
}
.xpc .xpc-continue:hover { background: #EFA31F !important; }
.xpc .xpc-continue.is-disabled { opacity: .45; cursor: not-allowed; }
.xpc .xpc-continue.is-loading {
  cursor: wait; pointer-events: none; opacity: .9;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
}
.xpc .xpc-continue-spinner {
  width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid rgba(35,38,44,0.35); border-top-color: #23262C;
  display: inline-block; animation: xpcContinueSpin .7s linear infinite;
}
@keyframes xpcContinueSpin { to { transform: rotate(360deg); } }

.xpc .xpc-details-pop {
  position: absolute; left: 32px; bottom: calc(100% + 8px); width: 400px;
  background: #FFFFFF; border: 1px solid #ECEEF0; border-radius: 12px;
  box-shadow: 0 18px 40px rgba(35,38,44,0.18); padding: 6px 0; z-index: 9999;
}
.xpc .xpc-details-pop[hidden] { display: none; }
.xpc .xpc-formula .formula-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 16px; border-bottom: 1px solid #F0F2F4; font-size: 13px; color: #23262C;
}
.xpc .xpc-formula .formula-row:last-child { border-bottom: none; } /* fila Total sin separador */
.xpc .xpc-formula .formula-label { color: #23262C; }
.xpc .xpc-formula .formula-value { font-weight: 600; white-space: nowrap; color: #23262C; }
.xpc .xpc-formula .formula-fee { color: #6F757D; }
/* fila Total: label y monto mismo color/peso */
.xpc .xpc-formula .formula-row:last-child .formula-label,
.xpc .xpc-formula .formula-row:last-child .formula-value { color: #23262C; font-weight: 700; }

/* form2/3/4 (banners, magnetic signs, aluminum signs) usan otra estructura para
   el detalle de precio (.formN_formula con lineas .f2col de expresiones). Le damos
   el MISMO aspecto que yard signs (form1) sin tocar su contenido: cada .f2col se
   pinta como una fila con padding y separador, y el monto total se destaca. */
.xpc .xpc-formula .form2_formula,
.xpc .xpc-formula .form3_formula,
.xpc .xpc-formula .form4_formula { font-size: 13px; color: #23262C; }
.xpc .xpc-formula .f2col {
  padding: 9px 16px; border-bottom: 1px solid #F0F2F4; line-height: 1.45;
}
.xpc .xpc-formula .f2col:last-child { border-bottom: none; }
.xpc .xpc-formula .f2col .total { font-weight: 700; color: #23262C; white-space: nowrap; }
.xpc .xpc-formula .f2col .price_each,
.xpc .xpc-formula .f2col .sqft,
.xpc .xpc-formula .f2col .sqin,
.xpc .xpc-formula .f2col .sqft_price,
.xpc .xpc-formula .f2col .sqin_price { font-weight: 600; white-space: nowrap; }

/* ===================================================================
   5) Responsive
   =================================================================== */
@media (max-width: 1023px) {
  .xpc .xpc-head { padding: 18px 24px 12px; }
  .xpc .xpc-tabsbar { padding: 0 24px; }
  .xpc .xpc-fields { padding: 18px 24px 0; }
  .xpc .xpc-fbbar { padding: 14px 24px 0; }
  .xpc .xpc-footer { padding: 16px 24px; }
  .xpc .xpc-volume-promo { margin-left: 24px; margin-right: 24px; }
}
@media (max-width: 639px) {
  .xpc .xpc-head { padding: 16px 16px 12px; }
  .xpc .xpc-note { display: none; }
  .xpc .xpc-tabsbar { padding: 0 16px 12px; }
  .xpc .xpc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .xpc .xpc-tab {
    font-size: 12px !important; gap: 5px; padding: 10px 2px !important; justify-content: center;
    border: 1px solid #E3E6E9 !important; border-radius: 9px !important;
  }
  .xpc .xpc-tab.is-active { background: #FFF6E3 !important; border-color: #F9B13C !important; color: #23262C !important; }
  .xpc .xpc-fields { padding: 16px 16px 0; }
  .xpc .xpc-field { flex: 1 1 calc(50% - 6px); min-width: 0; max-width: none; }
  .xpc .xpc-qty { flex: 1 1 calc(50% - 6px); }
  .xpc .xpc-fbbar { padding: 12px 16px 0; }
  .xpc .xpc-footer { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px 16px; }
  .xpc .xpc-continue { width: 100%; padding: 14px 0 !important; }
  .xpc .xpc-details-pop { left: 12px; right: 12px; width: auto; }
  .xpc .xpc-volume-promo { margin-left: 16px; margin-right: 16px; }
}