/* ══════════════════════════════════════════════════════════════════════════════
   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
   ──────────────────────────────────────────────────────────────────────────────
   Hotfix 001 (2026-06-10): wider container + tuned grid ratio.

   - .trial-section .section__inner widens to 1440px (vs default 1280px).
     Trial is the primary conversion section — gives the two cards more
     breathing room on wide desktops while respecting smaller breakpoints
     (the @media (max-width: 960px) rule below still kicks in correctly).

   - Grid ratio adjusted to 1.4fr 1fr (was 1.5fr 1fr) — the secondary
     Aroma card was looking visually compressed at the prior ratio.

   - Gap increased to var(--sp-6) (was --sp-5) for better visual separation.
   ══════════════════════════════════════════════════════════════════════════════ */

.trial-section .section__inner {
  max-width: 1440px;
}

.trial-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-6);
  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 (V6 — Status Cycler)
   ══════════════════════════════════════════════════════════════════════════════
   V6 anatomy:
     <button class="btn-trial btn-trial--{variant}">
       <span class="btn-trial__status">              ← flex (icon + text)
         <svg class="btn-trial__icon">...</svg>
         <span class="btn-trial__status-text">...</span>
       </span>
       <span class="btn-trial__bar"></span>          ← absolute bottom (progress)
     </button>

   State classes (added by trial.js):
     - .is-loading     → show bar + phase texts cycle via JS
     - .is-changing    → text fade for transition (0.3s)
     - .is-success     → green + check icon
     - .is-error       → red + error message + shake
   ══════════════════════════════════════════════════════════════════════════════ */

.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;
  overflow: hidden;       /* clips the bar to button shape */
  z-index: 1;
  margin-top: auto;
}

/* Status group: icon + cycling text */
.btn-trial__status {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  z-index: 2;             /* above the progress bar */
}

.btn-trial__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.btn-trial__status-text {
  display: inline-block;
  opacity: 1;
  transition: opacity 0.3s ease;
  font-weight: 800;
}

/* Phase transition: text fades to 0, JS updates, then fades back */
.btn-trial.is-changing .btn-trial__status-text {
  opacity: 0;
}

/* Progress bar — absolute bottom strip, fills via inline style --p */
.btn-trial__bar {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand), var(--brand-soft));
  width: var(--p, 0%);
  transition: width 0.4s ease;
  pointer-events: none;
  opacity: 0;             /* hidden until loading */
  border-radius: 0 0 var(--r-pill) var(--r-pill);
}

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


/* ══════════════════════════════════════════════════════════════════════════════
   10. BUTTON VARIANTS (Primary / Secondary / Gold)
   ══════════════════════════════════════════════════════════════════════════════ */

/* Primary — white background, deep purple text (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:not(:disabled) {
  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:not(:disabled) {
  transform: translateY(0);
}

/* On primary (white bg), the bar uses the brand gradient — already set above */
.btn-trial--primary .btn-trial__bar {
  background: linear-gradient(90deg, var(--brand), var(--brand-deep));
}

/* Secondary — brand gradient, white text (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:not(:disabled) {
  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:not(:disabled) {
  transform: translateY(0);
}

/* On secondary (brand bg), the bar uses lighter brand-soft for contrast */
.btn-trial--secondary .btn-trial__bar {
  background: linear-gradient(90deg, #fff, var(--brand-tint));
  opacity: 0;
}
.btn-trial--secondary.is-loading .btn-trial__bar {
  opacity: 0.6;
}

/* Gold variant — premium tier (future use) */
.btn-trial--gold {
  background: linear-gradient(135deg, #F59E0B 0%, #B45309 100%);
  color: #fff;
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.btn-trial--gold:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(245, 158, 11, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}


/* ══════════════════════════════════════════════════════════════════════════════
   11. BUTTON STATES — Loading / Success / Error
   ══════════════════════════════════════════════════════════════════════════════ */

/* Disabled */
.btn-trial:disabled { cursor: not-allowed; }

/* Loading state — no hover transform; bar visible */
.btn-trial.is-loading,
.btn-trial.is-loading:hover {
  transform: none;
  cursor: progress;
}

/* Success — green takeover.
   Specificity: .btn-trial.is-success = (0,2,0) > .btn-trial--primary (0,1,0) — no !important needed */
.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__bar {
  opacity: 0;
}

/* Error — red takeover with shake.
   Same specificity argument as is-success — no !important needed */
.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__bar {
  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); }
}


/* ══════════════════════════════════════════════════════════════════════════════
   12. EXISTS STATE — User has trial (redirects to subscription_details)
   ══════════════════════════════════════════════════════════════════════════════
   When the user already has a trial on this server, the button behaves as
   a redirect to subscription_details.php. The CSS subtly differentiates it
   from the "start" CTA without making it feel disabled.

   Specificity strategy:
   ─────────────────────
   .btn-trial--exists alone = (0,1,0) — same as .btn-trial--primary, ambiguous.
   .btn-trial.btn-trial--exists = (0,2,0) — beats variant cleanly, no !important.
   ══════════════════════════════════════════════════════════════════════════════ */

.btn-trial.btn-trial--exists {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.30);
  box-shadow: none;
}

/* Primary card (Universe — light bg variant context) */
.trial-card--primary .btn-trial.btn-trial--exists {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.40);
}

/* Secondary card (Aroma — dark bg variant context) */
.trial-card--secondary .btn-trial.btn-trial--exists {
  background: rgba(137, 96, 199, 0.15);
  border-color: rgba(137, 96, 199, 0.40);
  color: var(--text);
}

.btn-trial.btn-trial--exists:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.trial-card--secondary .btn-trial.btn-trial--exists:hover:not(:disabled) {
  background: rgba(137, 96, 199, 0.25);
}

/* Hide progress bar in exists state — not applicable */
.btn-trial.btn-trial--exists .btn-trial__bar {
  display: none;
}

/* Subtle icon shift on hover (RTL-aware: moves left to suggest forward motion) */
.btn-trial.btn-trial--exists:hover:not(:disabled) .btn-trial__icon {
  transform: translateX(-3px);
}


/* ══════════════════════════════════════════════════════════════════════════════
   13. 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; }
  .btn-trial__status-text { font-size: 14px; }
}

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


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

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