/* ══════════════════════════════════════════════════════════════════════════════
   Wolf IPTV — wolf-home-trial.css (M1.3)
   ──────────────────────────────────────────────────────────────────────────────
   Trial section styles + shared section-head component.

   Structure:
     1. Section container (.section, .section__inner) — shared
     2. Section-head (eyebrow, title, ribbon, sub) — shared للـ كل الـ sections
     3. Trial section background
     4. Trial grid + cards (primary + secondary)
     5. Trial card components (brand, badge, headline, features, button)
     6. Button progress states (forward-compat for M1.4 trial activation)
     7. Owned state ("trial already used") — forward-compat
     8. Responsive @media queries
     9. Reduced-motion accessibility

   Design system tokens المستخدمة (كلهم من core/_variables.css):
     --brand, --brand-soft, --brand-deep, --brand-darker,
     --brand-tint, --brand-faint, --brand-glow
     --surface, --surface-2, --surface-3
     --border, --border-soft, --border-strong, --border-brand
     --text, --text-soft, --text-muted
     --shadow-md, --shadow-brand
     --success, --success-tint, --danger, --gold
     --font-display, --font-body, --font-mono
     --sp-1..--sp-12, --container-max
     --r-md, --r-lg, --r-xl, --r-2xl, --r-pill
     --section-py, --section-py-sm, --section-head-mb

   @since 2026-06-05 (M1.3)
   ══════════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════════
   1. SECTION CONTAINER (shared)
   ══════════════════════════════════════════════════════════════════════════════ */

.section {
  position: relative;
  padding-block: var(--section-py);
}

.section__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}


/* ══════════════════════════════════════════════════════════════════════════════
   2. SECTION-HEAD (shared للـ كل الـ sections — Trial, Why-Us, Pricing, إلخ)
   ══════════════════════════════════════════════════════════════════════════════ */

.section-head {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--section-head-mb);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.section-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--brand-soft);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: var(--brand-tint);
  border: 1px solid var(--border-brand);
  padding: 6px 14px;
  border-radius: var(--r-pill);
}

.section-head__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 12px var(--brand-glow);
  animation: section-eyebrow-pulse 2.5s ease-in-out infinite;
}

@keyframes section-eyebrow-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.section-head__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 46px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--text);
  margin: 0;
}

.section-head__title .accent {
  background: linear-gradient(135deg, var(--brand-soft) 0%, var(--brand) 70%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

/* Decorative ribbon under title (3 dashes — visual rhythm) */
.section-head__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-block: 4px;
}

.section-head__ribbon span {
  display: block;
  height: 3px;
  background: var(--brand);
  border-radius: var(--r-pill);
  opacity: 0.35;
}

.section-head__ribbon span:nth-child(1) { width: 16px; }
.section-head__ribbon span:nth-child(2) { width: 32px; opacity: 1; box-shadow: 0 0 12px var(--brand-glow); }
.section-head__ribbon span:nth-child(3) { width: 16px; }

.section-head__sub {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 620px;
  margin: 0;
}

.section-head__sub strong {
  color: var(--text);
  font-weight: 800;
}


/* ══════════════════════════════════════════════════════════════════════════════
   3. TRIAL SECTION BACKGROUND
   ══════════════════════════════════════════════════════════════════════════════ */

.trial-section {
  /* Subtle gradient that visually connects to the Hero above */
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, var(--brand-faint), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 100%, var(--brand-faint), transparent 70%);
}


/* ══════════════════════════════════════════════════════════════════════════════
   4. TRIAL GRID
   ══════════════════════════════════════════════════════════════════════════════ */

.trial-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--sp-5);
  align-items: stretch;
}


/* ══════════════════════════════════════════════════════════════════════════════
   5. TRIAL CARD — Base + Variants
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Shared card base ── */
.trial-card {
  position: relative;
  border-radius: var(--r-2xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.trial-card:hover { transform: translateY(-4px); }

/* ── PRIMARY card (Universe — featured hero) ── */
.trial-card--primary {
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-darker) 100%);
  color: #fff;
  padding: var(--sp-8) var(--sp-6);
  box-shadow: 0 20px 60px rgba(85, 53, 134, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  min-height: 440px;
  gap: var(--sp-5);
}

/* Decorative glows on primary card */
.trial-card--primary::before {
  content: '';
  position: absolute;
  top: -30%;
  inset-inline-end: -20%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167, 139, 219, 0.30), transparent 65%);
  pointer-events: none;
}

.trial-card--primary::after {
  content: '';
  position: absolute;
  bottom: -40%;
  inset-inline-start: -10%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 38, 38, 0.18), transparent 65%);
  pointer-events: none;
}

/* ── SECONDARY card (Aroma — alternative) ── */
.trial-card--secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--sp-6);
  gap: var(--sp-4);
  min-height: 440px;
}

.trial-card--secondary:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
}


/* ══════════════════════════════════════════════════════════════════════════════
   6. TRIAL CARD — Header (Brand + Badge)
   ══════════════════════════════════════════════════════════════════════════════ */

.trial-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}

/* Brand block (icon + name + tag) */
.trial-card__brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.trial-card__brand-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
}

.trial-card--secondary .trial-card__brand-icon {
  background: var(--brand-tint);
  border-color: var(--border-brand);
  color: var(--brand);
}

.trial-card__brand-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.trial-card__brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.trial-card__brand-name {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}

.trial-card__brand-tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0.7;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.trial-card--secondary .trial-card__brand-tag {
  color: var(--text-muted);
  opacity: 1;
}

/* Featured badge (primary card — top-right corner with star icon) */
.trial-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 800;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.trial-card__badge .icon {
  width: 12px;
  height: 12px;
  color: var(--gold);
  fill: var(--gold);
}

/* Alt label (secondary card — simple text badge) */
.trial-card__alt-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════════════════════════════
   7. TRIAL CARD — Headline + Description
   ══════════════════════════════════════════════════════════════════════════════ */

.trial-card__headline {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.trial-card__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 32px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: 0;
}

.trial-card--secondary .trial-card__title {
  color: var(--text);
}

.trial-card__desc {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.92;
  margin: 0;
}

.trial-card--secondary .trial-card__desc {
  color: var(--text-soft);
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════════════════════════
   8. TRIAL CARD — Feature Pills (3 per card)
   ══════════════════════════════════════════════════════════════════════════════ */

.trial-card__features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 1;
}

.trial-card--secondary .trial-card__features {
  border-color: var(--border);
}

.trial-feat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.trial-feat__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.trial-card--secondary .trial-feat__icon {
  background: var(--brand-tint);
  border-color: var(--border-brand);
  color: var(--brand);
}

.trial-feat__icon .icon {
  width: 18px;
  height: 18px;
}

.trial-feat__label {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-display);
}

.trial-feat__hint {
  font-size: 10.5px;
  opacity: 0.7;
  font-weight: 600;
}

.trial-card--secondary .trial-feat__hint {
  color: var(--text-muted);
  opacity: 1;
}


/* ══════════════════════════════════════════════════════════════════════════════
   9. TRIAL CARD — CTA Button (with progress states forward-compat)
   ══════════════════════════════════════════════════════════════════════════════ */

.btn-trial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  height: 56px;
  padding-inline: var(--sp-5);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
  border: 1px solid transparent;
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.btn-trial .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn-trial__label {
  flex-shrink: 0;
}

/* Primary button (white background, deep purple text) — for Universe card */
.btn-trial--primary {
  background: #fff;
  color: var(--brand-deep);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.btn-trial--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

.btn-trial--primary:active {
  transform: translateY(0);
}

/* Secondary button (brand gradient, white text) — for Aroma card */
.btn-trial--secondary {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.btn-trial--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(137, 96, 199, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.btn-trial--secondary:active {
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════════════════════════
   10. PROGRESS STATES (forward-compat for M1.4 trial activation flow)
   ══════════════════════════════════════════════════════════════════════════════
   عند الضغط على زر التجربة (M1.4):
     1. الزر يدخل is-loading
     2. النص يتغير لـ "جاري التحضير"
     3. شريط رفيع أسفل النص يمتلئ تدريجياً من 0% → 100%
     4. النسبة المئوية تظهر بجانب النص
     5. عند النجاح → is-success (لون أخضر + check + redirect)
     6. عند الفشل → is-error (لون أحمر + رسالة) → reset تلقائي
   ══════════════════════════════════════════════════════════════════════════════ */

.btn-trial:disabled { cursor: not-allowed; }
.btn-trial.is-loading,
.btn-trial.is-loading:hover { transform: none; }

/* Percent badge (visible only during loading) */
.btn-trial__pct {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  opacity: 0;
  margin-inline-start: 4px;
  transition: opacity 0.3s ease;
  min-width: 38px;
  text-align: start;
}

.btn-trial.is-loading .btn-trial__pct { opacity: 0.85; }

/* Underline track */
.btn-trial__track {
  position: absolute;
  bottom: 6px;
  inset-inline: 16px;
  height: 3px;
  border-radius: var(--r-pill);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.btn-trial.is-loading .btn-trial__track { opacity: 1; }

.btn-trial__track-fill {
  width: 0%;
  height: 100%;
  border-radius: var(--r-pill);
  transition: width 0.35s ease;
}

/* Primary button track */
.btn-trial--primary .btn-trial__track {
  background: rgba(107, 71, 168, 0.18);
}

.btn-trial--primary .btn-trial__track-fill {
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
}

/* Secondary button track */
.btn-trial--secondary .btn-trial__track {
  background: rgba(255, 255, 255, 0.22);
}

.btn-trial--secondary .btn-trial__track-fill {
  background: #fff;
}

/* Success state — applies to both variants */
.btn-trial.is-success {
  background: linear-gradient(135deg, var(--success) 0%, #15803D 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(22, 163, 74, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.btn-trial.is-success .btn-trial__track,
.btn-trial.is-success .btn-trial__pct { opacity: 0; }

/* Error state — applies to both variants */
.btn-trial.is-error {
  background: linear-gradient(135deg, var(--danger) 0%, #B91C1C 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(220, 38, 38, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20);
  animation: trial-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.btn-trial.is-error .btn-trial__track,
.btn-trial.is-error .btn-trial__pct { opacity: 0; }

@keyframes trial-shake {
  10%, 90%      { transform: translateX(-1px); }
  20%, 80%      { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-3px); }
  40%, 60%      { transform: translateX(3px); }
}

/* Spinning icon (initial pre-progress phase) */
@keyframes trial-spin { to { transform: rotate(360deg); } }
.btn-trial__icon.is-spinning { animation: trial-spin 0.9s linear infinite; }


/* ══════════════════════════════════════════════════════════════════════════════
   11. OWNED STATE — "User already used this trial" (forward-compat M1.4)
   ══════════════════════════════════════════════════════════════════════════════ */

.trial-card--owned .trial-card__badge {
  background: var(--success-tint);
  border-color: rgba(22, 163, 74, 0.35);
  color: #4ADE80;
}

.trial-card--owned .trial-card__badge .icon {
  color: currentColor;
  fill: currentColor;
}


/* ══════════════════════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════════ */

/* Tablet: stack cards */
@media (max-width: 960px) {
  .trial-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .trial-card--primary,
  .trial-card--secondary {
    min-height: auto;
  }
  .trial-card--primary { padding: var(--sp-6) var(--sp-5); }
}

/* Phone */
@media (max-width: 540px) {
  .trial-card__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .trial-card__brand-name { font-size: 22px; }
  .trial-card__title { font-size: 22px; }
  .trial-feat__label { font-size: 12px; }
  .trial-feat__hint { font-size: 10px; }
  .trial-feat__icon { width: 32px; height: 32px; }
  .btn-trial { height: 52px; font-size: 14px; }
}

/* Section padding on smaller screens */
@media (max-width: 720px) {
  .section { padding-block: var(--section-py-sm); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   13. REDUCED-MOTION ACCESSIBILITY
   ══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .section-head__eyebrow-dot,
  .btn-trial.is-error,
  .btn-trial__icon.is-spinning {
    animation: none;
  }
  .btn-trial__track-fill {
    transition: none;
  }
  .trial-card {
    transition: none;
  }
  .trial-card:hover {
    transform: none;
  }
}