/* App Store Top Charts widget — beige sibling system.
   Palette mirrors keyword-shuffle.css / keyword-suggest-tool.css:
     container  #edede5  border-radius 20px
     divider    #e0dfd6
     inputs     white / #ddd border / #c82c46 focus
     accent     #c82c46  (brand red)
   NO @apply anywhere — Tailwind does not process plugin CSS. */

/* ===== Outer container ================================================= */
.app-store-top-charts-widget {
  background: #edede5;
  border-radius: 20px;
  overflow: hidden;
}

/* ===== Intro (beige header) =========================================== */
.app-store-top-charts-widget .tc-intro {
  padding: 32px 40px;
  border-bottom: 1px solid #e0dfd6;
}
.app-store-top-charts-widget .tc-intro__subtitle {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: #1a1a1a;
}
.app-store-top-charts-widget .tc-intro__lead {
  margin: 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.6;
  color: #4e4a4c;
}
.app-store-top-charts-widget .tc-intro__lead strong {
  color: #2d2a2b;
}

/* ===== Filter-bar zone (beige header) ================================== */
.app-store-top-charts-widget .tc-form-zone {
  padding: 32px 40px;
  border-bottom: 1px solid #e0dfd6;
}
.app-store-top-charts-widget .tc-form-prompt {
  margin: 0 0 20px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: #1a1a1a;
}

/* The form inside is a flex row of selects that wraps on small screens. */
.app-store-top-charts-widget .js-form-container .input-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Every <select> and the device wrapper span shares the same white-pill style. */
.app-store-top-charts-widget .js-form-container select {
  flex: 1 1 160px;
  min-width: 140px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #4e4a4c;
  transition: border-color 0.2s ease;
  /* Remove browser default appearance so the border shows uniformly. */
  -webkit-appearance: auto;
  appearance: auto;
}

.app-store-top-charts-widget .js-form-container select:focus {
  outline: none;
  border-color: #c82c46;
}

/* The device wrapper <span> acts like a flex item; its child select fills it. */
.app-store-top-charts-widget .js-form-container .js-device-wrap {
  flex: 1 1 160px;
  min-width: 140px;
}
.app-store-top-charts-widget .js-form-container .js-device-wrap select {
  flex: none;
  width: 100%;
}

/* ===== Results zone (white panel) ====================================== */
.app-store-top-charts-widget .js-top-charts-container {
  background: #ffffff;
  padding: 32px 40px;
}

/* ===== Three-column grid =============================================== */
.app-store-top-charts-widget .tops__container {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 640px) {
  .app-store-top-charts-widget .tops__container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .app-store-top-charts-widget .tops__container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== Column card ===================================================== */
.app-store-top-charts-widget .top__column {
  background: #fff;
  border: 1px solid #e0dfd6;
  border-radius: 12px;
  overflow: hidden;
}

/* ===== Column header — consistent across Free / Paid / Grossing ======== */
.app-store-top-charts-widget .top__header {
  padding: 14px 16px;
  background: #edede5;
  border-bottom: 1px solid #e0dfd6;
  margin-bottom: 0;
}

.app-store-top-charts-widget .top__header p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ===== Ranked list ===================================================== */
/*  CSS counter: each <li> gets its rank automatically, no JS needed.       */
.app-store-top-charts-widget .top__list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  counter-reset: top-chart-rank;
}

.app-store-top-charts-widget .top-charts__list-item {
  counter-increment: top-chart-rank;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #f4f2ee;
}

.app-store-top-charts-widget .top-charts__list-item:last-child {
  border-bottom: none;
}

/* Rank badge before each row */
.app-store-top-charts-widget .top-charts__list-item::before {
  content: counter(top-chart-rank);
  flex: 0 0 28px;
  font-size: 12px;
  font-weight: 700;
  color: #b0ad9e;
  text-align: center;
}

/* Hidden items (items 11–20) toggled by JS */
.app-store-top-charts-widget .top-charts__list-item.display-none {
  display: none;
}

/* Loading placeholder */
.app-store-top-charts-widget .loader-message {
  padding: 24px 16px;
  font-size: 14px;
  color: #9e9b8f;
  text-align: center;
}

/* ===== App card row ==================================================== */
.app-store-top-charts-widget .app-card.app-card--stacked {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  text-decoration: none;
  color: inherit;
}

.app-store-top-charts-widget .app-card.app-card--stacked:hover {
  opacity: 0.85;
}

/* App icon */
.app-store-top-charts-widget .app-card__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  object-fit: cover;
}

/* App info block */
.app-store-top-charts-widget .app-card__infos {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.app-store-top-charts-widget .app-card__info {
  margin: 0;
  line-height: 1.3;
}

.app-store-top-charts-widget .app-card__info1 {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-store-top-charts-widget .app-card__info2 {
  font-size: 12px;
  color: #9e9b8f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price — muted, right-aligned */
.app-store-top-charts-widget .app-card__external-info {
  margin: 0;
}

.app-store-top-charts-widget .app-card__external-info1 {
  flex: 0 0 auto;
  font-size: 12px;
  color: #9e9b8f;
  white-space: nowrap;
  text-align: right;
}

/* ===== See more / See less button ====================================== */
.app-store-top-charts-widget .top-charts__see-more {
  display: block;
  padding: 12px 16px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #c82c46;
  cursor: pointer;
  border-top: 1px solid #f4f2ee;
  text-decoration: none;
  transition: color 0.15s ease;
}

.app-store-top-charts-widget .top-charts__see-more:hover {
  color: #93323e;
  text-decoration: underline;
}

/* ===== Responsive ====================================================== */
@media (max-width: 625px) {
  .app-store-top-charts-widget .tc-intro {
    padding: 16px;
  }
  .app-store-top-charts-widget .tc-form-zone {
    padding: 16px;
  }
  .app-store-top-charts-widget .js-top-charts-container {
    padding: 16px;
  }
  .app-store-top-charts-widget .js-form-container .input-group {
    flex-direction: column;
    align-items: stretch;
  }
  .app-store-top-charts-widget .js-form-container select,
  .app-store-top-charts-widget .js-form-container .js-device-wrap {
    flex: none;
    width: 100%;
    min-width: 0;
  }
  .app-store-top-charts-widget .js-form-container .js-device-wrap select {
    width: 100%;
  }
}

@media (max-width: 993px) {
  .app-store-top-charts-widget {
    border-radius: 0;
  }
}

/* ===== Ghost / Skeleton loading state ================================== */
/*  Beige family: base #ece9e2, highlight #f5f3ee — no brand colour bleed. */

@keyframes tc-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Shared shimmer applied to every ghost element */
.app-store-top-charts-widget .skeleton-icon,
.app-store-top-charts-widget .skeleton-line,
.app-store-top-charts-widget .skeleton-filter-block {
  background: linear-gradient(
    90deg,
    #ece9e2 25%,
    #f5f3ee 50%,
    #ece9e2 75%
  );
  background-size: 400% 100%;
  animation: tc-shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

/* --- Skeleton row (replaces .app-card--stacked during load) ------------ */
/*  Must be tall enough to match a real row: icon 48px + 8px top/bottom padding
    on .app-card--stacked = ~64px total. We let flexbox size it naturally.    */
.app-store-top-charts-widget .top-charts__skeleton-row {
  /* Same padding/border as .top-charts__list-item — already inherited.
     Ensure the row has a stable minimum height matching real cards. */
  min-height: 64px;
  align-items: center;
}

/* Ghost icon — matches .app-card__icon (48×48, radius 10px) */
.app-store-top-charts-widget .skeleton-icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
}

/* Ghost text lines — mimic app name + developer */
.app-store-top-charts-widget .skeleton-line {
  height: 10px;
  border-radius: 5px;
  display: block;
}

.app-store-top-charts-widget .skeleton-line--primary {
  width: 70%;
  margin-bottom: 6px;
}

.app-store-top-charts-widget .skeleton-line--secondary {
  width: 40%;
}

/* --- Filter ghost bar — mirrors the real .input-group row -------------- */
.app-store-top-charts-widget .skeleton-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.app-store-top-charts-widget .skeleton-filter-block {
  flex: 1 1 160px;
  min-width: 140px;
  height: 48px;
  border-radius: 8px;
}

/* --- sr-only: visually-hidden "Loading…" for screen readers ------------ */
.app-store-top-charts-widget .tc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Reduced motion: disable shimmer, keep static ghost colour --------- */
@media (prefers-reduced-motion: reduce) {
  .app-store-top-charts-widget .skeleton-icon,
  .app-store-top-charts-widget .skeleton-line,
  .app-store-top-charts-widget .skeleton-filter-block {
    animation: none;
    background: #ece9e2;
  }
}

/* --- Fetch-error message (replaces skeleton on failed load) ------------ */
.app-store-top-charts-widget .top-charts__error {
  margin: 0;
  padding: 1.5rem 1rem;
  text-align: center;
  color: #646b5a;
  font-size: 0.9rem;
}