/* =========================================================
   MPHB — SKIN v2 (Checkout + Buscar disponibilidad)
   FIX v2:
   - Quitar “borde/sombra” del contenedor en Confirmación
   - Evitar que números se monten sobre íconos en selects (Search)
   - Mantener Adultos/Niños en la misma fila
========================================================= */

/* ============ Variables ============ */
:root{
  --mphb-box-bg: #e6eaef;
  --mphb-field-bg: #ffffff;
  --mphb-field-border: #d0d7e2;
  --mphb-text: #111827;
  --mphb-muted: #6b7280;

  --mphb-primary: #52b4cc;
  --mphb-primary-hover: #3aa7c2;

  --mphb-radius: 14px;
  --mphb-field-radius: 6px;

  --mphb-icon-size: 18px;
  --mphb-icon-left: 14px;
  --mphb-pad-left: 46px;

  /* Icons (data-uri) */
  --mphb-cal-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 2v2M17 2v2' stroke='%2352b4cc' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M3.5 9h17' stroke='%2352b4cc' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6 5h12a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z' stroke='%2352b4cc' stroke-width='2'/%3E%3C/svg%3E");
  --mphb-user-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4Z' stroke='%2352b4cc' stroke-width='2'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0' stroke='%2352b4cc' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --mphb-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%238a97a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =========================================================
   1) “Card” fondo gris SIN sombra (para que no parezca borde)
========================================================= */

/* Tu container Elementor específico */
.elementor-element.elementor-element-7540bfb{
  background: var(--mphb-box-bg) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;  /* ✅ clave */
}

/* Checkout + Search wrappers */
.mphb_sc_checkout-wrapper,
.mphb_sc_search-form-wrapper,
form.mphb_sc_search-form{
  background: var(--mphb-box-bg) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;  /* ✅ clave (saca “borde/sombra”) */
  border-radius: var(--mphb-radius) !important;
  padding: 22px !important;
}

/* Si el theme agrega marcos por pseudo-elementos */
.mphb_sc_checkout-wrapper::before,
.mphb_sc_checkout-wrapper::after,
.elementor-element.elementor-element-7540bfb::before,
.elementor-element.elementor-element-7540bfb::after{
  content: none !important;
  display: none !important;
}

/* En confirmación, el theme a veces mete borde/sombra en el contenedor del contenido */
main#content.post-1025 .page-content,
main#content.post-1025 .entry-content{
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* margen inferior pedido */
main#content.post-1025{ margin-bottom: 50px !important; }

/* =========================================================
   2) Labels
========================================================= */
.mphb_sc_checkout-wrapper label,
form.mphb_sc_search-form label{
  display: block !important;
  margin-bottom: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

/* =========================================================
   3) Inputs / Selects (look & feel + alturas)
   ✅ FIX: en SEARCH ahora también se setea padding/height
========================================================= */

/* Base */
.mphb_sc_checkout-wrapper :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select),
form.mphb_sc_search-form :is(input[type="text"], select){
  width: 100% !important;
  background-color: var(--mphb-field-bg) !important;
  border: 1px solid var(--mphb-field-border) !important;
  border-radius: var(--mphb-field-radius) !important;
  font-size: 15px !important;
  color: var(--mphb-text) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Alturas + padding generales */
.mphb_sc_checkout-wrapper :is(input[type="text"], input[type="email"], input[type="tel"], select),
form.mphb_sc_search-form :is(input[type="text"], select){
  height: 52px !important;
  line-height: 52px !important;
  padding: 0 44px 0 16px !important; /* default */
}

.mphb_sc_checkout-wrapper textarea{
  min-height: 120px !important;
  padding: 12px 14px !important;
}

/* Focus */
.mphb_sc_checkout-wrapper :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select):focus,
form.mphb_sc_search-form :is(input[type="text"], select):focus{
  border-color: rgba(82,180,204,.9) !important;
  box-shadow: 0 0 0 3px rgba(82,180,204,.18) !important;
}

/* =========================================================
   4) Iconos en campos
   ✅ FIX: en SEARCH los selects con user-icon ahora también tienen padding-left grande
========================================================= */

/* Date inputs (SEARCH) */
form.mphb_sc_search-form :is(input.mphb-datepick, input.mphb_datepicker, input[id^="mphb_check_in_date"], input[id^="mphb_check_out_date"]){
  padding-left: var(--mphb-pad-left) !important;
  background-image: var(--mphb-cal-icon) !important;
  background-repeat: no-repeat !important;
  background-position: var(--mphb-icon-left) center !important;
  background-size: var(--mphb-icon-size) var(--mphb-icon-size) !important;
}

/* Selects: flecha */
.mphb_sc_checkout-wrapper select,
form.mphb_sc_search-form select{
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: var(--mphb-arrow-icon) !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 18px 18px !important;
  -webkit-text-fill-color: var(--mphb-text) !important;
}

/* Adultos/Niños (CHECKOUT) */
.mphb_sc_checkout-wrapper :is(.mphb-adults-chooser select, .mphb-children-chooser select){
  padding-left: var(--mphb-pad-left) !important;
  background-image: var(--mphb-user-icon), var(--mphb-arrow-icon) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: var(--mphb-icon-left) center, right 14px center !important;
  background-size: var(--mphb-icon-size) var(--mphb-icon-size), 18px 18px !important;
}

/* Adultos/Niños (SEARCH) — ✅ acá estaba el problema */
form.mphb_sc_search-form :is(
  select[id*="adults"], select[id*="children"],
  select[name*="adults"], select[name*="children"]
){
  padding-left: var(--mphb-pad-left) !important; /* ✅ evita que el número se pise con el icono */
  background-image: var(--mphb-user-icon), var(--mphb-arrow-icon) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: var(--mphb-icon-left) center, right 14px center !important;
  background-size: var(--mphb-icon-size) var(--mphb-icon-size), 18px 18px !important;
}

/* País de residencia (checkout) — si lo querés con ícono user */
.mphb_sc_checkout-wrapper select#mphb_country{
  padding-left: var(--mphb-pad-left) !important;
  background-image: var(--mphb-user-icon), var(--mphb-arrow-icon) !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: var(--mphb-icon-left) center, right 14px center !important;
  background-size: var(--mphb-icon-size) var(--mphb-icon-size), 18px 18px !important;
}

/* =========================================================
   5) Botones
========================================================= */
.mphb_sc_checkout-wrapper .mphb-apply-coupon-code-button,
.mphb_sc_checkout-wrapper .mphb_sc_checkout-submit-wrapper .button,
form.mphb_sc_search-form :is(.button[type="submit"], input[type="submit"].button, button[type="submit"]){
  width: 100% !important;
  height: 56px !important;
  border-radius: 6px !important;
  background: var(--mphb-primary) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: 0 10px 22px rgba(82,180,204,.35) !important;
  cursor: pointer !important;
}
.mphb_sc_checkout-wrapper .mphb-apply-coupon-code-button:hover,
.mphb_sc_checkout-wrapper .mphb_sc_checkout-submit-wrapper .button:hover,
form.mphb_sc_search-form :is(.button[type="submit"], input[type="submit"].button, button[type="submit"]):hover{
  background: var(--mphb-primary-hover) !important;
}

/* =========================================================
   6) Layout Adultos/Niños en la misma fila
========================================================= */

/* CHECKOUT: dentro de .mphb-room-details (según tu HTML real) */
.mphb_sc_checkout-wrapper .mphb-room-details{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.mphb_sc_checkout-wrapper .mphb-room-details > *{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
.mphb_sc_checkout-wrapper .mphb-room-details > p.mphb-adults-chooser,
.mphb_sc_checkout-wrapper .mphb-room-details > p.mphb-children-chooser{
  flex: 0 0 220px !important;
  max-width: 220px !important;
}

/* SEARCH: grid 2 columnas (fechas full width + capacidad en 2 cols) */
form.mphb_sc_search-form{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 16px !important;
  row-gap: 16px !important;
}

/* Full width rows */
form.mphb_sc_search-form :is(.mphb-check-in-date-wrapper, .mphb-check-out-date-wrapper, .mphb-reserve-btn-wrapper, .mphb-required-fields-tip, .mphb-errors-wrapper){
  grid-column: 1 / -1 !important;
}

/* Mobile: apilar */
@media (max-width: 520px){
  .mphb_sc_checkout-wrapper .mphb-room-details > p.mphb-adults-chooser,
  .mphb_sc_checkout-wrapper .mphb-room-details > p.mphb-children-chooser{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  form.mphb_sc_search-form{
    grid-template-columns: 1fr !important;
  }
}


/* ==================================================
   CULTURA SERRANA – COMODIDADES (estilo “cards” como Cabañas)
   Poner clase en el contenedor: cs-amenities-grid
================================================== */

body.page-comodidades{
  background: #e6eaef;
}

/* GRID (JetEngine + Elementor Loop Grid) */
body.page-comodidades .cs-amenities-grid :is(.jet-listing-grid__items, .e-loop-container){
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px;
}

/* Card */
body.page-comodidades .cs-amenities-grid :is(.jet-listing-grid__item, .e-loop-item){
  background: #fff;
  border-radius: 0px;           /* en tu captura se ve bien “cuadrado” */
  overflow: hidden;             /* para recortar la imagen */
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  padding: 0 !important;        /* mata padding del plugin */
  margin: 0 !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

body.page-comodidades .cs-amenities-grid :is(.jet-listing-grid__item, .e-loop-item):hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.18);
}

/* Imagen “hero” arriba (cubre y misma altura) */
body.page-comodidades .cs-amenities-grid :is(
  .jet-listing-dynamic-image img,
  .elementor-widget-image img
){
  display: block;
  width: 100%;
  height: 270px;
  object-fit: cover;
}

/* Bloque de contenido debajo de la imagen */
body.page-comodidades .cs-amenities-grid :is(
  .elementor-widget-heading,
  .jet-listing-dynamic-field,
  .jet-listing-dynamic-terms,
  .elementor-widget-text-editor,
  .elementor-icon-box-wrapper
){
  margin: 0;
}

/* Padding interno “como card” (si tu item tiene un wrapper de texto) */
body.page-comodidades .cs-amenities-grid :is(
  .jet-listing-dynamic-field__content,
  .elementor-widget-heading,
  .elementor-widget-text-editor
){
  padding: 18px 22px;
}

/* Título (similar a Maitén / Tala) */
body.page-comodidades .cs-amenities-grid :is(
  .elementor-heading-title,
  .jet-listing-dynamic-field__content
){
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
}

/* MOBILE */
@media (max-width: 768px){
  body.page-comodidades .cs-amenities-grid :is(.jet-listing-grid__items, .e-loop-container){
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body.page-comodidades .cs-amenities-grid :is(
    .jet-listing-dynamic-image img,
    .elementor-widget-image img
  ){
    height: 220px;
  }
}

/* =========================================================
   MPHB — CONFIRMACIÓN DE RESERVA (estilo “tarjeta” como captura)
   Scope: solo esta página (page-id-1026).
   Si querés global, cambiá "body.page-id-1026" por "body".
========================================================= */

:root{
  --mphb-box-bg: #e6eaef;
  --mphb-box-border: #bfc7d1;
  --mphb-shadow: 0 14px 30px rgba(0,0,0,.18);

  --mphb-field-bg: #ffffff;
  --mphb-field-border: #d0d7e2;

  --mphb-text: #111827;
  --mphb-muted: #6b7280;

  --mphb-primary: #52b4cc;
  --mphb-primary-hover: #3aa7c2;

  --mphb-radius: 14px;
  --mphb-field-radius: 8px;

  /* Ajustes pedidos */
  --mphb-wrap-max: 780px;     /* ancho total de ambos bloques */
  --mphb-row-pad-y: 14px;     /* padding vertical filas */
  --mphb-row-pad-x: 20px;     /* padding horizontal filas */
}

/* Contenedor general (ancho compartido) */
body.page-id-1026 .mphb_sc_booking_confirmation{
  max-width: var(--mphb-wrap-max);
  width: 100%;
  margin: 26px auto;
  box-sizing: border-box;
}

/* Ambos bloques llenan el contenedor */
body.page-id-1026 .mphb-booking-confirmation-messages,
body.page-id-1026 .mphb-booking-details-section.booking{
  width: 100%;
  box-sizing: border-box;
}

/* Mensajes arriba */
body.page-id-1026 .mphb-booking-confirmation-messages{
  background: var(--mphb-field-bg);
  border: 1px solid var(--mphb-field-border);
  border-radius: calc(var(--mphb-radius) - 4px);
  padding: 16px 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  text-align: center;
  color: var(--mphb-text);
  margin-bottom: 14px;
}
body.page-id-1026 .mphb-booking-confirmation-messages p{
  margin: 8px 0;
  color: var(--mphb-muted);
  line-height: 1.35;
}

/* Tarjeta principal */
body.page-id-1026 .mphb-booking-details-section.booking{
  background: var(--mphb-box-bg);
  border: 1px solid var(--mphb-box-border);
  border-radius: var(--mphb-radius);
  box-shadow: var(--mphb-shadow);
  padding: 24px 22px 22px;
}

/* Título */
body.page-id-1026 .mphb-booking-details-title{
  margin: 0 0 14px;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: var(--mphb-text);
}

/* Lista */
body.page-id-1026 .mphb-booking-details{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

/* Cada fila como “input” blanco */
body.page-id-1026 .mphb-booking-details > li{
  background: var(--mphb-field-bg);
  border: 1px solid var(--mphb-field-border);
  border-radius: var(--mphb-field-radius);
  padding: var(--mphb-row-pad-y) var(--mphb-row-pad-x); /* ✅ unificado */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  box-sizing: border-box;
}

/* Label / Value */
body.page-id-1026 .mphb-booking-details .label{
  font-size: 13px;
  font-weight: 700;
  color: var(--mphb-muted);
}
body.page-id-1026 .mphb-booking-details .value{
  font-size: 14px;
  font-weight: 800;
  color: var(--mphb-text);
  text-align: right;
}

/* Precio como pill */
body.page-id-1026 .mphb-booking-details .booking-price .value .mphb-price{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--mphb-primary);
  color: #fff !important;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
body.page-id-1026 .mphb-booking-details .booking-price .value .mphb-currency{
  color: #fff !important;
  font-weight: 900;
}

/* Detalles: alojamiento */
body.page-id-1026 .mphb-booking-details-section .accommodations{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(17,24,39,.10);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}
body.page-id-1026 .mphb-booking-details-section .accommodations-title{
  font-weight: 800;
  color: var(--mphb-text);
}
body.page-id-1026 .mphb-booking-details-section .accommodations a{
  color: var(--mphb-primary);
  font-weight: 800;
  text-decoration: none;
}
body.page-id-1026 .mphb-booking-details-section .accommodations a:hover{
  color: var(--mphb-primary-hover);
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 480px){
  body.page-id-1026 .mphb-booking-details-section.booking{
    padding: 20px 16px 18px;
  }
  body.page-id-1026 .mphb-booking-details > li{
    flex-direction: column;
    align-items: flex-start;
  }
  body.page-id-1026 .mphb-booking-details .value{
    text-align: left;
    width: 100%;
  }
}

/* ✅ Padding “a prueba de MPHB/tema” + responsive (solo page-id-1026) */
body.page-id-1026 .mphb-booking-details > li,
body.page-id-1026 .mphb-booking-details li{
  padding: 20px !important;          /* desktop */
  box-sizing: border-box;
}

/* Mobile */
@media (max-width: 480px){
  body.page-id-1026 .mphb-booking-details > li,
  body.page-id-1026 .mphb-booking-details li{
    padding: 16px !important;        /* más aire, sin exagerar */
  }
}

/* Muy chico (por si hay pantallas angostas) */
@media (max-width: 360px){
  body.page-id-1026 .mphb-booking-details > li,
  body.page-id-1026 .mphb-booking-details li{
    padding: 14px !important;
  }
}


/* =========================================================
   WOOCOMMERCE — MI CUENTA (LOGIN / REGISTRO) — GLOBAL
   Scope: cualquier sitio/página Woo "Mi cuenta"
   Selectores base: body.woocommerce-account + #customer_login
========================================================= */

body.woocommerce-account{
  --cs-card-bg: #e6eaef;
  --cs-card-border: #bfc7d1;
  --cs-shadow: 0 14px 30px rgba(0,0,0,.18);

  --cs-field-bg: #ffffff;
  --cs-field-border: #d0d7e2;

  --cs-text: #111827;
  --cs-muted: #6b7280;

  --cs-primary: #52b4cc;
  --cs-primary-hover: #3aa7c2;

  --cs-radius: 18px;
  --cs-field-radius: 6px;

  --cs-icon-size: 18px;
  --cs-icon-left: 14px;
  --cs-pad-left: 46px;
}

/* Fondo suave de la sección (sin romper el theme) */
body.woocommerce-account main#content{
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(18px, 4vw, 48px) 16px;
}

/* Solo cuando existe el bloque login/registro */
body.woocommerce-account .woocommerce #customer_login{
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  align-items: stretch;
}

/* Tarjeta por columna */
body.woocommerce-account .woocommerce #customer_login > .u-column1,
body.woocommerce-account .woocommerce #customer_login > .u-column2{
  background: var(--cs-card-bg) !important;
  border: 1px solid var(--cs-card-border) !important;
  box-shadow: var(--cs-shadow) !important;
  border-radius: var(--cs-radius) !important;
  padding: 26px 26px 30px !important;

  flex: 1 1 420px;
  max-width: 520px;
}

/* Títulos */
body.woocommerce-account .woocommerce #customer_login h2{
  text-align: center;
  color: var(--cs-text);
  font-size: 20px;
  margin: 0 0 16px;
}

/* Reset del form Woo */
body.woocommerce-account .woocommerce form.login,
body.woocommerce-account .woocommerce form.register{
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Mensaje obligatorios */
body.woocommerce-account .woocommerce form.login::before,
body.woocommerce-account .woocommerce form.register::before{
  content: "Los campos obligatorios son seguidos por *";
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--cs-muted);
  margin: 0 0 18px;
}

/* Labels centradas */
body.woocommerce-account .woocommerce form .form-row label{
  display: block !important;
  text-align: center !important;
  font-weight: 600;
  color: var(--cs-text);
  margin: 0 0 10px !important;
}

/* Inputs */
body.woocommerce-account .woocommerce form .input-text,
body.woocommerce-account .woocommerce form input[type="email"],
body.woocommerce-account .woocommerce form input[type="text"],
body.woocommerce-account .woocommerce form input[type="password"]{
  width: 100% !important;
  background: var(--cs-field-bg) !important;
  border: 1px solid var(--cs-field-border) !important;
  border-radius: var(--cs-field-radius) !important;
  padding: 14px 14px 14px var(--cs-pad-left) !important;
  min-height: 52px;
  color: var(--cs-text);
  outline: none !important;
  box-shadow: none !important;

  background-repeat: no-repeat !important;
  background-position: var(--cs-icon-left) 50% !important;
  background-size: var(--cs-icon-size) var(--cs-icon-size) !important;
}
body.woocommerce-account .woocommerce form .input-text::placeholder{
  color: var(--cs-muted);
}

/* Focus */
body.woocommerce-account .woocommerce form .input-text:focus,
body.woocommerce-account .woocommerce form input:focus{
  border-color: var(--cs-primary) !important;
  box-shadow: 0 0 0 4px rgba(82,180,204,.22) !important;
}

/* Iconos (si existen esos IDs en el form) */
body.woocommerce-account .woocommerce form #username{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2352b4cc'%3E%3Cpath d='M12 12a5 5 0 1 0-5-5a5 5 0 0 0 5 5Zm0 2c-4.418 0-8 2.239-8 5v1h16v-1c0-2.761-3.582-5-8-5Z'/%3E%3C/svg%3E") !important;
}
body.woocommerce-account .woocommerce form #password{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2352b4cc'%3E%3Cpath d='M17 9h-1V7a4 4 0 0 0-8 0v2H7a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2Zm-7-2a2 2 0 0 1 4 0v2h-4V7Z'/%3E%3C/svg%3E") !important;
}
body.woocommerce-account .woocommerce form #reg_email{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2352b4cc'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5v2Z'/%3E%3C/svg%3E") !important;
}

/* Ojito password */
body.woocommerce-account .woocommerce .password-input{
  display: block;
  position: relative;
}
body.woocommerce-account .woocommerce .password-input .show-password-input{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  opacity: .65;
}
body.woocommerce-account .woocommerce .password-input .show-password-input:hover{
  opacity: 1;
}

/* Recordarme */
body.woocommerce-account .woocommerce .woocommerce-form-login__rememberme{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 14px;
  color: var(--cs-text);
}
body.woocommerce-account .woocommerce .woocommerce-form-login__rememberme input{
  transform: scale(1.05);
}

/* Botones */
body.woocommerce-account .woocommerce button.button,
body.woocommerce-account .woocommerce a.button,
body.woocommerce-account .woocommerce input.button{
  width: 100% !important;
  display: block !important;
  border: 0 !important;
  background: var(--cs-primary) !important;
  color: #fff !important;
  border-radius: var(--cs-field-radius) !important;
  padding: 16px 18px !important;
  min-height: 56px;
  font-size: 16px;
  font-weight: 700;
  text-transform: none !important;
  box-shadow: 0 22px 30px rgba(82,180,204,.45) !important;
}
body.woocommerce-account .woocommerce button.button:hover,
body.woocommerce-account .woocommerce a.button:hover,
body.woocommerce-account .woocommerce input.button:hover{
  background: var(--cs-primary-hover) !important;
}

/* Textos y links */
body.woocommerce-account .woocommerce .lost_password,
body.woocommerce-account .woocommerce .woocommerce-privacy-policy-text,
body.woocommerce-account .woocommerce form.register p{
  text-align: center;
  color: var(--cs-muted);
  margin: 12px 0 0;
}
body.woocommerce-account .woocommerce .lost_password a{
  color: var(--cs-primary);
  text-decoration: none;
}
body.woocommerce-account .woocommerce .lost_password a:hover{
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px){
  body.woocommerce-account .woocommerce #customer_login{
    gap: 16px;
  }
  body.woocommerce-account .woocommerce #customer_login > .u-column1,
  body.woocommerce-account .woocommerce #customer_login > .u-column2{
    padding: 20px 18px 24px !important;
    border-radius: 16px !important;
    max-width: 520px;
  }
  body.woocommerce-account .woocommerce form .input-text,
  body.woocommerce-account .woocommerce form input[type="email"],
  body.woocommerce-account .woocommerce form input[type="text"],
  body.woocommerce-account .woocommerce form input[type="password"]{
    min-height: 50px;
  }
}