/* ============================================================
   VidQuarry — Page-specific Styles (Pricing, Terms, Privacy)
   ============================================================ */

/* --- Pricing Page --- */
.pricing-page-header{background:linear-gradient(180deg,var(--surface-secondary) 0%,var(--surface-primary) 100%);padding:var(--space-3xl) 0 var(--space-xl);text-align:center;display: flex;justify-content: center;}
.pricing-toggle{display:inline-flex;background:var(--surface-secondary);border-radius:var(--radius-full);padding:var(--space-xs);margin-top:var(--space-l);border:1px solid var(--border-default)}
.pricing-toggle-btn{padding:var(--space-s) var(--space-xl);border-radius:var(--radius-full);font-size:var(--font-body-sm);font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all var(--duration-normal) var(--ease-fluent);border:none;background:transparent}
.pricing-toggle-btn.active{background:var(--primary);color:var(--text-on-primary);box-shadow:var(--shadow-4)}

/* --- FAQ on pricing page --- */
.pricing-faq{background:var(--surface-secondary);padding:var(--space-3xl) 0}

/* --- Legal pages --- */
.legal-page{background:var(--surface-primary)}
.legal-header{background:var(--surface-secondary);padding:var(--space-2xl) 0;border-bottom:1px solid var(--border-default)}
.legal-header h1{font-size:var(--font-h1);font-weight:700;margin-bottom:var(--space-s)}
.legal-header p{color:var(--text-secondary);font-size:var(--font-body-sm)}
.legal-body{padding:var(--space-2xl) 0 var(--space-3xl)}
.legal-body h2{font-size:var(--font-h3);font-weight:600;margin-top:var(--space-2xl);margin-bottom:var(--space-m);padding-bottom:var(--space-s);border-bottom:1px solid var(--border-subtle)}
.legal-body h3{font-size:var(--font-h4);font-weight:600;margin-top:var(--space-l);margin-bottom:var(--space-s)}
.legal-body p,.legal-body li{color:var(--text-secondary);line-height:1.8;margin-bottom:var(--space-m)}
.legal-body ul{padding-inline-start:var(--space-l)}
.legal-body ul li{position:relative;padding-inline-start:var(--space-m);margin-bottom:var(--space-s)}
.legal-body ul li::before{content:'—';position:absolute;inset-inline-start:0;color:var(--primary)}
.legal-toc{background:var(--surface-secondary);border-radius:var(--radius-xl);padding:var(--space-l);margin-bottom:var(--space-xl)}
.legal-toc h3{font-size:var(--font-body);font-weight:600;margin-bottom:var(--space-s)}
.legal-toc a{display:block;font-size:var(--font-body-sm);color:var(--text-accent);padding:var(--space-xs) 0}

/* --- Success page --- */
.success-icon{color:var(--text-success)}
.success-card{background:var(--surface-primary);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-16)}

/* --- Cancel page --- */
.cancel-icon{color:var(--text-danger)}
.cancel-card{background:var(--surface-primary);border:1px solid var(--border-default);border-radius:var(--radius-xl);box-shadow:var(--shadow-16)}

/* --- CTA Banner section --- */
.cta-banner{background:linear-gradient(135deg,#0078D4 0%,#00A4EF 100%);color:var(--text-on-primary);text-align:center;padding:var(--space-3xl) 0;position:relative;overflow:hidden;display: flex;justify-content: center;}
.cta-banner::before{content:'';position:absolute;top:-50%;right:-20%;width:60%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%);pointer-events:none}
.cta-banner h2{color:var(--text-on-primary);font-size:var(--font-h2);margin-bottom:var(--space-m)}
.cta-banner p{color:rgba(255,255,255,0.85);font-size:var(--font-body-lg);margin-bottom:var(--space-xl);max-width:600px;margin-left:auto;margin-right:auto}
.cta-banner .btn-standard{color:var(--text-on-primary);border-color:rgba(255,255,255,0.4)}
.cta-banner .btn-standard:hover{background:rgba(255,255,255,0.15)}

/* --- Supported Platforms Page --- */
.platforms-search-wrapper {
  max-width: 600px;
  margin: 0 auto var(--space-xl);
  position: relative;
  width: 100%;
}
.platforms-search-icon {
  position: absolute;
  top: 50%;
  inset-inline-start: var(--space-m);
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.platforms-search-input {
  width: 100%;
  padding: var(--space-m) var(--space-m) var(--space-m) calc(var(--space-m) * 2.5);
  font-size: var(--font-body);
  border-radius: var(--radius-l);
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  box-shadow: var(--shadow-2);
  color: var(--text-primary);
  transition: all var(--duration-normal) var(--ease-fluent);
  outline: none;
}
[dir="rtl"] .platforms-search-input {
  padding: var(--space-m) calc(var(--space-m) * 2.5) var(--space-m) var(--space-m);
}
.platforms-search-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.15), var(--shadow-8);
}
.platforms-search-input::placeholder {
  color: var(--text-tertiary);
}

.platforms-filters {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  flex-wrap: wrap;
  margin-bottom: var(--space-2xl);
}
.platforms-filter-pill {
  padding: var(--space-s) var(--space-l);
  font-size: var(--font-body-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
  background: var(--surface-primary);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-fluent);
  line-height: 1.2;
}
.platforms-filter-pill:hover {
  background: var(--surface-secondary);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.platforms-filter-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
  box-shadow: var(--shadow-4);
}

.platforms-no-results {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
  color: var(--text-secondary);
}
.platforms-no-results-icon {
  font-size: 48px;
  margin-bottom: var(--space-m);
}
.platforms-no-results h3 {
  font-size: var(--font-h3);
  font-weight: 600;
  margin-bottom: var(--space-s);
  color: var(--text-primary);
}
.platforms-no-results p {
  font-size: var(--font-body-sm);
  color: var(--text-tertiary);
  max-width: 400px;
  margin: 0;
}

.platform-icon.hidden {
  display: none !important;
}

.platform-icon-img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--radius-s);
  background: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
  transition: transform var(--duration-normal) var(--ease-fluent);
}
.platform-icon:hover .platform-icon-img {
  transform: scale(1.08);
}
.platform-fallback-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}