:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-5a681db *//* =========================================================
   INC / Nutfruit — Estilo checkout multistep (WooCommerce)
   Colores corporativos
   ========================================================= */

:root {
  --inc-primary: #1A5632;   /* verde oscuro */
  --inc-secondary: #FECC3B; /* amarillo */
  --inc-text: #7A7A7A;      /* gris */
  --inc-accent: #E0592A;    /* naranja */
}

a:hover {
    color: var(--inc-secondary);
}

a {
    color: var(--inc-accent);
}

/* Contenedor general */
.thwmscf-wrapper {
  font-family: inherit;
  color: var(--inc-text);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.thwmscf-wrapper *,
.thwmscf-wrapper *::before,
.thwmscf-wrapper *::after {
  box-sizing: border-box;
}

/* ---------- Rejilla de campos (esto es lo que faltaba: sin esto
   los form-row-first / form-row-last no se colocan en columnas y
   queda el hueco en blanco a la derecha) ---------- */
.woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 30px;
  width: 100%;
}

.woocommerce-billing-fields__field-wrapper .form-row {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
}

.woocommerce-billing-fields__field-wrapper .form-row-wide {
  grid-column: 1 / -1;
}

/* Country y State quedan en pareja (una columna cada uno) en vez de
   ocupar todo el ancho — así hacen pareja visual como Address/City */
#billing_country_field,
#billing_state_field {
  grid-column: auto !important;
}

@media (max-width: 600px) {
  .woocommerce-billing-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  #billing_country_field,
  #billing_state_field {
    grid-column: auto !important;
  }
}

/* ---------- Tabs (Company details / Payment) ---------- */
.thwmscf-tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  border-bottom: 2px solid #eee;
}

.thwmscf-tab {
  flex: 1;
}

.thwmscf-tab a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px;
  text-decoration: none;
  color: var(--inc-text);
  font-weight: 600;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.thwmscf-tab a.active,
.thwmscf-tab a:hover {
  color: var(--inc-primary);
  border-bottom-color: var(--inc-primary);
}

.thwmscf-index.thwmscf-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--inc-text);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.thwmscf-tab a.active .thwmscf-index.thwmscf-tab-icon {
  background: var(--inc-primary);
}

/* ---------- Encabezados de sección ---------- */
.thwmscf-accordion-label {
  text-decoration: none;
}

.thwmscf-tab-label {
  display: block;
  color: var(--inc-primary);
}

.woocommerce-billing-fields h3,
#order_review_heading {
  color: var(--inc-primary);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

/* ---------- Campos de formulario ---------- */
.form-row label {
  display: block;
  color: var(--inc-text);
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 14px;
}

.form-row label .required {
  color: var(--inc-accent);
}

.input-text,
select.input-text,
.select2-selection {
  width: 100%;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  height: auto !important;
  font-size: 14px;
  color: #333;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.input-text:focus,
.select2-container--focus .select2-selection {
  border-color: var(--inc-primary) !important;
  box-shadow: 0 0 0 3px rgba(26, 86, 50, 0.15);
  outline: none;
}

.select2-selection__rendered {
  line-height: normal !important;
  color: #333 !important;
  padding: 0 !important;
}

.select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 8px;
}

/* El propio plugin mete style="width:100%" en el span .select2-container,
   pero select2 lo recalcula por JS con un ancho fijo en px si el padre no
   tiene un ancho estable en el momento de inicializarse; forzarlo con
   !important lo deja siempre al 100% del campo */
.select2-container {
  width: 100% !important;
  display: block !important;
}

.select2-selection {
  display: flex !important;
  align-items: center;
}

/* Desplegable de resultados (esto es lo que se veía "roto" y solapado) */
.select2-dropdown {
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 9999;
}

.select2-search--dropdown {
  padding: 8px !important;
}

.select2-search__field {
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
  outline: none;
}

.select2-results__options {
  max-height: 220px;
}

.select2-results__option {
  padding: 8px 12px;
  font-size: 14px;
}

.select2-results__option--highlighted[aria-selected] {
  background: var(--inc-primary) !important;
  color: #fff !important;
}

.select2-results__option[aria-selected="true"] {
  background: #f0f5f2;
  color: var(--inc-primary);
}

/* ---------- Botones de navegación (Previous/Next) ---------- */
.thwmscf-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
}

.thwmscf-buttons input[type="button"] {
  background: var(--inc-primary);
  color: #fff;
  border: none;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}

.thwmscf-buttons input.action-prev {
  background: transparent;
  color: var(--inc-text);
  border: 1px solid #ddd;
}

.thwmscf-buttons input:hover:not(:disabled) {
  opacity: 0.9;
}

.thwmscf-buttons input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Tabla de resumen del pedido ---------- */
.shop_table.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 25px;
}

.shop_table thead th {
  background: var(--inc-primary);
  color: #fff;
  text-align: left;
  padding: 12px 15px;
  font-size: 14px;
}

.shop_table td,
.shop_table tfoot th {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  color: var(--inc-text);
}

.shop_table .order-total th,
.shop_table .order-total td {
  border-top: 2px solid var(--inc-primary);
  border-bottom: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--inc-primary);
}

.woocommerce-Price-amount {
  color: inherit;
}

/* ---------- Métodos de pago ---------- */
.wc_payment_methods {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.wc_payment_method {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: border-color .2s ease, background .2s ease;
}

.wc_payment_method label {
  font-weight: 600;
  color: var(--inc-text);
  cursor: pointer;
}

.wc_payment_method:has(input:checked) {
  border-color: var(--inc-primary);
  background: rgba(26, 86, 50, 0.05);
}

.wc_payment_method:has(input:checked) label {
  color: var(--inc-primary);
}

.payment_box {
  background: var(--inc-secondary);
  color: #4a3b00;
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 13px;
}

.payment_box p {
  margin: 0;
}

/* ---------- Checkbox de Términos y Condiciones personalizado ---------- */
.woocommerce-terms-and-conditions-wrapper {
  text-align: left !important;
}

.inc-custom-terms {
  text-align: left !important;
  margin: 20px 0 !important;
  padding: 16px !important;
  border: 1px solid #ddd !important;
  border-radius: 8px !important;
  background: #fafafa !important;
}

.inc-custom-terms label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 600;
  color: var(--inc-text);
  cursor: pointer;
  text-align: left !important;
}

.inc-custom-terms input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--inc-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.inc-custom-terms label strong {
  color: var(--inc-primary);
}

.inc-custom-terms-text {
  text-align: left !important;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e5e5;
  max-height: 220px;
  overflow-y: auto;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--inc-text);
}

.inc-custom-terms-text h4 {
  text-align: left !important;
  color: var(--inc-primary) !important;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 16px 0 6px 0;
}

.inc-custom-terms-text h4:first-child {
  margin-top: 0;
}

.inc-custom-terms-text p {
  text-align: left !important;
  margin: 0 0 10px 0;
}

.inc-custom-terms-text p:last-child {
  margin-bottom: 0;
}

.inc-custom-terms-text a {
  color: var(--inc-primary);
}

/* ---------- Botón "Place order" ---------- */
#place_order,
button.button.alt {
  background: var(--inc-accent);
  color: #fff;
  border: none;
  padding: 14px 30px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: opacity .2s ease;
}

#place_order:hover,
button.button.alt:hover {
  opacity: 0.9;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .thwmscf-tab a {
    flex-direction: column;
    font-size: 12px;
    text-align: center;
    gap: 4px;
  }

  .thwmscf-buttons {
    flex-direction: column;
    gap: 10px;
  }
}/* End custom CSS */