:root,
html[data-theme='light'] {
  color-scheme: light;
  --color-primary: #F4A91E;
  --color-primary-hover: #E09A15;
  --color-primary-soft: #FCEBC8;
  --color-accent: #C2452B;
  --color-accent-strong: #591A11;
  --color-accent-soft: #F7E0D8;
  --color-deep: #591A11;
  --color-deep-ink: #FBEAD9;
  --color-bg: #FBF5EC;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FFFBF3;
  --color-surface-strong: #F4E9D8;
  --color-text-primary: #2C1C12;
  --color-text-secondary: #8C7B6B;
  --color-text-muted: #B7A795;
  --color-border: #ECDFCC;
  --color-border-strong: #DDD0BA;
  --color-success: #2E9E4F;
  --color-success-soft: #E2F2E5;
  --color-warning: #F59E0B;
  --color-error: #DC2626;
  --color-info: #2563EB;
  --color-on-primary: #3A2400;
  --color-on-accent: #FBEAD9;
  --color-star: #F4A91E;
  --app-canvas: #EFE4D2;
  --shadow-soft: 0 1px 2px rgba(60, 40, 20, 0.04), 0 6px 18px rgba(60, 40, 20, 0.04);
  --shadow-card: 0 1px 2px rgba(60, 40, 20, 0.04), 0 6px 18px rgba(60, 40, 20, 0.06);
  --shadow-elevated: 0 8px 32px rgba(60, 40, 20, 0.14);
  --focus-ring: 0 0 0 3px rgba(244, 169, 30, 0.32);
  --font-head: 'Poppins', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --color-primary: #FFC928;
  --color-primary-hover: #F5B800;
  --color-accent: #D99A3D;
  --color-accent-strong: #F0C679;
  --color-accent-soft: #6B1F1A;
  --color-bg: #120E0B;
  --color-surface: #1E1713;
  --color-surface-soft: #2A1F1A;
  --color-surface-strong: #362720;
  --color-text-primary: #FFF7E6;
  --color-text-secondary: #D8C7AD;
  --color-text-muted: #A8967D;
  --color-border: #3B2C23;
  --color-border-strong: #574133;
  --color-success: #22A06B;
  --color-warning: #F59E0B;
  --color-error: #F87171;
  --color-info: #60A5FA;
  --color-on-primary: #2E180C;
  --color-on-accent: #FFF7E6;
  --app-canvas: #0E0907;
  --shadow-soft: 0 10px 24px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 16px 34px rgba(0, 0, 0, 0.32);
  --shadow-elevated: 0 32px 60px rgba(0, 0, 0, 0.42);
  --focus-ring: 0 0 0 3px rgba(255, 201, 40, 0.28);
}

body,
.auth-page,
.screen,
.main-frame,
.home-screen,
.home-screen-wrapper,
.checkout-screen,
.checkout-content,
.my-account,
.my-account-scroll {
  background-color: transparent !important;
  color: var(--color-text-primary);
}

.screen,
.home-screen,
.checkout-screen,
.my-account {
  color: var(--color-text-primary);
}

.auth-content,
.checkout-section,
.menu-detail-content,
.wallet-card,
.information,
.preferences,
.content,
.input-fill,
.input-fill2 {
  color: inherit;
}

.auth-title,
.checkout-page-title,
.section-title,
.food-name,
.hot-deal-name,
.menu-item-title,
.general,
.preferencess,
.jenny-wilson,
.notifications,
.security2,
.language2,
.legal-and-policies,
.help-support {
  color: var(--color-text-primary) !important;
}

.auth-subtitle,
.food-delivery-info,
.rating-count,
.summary-label,
.wilson-09-gail-com,
.location-address,
.location-label,
.text-muted,
.menu-item-description,
.input-fill p,
.preferences p {
  color: var(--color-text-secondary) !important;
}

.divider span,
.section-link,
.see-all-link,
.edit-link,
.summary-note,
.signup-text,
.signin-text {
  color: var(--color-text-muted) !important;
}

.signup-link,
.signin-link,
.terms-link,
.section-link:hover,
.see-all-link:hover,
.edit-link:hover {
  color: var(--color-accent) !important;
}

.home-header,
.checkout-header,
.notification-header,
.menu-detail-header,
.profile-header-block {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
}

.header-title,
.checkout-page-title {
  color: var(--color-text-primary) !important;
}

.back-btn svg {
  color: var(--color-text-primary) !important;
  stroke: currentColor;
}

.search-bar,
.food-card,
.hot-deal-card,
.ad-banner,
.item-list,
.item,
.profile-modal,
.coupon-card,
.wallet-strip,
.category-list .category-btn,
.search-input,
.social-buttons .btn-social,
.btn-social,
.password-wrapper,
.form-control,
.form-select,
.input-group-text,
.partner-banner-card,
.timeline-card,
.notification-card {
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
  box-shadow: var(--shadow-soft);
}

.food-card,
.hot-deal-card,
.ad-banner,
.item-list,
.item,
.profile-header-block,
.btn-social,
.form-control,
.input-group-text,
.search-bar,
.profile-modal {
  border-radius: 20px !important;
}

.food-card-image,
.hot-deal-image,
.partner-banner-image {
  background: var(--color-surface-soft) !important;
}

.food-card-image img,
.hot-deal-image img,
.partner-banner-image img,
.menu-detail-image img,
.ad-image img {
  object-fit: cover !important;
  aspect-ratio: 4 / 3;
}

.food-price,
.hot-deal-price,
.menu-price,
.price,
.rating-value {
  color: var(--color-accent) !important;
}

.discount-badge,
.nav-badge,
.notification-badge,
.category-btn.active,
.driver-badge,
.rating-driver-badge,
.address-label {
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface)) !important;
  color: var(--color-accent-strong) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 60%, var(--color-border)) !important;
  font-weight: 700;
}

.btn-primary,
.buy-now-btn,
.add-to-cart-btn,
.hot-deal-add,
.continue-btn,
.btn-continue,
.btn-get-started,
.proceed-btn,
.apply-btn,
.pay-btn,
.place-order-btn,
.rating-submit-btn,
.delivered-home-btn,
.driver-action-btn,
.ad-cta,
.btn-auth,
.btn-profile-primary {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-on-primary) !important;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.buy-now-btn:hover,
.add-to-cart-btn:hover,
.hot-deal-add:hover,
.continue-btn:hover,
.btn-continue:hover,
.btn-get-started:hover,
.proceed-btn:hover,
.apply-btn:hover,
.pay-btn:hover,
.place-order-btn:hover,
.rating-submit-btn:hover,
.ad-cta:hover,
.btn-auth:hover,
.btn-profile-primary:hover {
  background: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: var(--color-on-primary) !important;
}

.btn-outline-secondary,
.btn-profile-outline,
.btn-logout,
.category-btn,
.favorite-btn {
  background: var(--color-surface-soft) !important;
  color: var(--color-text-primary) !important;
  border-color: var(--color-border-strong) !important;
}

.btn-outline-secondary:hover,
.btn-profile-outline:hover,
.btn-logout:hover,
.category-btn:hover {
  background: var(--color-surface) !important;
}

.btn-danger,
.btn-cancel,
.danger-action {
  background: color-mix(in srgb, var(--color-error) 12%, var(--color-surface)) !important;
  border-color: color-mix(in srgb, var(--color-error) 55%, var(--color-border)) !important;
  color: var(--color-error) !important;
}

.form-control,
.form-select,
.input-group-text,
.password-wrapper,
.btn-social {
  min-height: 52px;
}

.form-control,
.form-select,
.input-group-text {
  border: 1px solid var(--color-border) !important;
}

.form-control::placeholder,
.search-input,
.search-input.text-muted {
  color: var(--color-text-muted) !important;
  opacity: 1;
}

.form-control:focus,
.form-select:focus {
  border-color: color-mix(in srgb, var(--color-primary) 72%, var(--color-border)) !important;
  box-shadow: var(--focus-ring) !important;
}

.form-control.error,
.error-message {
  color: var(--color-error) !important;
}

.error-message {
  font-size: 13px;
  background: color-mix(in srgb, var(--color-error) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-error) 40%, var(--color-border));
  border-radius: 14px;
  padding: 10px 12px;
}

.social-buttons {
  gap: 12px !important;
}

.btn-social {
  width: 100%;
  justify-content: center;
  border: 1px solid var(--color-border) !important;
}

.btn-social img,
.btn-social svg {
  flex-shrink: 0;
}

.password-wrapper,
.search-bar,
.input-group {
  border-radius: 18px !important;
}

.password-toggle {
  color: var(--color-text-muted) !important;
}

.bottom-nav {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent) !important;
  border-top: 1px solid var(--color-border) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 -12px 26px rgba(18, 14, 11, 0.12);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.bottom-nav .nav-item {
  color: var(--color-text-muted) !important;
  min-height: 56px;
  border-radius: 16px;
  padding: 10px 8px 8px;
  margin: 6px 2px 0;
}

.bottom-nav .nav-item.active {
  color: var(--color-accent) !important;
  background: transparent;
}

.bottom-nav .nav-item:hover {
  color: var(--color-accent) !important;
  background: transparent;
}

.bottom-nav .nav-item.active svg,
.bottom-nav .nav-item:hover svg {
  color: inherit !important;
}

.auth-page .auth-content,
.profile-header-block,
.home-content,
.checkout-content,
.my-account-scroll .main-frame {
  padding-left: 16px;
  padding-right: 16px;
}

.auth-page .auth-content {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  border: 1px solid var(--color-border);
  border-radius: 28px;
  padding-top: 28px;
  padding-bottom: 24px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(12px);
}

.auth-page .container,
.auth-page .row,
.auth-page .col-12 {
  min-height: inherit;
}

.wave-icon {
  display: inline-flex;
  transform: translateY(-2px);
}

.home-header {
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  box-shadow: var(--shadow-card);
}

.home-header-actions {
  gap: 12px;
  padding-left: 8px;
}

.home-header-actions .theme-icon-toggle,
.home-header-actions .notification-icon {
  flex: 0 0 auto;
}

.notification-icon {
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  color: var(--color-on-accent);
  background: transparent !important;
  border: 0 !important;
}

.partner-hero-actions {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.wallet-strip-wrap {
  padding: 12px 0 0;
}

.wallet-strip-wrap-compact {
  padding: 0;
}

.wallet-strip-card {
  background: linear-gradient(125deg, var(--color-deep), var(--color-accent)) !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(60, 40, 20, 0.16);
}

.wallet-strip-pill {
  min-width: 116px;
  min-height: 38px;
  padding: 7px 10px !important;
  border-radius: 14px !important;
}

.wallet-strip-pill div:first-child {
  display: none;
}

.wallet-strip-pill div:last-child {
  font-size: 15px !important;
}

.home-screen-wrapper,
.home-screen,
.home-content {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
}

.home-content .section-title,
.home-content .section-header .section-title,
.deals-section .section-title,
.categories-section .section-title,
.hot-deals-section .section-title,
.partner-banners-section .section-title,
.partner-section-title {
  color: var(--color-text-primary) !important;
}

[data-theme='dark'] .home-content .section-title,
[data-theme='dark'] .home-content .section-header .section-title,
[data-theme='dark'] .deals-section .section-title,
[data-theme='dark'] .categories-section .section-title,
[data-theme='dark'] .hot-deals-section .section-title,
[data-theme='dark'] .partner-banners-section .section-title,
[data-theme='dark'] .partner-section-title {
  color: #fff !important;
}

.hot-deal-title,
.hot-deal-info,
.hot-deal-info a {
  color: var(--color-text-primary) !important;
}

.category-btn,
.category-chip,
.categories-section button {
  color: var(--color-text-primary) !important;
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

.categories-section,
.hot-deals-section {
  margin-top: 18px;
}

.hot-deal-qty-control {
  display: inline-grid;
  grid-template-columns: 34px 34px 34px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-primary) 60%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
  color: var(--color-text-primary);
  font-weight: 800;
  flex-shrink: 0;
}

.hot-deal-qty-control button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: var(--color-accent-strong);
  font-size: 18px;
  font-weight: 900;
}

.hot-deal-qty-control span {
  text-align: center;
  color: var(--color-text-primary);
  font-size: 14px;
}

.subscription-preference-group {
  margin-bottom: 12px;
}

.subscription-preference-heading {
  margin-bottom: 8px;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 800;
}

.subscription-preference-list {
  display: grid;
  gap: 8px;
}

.subscription-preference-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface-soft);
  color: var(--color-text-primary);
  padding: 9px;
  text-align: left;
}

.subscription-preference-card img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}

.subscription-preference-card span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.subscription-preference-card strong {
  overflow: hidden;
  color: var(--color-text-primary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subscription-preference-card small {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.subscription-preference-card.is-selected {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 16%, var(--color-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

.ad-banner {
  overflow: hidden;
}

.ad-content {
  background: transparent !important;
}

.ad-title {
  color: var(--color-text-primary) !important;
}

.ad-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 14px;
}

.profile-header-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px;
  padding: 16px;
  text-decoration: none;
  background: var(--color-deep) !important;
  border-radius: 20px !important;
}

.my-account,
.my-account-scroll,
.my-account-scroll .main-frame {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
}

.my-account .information,
.my-account .preferences,
.my-account .input-fill,
.my-account .input-fill2,
.my-account .content {
  background: transparent !important;
  color: var(--color-text-primary) !important;
}

.my-account .general,
.my-account .preferencess {
  color: var(--color-text-primary) !important;
}

.my-account .item-list,
.my-account .item {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 18px !important;
  color: var(--color-text-primary) !important;
  box-shadow: var(--shadow-card);
}

.my-account .edit-profile,
.my-account .notifications,
.my-account .security2,
.my-account .language2,
.my-account .legal-and-policies,
.my-account .help-support {
  color: var(--color-text-primary) !important;
}

.my-account .wilson-09-gail-com {
  color: color-mix(in srgb, var(--color-on-accent) 82%, transparent) !important;
}

.my-account .user,
.my-account .notification2,
.my-account .security-safe,
.my-account .global,
.my-account .security3,
.my-account .message-question {
  background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface-soft)) !important;
  color: var(--color-accent-strong) !important;
}

.profile-theme-row {
  align-items: stretch;
  flex-direction: column;
  flex-wrap: nowrap;
}

.profile-theme-row .support {
  width: 100%;
}

.profile-theme-row .theme-toggle-group {
  width: 100%;
  margin-left: 0;
  margin-top: 12px;
}

.profile-header-chevron {
  margin-left: auto;
  color: var(--color-on-accent);
}

.favorites-screen {
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
}

.favorites-header {
  width: 100% !important;
  max-width: 480px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  background:
    radial-gradient(circle at top right, rgba(255, 201, 40, 0.22), transparent 30%),
    linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-strong) 100%) !important;
}

.favorites-content {
  max-width: 480px;
  margin: 0 auto;
  background: var(--color-bg) !important;
  color: var(--color-text-primary) !important;
}

.favorites-content h2,
.favorites-content p {
  color: var(--color-text-primary) !important;
}

.favorites-header .favorites-title {
  color: var(--color-on-accent) !important;
}

@media (max-width: 520px) {
  .theme-toggle-profile {
    flex-basis: 100%;
    width: 100%;
  }

  .profile-theme-row .theme-toggle-group {
    margin-left: 0;
  }
}

.avatar-image-60 {
  border: 2px solid rgba(255, 247, 230, 0.22);
  box-shadow: var(--shadow-soft);
}

.item-list,
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 14px 16px;
  text-decoration: none;
}

.item-list:hover,
.item:hover {
  transform: translateY(-1px);
}

.arrow-right {
  color: var(--color-text-muted);
}

.btn-logout {
  width: 100%;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  border: 1px solid color-mix(in srgb, var(--color-error) 42%, var(--color-border)) !important;
  color: var(--color-error) !important;
  font-weight: 800;
}

.profile-modal-title {
  color: var(--color-text-primary);
}

.profile-modal-btn-link {
  border-radius: 14px;
}

.home-indicator {
  opacity: 0.45;
}

.rating-value:empty,
.rating-count:empty {
  display: none !important;
}

.notification-badge {
  min-width: 20px;
  text-align: center;
}

.status-badge-success {
  background: color-mix(in srgb, var(--color-success) 14%, var(--color-surface));
  color: var(--color-success);
}

.status-badge-warning {
  background: color-mix(in srgb, var(--color-warning) 14%, var(--color-surface));
  color: var(--color-warning);
}

.status-badge-error {
  background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface));
  color: var(--color-error);
}

.status-badge-info {
  background: color-mix(in srgb, var(--color-info) 14%, var(--color-surface));
  color: var(--color-info);
}