/* Telefoon: bovenbalk, onderste menu en demo-label in de huisstijl. Wordt als laatste geladen. */

/* Tip voor Shift-selectie (alleen zinvol met een toetsenbord). */
.picker-hint {
  margin: 0 0 var(--sv-space-2);
  color: var(--sv-text-3);
  font-size: var(--sv-fs-sm);
}
.picker-row {
  user-select: none;
}
@media (max-width: 760px) {
  .picker-hint {
    display: none !important;
  }
}

/* Iconen in de kiezers voor (gedeelde) mappen. */
.shared-chooser-item .chooser-ico {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--sv-gold);
}
.shared-chooser-item strong {
  display: inline-flex;
  color: var(--sv-text-3);
}

@media (max-width: 760px) {
  /* ---- Bovenbalk ---- */
  .topbar .mobile-top-actions {
    display: flex !important;
    gap: var(--sv-space-1) !important;
    margin-left: auto !important;
  }
  .mobile-top-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sv-control-h);
    height: var(--sv-control-h);
    padding: 0;
    border: 0;
    border-radius: var(--sv-radius);
    background: transparent;
    color: var(--sv-text);
    cursor: pointer;
  }
  .mobile-top-btn:active {
    background: var(--sv-surface-2);
    color: var(--sv-gold);
  }

  /* ---- Onderste menu ---- */
  #appShell .mobile-bottom-nav,
  .mobile-bottom-nav {
    grid-template-columns: repeat(4, 1fr) !important;
    height: auto !important;
    min-height: 64px;
    padding: var(--sv-space-1) var(--sv-space-1) calc(var(--sv-space-1) + env(safe-area-inset-bottom)) !important;
    background: var(--sv-bg) !important;
    border-top: 1px solid var(--sv-line) !important;
    backdrop-filter: none !important;
  }
  .mobile-bottom-nav button {
    gap: var(--sv-space-1) !important;
    padding: var(--sv-space-2) 2px !important;
    color: var(--sv-text-3) !important;
    border-radius: var(--sv-radius);
  }
  .mobile-bottom-nav button small {
    font-size: var(--sv-fs-xs) !important;
    font-weight: 500;
    line-height: 1.2;
    white-space: normal !important;
    text-align: center;
    overflow: visible !important;
  }
  .mobile-bottom-nav button:active,
  .mobile-bottom-nav button.is-active {
    color: var(--sv-gold) !important;
  }

  /* ---- Demo-label: smalle regel onderaan de bovenbalk, de inhoud schuift mee ---- */
  #appShell .topbar:has(.demo-mode-badge) {
    flex-wrap: wrap !important;
    height: auto !important;
    row-gap: 0 !important;
  }
  .topbar .demo-mode-badge {
    position: static !important;
    order: 10;
    flex: 0 0 100%;
    margin: 0 0 var(--sv-space-2) !important;
    padding: var(--sv-space-1) var(--sv-space-3) !important;
    border: 0 !important;
    border-radius: var(--sv-radius-sm) !important;
    background: var(--sv-surface-2) !important;
    color: var(--sv-text-2) !important;
    font-size: var(--sv-fs-xs) !important;
    text-align: center;
    box-shadow: none !important;
  }
}

/* Desktop: klein label in de bovenbalk, tussen zoekbalk en account. */
@media (min-width: 761px) {
  .topbar .demo-mode-badge {
    position: static !important;
    flex: 0 0 auto;
    margin: 0 var(--sv-space-2) !important;
    padding: var(--sv-space-1) var(--sv-space-3) !important;
    border: 1px solid var(--sv-line-strong) !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--sv-text-2) !important;
    font-size: var(--sv-fs-xs) !important;
    box-shadow: none !important;
    white-space: nowrap;
  }
  .topbar .profile,
  .topbar > .lang-switch {
    order: 11;
  }
}

/* ---- Taalknop (NL / EN / DE / ES) ---- */
.lang-switch {
  display: inline-flex;
  flex: 0 0 auto;
}
.lang-menu {
  position: relative;
}
.lang-menu > summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--sv-control-h);
  height: var(--sv-control-h);
  padding: 0 var(--sv-space-2);
  border: 1px solid var(--sv-line-strong);
  border-radius: 999px;
  color: var(--sv-text-2);
  font-size: var(--sv-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  list-style: none;
  cursor: pointer;
}
.lang-menu > summary::-webkit-details-marker {
  display: none;
}
.lang-menu[open] > summary,
.lang-menu > summary:hover {
  border-color: var(--sv-gold);
  color: var(--sv-gold);
}
.lang-options {
  position: absolute;
  z-index: 1000;
  top: calc(100% + var(--sv-space-2));
  right: 0;
  min-width: 180px;
  padding: var(--sv-space-1);
  background: var(--sv-surface);
  border: 1px solid var(--sv-line-strong);
  border-radius: var(--sv-radius-lg);
  box-shadow: 0 18px 40px #0000004d;
}
.lang-options button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--sv-space-3);
  min-height: var(--sv-control-h);
  padding: 0 var(--sv-space-3);
  border: 0;
  border-radius: var(--sv-radius);
  background: none;
  color: var(--sv-text);
  font: inherit;
  font-size: var(--sv-fs-md);
  text-align: left;
  cursor: pointer;
}
.lang-options button span {
  width: 2.2em;
  color: var(--sv-text-3);
  font-size: var(--sv-fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.lang-options button:hover {
  background: var(--sv-surface-2);
}
.lang-options button.is-on,
.lang-options button.is-on span {
  color: var(--sv-gold);
}
.topbar > .lang-switch {
  margin-right: var(--sv-space-2);
}
.landing-actions .lang-switch,
.public-info-nav .lang-switch {
  margin-right: var(--sv-space-2);
}
@media (max-width: 760px) {
  .topbar > .lang-switch,
  .topbar > .theme-toggle {
    /* Op mobiel staan taal- en licht/donker-knop al in .mobile-top-actions */
    display: none;
  }
  .mobile-top-actions .lang-menu > summary {
    min-width: 0;
    height: var(--sv-control-h);
    border: 0;
    padding: 0 var(--sv-space-2);
  }
}

/* ---- Trefwoorden per categorie ---- */
.category-head-actions,
.category-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-2);
}
.category-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-space-1);
  margin-top: var(--sv-space-2);
}
.category-keywords span {
  padding: 2px var(--sv-space-2);
  border: 1px solid var(--sv-line-strong);
  border-radius: 999px;
  color: var(--sv-text-2);
  font-size: var(--sv-fs-xs);
}
.category-page-item small.category-keywords-empty {
  margin-top: var(--sv-space-1);
  color: var(--sv-text-3);
  font-style: italic;
}
.field-hint {
  display: block;
  margin-top: var(--sv-space-1);
  color: var(--sv-gold);
  font-size: var(--sv-fs-xs);
}
.field-hint[hidden] {
  display: none;
}
.cat-suggest-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sv-space-3);
  padding: var(--sv-space-3) var(--sv-space-2);
  border-bottom: 1px solid var(--sv-line);
  cursor: pointer;
}
.cat-suggest-row input {
  margin-top: 3px;
}
.cat-suggest-row b {
  display: block;
}
.cat-suggest-row small {
  display: block;
  margin-top: 2px;
  color: var(--sv-text-2);
  font-size: var(--sv-fs-xs);
}
.cat-suggest-row strong {
  color: var(--sv-gold);
  font-weight: 600;
}
@media (max-width: 760px) {
  .category-page-item {
    flex-direction: column;
    align-items: flex-start;
  }
}
.cat-suggest-pick {
  margin: 0 var(--sv-space-1);
  padding: 2px var(--sv-space-2);
  border: 1px solid var(--sv-gold);
  border-radius: var(--sv-radius-sm);
  background: var(--sv-surface);
  color: var(--sv-text);
  font: inherit;
  font-size: var(--sv-fs-xs);
}
/* ---- Teamlid toevoegen via e-mailadres ---- */
.invite-email {
  display: grid;
  gap: var(--sv-space-2);
  margin: var(--sv-space-3) 0 var(--sv-space-4);
  padding-bottom: var(--sv-space-4);
  border-bottom: 1px solid var(--sv-line);
}
.invite-email label {
  font-weight: 600;
}
.invite-email-row {
  display: flex;
  gap: var(--sv-space-2);
}
.invite-email-row input {
  flex: 1;
  min-width: 0;
}
.invite-email-row select {
  flex: 0 0 auto;
  width: auto;
}
.invite-or {
  margin: 0 0 var(--sv-space-2);
}
@media (max-width: 760px) {
  .invite-email-row {
    flex-wrap: wrap;
  }
  .invite-email-row input {
    flex-basis: 100%;
  }
  .invite-email-row select,
  .invite-email-row .btn {
    flex: 1;
  }
}

/* ---- Import zonder AI: extra controleren ---- */
.batch-chip.batch-chip-warn {
  border-color: var(--sv-gold) !important;
  color: var(--sv-gold) !important;
}
.batch-warning {
  color: var(--sv-gold);
}

/* ---- Recepten controleren na import ---- */
.batch-photo {
  display: block;
  width: 100%;
  max-height: 320px;
  margin: var(--sv-space-3) 0;
  object-fit: contain;
  border-radius: var(--sv-radius);
  background: var(--sv-surface-2);
}
.batch-unclear {
  margin: var(--sv-space-2) 0 var(--sv-space-3);
  padding: var(--sv-space-3) var(--sv-space-4);
  border: 1px solid var(--sv-gold);
  border-radius: var(--sv-radius);
  background: color-mix(in srgb, var(--sv-gold) 12%, transparent);
  font-size: var(--sv-fs-sm);
}
.batch-unclear ul {
  margin: var(--sv-space-1) 0 0;
  padding-left: 1.2em;
}
/* Rustig, geen waarschuwing: de chef ziet wat Savour aan tikfouten heeft verbeterd. */
.batch-fixes {
  display: block;
  margin-top: var(--sv-space-1);
  color: color-mix(in srgb, var(--sv-text) 65%, transparent);
}
.batch-transcript {
  margin: var(--sv-space-2) 0;
  font-size: var(--sv-fs-sm);
}
.batch-transcript summary {
  cursor: pointer;
  color: var(--sv-gold);
}
.batch-transcript pre {
  margin: var(--sv-space-2) 0 var(--sv-space-1);
  padding: var(--sv-space-3);
  border-radius: var(--sv-radius);
  background: var(--sv-surface-2);
  color: var(--sv-text);
  font-family: var(--sv-font);
  white-space: pre-wrap;
}
.batch-rotate {
  margin: calc(var(--sv-space-2) * -1) 0 var(--sv-space-3);
}

/* Startpagina (uitgelogd) op de telefoon: logo, taal, Inloggen en Account aanmaken passen op één regel. */
@media (max-width: 480px) {
  .landing-top {
    gap: 6px;
    padding: 14px 12px;
  }
  .landing-actions .lang-switch {
    margin-right: 2px;
  }
  .landing-logo-wordmark {
    width: auto;
    flex: 0 0 auto;
  }
  .landing-logo-wordmark .sv-wordmark {
    font-size: 15px;
    letter-spacing: 0.22em;
  }
  .landing-actions {
    gap: 4px;
    flex-shrink: 0;
  }
  /* foundation.css zet knoppen met !important; hier bewust kleiner voor deze ene balk. */
  #landingView .landing-actions .btn {
    padding: 0 9px !important;
    min-height: 34px !important;
    font-size: 12px !important;
    white-space: nowrap;
  }
}

/* Startpagina: openingstekst en de telefoon (zo ziet Savour eruit) direct naast elkaar in beeld. */
.landing-hero.landing-hero-v55 {
  max-width: 1180px !important;
}
/* "Overal beschikbaar" staat compact onder de demo-knop, in hetzelfde eerste beeld. */
.landing-hero-platform {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--sv-line);
}
.landing-hero-platform h2 {
  margin: 6px 0 8px;
  font-family: var(--sv-font-display);
  font-size: 22px;
  line-height: 1.2;
}
.landing-hero.landing-hero-v55 .landing-hero-platform p {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.6;
}
.landing-hero-platform .landing-platform-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  margin-top: 12px;
  font-size: 13px;
}
/* Startpagina (2026-10-22): bewijsregel, twee knoppen naast elkaar, vier blokken en vragen. */
.landing-hero.landing-hero-v55 .landing-proof {
  color: var(--sv-gold);
  font-size: 14px;
  margin-top: 4px;
}
.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}
.landing-hero-actions .btn.gold {
  padding: 14px 22px;
  font-size: 16px;
}
.landing-hero-actions .demo-cta {
  min-width: 0;
  padding: 10px 16px;
}
.landing-hero-actions .demo-cta strong {
  font-size: 16px;
}
.landing-story-grid-v55.landing-story-grid-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.landing-faq {
  max-width: 820px;
}
.landing-faq h2 {
  font-family: var(--sv-font-display);
  font-size: var(--sv-fs-2xl);
  margin: 0 0 18px;
}
.landing-faq article {
  padding: 16px 0;
  border-top: 1px solid var(--sv-line);
}
.landing-faq h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  color: var(--sv-text);
}
.landing-faq p {
  margin: 0;
  color: var(--sv-text-2);
  line-height: 1.65;
}
@media (max-width: 899px) {
  .landing-story-grid-v55.landing-story-grid-4 {
    grid-template-columns: 1fr;
  }
  .landing-hero-actions > * {
    flex: 1 1 100%;
  }
}
.landing-hero-phone {
  display: flex;
  justify-content: center;
}
@media (min-width: 900px) {
  .landing-hero.landing-hero-v55 {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: 64px;
    padding-top: 56px !important;
    padding-bottom: 48px !important;
  }
  .landing-hero-v55 h1 {
    font-size: clamp(40px, 4.4vw, 62px);
    margin: 10px 0 18px;
  }
  .landing-hero-v55 p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 10px;
  }
  .landing-hero-v55 .landing-demo-cta {
    margin-top: 14px;
  }
  .landing-hero-v55 .landing-hero-phone .landing-phone {
    width: 280px;
    height: 560px;
  }
}
@media (max-width: 899px) {
  .landing-hero-phone {
    margin-top: 8px;
  }
}

/* iPhone zoomt in op invulvelden met tekst kleiner dan 16px (bijv. bij inloggen) en blijft dan ingezoomd.
   Met 16px gebeurt dat niet. */
@media (max-width: 760px) {
  input:not([type='checkbox']):not([type='radio']):not([type='range']),
  select,
  textarea,
  body
    :is(#appShell, .modal, .public-shell, #landingView, #adminShell)
    :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea) {
    font-size: 16px !important;
  }
}

/* Knoppen bovenaan een (gedeelde) map: nooit smaller dan hun tekst. Op een breed scherm gaat de rij
   desnoods naar een tweede regel; op de telefoon blijft hij horizontaal scrollen. */
.shared-map-actions .compact-action,
.folder-map-actions .compact-action {
  flex-shrink: 0 !important;
  white-space: nowrap;
}
@media (min-width: 761px) {
  .shared-main-head .shared-map-actions,
  .folder-map-actions {
    flex-wrap: wrap !important;
    justify-content: flex-end;
  }
}