/* ------------------------------------------------------------------
   DeCODE overrides for the Infinity Safe Configurator (/customise/)
   Loaded AFTER the Vite bundle CSS from index.html.
   If the app is ever rebuilt from Lovable, re-add the <link> to this
   file in the new index.html (same as the GTM / GA4 snippets).
   2026-09-17
   ------------------------------------------------------------------ */

/* 1. One text colour everywhere.
      The bundle sets --muted-foreground to a dim brown-grey (30 14% 48%)
      which is what made body copy look faint against the dark background.
      Bring it up to the heading cream so all type reads as one colour. */
:root {
  --muted-foreground: 36 33% 90%;
}

/* 2. Body copy a touch bigger so it holds its own next to the headings.
      Only the description / spec paragraphs, not the tiny uppercase labels. */
p.text-xs.leading-relaxed,
p.text-xs.mt-2,
p.text-xs.mt-3 {
  font-size: 0.8125rem;   /* 13px, was 12px */
  line-height: 1.55;
}

/* Placeholder text in the contact form was almost invisible */
input::placeholder,
textarea::placeholder {
  color: hsl(36 20% 70%);
  opacity: 1;
}

/* ------------------------------------------------------------------
   3. Mobile / tablet
   ------------------------------------------------------------------ */

/* Series step: the bundle forces a 2-column grid at every width and
   each card is a fixed 192x256 image beside the text. On a phone that
   leaves ~90px for the text, which is then clipped by overflow:hidden,
   so the name, description and price never show. Go to one column
   below 1024px, and stack image over text below 640px. */
@media (max-width: 1023px) {
  .grid.grid-cols-2:has(> button.flex-row) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 639px) {
  button.flex-row.overflow-hidden.border {
    flex-direction: column;
    height: auto !important;
  }
  button.flex-row.overflow-hidden.border > div:first-child {
    width: 100% !important;
    height: 210px !important;
    background: hsl(var(--background));
  }
  button.flex-row.overflow-hidden.border > div:first-child img {
    object-fit: contain;
  }
  button.flex-row.overflow-hidden.border > div:last-child {
    padding: 1rem 1.125rem 1.125rem;
  }
  button.flex-row.overflow-hidden.border > div:last-child > p:last-child {
    margin-top: 0.875rem;
  }
}

/* Sticky footer: on narrow screens the Previous and Next buttons ran
   into each other and the Next label was clipped. Let Next take the
   remaining width and wrap if it has to. */
@media (max-width: 639px) {
  footer > div {
    gap: 0.75rem;
  }
  footer > div > button:first-child {
    flex: 0 0 auto;
    padding-left: 0.875rem;
    padding-right: 0.875rem;
  }
  footer .relative.group {
    flex: 1 1 auto;
    min-width: 0;
  }
  footer .relative.group > button {
    width: 100%;
    height: auto;
    min-height: 2.75rem;
    white-space: normal;
    line-height: 1.2;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
  }
  /* The page-level intro text and step headings get a little more room */
  h1.font-heading, h2.font-heading {
    line-height: 1.15;
  }
}