/* Overlay del modal */
.ui-widget-overlay.ui-front {
  background: black;
  opacity: 0.9;
  z-index: 4995;
}

/* Contenedor principal del modal */
#drupal-modal.ui-dialog-content {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  background-color: #15151a;
  color: #f1f1f1;
  border-radius: 8px;
  padding: 24px;
  font-family: 'Segoe UI', sans-serif;
}

/** Game image field **/
#drupal-modal .image-field {
  max-width: 128px !important;
}

.ui-widget.ui-widget-content {
  border: 1px solid #15151a;
}

/* Título del modal */
.ui-dialog-titlebar {
  font-size: 1rem !important;
  font-weight: 500 !important;
  padding: 10px 16px !important;
  background-color: #1f1f24 !important;
  color: #ddd !important;
  border: 1px solid #15151a !important;
}

.ui-dialog-titlebar h1 {
  font-size: 1rem !important;
  font-weight: 500 !important;
  /*padding: 10px 16px;*/
  background-color: #1f1f24 !important;
  color: #ddd !important;
}

/* Botón de cerrar */
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
  width: 32px !important;
  height: 32px !important;
}
.ui-dialog-titlebar-close {
  top: 5px !important; /* Incrementa este valor para bajarlo más */
  transform: translateY(0) !important;
}
.ui-icon-closethick {
  position: absolute !important;
  top: 19px !important;
}
.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
  border-color: transparent !important;
}

/* Estilo general del formulario */
#drupal-modal form.sell-form {
  margin-top: 20px;
}

#drupal-modal .form-email {
  width: 90%;
}

/* Acciones dentro del formulario */
.ui-widget-content.ui-dialog-buttonpane {
  padding: 12px 24px !important;
  border-block-start: 1px solid rgba(0, 0, 0, .08) !important;
  border-end-start-radius: 8px !important;
  border-end-end-radius: 8px !important;
  background: #1B1B1D !important;
}

.ui-widget-content.ui-dialog-buttonpane .buy-now-button {
  padding: 10px !important;
}

#drupal-modal .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid #333;
}

/* Botón de enviar */
#drupal-modal input[type="submit"],
#drupal-modal .ui-dialog-buttonpane .btn {
  background-color: #ff7a00;
  color: white;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

#drupal-modal input[type="submit"]:hover,
#drupal-modal .ui-dialog-buttonpane .btn:hover {
  background-color: #e56d00;
}

/* Botón de cerrar/cancelar si agregas uno */
#drupal-modal .cancel-button {
  background-color: #444;
  color: white;
}

#drupal-modal .cancel-button:hover {
  background-color: #666;
}

/* Botones */
#drupal-modal .btn {
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}

#drupal-modal .btn-primary {
  background-color: #ff7a00;
  color: white;
}

#drupal-modal .btn-primary:hover {
  background-color: #e56d00;
}

#drupal-modal .btn-secondary {
  background-color: #666;
  color: white;
}

#drupal-modal .btn-secondary:hover {
  background-color: #888;
}

/* Eliminar fondo blanco del contenedor padre */
.ui-dialog {
  background-color: #1f1e1e !important;
  z-index: 5000;
}

/* Asegúrate que el modal interno tenga su fondo y borde correctamente */
.ui-widget-content {
  background-color: transparent;
  border: 1px solid #15151a;
}

#drupal-modal.ui-dialog-content {
  background-color: #15151a;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.7);
  padding: 24px;
  border: 1px solid #333;
}