* {
  margin: 0;
}

.custom-checkout-container {
  position: relative;
  padding: 96px 20px;
  display: flex;
  flex-direction: row-reverse;
  gap: 30px;
  font-family: 'Manrope', sans-serif;
  margin: 0 auto;
  max-width: 1200px;
}

.custom-checkout-container .woocommerce-message {
  width: calc(100% - 40px);
  min-width: 400px;
  position: absolute;
  top: 15px;
  right: 20px;
}

.custom-checkout-container h2,
.custom-checkout-container h3 {
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 400 !important;
  letter-spacing: 2px;
  margin-bottom: 15px;
  font-weight: bold;
}

.checkout-summary {
  width: 35%;
  min-width: 350px;
  padding: 20px;
  border-radius: 0px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  height: min-content;
  position: sticky;
  top: 50px;
}

.checkout-summary ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin-bottom: 30px;
}

.checkout-summary .cart-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.checkout-summary img {
  width: 50px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.checkout-summary .product-image {
  position: relative;
  margin-right: 20px;
  width: 60px;
  height: 60px;
}

.checkout-summary .cart-item .product-name {
  font-size: 14px;
  font-weight: 500;
}

.checkout-summary .product-image .product-quantity {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  padding: 0 7px;
  border-radius: 50%;
  background-color: #ccc;
}

.cart-coupon {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.cart-coupon p {
  font-size: 14px;
  min-width: 100%;
}

.cart-coupon button {
  min-width: 100%;
}

.cart-coupon .form-row input.input-text {
  font-size: 14px;
  border-radius: 0px;
}

.custom-checkout-container .cart-coupon .woocommerce-message {
  width: 100%;
  min-width: 0;
  position: static;
  margin-bottom: 0;
}

.cart-coupon .woocommerce-info {
  margin-bottom: 10px;
  border-top: none;
  padding: 0;
  background-color: transparent !important;
}

.cart-coupon .woocommerce-info::before {
  display: none;
}

.cart-coupon .woocommerce-info a {
  color: #b9a081;
}

.woocommerce .cart-coupon form.checkout_coupon {
  margin-top: 10px;
  margin-bottom: 0;
}

.cart-totals {
  display: grid;
  gap: 10px;
  /* Espaciado entre las filas */
}

.woocommerce .cart-totals table.shop_table {
  margin-bottom: 0;
  border: none;
  border-collapse: collapse;
}

.woocommerce .cart-totals table.shop_table tfoot {
  border: none;
  border-collapse: collapse;
}

.woocommerce .cart-totals table.shop_table tfoot a {
  color: #b9a081;
}

.woocommerce .cart-totals table.shop_table tfoot tr,
.woocommerce .cart-totals table.shop_table tfoot tr th,
.woocommerce .cart-totals table.shop_table tfoot tr td {
  border: none;
  font-size: 16px;
}

.woocommerce .cart-totals table.shop_table tfoot tr th {
  font-weight: 500;
  padding: 9px 0;
}

.woocommerce .cart-totals table.shop_table tfoot tr td {
  text-align: end;
  padding: 9px 0;
}

.woocommerce .cart-totals table.shop_table tfoot tr.woocommerce-shipping-totals td {
  font-weight: 500;
}

.cart-row {
  display: grid;
  grid-template-columns: 70% 30%;
  /* Define el ancho de las columnas */
  align-items: center;
  /* Centra verticalmente el contenido */
  padding: 5px 0;
  /* Espaciado interno */
}

.cart-row strong {
  text-align: left;
  /* Alinea el texto a la izquierda */
}

.cart-row p {
  text-align: left;
  /* Alinea el texto a la izquierda */
}

.cart-row span {
  text-align: right;
  /* Alinea los precios a la derecha */
}

.checkout-form {
  display: flex;
  height: fit-content;
  flex-direction: column;
  width: 100%;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 0px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.checkout-form .shipping-details,
.checkout-form .billing-details {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

.woocommerce-billing-fields,
.woocommerce-shipping-fields {
  width: 100%;
}

.woocommerce-billing-fields h3 {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.checkout-form .woocommerce-billing-fields__field-wrapper,
.checkout-form .woocommerce-shipping-fields__field-wrapper {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 20px;
}

.checkout-form label {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 5px;
  display: inline-block;
}

.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form select {
  width: 100%;
  padding: 10px;
  border: 1px solid #aaaaaa;
  border-radius: 0px;
  font-size: 14px;
  box-sizing: border-box;
}

.checkout-form .select2-container--default .select2-selection--single {
  border-radius: 0px;
}

.select2-selection,
.select2-selection__rendered,
.select2-selection__arrow {
  height: 46px !important;
}

.select2-selection__rendered {
  line-height: 46px !important;
}

.checkout-form p {
  margin: 0;
}

.checkout-form .woocommerce-address-fields__field-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
  row-gap: 15px;
}

.checkout-form input[type="text"]:focus,
.checkout-form input[type="email"]:focus,
.checkout-form input[type="tel"]:focus,
.checkout-form select:focus {
  border-color: #aaaaaa;
  outline: none;
}

.form-row {
  border-color: #aaaaaa !important;
}

.custom-checkout-container button {
  background-color: #b9a081 !important;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 0px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.checkout-form .woocommerce-checkout-review-order {
  margin-top: 20px;
}

#billing_country_field,
#billing_address_1_field,
#shipping_country_field,
#shipping_address_1_field,
#metodo_envio_field,
#billing_email_field,
#billing_address_2_field,
#shipping_address_2_field,
#fecha_entrega_field,
#billing_dni_field,
#billing_state_field,
#billing_phone_field,
#shipping_state_field,
#shipping_phone_field {
  width: 100%;
}

#billing_first_name_field,
#billing_last_name_field,
#billing_postcode_field,
#billing_city_field,
#shipping_first_name_field,
#shipping_last_name_field,
#shipping_postcode_field,
#shipping_city_field {
  width: calc(50% - 10px);
}

#shpping-container {
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}

#selected-shipping-address {
  padding: 15px;
  border: 1px solid #aaaaaa;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  width: fit-content;
}

#ship-to-different-address span {
  font-size: 0.65em;
}

#productos-envio-container h6,
#productos-para-recoger-container h6 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#productos-envio-container .producto-nombre strong,
#productos-para-recoger-container .producto-nombre strong {
  font-size: 14px;
  font-weight: 500;
}

#numero-habitacion-container h4 {
  font-size: 18px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 15px !important;
}

#cambiar-residencia-link {
  color: #b9a081;
}

#cambiar-residencia-link:hover {
  color: #aaaaaa;
}

#checkout-back-btn,
#checkout-step1-btn {
  width: 20%;
}

#checkout-step1-btn {
  align-self: flex-end;
}

#lista-productos-envio {
  margin: 20px 0;
  font-family: Arial, sans-serif;
  display: flex;
}

.productos-contenedor {
  display: grid;
  min-width: 100%;
  grid-template-columns: 42.5% 42.5% 15%;
  row-gap: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.producto-header {
  display: contents;
  /* Se usa solo para cabeceras sin afectar las filas */
  font-weight: bold;
  background-color: #f0f0f0;
  padding: 10px 0;
  border-bottom: 2px solid #ddd;
}

.producto-item {
  display: contents;
  /* Cada fila ocupa las dos columnas */
  border-bottom: 1px solid #ddd;
}

.producto-nombre {
  margin-left: 20px;
}

.producto-nombre,
.producto-disponibilidad,
.producto-disponibilidad-checkbox {
  display: flex;
  align-items: center;
}

.producto-disponibilidad {
  text-align: right;
  justify-content: center;
}

.disponibilidad-span {
  padding: 5px 20px;
  border-radius: 25px;
  color: white;
}

.producto-disponibilidad-checkbox {
  border-right: none;
  justify-content: center;
}

#fecha_entrega {
  display: none;
}

/* Aseguramos que el contenedor del calendario ocupe el 100% del ancho */
.flatpickr-calendar.inline {
  border-radius: 0px;
  max-width: 500px;
  margin: auto;
  width: 100% !important;
  transform: none;
  box-sizing: border-box;
}

/* Ajustamos el tamaño de las celdas del calendario (días) */
.flatpickr-day {
  width: calc(100% / 7) !important;
  max-width: none !important;
  max-height: none;
}

/* Encabezado del calendario (mes y año) */
.flatpickr-month {
  width: 100%;
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 0.5rem;
}

.flatpickr-current-month {
  justify-items: center;
}

/* Botones de navegación */
.flatpickr-prev-button,
.flatpickr-next-button {
  font-size: 1.2em;
  width: auto;
  height: auto;
  padding: 0.5rem;
}

.flatpickr-rContainer {
  width: 100%;
}

/* Días de la semana */
.flatpickr-weekdays {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: center;
  font-size: 1em;
  margin-bottom: 0.5rem;
}

/* Contenedor de los días */
.flatpickr-days {
  display: flex;
  flex-wrap: wrap;
  width: 100% !important;
  justify-content: space-between;
  align-items: stretch;
  gap: 0.1rem;
  /* Espaciado entre días */
}

.dayContainer {
  min-width: 100% !important;
  height: 300px;
}

.selected {
  background: #b9a081 !important;
  border-color: #b9a081 !important;
}

/* Tabla general */
.payment-form .woocommerce-checkout-review-order-table {
  display: none;
}

/* Envío */
.woocommerce-checkout-review-order-table .shipping th,
.woocommerce-checkout-review-order-table .shipping td {
  font-size: 0.9em;
  color: #333;
  border: none;
}

#payment,
#payment * {
  background: none !important;
  background-color: transparent !important;
}

/* Estilos adicionales */
/* Cambiar el color del texto de las etiquetas */
#payment label {
  color: #333;
}

/* Espacio entre el input y el label */
#payment input[type="radio"],
#payment input[type="checkbox"] {
  margin-right: 5px;
}

/* Estilos para el botón */
#payment button {
  background-color: #b9a081 !important;
  color: #fff;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

#payment button:hover {
  background-color: #b9a081 !important;
}

/* Añadir margen superior a las filas del formulario */
#payment .form-row {
  margin-top: 20px;
}

/* Estilo para el mensaje de privacidad */
#payment .woocommerce-privacy-policy-text {
  font-size: 14px;
  color: #555;
}

/* Estilo para los enlaces */
#payment a {
  color: #0073aa;
  text-decoration: none;
}

#payment a:hover {
  text-decoration: underline;
}

/* Eliminar viñetas y ajustar espaciado en listas */
#payment ul {
  list-style: none;
  padding: 0;
}

#payment li {
  margin-bottom: 10px;
}

.payment_box::before {
  display: none !important;
}

/* Formulario de pago final */
.place-order {
  padding: 0 !important;
}

#place_order {
  margin: 30px 0;
  width: 100%;
}

#checkout-step1-btn,
#checkout-back-btn {
  width: 100%;
}

#checkout-step1-btn {
  margin-top: 30px;
}

@media screen and (max-width: 768px) {
  .custom-checkout-container {
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin: 0 0 50px 0;
  }

  .checkout-summary {
    position: unset;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .checkout-form {
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  .checkout-form .woocommerce-address-fields__field-wrapper {
    grid-template-columns: 1fr;
  }

  .productos-contenedor {
    grid-template-columns: 35% 45% 20%;
    padding: 10px;
  }

  .producto-nombre,
  .producto-disponibilidad,
  .producto-disponibilidad-checkbox {
    border-right: none;
  }

  .producto-disponibilidad {
    text-align: center;
  }

  .disponibilidad-span {
    font-size: 10px;
  }

  .payment-form {
    display: flex;
    flex-direction: column;
  }
}





#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  /* Fondo semitransparente */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  /* Asegura que esté por encima de todo */
  display: none;
  /* Oculto por defecto */
}

#loading-overlay img {
  width: 300px;
  height: auto;
  object-fit: contain;
}