/* === USER HUB MODAL === */

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* User Hero */
.ht-user-hero {
  position: relative;
  /* Context */
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px;
  margin-bottom: 20px;
  background: var(--bg-overlay-2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  /* Soft shadow */
}

.ht-user-hero__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.ht-user-hero__avatar i {
  font-size: 36px;
  color: var(--text-overlay-muted);
}

.ht-user-hero__info {
  flex: 1;
}

.ht-user-hero__name {
  margin: 5px 0 4px 0;
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse);
}

.ht-user-hero__details {
  margin-bottom: 2px;
  font-size: var(--text-sm);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
}

/* Room Badge (Top Right) */
.ht-user-hero__room {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 12px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-bg-dark);
  background: var(--color-border);
  border-radius: var(--radius-lg);
}

.ht-user-hero__dates {
  width: 100%;
  min-width: 200px;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-subtle);
}

/* Quick Stats */
.ht-quick-stats {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.ht-quick-stats__item {
  padding: 16px;
  text-align: center;
background: var(--bg-overlay-1);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.ht-quick-stats__item:hover {
background: var(--bg-overlay-2);
  transform: translateY(-2px);
}

.ht-quick-stats__item i {
  display: block;
  margin-bottom: 8px;
font-size: 28px;
  color: var(--text-overlay-muted);
}

.ht-quick-stats__item span {
display: block;
  margin-bottom: 4px;
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-inverse);
}

.ht-quick-stats__item p {
  margin: 0;
font-size: var(--text-xs);
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Quick Links */
.ht-quick-links {
display: flex;
  flex-direction: column;
  gap: 8px;
}

.ht-quick-link {
display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  background: var(--bg-overlay-1);
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.ht-quick-link:hover {
  color: var(--color-text-inverse);
  text-decoration: none;
background: rgba(255, 255, 255, 0.1);
  transform: translateX(4px);
}

.ht-quick-link i:first-child {
font-size: 20px;
  color: rgba(255, 255, 255, 0.6);
}

.ht-quick-link span {
flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}

.ht-quick-link i:last-child {
font-size: 18px;
  color: rgba(255, 255, 255, 0.4);
}

/* Settings Form */
.ht-settings-form {
  max-width: 500px;
  margin: 0 auto;
}

.ht-settings-section {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ht-settings-section:last-child {
  border-bottom: none;
}

.ht-settings-form .form-group {
  margin-bottom: 16px;
}

.ht-settings-form .form-control:focus {
  color: var(--color-text-inverse);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.ht-settings-form .form-control[readonly] {
  cursor: not-allowed;
  background: rgba(255, 255, 255, 0.03);
}

.ht-pin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ht-pin-actions .btn {
  flex: 1;
  min-width: 140px;
}

/* Action Section */
ht-action-section {
  margin-bottom: 24px;
}

.ht-action-grid {
display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.ht-action-item:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.ht-action-item--active {
  background: rgba(239, 68, 68, 0.35) !important;
  border-color: rgba(239, 68, 68, 0.6) !important;
}

.ht-action-item--active i {
  color: #fca5a5 !important;
}

/* Contact & Social Icons */
.ht-contact-icons,
.ht-social-icons {
display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ht-contact-icon:hover,
.ht-social-icon:hover {
  color: var(--color-text-inverse);
  text-decoration: none;
background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

/* Brand Colors */
.ht-contact-icon--whatsapp:hover {
  background: rgba(37, 211, 102, 0.2);
  border-color: rgba(37, 211, 102, 0.4);
}

.ht-social-icon--facebook:hover {
  background: rgba(24, 119, 242, 0.2);
  border-color: rgba(24, 119, 242, 0.4);
}

.ht-social-icon--twitter:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}

.ht-social-icon--instagram:hover {
  background: rgba(225, 48, 108, 0.2);
  border-color: rgba(225, 48, 108, 0.4);
}

.ht-social-icon--youtube:hover {
  background: rgba(255, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.4);
}

.ht-social-icon--tiktok:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.3);
}

.ht-social-icon--linkedin:hover {
  background: rgba(10, 102, 194, 0.2);
  border-color: rgba(10, 102, 194, 0.4);
}

/* User Hub Text Contrast Fixes */
.ht-settings-form .form-control {
  font-size: var(--text-sm);
  color: var(--color-text-inverse) !important;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.ht-settings-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.ht-settings-form label {
  margin-bottom: 6px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold) !important;
  color: rgba(255, 255, 255, 0.95) !important;
}

.ht-settings-section__title {
  margin-bottom: 16px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-inverse) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ht-action-section__title {
  margin-bottom: 12px;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Contact and Social Icons - Better visibility */
.ht-contact-icon,
.ht-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-text-inverse) !important;
  text-decoration: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 50%;
  transition: var(--transition-fast);
}

.ht-contact-icon i,
.ht-social-icon i {
  font-size: 20px;
  color: var(--color-text-inverse) !important;
}

/* Action items better contrast */
.ht-action-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 16px 12px;
  color: var(--color-text-inverse) !important;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}

.ht-action-item i {
  font-size: 28px;
  color: var(--color-text-inverse) !important;
}

.ht-action-item span {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-inverse) !important;
  text-align: center;
}

/* Custom switch */
.custom-control-label {
  color: rgba(255, 255, 255, 0.95) !important;
}

/* ===== FIX: User Hub Dark Text for Light Background ===== */
#user_hub_modal .ht-settings-form .form-control {
  color: var(--color-text-body) !important;
  background: rgba(255, 255, 255, 0.8) !important;
}

#user_hub_modal button.ht-modal-close-btn {
  top: 17px;
  right: 19px;
  width: 50px;
  height: 50px;
}

form#hub_pin_form .form-control {
  border: 1px solid #ececec !important;
}

#user_hub_modal .ht-settings-form .form-control::placeholder {
  color: rgba(0, 0, 0, 0.4) !important;
}

#user_hub_modal .ht-settings-form label {
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-body) !important;
}
#user_hub_modal .ht-settings-section__title {
color: var(--color-text-body) !important;
}

#user_hub_modal .custom-control-label {
color: var(--color-text-body) !important;
}

#user_hub_modal .ht-user-hero__room,
#user_hub_modal .ht-user-hero__dates {
  color: var(--color-text-subtle) !important;
}

#user_hub_modal .ht-quick-stats__item p {
  color: var(--color-text-subtle) !important;
}

#user_hub_modal .ht-quick-stats__item span {
  color: var(--color-text-body) !important;
}

#user_hub_modal .ht-empty-state__title {
  color: var(--color-text-body) !important;
}

#user_hub_modal .ht-empty-state__message {
  color: var(--color-text-subtle) !important;
}

/* ===== User Hub: Consistent Styling with Standard Modals ===== */

#user_hub_modal .ht-action-item:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: var(--shadow-md) !important;
}

#user_hub_modal .ht-action-item i {
  color: var(--color-text-subtle) !important;
}

#user_hub_modal .ht-action-item span {
  color: var(--color-text-body) !important;
}

#user_hub_modal .ht-contact-icon:hover,
#user_hub_modal .ht-social-icon:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: var(--shadow-md) !important;
}

#user_hub_modal .ht-quick-link:hover {
  color: #000 !important;
background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  box-shadow: var(--shadow-md) !important;
}

#user_hub_modal .ht-quick-link i:first-child {
color: var(--color-text-subtle) !important;
}

#user_hub_modal .ht-quick-link i:last-child {
color: var(--color-text-muted) !important;
}

/* ===== FIX: Main List Scroll & Loader ===== */

.ht-loader-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200px;
}

.ht-loader {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: var(--color-info);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
}

100% {
  transform: rotate(360deg);
}
}

.ht-modal-full .ht-empty-state__icon,
.ht-modal-auto .ht-empty-state__icon,
.ht-modal-glass-full .ht-empty-state__icon,
.ht-modal-glass-auto .ht-empty-state__icon {
  background: rgba(0, 0, 0, 0.05) !important;
}

.ht-modal-full .ht-empty-state__icon i,
.ht-modal-auto .ht-empty-state__icon i,
.ht-modal-glass-full .ht-empty-state__icon i,
.ht-modal-glass-auto .ht-empty-state__icon i {
  color: var(--color-text-muted) !important;
}

#user_hub_modal .ht-quick-stats__item:hover {
  background: rgba(255, 255, 255, 1) !important;
  box-shadow: var(--shadow-md) !important;
}

#user_hub_modal .ht-quick-stats__item i {
  color: var(--color-text-subtle) !important;
}

#user_hub_modal .ht-user-hero__avatar {
  background: rgba(0, 0, 0, 0.08) !important;
}

#user_hub_modal .ht-user-hero__avatar i {
  color: var(--color-text-subtle) !important;
}

#user_hub_modal .ht-user-hero__name {
  color: var(--color-text-body) !important;
}

#user_hub_modal .ht-user-hero__details {
  color: var(--color-text-subtle) !important;
}

/* Empty State Icon */
#user_hub_modal .ht-empty-state__icon {
background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--shadow-md) !important;
}

#user_hub_modal .ht-empty-state__icon i {
color: var(--color-text-subtle) !important;
}

/* ===== User Hub: Better Spacing & Breathing Room ===== */

/* More space between sections */
#user_hub_modal .ht-action-section {
  margin-bottom: 32px !important;
}

#user_hub_modal .ht-action-section__title {
  margin-bottom: 16px !important;
  color: var(--color-text-body) !important;
}

/* Action Items - White background with shadow like ht-modal-grid-item */
/* Action Items - More padding */
#user_hub_modal .ht-action-item {
  gap: 10px !important;
  padding: 20px 16px !important;
  color: var(--color-text-body) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Contact & Social Icons - More spacing */
#user_hub_modal .ht-contact-icons,
#user_hub_modal .ht-social-icons {
  gap: 16px !important;
}

/* Contact & Social Icons - White background with shadow */
#user_hub_modal .ht-contact-icon,
#user_hub_modal .ht-social-icon {
  width: 56px !important;
  height: 56px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--shadow-md) !important;
}

#user_hub_modal .ht-contact-icon i,
#user_hub_modal .ht-social-icon i {
  font-size: 24px !important;
  color: var(--color-text-subtle) !important;
}

/* Quick Links - More padding */
#user_hub_modal .ht-quick-links {
  gap: 12px !important;
}

/* Quick Links - White background with shadow */
#user_hub_modal .ht-quick-link {
  padding: 16px 18px !important;
  color: var(--color-text-body) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Quick Stats - More spacing */
#user_hub_modal .ht-quick-stats {
  gap: 14px !important;
  margin-bottom: 24px !important;
}

#user_hub_modal .ht-quick-stats__item {
  padding: 20px 16px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: var(--shadow-md) !important;
}

/* User Hero - White background with shadow */
/* User Hero - More padding */
#user_hub_modal .ht-user-hero {
  position: relative !important;
  /* Context for badge */
  gap: 18px !important;
  padding: 24px !important;
  margin-bottom: 24px !important;
  background: var(--color-bg-card) !important;
  border: none !important;
  /* Pure white background */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

/* Tab Content */
#user_hub_modal .ht-tab-content {
  height: 100%;
  padding: 24px !important;
}

#user_hub_modal #tab-account { padding-top: 0 }

/* Settings Sections - More spacing */
#user_hub_modal .ht-settings-section {
  padding-bottom: 28px !important;
  margin-bottom: 28px !important;
}

/* ===== App & Services Grid - Better Responsive ===== */
#user_hub_modal .ht-action-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  gap: 14px !important;
}

@media (max-width: 768px) {
  #user_hub_modal .ht-action-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Social Icons - Brand Colors (Extended) */
#user_hub_modal .ht-social-icon--tripadvisor:hover {
  background: rgba(0, 175, 119, 0.2) !important;
  border-color: rgba(0, 175, 119, 0.4) !important;
}

#user_hub_modal .ht-user-hero__room {
  position: absolute !important;
  top: 16px !important;
  /* Slightly higher */
  right: 16px !important;
  z-index: 2;
  width: auto !important;
  /* Slightly smaller text */
  padding: 4px 10px !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
  font-weight: var(--font-weight-bold) !important;
  color: #495057 !important;
  letter-spacing: 0.5px !important;
  /* Slightly further right */
  background: var(--color-border) !important;
  /* Smaller padding */
  border-radius: var(--radius-lg) !important;
}

#user_hub_modal .ht-social-icon--holidaycheck:hover {
  background: rgba(12, 72, 176, 0.2) !important;
  border-color: rgba(12, 72, 176, 0.4) !important;
}

#user_hub_modal .ht-social-icon--google:hover {
  background: rgba(66, 133, 244, 0.2) !important;
  border-color: rgba(66, 133, 244, 0.4) !important;
}

/* Social icon images centering */
#user_hub_modal .ht-social-icon img {
  display: block;
}

/* User Hub Footer - Light Mode Override */
#user_hub_modal .ht-modal-footer {
  padding: 15px !important;
  background: var(--color-bg-card) !important;
  border-top: 1px solid var(--color-border-light) !important;
}

/* ===== Better Readonly Fields Styling ===== */
#user_hub_modal .ht-settings-form .form-control[readonly] {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-subtle) !important;
  cursor: not-allowed;
  background: rgba(0, 0, 0, 0.05) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

#user_hub_modal .ht-settings-form .form-control:not([readonly]) {
  font-weight: var(--font-weight-medium);
}

/* Labels for editable fields */
#user_hub_modal .ht-settings-form .form-group--editable label::after {
  font-size: var(--text-sm);
  content: " ✏️";
}

/* Info icon for readonly */
#user_hub_modal .ht-settings-form .form-group--readonly label::after {
  font-size: var(--text-xs);
  content: " 🔒";
  opacity: 0.6;
}
/* ==========================================================================
   BLOCK: INPUT MINIMALISTA (Icono integrado)
   ========================================================================== */

/* 1. El Contenedor Padre (Crucial: position relative) */
.ht-input-minimal-group {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 16px !important; /* Espacio entre los distintos campos */
}

/* 2. El Icono (Flotando mágicamente dentro) */
.ht-input-minimal-icon {
    position: absolute !important;
    top: 50% !important;
    left: 16px !important; /* Separación desde el borde izquierdo */
    z-index: 2 !important;
    font-size: 22px !important;
    color: var(--color-text-muted) !important; /* Gris suave, no negro, para que sea elegante */
    /* TRUCO PRO: pointer-events none hace que si el usuario hace clic 
       justo encima del icono, el clic "atraviese" y active el input */
    pointer-events: none !important;
    transform: translateY(-50%) !important; /* Lo centra verticalmente de forma matemática */ 
    transition: color 0.2s ease !important;
}

/* 3. El Input (La cápsula) */
.ht-input-minimal {
    width: 100% !important;
    /* PADDING: Arriba, Derecha, Abajo, IZQUIERDA (El 48px deja el hueco para el icono) */
    padding: 16px 16px 16px 48px !important;
    font-size: 1rem !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-text-heading) !important; /* Texto gris pizarra muy oscuro */
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important; /* Borde muy sutil */ 
    border-radius: var(--radius-sm) !important; /* Curva suave premium */
    box-shadow: 0 2px 6px rgba(0,0,0,0.02) !important;
    transition: var(--transition-fast) !important;
}

/* 4. Estado de Foco (Cuando el usuario toca para escribir) */
.ht-input-minimal:focus {
    outline: none !important;
    background-color: var(--color-bg-card) !important;
    border-color: var(--color-text-heading) !important; /* El borde se oscurece para dar feedback */
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

/* 5. El toque de magia: El icono se oscurece cuando el input está enfocado */
.ht-input-minimal-group:focus-within .ht-input-minimal-icon {
    color: var(--color-text-heading) !important; /* El icono acompaña la acción */
}

/* Opcional: Estilo para el placeholder (el texto de ayuda) */
.ht-input-minimal::placeholder {
    font-weight: var(--font-weight-normal) !important;
    color: var(--color-border-strong) !important;
}

/* HtPhoneInput dentro del grupo minimal */
#user_hub_modal .ht-input-minimal-group .ht-phone {
    width: 100%;
    background-color: var(--color-bg-card) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

#user_hub_modal .ht-input-minimal-group .ht-phone .ht-phone__number {
    padding-left: 4px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

#user_hub_modal .ht-input-minimal-group:has(.ht-phone) .ht-input-minimal-icon {
    display: none !important;
}

/* ── Save footer — sticky al fondo del tab ────────────────────────────── */

.ht-hub-save-footer {
    position: sticky;
    bottom: 0;
    padding: 16px 0;
    background: linear-gradient(to top, var(--color-bg-main) 60%, transparent);
    z-index: 2;
}