/*
Referral programme — /referral/ styles.
Enqueued only on page-referral.php (packndash_referral_assets in functions.php).

Design language is deliberately the same as villa-movers-dubai.css — navy/gold,
layered shadows, kicker + two-tone rule headings, card hover lift — so the two
pages read as one site. Tokens are redeclared here rather than shared because
the two stylesheets never load together.

LOAD ORDER: this must print AFTER style.css. The theme sets `details p{color:#fff}`
and prints its own `summary::before` +/- marker, both of which would otherwise
land on this page's FAQ. The enqueue declares style-css as a guarded dependency;
the explicit overrides at the end of this file are the second line of defence.
*/

/* ══ Tokens ═══════════════════════════════════════════════════════════════ */
:root {
  --pnd-navy:       #002772;
  --pnd-navy-deep:  #00194d;
  --pnd-navy-dark:  #001238;
  --pnd-gold:       #ffdc39;
  --pnd-gold-dark:  #f2cd17;
  --pnd-green:      #0b7d33;
  --pnd-ink:        #14212b;
  --pnd-body:       #3c4658;
  --pnd-muted:      #5a6577;
  --pnd-line:       #e2e8f0;
  --pnd-tint:       #f4f7fb;
  --pnd-gold-tint:  #fffceb;
  --pnd-error:      #a32020;

  --pnd-r-sm: 8px;
  --pnd-r:    12px;
  --pnd-r-lg: 18px;
  --pnd-r-xl: 24px;

  --pnd-sh-1: 0 1px 2px rgba(0,25,77,.06), 0 4px 12px rgba(0,25,77,.05);
  --pnd-sh-2: 0 2px 4px rgba(0,25,77,.07), 0 12px 28px rgba(0,25,77,.10);
  --pnd-sh-3: 0 4px 8px rgba(0,25,77,.09), 0 24px 48px rgba(0,25,77,.14);

  --pnd-ease: cubic-bezier(.2,.7,.3,1);
  --pnd-t:    .22s var(--pnd-ease);

  /* Google Sans is declared in header.php as a SINGLE face with no font-weight
     descriptor, i.e. weight 400 only. Anything asking it for 700/800 therefore
     gets synthetic bold, which looks washed out at small sizes. So the display
     font is used only for large display text (h1/h2), where synthetic bold is
     acceptable and the distinctive shapes are worth it. Everything small that
     depends on weight - kickers, buttons, labels, numbers - uses the body stack,
     where the system fonts carry real bold outlines. */
  --pnd-font-head: 'Google Sans','Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pnd-font-body: 'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ══ Frame ════════════════════════════════════════════════════════════════ */
#referral-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 34px 20px 0;
  font-family: var(--pnd-font-body);
  color: var(--pnd-body);
  overflow-x: clip;
}

#referral-page > section { margin: 0 0 clamp(44px, 5.5vw, 74px); }

#referral-page h1,
#referral-page h2,
#referral-page h3 {
  font-family: var(--pnd-font-head);
  color: var(--pnd-navy);
  letter-spacing: -.02em;
  text-wrap: balance;
}

#referral-page h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem);
  line-height: 1.08;
  font-weight: 800;
  margin: 0 0 16px;
}

#referral-page h2 {
  font-size: clamp(1.65rem, 1.25rem + 1.7vw, 2.4rem);
  line-height: 1.18;
  font-weight: 800;
  margin: 0 0 12px;
  position: relative;
  padding-bottom: 16px;
}

#referral-page h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 128px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--pnd-gold) 0, var(--pnd-gold) 50px,
    rgba(0,39,114,.14) 50px, rgba(0,39,114,.14) 100%);
}

#referral-page h3 { font-family: var(--pnd-font-body); font-size: 1.13rem; line-height: 1.35; font-weight: 700; margin: 0 0 8px; }
#referral-page p  { font-size: 1rem; line-height: 1.7; }

#referral-page .section-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 12px;
  font-family: var(--pnd-font-body);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pnd-navy);
}

#referral-page .section-kicker::before {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: var(--pnd-gold);
}

.referral-section-intro {
  color: var(--pnd-muted);
  font-size: 1.04rem;
  line-height: 1.7;
  max-width: 68ch;
  margin: 0 0 28px;
}

#referral-page a:focus-visible,
#referral-page button:focus-visible,
#referral-page input:focus-visible,
#referral-page summary:focus-visible {
  outline: 3px solid var(--pnd-gold);
  outline-offset: 2px;
  border-radius: var(--pnd-r-sm);
}

/* ══ Hero ═════════════════════════════════════════════════════════════════ */
.referral-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--pnd-r-xl);
  padding: clamp(36px, 5vw, 68px) clamp(24px, 4vw, 60px);
  background:
    radial-gradient(120% 130% at 88% 8%, rgba(255,220,57,.20) 0, rgba(255,220,57,0) 46%),
    linear-gradient(152deg, var(--pnd-navy) 0, var(--pnd-navy-deep) 58%, var(--pnd-navy-dark) 100%);
  color: #fff;
}

.referral-hero-inner { max-width: 760px; }
#referral-page .referral-hero h1 { color: #fff; }
#referral-page .referral-hero .section-kicker { color: var(--pnd-gold); }
.referral-hero-accent { color: var(--pnd-gold); }

.referral-hero-sub {
  font-size: clamp(1.04rem, .98rem + .3vw, 1.2rem);
  line-height: 1.65;
  color: rgba(255,255,255,.9);
  margin: 0 0 14px;
  max-width: 60ch;
}

.referral-hero-sub strong { color: var(--pnd-gold); }

.referral-hero-note {
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  margin: 0 0 26px;
  max-width: 60ch;
}

.referral-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 34px;
  min-height: 52px;
  box-sizing: border-box;
  border-radius: 50px;
  background: var(--pnd-gold);
  color: var(--pnd-navy) !important;
  font-family: var(--pnd-font-body);
  font-size: 1.04rem;
  font-weight: 800;
  text-decoration: none !important;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--pnd-sh-2);
  transition: background var(--pnd-t), transform var(--pnd-t), box-shadow var(--pnd-t);
}

.referral-cta:hover {
  background: var(--pnd-gold-dark);
  color: var(--pnd-navy) !important;
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--pnd-sh-3);
}

/* ══ Steps ════════════════════════════════════════════════════════════════ */
.referral-step-list { list-style: none; padding: 0; margin: 0; max-width: 860px; }

.referral-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 0 0 26px;
  position: relative;
}

.referral-step::before {
  content: "";
  position: absolute;
  left: 21px;
  top: 44px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--pnd-gold) 0, var(--pnd-line) 100%);
}

.referral-step:last-child { padding-bottom: 0; }
.referral-step:last-child::before { display: none; }

.referral-step-num {
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pnd-navy);
  color: var(--pnd-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pnd-font-body);
  font-weight: 800;
  font-size: 1.08rem;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--pnd-line);
}

.referral-step h3 { margin: 9px 0 7px; }
.referral-step p { color: var(--pnd-body); font-size: .98rem; margin: 0; }

/* ══ Rate cards ═══════════════════════════════════════════════════════════ */
.referral-rate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.referral-rate-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--pnd-line);
  border-radius: var(--pnd-r);
  padding: 28px 24px;
  box-shadow: var(--pnd-sh-1);
  transition: transform var(--pnd-t), box-shadow var(--pnd-t);
}

.referral-rate-card:hover { transform: translateY(-4px); box-shadow: var(--pnd-sh-3); }

.referral-rate-figure {
  display: block;
  font-family: var(--pnd-font-head); /* large display size - synthetic bold is fine here */
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem);
  font-weight: 800;
  line-height: 1;
  color: var(--pnd-navy);
  letter-spacing: -.03em;
  margin-bottom: 12px;
}

.referral-rate-card p { color: var(--pnd-body); font-size: .96rem; margin: 0; }

/* Shown only while rates are unconfirmed — impossible to mistake for a figure. */
.referral-rate-unconfirmed {
  display: inline-block;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #8a5a00;
  background: var(--pnd-gold-tint);
  border: 2px dashed var(--pnd-gold);
  border-radius: var(--pnd-r-sm);
  padding: 6px 12px;
}

.referral-rate-note {
  margin-top: 24px;
  padding: 16px 20px;
  background: var(--pnd-gold-tint);
  border: 1px solid var(--pnd-gold);
  border-radius: var(--pnd-r);
  color: var(--pnd-body);
  font-size: .98rem;
  max-width: 70ch;
}

/* ══ Trust ════════════════════════════════════════════════════════════════ */
.referral-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  padding: 26px 18px;
  border-radius: var(--pnd-r-lg);
  background:
    radial-gradient(100% 140% at 50% 0, rgba(255,220,57,.14) 0, rgba(255,220,57,0) 55%),
    linear-gradient(140deg, var(--pnd-navy) 0, var(--pnd-navy-dark) 100%);
  text-align: center;
}

.referral-trust-item { padding: 12px 16px; border-left: 1px solid rgba(255,255,255,.16); }
.referral-trust-item:first-child { border-left: 0; }

.referral-trust-num {
  display: block;
  font-family: var(--pnd-font-body);
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--pnd-gold);
  line-height: 1.1;
}

#referral-page .referral-trust-item p {
  margin: 8px 0 0;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(255,255,255,.82);
}

.referral-trust-item strong { color: #fff; }
.referral-trust-note { margin-top: 22px; color: var(--pnd-body); max-width: 70ch; }

/* ══ Form ═════════════════════════════════════════════════════════════════ */
.referral-form-section {
  background: #fff;
  border: 1px solid var(--pnd-line);
  border-radius: var(--pnd-r-lg);
  padding: clamp(26px, 3.2vw, 42px) clamp(20px, 3vw, 38px);
  box-shadow: var(--pnd-sh-2);
  position: relative;
  overflow: hidden;
  scroll-margin-top: 90px; /* the header is sticky; don't hide the heading */
}

.referral-form-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--pnd-gold) 0, var(--pnd-gold-dark) 100%);
}

/* Fieldsets.
   `legend` has no rule in the theme, so the browser default applies: a legend
   is placed INSIDE the fieldset's top border and cuts a gap in it, which threw
   every section heading out of alignment with the fields below. Floating it
   full-width takes it out of the border flow entirely and makes it behave like
   an ordinary block heading. The float is then cleared by the content below. */
.referral-fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 30px;
}

.referral-fieldset + .referral-fieldset {
  border-top: 1px solid var(--pnd-line);
  padding-top: 28px;
}

.referral-fieldset legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 16px;
  /* Body stack, not the display font: the Google Sans @font-face in header.php
     declares no font-weight, so it is a single 400 face. Asking it for 700+
     produces synthetic bold, which is what made these headings look washed out.
     The system stack has real bold outlines. */
  font-family: var(--pnd-font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pnd-navy);
}

.referral-fieldset legend + * { clear: both; }

.referral-optional {
  font-weight: 500;
  color: var(--pnd-muted);
  font-size: .88rem;
}

.referral-grid {
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px 16px;
  align-items: start;
}

.referral-field { margin: 0; min-width: 0; }

.referral-field label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--pnd-font-body);
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pnd-ink);
}

.referral-field label span[aria-hidden] { color: var(--pnd-error); }

.referral-field input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 15px;
  border: 1.5px solid #cbd5e0;
  border-radius: var(--pnd-r-sm);
  font-family: var(--pnd-font-body);
  font-size: 16px; /* under 16px iOS Safari zooms the page on focus */
  line-height: 1.3;
  background: #fff;
  color: var(--pnd-ink);
  box-sizing: border-box;
  transition: border-color var(--pnd-t), box-shadow var(--pnd-t);
}

.referral-field input::placeholder { color: #9aa5b5; }
.referral-field input:hover { border-color: #9fb0c7; }

.referral-field input:focus {
  outline: none;
  border-color: var(--pnd-navy);
  box-shadow: 0 0 0 4px rgba(255,220,57,.45);
}

/* Radio and consent options as full-width cards. The <label> wraps the input,
   so the whole card is clickable rather than just the words. */
.referral-choice {
  clear: both;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin: 0 0 10px;
  padding: 15px 17px;
  background: #fff;
  border: 1.5px solid var(--pnd-line);
  border-radius: var(--pnd-r);
  cursor: pointer;
  transition: border-color var(--pnd-t), background var(--pnd-t), box-shadow var(--pnd-t);
}

.referral-choice:hover { border-color: #9fb0c7; background: var(--pnd-tint); }

.referral-choice:focus-within {
  border-color: var(--pnd-navy);
  box-shadow: 0 0 0 4px rgba(255,220,57,.45);
}

/* :has is progressive - where unsupported the card simply does not highlight,
   while the radio itself still shows its own checked state. */
.referral-choice:has(input:checked) {
  border-color: var(--pnd-navy);
  background: var(--pnd-gold-tint);
}

.referral-choice input {
  width: 22px;
  height: 22px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--pnd-navy);
  cursor: pointer;
}

.referral-choice-text {
  font-family: var(--pnd-font-body);
  font-size: .97rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pnd-body);
}

.referral-choice-text span[aria-hidden] { color: var(--pnd-error); }

.referral-consent {
  margin: 22px 0 26px;
  background: var(--pnd-tint);
}

.referral-consent .referral-choice-text { font-weight: 500; }

.referral-submit { clear: both; margin: 0; }

.referral-submit button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  min-height: 56px;
  padding: 16px 40px;
  border: 0;
  border-radius: 50px;
  background: var(--pnd-gold);
  color: var(--pnd-navy);
  font-family: var(--pnd-font-body);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--pnd-sh-2);
  transition: background var(--pnd-t), transform var(--pnd-t), box-shadow var(--pnd-t);
}

.referral-submit button:hover {
  background: var(--pnd-gold-dark);
  transform: translateY(-2px);
  box-shadow: var(--pnd-sh-3);
}

.referral-submit button:active { transform: translateY(0); }

.referral-errors {
  clear: both;
  background: #fdf2f2;
  border: 1px solid #f0c2c2;
  border-left: 4px solid var(--pnd-error);
  border-radius: var(--pnd-r);
  padding: 16px 20px;
  margin: 0 0 26px;
}

#referral-page .referral-errors .error-message {
  color: var(--pnd-error);
  font-weight: 700;
  margin: 0 0 8px;
}

.referral-errors ul { margin: 0; padding-left: 20px; }
.referral-errors li { color: var(--pnd-error); font-size: .95rem; line-height: 1.6; }

.referral-success {
  background: #f0f9f4;
  border: 1px solid #b7e0c8;
  border-left: 4px solid var(--pnd-green);
  border-radius: var(--pnd-r);
  padding: 24px 26px;
}

#referral-page .referral-success .success-message {
  color: #14663a;
  font-weight: 800;
  font-family: var(--pnd-font-body);
  font-size: 1.16rem;
  margin: 0 0 10px;
}

#referral-page .referral-success p { color: var(--pnd-body); margin: 0; }

/* Honeypot from packndash_form_security_fields — belt and braces. */
#referral-page input[name="packndash_website"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* ══ FAQ ══════════════════════════════════════════════════════════════════ */
.referral-faqs { max-width: 900px; }

.referral-faqs details {
  background: #fff;
  border: 1px solid var(--pnd-line);
  border-radius: var(--pnd-r);
  margin-bottom: 12px;
  box-shadow: var(--pnd-sh-1);
  transition: border-color var(--pnd-t), box-shadow var(--pnd-t);
}

.referral-faqs details:hover { border-color: #cfdaea; box-shadow: var(--pnd-sh-2); }
.referral-faqs details[open] { border-color: var(--pnd-gold); box-shadow: var(--pnd-sh-2); }

.referral-faqs summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  font-family: var(--pnd-font-body);
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--pnd-navy);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  min-height: 44px;
}

.referral-faqs summary::-webkit-details-marker { display: none; }
.referral-faqs summary::marker { content: ""; }

.referral-faqs summary::after {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    linear-gradient(var(--pnd-navy), var(--pnd-navy)) center/11px 2.5px no-repeat,
    linear-gradient(var(--pnd-navy), var(--pnd-navy)) center/2.5px 11px no-repeat,
    var(--pnd-gold-tint);
  border: 1px solid var(--pnd-gold);
  transition: transform var(--pnd-t);
}

.referral-faqs details[open] summary::after { transform: rotate(90deg); }

/* ══ Terms ════════════════════════════════════════════════════════════════ */
.referral-terms { background: var(--pnd-tint); border-radius: var(--pnd-r-lg); padding: clamp(26px, 3vw, 40px); }
.referral-terms-list { margin: 0; padding-left: 22px; max-width: 76ch; }

#referral-page .referral-terms-list li {
  color: var(--pnd-body);
  font-size: .97rem;
  line-height: 1.72;
  margin-bottom: 12px;
}

.referral-terms-contact { margin: 22px 0 0; color: var(--pnd-body); }
.referral-terms-contact a { color: var(--pnd-navy); font-weight: 700; }

/* ══ Theme cascade corrections ════════════════════════════════════════════
   style.css sets `details p{color:#fff}` (0,0,2) for the dark FAQ panels on the
   area pages, and prints its own `summary::before` +/- marker. Both are correct
   there and wrong here. Overridden rather than edited, so the area pages keep
   working. Same defect that made the villa FAQ answers invisible. */
body.page-template-page-referral-php .referral-faqs details > p,
body.page-template-page-referral-php .referral-faqs details > ul {
  color: var(--pnd-body);
  font-size: .99rem;
  line-height: 1.75;
  margin: 0;
  padding: 0 22px 21px;
}

body.page-template-page-referral-php .referral-faqs summary::before,
body.page-template-page-referral-php .referral-faqs details[open] summary::before {
  content: none;
  display: none;
}

body.page-template-page-referral-php .referral-faqs details,
body.page-template-page-referral-php .referral-faqs details[open] { padding: 0; }

/* ══ Responsive ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .referral-trust-item { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); }
  .referral-trust-item:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 768px) {
  #referral-page { padding: 24px 14px 0; }
  .referral-hero { padding: 30px 20px; }
  .referral-cta { width: 100%; }
  .referral-form-section { padding: 24px 18px; }
  .referral-faqs summary { padding: 17px 18px; font-size: 1rem; }
  body.page-template-page-referral-php .referral-faqs details > p { padding: 0 18px 18px; }
}

@media (max-width: 560px) {
  .referral-trust-item { border-top: 1px solid rgba(255,255,255,.16); }
  .referral-trust-item:first-child { border-top: 0; }
  .referral-trust-item:nth-child(2) { border-top: 1px solid rgba(255,255,255,.16); }
  .referral-step { gap: 14px; }
  .referral-step::before { left: 18px; }
  .referral-step-num { width: 38px; height: 38px; font-size: 1rem; }
}

/* ══ Reduced motion ═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #referral-page *, .referral-cta { transition: none !important; animation: none !important; }
}