/* ============================================================
   AS Apps Developer Portal — Apps Center Styles (Phase 3)
   ============================================================
   Styles for Apps Ecosystem Hub (/apps/) & App Detail pages.
   Filter bar, search input, dynamic glassmorphism app cards,
   app detail hero, features, gallery placeholders, related apps.
   ============================================================ */

/* ── Apps Hub Hero ── */
.apps-hero {
  padding-top: calc(var(--header-height) + var(--space-16));
  padding-bottom: var(--space-12);
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.apps-hero__bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.4;
  pointer-events: none;
}

.apps-hero__bg-orb--1 {
  width: 500px;
  height: 500px;
  background: var(--aurora-1);
  top: -10%;
  left: 20%;
}

.apps-hero__bg-orb--2 {
  width: 450px;
  height: 450px;
  background: var(--aurora-2);
  bottom: -10%;
  right: 20%;
}

.apps-hero__content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
}

.apps-hero__title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  margin-bottom: var(--space-4);
}

.apps-hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

/* ── Filter Controls Bar ── */
.apps-filter-bar {
  background: var(--color-surface);
  border-block: 1px solid var(--color-border);
  position: sticky;
  top: var(--header-height);
  z-index: var(--z-sticky);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  padding-block: var(--space-4);
  transition: box-shadow var(--transition-base);
}

.apps-filter-bar.is-stuck {
  box-shadow: var(--shadow-md);
  background: var(--glass-bg);
}

.apps-filter-bar__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.apps-filter-bar__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.apps-search-box {
  position: relative;
  flex: 1;
  min-width: 280px;
  max-width: 480px;
}

.apps-search-box__icon {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.apps-search-box__input {
  width: 100%;
  padding-left: var(--space-11);
  padding-right: var(--space-10);
}

.apps-search-box__clear {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-full);
  display: none;
}

.apps-search-box__clear.is-visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

.apps-search-box__clear:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
}

/* ── Sort & Count Controls ── */
.apps-filter-controls {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.apps-sort-select {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-base);
}

.apps-sort-select:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-subtle);
}

/* ── Category Filter Pills ── */
.apps-categories {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.apps-categories::-webkit-scrollbar {
  display: none;
}

.cat-pill {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-spring);
}

.cat-pill:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  border-color: var(--color-border-hover);
}

.cat-pill.is-active {
  background: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow);
}

/* ── Results Feedback Status ── */
.apps-results-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ── Apps Section Layouts ── */
.apps-section {
  margin-bottom: var(--space-16);
}

.apps-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
}

.apps-section__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ── Empty State ── */
.apps-empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
  border: 1px dashed var(--color-border);
}

.apps-empty-state__icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-2xl);
  background: var(--color-primary-subtle);
  color: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* ================================================================
   APP DETAIL PAGE STYLES
   ================================================================ */

.app-detail-hero {
  padding-top: calc(var(--header-height) + var(--space-16));
  padding-bottom: var(--space-12);
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

.app-detail-hero__grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  align-items: center;
}

.app-detail-hero__icon {
  width: 110px;
  height: 110px;
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  box-shadow: var(--shadow-xl);
  flex-shrink: 0;
}

.app-detail-hero__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.app-detail-hero__badge-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.app-detail-hero__title {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: var(--leading-tight);
}

.app-detail-hero__tagline {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

.app-detail-hero__stats {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding-top: var(--space-2);
  flex-wrap: wrap;
}

.app-stat-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.app-stat-chip svg {
  color: var(--color-accent-light);
}

.app-detail-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .app-detail-hero__grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .app-detail-hero__icon {
    margin-inline: auto;
  }
  .app-detail-hero__badge-row,
  .app-detail-hero__stats,
  .app-detail-hero__actions {
    justify-content: center;
  }
}

/* ── App Detail Content Sections ── */
.app-detail-content {
  padding-block: var(--space-12);
}

.app-detail-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-12);
}

@media (max-width: 1024px) {
  .app-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Features List ── */
.app-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-6);
}

@media (max-width: 640px) {
  .app-features-grid {
    grid-template-columns: 1fr;
  }
}

.app-feature-item {
  padding: var(--space-5);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.app-feature-item__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.app-feature-item__title svg {
  color: var(--color-primary-light);
  flex-shrink: 0;
}

.app-feature-item__description {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Gallery Placeholder ── */
.app-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-6);
}

@media (max-width: 768px) {
  .app-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .app-gallery-grid {
    grid-template-columns: 1fr;
  }
}

.app-gallery-card {
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.app-gallery-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
}

.app-gallery-card__device {
  width: 100%;
  height: 100%;
  border: 2px dashed var(--color-border-hover);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
}

.app-gallery-card__icon {
  color: var(--color-primary-light);
}

.app-gallery-card__caption {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

/* ── Sidebar Metadata Card ── */
.app-meta-card {
  padding: var(--space-6);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
}

.app-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.app-meta-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.app-meta-label {
  color: var(--color-text-tertiary);
}

.app-meta-value {
  font-weight: var(--font-medium);
  color: var(--color-text);
}

/* ══════════════════════════════════════════════════════════════
   Phase 7 — Production Content Styles
   Real app icon images, banner heroes, screenshot carousel
   ══════════════════════════════════════════════════════════════ */

/* ── Real App Icon in Hero ── */
.app-detail-hero__icon-img {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08);
  display: block;
}

@media (min-width: 768px) {
  .app-detail-hero__icon-img {
    width: 120px;
    height: 120px;
  }
}

/* ── Feature Graphic Banner ── */
.app-banner-hero {
  width: 100%;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  position: relative;
}

.app-banner-hero__img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 340px;
  object-fit: cover;
}

/* ── Production Screenshot Carousel ── */
.screenshot-carousel {
  margin-top: var(--space-6);
  position: relative;
}

.screenshot-carousel__track-wrapper {
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.screenshot-carousel__track {
  display: flex;
  gap: var(--space-3);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: grab;
  user-select: none;
}

.screenshot-carousel__track:active {
  cursor: grabbing;
}

.screenshot-slide {
  flex: 0 0 auto;
  width: 180px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

@media (min-width: 768px) {
  .screenshot-slide {
    width: 220px;
  }
}

.screenshot-slide:hover {
  border-color: var(--color-primary);
  transform: scale(1.03) translateY(-4px);
  box-shadow: var(--shadow-xl);
  z-index: 2;
}

.screenshot-slide__img {
  width: 100%;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  display: block;
}

.screenshot-slide__caption {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

/* Carousel nav buttons */
.screenshot-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.screenshot-carousel__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-fast);
}

.screenshot-carousel__btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: scale(1.05);
}

.screenshot-carousel__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── What's New Section ── */
.whats-new-box {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, rgba(var(--rgb-primary), 0.08) 0%, rgba(var(--rgb-primary), 0.04) 100%);
  border: 1px solid rgba(var(--rgb-primary), 0.25);
  margin-bottom: var(--space-10);
}

.whats-new-box__label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary-light);
  margin-bottom: var(--space-2);
}

.whats-new-box__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ── Play Store Badge in Sidebar ── */
.play-store-badge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: #000;
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  transition: opacity var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-fast);
  border: 1px solid rgba(255,255,255,0.12);
  width: 100%;
  justify-content: center;
}

.play-store-badge:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.play-store-badge__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.play-store-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.play-store-badge__sub {
  font-size: 10px;
  color: rgba(255,255,255,0.75);
}

.play-store-badge__name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: #fff;
}

/* ── Feature Card with emoji icon ── */
.app-feature-emoji {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Sidebar App Icon Thumbnail ── */
.app-sidebar-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  object-fit: cover;
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-md);
}