/*
  Zambik Uber-inspired theme
  Clean black/white interface, restrained spacing, neutral surfaces and one practical green accent.
*/
:root {
  --uber-black: #000000;
  --uber-surface: #111111;
  --uber-surface-elevated: #161616;
  --uber-surface-muted: #1f1f1f;
  --uber-border: #2b2b2b;
  --uber-border-strong: #3a3a3a;
  --uber-white: #ffffff;
  --uber-text: #f5f5f5;
  --uber-muted: #a6a6a6;
  --uber-subtle: #6b6b6b;
  --uber-green: #06c167;
  --uber-green-hover: #04a457;
  --uber-danger: #e11900;
  --uber-radius: 8px;
  --uber-radius-lg: 12px;
  --uber-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html,
body {
  background: var(--uber-black) !important;
  color: var(--uber-text) !important;
  font-family: var(--uber-font) !important;
  letter-spacing: -0.01em;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    transition-timing-function: ease !important;
  }
}

body::before,
body::after,
.profile-container::before,
.profile-container::after,
.offer-container::before,
.offer-container::after,
.trial-container::before,
.trial-container::after,
.particles {
  content: none !important;
  display: none !important;
}

/* Superficies principales */
.header,
.profile-header,
.offers-modal,
.search-section,
.settings-section,
.history-section,
.series-detail,
.video-modal,
.video-player-modal,
.profile-container,
.auth-container,
.app-container,
.main-container {
  background: var(--uber-black) !important;
}

.welcome-container,
.forms-container,
.plan-card,
.payment-section,
.feature-card,
.profile-form,
.avatars-grid,
.step,
.settings-group,
.setting-item,
.history-item,
.search-result-item,
.episode-item,
.info-tab-content,
.live-content-card,
.trial-card,
.offer-card,
.subscription-card,
.content-card,
.container,
.form-section,
.benefits,
.terms,
.scanner-instructions,
.scanner-container,
.scanner-controls,
.success-message,
.success-animation {
  background: var(--uber-surface-elevated) !important;
  border: 1px solid var(--uber-border) !important;
  border-radius: var(--uber-radius-lg) !important;
}

.header,
.profile-header,
.bottom-nav {
  border-color: var(--uber-border) !important;
}

.logo,
.logo h1,
.profile-title,
.subscription-title,
.welcome-title,
.offers-title,
.settings-title,
.history-title,
.section-title,
.series-detail-title,
.plan-name,
.plan-price,
.feature-title,
.trial-title,
.offer-title,
.hero-title {
  color: var(--uber-white) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
}

.subtitle,
.logo p,
.profile-subtitle,
.subscription-subtitle,
.welcome-description,
.offers-subtitle,
.settings-subtitle,
.history-subtitle,
.setting-description,
.plan-period,
.feature-description,
.series-detail-description,
.carousel-item-info,
.search-result-description,
.episode-description,
.trial-description,
.offer-description,
.security-note,
.validation-message,
.user-info,
.form-label {
  color: var(--uber-muted) !important;
  font-weight: 400 !important;
  text-transform: none !important;
}

.welcome-subtitle,
.auth-link a,
.plan-features li i,
.step-number,
.settings-group-title i,
.history-item-time i,
.feature-icon,
.payment-method i {
  color: var(--uber-green) !important;
}

/* Botones estilo Uber: sobrios, legibles y sin brillo. */
button,
.main-btn,
.auth-button,
.offers-button,
.plan-button,
.hero-btn,
.series-btn,
.settings-btn,
.history-btn,
.profile-button,
.logout-btn,
.search-btn,
.close-button,
.search-close-btn,
.settings-close-btn,
.history-close-btn,
.unlock-button,
.carousel-nav,
.cta-button,
.claim-button,
.submit-button,
.back-button,
.primary-button,
.secondary-button,
.login-link,
.back-btn,
.submit-btn,
.scan-btn,
.scanner-btn,
.btn,
.btn-primary,
.btn-secondary {
  border-radius: var(--uber-radius) !important;
  border: 1px solid transparent !important;
  font-family: var(--uber-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transform: none !important;
}

.main-btn.primary,
.auth-button,
.offers-button,
.plan-button.primary,
.hero-btn.primary,
.series-btn.primary,
.settings-btn.primary,
.profile-button,
.cta-button,
.claim-button,
.submit-button,
.primary-button,
.submit-btn,
.btn-primary,
.scanner-btn.capture,
.step-number,
.plan-card.popular::before {
  background: var(--uber-green) !important;
  color: var(--uber-black) !important;
  border-color: var(--uber-green) !important;
}

.main-btn.primary:hover,
.auth-button:hover,
.offers-button:hover,
.plan-button.primary:hover,
.hero-btn.primary:hover,
.series-btn.primary:hover,
.settings-btn.primary:hover,
.profile-button:hover,
.cta-button:hover,
.claim-button:hover,
.submit-button:hover,
.primary-button:hover,
.submit-btn:hover,
.btn-primary:hover,
.scanner-btn.capture:hover {
  background: var(--uber-green-hover) !important;
  border-color: var(--uber-green-hover) !important;
}

.main-btn.secondary,
.plan-button.secondary,
.hero-btn.secondary,
.series-btn.secondary,
.settings-btn.secondary,
.history-btn.secondary,
.logout-btn,
.search-btn,
.close-button,
.search-close-btn,
.settings-close-btn,
.history-close-btn,
.unlock-button,
.carousel-nav,
.secondary-button,
.back-button,
.back-btn,
.scan-btn,
.scanner-btn.cancel,
.btn-secondary,
.auth-tab.active,
.login-link {
  background: var(--uber-white) !important;
  color: var(--uber-black) !important;
  border-color: var(--uber-white) !important;
}

.main-btn.secondary:hover,
.plan-button.secondary:hover,
.hero-btn.secondary:hover,
.series-btn.secondary:hover,
.settings-btn.secondary:hover,
.history-btn.secondary:hover,
.logout-btn:hover,
.search-btn:hover,
.close-button:hover,
.search-close-btn:hover,
.settings-close-btn:hover,
.history-close-btn:hover,
.unlock-button:hover,
.carousel-nav:hover,
.secondary-button:hover,
.back-button:hover,
.back-btn:hover,
.scan-btn:hover,
.scanner-btn.cancel:hover,
.btn-secondary:hover,
.login-link:hover {
  background: #e7e7e7 !important;
  border-color: #e7e7e7 !important;
}

/* Formularios */
input,
select,
textarea,
.form-input,
.setting-select,
.header input,
#searchSectionInput {
  background: var(--uber-surface-muted) !important;
  color: var(--uber-white) !important;
  border: 1px solid var(--uber-border) !important;
  border-radius: var(--uber-radius) !important;
  font-family: var(--uber-font) !important;
  font-weight: 400 !important;
}

input:focus,
select:focus,
textarea:focus,
.form-input:focus,
.setting-select:focus,
.header input:focus,
#searchSectionInput:focus {
  outline: 2px solid var(--uber-white) !important;
  outline-offset: 2px !important;
  border-color: var(--uber-white) !important;
}

.search-wrapper,
.auth-tabs,
.payment-method,
.info-tab,
.toggle-slider,
.indicator,
.avatar-option {
  background: var(--uber-surface-muted) !important;
  border: 1px solid var(--uber-border) !important;
  border-radius: var(--uber-radius) !important;
}

.avatar-option,
#userAvatar,
.indicator,
.carousel-nav,
.close-button,
.search-close-btn,
.settings-close-btn,
.history-close-btn {
  border-radius: 999px !important;
}

.auth-tab,
.info-tab,
.bottom-nav button {
  color: var(--uber-muted) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.auth-tab.active,
.info-tab.active,
.bottom-nav button.active {
  color: var(--uber-black) !important;
  background: var(--uber-white) !important;
}

.bottom-nav {
  background: var(--uber-black) !important;
  border-top: 1px solid var(--uber-border) !important;
}

/* Tarjetas y contenido de streaming */
.hero-banner,
.series-detail-header,
.carousel-item,
.search-result-poster,
.history-item-poster,
.episode-thumbnail {
  border-radius: var(--uber-radius-lg) !important;
  border: 1px solid var(--uber-border) !important;
  overflow: hidden !important;
}

.carousel-item-overlay,
.series-detail-overlay,
.history-progress-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.88) 100%) !important;
}

.movie-badge,
.premiere-badge,
.plan-card.popular::before,
.live-badge,
.badge,
.status-badge,
.offer-badge,
.age-badge {
  background: var(--uber-white) !important;
  color: var(--uber-black) !important;
  border: 1px solid var(--uber-white) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.premiere-badge,
.live-badge,
.status-badge.active,
.badge.active,
.age-badge {
  background: var(--uber-green) !important;
  color: var(--uber-black) !important;
  border-color: var(--uber-green) !important;
}

/* Anula colores inline o gradientes chillones generados dinámicamente. */
[style*="linear-gradient"],
[style*="#FFD700"],
[style*="#FFA500"],
[style*="#FF1493"],
[style*="#FF6B35"],
[style*="#F7931E"],
[style*="#00FF88"],
[style*="255, 215"],
[style*="255, 20, 147"],
[style*="255, 107, 53"],
[style*="0, 255, 136"] {
  background: var(--uber-surface-elevated) !important;
  color: var(--uber-white) !important;
  border-color: var(--uber-border) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

[style*="color: #FF1493"],
[style*="color:#FF1493"],
[style*="color: #00FF88"],
[style*="color:#00FF88"],
[style*="color: #FFD700"],
[style*="color:#FFD700"] {
  color: var(--uber-white) !important;
}

button[style*="linear-gradient"],
.settings-btn[style*="linear-gradient"],
.notification[style*="linear-gradient"] {
  background: var(--uber-white) !important;
  color: var(--uber-black) !important;
  border-color: var(--uber-white) !important;
}

.message,
.notification,
.toast,
.welcome-message {
  background: var(--uber-surface-elevated) !important;
  border: 1px solid var(--uber-border) !important;
  color: var(--uber-white) !important;
  border-radius: var(--uber-radius-lg) !important;
}

.message.error,
.notification.error {
  border-color: var(--uber-danger) !important;
}

.message.success,
.notification.success {
  border-color: var(--uber-green) !important;
}

.progress-bar,
.history-progress-bar,
.video-progress-fill,
.toggle-switch input:checked + .toggle-slider,
.indicator.active {
  background: var(--uber-green) !important;
}

hr,
.plan-features li,
.setting-item,
.payment-method,
.info-tab-content {
  border-color: var(--uber-border) !important;
}

/* Botones adicionales y elementos de interfaz */
.series-close-btn,
.netflix-play-btn,
.unlock-button {
  border-radius: 999px !important;
  border: 1px solid var(--uber-border) !important;
  background: rgba(0,0,0,0.7) !important;
  color: var(--uber-white) !important;
}

.series-close-btn:hover,
.netflix-play-btn:hover {
  background: rgba(0,0,0,0.9) !important;
}

/* Overlay de estreno en vivo — neutralizar gradiente rojo */
.premiere-live-overlay,
.countdown-overlay {
  background: rgba(0,0,0,0.88) !important;
  color: var(--uber-white) !important;
}

/* Badge EN VIVO — mantener rojo Uber-neutral */
.live-badge,
.live-badge-inline {
  background: #d93025 !important;
  color: var(--uber-white) !important;
  border-color: #d93025 !important;
}

/* Banner de oferta especial */
.special-offer-banner {
  background: var(--uber-surface-elevated) !important;
  border-color: var(--uber-green) !important;
  border-radius: var(--uber-radius-lg) !important;
}

/* Overlay de bloqueo */
.locked-overlay {
  background: rgba(0,0,0,0.85) !important;
  border-radius: var(--uber-radius-lg) !important;
}

/* Avatar con gradiente inline → neutralizar */
.avatar-option[style*="linear-gradient"],
.avatar-option[style*="gradient"] {
  background: var(--uber-surface-muted) !important;
  border-color: var(--uber-border) !important;
}

.avatar-option.selected {
  border-color: var(--uber-green) !important;
  outline: 2px solid var(--uber-green) !important;
}

/* Fondo de trial-offer.html */
body[style*="linear-gradient"] {
  background: var(--uber-black) !important;
}

/* Contenedor de oferta trial */
.offer-container,
.trial-container,
.scanner-container {
  background: var(--uber-surface-elevated) !important;
  border: 1px solid var(--uber-border) !important;
  border-radius: var(--uber-radius-lg) !important;
}

/* Mensaje de éxito fijo */
.success-message {
  background: var(--uber-surface-elevated) !important;
  border: 1px solid var(--uber-green) !important;
  color: var(--uber-white) !important;
  border-radius: var(--uber-radius-lg) !important;
}

/* Carrusel 3D — quitar blur en tarjetas laterales */
.plan-card.left,
.plan-card.right {
  filter: none !important;
}

/* Navegación inferior */
.bottom-nav button i {
  color: var(--uber-muted);
}

.bottom-nav button.active i {
  color: var(--uber-white);
}

/* Sección de búsqueda */
.search-section {
  background: var(--uber-black) !important;
  border-top: 1px solid var(--uber-border) !important;
}

/* Responsive polish */
@media (max-width: 768px) {
  .welcome-container,
  .forms-container,
  .plan-card,
  .settings-group,
  .payment-section {
    border-radius: var(--uber-radius-lg) !important;
  }

  .logo,
  .logo h1,
  .welcome-title,
  .subscription-title,
  .profile-title {
    letter-spacing: -0.035em !important;
  }
}

/* Search page layout fix: keep the whole Buscar view aligned, compact, and usable. */
.search-section {
  background: var(--uber-black) !important;
  color: var(--uber-white) !important;
  overflow: hidden !important;
}

.search-section.active {
  display: flex !important;
}

.search-page-header,
.search-input-shell,
.search-category-chips,
.search-content-area {
  width: min(100%, 1120px) !important;
  margin-inline: auto !important;
}

.search-page-header {
  padding: max(28px, env(safe-area-inset-top, 0px) + 22px) 20px 0 !important;
}

.search-page-title {
  margin: 0 0 6px !important;
  color: var(--uber-white) !important;
  font-size: clamp(30px, 7vw, 46px) !important;
  line-height: 1 !important;
}

.search-page-subtitle {
  margin: 0 !important;
  color: var(--uber-muted) !important;
  font-size: 15px !important;
}

.search-input-shell {
  padding: 18px 20px 12px !important;
}

.search-section-wrapper {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-height: 56px !important;
  padding: 6px 8px 6px 18px !important;
  background: var(--uber-surface-elevated) !important;
  border: 1px solid var(--uber-border-strong) !important;
  border-radius: 999px !important;
}

.search-section-wrapper:focus-within {
  border-color: var(--uber-green) !important;
  background: #171717 !important;
}

.search-section-wrapper .search-icon {
  padding: 0 !important;
  color: var(--uber-muted) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.search-section-wrapper #searchSectionInput {
  width: 100% !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  color: var(--uber-white) !important;
  font-size: 16px !important;
  line-height: 42px !important;
}

.search-section-wrapper #searchSectionInput:focus {
  border: 0 !important;
  outline: 0 !important;
}

.search-section-wrapper .search-btn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--uber-green) !important;
  color: var(--uber-black) !important;
  border-color: var(--uber-green) !important;
}

.search-category-chips {
  padding: 0 20px 16px !important;
  gap: 10px !important;
  border-bottom: 1px solid var(--uber-border) !important;
}

.search-chip {
  min-height: 38px !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: var(--uber-surface-elevated) !important;
  border: 1px solid var(--uber-border) !important;
  color: var(--uber-muted) !important;
}

.search-chip.active,
.search-chip:hover {
  background: var(--uber-white) !important;
  border-color: var(--uber-white) !important;
  color: var(--uber-black) !important;
}

.search-content-area {
  padding: 22px 20px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
}

.search-suggestions {
  max-width: 680px !important;
}

.search-suggestions-label {
  color: var(--uber-muted) !important;
  margin-bottom: 12px !important;
}

.search-suggestion-row {
  min-height: 60px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--uber-border) !important;
}

.search-suggestion-icon {
  background: var(--uber-surface-elevated) !important;
  border: 1px solid var(--uber-border) !important;
  color: var(--uber-white) !important;
}

.search-suggestion-arrow {
  color: var(--uber-subtle) !important;
}

.search-results-grid {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 16px !important;
}

.search-result-item {
  background: var(--uber-surface-elevated) !important;
  border: 1px solid var(--uber-border) !important;
  border-radius: var(--uber-radius-lg) !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .search-page-header,
  .search-input-shell,
  .search-category-chips,
  .search-content-area {
    width: 100% !important;
  }

  .search-page-header {
    padding: max(22px, env(safe-area-inset-top, 0px) + 18px) 16px 0 !important;
  }

  .search-input-shell {
    padding: 16px 16px 10px !important;
  }

  .search-section-wrapper {
    min-height: 54px !important;
    padding-left: 16px !important;
    gap: 9px !important;
  }

  .search-section-wrapper #searchSectionInput {
    font-size: 15px !important;
  }

  .search-category-chips {
    padding: 0 16px 14px !important;
  }

  .search-content-area {
    padding: 18px 16px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .search-results-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .search-result-item {
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) !important;
    min-height: 142px !important;
  }
}

/* Search copy cleanup: the page now starts directly with the search bar. */
.search-input-shell:first-child,
.search-section > .search-input-shell {
  padding-top: max(18px, env(safe-area-inset-top, 0px) + 16px) !important;
}

.search-suggestions-label:empty,
.search-suggestions-label {
  display: none !important;
}

.search-suggestions {
  padding-top: 0 !important;
}

/* Hide removed category chips and modernize the bottom navigation. */
.search-category-chips {
  display: none !important;
}

.bottom-nav {
  left: 50% !important;
  right: auto !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  width: min(calc(100% - 24px), 520px) !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 6px !important;
  padding: 8px !important;
  background: rgba(12, 12, 12, 0.96) !important;
  border: 1px solid var(--uber-border-strong) !important;
  border-radius: 24px !important;
  transition: transform 220ms ease, opacity 220ms ease !important;
}

.bottom-nav.bottom-nav--hidden {
  transform: translate(-50%, calc(120% + env(safe-area-inset-bottom, 0px))) !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.bottom-nav button,
.bottom-nav button.active,
.bottom-nav button:hover {
  min-width: 0 !important;
  width: 100% !important;
  padding: 9px 8px !important;
  border-radius: 18px !important;
  color: var(--uber-muted) !important;
  background: transparent !important;
  border: 0 !important;
}

.bottom-nav button i,
.bottom-nav button.active i,
.bottom-nav button:hover i {
  color: currentColor !important;
  display: block !important;
}

.bottom-nav button.active {
  color: var(--uber-green) !important;
  background: rgba(6, 193, 103, 0.14) !important;
}

.bottom-nav button.active span {
  color: var(--uber-white) !important;
}

@media (max-width: 480px) {
  .bottom-nav {
    border-radius: 22px !important;
    gap: 4px !important;
    padding: 7px !important;
  }

  .bottom-nav button {
    padding: 8px 4px !important;
    font-size: 10px !important;
  }
}