/* MyFoods Customer UI Fixes */

:root {
  --mf-customer-bg: #F7F2EA;
  --mf-customer-surface: #FFFFFF;
  --mf-customer-text: #1F2328;
  --mf-customer-muted: #5F6864;
  --mf-customer-border: #E7DDD2;
  --mf-customer-green: #123D34;
  --mf-customer-green-2: #2F7D46;
  --mf-customer-focus: rgba(47, 125, 70, .18);
}

html.mf-customer-modal-open,
body.mf-customer-modal-open,
body.mf-mobile-nav-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

body,
button,
a,
input,
select,
textarea,
[role="button"] {
  -webkit-tap-highlight-color: rgba(47, 125, 70, .14);
}

/* Header and mobile navigation */
.topbar {
  min-height: 68px !important;
}

.topbar-inner {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}

.logo,
.site-logo,
.brand-logo {
  overflow: visible !important;
}

.logo img,
.brand img,
.site-logo img,
.brand-logo img,
.brand-logo-img,
.footer-brand-logo,
.footer-brand-logo img,
.site-footer .brand,
.site-footer .logo,
.site-footer .brand img,
footer .brand,
footer .logo,
footer .brand img,
footer .logo img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.cart-btn,
.mf-mobile-menu-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--mf-customer-green) !important;
}

.cart-btn:hover,
.mf-mobile-menu-btn:hover,
.cart-btn:focus-visible,
.mf-mobile-menu-btn:focus-visible {
  background: rgba(47, 125, 70, .10) !important;
  color: var(--mf-customer-green) !important;
}

.mf-mobile-menu-btn {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 40px;
  cursor: pointer;
}

.mf-mobile-menu-btn span,
.mf-mobile-menu-btn::before,
.mf-mobile-menu-btn::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
}

.mf-mobile-menu-btn span {
  position: relative;
}

.mf-mobile-menu-btn::before {
  transform: translateY(-6px);
  position: absolute;
}

.mf-mobile-menu-btn::after {
  transform: translateY(6px);
  position: absolute;
}

.mf-mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: none;
  background: rgba(15, 23, 42, .32);
  backdrop-filter: blur(2px);
  padding: calc(env(safe-area-inset-top, 0px) + 72px) 14px 14px;
}

.mf-mobile-nav-panel {
  margin-left: auto;
  max-width: 360px;
  width: min(100%, 360px);
  max-height: calc(100dvh - 92px);
  overflow-y: auto;
  background: var(--mf-customer-surface);
  border: 1px solid var(--mf-customer-border);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(31, 35, 40, .18);
  padding: 14px;
}

.mf-mobile-nav-title {
  color: var(--mf-customer-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 4px 4px 10px;
}

.mf-mobile-nav-list {
  display: grid;
  gap: 8px;
}

.mf-mobile-nav-list a,
.mf-mobile-nav-list button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--mf-customer-border);
  border-radius: 14px;
  background: #FFFFFF;
  color: var(--mf-customer-text);
  padding: 0 14px;
  text-decoration: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.mf-mobile-nav-list button[data-primary="true"] {
  background: var(--mf-customer-green);
  border-color: var(--mf-customer-green);
  color: #FFFFFF;
}

body.mf-mobile-nav-open .mf-mobile-nav-overlay {
  display: block;
}

@media (max-width: 920px) {
  .topbar {
    height: 62px !important;
    min-height: 62px !important;
  }

  .topbar-inner {
    min-height: 62px !important;
    height: 62px !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    display: flex !important;
    grid-template-columns: none !important;
  }

  .topbar-search {
    display: none !important;
  }

  .logo,
  .brand-logo {
    min-width: 132px !important;
    max-width: 150px !important;
    flex: 1 1 132px !important;
  }

  .topbar-actions {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
  }

  .mf-mobile-menu-btn {
    display: inline-flex !important;
  }

  #userArea {
    flex: 0 0 auto !important;
  }

  #userArea .btn-primary,
  #userArea .btn-outline.hide-mobile,
  #userArea .header-action-link.hide-mobile {
    display: none !important;
  }

  #userArea .user-chip {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
  }
}

/* Modal and drawer stacking */
.auth-overlay,
#authOverlay,
#addressOverlay {
  z-index: 5000 !important;
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  background: rgba(15, 23, 42, .45) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(22px, calc(env(safe-area-inset-bottom, 0px) + 18px)) !important;
  overscroll-behavior: contain !important;
}

.auth-overlay:not(.open),
.success-overlay:not(.open) {
  display: none !important;
}

.auth-overlay.open,
.success-overlay.open {
  display: flex !important;
}

#addressOverlay {
  z-index: 5200 !important;
}

.auth-overlay.open {
  pointer-events: auto !important;
}

.auth-card,
#addressOverlay .auth-card,
.customer-area-card {
  width: min(100%, 560px) !important;
  max-height: min(92dvh, 780px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  margin: auto 0 !important;
  scroll-padding-bottom: 120px !important;
}

#authForm,
#addressForm,
.auth-switch {
  padding-bottom: 4px !important;
}

.auth-card .btn-full,
#addressOverlay .btn,
.auth-card .checkbox-row {
  flex-shrink: 0 !important;
}

.auth-card .btn-primary,
.auth-card button.btn-primary,
.auth-card .btn.btn-primary {
  background: var(--mf-customer-green-2) !important;
  border-color: var(--mf-customer-green-2) !important;
  color: #FFFFFF !important;
}

.auth-card .btn-primary:hover,
.auth-card button.btn-primary:hover,
.auth-card .btn.btn-primary:hover {
  background: var(--mf-customer-green) !important;
  border-color: var(--mf-customer-green) !important;
}

.cart-backdrop {
  background: rgba(15, 23, 42, .36) !important;
  backdrop-filter: blur(2px) !important;
}

/* Neutral initial validation state */
.form-label,
.checkbox-row,
.account-card label,
.auth-card label {
  color: var(--mf-customer-text) !important;
}

.form-input,
input,
select,
textarea {
  color: var(--mf-customer-text) !important;
}

.form-input:invalid,
input:invalid,
textarea:invalid {
  border-color: var(--mf-customer-border) !important;
  box-shadow: none !important;
}

.form-input.mf-touched:invalid,
input.mf-touched:invalid,
textarea.mf-touched:invalid,
.form-input[aria-invalid="true"],
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #C83F2B !important;
  box-shadow: 0 0 0 3px rgba(200, 63, 43, .12) !important;
}

.security-alert,
.email-status,
.verification-status,
.account-info,
.compact-note {
  border: 1px solid rgba(47, 125, 70, .20) !important;
  border-left: 4px solid var(--mf-customer-green-2) !important;
  background: rgba(47, 125, 70, .075) !important;
  color: var(--mf-customer-text) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Guest content gating */
#myOrdersSection,
#accountHintSection,
.guest-hidden-account,
.guest-hidden-orders {
  display: none !important;
}

body.mf-customer-authenticated #myOrdersSection,
body.mf-customer-authenticated #accountHintSection,
body.mf-customer-authenticated .guest-hidden-account,
body.mf-customer-authenticated .guest-hidden-orders {
  display: block !important;
}

body:not(.mf-customer-authenticated) .customer-area-card,
body:not(.mf-customer-authenticated) .account-card,
body:not(.mf-customer-authenticated) .profile-card,
body:not(.mf-customer-authenticated) .security-card {
  scroll-margin-top: 80px;
}

/* User menu and customer tabs */
.user-menu {
  position: relative !important;
}

.user-menu-dropdown {
  right: 0 !important;
  left: auto !important;
  max-width: min(320px, calc(100vw - 24px)) !important;
  overflow: hidden !important;
}

.customer-area-nav {
  gap: 8px !important;
}

.customer-area-tab {
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border-radius: 14px !important;
  line-height: 1.2 !important;
}

@media (max-width: 760px) {
  .auth-overlay,
  #authOverlay,
  #addressOverlay {
    padding: 10px 12px max(18px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important;
  }

  .auth-card,
  #addressOverlay .auth-card,
  .customer-area-card {
    max-height: calc(100dvh - 22px) !important;
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .auth-logo {
    margin-bottom: 14px !important;
  }

  .auth-title {
    font-size: 24px !important;
    line-height: 1.1 !important;
  }

  .account-form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .checkbox-row {
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 0 !important;
  }

  .checkbox-row input {
    margin-top: 3px !important;
    flex: 0 0 auto !important;
  }

  .customer-area-body {
    display: block !important;
  }

  .customer-area-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--mf-customer-border) !important;
    padding: 12px !important;
    scrollbar-width: thin !important;
  }

  .customer-area-tab {
    flex: 0 0 auto !important;
    min-width: max-content !important;
    padding: 0 14px !important;
    white-space: nowrap !important;
  }
}

/* Cart and empty states */
.cart-drawer,
.cart-panel {
  max-height: 100dvh !important;
}

.cart-empty,
.empty-state,
.order-history-empty {
  min-height: auto !important;
  padding: 28px 20px !important;
  border: 1px solid var(--mf-customer-border) !important;
  border-style: solid !important;
  border-radius: 18px !important;
  background: #FFFFFF !important;
  color: var(--mf-customer-text) !important;
}

.order-history-empty::before,
.empty-state::before,
.account-card::before,
.restaurant-card::before {
  opacity: .22 !important;
}

.account-card,
.customer-panel-card,
.address-card,
.restaurant-card {
  background: #FFFFFF !important;
  border-color: var(--mf-customer-border) !important;
}

/* Footer readability and spacing */
footer,
.site-footer {
  background: #FBF8F2 !important;
  color: var(--mf-customer-text) !important;
}

footer h1,
footer h2,
footer h3,
footer h4,
footer .footer-title,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .footer-title {
  color: #27415A !important;
  opacity: 1 !important;
}

footer a,
.site-footer a {
  color: var(--mf-customer-green) !important;
}

.footer-note::before,
.footer-bottom::before,
.site-footer-bottom::before {
  content: "\00A9 MyFoods.ch" !important;
}

@media (min-width: 921px) {
  .hero {
    padding-top: clamp(44px, 5vw, 72px) !important;
  }
}