body{
  background-color: #000000;
  font-family: 'Roboto', sans-serif;
}

/* Back to Index Button Styles */
.back-to-index-button {
  position: fixed;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, #ffcb2f, #c29100);
  color: #000;
  border: none;
  padding: 10px 20px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 203, 47, 0.3);
  z-index: 1000;
  font-family: 'Roboto', sans-serif;
}

.back-to-index-button:hover {
  background: linear-gradient(135deg, #c29100, #a17800);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 203, 47, 0.4);
  color: #fff;
}

.back-to-index-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255, 203, 47, 0.3);
}

/* Parte del diseño de los botones */
:root {
  --color: #ffcb2f;
  --hover: #c29100;
}

button.raise {
  background: none;
  border: 2px solid var(--color);
  color: var(--color);
  font: inherit;
  padding: 1em 2em;
  cursor: pointer;
  transition: 0.25s;
  box-shadow: none;
  border-radius: 10px;
}

button.raise:hover,
button.raise:focus {
  color: #fff;
  border-color: var(--hover);
  box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
  transform: translateY(-0.25em);
}

/* Contenedor de los botones */
.buttons {
  display: flex;
  justify-content: center;
  gap: 1em; /* espacio entre botones */
  margin-top: 2em;
}

.page {
  min-height: 96vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Ajustamos container para quitar posición absoluta */
.container {
  width: 600px;
  height: 350px;
  display: inline-flex;
  position: relative; /* ya no absolute */
  top: 0;
  left: 0;
  transform: none;
  margin-bottom: 2em; /* separación abajo hacia los botones */
}

  .backbox{
    background-color: #404040;
    width: 100%;
    height: 80%;
    position: absolute;
    transform: translate(0,-50%);
    top:50%;
    display: inline-flex;
  }
  
  .frontbox{
    background-color: white;
    border-radius: 20px;
    min-height: 350px; /* Altura mínima */
    height: auto;      /* Permitir que crezca */
    width: 50%;
    z-index: 10;
    position: absolute;
    right:0;
    margin-right: 3%;
    margin-left: 3%;
    transition: right .8s ease-in-out;
    /* overflow: hidden; */ /* Eliminado para permitir crecimiento */
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start; /* Cambiado de center a flex-start para evitar que el contenido se mueva demasiado si es pequeño */
  }
  
  .moving{
    right:45%;
  }
  
  .loginMsg, .signupMsg{
    width: 50%;
    height: 100%;
    font-size: 15px;
    box-sizing: border-box;
  }
  
  .loginMsg .title,
  .signupMsg .title{
    font-weight: 300;
    font-size: 23px;
  }
  
  .loginMsg p,
  .signupMsg p {
    font-weight: 100;
  }
  
  .textcontent{
    color:white;
    margin-top:65px;
    margin-left: 12%;
  }
  
  .loginMsg button,
  .signupMsg button {
    background-color: #404040;
    border: 2px solid white;
    border-radius: 10px;
    color:white;
    font-size: 12px;
    box-sizing: content-box;
    font-weight: 300;
    padding:10px;
    margin-top: 20px;
  }
  
  /* front box content*/
  .login, .signup{
    padding: 20px;
    text-align: center;
    width: 100%; 
    height: 100%; /* NUEVO: Para que ocupen toda la altura del frontbox */
    box-sizing: border-box;
    display: flex; /* NUEVO: Para centrar el step activo */
    flex-direction: column; /* NUEVO: Para alinear el step */
    justify-content: center; /* NUEVO: Para centrar verticalmente el step */
  }
  
  .login h2,
  .signup h2 {
    color: #b28405;
    font-size:22px;
  }
  
  .inputbox{
    margin-top:0; /* Ajustado: El margin-top general se quita o se maneja más específicamente */
                  /* Los steps individuales no necesitarán este margin-top si flexbox los centra */
  }

  .inputbox.step {
    /* No margin-top here, rely on flex centering from parent .signup or .login */
     width: 100%; /* Asegurar que el step ocupe el ancho disponible para centrar su contenido interno */
  }

  /* Si los campos de input individuales necesitan un margen superior, se puede añadir aquí: */
  .inputbox input:not([type="checkbox"]), 
  .inputbox select,
  .iti { /* Aplicar a .iti para el input de teléfono */
    margin-top: 15px; /* O el valor que sea apropiado, ej: 20px o 30px como estaba antes para .inputbox */
  }

  /* El primer input/select/iti dentro de un .inputbox.step puede no necesitar margen superior, o uno menor */
  .inputbox.step > input:first-child:not([type="checkbox"]), 
  .inputbox.step > select:first-child,
  .inputbox.step > .iti:first-child {
    margin-top: 5px; /* Margen superior más pequeño para el primer elemento de un paso */
  }
  
  .login input, 
  .signup input {
    display: block;
    width: 100%;
    height: 40px;
    background-color: #f2f2f2;
    border: none;
    margin-bottom:20px;
    font-size: 12px;
  }
  
  /* Styles for intl-tel-input */
  .iti {
    width: 100%; /* Make the entire widget container full width */
    margin-bottom: 20px; /* Add space below the phone input */
    margin-top: 15px; /* Added consistent margin-top like other inputs */
  }

  .iti__tel-input {
    width: 100% !important; /* Ensure the actual input field inside the widget is full width */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    height: 40px; /* Match other input heights */
    margin-bottom: 0; /* Reset margin-bottom if .iti has it already */
  }

  .signup input[name="wallet"] {
    /* Optional: if more space is needed above wallet specifically after .iti margin */
    /* margin-top: 5px; */
  }
  
  .login button,
  .signup button{
    background-color: #d6a200;
    border: none;
    color:white;
    font-size: 12px;
    font-weight: 300;
    box-sizing: content-box;
    padding:10px;
    border-radius: 10px;
    width: auto; /* Cambiado de 60px a auto */
    /* position: absolute; */ /* Problematic general rule - REMOVE or override specifically */
    /* right:30px; */
    /* bottom: 30px; */
    cursor: pointer;
    /* Ensure specific button rules below handle positioning properly */
  }
  
  /* Fade In & Out*/
  .login p {
    cursor: pointer;
    color:#404040;
    font-size:15px;
  }
  
  .loginMsg, .signupMsg{
    /*opacity: 1;*/
    transition: opacity .8s ease-in-out;
  }
  
  .visibility{
    opacity: 0;
  }
  
  .hide{
    display: none;
  }



/* Responsive */
@media (max-width: 768px) {
  .container {
    width: 90%;
    height: auto;
    flex-direction: column;
  }

  .backbox {
    position: static;
    transform: none;
    flex-direction: column;
    height: auto;
  }

  .frontbox {
    position: static;
    width: 100%;
    margin: 1em 0;
    height: auto;
  }

  .loginMsg, .signupMsg {
    width: 100%;
    text-align: center;
    margin-bottom: 1em;
  }

  .textcontent {
    margin-top: 20px;
    margin-left: 0;
  }

  .buttons {
    flex-direction: column;
    width: 80%;
  }

  button.raise {
    width: 100%;
  }

  /* Back to Index Button responsive */
  .back-to-index-button {
    top: 10px;
    left: 10px;
    padding: 8px 16px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .login h2, .signup h2 {
    font-size: 18px;
  }

  .login input, .signup input {
    height: 35px;
    font-size: 14px;
  }

  .login button, .signup button {
    font-size: 10px;
    width: 50px;
    right: 20px;
    bottom: 20px;
  }

  /* Back to Index Button mobile */
  .back-to-index-button {
    top: 8px;
    left: 8px;
    padding: 6px 12px;
    font-size: 11px;
    border-radius: 20px;
  }
}


.step {
  transition: all 0.5s ease;
}

.hide {
  display: none;
}

/* Modal de advertencia */
  /* Modal general */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .modal-content {
    position: relative;
    background: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    animation: fadeIn 0.3s ease-in-out;
  }

  .close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #888;
    transition: color 0.3s;
  }

  .close-button:hover {
    color: #000;
  }

  .modal-content p {
    margin: 20px 0 0 0;
    font-size: 18px;
    color: #333;
  }

  .modal.hide {
    display: none;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

/* Styles for the new modals in login page */
.modal.hide {
  display: none;
}

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.7);
  display: flex; /* Used to center modal content */
  align-items: center; /* Vertically center */
  justify-content: center; /* Horizontally center */
}

.modal .modal-content {
  background-color: #2c2c2c; /* Similar to Operaciones modal */
  color: #f0f0f0;
  padding: 25px;
  border: 1px solid #555;
  border-radius: 8px;
  width: 90%;
  max-width: 450px; /* Adjusted for login context */
  position: relative;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  text-align: left; /* Override general text-align if login form is centered */
}

.modal .modal-content h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  color: #efb810; /* Accent color */
}

.modal .inputbox label {
  display: block;
  margin-bottom: 8px;
  font-weight: normal; /* Lighter than main form labels if desired */
  color: #ccc;
}

.modal .inputbox input[type="email"],
.modal .inputbox input[type="password"] {
  width: 100%; /* Full width within modal content */
  padding: 10px;
  margin-bottom: 15px; /* Space below input */
  border: 1px solid #555;
  background-color: #333;
  color: #f0f0f0;
  border-radius: 4px;
  box-sizing: border-box;
}

.modal .auth-button {
  width: 100%;
  padding: 12px;
  background-color: #efb810; /* Theme color */
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  font-weight: bold;
  margin-top: 10px;
}

.modal .auth-button:hover {
  background-color: #dAA520; /* Darker shade of theme color */
}

.modal .message {
  margin-top: 15px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  font-size: 0.9em;
}

/* Modal Close Button */
.modal .close-modal-button {
  color: #aaa;
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  background: none;
  border: none;
  cursor: pointer;
}

.modal .close-modal-button:hover,
.modal .close-modal-button:focus {
  color: #fff;
  text-decoration: none;
}

/* Link-style button for "Forgot Password?" */
.link-button {
  background: none;
  border: none;
  color: #efb810; /* Theme accent color */
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: inherit; /* Inherit font size from surrounding text */
  font-family: inherit;
}

.link-button:hover {
  color: #dAA520; /* Darker accent */
}

/* LOGIN FORM BUTTONS RESTORE/ADJUSTMENT */

/* Container for links below password input */
#loginForm .form-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 15px;
}

#loginForm .form-links .link-button {
  margin-left: 5px;
  margin-right: 5px;
  background: none;
  border: none;
  color: #777;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: 0.9em;
  display: inline-block;
  position: static; /* Override general .login button absolute positioning */
  bottom: auto;      /* Reset bottom from general rule */
  right: auto;       /* Reset right from general rule */
  width: auto;       /* Reset width from general rule */
}

#loginForm .form-links .link-button:hover {
  color: #333;
}

/* Restore original login button style - check against your original .login button styles */
.login .auth-button {
  background-color: #d6a200;
  border: none;
  color: white;
  font-size: 1em; /* Slightly larger than the 0.88em for step buttons */
  font-weight: bold;
  box-sizing: border-box;
  padding: 10px 25px;
  border-radius: 10px;
  display: block;
  width: auto;
  min-width: 150px;
  cursor: pointer;
  margin: 20px auto 0 auto; /* Centered */
  position: static; /* Ensure it's not absolute */
}

.login .auth-button:hover {
    background-color: #c29100;
}

/* Ensure inputbox in modal doesn't conflict with main form's step styling if any */
.modal .inputbox {
    /* No specific step-related display properties here */
}

/* Button that was moved - specific styling */
#loginForm .forgot-password-trigger {
  display: block;
  text-align: right;
  margin-top: -10px;
  margin-bottom: 15px;
  font-size: 0.9em;
}

/* Adjust login form's main submit button positioning if affected */
#loginForm .auth-button {
    position: static; 
    display: block; 
    width: fit-content;
    margin: 20px auto 0 auto;
    padding: 10px 25px;
    bottom: auto;
    right: auto;
}

/* Styling for the new Change Password button within form-links */
#loginForm .form-links #showChangePasswordModalBtn {
}

/* Styles for the Change Password Modal (Leveraging existing .modal and .modal-content) */
/* Specifics for Change Password Modal content if different from forgot/reset */
#changePasswordModal .modal-content h2 {
}

#changePasswordModal .inputbox {
  margin-bottom: 15px;
}

#changePasswordModal label {
  display: block;
  margin-bottom: 5px;
  color: #ccc;
  font-weight: normal;
}

#changePasswordModal input[type="password"] {
  width: 100%;
  padding: 10px;
  background-color: #333;
  border: 1px solid #555;
  color: #f0f0f0;
  border-radius: 4px;
  box-sizing: border-box;
}

#changePasswordModal .auth-button {
  width: 100%;
  padding: 10px 15px;
  background-color: #c29100;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  margin-top: 10px;
}

#changePasswordModal .auth-button:hover {
  background-color: #c29100;
}

#changePasswordModal #changePasswordMessage {
  margin-top: 15px;
  min-height: 20px;
}

/* Style for the specific close button of Change Password modal if needed */
/* .close-change-password-modal is also a .close-modal-button, so it inherits general close styles */
/* No specific styles needed for .close-change-password-modal unless differentiation is required */

/* Translations for the new elements should be added to language.js */

/* Estilos para la sección de Preguntas de Seguridad en el Registro */
.security-hr {
  margin-top: 25px;
  margin-bottom: 15px;
  border: 0;
  border-top: 1px solid #eee;
}

.security-info {
  font-size: 0.85em;
  color: #555;
  margin-bottom: 15px;
  text-align: left;
  padding: 0 5px;
}

.security-question-box {
  margin-bottom: 20px;
}

.security-question-box label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 0.9em;
  color: #333;
  text-align: left;
}

.security-select {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #f9f9f9;
  font-size: 0.95em;
}

/* Estilos para el modal de Responder Preguntas de Seguridad */
#answerSecurityQuestionsModal .modal-content h2 {
}

#answerSecurityQuestionsModal .displayed-sq-text {
  font-weight: bold;
  margin-bottom: 8px;
  color: #ccc;
  font-size: 0.95em;
  text-align: left;
}

#answerSecurityQuestionsModal .inputbox input[type="text"] {
  margin-bottom: 20px;
}

#answerSecurityQuestionsModal #answerSecurityQuestionsMessage {
  min-height: 20px;
}

/* START - Styles for Signup Step 4: Payment Methods */
/* General Styling for Step 4 Container */
.inputbox.step.step-4 {
  padding: 15px;
  box-sizing: border-box; 
}

.inputbox.step-4 h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.3em;
  color: #333;
  text-align: center;
}

.inputbox.step-4 p {
  margin-bottom: 10px;
}

/* Styling for each Payment Method Group */
.payment-option-group {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 15px;
  margin-bottom: 18px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}

.payment-option-group:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.payment-option-group:last-child {
  margin-bottom: 0;
}

/* Styling for Checkbox and its Label */
.payment-method-selector {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  cursor: pointer;
}

.payment-method-selector input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-right: 12px;
  accent-color: #c29100;
  position: relative;
  top: -1px;
}

.payment-method-selector label {
  font-weight: 600;
  color: #444;
  font-size: 1.05em;
}

/* Styling for the Container of Input Fields (when visible) */
.payment-fields-container {
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px dashed #eaeaea;
}

.payment-fields-container.hide {
  display: none !important; /* Aseguramos que el ocultamiento sea prioritario si .hide está */
}

.payment-fields-container label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.88em;
  color: #555;
  font-weight: 500;
}

.payment-fields-container input[type="tel"],
.payment-fields-container input[type="text"],
.payment-fields-container select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.95em;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.payment-fields-container input[type="tel"]:focus,
.payment-fields-container input[type="text"]:focus,
.payment-fields-container select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Custom arrow for select dropdowns */
.payment-fields-container select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px auto;
  padding-right: 30px;
}

/* NUEVO: Estilos para hacer la lista de métodos de pago scrolleable */
.inputbox.step-4 #paymentMethodsListContainer {
  max-height: 130px;
                     /* Este valor puede necesitar ajuste fino basado en el espacio disponible real */
  overflow-y: auto;
  padding-right: 10px;
  margin-bottom: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding-top: 5px;
}

/* Estilos para la barra de scroll (WebKit - Chrome, Safari, Edge moderno) */
.inputbox.step-4 #paymentMethodsListContainer::-webkit-scrollbar {
  width: 8px;
}

.inputbox.step-4 #paymentMethodsListContainer::-webkit-scrollbar-track {
  background: #f8f8f8; 
  border-radius: 10px;
}

.inputbox.step-4 #paymentMethodsListContainer::-webkit-scrollbar-thumb {
  background: #d0d0d0; 
  border-radius: 10px;
}

.inputbox.step-4 #paymentMethodsListContainer::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

/* Smaller Buttons in Step 4 */
.inputbox.step-4 .auth-button {
  padding: 8px 15px;
  font-size: 0.88em;
  margin-top: 10px; 
}

.inputbox.step-4 .auth-button.secondary {
}
/* END - Styles for Signup Step 4: Payment Methods */

/* Visually hide an element but keep it accessible */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; /* keep screen readers happy */
}

/* Styles for Step 4 Payment Method Selection */
.inputbox.step-4 #paymentMethodsListContainer {
  /* max-height: 300px; */ /* Removed to allow full expansion */
  /* overflow-y: auto; */  /* Removed */
  border: 1px solid #e9ecef; /* Light border around the whole list */
  border-radius: 8px;
  background-color: #fff;
}

.payment-option-group {
  background-color: #fff; 
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 0;
}
.payment-option-group:last-child {
  border-bottom: none;
  border-bottom-left-radius: 8px; /* If container has border-radius */
  border-bottom-right-radius: 8px; /* If container has border-radius */
}

label.payment-method-selector {
  display: flex;
  align-items: center;
  padding: 16px 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

label.payment-method-selector:hover {
  background-color: #f8f9fa;
}

.pm-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%; /* Mantener si quieres contenedores circulares para los logos */
  /* background-color: #e0e0e0; */ /* Eliminado, la imagen tiene su propio fondo o transparencia */
  /* color: #333; */ /* Eliminado, no aplica a imágenes */
  display: flex; /* Mantener flex para centrar la imagen si es más pequeña que el contenedor */
  align-items: center;
  justify-content: center;
  /* font-weight: bold; */ /* Eliminado */
  margin-right: 12px;
  /* font-size: 16px; */ /* Eliminado */
  flex-shrink: 0;
  /* text-transform: uppercase; */ /* Eliminado */
  overflow: hidden; /* Para asegurar que si la imagen es más grande y no circular, se recorte al círculo */
}

.pm-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Asegura que toda la imagen sea visible dentro del ícono, puede ser 'cover' si prefieres que llene el círculo */
}

/* Example specific icon styles - can be expanded with actual logos/colors */
/* Estas reglas ya no son necesarias ya que usamos imágenes */
/* label[for="select_nequi"] .pm-icon { background-color: #7B247E; color: white; } */
/* label[for="select_daviplata"] .pm-icon { background-color: #E60000; color: white; } */
/* label[for="select_bancolombia"] .pm-icon { background-color: #002b80; color: white; } */
/* label[for="select_dollarapp"] .pm-icon { background-color: #28a745; color: white; } */
/* label[for="select_wallet"] .pm-icon { background-color: #6c757d; color: white; } */


.pm-text-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.pm-title {
  font-size: 1em;
  font-weight: 500;
  color: #212529;
  margin-bottom: 2px;
}

.pm-subtitle {
  font-size: 0.8em;
  color: #6c757d;
}

.pm-arrow {
  font-size: 1.3em;
  color: #adb5bd;
  margin-left: 15px;
  font-weight: bold; /* Makes '>' more prominent */
  display: none; /* Hide the arrow */
}


.payment-fields-container {
  padding: 15px 15px 20px 15px;
  background-color: #f8f9fa; /* Slightly different background for fields */
  /* border-top: 1px solid #f0f0f0; */ /* Might be redundant if group has border */
}

.payment-fields-container.hide {
  display: none !important; /* Aseguramos que el ocultamiento sea prioritario si .hide está */
}

.payment-fields-container label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85em;
  color: #495057;
  font-weight: 500;
}

.payment-fields-container input[type="tel"],
.payment-fields-container input[type="text"],
.payment-fields-container select {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 0.9em;
  background-color: #fff;
}

.payment-fields-container input:focus,
.payment-fields-container select:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.payment-fields-container input:last-child,
.payment-fields-container select:last-child {
  margin-bottom: 0;
}

/* Remove default focus outline for the label selector for cleaner look */
label.payment-method-selector:focus-within {
    /* outline: 2px solid #007bff; */ /* Example focus, if needed, but Nequi is subtle */
    /* background-color: #eef4ff; */
}

/* Adjust button margin in step 4 */
.inputbox.step-4 .auth-button,
.inputbox.step-4 .nav-button {
  margin-top: 25px;
}

/* Overwrite any previous styles for .payment-option-group that might conflict */
/* (The ones from before this redesign for example) */
.payment-option-group {
    border: none; /* Remove previous individual borders if any */
    padding: 0; /* Remove previous individual padding */
    border-bottom: 1px solid #f0f0f0; /* Keep this for separation */
}

/* REGLA REFORZADA: Asegurar que se muestre cuando .hide NO está presente */
.payment-fields-container:not(.hide) {
  display: block !important;
  /* min-height: 70px !important; */ /* Comentado temporalmente */
  /* padding: 10px !important;    */ /* Comentado temporalmente */
  /* background-color: yellow !important; */ /* Comentado temporalmente */
  /* border: 2px solid red !important;    */ /* Comentado temporalmente */
  /* opacity: 1 !important; */ /* Puede que no sea necesario forzar esto si display block es suficiente */
  /* visibility: visible !important; */ /* Puede que no sea necesario forzar esto */
  /* overflow: visible !important; */ /* Puede que no sea necesario forzar esto */
}

/* Adicional: Asegurar que los hijos directos también sean visibles */
.payment-fields-container:not(.hide) > * {
  /* display: block !important; */ /* Comentado temporalmente */
  /* visibility: visible !important; */ /* Comentado temporalmente */
  /* opacity: 1 !important; */ /* Comentado temporalmente */
  /* color: black !important; */ /* Comentado temporalmente */
}

/* General auth buttons for signup steps */
.signup .inputbox.step .auth-button {
    position: static; /* Key override for step buttons */
    width: auto; 
    padding: 8px 20px; /* Adjusted padding for slightly shorter buttons */
    font-size: 0.88em;
    margin: 0; /* Handled by .step-navigation-buttons */
    min-width: auto; /* Allow button to be smaller */
    flex-grow: 0; /* Prevent buttons from growing to fill space */
    text-align: center;
    /* Ensure background color is applied if not inherited properly */
    background-color: #d6a200; /* Default yellow */
    border: none;
    color: white;
    border-radius: 10px;
    cursor: pointer;
}

.signup .inputbox.step .auth-button.secondary {
    background-color: #6c757d; /* Grey for secondary/back buttons */
}
.signup .inputbox.step .auth-button.secondary:hover {
    background-color: #5a6268;
}


/* Container for step navigation buttons */
.step-navigation-buttons {
    display: flex;
    justify-content: space-between; /* Default for two buttons (Volver a la izq, Siguiente a la der) */
    align-items: center;
    margin-top: 25px; 
    width: 100%;
}

/* For Step 1, which has only one button and the specific class */
.step-navigation-buttons.single-button-container {
    justify-content: flex-end; /* Aligns the single button to the right */
}

/* Smaller Buttons in Step 4 - this might be redundant if covered by the above general rule */
/* .inputbox.step-4 .auth-button {
  padding: 8px 15px;
  font-size: 0.88em;
  margin-top: 10px; 
} */
/* The margin-top will be handled by .step-navigation-buttons */

/* Adjust button margin in step 4 - also likely handled by .step-navigation-buttons */
/* .inputbox.step-4 .auth-button,
.inputbox.step-4 .nav-button {
  margin-top: 25px;
} */

/* END - Styles for Signup Step 4: Payment Methods */