/* ============================================================================ */
/* checkout.css (versión ajustada para que “Total” quede bajo la columna de cupones) */
/* ============================================================================ */

/* ====== CONTENEDOR GENERAL (Carrito y Checkout) usando CSS Grid ====== */
.cart-checkout-flex {
  display: grid;
  /* Dos columnas: primera de 2fr, segunda de 1fr */
  grid-template-columns: 2fr 1fr;
  /* Dos filas: la primera para “checkout” y “coupon”, la segunda para “total” en columna derecha */
  grid-template-rows: auto auto;
  /* Nombramos las áreas: 
     - “checkout” en fila 1 columna 1
     - “coupon”   en fila 1 columna 2
     - “total”    en fila 2 columna 2 (la fila 2 columna 1 se deja vacía) */
  grid-template-areas:
    "checkout coupon"
    "checkout total";
  gap: 1.5rem; /* Espacio entre filas y columnas */
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1rem;
  background-color: var(--blanco);
}

/* ====== ÁREA “checkout”: COLUMNA IZQUIERDA (facturación/envío) ====== */
.cart-checkout-main {
  grid-area: checkout;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(44, 85, 39, 0.07);
  padding: 1.3rem 1.1rem 0.9rem 1.1rem;
  font-size: 1.07rem;
}

/* Estilos internos de “checkout” */
.cart-checkout-main input,
.cart-checkout-main select,
.cart-checkout-main textarea {
  padding: 0.5rem 0.7rem;
  font-size: 1rem;
  box-sizing: border-box;
}

/* Aviso “Recogida en obrador” dentro de checkout */
.aviso-recogida-obrador {
  background: var(--verde-menta);
  color: var(--verde-abeto);
  border-radius: 12px;
  padding: 1.1rem 1.5rem;
  margin-bottom: 1.4rem;
  font-size: 1.07rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(44, 85, 39, 0.07);
  border-left: 6px solid var(--verde-abeto, #7ab774);
  display: block;
}
.aviso-recogida-obrador b {
  color: var(--verde-abeto, #7ab774);
}
.aviso-recogida-obrador .destacado {
  color: var(--verde-abeto, #7ab774);
  font-weight: 700;
}

/* Layout interno de campos de facturación: dos columnas */
.cart-checkout-main .woocommerce-billing-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2%;
  margin-bottom: 1.5rem;
}
/* Si un campo tiene “form-row-wide” o “notes”, que ocupe 2 columnas (100%) */
.cart-checkout-main .woocommerce-billing-fields__field-wrapper .form-row-wide,
.cart-checkout-main .woocommerce-billing-fields__field-wrapper .notes {
  grid-column: span 2;
}

/* Si no tiene “form-row-wide” ni “notes”, que ocupe 1 columna (50%) */
.cart-checkout-main
  .woocommerce-billing-fields__field-wrapper
  .form-row:not(.form-row-wide):not(.notes) {
  grid-column: span 1;
  width: 100%;
}

/* Estilos del bloque de cupones 
.cart-coupon {
  margin-bottom: 1.5rem;
}
.cart-coupon-title {
  font-weight: 600;
  margin-bottom: 0.7rem;
  font-size: 1.08rem;
  color: #1b2b13;
}
.cart-coupon-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.cart-coupon-input {
  flex: 1;
  border-radius: 8px;
  border: 1px solid #b5d399;
  padding: 0.6rem 1rem;
  background: #f9fdf4;
  font-size: 1rem;
}
.cart-coupon-button {
  background: #7ab774;
  color: #fff;
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.cart-coupon-button:hover {
  background: #466b11;
}*/

/* Mensajes (éxito o error de cupón) dentro de sidebar */
.woocommerce-checkout .cart-sidebar .woocommerce-message,
.woocommerce-checkout .cart-sidebar .woocommerce-error {
  text-align: right;
  justify-content: flex-start;
  display: flex;
  background: #f7faf5;
  border-left: 4px solid var(--verde-abeto, #7ab774);
  border-radius: 12px;
  margin-bottom: 1rem;
  border: 1px solid rgb(209, 213, 219) !important;
}

/* Link “Quitar” de cupón */
.remove-coupon-link,
.woocommerce-checkout .remove-coupon-link,
.woocommerce-checkout .woocommerce-remove-coupon {
  margin-left: 0.5rem;
  color: #888;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.remove-coupon-link:hover,
.woocommerce-checkout:hover .remove-coupon-link:hover,
.woocommerce-checkout:hover .woocommerce-remove-coupon:hover {
  color: var(--verde-abeto);
  text-decoration: underline;
}

/* ====== ÁREA “total”: FILA INFERIOR (tabla + botón) ====== */
.cart-total-block {
  grid-area: total;
  background: var(--blanco);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(44, 85, 39, 0.06);
  text-align: left;
  margin-top: 1rem;
  border-radius: 12px;
  width: 100% !important;
}
.cart-total-title {
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.8rem;
  color: #1b2b13;
}

.woocommerce-checkout-review-order-table,
.shop_table {
  border-radius: 12px !important;
  background: var(--blanco);
  border-collapse: separate !important;
  border-spacing: 0;
  margin-bottom: 1.2rem;
}
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td,
.shop_table th,
.shop_table td {
  padding: 0.7em 1.1em !important;
  border: none;
}
.woocommerce-checkout-review-order-table th {
  color: #263915;
  font-size: 1.01em;
  font-weight: 600;
  border-bottom: 1px solid #e2e7d6;
}
.woocommerce-checkout-review-order-table td {
  color: #17270a;
  font-size: 1.03em;
}
.woocommerce-checkout-review-order-table tfoot td {
  font-weight: 600;
  border-top: 1px solid #e2e7d6;
  background: var(--blanco);
}
.woocommerce-checkout-review-order-table tbody td {
  padding-top: 1em !important;
  padding-bottom: 1em !important;
}

/* ====== SPINNER PERSONALIZADO (igual que tu cart) ====== */
.woocommerce .blockUI.blockOverlay:before {
  content: "";
  display: block;
  width: 36px;
  height: 36px;
  margin: 40px auto;
  border: 4px solid #b5d399;
  border-top: 4px solid #7ab774;
  border-radius: 50%;
  animation: spin-rc 0.8s linear infinite;
}
@keyframes spin-rc {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ====== ESTILOS DE FLATPICKR ====== */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.flatpickr-disabled:active {
  background: #ececec !important;
  color: #b2b2b2 !important;
  cursor: not-allowed !important;
  border-radius: 12px !important;
  opacity: 1 !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.today.selected,
.flatpickr-day:hover.selected {
  background: var(--verde-abeto) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  background: rgba(122, 183, 116, 0.17) !important;
  color: var(--verde-abeto) !important;
}

.flatpickr-day.today:not(.selected) {
  border: 1.5px solid var(--verde-abeto) !important;
}

/* ====== ENLACE “política de privacidad” ====== */
.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--verde-abeto) !important;
  text-decoration: underline;
  font-weight: 600;
}
.woocommerce-checkout .woocommerce-privacy-policy-text a:hover {
  color: var(--verde-abeto) !important;
  background-color: var(--blanco) !important;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.5);
}

/* ====== BOTÓN “Realizar el pedido” ====== */
.woocommerce-checkout #payment #place_order,
.woocommerce-checkout .button.alt,
.woocommerce-checkout #payment .button {
  background: var(--verde-abeto, #14381a) !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 0.7rem 2.1rem !important;
  font-weight: bold !important;
  font-size: 1.07rem !important;
  box-shadow: 0 2px 8px rgba(44, 85, 39, 0.07);
  transition: background 0.2s;
  border: none !important;
  width: 60% !important;
  display: block !important;
  text-align: center !important;
}
.woocommerce-checkout #payment #place_order:hover,
.woocommerce-checkout .button.alt:hover,
.woocommerce-checkout #payment .button:hover {
  background: var(--verde-menta) !important;
  color: var(--verde-abeto) !important;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.5);
}

/* ====== OCULTAR CAMPOS NO NECESARIOS ====== */
.form-row.form-row-wide.address-field,
.form-row.validate-required#billing_country_field,
.form-row#billing_city_field,
.form-row#billing_state_field,
.form-row#billing_postcode_field {
  display: none !important;
}
#billing_company_field,
#billing_address_1_field,
#billing_address_2_field,
#billing_city_field,
#billing_state_field,
#billing_postcode_field,
#billing_country_field {
  display: none !important;
}

.cart-total-block {
  /* Fuerza que empiece en la columna 2 y ocupe solo esa columna */
  grid-column: 2 / 3;
  align-self: start !important;
}

/* 1) Asegúrate de que el grid tenga la segunda fila “. total” 
.woocommerce-checkout .cart-checkout-flex {
  grid-template-areas:
    "checkout coupon"
    ".       total" !important;
}*/

/* 2) Fuerza que el bloque “Total” ocupe la columna 2 */
.woocommerce-checkout .cart-total-block {
  grid-column-start: 2 !important;
  grid-column-end: 3 !important;
}

/* ====== SOLO EN CHECKOUT: Estilos para el sidebar de cupones ====== */
.woocommerce-checkout .cart-sidebar {
  grid-area: coupon;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(44, 85, 39, 0.06);
  padding: 1rem;
  align-self: start;
}

/* ==========================
   SOLO EN CHECKOUT: re-definir grid
   ========================== */
.woocommerce-checkout .cart-checkout-flex {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "checkout coupon"
    "checkout total" !important;
  gap: 1.5rem !important;
}

/* Aseguramos que el bloque “checkout” permanezca en la zona izquierda */
.woocommerce-checkout .cart-checkout-main {
  grid-area: checkout !important;
}

/* Aseguramos que el bloque “coupon” permanezca en la zona derecha, fila 1 */
.woocommerce-checkout .cart-sidebar {
  grid-area: coupon !important;
}

/* Ahora forzamos que “Total” ocupe solo la fila 2, columna 2 */
.woocommerce-checkout .cart-total-block {
  grid-area: total !important;
}

/* 2) Asegurar que .cart-sidebar (aside) ocupe la zona “coupon” */
.woocommerce-checkout .cart-sidebar {
  grid-area: coupon !important;
}

/* 3) Asegurar que .cart-checkout-main ocupe la zona “checkout” */
.woocommerce-checkout .cart-checkout-main {
  grid-area: checkout !important;
}

/* 4) Asegurar que .cart-total-block ocupe la zona “total” */
.woocommerce-checkout .cart-total-block {
  grid-area: total !important;
}

.woocommerce-checkout .place-order {
  text-align: center !important;
}

/* Oculta visual del radio */
.input-radio {
  position: absolute;
  opacity: 0;
}

/* Label que lo envuelve */
.wc_payment_method label {
  position: relative;
  padding-left: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Círculo visible */
.wc_payment_method label::before {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 2px solid #ccc;
  background: white;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

/* Cuando está checked, colorear */
.input-radio:checked + label::before {
  background-color: var(--verde-menta);
  border-color: var(--verde-abeto);
  box-shadow: 0 0 0 3px rgba(122, 183, 116, 0.3);
}

.input-radio:checked {
  accent-color: var(--verde-abeto);
  box-shadow: 0 0 0 4px rgba(20, 56, 26, 0.2); /* halo verde abeto suave */
}

.woocommerce-checkout .cart-sidebar {
  grid-area: coupon !important;
  align-self: start !important
  ;
}
.cart-checkout-flex {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  grid-template-rows: auto auto !important;
  grid-template-areas:
    "checkout coupon"
    ".        total" !important;
}
.checkout_coupon {
  display: flex !important;
  gap: 0.5rem;
}

.woocommerce-checkout-review-order {
  width: 100% !important;
}

.woocommerce-checkout .cart-total-block {
  grid-column: 2 / 3 !important;
  grid-row: 2 / 3 !important;
}
/*
.woocommerce-js form .form-row.woocommerce-validated .select2-container,
.woocommerce-js form .form-row.woocommerce-validated input.input-text,
.woocommerce-js form .form-row.woocommerce-validated select {
  border-color: var(--verde-abeto);
}

.woocommerce-NoticeGroup.woocommerce-NoticeGroup-checkout {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 1.7rem auto; 
  padding-left: 1.5rem; 
  padding-right: 1.5rem;
  box-sizing: border-box;
  grid-column: 1 / 2;
} 
*/
/* ====== RESPONSIVE: EN MOVIL (<768px) APILAR VERTICALMENTE ====== */
@media (max-width: 768px) {
  .woocommerce-checkout .cart-checkout-flex {
    /* Pasamos a una sola columna */
    grid-template-columns: 1fr !important;
    /* Ordenamos las áreas en vertical: “coupon” → “checkout” → “total” */
    grid-template-areas:
      "checkout"
      "coupon"
      "total" !important;
    gap: 1.2rem !important;
  }

  /* Ajustamos el padding en móvil */
  .cart-checkout-main {
    padding: 1rem !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .woocommerce-checkout .cart-sidebar {
    max-width: 100% !important;
    position: static !important;
    margin-bottom: 2.5rem !important;
    box-shadow: none !important;
    padding: 1rem !important;

    border-radius: 12px !important;
  }

  /* Dentro de facturación, forzar campos a 100% */
  .cart-checkout-main .woocommerce-billing-fields__field-wrapper {
    display: block !important;
  }
  .cart-checkout-main .woocommerce-billing-fields__field-wrapper .form-row {
    flex: unset !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Cupón en móvil: input y botón apilados 100% */
  .cart-coupon-form {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  .cart-coupon-input,
  .cart-coupon-button {
    width: 100% !important;
  }
  .woocommerce-checkout .cart-total-block {
    grid-column: 1 !important;
    grid-row: none !important;
  }
  /* Botón “Realizar pedido” en móvil: 100% ancho */
  .woocommerce-checkout .cart-total-block .button.alt,
  .woocommerce-checkout .cart-total-block #place_order {
    width: 100% !important;
    text-align: center !important;
    padding: 0.8rem 0 !important;
    font-size: 1rem !important;
  }
}