/**
Theme Name: Astra Child
Author: BelkCar Informatica
Author URI: https://belkcarinformatica.com
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* BelkCar INICIO  */

/* =========================================================
   Latins Cars - Formulario de contacto
   Scope: Formulario Spectra / UAGB
   ========================================================= */

.uagb-block-bf8c9776 {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(145deg, #0b0b0b 0%, #151515 100%);
  border: 1px solid rgba(189, 144, 60, 0.35);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* Separación general de campos */
.uagb-block-bf8c9776 .uagb-forms-field-set {
  margin-bottom: 22px;
}

/* Labels */
.uagb-block-bf8c9776 .uagb-forms-input-label {
  margin-bottom: 8px;
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Asterisco / requerido */
.uagb-block-bf8c9776 .required .uagb-forms-input-label::after,
.uagb-block-bf8c9776 .uagb-forms-input-label.required::after {
  color: #bd903c;
}

/* Inputs y textarea */
.uagb-block-bf8c9776 input.uagb-forms-input,
.uagb-block-bf8c9776 textarea.uagb-forms-input,
.uagb-block-bf8c9776 .uagb-forms-input {
  width: 100%;
  min-height: 52px;
  padding: 15px 16px;
  color: #ffffff;
  background: #050505;
  border: 1px solid rgba(226, 226, 226, 0.22);
  border-radius: 0;
  font-family: "Karla", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Textarea */
.uagb-block-bf8c9776 textarea.uagb-forms-input {
  min-height: 150px;
  resize: vertical;
}

/* Placeholder */
.uagb-block-bf8c9776 input.uagb-forms-input::placeholder,
.uagb-block-bf8c9776 textarea.uagb-forms-input::placeholder {
  color: rgba(226, 226, 226, 0.55);
}

/* Estado hover */
.uagb-block-bf8c9776 input.uagb-forms-input:hover,
.uagb-block-bf8c9776 textarea.uagb-forms-input:hover {
  border-color: rgba(189, 144, 60, 0.65);
}

/* Estado focus: clave para UX/accesibilidad */
.uagb-block-bf8c9776 input.uagb-forms-input:focus,
.uagb-block-bf8c9776 textarea.uagb-forms-input:focus {
  color: #ffffff;
  background: #000000;
  border-color: #bd903c;
  outline: none;
  box-shadow: 0 0 0 3px rgba(189, 144, 60, 0.22);
}

/* Botón enviar */
.uagb-block-bf8c9776 .uagb-forms-main-submit-button {
  width: 100%;
  justify-content: center;
  min-height: 54px;
  padding: 17px 28px;
  color: #000000 !important;
  background: #bd903c !important;
  border: 1px solid #bd903c !important;
  border-radius: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover del botón */
.uagb-block-bf8c9776 .uagb-forms-main-submit-button:hover {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #bd903c !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(189, 144, 60, 0.22);
}

/* Focus accesible del botón */
.uagb-block-bf8c9776 .uagb-forms-main-submit-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

/* Mensajes de éxito y error */
.uagb-forms-success-message-bf8c9776,
.uagb-forms-failed-message-bf8c9776 {
  max-width: 720px;
  margin: 22px auto 0;
  padding: 16px 18px;
  font-family: "Karla", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  border-left: 4px solid #bd903c;
  background: #111111;
  color: #ffffff;
}

.uagb-forms-failed-message-bf8c9776 {
  border-left-color: #c75151;
}

/* Ajustes mobile */
@media (max-width: 544px) {
  .uagb-block-bf8c9776 {
    padding: 24px 18px;
  }

  .uagb-block-bf8c9776 .uagb-forms-field-set {
    margin-bottom: 18px;
  }

  .uagb-block-bf8c9776 input.uagb-forms-input,
  .uagb-block-bf8c9776 textarea.uagb-forms-input,
  .uagb-block-bf8c9776 .uagb-forms-input {
    font-size: 16px;
    min-height: 50px;
  }

  .uagb-block-bf8c9776 .uagb-forms-main-submit-button {
    min-height: 52px;
    font-size: 12px;
  }
}
/* =========================================================
   LATINS CARS - CHECKOUT CLÁSICO DE WOOCOMMERCE
   Página: Finalizar compra
   ---------------------------------------------------------
   Este CSS NO es para WooCommerce Blocks.
   Es para el checkout clásico:
   form.checkout.woocommerce-checkout
   ========================================================= */


/* =========================================================
   1) CONTENEDOR GENERAL DEL CHECKOUT
   ---------------------------------------------------------
   Aplica al formulario completo de finalizar compra.
   Le da un fondo oscuro, borde dorado sutil y espacio interno.
   ========================================================= */

.woocommerce form.checkout.woocommerce-checkout {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px);
  background: #050505;
  border: 1px solid rgba(189, 144, 60, 0.25);
}


/* =========================================================
   2) COLUMNAS PRINCIPALES DEL CHECKOUT
   ---------------------------------------------------------
   En el checkout clásico WooCommerce usa:
   - #customer_details para datos del cliente
   - #order_review para el resumen del pedido

   Con esto les damos apariencia de tarjetas oscuras.
   ========================================================= */

.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review {
  background: #0b0b0b;
  border: 1px solid rgba(226, 226, 226, 0.12);
  padding: clamp(20px, 3vw, 32px);
}


/* =========================================================
   3) TÍTULOS DEL CHECKOUT
   ---------------------------------------------------------
   Aplica a títulos como:
   - Detalles de facturación
   - Información adicional
   - Tu pedido

   Los dejamos blancos, en mayúscula y con mejor jerarquía.
   ========================================================= */

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(189, 144, 60, 0.35);
}


/* =========================================================
   4) LABELS / NOMBRES DE CAMPOS
   ---------------------------------------------------------
   Aplica a textos como:
   Nombre, Apellido, País, Dirección, Teléfono, Email.
   ========================================================= */

.woocommerce-checkout label {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 7px;
}


/* =========================================================
   5) CAMPOS DE TEXTO, EMAIL, TELÉFONO Y TEXTAREA
   ---------------------------------------------------------
   Estiliza los campos reales del checkout clásico.
   La clase principal usada por WooCommerce es .input-text.
   ========================================================= */

.woocommerce-checkout .input-text,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout select {
  width: 100%;
  min-height: 52px;
  color: #ffffff;
  background: #000000;
  border: 1px solid rgba(226, 226, 226, 0.24);
  border-radius: 0;
  font-family: "Karla", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  padding: 14px 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}


/* =========================================================
   6) PLACEHOLDERS
   ---------------------------------------------------------
   Hace que los textos de ejemplo dentro de los campos
   se vean suaves, sin competir con el texto real.
   ========================================================= */

.woocommerce-checkout .input-text::placeholder,
.woocommerce-checkout textarea::placeholder {
  color: rgba(226, 226, 226, 0.55);
}


/* =========================================================
   7) HOVER DE LOS CAMPOS
   ---------------------------------------------------------
   Cuando el usuario pasa el mouse sobre un campo,
   el borde toma un dorado suave.
   ========================================================= */

.woocommerce-checkout .input-text:hover,
.woocommerce-checkout textarea:hover,
.woocommerce-checkout select:hover {
  border-color: rgba(189, 144, 60, 0.65);
}


/* =========================================================
   8) FOCUS DE LOS CAMPOS
   ---------------------------------------------------------
   Estado clave de UX.
   Cuando el usuario hace clic o navega con teclado,
   el campo se destaca claramente en dorado.
   ========================================================= */

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout input[type="text"]:focus,
.woocommerce-checkout input[type="email"]:focus,
.woocommerce-checkout input[type="tel"]:focus,
.woocommerce-checkout input[type="number"]:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-checkout select:focus {
  color: #ffffff;
  background: #000000;
  border-color: #bd903c !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(189, 144, 60, 0.22);
}


/* =========================================================
   9) SELECT2 DE WOOCOMMERCE
   ---------------------------------------------------------
   WooCommerce suele usar Select2 para el campo de país,
   provincia, región o similares.
   Estos campos no siempre toman el estilo de los inputs comunes.
   ========================================================= */

.woocommerce-checkout .select2-container--default .select2-selection--single {
  height: 52px;
  color: #ffffff;
  background: #000000;
  border: 1px solid rgba(226, 226, 226, 0.24);
  border-radius: 0;
}


.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: #ffffff;
  line-height: 52px;
  padding-left: 16px;
}


.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 52px;
}


.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce-checkout .select2-container--default .select2-selection--single:focus {
  border-color: #bd903c;
  box-shadow: 0 0 0 3px rgba(189, 144, 60, 0.22);
}


/* =========================================================
   10) FILAS DEL FORMULARIO
   ---------------------------------------------------------
   Mejora la separación vertical entre campos.
   WooCommerce usa .form-row para envolver cada campo.
   ========================================================= */

.woocommerce-checkout .form-row {
  margin-bottom: 20px;
}


/* =========================================================
   11) CAMPOS OBLIGATORIOS
   ---------------------------------------------------------
   El asterisco de requerido se muestra en dorado,
   integrándolo con la identidad visual del sitio.
   ========================================================= */

.woocommerce-checkout abbr.required {
  color: #bd903c;
  text-decoration: none;
}


/* =========================================================
   12) TABLA DEL RESUMEN DEL PEDIDO
   ---------------------------------------------------------
   Estiliza la tabla donde aparecen:
   - Producto
   - Subtotal
   - Envío
   - Total
   ========================================================= */

.woocommerce-checkout-review-order-table {
  color: #e2e2e2;
  background: transparent;
  border: 1px solid rgba(226, 226, 226, 0.12);
  border-collapse: collapse;
}


/* Celdas de la tabla */
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  color: #e2e2e2;
  border-color: rgba(226, 226, 226, 0.12);
  padding: 16px;
}


/* Encabezados de tabla */
.woocommerce-checkout-review-order-table th {
  color: #ffffff;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* Nombre de producto dentro del resumen */
.woocommerce-checkout-review-order-table .product-name {
  color: #ffffff;
  font-weight: 600;
}


/* Precios dentro del resumen */
.woocommerce-checkout-review-order-table .amount {
  color: #bd903c;
  font-weight: 700;
}


/* =========================================================
   13) TOTAL FINAL
   ---------------------------------------------------------
   Hace que el total final tenga más peso visual.
   ========================================================= */

.woocommerce-checkout-review-order-table .order-total th,
.woocommerce-checkout-review-order-table .order-total td {
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  border-top: 1px solid rgba(189, 144, 60, 0.45);
}


.woocommerce-checkout-review-order-table .order-total .amount {
  color: #bd903c;
  font-size: 20px;
  font-weight: 800;
}


/* =========================================================
   14) MÉTODOS DE PAGO
   ---------------------------------------------------------
   Estiliza la caja de métodos de pago.
   WooCommerce usa #payment para esta sección.
   ========================================================= */

.woocommerce-checkout #payment {
  background: #050505;
  border: 1px solid rgba(226, 226, 226, 0.12);
  border-radius: 0;
  margin-top: 24px;
}


/* Cada método de pago */
.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid rgba(226, 226, 226, 0.12);
  padding: 20px;
}


/* Texto de métodos de pago */
.woocommerce-checkout #payment ul.payment_methods li,
.woocommerce-checkout #payment ul.payment_methods label {
  color: #ffffff;
}


/* Caja descriptiva del método de pago */
.woocommerce-checkout #payment div.payment_box {
  color: #e2e2e2;
  background: rgba(189, 144, 60, 0.08);
  border: 1px solid rgba(189, 144, 60, 0.25);
}


/* Flecha superior de la caja de pago */
.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: rgba(189, 144, 60, 0.25);
}


/* =========================================================
   15) BOTÓN PRINCIPAL: REALIZAR PEDIDO
   ---------------------------------------------------------
   Es el CTA más importante del checkout.
   Lo hacemos dorado, ancho completo y bien visible.
   ========================================================= */

.woocommerce-checkout #place_order,
.woocommerce-checkout button.button,
.woocommerce-checkout input.button {
  width: 100%;
  min-height: 56px;
  color: #000000 !important;
  background: #bd903c !important;
  border: 1px solid #bd903c !important;
  border-radius: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 17px 28px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}


/* Hover del botón principal */
.woocommerce-checkout #place_order:hover,
.woocommerce-checkout button.button:hover,
.woocommerce-checkout input.button:hover {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #bd903c !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(189, 144, 60, 0.22);
}


/* Focus accesible del botón principal */
.woocommerce-checkout #place_order:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}


/* =========================================================
   16) AVISOS, ERRORES Y MENSAJES
   ---------------------------------------------------------
   Estiliza mensajes como:
   - Campo obligatorio
   - Error de pago
   - Cupón aplicado
   - Avisos de WooCommerce
   ========================================================= */

.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
  color: #ffffff;
  background: #111111;
  border-top-color: #bd903c;
}


/* Error específico */
.woocommerce-error {
  border-top-color: #c75151;
}


/* Links dentro de avisos */
.woocommerce-error a,
.woocommerce-info a,
.woocommerce-message a {
  color: #bd903c;
}


/* =========================================================
   17) CUPÓN
   ---------------------------------------------------------
   Estiliza el bloque de cupón si WooCommerce lo muestra.
   ========================================================= */

.woocommerce-form-coupon,
.woocommerce-checkout .checkout_coupon {
  background: #0b0b0b;
  border: 1px solid rgba(226, 226, 226, 0.12);
  padding: 22px;
}


/* =========================================================
   18) LINKS DEL CHECKOUT
   ---------------------------------------------------------
   Aplica a enlaces de términos, login, cupón, etc.
   ========================================================= */

.woocommerce-checkout a {
  color: #bd903c;
  text-decoration: none;
}


.woocommerce-checkout a:hover {
  color: #ffffff;
  text-decoration: underline;
}


/* =========================================================
   19) AJUSTES MOBILE
   ---------------------------------------------------------
   En celulares:
   - Reduce paddings
   - Evita que el checkout quede apretado
   - Mantiene botones cómodos para tocar
   ========================================================= */

@media (max-width: 768px) {
  .woocommerce form.checkout.woocommerce-checkout {
    padding: 18px;
    border-left: 0;
    border-right: 0;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review {
    padding: 20px 16px;
  }

  .woocommerce-checkout h3,
  .woocommerce-checkout #order_review_heading {
    font-size: 18px;
  }

  .woocommerce-checkout .input-text,
  .woocommerce-checkout input[type="text"],
  .woocommerce-checkout input[type="email"],
  .woocommerce-checkout input[type="tel"],
  .woocommerce-checkout input[type="number"],
  .woocommerce-checkout textarea,
  .woocommerce-checkout select {
    font-size: 16px;
    min-height: 50px;
  }

  .woocommerce-checkout #place_order {
    min-height: 54px;
    font-size: 12px;
  }
}
/* =========================================================
   AJUSTES FINALES CHECKOUT LATINS CARS
   ---------------------------------------------------------
   Corrige:
   1) Botón "Seguir comprando"
   2) Caja de Contra reembolso
   3) Textarea de Notas del pedido
   ========================================================= */


/* =========================================================
   1) BOTÓN "SEGUIR COMPRANDO"
   ---------------------------------------------------------
   WooCommerce lo muestra dentro del aviso superior:
   "X producto se ha añadido a tu carrito."
   Normalmente aparece como:
   .woocommerce-message .button
   .woocommerce-message a.button
   ========================================================= */

.woocommerce-checkout .woocommerce-message a.button,
.woocommerce-checkout .woocommerce-message .button,
.woocommerce .woocommerce-message a.button,
.woocommerce .woocommerce-message .button {
  color: #000000 !important;
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 0 !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;

  padding: 16px 28px !important;
  min-height: 48px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: all 0.2s ease !important;
}


/* Hover del botón "Seguir comprando" */
.woocommerce-checkout .woocommerce-message a.button:hover,
.woocommerce-checkout .woocommerce-message .button:hover,
.woocommerce .woocommerce-message a.button:hover,
.woocommerce .woocommerce-message .button:hover {
  color: #000000 !important;
  background: #bd903c !important;
  border-color: #bd903c !important;
  text-decoration: none !important;
  transform: translateY(-1px);
}


/* Ajuste del contenedor del mensaje superior */
.woocommerce-checkout .woocommerce-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;

  color: #ffffff;
  background: #111111;
  border-top: 2px solid #bd903c;
  border-bottom: 1px solid rgba(189, 144, 60, 0.35);

  padding: 18px 22px;
  margin-bottom: 28px;
}


/* Icono/check del mensaje */
.woocommerce-checkout .woocommerce-message::before {
  color: #ffffff;
  top: auto;
}


/* =========================================================
   2) BLOQUE "CONTRA REEMBOLSO"
   ---------------------------------------------------------
   En tu HTML real aparece así:
   li.payment_method_cod
   div.payment_box.payment_method_cod

   El problema visual actual es que el box quedó blanco.
   Acá lo pasamos a fondo oscuro con borde dorado suave.
   ========================================================= */

.woocommerce-checkout #payment ul.payment_methods li.payment_method_cod {
  background: #0b0b0b !important;
  border: 1px solid rgba(189, 144, 60, 0.28) !important;
  padding: 16px !important;
  margin-bottom: 0 !important;
}


/* Label "Contra reembolso" */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cod > label {
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
}


/* Radio del método de pago */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cod input[type="radio"] {
  accent-color: #bd903c;
  margin-right: 8px;
}


/* Caja descriptiva: "Paga en efectivo..." */
.woocommerce-checkout #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box.payment_method_cod,
.woocommerce-checkout #payment ul.payment_methods li div.payment_box {
  color: #e2e2e2 !important;
  background: rgba(189, 144, 60, 0.10) !important;
  border: 1px solid rgba(189, 144, 60, 0.35) !important;
  border-radius: 0 !important;

  padding: 14px 16px !important;
  margin: 14px 0 0 !important;

  font-family: "Karla", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}


/* Texto interno del box */
.woocommerce-checkout #payment div.payment_box p,
.woocommerce-checkout #payment div.payment_box.payment_method_cod p {
  color: #e2e2e2 !important;
  margin: 0 !important;
}


/* Flechita superior del box de pago */
.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box.payment_method_cod::before {
  border-bottom-color: rgba(189, 144, 60, 0.35) !important;
}


/* =========================================================
   3) NOTAS DEL PEDIDO
   ---------------------------------------------------------
   El campo real es:
   #order_comments_field
   textarea#order_comments

   El problema visual actual es que el textarea quedó blanco.
   ========================================================= */

.woocommerce-checkout #order_comments_field {
  margin-top: 18px;
}


/* Label "Notas del pedido (opcional)" */
.woocommerce-checkout #order_comments_field label {
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}


/* Texto "(opcional)" */
.woocommerce-checkout #order_comments_field .optional {
  color: #8a8a8a !important;
  font-weight: 600 !important;
}


/* Textarea real de notas */
.woocommerce-checkout textarea#order_comments,
.woocommerce-checkout #order_comments_field textarea.input-text {
  width: 100% !important;
  min-height: 120px !important;

  color: #ffffff !important;
  background: #000000 !important;
  border: 1px solid rgba(226, 226, 226, 0.24) !important;
  border-radius: 0 !important;

  font-family: "Karla", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;

  padding: 14px 16px !important;
  resize: vertical !important;

  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}


/* Placeholder de notas */
.woocommerce-checkout textarea#order_comments::placeholder,
.woocommerce-checkout #order_comments_field textarea.input-text::placeholder {
  color: rgba(226, 226, 226, 0.45) !important;
}


/* Hover del textarea */
.woocommerce-checkout textarea#order_comments:hover,
.woocommerce-checkout #order_comments_field textarea.input-text:hover {
  border-color: rgba(189, 144, 60, 0.65) !important;
}


/* Focus del textarea */
.woocommerce-checkout textarea#order_comments:focus,
.woocommerce-checkout #order_comments_field textarea.input-text:focus {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #bd903c !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(189, 144, 60, 0.22) !important;
}


/* =========================================================
   4) AJUSTE MOBILE PARA EL BOTÓN SUPERIOR
   ---------------------------------------------------------
   En mobile el aviso puede quedar demasiado apretado.
   Lo pasamos a columna para que el botón no se rompa.
   ========================================================= */

@media (max-width: 768px) {
  .woocommerce-checkout .woocommerce-message {
    flex-direction: column;
    align-items: flex-start;
  }

  .woocommerce-checkout .woocommerce-message a.button,
  .woocommerce-checkout .woocommerce-message .button {
    width: 100% !important;
  }

  .woocommerce-checkout textarea#order_comments,
  .woocommerce-checkout #order_comments_field textarea.input-text {
    min-height: 110px !important;
  }
}

/* =========================================================
   LATINS CARS - PÁGINA PEDIDO RECIBIDO / THANK YOU PAGE
   URL: /finalizar-compra/order-received/
   ---------------------------------------------------------
   Aplica solo cuando WooCommerce muestra la confirmación
   final luego de realizar el pedido.
   ========================================================= */


/* =========================================================
   1) CONTENEDOR GENERAL DEL PEDIDO RECIBIDO
   ---------------------------------------------------------
   La clase .woocommerce-order-received está en el body.
   Así evitamos afectar carrito, checkout o tienda.
   ========================================================= */

body.woocommerce-order-received .woocommerce-order {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px);
  background: #050505;
  border: 1px solid rgba(189, 144, 60, 0.25);
}


/* =========================================================
   2) MENSAJE PRINCIPAL DE ÉXITO
   ---------------------------------------------------------
   Texto: "Gracias. Tu pedido ha sido recibido."
   Lo convertimos en una caja destacada de confirmación.
   ========================================================= */

body.woocommerce-order-received .woocommerce-thankyou-order-received {
  position: relative;
  color: #ffffff !important;
  background: #111111;
  border-top: 2px solid #bd903c;
  border-bottom: 1px solid rgba(189, 144, 60, 0.35);
  padding: 22px 24px 22px 58px;
  margin: 0 0 28px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}


/* Icono visual antes del mensaje */
body.woocommerce-order-received .woocommerce-thankyou-order-received::before {
  content: "✓";
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  color: #000000;
  background: #bd903c;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
}


/* =========================================================
   3) RESUMEN SUPERIOR DEL PEDIDO
   ---------------------------------------------------------
   WooCommerce muestra:
   - Número de pedido
   - Fecha
   - Total
   - Método de pago

   En tu HTML aparece como:
   .woocommerce-order-overview
   .woocommerce-thankyou-order-details
   .order_details
   ========================================================= */

body.woocommerce-order-received ul.woocommerce-order-overview,
body.woocommerce-order-received ul.woocommerce-thankyou-order-details,
body.woocommerce-order-received ul.order_details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 34px !important;
  padding: 0 !important;
  list-style: none !important;
}


/* Cada dato del resumen */
body.woocommerce-order-received ul.woocommerce-order-overview li,
body.woocommerce-order-received ul.woocommerce-thankyou-order-details li,
body.woocommerce-order-received ul.order_details li {
  float: none !important;
  margin: 0 !important;
  padding: 18px 16px !important;
  color: #8a8a8a !important;
  background: #0b0b0b;
  border: 1px solid rgba(226, 226, 226, 0.12) !important;
  border-right: 1px solid rgba(226, 226, 226, 0.12) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.4;
  text-transform: uppercase;
}


/* Valor dentro de cada dato */
body.woocommerce-order-received ul.woocommerce-order-overview li strong,
body.woocommerce-order-received ul.woocommerce-thankyou-order-details li strong,
body.woocommerce-order-received ul.order_details li strong {
  display: block;
  margin-top: 8px;
  color: #ffffff !important;
  font-family: "Karla", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}


/* Precios dentro del resumen */
body.woocommerce-order-received ul.order_details .amount,
body.woocommerce-order-received .woocommerce-Price-amount {
  color: #bd903c !important;
  font-weight: 800;
}


/* =========================================================
   4) TEXTO DE INSTRUCCIÓN DE PAGO
   ---------------------------------------------------------
   WooCommerce puede mostrar frases como:
   "Paga en efectivo en el momento de llegada a destino."
   ========================================================= */

body.woocommerce-order-received .woocommerce-order > p:not(.woocommerce-thankyou-order-received) {
  color: #e2e2e2;
  background: rgba(189, 144, 60, 0.08);
  border: 1px solid rgba(189, 144, 60, 0.28);
  padding: 18px 20px;
  margin: 0 0 28px;
  font-family: "Karla", sans-serif;
  font-size: 16px;
  line-height: 1.6;
}


/* =========================================================
   5) TÍTULOS DE SECCIONES
   ---------------------------------------------------------
   Aplica a:
   - Detalles del pedido
   - Dirección de facturación
   - Dirección de envío, si existiera
   ========================================================= */

body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received h2,
body.woocommerce-order-received h3 {
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(189, 144, 60, 0.35);
}


/* =========================================================
   6) BLOQUE DETALLES DEL PEDIDO
   ---------------------------------------------------------
   Contiene la tabla final con producto, subtotal,
   método de pago y total.
   ========================================================= */

body.woocommerce-order-received .woocommerce-order-details {
  background: #0b0b0b;
  border: 1px solid rgba(226, 226, 226, 0.12);
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: 32px;
}


/* Tabla del pedido */
body.woocommerce-order-received .woocommerce-table--order-details,
body.woocommerce-order-received table.shop_table.order_details {
  width: 100%;
  color: #e2e2e2;
  background: transparent;
  border: 1px solid rgba(226, 226, 226, 0.12);
  border-collapse: collapse;
  margin: 0;
}


/* Celdas */
body.woocommerce-order-received .woocommerce-table--order-details th,
body.woocommerce-order-received .woocommerce-table--order-details td,
body.woocommerce-order-received table.shop_table.order_details th,
body.woocommerce-order-received table.shop_table.order_details td {
  color: #e2e2e2 !important;
  border-color: rgba(226, 226, 226, 0.12) !important;
  padding: 16px !important;
}


/* Encabezados */
body.woocommerce-order-received .woocommerce-table--order-details th,
body.woocommerce-order-received table.shop_table.order_details th {
  color: #ffffff !important;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}


/* Nombre del producto */
body.woocommerce-order-received .woocommerce-table__product-name,
body.woocommerce-order-received .product-name,
body.woocommerce-order-received .product-name a {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none;
}


/* Cantidad de producto */
body.woocommerce-order-received .product-quantity {
  color: #8a8a8a !important;
  font-weight: 600;
}


/* Precios */
body.woocommerce-order-received .woocommerce-table--order-details .amount,
body.woocommerce-order-received table.shop_table.order_details .amount {
  color: #bd903c !important;
  font-weight: 800;
}


/* Total final dentro de la tabla */
body.woocommerce-order-received table.shop_table.order_details tfoot tr:last-child th,
body.woocommerce-order-received table.shop_table.order_details tfoot tr:last-child td {
  color: #ffffff !important;
  font-size: 18px;
  font-weight: 800;
  border-top: 1px solid rgba(189, 144, 60, 0.45) !important;
}


/* =========================================================
   7) DATOS DEL CLIENTE / DIRECCIÓN
   ---------------------------------------------------------
   WooCommerce muestra la dirección de facturación/envío
   en columnas o bloques al final.
   ========================================================= */

body.woocommerce-order-received .woocommerce-customer-details {
  background: #0b0b0b;
  border: 1px solid rgba(226, 226, 226, 0.12);
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: 32px;
}


/* Columnas de dirección */
body.woocommerce-order-received .woocommerce-columns,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
  color: #e2e2e2;
}


/* Caja de dirección */
body.woocommerce-order-received address {
  color: #e2e2e2 !important;
  background: #050505;
  border: 1px solid rgba(226, 226, 226, 0.12) !important;
  padding: 18px 20px !important;
  font-family: "Karla", sans-serif;
  font-size: 15px;
  line-height: 1.7;
}


/* Email y teléfono en datos del cliente */
body.woocommerce-order-received .woocommerce-customer-details--phone,
body.woocommerce-order-received .woocommerce-customer-details--email {
  color: #ffffff !important;
  margin-top: 10px;
}


/* =========================================================
   8) LINKS DE LA PÁGINA DE PEDIDO RECIBIDO
   ---------------------------------------------------------
   Aplica a producto, políticas, enlaces internos, etc.
   ========================================================= */

body.woocommerce-order-received .woocommerce-order a {
  color: #bd903c;
  text-decoration: none;
}


body.woocommerce-order-received .woocommerce-order a:hover {
  color: #ffffff;
  text-decoration: underline;
}


/* =========================================================
   9) BOTONES SI APARECEN
   ---------------------------------------------------------
   Algunos métodos de pago o acciones pueden mostrar botones.
   Los dejamos consistentes con el checkout.
   ========================================================= */

body.woocommerce-order-received .woocommerce-order .button,
body.woocommerce-order-received .woocommerce-order a.button,
body.woocommerce-order-received .woocommerce-order button.button {
  color: #000000 !important;
  background: #bd903c !important;
  border: 1px solid #bd903c !important;
  border-radius: 0 !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;

  padding: 16px 28px !important;
  min-height: 52px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  transition: all 0.2s ease !important;
}


body.woocommerce-order-received .woocommerce-order .button:hover,
body.woocommerce-order-received .woocommerce-order a.button:hover,
body.woocommerce-order-received .woocommerce-order button.button:hover {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #bd903c !important;
  text-decoration: none !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(189, 144, 60, 0.22);
}


/* =========================================================
   10) MOBILE
   ---------------------------------------------------------
   En celular el resumen superior pasa a una sola columna.
   ========================================================= */

@media (max-width: 768px) {
  body.woocommerce-order-received .woocommerce-order {
    padding: 18px;
    border-left: 0;
    border-right: 0;
  }

  body.woocommerce-order-received ul.woocommerce-order-overview,
  body.woocommerce-order-received ul.woocommerce-thankyou-order-details,
  body.woocommerce-order-received ul.order_details {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.woocommerce-order-received .woocommerce-thankyou-order-received {
    padding: 20px 18px 20px 54px;
    font-size: 16px;
  }

  body.woocommerce-order-received .woocommerce-order-details,
  body.woocommerce-order-received .woocommerce-customer-details {
    padding: 20px 16px;
  }

  body.woocommerce-order-received table.shop_table.order_details th,
  body.woocommerce-order-received table.shop_table.order_details td {
    padding: 14px 12px !important;
    font-size: 14px;
  }
}

/* =========================================================
   FIX - TÍTULOS PEDIDO RECIBIDO
   Corrige fondo blanco + texto blanco en:
   - Detalles del pedido
   - Dirección de facturación
   ========================================================= */

body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column__title,
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received section.woocommerce-order-details > h2,
body.woocommerce-order-received section.woocommerce-customer-details h2,
body.woocommerce-order-received .woocommerce-order h2,
body.woocommerce-order-received .woocommerce-order h3 {
  display: block !important;

  color: #ffffff !important;
  background: #0b0b0b !important;

  font-family: "Montserrat", sans-serif !important;
  font-size: clamp(18px, 2vw, 24px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;

  margin: 0 0 22px !important;
  padding: 18px 20px 14px !important;

  border: 1px solid rgba(226, 226, 226, 0.12) !important;
  border-bottom: 1px solid rgba(189, 144, 60, 0.45) !important;
  box-shadow: none !important;
}

/* Asegura que los contenedores padres no queden blancos */
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-customer-details,
body.woocommerce-order-received .woocommerce-columns,
body.woocommerce-order-received .woocommerce-column {
  background: #0b0b0b !important;
  color: #e2e2e2 !important;
}

/* Dirección de facturación: caja interna */
body.woocommerce-order-received .woocommerce-customer-details address,
body.woocommerce-order-received .woocommerce-column address {
  color: #e2e2e2 !important;
  background: #050505 !important;
  border: 1px solid rgba(226, 226, 226, 0.12) !important;
}

/* Por si Astra aplica fondo a títulos de WooCommerce Address */
body.woocommerce-order-received .woocommerce-Address h2,
body.woocommerce-order-received .woocommerce-Address h3,
body.woocommerce-order-received .woocommerce-column--billing-address h2,
body.woocommerce-order-received .woocommerce-column--billing-address h3 {
  color: #ffffff !important;
  background: #0b0b0b !important;
  border-color: rgba(189, 144, 60, 0.45) !important;
}

/* =========================================================
   FIX MENÚ HAMBURGUESA MOBILE - LATINS CARS
   ---------------------------------------------------------
   Corrige la home/header transparente donde Astra cambia
   el ícono del menú móvil a negro.
   ========================================================= */

@media (max-width: 921px) {

  /* Botón contenedor de la hamburguesa */
  .ast-theme-transparent-header
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .ast-mobile-menu-trigger-outline,
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .ast-mobile-menu-trigger-outline {
    color: #bd903c !important;
    background: transparent !important;
    border: 1px solid #bd903c !important;
    border-radius: 2px !important;
  }

  /* Ícono SVG de hamburguesa */
  .ast-theme-transparent-header
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .mobile-menu-toggle-icon
  .ast-mobile-svg,
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .mobile-menu-toggle-icon
  .ast-mobile-svg {
    fill: #bd903c !important;
    color: #bd903c !important;
  }

  /* Texto del botón si Astra lo imprime */
  .ast-theme-transparent-header
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .mobile-menu-wrap
  .mobile-menu,
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .mobile-menu-wrap
  .mobile-menu {
    color: #bd903c !important;
  }

  /* Hover / focus */
  .ast-theme-transparent-header
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .ast-mobile-menu-trigger-outline:hover,
  .ast-theme-transparent-header
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .ast-mobile-menu-trigger-outline:focus {
    color: #ffffff !important;
    border-color: #bd903c !important;
    background: rgba(189, 144, 60, 0.12) !important;
  }

  .ast-theme-transparent-header
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .ast-mobile-menu-trigger-outline:hover
  .ast-mobile-svg,
  .ast-theme-transparent-header
  [data-section="section-header-mobile-trigger"]
  .ast-button-wrap
  .ast-mobile-menu-trigger-outline:focus
  .ast-mobile-svg {
    fill: #ffffff !important;
  }
}