/* Contenedor del botón de copia con posición relativa para ubicar correctamente el tooltip */
.copy-btn {
  position: relative;
  overflow: visible;
}

/* Tooltip oculto por defecto */
.copy-btn .tooltip-text {
  visibility: hidden;
  opacity: 0;
  background-color: #f8f9fa; 
  border: 2px solid; 
  border-radius: 6px; 
  padding: 6px 10px;
  font-size: 13px;
  position: absolute;
  z-index: 10;
  top: -5px; 
  left: 35px;
  white-space: nowrap; 
  transition: opacity 0.3s ease, border-color 0.3s ease; 
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
  color: #333;
  font-weight: 500;
}

/* Muestra el tooltip cuando se aplica la clase correspondiente */
.copy-btn.show-tooltip .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* Tooltip con estilo de éxito (verde) */
.copy-btn.tooltip-success .tooltip-text {
  border-color: #28a745;
  color: #28a745;
}

/* Tooltip con estilo de error (rojo) */
.copy-btn.tooltip-error .tooltip-text {
  border-color: #dc3545;
  color: #dc3545;
}

/* Ajusta la posición del tooltip en pantallas pequeñas */
@media (max-width: 576px) {
  .copy-btn .tooltip-text {
    top: -5px;
    left: -135px;
  }
  .rgtalopay-timer-box-classic {
    margin-top: 20px;
  }
}

/* Contenedor visual del temporizador */
.rgtalopay-timer-box {
  background-color: rgba(204,204,204,.15);
  border: 1px solid rgba(160, 160, 160, .25); 
  border-radius: 8px;
}

/* Estilo base del texto del contador */
.timer-display {
  font-size: 1.5rem;
  font-weight: 700;
  color: #777777; 
}

/* Estilo de alerta cuando el tiempo expira */
.rgtalopay-timer-box.expired {
  border-color: #e57373; 
  background-color: #fff0f0; 
}

/* Texto del temporizador en estado expirado */
.rgtalopay-timer-box.expired .timer-display, .text-danger-pay {
  color: #d32f2f; 
}

/* Caja principal del bloque de pago clásico */
.rgtalopay-payment-box-classic {
  max-width: none!important;
}

/* Ajuste de botones de copiar dentro del bloque clásico */
.rgtalopay-payment-box-classic .copy-btn {
  min-width: auto;
}

/* Ajustes del tamaño y espaciado del texto del contador en el bloque clásico */
.rgtalopay-payment-box-classic .timer-display {
  font-size: 1.5rem;
  letter-spacing: 2px;
}

/* Flex base para elementos en fila dentro del bloque clásico */
.d-flex-classic{
  display: flex;
  align-items: center;
}


/* Color de los iconos dentro de d-flex-classic */
.d-flex-classic i.material-icons.me-1 {
  color: black!important;
}


/* Centrado de elementos clave dentro del bloque de pago */
div#rgtalopay-timer,.timer-valid-until,.d-flex-timer, .historial-classic, .payment-instructions-classic  {
  justify-content: center;
  display: flex;
}

/* Altura mínima de cada fila de datos de transferencia */
.classic-transfer-data{
  min-height: 30px;
}

.transfer-data{
  min-height: 24px;
}


/* Posicionamiento del logo de Talo dentro del temporizador */
.logo-talo-timer{
  display: flex;
  justify-content: end;
}


/* Ajustes generales del bloque de pago dentro del detalle de pedido */
#order-detail .rgtalopay-payment-box-classic {
    padding: 1rem;
    background: white;
}

/* Tamaño de la leyenda "Válido hasta" dentro del bloque clásico */
.rgtalopay-timer-box-classic .timer-valid-until.text-muted.small {
    font-size: .8rem !important;
}

/* Color de títulos y texto en negrita dentro del bloque clásico */
.rgtalopay-payment-box-classic h3, .rgtalopay-payment-box-classic strong, .title-pagos-classic {
  color: #777777!important;
}

.timer-row{
  display: grid;
  align-items: center;
}