/*
 * Estilos propios para carrito/checkout de WooCommerce — hasta ahora se
 * veían con el CSS crudo por defecto de WooCommerce (sin ningún template
 * de woocommerce/ overrideado en el theme, confirmado buscando en todo
 * mvam-travel-agency/), sin heredar nada de la identidad visual del
 * sitio. Pedido real del usuario sobre /finalizar-comprar/: "que los
 * botones y fondos respeten los colores del theme Mi Viaje a Mendoza".
 *
 * Usa las MISMAS variables CSS que ya define style.css (:root, línea
 * ~324) en vez de números sueltos: --secondary-color (#e54b4b) es la que
 * ese archivo ya documenta como "usado en links y botones", y
 * --primary-color (#6e2e3c) como color de énfasis/fuente. No se tocan los
 * colores semánticos de WooCommerce (rojo de error, verde de éxito) — esos
 * quedan como vienen, solo se restylea el "chrome" neutro (fondos, bordes,
 * botones, tipografía).
 */

.woocommerce-cart,
.woocommerce-checkout {
  color: var(--primary-font-color);
  font-family: var(--primary-font), sans-serif;
}

.woocommerce-cart h1.entry-title,
.woocommerce-checkout h1.entry-title,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  color: var(--heading-font-color);
  font-family: var(--primary-font), sans-serif;
}

/* -------------------------------------------------------------------- */
/* Inputs de billing/shipping                                            */
/* -------------------------------------------------------------------- */

.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-cart input.input-text,
.woocommerce-cart #coupon_code {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px 12px;
  font-family: var(--primary-font), sans-serif;
  color: var(--primary-font-color);
  transition: border-color 0.15s ease;
}

.woocommerce-checkout input.input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus,
.woocommerce-cart input.input-text:focus {
  border-color: var(--secondary-color);
  outline: none;
  box-shadow: 0 0 0 2px rgba(var(--secondary-color-rgb), 0.15);
}

.woocommerce-checkout .form-row label {
  color: var(--heading-font-color);
  font-weight: 500;
}

/* -------------------------------------------------------------------- */
/* Botones — la acción principal (place order / proceed to checkout /   */
/* apply coupon) va siempre en el primary-color del theme (bordó, el     */
/* mismo tono del logo/encabezados — decisión del usuario, confirmada    */
/* después de ver el secondary-color/rojo en la primera versión), blanco */
/* encima, mismo criterio en las 3 pantallas para que se sientan del     */
/* mismo sitio.                                                          */
/*                                                                        */
/* !important es necesario acá, no cosmético: el propio woocommerce.css  */
/* (assets/css/woocommerce.css del plugin) define                        */
/* `.woocommerce a.button.alt, .woocommerce button.button.alt` con       */
/* background #7f54b3 (morado) — 3 clases + tipo de especificidad, más    */
/* que nuestro `.woocommerce-cart .checkout-button` (2 clases). Ese       */
/* morado sin querer es justo lo que el usuario vio en "Continuar para    */
/* finalizar" (bug real, confirmado leyendo el CSS de WooCommerce): nunca */
/* llegaba a aplicarse nuestro color ahí. `#place_order` sí ganaba solo   */
/* (un ID le gana a cualquier cantidad de clases), pero para que las DOS  */
/* pantallas sean consistentes sin depender de esa lotería de            */
/* especificidad, ambas reglas quedan con !important.                    */
.woocommerce-checkout #place_order,
.woocommerce-cart .checkout-button,
.woocommerce-checkout .button,
.woocommerce-cart .button {
  background: var(--primary-color) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px;
  padding: 14px 28px;
  font-family: var(--primary-font), sans-serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  transition: background 0.15s ease, opacity 0.15s ease;
}

.woocommerce-checkout #place_order:hover,
.woocommerce-cart .checkout-button:hover,
.woocommerce-checkout .button:hover,
.woocommerce-cart .button:hover {
  background: var(--primary-color) !important;
  opacity: 0.85;
  color: #fff !important;
}

.woocommerce-checkout #place_order {
  width: 100%;
  padding: 16px 28px;
  font-size: 1.05em;
}

/* -------------------------------------------------------------------- */
/* Tabla de revisión del pedido (checkout) y del carrito                 */
/* -------------------------------------------------------------------- */

.woocommerce-checkout-review-order-table,
.woocommerce-cart-form__contents {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  border-collapse: separate;
  overflow: hidden;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-cart-form__contents th {
  background: #faf7f7;
  color: var(--heading-font-color);
  font-family: var(--primary-font), sans-serif;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

.woocommerce-checkout-review-order-table td,
.woocommerce-checkout-review-order-table th,
.woocommerce-cart-form__contents td {
  padding: 14px 12px;
  border-top: 1px solid #f0f0f0;
}

.woocommerce-checkout-review-order-table .order-total .amount,
.woocommerce-checkout-review-order-table .cart-subtotal .amount {
  color: var(--primary-color);
  font-weight: 700;
}

.woocommerce-checkout-review-order-table tfoot tr:last-child {
  border-top: 2px solid var(--primary-color);
}

/* -------------------------------------------------------------------- */
/* Imagen y tooltip de descripción del tour (ver CartBridge.php,         */
/* cart_item_thumbnail() / cart_item_name_with_tooltip())                */
/* -------------------------------------------------------------------- */

.mvam-cart-item-thumbnail {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 10px;
  vertical-align: middle;
}

.mvam-tour-tooltip {
  position: relative;
  display: inline-flex;
  margin-left: 6px;
  vertical-align: middle;
}

.mvam-tour-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 11px;
  font-style: italic;
  font-family: Georgia, serif;
  cursor: help;
}

.mvam-tour-tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  z-index: 20;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  background: var(--heading-font-color);
  color: #fff;
  font-size: 0.8em;
  line-height: 1.4;
  padding: 8px 10px;
  border-radius: 4px;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.mvam-tour-tooltip:hover .mvam-tour-tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* -------------------------------------------------------------------- */
/* Cupón, notices y "volver a la tienda" — chrome neutro                 */
/* -------------------------------------------------------------------- */

.woocommerce-form-coupon-toggle .woocommerce-info {
  border-top-color: var(--secondary-color);
}

.woocommerce-form-coupon-toggle .woocommerce-info::before {
  color: var(--secondary-color);
}

/* "Tu carrito está vacío" — mismo criterio que el aviso del cupón de
   arriba, pero al bordó de marca (--primary-color) en vez del secundario. */
.cart-empty.woocommerce-info {
  border-top-color: var(--primary-color);
}

.cart-empty.woocommerce-info::before {
  color: var(--primary-color);
}

.woocommerce-checkout .woocommerce-form-coupon .button,
.woocommerce-cart .actions .button {
  padding: 10px 20px;
}

/* -------------------------------------------------------------------- */
/* Moneda real por línea/total (ver Booking\Currency::format() y         */
/* Woo\CartBridge::cart_item_price()/cart_totals_order_total_html()) —   */
/* código de 3 letras (ARS/USD/BRL) al lado del monto, más discreto que   */
/* el número.                                                            */
/* -------------------------------------------------------------------- */

.mvam-price-currency-code {
  font-size: 0.75em;
  color: var(--primary-font-color);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.order-total .mvam-price-currency-code,
.woocommerce-order-overview__total .mvam-price-currency-code {
  color: inherit;
  opacity: 0.75;
}