/* Palette shared with Android ZeppikDesign.kt. Photos, media and brand artwork keep their own colors. */
:root {
  --za-brand: #00ace6;
  --za-action: #007a9f;
  --za-ink: #173a49;
  --za-muted: #607984;
  --za-surface: #ffffff;
  --za-canvas: #f5fafc;
  --za-pale: #ebf9ff;
  --za-line: #ddeaf0;
  --za-mint: #e8f8f1;
  --za-success: #18785b;
  --za-lavender: #f3effb;
  --za-warning: #8c5a0a;
  --za-warning-surface: #fff5de;
  --za-error: #b3261e;
  --za-error-surface: #ffedec;
  --za-paper: #fffcf4;
  --za-on-brand: #173a49;
  --za-outline: #748b96;
}
html[data-theme='dark'] {
  color-scheme: dark;
  background: #101b21;
  --za-action: #67d5f5;
  --za-ink: #e5f2f7;
  --za-muted: #a6bcc6;
  --za-surface: #101b21;
  --za-canvas: #192830;
  --za-pale: #15343f;
  --za-line: #354b55;
  --za-mint: #16392f;
  --za-success: #83ddb6;
  --za-lavender: #30273e;
  --za-warning: #f3cb7c;
  --za-warning-surface: #3c3020;
  --za-error: #ffb4ab;
  --za-error-surface: #48282a;
  --za-paper: #2d2b24;
  --za-outline: #78929f;
  --bs-body-color: var(--za-ink);
  --bs-body-bg: var(--za-surface);
  --bs-secondary-color: var(--za-muted);
  --bs-secondary-bg: var(--za-canvas);
  --bs-tertiary-bg: var(--za-canvas);
  --bs-emphasis-color: var(--za-ink);
  --bs-border-color: var(--za-line);
  --bs-link-color: var(--za-action);
  --bs-link-hover-color: var(--za-action);
}
/* Compact, keyboard-accessible appearance previews. No profile save request is needed. */
.ps-appearance {
  max-width: 640px;
  padding: 20px 0 12px;
  color: var(--za-ink);
}
.ps-appearance h2 {
  font-size: 22px;
  margin: 0 0 8px;
}
.ps-appearance p {
  color: var(--za-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}
.ps-appearance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ps-appearance-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  border: 2px solid var(--za-line);
  border-radius: 20px;
  background: var(--za-canvas);
  cursor: pointer;
  color: var(--za-ink);
  font-weight: 600;
  text-align: center;
}
.ps-appearance-option:has(input:checked) {
  border-color: var(--za-action);
  background: var(--za-pale);
}
.ps-appearance-option:has(input:focus-visible) {
  outline: 3px solid var(--za-action);
  outline-offset: 3px;
}
.ps-appearance-option input {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 18px;
  height: 18px;
  accent-color: var(--za-action);
}
.ps-appearance-system {
  grid-column: 1 / -1;
  flex-direction: row;
  text-align: left;
  padding-right: 48px;
}
.ps-appearance-system svg {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  color: var(--za-action);
}
.ps-appearance-system small {
  display: block;
  font-weight: 400;
  color: var(--za-muted);
  margin-top: 3px;
}
.ps-appearance-preview {
  width: 100px;
  height: 138px;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 4px 16px #00000012;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  background: #ffffff;
}
.ps-appearance-preview i {
  border-radius: 5px;
  background: #f5fafc;
}
.ps-appearance-preview i:first-child {
  grid-column: 1 / -1;
  background: #ebf9ff;
  border-top: 4px solid #00ace6;
}
.ps-appearance-preview-dark {
  background: #101b21;
}
.ps-appearance-preview-dark i {
  background: #192830;
}
.ps-appearance-preview-dark i:first-child {
  background: #15343f;
  border-color: #67d5f5;
}
.ps-appearance [data-appearance-status] {
  margin-top: 14px;
  min-height: 24px;
  color: var(--za-action);
}

/* Legacy shared controls and feature surfaces use the same semantic palette. */
html[data-theme='dark'] body.zeppik-market,
html[data-theme='dark'] body.zeppik-market #main-content {
  background: var(--za-surface) !important;
  color: var(--za-ink) !important;
}
html[data-theme='dark'] .zeppik-market :where(h1, h2, h3, h4, h5, h6, label, legend, summary) {
  color: var(--za-ink);
}
html[data-theme='dark'] .zeppik-market :where(a) {
  color: var(--za-action);
}
html[data-theme='dark'] .zeppik-market :where(input, textarea, select, button) {
  color-scheme: dark;
  accent-color: var(--za-action);
}
html[data-theme='dark']
  .zeppik-market
  :is(
    input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='submit']),
    textarea,
    select,
    .form-control,
    .form-select,
    .uni-select-name,
    .uni-select-content-input
  ) {
  background-color: var(--za-canvas) !important;
  color: var(--za-ink) !important;
  border-color: var(--za-line) !important;
}
html[data-theme='dark'] .zeppik-market :is(input, textarea)::placeholder {
  color: var(--za-muted) !important;
  opacity: 1;
}
html[data-theme='dark'] .zeppik-market :is(input, textarea, select):focus {
  border-color: var(--za-action) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(hr, .dropdown-divider, .ps-section, .ps-tabs, .ma-tabs, .ff-tabs, .pd-section) {
  border-color: var(--za-line) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .header-wow,
    .header-wow-top,
    .header-wow-sticky,
    .header-wow-sticky-container,
    .header-wow-sticky-mobile,
    .header-wow-mobile,
    .header-wow-top-bg-color,
    .top-toolbar,
    .main-floating-menu,
    .zm-mobile-nav,
    .ps-page,
    .ps-save-bar,
    .sidebar,
    .store-header,
    .profile-popup,
    .footer,
    footer.zf-footer,
    .page-chat-container,
    .chat-dialogue-container,
    .chat-dialogue-container-header,
    .chat-dialogue-container-footer,
    .ma-ad,
    .mo-order,
    .zm-shop-card,
    .zw-panel,
    .za-card,
    .ps-notification-topic,
    .ps-notification-device,
    .ph-account-card,
    .ph-verification,
    .ph-seller,
    .ph-empty,
    .profile-container-order-list,
    .profile-container-review-list,
    .container-item-grid-content,
    .container-item-grid-content-prices,
    .card-item-price-now,
    .pd-purchase,
    .ad-card-sidebar,
    .params-buttons-sticky,
    .zc-calendar
  ) {
  background-color: var(--za-surface) !important;
  color: var(--za-ink) !important;
  border-color: var(--za-line) !important;
  color-scheme: dark;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .modal-content,
    .modal-header,
    .modal-footer,
    .uni-dropdown-content,
    .uni-select-content,
    .toolbar-dropdown-box,
    .dropdown-box-list-link,
    .dropdown-menu,
    .zm-mega-panel,
    .zm-mega-roots,
    .big-catalog-menu-mobile-container,
    .header-menu-filters-mobile-container,
    .header-menu-filters-container,
    .live-search-form-results,
    .zci-pop,
    .mo-menu-panel,
    .ma-menu,
    .ma-options-panel,
    .ff-confirm,
    .ma-confirm,
    .pas-share-dialog,
    .mo-remove-dialog,
    .zb-topic-options,
    .iti__country-list,
    .footer-cookie-container
  ) {
  background-color: var(--za-canvas) !important;
  color: var(--za-ink) !important;
  border-color: var(--za-line) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .container-item-images,
    .ma-photo,
    .ff-photo,
    .mo-photo,
    .pd-no-image,
    .pd-related-image,
    .zm-shop-logo,
    .zm-shop-logo img,
    .zb-media,
    .zb-image-fallback,
    .ps-avatar,
    .pd-avatar,
    .zcs-avatar,
    .pd-gallery,
    .ad-card-media-slider,
    .ad-card-media-slider-container,
    .ph-shortcut,
    .ph-card-icon,
    .zm-shops-search,
    .ma-search,
    .ff-search,
    .mo-search,
    .zw-search,
    .ps-notice,
    .pd-interest-stat,
    .pd-stat-details,
    .pd-question-chips button,
    .zw-guide-card,
    .zw-method,
    .zw-table th,
    .credit-card,
    .ps-page .credit-card,
    .zm-hero,
    .za-story,
    .sections-bg-blue,
    .zcs-listing,
    .zcs-safety-compact,
    .deal-chat-banner
  ) {
  background-color: var(--za-canvas) !important;
  color: var(--za-ink) !important;
  border-color: var(--za-line) !important;
}
html[data-theme='dark'] .zeppik-market :is(.zm-business, .label-color-secondary, .mo-status-dispute) {
  background: var(--za-lavender) !important;
  color: var(--za-ink) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .button-color-scheme2,
    .button-color-scheme5,
    .btn-color-white,
    .btn-color-light,
    .btn-color-transparent,
    .ps-btn,
    .ff-button,
    .ma-button,
    .mo-action,
    .mo-icon-button,
    .zw-button,
    .ph-button,
    .pd-round,
    .pd-text-button,
    .pd-contact-buttons button,
    .pd-contact-buttons a,
    .zm-location,
    .zm-compact-menu-toggle,
    .container-item-favorite,
    .zm-mega-root,
    .uni-dropdown-content-item,
    .zci-tabs button,
    .zci-action,
    .mo-menu-panel > a,
    .mo-menu-panel > button,
    .ma-menu [role='menuitem'],
    .btn-close-noir,
    .zm-chat-size-toggle,
    .zm-chat-tools-toggle,
    .page-link,
    .ma-more,
    .zm-shop-tags > span,
    .zm-shops-chips a,
    .ff-view-switch button,
    .zm-shops-view-switch button
  ) {
  background-color: var(--za-canvas) !important;
  color: var(--za-ink) !important;
  border-color: var(--za-line) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .button-color-scheme1,
    .button-main,
    .btn-color-blue,
    .ps-btn.ps-primary,
    .ma-primary,
    .mo-primary,
    .zw-primary,
    .ph-primary,
    .ff-confirm-primary,
    .credit-card-add,
    .actionAddToCart,
    .ad-card-buy-now,
    .chat-dialogue-footer-action-send,
    .pas-share-native,
    .zm-header .header-wow-sticky-add
  ) {
  background: var(--za-action) !important;
  color: var(--za-surface) !important;
  border-color: var(--za-action) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .button-color-scheme1-light,
    .btn-color-blue-light,
    .ps-type:has(input:checked),
    .zci-tabs button[aria-pressed='true'],
    .zm-mega-root.is-active,
    .sidebar__nav a.is-active,
    .ff-view-switch button[aria-pressed='true'],
    .zm-shops-view-switch button[aria-pressed='true'],
    .zc-day.is-range
  ) {
  background: var(--za-pale) !important;
  color: var(--za-action) !important;
  border-color: var(--za-action) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .ps-tab,
    .ff-tab,
    .ma-tab,
    .zm-nav-item,
    .zm-nav-brand,
    .ma-search button,
    .ff-search button,
    .mo-search button,
    .pd-text-button,
    .zci-menu summary,
    .ma-options summary
  ) {
  background: transparent !important;
  color: var(--za-muted) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .ps-tab[aria-selected='true'],
    .ff-tab[aria-current='page'],
    .ma-tab[aria-current='page'],
    .zm-nav-item.is-active,
    .zm-nav-item.active,
    .zm-nav-brand.is-active
  ) {
  color: var(--za-ink) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .container-item-grid-content-title,
    .container-item-grid-content-title a,
    .container-item-list-content-title a,
    .container-item-grid-content-prices,
    .container-item-list-content-prices,
    .card-item-price,
    .card-item-price-now,
    .ma-title,
    .ma-price,
    .ff-title,
    .ff-price,
    .pd-price,
    .zm-shop-name,
    .zm-shop-card h2,
    .ps-page h1,
    .ps-page h2,
    .ps-page h3,
    .ps-page label,
    .ps-tab,
    .chat-dialogues-item-content-name,
    .chat-dialogue-container-header-name,
    .zm-mega-title,
    .zm-mega-root,
    .uni-select-content-item,
    .uni-dropdown-content-item,
    .pd-detail h1,
    .bold-title,
    .bold-title-and-link h1,
    .bold-title-and-link h2,
    .live-search-form-input,
    .zf-nav-link,
    .zf-footer h3
  ) {
  color: var(--za-ink) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .text-muted,
    .ps-helper,
    .ps-heading p,
    .ps-intro p,
    .ps-crumb,
    .ps-crumb a,
    .ps-save-state,
    .container-item-grid-content-location,
    .container-item-list-content-location,
    .zm-seller-meta,
    .zm-seller-meta a,
    .zm-viewed-label,
    .pd-detail small,
    .zf-legal,
    .zf-legal a,
    .zf-legal button,
    .chat-dialogues-item-content-last-message,
    .chat-dialogues-item-content-date
  ) {
  color: var(--za-muted) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .status-label-color-success,
    .card-status-info-bg-success,
    .mo-status-done,
    .ma-status-1,
    .btn-color-green,
    .btn-color-green-light
  ) {
  background: var(--za-mint) !important;
  color: var(--za-success) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .status-label-color-warning,
    .mo-status:not(.mo-status-done):not(.mo-status-cancelled):not(.mo-status-dispute),
    .ma-status-0,
    .ma-status-5,
    .zcs-warning,
    .za-restriction,
    .mo-remove-warning
  ) {
  background: var(--za-warning-surface) !important;
  color: var(--za-warning) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .status-label-color-danger,
    .card-status-info-bg-error,
    .mo-status-cancelled,
    .ma-status-4,
    .btn-color-danger,
    .zw-error
  ) {
  background: var(--za-error-surface) !important;
  color: var(--za-error) !important;
}
html[data-theme='dark'] .zeppik-market :is(.form-label-error, .text-danger, .zci-action.is-danger, .zci-action-delete) {
  color: var(--za-error) !important;
}
html[data-theme='dark'] .zeppik-market .chat-dialogue-container-content {
  background: var(--za-surface) !important;
}
html[data-theme='dark'] .zeppik-market .item-message-from .chat-dialogue-item-message-text {
  background: var(--za-pale) !important;
  color: var(--za-ink) !important;
  border-color: var(--za-line) !important;
}
html[data-theme='dark'] .zeppik-market .item-message-whom .chat-dialogue-item-message-text {
  background: var(--za-canvas) !important;
  color: var(--za-ink) !important;
  border-color: var(--za-line) !important;
}
html[data-theme='dark'] .zeppik-market .item-message-system .chat-dialogue-item-message-text {
  background: var(--za-mint) !important;
  color: var(--za-ink) !important;
}
html[data-theme='dark'] .zeppik-market :is(.ps-switch span, .switch-toggle-slider) {
  background: var(--za-line) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(.ps-switch input:checked + span, .switch-input:checked ~ .switch-toggle-slider, .zc-day.is-edge) {
  background: var(--za-action) !important;
  color: var(--za-surface) !important;
}
html[data-theme='dark']
  .zeppik-market
  :is(
    .container-item-images-skeleton,
    .container-item-grid-content-title-skeleton,
    .container-item-grid-content-prices-skeleton,
    .modal-body-skeleton,
    .modal-title-skeleton
  ) {
  background-color: var(--za-canvas) !important;
}
html[data-theme='dark'] .zeppik-market :is(.btn-close, .btn-close-noir img) {
  filter: invert(1);
}
@media (prefers-reduced-motion: reduce) {
  .ps-appearance-option {
    transition: none;
  }
}

/* Feature token aliases retain existing dimensions and light-theme styling. */
html[data-theme='dark'] .zeppik-market,
html[data-theme='dark'] .zeppik-market :where([class]) {
  --accent: var(--za-action) !important;
  --ff-accent: var(--za-action) !important;
  --ff-line: var(--za-line) !important;
  --ff-muted: var(--za-muted) !important;
  --green: var(--za-success) !important;
  --ink: var(--za-ink) !important;
  --line: var(--za-line) !important;
  --ma-blue: var(--za-action) !important;
  --ma-ink: var(--za-ink) !important;
  --ma-line: var(--za-line) !important;
  --ma-muted: var(--za-muted) !important;
  --mo-blue: var(--za-action) !important;
  --mo-ink: var(--za-ink) !important;
  --mo-line: var(--za-line) !important;
  --mo-muted: var(--za-muted) !important;
  --mr-accent: var(--za-action) !important;
  --mr-ink: var(--za-ink) !important;
  --mr-line: var(--za-line) !important;
  --mr-muted: var(--za-muted) !important;
  --ms-blue: var(--za-action) !important;
  --ms-ink: var(--za-ink) !important;
  --ms-line: var(--za-line) !important;
  --ms-muted: var(--za-muted) !important;
  --muted: var(--za-muted) !important;
  --pd-blue: var(--za-action) !important;
  --pd-border: var(--za-line) !important;
  --pd-ink: var(--za-ink) !important;
  --pd-muted: var(--za-muted) !important;
  --pd-soft: var(--za-pale) !important;
  --ph-accent: var(--za-action) !important;
  --ph-line: var(--za-line) !important;
  --ph-muted: var(--za-muted) !important;
  --ph-soft: var(--za-pale) !important;
  --pm-accent: var(--za-action) !important;
  --pm-ink: var(--za-ink) !important;
  --pm-line: var(--za-line) !important;
  --pm-muted: var(--za-muted) !important;
  --primary: var(--za-action) !important;
  --primary-hover: var(--za-action) !important;
  --primary-light: var(--za-pale) !important;
  --profile-accent: var(--za-action) !important;
  --profile-line: var(--za-line) !important;
  --profile-muted: var(--za-muted) !important;
  --profile-soft: var(--za-pale) !important;
  --ps-accent: var(--za-action) !important;
  --ps-dark: var(--za-ink) !important;
  --ps-line: var(--za-line) !important;
  --ps-muted: var(--za-muted) !important;
  --pv-accent: var(--za-action) !important;
  --pv-ink: var(--za-ink) !important;
  --pv-line: var(--za-line) !important;
  --pv-muted: var(--za-muted) !important;
  --pv-soft: var(--za-pale) !important;
  --red: var(--za-error) !important;
  --seller-blue: var(--za-action) !important;
  --seller-blue-dark: var(--za-action) !important;
  --seller-ink: var(--za-ink) !important;
  --seller-line: var(--za-line) !important;
  --seller-muted: var(--za-muted) !important;
  --shops-accent: var(--za-action) !important;
  --shops-blue: var(--za-action) !important;
  --shops-ink: var(--za-ink) !important;
  --shops-line: var(--za-line) !important;
  --shops-muted: var(--za-muted) !important;
  --zar-blue: var(--za-action) !important;
  --zar-ink: var(--za-ink) !important;
  --zar-line: var(--za-line) !important;
  --zar-muted: var(--za-muted) !important;
  --zar-soft: var(--za-pale) !important;
  --zb-accent: var(--za-action) !important;
  --zb-ink: var(--za-ink) !important;
  --zb-line: var(--za-line) !important;
  --zb-muted: var(--za-muted) !important;
  --zc-accent: var(--za-action) !important;
  --zc-blue: var(--za-action) !important;
  --zc-ink: var(--za-ink) !important;
  --zc-line: var(--za-line) !important;
  --zc-muted: var(--za-muted) !important;
  --zc-pale: var(--za-pale) !important;
  --ze-ink: var(--za-ink) !important;
  --ze-line: var(--za-line) !important;
  --ze-muted: var(--za-muted) !important;
  --zg-accent: var(--za-action) !important;
  --zg-line: var(--za-line) !important;
  --zg-muted: var(--za-muted) !important;
  --zm-search-focus-border: var(--za-line) !important;
  --zr-accent: var(--za-action) !important;
  --zr-accent-ink: var(--za-ink) !important;
  --zr-accent-line: var(--za-line) !important;
  --zr-accent-soft: var(--za-pale) !important;
  --zr-ink: var(--za-ink) !important;
  --zr-line: var(--za-line) !important;
  --zr-muted: var(--za-muted) !important;
  --zs-blue: var(--za-action) !important;
  --zs-ink: var(--za-ink) !important;
  --zs-line: var(--za-line) !important;
  --zs-muted: var(--za-muted) !important;
  --zw-blue: var(--za-action) !important;
  --zw-ink: var(--za-ink) !important;
  --zw-line: var(--za-line) !important;
  --zw-muted: var(--za-muted) !important;
  --zw-soft: var(--za-pale) !important;
}

html[data-theme='dark'] .zeppik-market :is(.h-logo, .h-logo-mobile, .zf-logo, .za-brand) img {
  filter: url('/resources/brand/logo-dark-filter.svg#lettering');
}

html[data-theme='dark'] .zeppik-market .live-search-form .zm-search-submit {
  background: var(--za-action) !important;
  color: var(--za-surface) !important;
}
html[data-theme='dark'] .zeppik-market .container-item-labels-1 {
  background: var(--za-pale) !important;
  color: var(--za-action) !important;
}
html[data-theme='dark'] .zeppik-market .container-item-labels-2 {
  background: var(--za-mint) !important;
  color: var(--za-success) !important;
}