/* Fuente Montserrat */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");

/* Variables de colores */
:root {
  --lysto-primary: rgb(255, 108, 14);
  --lysto-secondary: rgb(255, 144, 21);
  --lysto-success: #00837b;
  --lysto-error: #e7004c;
  --lysto-info: #6fcfeb;
  --lysto-text: #333333;
  --lysto-background: #ffffff;
}

.lysto-payment-button {
  background: var(--lysto-primary);
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  display: flex; /* Para alinear el texto e imagen en una fila */
  align-items: center; /* Centrar verticalmente */
  transition: background 0.3s;
}

.lysto-payment-button:hover {
  background: var(--lysto-secondary);
}

.woocommerce-checkout #payment ul.payment_methods li img {
  vertical-align: middle;
  margin: -2px 0 0 0;
  padding: 0;
  position: relative;
  box-shadow: none;
  width: 4em; /* Ajusta el ancho */
  height: auto; /* Mantén la proporción de la imagen */
}

/* Ocultar el botón de Lysto */
/* [data-lysto-button="true"] {
  display: block;
} */

.lysto-logo {
  width: 4em;
  height: auto !important;
  margin-left: 3px !important;
  margin-bottom: 11px !important;
}

/* Estilos generales */
.lysto-modal {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
  z-index: 9999;
  font-family: "Montserrat", sans-serif;
}

.lysto-modal-content {
  background: var(--lysto-background);
  width: 90%;
  max-width: 500px;
  max-height: 90vh; /* Altura máxima del 90% del viewport */
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto; /* Habilitar scroll vertical */
}

.lysto-step {
  position: relative;
  min-height: 0; /* Eliminamos la altura mínima fija */
  padding-bottom: 20px; /* Espacio adicional al final */
}

/* Encabezado del modal */
.lysto-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.lysto-step-indicator {
  font-weight: 600;
  color: var(--lysto-text);
}

.lysto-close-modal {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--lysto-text);
  transition: color 0.3s;
}

.lysto-close-modal:hover {
  color: var(--lysto-primary);
}

/* Inputs */
.lysto-input {
  width: 100%;
  padding: 8px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lysto-input:focus {
  border-color: var(--lysto-primary);
  outline: none;
}

.lysto-input-valid {
  border-color: rgba(255, 108, 14, 0.5) !important;
  box-shadow: 0 0 8px rgba(255, 108, 14, 0.1);
}

.lysto-input-invalid {
  border-color: var(--lysto-error) !important;
  box-shadow: 0 0 8px rgba(231, 0, 76, 0.2);
}

/* Botones dentro del modal */
.lysto-button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  transition: background 0.3s;
}

.lysto-button.lysto-next-step {
  background: var(--lysto-primary);
  color: white;
}

.lysto-button.lysto-next-step:hover {
  background: var(--lysto-secondary);
}

/* Barra de progreso */
.lysto-progress-bar {
  height: 4px;
  background: #eee;
  margin: 20px 0;
  border-radius: 2px;
}

.lysto-progress {
  height: 100%;
  background: var(--lysto-primary);
  transition: width 0.3s ease;
}

/* Temporizador OTP */
.lysto-timer {
  color: var(--lysto-info);
  font-weight: 600;
  margin: 15px 0;
  text-align: center;
}

.lysto-resend-otp {
  background: none;
  border: none;
  color: var(--lysto-primary);
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-decoration: underline;
}

.lysto-resend-otp:hover {
  color: var(--lysto-secondary);
}

/* Contenedor del Loader */
.lysto-loader-container {
  position: fixed; /* Posición fija para abarcar todo el modal */
  top: 0; /* Inicio superior */
  left: 0; /* Inicio izquierdo */
  width: 100%; /* Ocupa todo el ancho del modal */
  height: 100%; /* Ocupa todo el alto del modal */
  display: flex; /* Flexbox para centrar el loader */
  justify-content: center; /* Centrado horizontal */
  align-items: center; /* Centrado vertical */
  background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
  z-index: 9999; /* Capa más alta */
  overflow: hidden; /* Evita que se mueva con el contenido del modal */
}

/* Loader */
.lysto-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--lysto-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: lysto-spin 1s linear infinite;
}

@keyframes lysto-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Mensajes de error */
.lysto-error-message {
  margin: 8px 0;
  padding: 10px;
  text-align: center;
  background: rgba(231, 0, 76, 0.1);
  border: 1px solid var(--lysto-error);
  border-radius: 6px;
  animation: lysto-fadeIn 0.3s ease;
}

.lysto-error {
  color: var(--lysto-error);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

@keyframes lysto-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lysto-loader-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* Asegura que esté por encima del contenido */
  border-radius: 10px; /* Coincide con el borde del modal */
}

.lysto-loader-container {
  text-align: center;
}

/* Estilos para el paso de verificación OTP */
.lysto-step-otp {
  position: relative;
  min-height: 300px;
}

.lysto-step-otp .lysto-otp-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lysto-step-otp .lysto-otp-input:focus {
  border-color: var(--lysto-primary);
  outline: none;
}

.lysto-step-phone .lysto-phone-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}
.lysto-step-phone .lysto-phone-input:focus {
  border-color: var(--lysto-primary);
  outline: none;
}

.lysto-step-otp .lysto-verify-otp {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  transition: background 0.3s;
  background: var(--lysto-primary);
  color: white;
  margin: 15px 0;
}

.lysto-step-otp .lysto-verify-otp:hover {
  background: var(--lysto-secondary);
}

.lysto-step-otp .lysto-timer {
  text-align: center;
  margin: 15px 0;
  color: black;
  font-weight: 600;
}

.lysto-step-otp .lysto-resend-otp {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--lysto-primary);
  border-radius: 8px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  transition: background 0.3s;
  background: white;
  color: var(--lysto-error);
  text-decoration: none;
  margin: 15px 0;
}

.lysto-step-otp .lysto-resend-otp:hover {
  color: #9e0638;
}

/* Estilo para el botón de reenviar deshabilitado */
.lysto-resend-otp:disabled {
  background-color: #ddd; /* Fondo gris */
  color: #999; /* Texto gris */
  cursor: not-allowed; /* Cursor de "no permitido" */
  opacity: 0.7; /* Opacidad reducida */
  text-decoration: none; /* Sin subrayado */
}

.lysto-step-otp .lysto-prev-step {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  transition: background 0.3s;
  background: var(--lysto-background);
  color: var(--lysto-primary);
  margin: 15px 0;
}

.lysto-step-otp .lysto-prev-step:hover {
  color: var(--lysto-secondary);
}

/* Mensajes de éxito */
.lysto-success-message {
  margin: 8px 0;
  padding: 10px;
  text-align: center;
  background: white;
  border: 2px solid var(--lysto-primary);
  border-radius: 6px;
  animation: lysto-fadeIn 0.3s ease;
  color: var(--lysto-primary);
}

.lysto-success {
  color: var(--lysto-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

/* Estilos para la etapa de confirmación */
.lysto-step-confirmation {
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-family: "Montserrat", sans-serif;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo del título principal */
.titulo-principal {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  font-family: "Montserrat", sans-serif;
  margin-bottom: 20px;
  text-align: center;
}

/* Estilo del subtítulo */
.subtitulo {
  font-size: 18px;
  font-weight: 600;
  color: #666;
  font-family: "Montserrat", sans-serif;
  margin: 10px 0;
}

/* Contenedor de los bloques principales */
.contenedor-bloques {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Estilo general del bloque */
.bloque {
  width: 150px;
  padding: 15px;
  background-color: #f5f5f5;
  text-align: center;
  border-radius: 10px;
  font-family: "Montserrat", sans-serif;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo del icono */

.icono img {
  width: 40px; /* Ajusta el ancho del icono */
  height: 40px; /* Ajusta la altura del icono */
}

/* Estilo del texto del título */
.titulo {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

/* Estilo del texto del monto */
.monto {
  font-size: 20px;
  color: #666;
  font-weight: bold;
}

/* Contenedor de detalles generales */
.contenedor-detalles {
  width: 100%;
  max-width: 400px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  font-family: "Montserrat", sans-serif;
  margin: 10px auto;
}

/* Estilo para los detalles dentro del contenedor */
.detalle {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #666;
  font-weight: bold;
  margin: 5px 0;
}

.resaltado-total {
  background-color: #2a3b4c;
  color: #ffffff;
  padding: 5px 10px;
  border-radius: 5px;
}

.lysto-plan-summary {
  background: rgba(255, 108, 14, 0.05);
  border: 1px solid rgba(255, 108, 14, 0.1);
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
}

.lysto-plan-detail {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  font-size: 15px;
  color: var(--lysto-text);
}

.lysto-amount {
  font-weight: 600;
  color: var(--lysto-primary);
}

.lysto-payment-schedule {
  border: 1px solid rgba(221, 221, 221, 0.3);
  border-radius: 8px;
  padding: 15px;
  background: var(--lysto-background);
}

.lysto-installments {
  max-height: 300px; /* Altura máxima para la lista de cuotas */
  overflow-y: auto;
  padding-right: 10px; /* Espacio para el scroll */
  margin: 15px 0;
}

.lysto-installment {
  display: flex;
  justify-content: space-evenly;
  padding: 10px;
  background: rgba(248, 248, 248, 0.8);
  border-radius: 6px;
  font-size: 14px;
  color: var(--lysto-text);
  transition: all 0.3s ease;
}

.lysto-installment:hover {
  background: rgba(255, 108, 14, 0.05);
  border: 1px solid rgba(255, 108, 14, 0.1);
}

.lysto-exchange-rate {
  text-align: center;
  font-size: 0.9em;
  color: var(--lysto-text);
  margin: 10px 0;
  padding: 10px;
  background: rgba(111, 207, 235, 0.05);
  border-radius: 6px;
}

.lysto-confirm-payment {
  background: var(--lysto-primary) !important;
  margin-top: 15px;
  color: white !important;
  transition: background 0.3s;
}

.lysto-confirm-payment:hover {
  background: var(--lysto-secondary) !important;
}

/* Responsive Design */
@media (max-width: 480px) {
  .lysto-installments {
    grid-template-columns: repeat(2, 1fr);
  }

  .lysto-installment {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px;
  }

  .lysto-plan-detail {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Animaciones */
@keyframes lysto-fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lysto-installment {
  animation: lysto-fadeIn 0.3s ease;
}

/* Estilo personalizado para el scroll */
.lysto-modal-content::-webkit-scrollbar {
  width: 8px;
}

.lysto-modal-content::-webkit-scrollbar-track {
  background: rgba(221, 221, 221, 0.3);
  border-radius: 4px;
}

.lysto-modal-content::-webkit-scrollbar-thumb {
  background: var(--lysto-primary);
  border-radius: 4px;
}

.lysto-modal-content::-webkit-scrollbar-thumb:hover {
  background: var(--lysto-secondary);
}

/* Ajustes responsive */
@media (max-width: 480px) {
  .lysto-modal-content {
    margin: 20px auto;
    max-height: 85vh;
  }

  .lysto-installments {
    max-height: 200px;
  }
}

button.lysto-button.lysto-prev-step {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  transition: background 0.3s;
  background: var(--lysto-background);
  color: var(--lysto-primary);
  margin: 15px 0;
}

button.lysto-button.lysto-prev-step :hover {
  color: var(--lysto-secondary);
}

/* Estilos para la etapa de métodos de pago */
.lysto-step-methods {
  display: contents;
  flex-direction: column;
  gap: 15px;
}

.lysto-methods-container {
  display: contents;
  flex-direction: column;
  gap: 15px;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

.lysto-method-card {
  /* background: rgba(255, 108, 14, 0.05); */
  background: #f5f5f5;
  border: 1px solid rgba(255, 108, 14, 0.1);
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
  margin: 20px;
}

.lysto-method-card:hover {
  /* background: rgba(255, 108, 14, 0.1); */
  border-color: rgba(255, 108, 14, 0.2);
}

.lysto-method-card h4 {
  color: var(--lysto-primary);
  margin-bottom: 10px;
  font-weight: 600;
}

.lysto-method-details {
  color: var(--lysto-text);
  font-size: 14px;
  margin-bottom: 10px;
}

.lysto-method-details p {
  margin: 5px 0;
}

.lysto-select-method {
  background: var(--lysto-primary) !important;
  color: white !important;
  margin-top: 10px;
}

.lysto-select-method:hover {
  background: var(--lysto-secondary) !important;
}

/* Scroll personalizado */
.lysto-methods-container::-webkit-scrollbar {
  width: 8px;
}

.lysto-methods-container::-webkit-scrollbar-track {
  background: rgba(221, 221, 221, 0.3);
  border-radius: 4px;
}

.lysto-methods-container::-webkit-scrollbar-thumb {
  background: var(--lysto-primary);
  border-radius: 4px;
}

.lysto-methods-container::-webkit-scrollbar-thumb:hover {
  background: var(--lysto-secondary);
}

/* Estilos para la etapa de reporte de pago */
.lysto-step-report {
  display: contents;
  flex-direction: column;
  gap: 15px;
}

.lysto-report-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.lysto-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lysto-form-group label {
  font-weight: 600;
  color: var(--lysto-text);
}

.lysto-form-group input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: "Montserrat", sans-serif;
}

.lysto-submit-report {
  background: var(--lysto-primary) !important;
  color: white !important;
}

.lysto-submit-report:hover {
  background: var(--lysto-secondary) !important;
}

/* Campo de fecha específico */
.lysto-date-input {
  letter-spacing: 0.5px;
  background: rgba(255, 108, 14, 0.03);
}

.lysto-input-hint {
  display: block;
  margin-top: 8px;
  font-size: 0.85em;
  color: var(--lysto-text);
  opacity: 0.7;
  font-weight: 500;
}

/* Validación en tiempo real */
.lysto-date-input:focus {
  background: rgba(255, 108, 14, 0.05);
  box-shadow: 0 2px 8px rgba(255, 108, 14, 0.1);
}

.lysto-date-input.lysto-input-valid {
  border-color: var(--lysto-success);
  background: rgba(0, 131, 123, 0.03);
}

.lysto-date-input.lysto-input-invalid {
  border-color: var(--lysto-error);
  background: rgba(231, 0, 76, 0.03);
}

.lysto-step-report .lysto-reference-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lysto-step-report .lysto-reference-input:focus {
  border-color: var(--lysto-primary);
  outline: none;
}

.lysto-step-report .lysto-amount-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lysto-step-report .lysto-amount-input:focus {
  border-color: var(--lysto-primary);
  outline: none;
}

.lysto-step-report .lysto-doc-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lysto-step-report .lysto-doc-input:focus {
  border-color: var(--lysto-primary);
  outline: none;
}

.lysto-step-report .lysto-c2p-token-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lysto-step-report .lysto-c2p-token-input:focus {
  border-color: var(--lysto-primary);
  outline: none;
}

.lysto-step-report .lysto-phone-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lysto-step-report .lysto-phone-input:focus {
  border-color: var(--lysto-primary);
  outline: none;
}

.lysto-step-report .lysto-date-input {
  width: 100%;
  padding: 12px;
  border: 2px solid #ddd;
  border-radius: 8px;
  margin: 15px 0;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  transition: all 0.3s ease;
}

.lysto-step-report .lysto-date-input:focus {
  border-color: var(--lysto-primary);
  outline: none;
}

.lysto-step-report button .lysto-prev-step {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  transition: background 0.3s;
  background: var(--lysto-background);
  color: var(--lysto-primary);
  margin: 15px 0;
}

.lysto-step-report button .lysto-prev-step:hover {
  color: var(--lysto-secondary);
}

/* Estilos para la página de configuración */
.wrap h1 {
  color: var(--lysto-primary);
  margin-bottom: 20px;
}

.regular-text {
  width: 100%;
  max-width: 400px;
  padding: 8px;
  border: 2px solid #ddd;
  border-radius: 4px;
  margin-top: 5px;
}

.regular-text:focus {
  border-color: var(--lysto-primary);
  outline: none;
  box-shadow: 0 0 8px rgba(255, 108, 14, 0.1);
}

.description {
  color: #666;
  font-size: 0.9em;
  margin-top: 5px;
}

.form-table th {
  width: 200px;
  padding: 20px 10px 20px 0;
}

.form-table td {
  padding: 15px 10px;
}

/* Estilos para el checkbox */
input[type="checkbox"] {
  margin-right: 8px;
}

/* Estilos para el select */
select.regular-text {
  padding: 6px;
  height: 36px;
}

/* Estilos responsive */
@media (max-width: 782px) {
  .form-table th,
  .form-table td {
    display: block;
    width: 100%;
    padding: 10px 0;
  }

  .regular-text {
    max-width: 100%;
  }
}

/* Estilo inicial (oculto) */
.lysto-app-message {
  visibility: hidden; /* No visible pero ocupa espacio */
  opacity: 0; /* Completamente transparente */
  transition: opacity 0.5s ease, visibility 0s 0.5s; /* Transición con retraso para visibilidad */
  text-align: center;
  margin: 20px 0;
  padding: 15px;
  background: rgba(255, 108, 14, 0.05); /* Fondo semitransparente */
  border: 1px solid rgba(255, 108, 14, 0.1); /* Borde sutil */
  border-radius: 8px;
  font-family: "Montserrat", sans-serif;
  color: var(--lysto-text);
}

/* Cuando se muestre */
.lysto-app-message.visible {
  visibility: visible; /* Ahora visible */
  opacity: 1; /* Completamente visible */
  transition: opacity 0.5s ease; /* Transición suave */
}

.lysto-app-message p {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--lysto-text);
}

.lysto-download-link {
  display: inline-block;
  padding: 10px 20px;
  background: var(--lysto-primary);
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.3s ease;
  text-decoration: none; /* Elimina cualquier subrayado */
}

.lysto-download-link:hover {
  background: var(--lysto-secondary);
  text-decoration: none; /* Elimina el subrayado azul */
}
a.lysto-download-link:hover {
  background: var(--lysto-secondary); /* Cambia el color de fondo */
  text-decoration: none; /* Elimina cualquier subrayado */
  color: white; /* Asegura que el texto permanezca blanco */
}

/* Estilos para la tabla de transacciones */
.wp-list-table.widefat {
  border-collapse: collapse;
  width: 100%;
  margin-top: 20px;
}

.wp-list-table.widefat th,
.wp-list-table.widefat td {
  padding: 12px;
  border: 1px solid #ddd;
  text-align: left;
}

.wp-list-table.widefat th {
  background-color: var(--lysto-primary);
  color: white;
  font-weight: 600;
}

.wp-list-table.widefat tr:nth-child(even) {
  background-color: rgba(255, 108, 14, 0.05);
}

.wp-list-table.widefat tr:hover {
  background-color: rgba(255, 108, 14, 0.1);
}

.wp-list-table.widefat ul {
  margin: 0;
  padding-left: 20px;
}

.wp-list-table.widefat ul li {
  list-style-type: disc;
}

/* Estilos para la pantalla de éxito con imagen */
.lysto-step-success {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%; /* Asegura que ocupe todo el espacio disponible */
}

.lysto-success-image {
  margin-bottom: 20px; /* Espacio entre la imagen y el botón */
}

.lysto-success-image img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Contenedor de éxito con imagen de fondo */
.lysto-success-container {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 350px; /* Ajusta la altura total */
  display: flex;
  flex-direction: column; /* Coloca los elementos en columna */
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 8px;
  background-color: var(--lysto-background); /* Fondo de respaldo */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra */
}

/* Imagen encima del texto */
.lysto-success-icon {
  width: 50%; /* Tamaño de la imagen (ajústalo según sea necesario) */
  height: auto; /* Mantén las proporciones */
  margin-bottom: 15px; /* Espacio entre la imagen y el texto */
}

/* Estilo del texto sobre la imagen */
.lysto-success-text {
  font-family: "Montserrat", sans-serif; /* Tipografía definida */
  font-size: 22px; /* Tamaño del texto */
  font-weight: 600; /* Peso del texto */
  color: white; /* Cambia el color del texto a blanco */
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4); /* Sombra para mejor legibilidad */
  margin: 0 20px; /* Espacio lateral para texto largo */
  text-align: center; /* Alineación centrada */
}

/* Botón de cierre en el modal */
.lysto-close-modal {
  background: var(--lysto-primary); /* Color primario */
  color: white; /* Texto blanco */
  border: none;
  padding: 12px 24px;
  border-radius: 8px; /* Bordes redondeados */
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: 600; /* Peso del texto */
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 20px;
}

.lysto-close-modal:hover {
  background: var(
    --lysto-secondary
  ); /* Cambia al color secundario al pasar el mouse */
  color: white; /* Mantén el texto blanco */
}

.lysto-step-success .lysto-button {
  margin-top: 20px; /* Espacio adicional si es necesario */
}

/* assets/css/admin-style.css */

/* Estilos para el overlay del modal de detalles */
.lysto-modal-details-overlay {
  display: none; /* Oculto por defecto */
  position: fixed; /* Posición fija para cubrir toda la pantalla */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente */
  z-index: 10000; /* Asegurar que esté por encima de otros elementos */
  overflow-y: auto; /* Permitir scroll si el contenido es largo */
  padding: 40px 20px; /* Espacio para que no pegue a los bordes */
  box-sizing: border-box;
}

/* Estilos para el contenedor del contenido del modal */
.lysto-modal-details-content {
  background-color: #fff;
  max-width: 700px; /* Ancho máximo del modal */
  margin: 0 auto; /* Centrar horizontalmente */
  padding: 25px 30px;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Estilos para el botón de cerrar */
.lysto-modal-details-close {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #888;
  cursor: pointer;
  padding: 0;
}
.lysto-modal-details-close:hover {
  color: #333;
}

/* Estilos para el cuerpo del modal (donde va el contenido) */
#lysto-order-details-body {
  margin-top: 15px;
  max-height: 70vh; /* Altura máxima antes de hacer scroll */
  overflow-y: auto; /* Scroll si el contenido excede la altura */
}

#lysto-order-details-body h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}
#lysto-order-details-body h3:first-child {
  margin-top: 0;
}

#lysto-order-details-body ul,
#lysto-order-details-body dl {
  padding-left: 0;
  list-style: none;
}
#lysto-order-details-body dl dt {
  font-weight: bold;
  display: inline-block;
  min-width: 120px; /* Ajusta según necesites */
  margin-right: 10px;
}
#lysto-order-details-body dl dd {
  display: inline;
  margin-left: 0;
}
#lysto-order-details-body li {
  padding: 5px 0;
  border-bottom: 1px dotted #eee;
}
#lysto-order-details-body li:last-child {
  border-bottom: none;
}

/* Estilos opcionales para mejorar la legibilidad de las tablas internas */
#lysto-order-details-body table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
}
#lysto-order-details-body th,
#lysto-order-details-body td {
  border: 1px solid #ddd;
  padding: 6px 8px;
  text-align: left;
  font-size: 0.9em;
}
#lysto-order-details-body th {
  background-color: #f7f7f7;
}

/* Estilo para el botón de acción en la tabla */
.lysto-action-button {
  cursor: pointer;
  color: #2271b1; /* Color de enlace estándar de WP */
  background: none;
  border: none;
  padding: 0;
  margin: 0 5px; /* Pequeño espacio alrededor */
  vertical-align: middle; /* Alinear con el texto si lo hubiera */
}
.lysto-action-button .dashicons {
  font-size: 18px; /* Tamaño del icono */
  line-height: inherit; /* Heredar altura de línea */
}
.lysto-action-button:hover {
  color: #135e96;
}

/* Clases de estado usadas en el modal (ejemplo) */
.lysto-status {
  font-weight: bold;
}
.lysto-status-completed {
  color: green;
}
.lysto-status-pending {
  color: orange;
}
.lysto-status-partial {
  color: #cc7700;
} /* Para cuotas parciales */
.lysto-status-unknown {
  color: grey;
}

/* Ocultar el radio button predeterminado de WooCommerce */
/* .payment_method_lysto_payment .input-radio {
  display: none !important;
} */

/* Estilos para el botón personalizado */
/* .lysto-payment-button {
  background: var(--lysto-primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  transition: background 0.3s;
  width: 100%;
  text-align: center;
  margin: 10px 0;
}

.lysto-payment-button:hover {
  background: var(--lysto-secondary);
}

Estilos para el botón de pago */
/* .lysto-payment-button {
  background: var(--lysto-primary);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: background 0.3s;
} */

/* .lysto-payment-button:hover {
  background: var(--lysto-secondary);
} */

/* Estilos para el modal */
/* .lysto-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
} */

/* .lysto-modal-content {
  background: var(--lysto-background);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
} */

/* Estilos para el loader */
/* .lysto-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
} */

/* .lysto-loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--lysto-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: lysto-spin 1s linear infinite;
} */

/* @keyframes lysto-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
} */