/* Fixed, theme-independent look - deliberately does not adapt to whichever
   of the kodelig.no style-switcher themes a visitor has picked. Matches the
   visual language of the site's other persistent, theme-independent chrome
   (the style switcher itself, the privacy modal): near-black panels, warm
   off-white text, pill/rounded shapes, soft dark shadows, system font. */

:root {
  --bg: #0e0f12;
  --panel: #16171c;
  --text: #f2f2f5;
  --muted: #9a9ba3;
  --accent: #E8A855;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.14);
}

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--text);
  margin: 0;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 20px 80px;
}

.head { text-align: center; margin-bottom: 28px; }
.head .mark { margin-bottom: 14px; }
.head h1 { font-size: 1.6rem; margin: 0 0 10px; letter-spacing: -0.01em; }
.head .lede { color: var(--muted); margin: 0; max-width: 46ch; margin-inline: auto; }

/* Mobile: the whole form is one card, same look the old .card class gave
   it - the 3-column layout below only applies from 700px up. */
.columns {
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  padding: 28px;
}
.card {
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
  padding: 28px;
}

/* Numbered column headers ("1 Bedriften", "2 Kontakt og nettside", ...)
   are a desktop-only device for splitting the form into three groups -
   on a single mobile column there's nothing to label, so they're hidden
   here and only switched on inside the desktop media query. */
.col-head { display: none; }

.field { margin-bottom: 18px; }
.field:last-of-type { margin-bottom: 0; }

label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 6px; }
.req { color: var(--accent); }
.hint { color: var(--muted); font-weight: 400; font-size: 0.85rem; }
.hint-static, .note { margin: 6px 0 0; }

input, textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--text);
  padding: 11px 13px;
  font: inherit;
  font-size: 16px; /* prevents iOS auto-zoom on focus */
}
input:focus, textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border-strong));
}
input[type="file"] { padding: 8px 10px; }

textarea { resize: vertical; }

.lookup-status { min-height: 1.1em; font-size: 0.85rem; color: var(--muted); margin: 6px 0 0; }
.lookup-status.found { color: #7fd996; }
.lookup-status.not-found { color: var(--muted); }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: var(--accent);
  color: #16171c;
  border: none;
  border-radius: 999px;
  padding: 14px 20px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  margin-top: 22px;
  transition: transform 120ms ease;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:disabled { opacity: 0.6; cursor: default; transform: none; }

.fineprint { color: var(--muted); font-size: 0.8rem; text-align: center; margin: 14px 0 0; }
/* Two variants of the same footer note - short for the desktop footer bar
   (matches the reference layout), the original longer explanation kept
   verbatim for mobile so that experience doesn't change at all. Toggled
   purely by CSS per breakpoint, never both visible at once. */
.fineprint-desktop { display: none; }

.error {
  color: #ff8a80;
  background: rgba(255,80,60,0.1);
  border: 1px solid rgba(255,80,60,0.3);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 0.9rem;
  margin-top: 16px;
}

/* Two fields sharing one row (Logo / Referansebilder) instead of stacking -
   a deliberate vertical-space saver so the desktop 3-column form still fits
   a full screen height with no scrolling once the style picker is added
   below it (see the .style-grid/.style-card rules right after this). */
.field-row {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
}
.field-row .field {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* Style picker: pure-CSS mood swatches (no images) representing each
   curated direction from src/styleDirections.js - a color/type "signal"
   rather than a promise of the exact final layout. Column 3 has room to
   give this real presence now that the "Fortell kort..." description
   field lives in column 2 instead (moved there to balance column
   heights) - see the 3-column override below for the desktop grid. */
.style-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.style-card {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
  transition: border-color 120ms ease, background 120ms ease;
}
.style-card:hover { background: rgba(255,255,255,0.07); }
.style-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,0.04));
}
.style-label { font-size: 0.78rem; font-weight: 600; line-height: 1.2; }

.style-swatch {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  /* No align-items/justify-content here: the <i> color-bar children rely
     on the default 'stretch' to fill the swatch's full height - centering
     here would collapse them to zero height. Only the emoji-only
     'surprise' swatch below needs centering, so it sets that itself. */
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.style-swatch i { flex: 1; display: block; font-style: normal; }

.style-swatch--surprise {
  background: linear-gradient(135deg, #E8A855, #7c5cff, #2fb8c9);
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.style-swatch--klassisk i:nth-child(1) { background: #1b2a3a; }
.style-swatch--klassisk i:nth-child(2) { background: #2f4a3a; }
.style-swatch--klassisk i:nth-child(3) { background: #efe6d8; }

.style-swatch--varm i:nth-child(1) { background: #c9713f; }
.style-swatch--varm i:nth-child(2) { background: #f3e3c9; }
.style-swatch--varm i:nth-child(3) { background: #7c8a54; }

.style-swatch--moderne i:nth-child(1) { background: #111214; }
.style-swatch--moderne i:nth-child(2) { background: #ffffff; }
.style-swatch--moderne i:nth-child(3) { background: #2f6fed; }

.style-swatch--editorial i:nth-child(1) { background: #f5f2ea; }
.style-swatch--editorial i:nth-child(2) { background: #141414; }
.style-swatch--editorial i:nth-child(3) { background: #b23a3a; }

.style-swatch--rolig i:nth-child(1) { background: #eceeec; }
.style-swatch--rolig i:nth-child(2) { background: #c9cfc9; }
.style-swatch--rolig i:nth-child(3) { background: #8a9a8a; }

.hidden { display: none !important; }

#status-view { text-align: center; }
.status-icon { font-size: 2.2rem; margin-bottom: 10px; }
#status-title { margin: 0 0 8px; font-size: 1.3rem; }
#status-body { margin: 0; }
#status-link { margin-top: 20px; }

/* ============================================================
   Desktop (>=700px): the demo modal that embeds this page is only ever
   this wide once it's shown as the roomy desktop layout - on a real
   phone the modal is full-device-width, always well under this, so
   everything above this point (mobile) is untouched.

   Matches a reference layout: one horizontal header row (logo beside the
   title/lede, not stacked above it), the form split into three equal
   symmetric card columns ("Bedriften" / "Kontakt og nettside" / "Innhold
   og uttrykk", each with a numbered badge), and a footer row with the
   fine print on the left and the submit button on the right - using the
   width the wide modal now has instead of leaving it empty around a
   narrow centered column.
   ============================================================ */
@media (min-width: 700px) {
  .wrap {
    max-width: 1120px;
    /* Deliberately tighter than a typical 32px top/bottom - this page is
       loaded in a fixed ~95vh iframe (see kodelig-demo-builder-trigger.php)
       with no fallback scroll on desktop, so vertical rhythm here is
       chosen to leave real margin at smaller common laptop heights
       (1366x768), not just to look nice on a tall screen. */
    padding: 20px 24px;
  }

  .head {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    margin-bottom: 16px;
  }
  .head .mark { margin-bottom: 0; flex-shrink: 0; }
  .head h1 { font-size: 1.5rem; margin-bottom: 4px; }
  .head .lede { margin-inline: 0; max-width: none; }

  .columns {
    background: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: start;
  }

  .col {
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 16px;
  }

  /* The grid cell for column 3: card + button as one flex column, so they
     combine to (roughly) the same natural height as columns 1 and 2,
     while the button itself stays visually outside/below the card's own
     bordered box - NOT one shared grid row for the button (that row's
     height would be forced up by whichever OTHER column is tallest,
     pushing the button far below column 3's own card - the bug in the
     previous version of this layout). */
  .col3-stack { display: flex; flex-direction: column; gap: 20px; }
  .btn-col3 { margin-top: 0; }

  .col-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .col-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #16171c;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
  }
  .col-head h2 { margin: 0; font-size: 1.05rem; }

  .col .field { margin-bottom: 12px; }
  .col .field-row { margin-bottom: 12px; }

  /* Kept at 2 columns (3 rows) rather than squeezed to 3 - column 3 no
     longer needs to be the shortest column now that the description field
     moved to column 2, so the picker gets to be the visually prominent
     "Innhold og uttrykk" element the third column is named for, and column
     heights end up close to matching across all three. */

  #formError { grid-column: 1 / -1; }

  /* Just the fine-print line now - the button moved into column 3 (see
     .col-submit-host above), so this is no longer a flex row balancing a
     button against text, just one centered caption under the columns. */
  .form-footer {
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  .fineprint-mobile { display: none; }
  .fineprint-desktop { display: block; margin: 0; text-align: center; }
}