/* Public customer/checkout presentation only. Never change layout or validation borders. */
html[data-nova-public] { --nova-theme-forms-ready: 1; }
html[data-nova-public][data-theme="dark"] body:is([data-layout="mobile"], [data-layout="portrait"], [data-layout="desktop"])
:is(#customerDetailsModal, #customerLookupModal) :is(.customer-details-sheet, .customer-lookup-sheet) {
  background: var(--site-canvas) !important; color: var(--site-ink); border-color: var(--site-line);
  box-shadow: 0 16px 48px #0006;
}
html[data-nova-public][data-theme="dark"] body #customerDetailsModal
:is(.touch-customer-card, .touch-customer-contact, .touch-customer-footer, .customer-details-summary, .customer-details-date-row) {
  background: var(--site-surface) !important; color: var(--site-ink) !important; border-color: var(--site-line);
}
html[data-nova-public][data-theme="dark"] body #customerDetailsModal
:is(.touch-customer-intro, .customer-details-order-toggle, .customer-details-payment-toggle, .touch-customer-timing) {
  background: var(--site-raised) !important; color: var(--site-muted);
}
html[data-nova-public][data-theme="dark"] body #customerDetailsModal
:is(.customer-details-order-option, .customer-details-payment-option, .touch-customer-timing button) {
  background: transparent !important; color: var(--site-muted) !important; box-shadow: none !important;
}
html[data-nova-public][data-theme="dark"] body #customerDetailsModal
:is(.customer-details-order-option.is-active, .customer-details-payment-option.is-active, .touch-customer-timing button[aria-pressed="true"]) {
  background: var(--site-accent-soft) !important; color: var(--site-accent-text) !important;
  box-shadow: inset 0 0 0 1px var(--site-accent-text) !important;
}
html[data-nova-public][data-theme="dark"] body #customerDetailsModal
:is(.touch-customer-time-button, .order-date-inline-trigger, .customer-details-close) {
  background: var(--site-surface) !important; color: var(--site-accent-text) !important; border-color: var(--site-line);
}
html[data-nova-public][data-theme="dark"] body #customerDetailsModal
:is(.touch-customer-time-status, .touch-customer-step, .customer-details-summary-line, .customer-details-summary-contact, .touch-customer-total) {
  color: var(--site-muted);
}
html[data-nova-public][data-theme="dark"] body #customerDetailsModal
:is(.customer-details-title, .touch-customer-contact-title, .touch-customer-card h3, #touchCustomerTotal) { color: var(--site-ink) !important; }
/* Replace the legacy white gradient and explicit WebKit text fill, not the border. */
html[data-nova-public][data-theme="dark"] body :is(#customerDetailsModal, #customerLookupModal)
:is(#customerDetailsFieldsMount, #customerIdentityBlock, #customerLookupBlock) :is(input, select, textarea),
html[data-nova-public][data-theme="dark"] body #customerLookupModal input {
  background: var(--site-surface) !important; color: var(--site-ink) !important;
  -webkit-text-fill-color: var(--site-ink) !important; box-shadow: none !important;
}
html[data-nova-public][data-theme="dark"] body :is(#customerDetailsModal, #customerLookupModal)
:is(input, textarea)::placeholder { color: var(--site-muted) !important; -webkit-text-fill-color: var(--site-muted) !important; }
html[data-nova-public][data-theme="dark"] body :is(#customerDetailsModal, #customerLookupModal)
:is(button, input, select, textarea):focus-visible { outline: 2px solid var(--site-focus) !important; outline-offset: 2px; }
html[data-nova-public][data-theme="dark"] body #customerDetailsModal
:is(.customer-details-order-option, .customer-details-payment-option, .touch-customer-timing button, .touch-customer-time-button):disabled {
  background: var(--site-raised) !important; color: var(--site-muted) !important; opacity: .5; box-shadow: none !important;
}
html[data-nova-public][data-theme="dark"] body #customerDetailsModal :is(.customer-details-summary-edit, .touch-profile-lookup) {
  color: var(--site-accent-text); background: transparent;
}
html[data-nova-public][data-theme="dark"] body #customerLookupModal :is(.customer-details-close, .customer-lookup-panel) {
  background: var(--site-surface); color: var(--site-ink); border-color: var(--site-line);
}
html[data-nova-public][data-theme="dark"] body #customerLookupModal .customer-lookup-status { color: var(--site-muted); }
html[data-nova-public][data-theme="dark"] body #customerLookupModal .customer-lookup-status.is-error { color: var(--site-accent-text); }
html[data-nova-public][data-theme="dark"] body #customerLookupModal .customer-lookup-status.is-success { color: #a6d6a4; }
html[data-nova-public][data-theme="dark"] body .checkout-order-time-menu {
  background: var(--site-surface) !important; color: var(--site-ink); border-color: var(--site-line);
}
html[data-nova-public][data-theme="dark"] body .checkout-order-time-option {
  background: transparent !important; color: var(--site-ink) !important;
}
html[data-nova-public][data-theme="dark"] body .checkout-order-time-option.is-active {
  background: var(--site-accent-soft) !important; color: var(--site-accent-text) !important;
}
html[data-nova-public][data-theme="dark"] body .checkout-order-time-option:disabled { color: var(--site-muted) !important; opacity: .5; }
html[data-nova-public][data-theme="dark"] body #customerDetailsModal
:is(.customer-details-date-label, .order-date-inline-label, .order-date-inline-icon, .customer-details-order-confirmation, .customer-details-order-confirmation strong) {
  color: var(--site-muted) !important; -webkit-text-fill-color: var(--site-muted) !important;
}
html[data-nova-public][data-theme="dark"] body .checkout-order-time-sheet-title { color: var(--site-ink) !important; }
/* Browser autofill on the customer forms, both themes (owner report 2026-10-16: yellow fields on iPhone, light text
   on yellow in dark mode). The browser's own autofill background cannot be overridden, so an inset shadow covers it
   in the field's own colour and the text fill is set again. The rule sits in a cascade layer on purpose: a layered
   !important outranks every unlayered !important, so the many legacy `box-shadow: none !important` field rules
   (each checkout mode has its own) cannot cancel it, whatever their specificity. Focus stays visible: these forms
   mark focus with an outline, not a shadow. */
html[data-nova-public] body { --nova-autofill-field: #fff; --nova-autofill-ink: #242a26; }
html[data-nova-public][data-theme="dark"] body { --nova-autofill-field: var(--site-surface); --nova-autofill-ink: var(--site-ink); }
html[data-nova-public] body #desktopProfileDialog { --nova-autofill-field: var(--site-canvas, #f7f6f2); }
@layer nova-autofill {
  html[data-nova-public] body :is(#customerDetailsModal, #customerLookupModal, #desktopProfileDialog)
  :is(input, select, textarea):is(:-webkit-autofill, :autofill) {
    box-shadow: 0 0 0 1000px var(--nova-autofill-field) inset !important;
    -webkit-text-fill-color: var(--nova-autofill-ink) !important; caret-color: var(--nova-autofill-ink) !important;
  }
}
/* Owner report 2026-10-27: on desktop the customer lookup hint was dark blue on the dark panel (1.1:1), and the status
   line kept its light-mode red. Colour only, desktop only, wherever the one lookup panel is shown (checkout
   "Jouw gegevens", customer details modal, favorites dialog); the touch lookup sheet keeps its own rules. */
html[data-nova-public][data-theme="dark"] body[data-layout="desktop"] #customerLookupPanel :is(.customer-lookup-copy, .customer-lookup-status) {
  color: var(--site-muted);
}
html[data-nova-public][data-theme="dark"] body[data-layout="desktop"] #customerLookupPanel .customer-lookup-status.is-error { color: var(--site-accent-text); }
/* Light: the "not found" red reached 4.3:1 on the modal's grey panel; one shade darker reads at 4.5:1 or more. */
html[data-nova-public] body[data-layout="desktop"] #customerLookupPanel .customer-lookup-status.is-error { color: #9a1c13; }