/* Customer account entry points use FOOD's shared theme tokens.
   Official provider artwork is copied unchanged from JAWA.MENU at
   996d775b3054a130ed6b85e8b37339d577ff009d, app/assets/images/social/. */
.customer-start { max-width: 480px; padding-block: var(--space-12); }
.customer-start-card { padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
.marketplace .customer-start h1 { margin: 0 0 var(--space-8); font-size: var(--type-total); line-height: var(--type-total-line); letter-spacing: -.025em; }
.customer-provider-options { display: grid; gap: var(--space-3); }
.customer-provider-form, .customer-email-form, .customer-guest-form { margin: 0; }
.customer-provider, .customer-guest-form button, .customer-email-form input[type="submit"] { width: 100%; min-height: 48px; }
.customer-provider { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); font: inherit; font-weight: 600; cursor: pointer; }
.customer-provider-google { background: var(--color-on-brand-fixed); }
.customer-provider-google img { display: block; width: 100%; max-width: 240px; height: auto; }
.customer-provider-apple { background: var(--color-on-action); color: var(--color-action); }
.customer-provider-apple img { display: block; width: 20px; height: 24px; filter: brightness(0); }
.customer-start-or { display: flex; align-items: center; gap: var(--space-4); margin-block: var(--space-6); color: var(--color-text-muted); font-size: var(--type-body); }
.customer-start-or::before, .customer-start-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.customer-email-form { display: grid; gap: var(--space-3); }
.customer-email-form label { font-size: var(--type-body); font-weight: 600; }
.customer-email-form input[type="email"] { width: 100%; min-width: 0; min-height: 48px; padding: var(--space-3); border: 1px solid var(--color-border-control); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font-size: var(--type-body-lg); }
.customer-email-form input[type="email"]::placeholder { color: var(--color-text-muted); opacity: 1; }
.customer-start-legal { margin: var(--space-6) 0 0; color: var(--color-text-muted); font-size: var(--type-label); line-height: var(--type-label-line); overflow-wrap: anywhere; }
.customer-start-legal a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.customer-start-alert { margin: 0 0 var(--space-6); padding: var(--space-4); border: 1px solid var(--color-danger); border-radius: var(--radius-control); background: var(--color-danger-bg); color: var(--color-danger); overflow-wrap: anywhere; }
.customer-account-menu { position: relative; min-width: 0; }
.customer-account-toggle { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding-inline: var(--space-3); border-radius: var(--radius-control); font-size: var(--type-body); font-weight: 600; cursor: pointer; list-style: none; }
.customer-account-toggle::-webkit-details-marker { display: none; }
.customer-account-name { max-width: 9rem; overflow-wrap: anywhere; }
.customer-account-panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: var(--layer-sheet); width: max-content; min-width: 160px; max-width: calc(100vw - 32px); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-popover); }
.customer-account-panel form { margin: 0; }
.customer-account-panel button { width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.site-header .customer-account-panel :focus-visible { outline-color: var(--color-focus); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .customer-provider-apple img { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] .customer-provider-apple img { filter: brightness(0) invert(1); }
@media (max-width: 520px) {
  .customer-start { padding-block: var(--space-8); }
  .customer-start-card { padding: var(--space-6); }
  .site-header { padding-inline: var(--space-4); gap: var(--space-1); }
  .brand-mark { width: 4.5rem; height: 1.5rem; }
  .brand-mark img { height: 6.6667rem; }
  .brand-suffix { display: none; }
  .customer-account-toggle { padding-inline: var(--space-1); }
  .customer-account-toggle > .ui-icon { display: none; }
  .customer-account-name { max-width: var(--space-16); font-size: var(--type-label); line-height: var(--type-label-line); }
}