/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* Fit portrait videos inside the viewport instead of sizing them by width alone. */
#vmodal .modal-dialog.videoshort {
  width: calc(100% - 32px);
  max-width: 500px;
  margin: 16px auto;
}
#vmodal .videoshort .modal-header {
  align-items: center;
  gap: 16px;
  padding: 16px 24px !important;
  text-transform: none !important;
}
#vmodal .videoshort .modal-header .h4 {
  font-family: var(--font-family-base);
  font-size: var(--font-size-btn-lg);
  font-weight: 500;
  line-height: 1.4;
}
#vmodal .videoshort .modal-header .close { flex-shrink: 0; }
#vmodal .videoshort .modal-body { padding: 16px 24px !important; }
#vmodal .videoshort iframe {
  width: min(100%, calc(56.25vh - 123.75px));
  width: min(100%, calc(56.25dvh - 123.75px));
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0 auto;
}

/* Keep the shipping selector independent of the mobile category menu styles. */
.pm-shipping-selector .dropdown-menu .dropdown-item {
  width: 100%;
  margin: 0;
  padding: .65rem 1rem;
  border: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 400;
}

.extra-content-menu .pm-shipping-selector {
  margin: .75rem .75rem .75rem 0;
}

.extra-content-menu .pm-shipping-selector.open .dropdown-menu,
.extra-content-menu .pm-shipping-selector.show .dropdown-menu {
  top: auto;
  bottom: calc(100% + .75rem);
  right: 0;
  left: auto;
  width: max-content;
  min-width: 10rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 10rem);
  overflow-y: auto;
  margin: 0;
  padding: .5rem 0;
  background: #fff;
  border: 1px solid var(--border-color);
  box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .12);
}

/* .form-control-div usa el shorthand border: con var(--border-color), así que
   pisa el border-color de .is-invalid. Redefinimos la variable en el error */
.form-control-div.is-invalid {
  --border-color: var(--danger-color);
}

/* MONEI: los campos de tarjeta usan el campo estándar del tema (.form-group-big
   + .form-control-div), ver modules/monei/views/templates/front/onsite_card.tpl.
   El checkout_page.css del módulo los dimensiona como un .form-control simple
   (alto calculado por JS, sin padding vertical, margen en .form-group) y gana por
   especificidad: aquí se devuelven los valores de .form-group-big .form-control-div. */
#payment-form-monei .form-group {
  margin-bottom: 0;
}
#payment-form-monei #monei-card_container,
#payment-form-monei #monei-card-number,
#payment-form-monei #monei-card-expiry,
#payment-form-monei #monei-card-cvc {
  height: 70px;
  padding-top: 25px;
  /* 16px del tema menos el relleno interno del iframe de MONEI: así el texto
     queda alineado con su etiqueta, como en un input del tema */
  padding-left: 2px;
}
/* El campo de MONEI es un iframe: payment.js marca el foco con .is-focused */
#payment-form-monei .form-control-div.is-focused {
  border-color: var(--dark-light);
}
/* payment.js pinta los errores como .alert, cuyo margen del tema (var(--space-4))
   es de aviso de página: bajo el campo se pega a él */
#monei-card-errors .alert {
  margin: var(--space-1) 0 0;
}
/* Recuadro del formulario: el fondo plano gris del tema, con el radio y el
   relleno de .bike-card (sin reusar la clase: su :hover es de tarjeta de producto) */
#payment-form-monei {
  padding: var(--space-2);
  background-color: var(--neutral-dark);
  border-radius: var(--border-radius-sm);
}
/* La última fila de campos no lleva el hueco inferior de .form-group-big:
   ya lo pone el relleno del recuadro */
#payment-form-monei .monei-card-split .form-group-big,
#payment-form-monei .form-group-big:has(#monei-card_container) {
  padding-bottom: 0;
}
/* checkout_page.css de MONEI suma 1.5rem bajo cada opción de pago (ajuste para
   Hummingbird) y duplica la separación de TODAS las opciones; aquí ya la da
   label.label-border, y bajo el bloque desplegado el var(--space-4) de
   .additional-information (account_cart_checkout.css), que esa regla pisaba */
section.checkout-step .payment-options > div {
  margin-bottom: 0;
}
section.checkout-step .payment-options > .additional-information {
  margin-bottom: var(--space-4);
}
/* El botón de pagar de MONEI es el del tema (override de displayPaymentByBinaries.tpl):
   sin el 2rem que checkout_page.css pone encima, queda donde el #payment-confirmation */
#checkout-payment-step .monei-binary,
section.checkout-step .monei-binary {
  margin-top: 0;
}