/*
  Dedicated D7 landing page — additive, standalone stylesheet.

  Loaded ALONGSIDE styles.css (not instead of it) so this page inherits the
  same design tokens (--gold/--text-head/etc., all defined on :root in
  styles.css) and can reuse styles.css's own presentational-only component
  classes (.certification-box, .trainer-box, .pricing-box, .checklist,
  .audience-list, .cdi-list, .cert-list, .diploma-meta/.meta-item,
  .price-current/.price-label, .gold-text, .btn-gold/.btn-gold-small) —
  every one of those is pure CSS with zero JS coupling, confirmed against
  styles.css before reuse.

  Deliberately NOT reusing: #header/.header-inner/#main-nav (tied to
  main.js's scroll-reveal, defaults to translateY(-100%);opacity:0 until a
  JS-added ".visible" class), #loading-screen (JS-hidden on load), and
  .scale-in/.fade-up/.fade-left/.fade-right (JS IntersectionObserver
  reveal — opacity:0 by default without it). This page ships no JS
  dependency for content or visibility, so all of those are replaced with
  this file's own always-visible header/footer/section rules instead.
*/

.d7-page { background: var(--bg-white); }

.d7-page :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── Minimal header ─────────────────────────────────────────── */
.d7-header {
  border-bottom: 1px solid var(--border-gold);
  background: var(--bg-white);
}
.d7-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 20px;
}
.d7-logo { height: 38px; width: auto; }
.d7-header-actions { display: flex; align-items: center; gap: 16px; }
.d7-back-link {
  font-size: .82rem; font-weight: 600; color: var(--text-body);
  text-decoration: none; white-space: nowrap;
}
.d7-back-link:hover { color: var(--gold); }
.d7-lang-switcher { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; }
.d7-lang-switcher a { color: var(--text-muted); text-decoration: none; padding: 2px 4px; }
.d7-lang-switcher a.active { color: var(--gold); }
.d7-lang-switcher a:hover { color: var(--gold); }
.d7-lang-sep { color: var(--border); }

/* ── Hero / lead section ────────────────────────────────────── */
.d7-hero { background: var(--bg-cream); padding: 36px 0 48px; }
.d7-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas:
    "media form"
    "modules form";
  gap: 32px;
  align-items: start;
}
.d7-hero-media { grid-area: media; min-width: 0; }
.d7-hero-modules { grid-area: modules; min-width: 0; padding-top: 8px; }
.d7-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .04em;
  color: var(--gold-dark); background: rgba(172,154,39,.1);
  border: 1px solid var(--border-gold); border-radius: 999px; padding: 4px 12px;
  margin-bottom: 14px;
}
.d7-h1 { font-size: 2rem; line-height: 1.25; color: var(--text-head); margin: 0 0 14px; font-weight: 800; }
.d7-desc { font-size: 1rem; line-height: 1.8; color: var(--text-body); margin: 0 0 22px; }
.d7-hero-img-wrap {
  position: relative; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md);
  margin-bottom: 22px; aspect-ratio: 16/9; background: var(--bg-pale);
}
.d7-hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.d7-hero-cta { margin-top: 6px; }

/* ── Registration card (sticky on desktop) ──────────────────── */
.d7-form-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-lg); padding: 24px;
  grid-area: form; position: sticky; top: 20px;
}
.d7-form-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.d7-referral { margin-top: 10px; }
.d7-form-h { font-size: 1.15rem; font-weight: 800; color: var(--text-head); margin: 14px 0 4px; }
.d7-form-sub { font-size: .82rem; color: var(--text-muted); margin: 0 0 18px; line-height: 1.6; }

.d7-field { margin-bottom: 14px; }
.d7-field label { display: block; font-size: .82rem; font-weight: 700; color: var(--text-head); margin-bottom: 6px; }
.d7-field .req { color: var(--gold-dark); margin-inline-start: 2px; }
.d7-field input {
  width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 13px; font-size: .92rem; font-family: inherit; color: var(--text-head);
  background: var(--bg-white); transition: border-color .2s ease, box-shadow .2s ease;
}
.d7-field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(172,154,39,.14); outline: none; }
.d7-field input[aria-invalid="true"] { border-color: #d9534f; }
.d7-field-error { color: #b3261e; font-size: .76rem; margin-top: 5px; }

/* Honeypot — kept in the flow (not display:none) so bot heuristics that
   skip display:none fields still fall for it, but invisible and
   unreachable for a real visitor/keyboard/screen-reader user (the wrapper
   div also carries aria-hidden="true" in the markup, so assistive tech
   never reaches it regardless of this rule). The standard "clip a 1x1px
   box in place" hide pattern, not a large negative offset — a
   large-offset absolutely-positioned descendant still contributes to its
   nearest scrolling ancestor's scrollWidth, which on this page has no
   intervening `overflow:hidden` container to catch it, so it was
   inflating <html>'s own horizontal scroll size by thousands of pixels
   at every mobile width — found during mobile QA. Clipping in place
   keeps the element's box at 1x1px exactly where the form already lays
   it out, so it can never push the page wider than its content. */
.d7-hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.d7-submit-btn {
  width: 100%; justify-content: center; border: none; cursor: pointer;
  font-family: inherit;
}

.d7-alert { border-radius: 12px; padding: 14px 16px; margin-bottom: 18px; font-size: .86rem; line-height: 1.6; }
.d7-alert-success { background: #eef7ee; border: 1px solid #b7dfb8; color: #205d24; }
.d7-alert-error { background: #fdecec; border: 1px solid #f3b7b4; color: #7a1f1a; }
.d7-alert-ref { font-weight: 800; letter-spacing: .02em; }

/* Centered "OR"/"أو" divider between the registration form and the
   Stripe/Tabby payment options — CSS borders either side of the word,
   not literal dash characters, so it renders cleanly in both LTR and RTL
   without needing mirrored text. */
.d7-or-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 18px; color: var(--text-muted);
  font-size: .78rem; font-weight: 700; letter-spacing: .04em;
}
.d7-or-divider::before, .d7-or-divider::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--border);
}

/* ── Content sections ───────────────────────────────────────── */
.d7-section { padding: 40px 0; }
.d7-section-alt { background: var(--bg-pale); }
.d7-section-h {
  font-size: 1.4rem; font-weight: 800; color: var(--text-head);
  margin: 0 0 20px; padding-inline-start: 14px; border-inline-start: 4px solid var(--gold);
}

.d7-modules { display: flex; flex-direction: column; gap: 10px; }
.d7-module {
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-white);
  overflow: hidden;
}
.d7-module summary {
  cursor: pointer; list-style: none; padding: 14px 16px; display: flex;
  align-items: center; gap: 12px; font-weight: 700; color: var(--text-head); font-size: .92rem;
}
.d7-module summary::-webkit-details-marker { display: none; }
.d7-module-num {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); color: #fff; font-size: .78rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.d7-module-chevron { margin-inline-start: auto; transition: transform .2s ease; color: var(--text-muted); flex-shrink: 0; }
.d7-module[open] .d7-module-chevron { transform: rotate(180deg); }
.d7-module-body { padding: 0 16px 16px 16px; }

.d7-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }

.d7-meta-strip { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0 0; }
.d7-meta-strip .meta-item { flex: 1 1 140px; }

/* Footer: no custom rules needed here — the dedicated page reproduces the
   listing page's own footer markup verbatim (see diploma-detail/d7.blade.
   php), styled entirely by styles.css's own footer, footer-prefixed,
   social-prefixed, and app-prefixed rules, all pure CSS, confirmed
   reusable. (An earlier version of this comment wrote those class-prefix
   names separated by forward slashes with trailing asterisks, which
   spelled out the two-character CSS comment terminator mid-sentence and
   silently closed this comment right there — corrupting everything after
   it until the next rule boundary and dropping the mobile-breakpoint
   media rule below entirely, in every browser, with no warning anywhere.
   Rewritten in plain words for exactly that reason — never spell out that
   terminator inside a comment, not even split across punctuation.) */

@media (max-width: 900px) {
  .d7-hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "media"
      "form"
      "modules";
  }
  .d7-form-card { position: static; }
  .d7-two-col { grid-template-columns: 1fr; gap: 8px; }
  .d7-h1 { font-size: 1.6rem; }

  /* .tabby-modal itself (styles.css, shared with the listing page — not
     edited here) has no max-height/overflow-y at all; it just grows to
     fit its content, centered by .tabby-modal-overlay's flex layout. On
     a short phone (measured: 547px modal in a 568px-tall viewport, ~21px
     total margin) that's already tight, and a real on-screen keyboard
     covers part of a `position:fixed` modal without shrinking it on many
     mobile browsers, with no scroll mechanism to reach whatever it
     covers. This override (same selector, loaded after styles.css, so it
     wins on these two properties only — nothing else about the modal's
     own styling changes) caps its height to the viewport minus the
     overlay's own 20px+20px padding and makes it internally scrollable,
     so the close/submit controls stay reachable regardless of content
     height or a shrunk keyboard viewport. */
  .tabby-modal {
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* .btn-wa-small/.btn-gold-small/.btn-gold/.tabby-pay-btn (styles.css,
     shared with the listing page's own pricing boxes — not edited here)
     measure ~42-43px tall from their own 10px padding, just under the
     commonly recommended 44px touch-target height. Scoped to only the
     copies inside this page's own .d7-form-card, so the listing page's
     visually-identical buttons (a different part of the DOM entirely)
     are completely unaffected. */
  .d7-form-card .pricing-options a,
  .d7-form-card .pricing-options button,
  .d7-form-card .pricing-support-row .btn-wa-small {
    min-height: 44px;
  }
}

@media (max-width: 560px) {
  /* Wrap instead of overflow now that the header carries a 3rd action
     (the "back to listing" link added this round) alongside the phone
     number and language switcher — narrow phones don't have room for all
     three plus the logo on one line. */
  .d7-header-inner { padding: 12px 16px; flex-wrap: wrap; row-gap: 8px; }
  .d7-header-actions { flex-wrap: wrap; row-gap: 6px; }
  .d7-hero { padding: 24px 0 32px; }
  .d7-section { padding: 28px 0; }
  .d7-form-card { padding: 18px; }
}