/* =========================================================
   YouTube Audit — FULL SCOPED CSS (no header/footer bleed)
   Scope: body.youtube-audit …  |  Themes via [data-style]
   Author: du first
========================================================= */

/* ========== 0) SCOPED VARIABLES (Default: NEON/GLASS) ========== */
/* نکته: همه‌چیز زیر .youtube-audit اسکوپ شده؛ بیرون تأثیری ندارد */
.youtube-audit {
  /* رنگ‌ها (تم پیش‌فرض: نئون/گلس) */
  --audit-bg: #0b0b0f;
  --audit-surface: rgba(255,255,255,.06);
  --audit-border: rgba(255,255,255,.14);
  --audit-text: #ffffff;
  --audit-text-dim: rgba(255,255,255,.85);
  --audit-muted: rgba(255,255,255,.60);

  /* قرمز صفحه (فقط این صفحه) */
  --audit-red: #ff4757;
  --audit-red-2: #ff6b7d;
  --audit-accent-grad: linear-gradient(135deg,#FF3B3B 0%,#C60000 55%,#FF5A5A 100%);

  /* رادیوس/سایه */
  --audit-radius: 18px;
  --audit-radius-lg: 22px;
  --audit-shadow: 0 16px 40px rgba(0,0,0,.28);
  --audit-shadow-accent: 0 20px 60px rgba(255,0,0,.18);

  /* تایپو/اندازه‌ها */
  --audit-max: 960px;
  --audit-pad-x: 20px;

  /* افکت‌ها */
  --audit-glass: saturate(1.2) blur(10px);
  --audit-ring: 0 0 0 2px rgba(255, 71, 87, .45);

  background: var(--audit-bg);
}

/* ===== Theme: PILLS (نرم/لوکس) ===== */
.youtube-audit[data-style="pill"]{
  --audit-surface: rgba(255,255,255,.08);
  --audit-border: rgba(255,255,255,.12);
  --audit-red: #ff2f5b;
  --audit-red-2: #ff7a8f;
  --audit-accent-grad: linear-gradient(135deg,#FF2F5B 0%,#D21A43 55%,#FF7A8F 100%);
  --audit-shadow-accent: 0 24px 60px rgba(255,47,91,.2);
}

/* ===== Theme: MINIMAL (کنتراست تمیز) ===== */
.youtube-audit[data-style="minimal"]{
  --audit-surface: rgba(255,255,255,.04);
  --audit-border: rgba(255,255,255,.18);
  --audit-red: #ff3a3a;
  --audit-red-2: #ff7a7a;
  --audit-accent-grad: linear-gradient(135deg,#ff3a3a 0%,#bb1919 60%,#ff8e8e 100%);
  --audit-shadow-accent: 0 16px 36px rgba(255,58,58,.18);
}

/* ========== 1) LAYOUT WRAPPERS ========== */
.youtube-audit .audit-section{
  padding: clamp(60px, 6vw, 100px) 0;
  position: relative;
  z-index: 1;
}
.youtube-audit .audit-container{
  max-width: var(--audit-max);
  margin: 0 auto;
  padding: 0 var(--audit-pad-x);
}

/* ========== 2) HERO ========== */
.youtube-audit .audit-hero{
  text-align: center;
  background:
    radial-gradient(80% 120% at 50% 100%, rgba(255,71,87,.10), transparent 80%),
    radial-gradient(40% 40% at 50% 0%, rgba(255,255,255,.04), transparent 60%);
  padding-top: clamp(140px, 18vh, 220px);
  padding-bottom: clamp(60px, 10vh, 120px);
  overflow: hidden;
}
.youtube-audit .audit-hero::after{
  /* گِلِیر نرم */
  content:"";
  position:absolute; inset:-30% -10% auto -10%;
  height: 60%;
  background: radial-gradient(40% 60% at 50% 0%, rgba(255,255,255,.06), transparent 70%);
  pointer-events:none;
  transform: translateZ(0);
}
.youtube-audit .audit-hero_title{
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 1000;
  margin-bottom: .6em;
  background: linear-gradient(135deg,var(--audit-red),var(--audit-red-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .2px;
}
.youtube-audit .audit-hero_sub{
  font-size: 1.1rem;
  color: var(--audit-text-dim);
  max-width: 680px;
  margin: 0 auto 1.5em;
}
.youtube-audit .audit-badge{
  display:inline-block;
  padding:.45em 1.05em;
  background: var(--audit-accent-grad);
  color:#fff; border-radius: 999px;
  font-size:.9rem; font-weight:800;
  box-shadow: var(--audit-shadow-accent);
}

/* ========== 3) FORM ========== */
.youtube-audit .audit-form_inner{
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid var(--audit-border);
  border-radius: var(--audit-radius-lg);
  padding: clamp(28px,4vw,48px);
  box-shadow: var(--audit-shadow);
  -webkit-backdrop-filter: var(--audit-glass);
  backdrop-filter: var(--audit-glass);
}
.youtube-audit .audit-head{
  text-align:center; font-weight: 900; margin-bottom: 2rem;
}
.youtube-audit .audit-row{ margin-bottom: 1.2rem; }
.youtube-audit .audit-label{ display:block; font-weight:700; margin-bottom:.5rem; color:var(--audit-text); }
.youtube-audit .audit-hint{ font-size:.85rem; color:var(--audit-muted); margin-top:.35rem; }

.youtube-audit .audit-field{
  width:100%; padding:.78rem 1rem;
  border-radius: var(--audit-radius);
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  color: var(--audit-text);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.youtube-audit .audit-field:focus{
  outline:none;
  border-color: var(--audit-red-2);
  background: rgba(255,255,255,.10);
  box-shadow: var(--audit-ring);
}

/* URL row */
.youtube-audit .audit-url_input{ display:flex; gap:.6rem; }
@media (max-width:768px){ .youtube-audit .audit-url_input{ flex-direction:column; } }

/* Chips */
.youtube-audit .audit-chips{
  display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none;
}
.youtube-audit .audit-chip{
  display:flex; align-items:center; gap:.45rem;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  padding:.35rem .85rem; border-radius:999px;
}
.youtube-audit .audit-chip span{ color:#fff; font-size:.9rem; }
.youtube-audit .audit-chip_remove{
  background:none; border:none; color:#fff; cursor:pointer; font-size:1rem; line-height:1;
}

/* Buttons */
.youtube-audit .audit-btn{ appearance:none; -webkit-appearance:none; }
.youtube-audit .audit-btn--add,
.youtube-audit .audit-btn--submit,
.youtube-audit .audit-btn--cta{
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--audit-accent-grad);
  color:#fff; font-weight:900; border:0; cursor:pointer;
  box-shadow: var(--audit-shadow-accent);
  transition: transform .25s ease, box-shadow .25s ease, filter .2s ease;
}
.youtube-audit .audit-btn--add:hover,
.youtube-audit .audit-btn--submit:hover:not(:disabled),
.youtube-audit .audit-btn--cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(255,0,0,.28);
  filter: brightness(1.03);
}
.youtube-audit .audit-btn--submit:disabled{ opacity:.5; cursor:not-allowed; }

.youtube-audit .audit-actions{ text-align:center; margin-top: 2rem; }
.youtube-audit .audit-msg_status{ margin-top:.8rem; font-size:.92rem; color: var(--audit-red-2); }

.youtube-audit .audit-consent{ font-size:.9rem; color: var(--audit-text-dim); }
.youtube-audit .audit-consent a{ color: var(--audit-red-2); text-decoration: underline; }

/* ========== 4) TRUST ========== */
.youtube-audit .audit-trust_card{
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border: 1px solid var(--audit-border);
  border-radius: var(--audit-radius-lg);
  padding: clamp(28px,4vw,48px);
  box-shadow: var(--audit-shadow);
  -webkit-backdrop-filter: var(--audit-glass);
  backdrop-filter: var(--audit-glass);
}
.youtube-audit .audit-trust_title{ font-weight:900; margin-bottom:1rem; }
.youtube-audit .audit-trust_list{ list-style:none; padding:0; margin:0; }
.youtube-audit .audit-trust_list li{
  margin:.55rem 0; color: var(--audit-text-dim);
  position:relative; padding-left: 1.5rem;
}
.youtube-audit .audit-trust_list li::before{
  content:"✓"; position:absolute; left:0; color:#27ae60; font-weight:900;
}

/* ========== 5) CTA ========== */
.youtube-audit .audit-cta{
  text-align:center;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255,71,87,.15), transparent 80%);
}
.youtube-audit .audit-cta_note{
  font-size:1.05rem; margin-bottom:1.5rem; color: var(--audit-text-dim);
}

/* ========== 6) FAQ (Clean, single definition) ========== */
.youtube-audit .ytp-faq{
  padding: clamp(60px, 6vw, 100px) 0;
  background: radial-gradient(60% 80% at 50% 100%, rgba(255,71,87,.06), transparent 80%);
}
.youtube-audit .ytp-faq__item{
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.youtube-audit .ytp-faq__item[open]{
  border-color: rgba(255,0,0,.45);
  box-shadow: 0 16px 40px rgba(255,0,0,.15), 0 12px 28px rgba(0,0,0,.28);
}
.youtube-audit .ytp-faq__summary{
  display:flex; align-items:center; gap:12px;
  padding: 1.4rem 1.8rem;
  font-size:1.05rem; font-weight: 800; color:#fff; cursor:pointer;
  list-style:none;
}
.youtube-audit .ytp-faq__summary::-webkit-details-marker{ display:none; }
.youtube-audit .ytp-faq__toggle{
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  font-size:18px; font-weight:900; line-height:1;
  color:#fff;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  transition: transform .22s ease, color .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}
.youtube-audit .ytp-faq__toggle::before{ content:"+"; }
.youtube-audit .ytp-faq__item[open] .ytp-faq__toggle{
  transform: rotate(45deg);
  color:#ff3232;
  box-shadow: 0 0 16px rgba(255,0,0,.25);
}
.youtube-audit .ytp-faq__question{ flex:1; }
.youtube-audit .ytp-faq__content{
  padding: 0 1.8rem 1.4rem;
  color: var(--audit-text-dim);
  line-height:1.65; font-size:.96rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

/* ========== 7) ACCESSIBILITY & MOTION ========== */
.youtube-audit .ytp-faq__item:focus-within{ outline: 2px solid rgba(255,71,87,.45); outline-offset:2px; }
@media (max-width:520px){
  .youtube-audit .ytp-faq__summary{ padding:1rem 1.2rem; font-size:1rem; }
  .youtube-audit .ytp-faq__content{ padding:0 1.2rem 1rem; font-size:.94rem; }
}
@media (prefers-reduced-motion: reduce){
  .youtube-audit .audit-btn--add,
  .youtube-audit .audit-btn--submit,
  .youtube-audit .audit-btn--cta{ transition:none; }
  .youtube-audit .ytp-faq__item,
  .youtube-audit .audit-field{ transition:none; }
}

/* ========== 8) OPTIONAL: HEADER BUTTON ALIGN (SCOPED) ========== */
/* اگر روی این صفحه لازم بود CTA هدر استایل بگیرد، همچنان اسکوپ‌شده است */
.youtube-audit .header_user .btn{
  background: var(--audit-accent-grad);
  color:#fff; border:0;
  box-shadow: var(--audit-shadow-accent);
}
.youtube-audit .header_user .btn:hover{ transform: translateY(-2px); }

/* ========== 9) MICRO TWEAKS ========== */
.youtube-audit .audit-hero .icon,
.youtube-audit .audit-trust_title .icon{ filter: drop-shadow(0 4px 12px rgba(255,0,0,.22)); }

/* =========================================================
   Override Palette: Blue / Cyan (No header/footer bleed)
   ========================================================= */
.youtube-audit {
  --audit-red: #3b82f6;        /* Blue base */
  --audit-red-2: #22d3ee;      /* Cyan accent */
  --audit-accent-grad: linear-gradient(135deg,#3b82f6 0%,#06b6d4 55%,#22d3ee 100%);

  --audit-shadow-accent: 0 20px 60px rgba(59,130,246,.25);
  --audit-ring: 0 0 0 2px rgba(59,130,246,.45);
}

/* optional: tweak FAQ open state & hover glows */
.youtube-audit .ytp-faq__item[open] {
  border-color: rgba(59,130,246,.45);
  box-shadow: 0 16px 40px rgba(59,130,246,.15), 0 12px 28px rgba(0,0,0,.28);
}
.youtube-audit .ytp-faq__item[open] .ytp-faq__toggle {
  color:#3b82f6;
  box-shadow: 0 0 16px rgba(59,130,246,.25);
}
.youtube-audit .audit-hero .icon,
.youtube-audit .audit-trust_title .icon {
  filter: drop-shadow(0 4px 12px rgba(59,130,246,.22));
}