/* ==========================================================================
   FairTech Footer/Legal Content Pages — /footer/about-us, contact-us,
   store-locations, terms-conditions, privacy-policy, cookie-policy,
   payment-method, payment-policy, delivery-policy, return-refund,
   track-order. Page-scoped via $extra_head.

   These are legacy Bootstrap pages predating the redesign, several with
   WYSIWYG-pasted inline `color:black` spans calibrated for a white page.
   This file wraps them in a dark-glass panel matching the sitewide
   background (site-background.css) and hero card language, without
   touching any legal/business text, form fields, or links.
   ========================================================================== */

.ds-content-page {
  position: relative;
  max-width: 1100px;
  margin: 32px auto 64px;
  padding: 40px clamp(20px, 5vw, 56px);
  background: var(--ds-surface-glass-strong, rgba(18, 27, 48, 0.78));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg, 20px);
  box-shadow: var(--ds-shadow-md, 0 12px 32px rgba(2, 6, 16, 0.45)), 0 0 40px rgba(61, 139, 255, 0.08);
  color: var(--ds-text-secondary, #aab4c8);
}

.ds-content-page h1,
.ds-content-page h2,
.ds-content-page h3,
.ds-content-page h4 {
  color: var(--ds-text-primary, #f3f6fc);
}

.ds-content-page h1 {
  font-weight: 800;
}

.ds-content-page p,
.ds-content-page li,
.ds-content-page span,
.ds-content-page div {
  color: var(--ds-text-secondary, #aab4c8);
}

/* WYSIWYG-pasted inline colors calibrated for a white page read too dim
   (or invisible) on the dark panel. Inline `style` beats an external rule
   unless that rule is !important. */
.ds-content-page [style*="color:black" i],
.ds-content-page [style*="color: black" i],
.ds-content-page [style*="color:#212529" i],
.ds-content-page [style*="color:#585858" i] {
  color: var(--ds-text-secondary, #aab4c8) !important;
}

/* Same WYSIWYG residue, this time a light "highlight" background behind
   key details (company number, VAT, addresses) — a near-white box reads
   as washed-out on the dark panel, so give it a visible dark-accent chip
   instead of dropping the highlight treatment entirely. */
.ds-content-page [style*="background-color:#f7f7f7" i],
.ds-content-page [style*="background-color:white" i],
.ds-content-page [style*="background-color: #f7f7f7" i],
.ds-content-page [style*="background-color: white" i] {
  background-color: rgba(61, 139, 255, 0.14) !important;
  color: var(--ds-text-primary, #f3f6fc) !important;
  border-radius: 4px;
  padding: 0 4px;
}

.ds-content-page a {
  color: var(--ds-accent, #3d8bff);
}

.ds-content-page a:hover {
  color: var(--ds-accent-strong, #0066ff);
}

.ds-content-page b,
.ds-content-page strong {
  color: var(--ds-text-primary, #f3f6fc);
}

.ds-content-page .btn-outline-primary {
  border: 1px solid var(--ds-border-accent, rgba(56, 132, 255, 0.4));
  color: var(--ds-text-primary, #f3f6fc);
  background: transparent;
  transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
}

.ds-content-page .btn-outline-primary:hover {
  background: var(--ds-accent, #3d8bff);
  border-color: var(--ds-accent, #3d8bff);
  color: #ffffff;
}

.ds-content-page .btn-primary {
  background: linear-gradient(180deg, #2f7bff 0%, var(--mainblue, #0066ff) 100%);
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 102, 255, 0.25);
}

/* Contact form (contact-us.php) */
.ds-content-page .form-control {
  background: var(--ds-surface-1, #0d1526);
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.16));
  color: var(--ds-text-primary, #f3f6fc);
}

.ds-content-page .form-control:focus {
  background: var(--ds-surface-1, #0d1526);
  border-color: var(--ds-accent, #3d8bff);
  box-shadow: 0 0 0 3px rgba(61, 139, 255, 0.15);
  color: var(--ds-text-primary, #f3f6fc);
}

.ds-content-page label {
  color: var(--ds-text-muted, #7c869c);
}

.ds-content-page .contact-icon {
  color: var(--ds-accent, #3d8bff);
  font-size: 32px;
}

/* Store-locations map embeds sit directly on the dark page */
.ds-content-page iframe {
  border-radius: var(--radius-md, 14px);
  border: 1px solid var(--ds-border-subtle, rgba(255, 255, 255, 0.1));
}

.ds-content-page .contact-details {
  color: var(--ds-text-secondary, #aab4c8);
}

@media only screen and (max-width: 767px) {
  .ds-content-page {
    margin: 20px auto 40px;
    padding: 28px 20px;
  }
}