/* Selka Admin — static fallback (loads without Next.js CSS pipeline) */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

html:has(.selka-admin),
body:has(.selka-admin) {
  height: 100%;
  overflow: hidden;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #f7f8fa;
  color: #0f2144;
  font-family: var(--font-dm-sans, "DM Sans"), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

:root {
  --energy-4: rgba(0, 81, 243, 0.04);
  --energy-8: rgba(0, 81, 243, 0.08);
  --energy-8-solid: #ebf1fe;
  --destruction-8: rgba(198, 34, 37, 0.08);
  --destruction-12: rgba(198, 34, 37, 0.12);
  --destruction-100: #c62225;
  --dark-metal-100: #0f2144;
  --dark-metal-100-hover: color-mix(in srgb, #ffffff 20%, var(--dark-metal-100));
}

:is(
  .selka-btn-primary:not(:disabled),
  .selka-filter--active:not(:disabled),
  .selka-orders-date-preset--active:not(:disabled),
  .selka-orders-date-popover__confirm:not(:disabled),
  .selka-orders-customer-popover__confirm:not(:disabled),
  .selka-orders-search-popover__confirm:not(:disabled),
  .selka-fulfill-btn-split__main:not(:disabled),
  .selka-fulfill-btn-split__menu:not(:disabled),
  .selka-order-detail__confirm-payment-btn:not(:disabled),
  .selka-pickup-exit-confirm__btn-exit:not(:disabled),
  .selka-arrange-shipment-modal__btn-next:not(.selka-arrange-shipment-modal__btn-next--disabled):not(:disabled),
  .selka-arrange-shipment-modal__btn-confirm:not(.selka-arrange-shipment-modal__btn-confirm--disabled):not(:disabled),
  .selka-confirm-payment-modal__btn-confirm:not(:disabled),
  .selka-variant-settings-modal__btn-save:not(:disabled),
  .selka-edit-variant-modal__btn-save:not(:disabled),
  .selka-photo-picker-modal__tab--active:not(:disabled),
  .selka-photo-picker-modal__upload-btn:not(:disabled),
  .selka-manual-order-discount-popover__apply:not(:disabled),
  .selka-create-customer__address-rename-popover-save:not(:disabled)
):hover,
:is(
  .selka-btn-primary:not(:disabled),
  .selka-filter--active:not(:disabled),
  .selka-orders-date-preset--active:not(:disabled),
  .selka-orders-date-popover__confirm:not(:disabled),
  .selka-orders-customer-popover__confirm:not(:disabled),
  .selka-orders-search-popover__confirm:not(:disabled),
  .selka-fulfill-btn-split__main:not(:disabled),
  .selka-fulfill-btn-split__menu:not(:disabled),
  .selka-order-detail__confirm-payment-btn:not(:disabled),
  .selka-pickup-exit-confirm__btn-exit:not(:disabled),
  .selka-arrange-shipment-modal__btn-next:not(.selka-arrange-shipment-modal__btn-next--disabled):not(:disabled),
  .selka-arrange-shipment-modal__btn-confirm:not(.selka-arrange-shipment-modal__btn-confirm--disabled):not(:disabled),
  .selka-confirm-payment-modal__btn-confirm:not(:disabled),
  .selka-variant-settings-modal__btn-save:not(:disabled),
  .selka-edit-variant-modal__btn-save:not(:disabled),
  .selka-photo-picker-modal__tab--active:not(:disabled),
  .selka-photo-picker-modal__upload-btn:not(:disabled),
  .selka-manual-order-discount-popover__apply:not(:disabled),
  .selka-create-customer__address-rename-popover-save:not(:disabled)
):focus-visible {
  background: var(--dark-metal-100-hover);
}

.selka-fulfill-btn-split--disabled :is(.selka-fulfill-btn-split__main, .selka-fulfill-btn-split__menu):is(
    :hover,
    :focus-visible
  ),
.selka-fulfill-btn-split--bulk-disabled :is(.selka-fulfill-btn-split__main, .selka-fulfill-btn-split__menu):is(
    :hover,
    :focus-visible
  ),
.selka-fulfill-btn-split--arranged-disabled :is(.selka-fulfill-btn-split__main, .selka-fulfill-btn-split__menu):is(
    :hover,
    :focus-visible
  ) {
  background: var(--dark-metal-100);
}

.selka-action-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04);
}

.selka-dropdown-menu--below {
  top: calc(100% + var(--selka-dropdown-gap, 4px));
  bottom: auto;
}

.selka-dropdown-menu--above {
  top: auto;
  bottom: calc(100% + var(--selka-dropdown-gap, 4px));
}

.selka-action-menu__item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0f2144;
  text-align: left;
  cursor: pointer;
}

.selka-action-menu__item:hover,
.selka-action-menu__item:focus-visible {
  background: var(--energy-8);
}

.selka-action-menu__item--danger {
  color: #c62225;
}

.selka-action-menu__item--danger:hover,
.selka-action-menu__item--danger:focus-visible {
  background: var(--destruction-8);
}

.selka-action-menu__divider {
  height: 1px;
  margin: 4px 0;
  padding: 0;
  border: none;
  background: rgba(129, 144, 174, 0.12);
}

/* Prices: Inter with tabular (monospaced) figures */
.selka-price {
  font-family: var(--font-inter, "Inter"), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.selka-admin {
  position: fixed;
  inset: 0;
  display: flex;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  background: #f7f8fa;
}

.selka-sidebar-backdrop {
  display: none;
}

.selka-sidebar {
  display: flex;
  width: 240px;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
  height: 100dvh;
  padding: 36px 20px 20px;
  background: #f7f8fa;
  box-sizing: border-box;
}

.selka-sidebar__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.selka-sidebar__brand img {
  width: 72px;
  height: 20px;
  object-fit: contain;
}

.selka-sidebar__brand span {
  font-size: 12px;
  color: #8190ae;
}

.selka-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.selka-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #8190ae;
  transition: background 0.15s ease;
}

.selka-nav__link:not(.selka-nav__link--active):not(.selka-nav__link--danger):not(
    .selka-nav__link--parent
  ):hover,
.selka-nav__link:not(.selka-nav__link--active):not(.selka-nav__link--danger):not(
    .selka-nav__link--parent
  ):focus-visible {
  background: var(--metal-8);
}

.selka-nav__link--active:not(.selka-nav__link--parent) {
  height: 56px;
}

.selka-nav__link--active:not(.selka-nav__link--parent):hover,
.selka-nav__link--active:not(.selka-nav__link--parent):focus-visible {
  background: color-mix(in srgb, #ffffff 8%, #0f2144);
}

.selka-nav__link--danger:hover,
.selka-nav__link--danger:focus-visible {
  background: var(--destruction-8);
}

.selka-nav__link--footer {
  height: 56px;
  padding: 16px 20px 16px 24px;
}

.selka-nav__link img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  object-fit: contain;
}

.selka-nav__link:not(.selka-nav__link--active):not(.selka-nav__link--danger) img {
  /* Metal 100 #8190ae */
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-nav__link--active {
  background: var(--dark-metal-100);
  color: #fff;
  font-weight: 600;
}

.selka-nav__link--active img {
  filter: brightness(0) invert(1);
}

.selka-nav__label-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-nav__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 16px;
  padding: 2px 4px;
  border-radius: 8px;
  background: #0051f3;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

.selka-nav__link--danger {
  color: #c62225;
}

.selka-nav__group {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  width: 100%;
  border-radius: 12px;
}

.selka-nav__link--parent {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  height: 56px;
  padding: 12px 13px;
}

.selka-nav__link--parent:not(.selka-nav__link--active):hover,
.selka-nav__link--parent:not(.selka-nav__link--active):focus-within {
  background: var(--metal-8);
}

.selka-nav__group--expanded .selka-nav__link--parent {
  width: 200px;
  margin-left: auto;
}

.selka-nav__link--parent.selka-nav__link--active {
  gap: 2px;
  padding: 8px 12px;
  font-weight: 400;
}

.selka-nav__parent-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.selka-nav__link--parent:not(.selka-nav__link--active) .selka-nav__parent-main {
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
}

.selka-nav__link--parent:not(.selka-nav__link--active) .selka-nav__parent-main:hover,
.selka-nav__link--parent:not(.selka-nav__link--active) .selka-nav__parent-main:focus-visible {
  background: var(--metal-8);
}

.selka-nav__link--parent.selka-nav__link--active .selka-nav__parent-main {
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
}

.selka-nav__parent-main span {
  white-space: nowrap;
}

.selka-nav__link--active.selka-nav__link--parent .selka-nav__parent-main:hover,
.selka-nav__link--active.selka-nav__link--parent .selka-nav__parent-main:focus-visible {
  background: rgba(255, 255, 255, 0.04);
}

.selka-nav__chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}

.selka-nav__link--active.selka-nav__link--parent .selka-nav__chevron-btn:hover,
.selka-nav__link--active.selka-nav__link--parent .selka-nav__chevron-btn:focus-visible {
  background: rgba(255, 255, 255, 0.04);
}

.selka-nav__link--parent:not(.selka-nav__link--active) .selka-nav__chevron-btn:hover,
.selka-nav__link--parent:not(.selka-nav__link--active) .selka-nav__chevron-btn:focus-visible {
  background: var(--metal-8);
}

.selka-nav__chevron {
  width: 20px;
  height: 20px;
  transition: transform 0.2s ease;
}

.selka-nav__group--expanded .selka-nav__chevron {
  transform: rotate(180deg);
}

.selka-nav__link--active .selka-nav__chevron {
  filter: brightness(0) invert(1);
}

.selka-nav__link:not(.selka-nav__link--active) .selka-nav__chevron {
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-nav__group--expanded {
  --tree-color: #d6dbe5;
  --tree-color: color-mix(in srgb, var(--metal-100, #8190ae) 28%, var(--metallic-white, #f7f8fa));
  --tree-weight: 2px;
  --tree-radius: 10px;
  --item-h: 34px;
  --item-gap: 4px;
  --row-step: calc(var(--item-h) + var(--item-gap));
}

.selka-nav__submenu {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--item-gap);
  width: 140px;
}

.selka-nav__group--expanded .selka-nav__tree {
  position: absolute;
  top: calc(56px + var(--item-gap));
  left: 29px;
  width: 24px;
  height: calc(var(--sub-count) * var(--item-h) + (var(--sub-count) - 1) * var(--item-gap));
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.selka-nav__tree-stem {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tree-weight);
  height: calc((var(--sub-count) - 1) * var(--row-step) + var(--item-h) / 2 - var(--tree-radius));
  border-radius: var(--tree-weight);
  background: var(--tree-color);
}

.selka-nav__tree-branch {
  position: absolute;
  top: calc(var(--item-h) / 2 + var(--branch-i) * var(--row-step));
  left: 0;
  width: 24px;
  height: var(--tree-radius);
  border-left: var(--tree-weight) solid var(--tree-color);
  border-bottom: var(--tree-weight) solid var(--tree-color);
  border-bottom-left-radius: var(--tree-radius);
  transform: translateY(-100%);
  box-sizing: border-box;
}

.selka-nav__sub-link {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--item-h);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  color: #8190ae;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.selka-nav__sub-link:hover,
.selka-nav__sub-link:focus-visible {
  background: var(--metal-8);
}

.selka-nav__sub-link--active {
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
}

.selka-nav__sub-link--nested {
  padding-left: 32px;
}

.selka-sidebar__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #8190ae;
}

.selka-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.selka-main > main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.selka-topbar {
  display: flex;
  height: 80px;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding-right: 20px;
}

.selka-topbar__menu {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: auto;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.selka-topbar__menu-icon,
.selka-topbar__menu-icon::before,
.selka-topbar__menu-icon::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--dark-metal-100);
}

.selka-topbar__menu-icon {
  position: relative;
}

.selka-topbar__menu-icon::before,
.selka-topbar__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.selka-topbar__menu-icon::before {
  top: -5px;
}

.selka-topbar__menu-icon::after {
  top: 5px;
}

.selka-topbar__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selka-topbar__icon-btn {
  padding: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.selka-topbar__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 8px 20px;
}

.selka-topbar__profile-text {
  text-align: right;
}

.selka-topbar__profile-text strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.selka-topbar__profile-text span {
  font-size: 11px;
  font-weight: 300;
  color: #8190ae;
}

.selka-avatar {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(129, 144, 174, 0.12);
  border: 1px solid rgba(129, 144, 174, 0.12);
  font-size: 16px;
  font-weight: 600;
  color: #8190ae;
}

.selka-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.selka-panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border-radius: 40px 0 0 0;
}

.selka-panel__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-self: stretch;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  box-sizing: border-box;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-right: none;
  border-bottom: none;
  border-radius: 40px 0 0 0;
  background: #fff;
  padding: 40px 0 0 40px;
}

.selka-panel__inner > .selka-page-title,
.selka-panel__inner > .selka-toolbar {
  padding-right: 40px;
}

.selka-page-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.selka-page-title img {
  width: 24px;
  height: 24px;
}

.selka-page-title__icon--metal {
  /* Metal 100 #8190ae */
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-page-title--breadcrumb {
  gap: 0;
}

.selka-page-title__crumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  line-height: 0;
  transition: background 0.12s ease;
}

.selka-page-title__crumb-icon:hover,
.selka-page-title__crumb-icon:focus-visible {
  background: rgba(129, 144, 174, 0.08);
}

.selka-page-title__crumb-icon img {
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-page-title--breadcrumb > img {
  margin: 0 4px;
  /* Metal 28 solid #d6dbe5 */
  filter: brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(347%)
    hue-rotate(184deg) brightness(95%) contrast(91%);
}

.selka-toolbar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
}

.selka-toolbar-divider {
  flex-shrink: 0;
  width: auto;
  height: 0;
  margin: 16px 40px 0 0;
  padding: 0;
  border: none;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selka-filter {
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 12px;
  background: rgba(129, 144, 174, 0.08);
  color: #68748d;
  cursor: pointer;
}

.selka-filter:not(.selka-filter--active):hover,
.selka-filter:not(.selka-filter--active):focus-visible {
  background: var(--energy-8);
}

.selka-filter--active {
  background: var(--dark-metal-100);
  border-color: rgba(129, 144, 174, 0.08);
  color: #fff;
  font-weight: 600;
}

.selka-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  background: var(--dark-metal-100);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}

.selka-btn-primary img {
  width: 16px;
  height: 16px;
}

.selka-orders-subtoolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 12px;
  padding: 0 40px 0 16px;
}

.selka-orders-subtoolbar__select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: #68748d;
  cursor: pointer;
}

.selka-orders-subtoolbar__divider {
  width: 1px;
  height: 32px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-orders-subtoolbar__summary {
  margin: 0;
  font-size: 12px;
  color: #68748d;
}

.selka-orders-subtoolbar__summary strong {
  font-weight: 400;
  color: #0051f3;
}

.selka-orders-subtoolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.selka-orders-subtoolbar--selection {
  flex-wrap: nowrap;
}

.selka-orders-subtoolbar__select-all--active {
  color: #0051f3;
}

.selka-orders-table__checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.selka-orders-table__header-check,
.selka-orders-table__row-check {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.selka-orders-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.selka-orders-bulk-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  padding: 8px 12px 8px 16px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  color: var(--energy-100, #0051f3);
  cursor: pointer;
  white-space: nowrap;
}

.selka-orders-bulk-action:not(.selka-orders-bulk-action--disabled):hover,
.selka-orders-bulk-action:not(.selka-orders-bulk-action--disabled):focus-visible {
  background: var(--energy-8);
}

.selka-orders-bulk-action img {
  width: 16px;
  height: 16px;
}

.selka-orders-bulk-action__icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: var(--energy-100, #0051f3);
  -webkit-mask: var(--bulk-action-icon) no-repeat center / contain;
  mask: var(--bulk-action-icon) no-repeat center / contain;
}

.selka-orders-bulk-action--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.selka-orders-bulk-action--destruction {
  color: var(--destruction-100, #c62225);
}

.selka-orders-bulk-action--destruction:not(.selka-orders-bulk-action--disabled):hover,
.selka-orders-bulk-action--destruction:not(.selka-orders-bulk-action--disabled):focus-visible {
  background: var(--destruction-12, rgba(198, 34, 37, 0.12));
}

.selka-orders-bulk-action--destruction .selka-orders-bulk-action__icon {
  background-color: var(--destruction-100, #c62225);
}

.selka-orders-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  padding: 8px 12px 8px 16px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  color: #0051f3;
  cursor: pointer;
}

.selka-orders-filter-chip:not(:disabled):hover,
.selka-orders-filter-chip:not(:disabled):focus-visible {
  background: var(--energy-8);
}

.selka-orders-filter-chip img {
  width: 16px;
  height: 16px;
}

.selka-orders-filter-chip--icon {
  padding: 8px 16px;
}

.selka-orders-filter-chip--open,
.selka-orders-filter-chip--active {
  border-color: rgba(0, 81, 243, 0.16);
  background: rgba(0, 81, 243, 0.08);
}

.selka-orders-date-filter {
  position: relative;
}

.selka-orders-date-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  left: 0;
  width: 320px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(15, 33, 68, 0.08);
}

.selka-orders-date-popover--portal {
  position: fixed;
  top: auto;
  left: auto;
}

.selka-orders-date-popover__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.selka-orders-date-preset {
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  padding: 6px 12px;
  background: rgba(129, 144, 174, 0.08);
  color: #68748d;
  font-size: 12px;
  cursor: pointer;
}

.selka-orders-date-preset--active {
  background: var(--dark-metal-100);
  border-color: rgba(129, 144, 174, 0.08);
  color: #fff;
  font-weight: 600;
}

.selka-orders-date-popover__range {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.selka-orders-date-popover__range-sep {
  flex-shrink: 0;
  color: #8190ae;
  font-size: 12px;
}

.selka-orders-date-field {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(129, 144, 174, 0.04);
}

.selka-orders-date-field__label {
  color: #8190ae;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.selka-orders-date-field__value {
  overflow: hidden;
  color: #0f2144;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-orders-date-field__value--empty {
  color: #8190ae;
  font-weight: 400;
}

.selka-orders-date-calendar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.selka-orders-date-calendar__title {
  margin: 0;
  color: #0f2144;
  font-size: 12px;
  font-weight: 600;
}

.selka-orders-date-calendar__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.selka-orders-date-calendar__nav img {
  width: 16px;
  height: 16px;
}

.selka-orders-date-calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.selka-orders-date-calendar__weekdays span {
  color: #8190ae;
  font-size: 10px;
  font-weight: 500;
  text-align: center;
}

.selka-orders-date-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.selka-orders-date-calendar__day {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #0f2144;
  font-size: 12px;
  cursor: pointer;
}

.selka-orders-date-calendar__day--outside {
  color: #b8c2d4;
}

.selka-orders-date-calendar__day--today:not(.selka-orders-date-calendar__day--selected) {
  color: #0051f3;
  font-weight: 600;
}

.selka-orders-date-calendar__day--in-range,
.selka-orders-date-calendar__day--range-start,
.selka-orders-date-calendar__day--range-end,
.selka-orders-date-calendar__day--selected {
  background: rgba(0, 81, 243, 0.08);
}

.selka-orders-date-calendar__day--range-start,
.selka-orders-date-calendar__day--range-end {
  background: #0051f3;
  color: #fff;
  font-weight: 600;
}

.selka-orders-date-calendar__day:hover:not(.selka-orders-date-calendar__day--range-start):not(
    .selka-orders-date-calendar__day--range-end
  ):not(.selka-orders-date-calendar__day--disabled) {
  background: rgba(129, 144, 174, 0.12);
}

.selka-orders-date-calendar__day--disabled {
  color: #b8c2d4;
  cursor: not-allowed;
  opacity: 0.55;
}

.selka-orders-date-calendar__day--disabled.selka-orders-date-calendar__day--today {
  color: #b8c2d4;
  font-weight: 400;
}

.selka-orders-date-popover__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.selka-orders-date-popover__clear {
  border: none;
  background: transparent;
  color: #68748d;
  font-size: 12px;
  cursor: pointer;
}

.selka-orders-date-popover__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.selka-orders-date-popover__confirm--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.selka-orders-customer-filter {
  position: relative;
}

.selka-orders-customer-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: 320px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(15, 33, 68, 0.08);
}

.selka-orders-customer-popover--portal {
  position: fixed;
  top: auto;
  left: auto;
}

.selka-orders-customer-popover__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-orders-customer-popover__search img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selka-orders-customer-popover__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #0f2144;
  outline: none;
}

.selka-orders-customer-popover__search-input::placeholder {
  color: #8190ae;
}

.selka-orders-customer-popover__search-clear {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-orders-customer-popover__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.selka-orders-customer-popover__select-all {
  border: none;
  background: none;
  padding: 0;
  color: #0051f3;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.selka-orders-customer-popover__count {
  color: #8190ae;
  font-size: 12px;
}

.selka-orders-customer-popover__list-wrap {
  min-height: 160px;
  max-height: 240px;
  overflow-y: auto;
}

.selka-orders-customer-popover__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selka-orders-customer-popover__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.selka-orders-customer-popover__item--selected {
  border-color: rgba(0, 81, 243, 0.08);
  background: rgba(0, 81, 243, 0.08);
}

.selka-orders-customer-popover__checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(129, 144, 174, 0.6);
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
}

.selka-orders-customer-popover__checkbox--checked {
  border-color: #0051f3;
  background: #0051f3;
}

.selka-orders-customer-popover__checkbox--checked img {
  filter: brightness(0) invert(1);
}

.selka-orders-customer-popover__item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.selka-orders-customer-popover__item-label img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selka-orders-customer-popover__item-name {
  overflow: hidden;
  color: #68748d;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-orders-customer-popover__item--selected .selka-orders-customer-popover__item-name {
  color: #0051f3;
  font-weight: 600;
}

.selka-orders-customer-popover__item-count {
  flex-shrink: 0;
  color: #8190ae;
  font-size: 11px;
}

.selka-orders-customer-popover__empty {
  margin: 0;
  padding: 24px 12px;
  color: #8190ae;
  font-size: 12px;
  text-align: center;
}

.selka-orders-customer-popover__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.selka-orders-customer-popover__clear {
  border: none;
  background: transparent;
  color: #68748d;
  font-size: 12px;
  cursor: pointer;
}

.selka-orders-customer-popover__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.selka-orders-search-filter {
  position: relative;
}

.selka-orders-search-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: 280px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(15, 33, 68, 0.08);
}

.selka-orders-search-popover--portal {
  position: fixed;
  top: auto;
  left: auto;
}

.selka-orders-search-popover__form {
  margin: 0;
}

.selka-orders-search-popover__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-orders-search-popover__search img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selka-orders-search-popover__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #0f2144;
  outline: none;
}

.selka-orders-search-popover__search-input::placeholder {
  color: #8190ae;
}

.selka-orders-search-popover__search-clear {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-orders-search-popover__hint {
  margin: 8px 0 0;
  color: #8190ae;
  font-size: 11px;
  line-height: 1.4;
}

.selka-orders-search-popover__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 16px;
}

.selka-orders-search-popover__clear {
  border: none;
  background: transparent;
  color: #68748d;
  font-size: 12px;
  cursor: pointer;
}

.selka-orders-search-popover__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.selka-table-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  margin-top: 16px;
}

.selka-table-viewport-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  padding-right: 40px;
}

.selka-table-viewport-shell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 40px;
  bottom: 0;
  z-index: 30;
  width: 24px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    to left,
    rgba(15, 33, 68, 0.1) 0%,
    rgba(15, 33, 68, 0.04) 45%,
    transparent 100%
  );
  transition: opacity 0.15s ease;
}

.selka-table-viewport-shell--overflow-right::after {
  opacity: 1;
}

.selka-table-viewport {
  height: 100%;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Orders data table */
.selka-orders-table {
  --selka-row-bg: #fff;
  --selka-row-muted-bg: #f5f6f9;
  --selka-row-hover-bg: #f5f8ff;
  --selka-freeze-check-width: 48px;
  --selka-freeze-id-width: 140px;
  --selka-freeze-date-width: 102px;
  --selka-freeze-customer-width: 136px;
  --selka-freeze-id-left: var(--selka-freeze-check-width);
  --selka-freeze-date-left: calc(
    var(--selka-freeze-check-width) + var(--selka-freeze-id-width)
  );
  --selka-freeze-customer-left: calc(
    var(--selka-freeze-date-left) + var(--selka-freeze-date-width)
  );
  width: max-content;
  min-width: 100%;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 16px;
  table-layout: fixed;
  font-size: 12px;
}

.selka-orders-table__col-total {
  width: 112px;
}

.selka-orders-table__col-payment,
.selka-orders-table__col-fulfillment {
  width: 132px;
}

.selka-orders-table__col-shipment {
  width: 124px;
}

.selka-orders-table__col-items {
  width: 116px;
}

.selka-orders-table__col-method {
  width: 112px;
}

.selka-orders-table__col-check {
  width: var(--selka-freeze-check-width);
}

.selka-orders-table__col-id {
  width: var(--selka-freeze-id-width);
}

.selka-orders-table__col-date {
  width: var(--selka-freeze-date-width);
}

.selka-orders-table__col-customer {
  width: var(--selka-freeze-customer-width);
}

.selka-orders-table thead {
  position: relative;
  z-index: 10;
}

.selka-orders-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
  background: #f5f6f9;
  box-shadow: 0 1px 0 rgba(129, 144, 174, 0.12);
  font-weight: 400;
  color: #68748d;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.selka-orders-table thead th:first-child {
  padding-left: 16px;
  border-radius: 16px 0 0 0;
}

.selka-orders-table thead th:last-child {
  padding-right: 31px;
  border-radius: 0 16px 0 0;
}

.selka-orders-table thead th.selka-orders-table__cell-total {
  text-align: right;
}

.selka-orders-table tbody td {
  height: 48px;
  padding: 8px 16px 8px 0;
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
  background-color: var(--selka-row-bg);
  vertical-align: middle;
  white-space: nowrap;
}

.selka-orders-table tbody td:not(.selka-orders-table__freeze) {
  position: relative;
  z-index: 0;
}

.selka-orders-table tbody td:first-child {
  padding-left: 16px;
}

.selka-orders-table tbody td:last-child {
  padding-right: 31px;
}

.selka-orders-table tbody tr:last-child td {
  border-bottom: none;
}

.selka-orders-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 16px;
}

.selka-orders-table tbody tr:last-child td:last-child {
  border-radius: 0 0 16px 0;
}

.selka-orders-table tbody tr.selka-orders-table__row--completed td {
  background-color: var(--selka-row-muted-bg);
}

.selka-orders-table tbody tr.selka-orders-table__row--selected td {
  background-color: #ebf1fe;
}

.selka-orders-table tbody tr:hover td {
  background-color: var(--selka-row-hover-bg);
}

.selka-orders-table tbody tr.selka-orders-table__row--selected:hover td {
  background-color: #ebf1fe;
}

.selka-orders-table tbody tr:hover .selka-order-id {
  text-decoration: underline;
}

.selka-orders-table__cell-date {
  color: #8190ae;
}

.selka-orders-table__cell-total {
  text-align: right;
  color: #68748d;
}

.selka-orders-table__cell-method {
  color: #68748d;
}

.selka-th-label {
  display: inline-block;
  font-weight: 400;
  color: #68748d;
}

.selka-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 2px 2px 8px;
  border: none;
  border-radius: 20px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #68748d;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.selka-th-sort__icon {
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.selka-th-sort__icon img,
.selka-th-sort__caret {
  display: block;
  width: 16px;
  height: 16px;
}

.selka-th-sort__icon--hover {
  display: inline-flex;
  visibility: hidden;
}

.selka-th-sort__icon--active {
  display: none;
}

.selka-th-sort:not(.selka-th-sort--active):hover {
  background: rgba(129, 144, 174, 0.12);
  color: #68748d;
}

.selka-th-sort:not(.selka-th-sort--active):hover .selka-th-sort__icon--hover {
  visibility: visible;
}

.selka-th-sort--active {
  background: #0051f3;
  color: #fff;
}

.selka-th-sort--active .selka-th-sort__icon--hover {
  display: none;
}

.selka-th-sort--active .selka-th-sort__icon--active {
  display: inline-flex;
}

.selka-th-sort--active:hover .selka-th-sort__icon--active {
  border-radius: 50%;
  background: rgba(0, 38, 153, 0.35);
}

.selka-th-sort__caret--asc {
  transform: rotate(180deg);
}

.selka-th-sort__caret--desc {
  transform: rotate(0deg);
}

.selka-th-sort--icon-left {
  padding: 2px 8px 2px 2px;
}

.selka-orders-table__freeze {
  position: sticky;
  background-color: var(--selka-row-bg);
  background-clip: padding-box;
}

.selka-orders-table__freeze--check {
  left: 0;
  z-index: 6;
}

.selka-orders-table__freeze--id {
  left: var(--selka-freeze-id-left);
  z-index: 7;
}

.selka-orders-table__freeze--date {
  left: var(--selka-freeze-date-left);
  z-index: 8;
}

.selka-orders-table__freeze--customer {
  left: var(--selka-freeze-customer-left);
  z-index: 9;
}

.selka-table-viewport-shell--scrolled .selka-orders-table__freeze--customer {
  border-right: 1px solid rgba(129, 144, 174, 0.2);
  box-shadow: 4px 0 12px -4px rgba(15, 33, 68, 0.12);
}

.selka-orders-table tbody tr.selka-orders-table__row--completed td.selka-orders-table__freeze {
  background-color: var(--selka-row-muted-bg);
}

.selka-orders-table tbody tr.selka-orders-table__row--selected td.selka-orders-table__freeze {
  background-color: #ebf1fe;
}

.selka-orders-table tbody tr:hover td.selka-orders-table__freeze {
  background-color: var(--selka-row-hover-bg);
}

.selka-orders-table tbody tr.selka-orders-table__row--selected:hover td.selka-orders-table__freeze {
  background-color: #ebf1fe;
}

.selka-orders-table thead .selka-orders-table__freeze {
  z-index: 15;
  background-color: #f5f6f9;
}

.selka-orders-table thead .selka-orders-table__freeze--check {
  z-index: 16;
}

.selka-orders-table thead .selka-orders-table__freeze--id {
  z-index: 17;
}

.selka-orders-table thead .selka-orders-table__freeze--date {
  z-index: 18;
}

.selka-orders-table thead .selka-orders-table__freeze--customer {
  z-index: 19;
}

.selka-orders-table__cell-pad {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  box-sizing: border-box;
}

.selka-orders-table__cell-total .selka-orders-table__cell-pad {
  justify-content: flex-end;
  width: 100%;
}

.selka-orders-table .selka-cell-expand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: auto;
  margin: 0;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  color: #0051f3;
}

.selka-orders-table .selka-cell-trigger {
  margin: 0;
}

.selka-orders-table .selka-cell-expand .selka-chevron {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  visibility: hidden;
}

.selka-orders-table .selka-cell-trigger:hover .selka-cell-expand {
  background: rgba(0, 81, 243, 0.04);
}

.selka-orders-table .selka-cell-trigger:hover .selka-cell-expand .selka-chevron {
  visibility: visible;
}

.selka-th-sortable {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  position: relative;
  font: inherit;
  font-weight: 500;
  line-height: 1;
  color: #68748d;
  cursor: pointer;
  text-align: left;
  vertical-align: middle;
}

.selka-th-sortable__label {
  color: inherit;
}

.selka-th-sortable:hover .selka-th-sortable__label {
  color: #0051f3;
}

.selka-orders-table thead .selka-th-sortable--active,
.selka-orders-table thead .selka-th-sortable--active .selka-th-sortable__label {
  color: #0051f3;
}

.selka-th-sortable__chevron {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 12px;
}

.selka-th-sortable--active .selka-th-sortable__chevron,
.selka-th-sortable:hover .selka-th-sortable__chevron {
  display: inline-flex;
}

.selka-th-sortable__chevron-icon {
  display: block;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.selka-th-sortable__chevron-icon--asc {
  transform: rotate(0deg);
}

.selka-th-sortable__chevron-icon--desc {
  transform: rotate(180deg);
}

.selka-th-sortable.selka-th-total {
  justify-content: flex-end;
  text-align: right;
}

.selka-th-total {
  text-align: right;
}

.selka-checkbox {
  display: inline-block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(129, 144, 174, 0.6);
  border-radius: 4px;
  background: #fff;
  box-sizing: border-box;
  vertical-align: middle;
}

.selka-checkbox--lg {
  width: 16px;
  height: 16px;
}

.selka-checkbox--checked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-color: #0051f3;
  background: #0051f3;
}

.selka-checkbox--checked img {
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(1);
}

.selka-pagination {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 12px 40px 24px 8px;
  position: sticky;
  bottom: 0;
  z-index: 25;
  background: #fff;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-pagination__summary {
  margin: 0;
  font-size: 12px;
  color: #68748d;
}

.selka-pagination__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selka-pagination__btn,
.selka-pagination__page {
  display: flex;
  min-width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
  cursor: pointer;
}

.selka-pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.selka-pagination__page--active {
  border-color: rgba(0, 81, 243, 0.08);
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
  font-weight: 500;
}

.selka-pagination--orders {
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
  padding: 0 40px 24px 8px;
  border-top: none;
  background: transparent;
  position: static;
  bottom: auto;
  z-index: auto;
}

.selka-pagination__cluster {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selka-pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selka-pagination__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-pagination__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.selka-pagination__nav img {
  display: block;
  width: 12px;
  height: 12px;
}

.selka-pagination__nav-icon--next {
  transform: rotate(180deg);
}

.selka-pagination--orders .selka-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #8190ae;
  cursor: pointer;
}

.selka-pagination--orders .selka-pagination__page--active {
  width: auto;
  min-width: 28px;
  padding: 0 12px;
  border-color: rgba(0, 81, 243, 0.08);
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
}

.selka-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}

.selka-pagination__ellipsis img {
  display: block;
  width: 16px;
  height: 4px;
}

.selka-pagination__page-size {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 120px;
  height: 28px;
  padding: 0 8px 0 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 400;
  color: #8190ae;
  cursor: pointer;
}

.selka-pagination__page-size img {
  width: 16px;
  height: 16px;
}

.selka-pagination--orders .selka-pagination__page:not(.selka-pagination__page--active):hover {
  border-color: rgba(0, 81, 243, 0.28);
  color: #0051f3;
}

.selka-pagination__page:not(.selka-pagination__page--active):hover,
.selka-pagination__btn:not(:disabled):hover {
  border-color: rgba(0, 81, 243, 0.28);
  color: #0051f3;
}

/* Orders > To Fulfill — card list */
.selka-table-wrap--fulfill {
  display: flex;
  flex-direction: column;
}

.selka-table-wrap--fulfill:has(.selka-fulfill-toolbar--selection)
  .selka-fulfill-card__actions
  .selka-fulfill-btn-split {
  opacity: 0.4;
  pointer-events: none;
}

/* Orders > To Ship */
.selka-ship-toolbar {
  flex-wrap: wrap;
  padding-left: 16px;
}

.selka-ship-vendors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.selka-ship-card__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 544px;
  min-width: 0;
}

.selka-ship-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-ship-status img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.selka-ship-status span {
  font-size: 14px;
  font-weight: 600;
  color: #8190ae;
}

.selka-ship-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  min-height: 132px;
  padding: 15px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.selka-ship-details__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 164px;
}

.selka-ship-vendor-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.selka-ship-vendor-logo {
  display: flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
}

.selka-ship-vendor-logo img {
  max-width: 28px;
  max-height: 12px;
  object-fit: contain;
}

.selka-ship-vendor-logo__text {
  font-size: 11px;
  font-weight: 700;
  color: #d40511;
  letter-spacing: 0.02em;
}

.selka-ship-details__label {
  margin: 0 0 4px;
  font-size: 12px;
  color: #8190ae;
}

.selka-ship-details__value {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-ship-details__value--link {
  color: #0051f3;
}

.selka-shipment-toolbar {
  padding-left: 16px;
}

.selka-fulfill-toolbar-shell {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  min-width: 0;
}

.selka-fulfill-toolbar-shell__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.selka-fulfill-toolbar-shell__viewport::-webkit-scrollbar {
  display: none;
}

.selka-fulfill-toolbar-shell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  width: 24px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
  transition: opacity 0.15s ease;
}

.selka-fulfill-toolbar-shell--overflow-right::after {
  opacity: 1;
}

.selka-fulfill-toolbar-shell .selka-fulfill-toolbar {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 100%;
  padding-right: 24px;
}

.selka-fulfill-toolbar-shell .selka-ship-toolbar {
  flex-wrap: nowrap;
}

.selka-fulfill-toolbar-shell .selka-ship-vendors {
  flex-wrap: nowrap;
}

.selka-fulfill-toolbar-shell .selka-fulfill-toolbar__group {
  flex-wrap: nowrap;
}

.selka-fulfill-toolbar-shell .selka-fulfill-check,
.selka-fulfill-toolbar-shell .selka-filter,
.selka-fulfill-toolbar-shell .selka-fulfill-sort {
  flex-shrink: 0;
  white-space: nowrap;
}

.selka-shipment-toolbar--completed {
  padding-left: 0;
}

/* Payment confirmation queue — match Figma two-column body (544px summary + actions) */
.selka-confirm-card .selka-confirm-card__body {
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-confirm-card__summary {
  flex: 1 1 auto;
  width: 100%;
  max-width: 544px;
  min-width: 0;
  min-height: 186px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}

.selka-confirm-card .selka-confirm-card__aside {
  flex: 0 0 179px;
  width: 179px;
  align-self: flex-start;
}

.selka-confirm-card__meta-value {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
}

.selka-confirm-card__meta-value--placed {
  color: #68748d;
}

.selka-confirm-card__meta-value--id {
  color: #0051f3;
}

/* Shipping / Completed queue cards — match Figma two-column body (544px + actions) */
.selka-shipment-card .selka-fulfill-card__body--shipment {
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-shipment-card .selka-ship-card__main--shipment {
  flex: 1 1 auto;
  width: 100%;
  max-width: 544px;
  min-width: 0;
}

.selka-shipment-card .selka-fulfill-card__aside--shipment {
  flex: 0 0 179px;
  width: 179px;
  align-self: flex-start;
}

.selka-shipment-card .selka-fulfill-card__actions {
  align-items: stretch;
}

.selka-ship-details--shipment {
  width: 100%;
  min-height: 132px;
}

.selka-ship-details--shipment-pickup {
  min-height: 240px;
}

.selka-ship-details__pickup-location {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-ship-details__value-sub {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  color: #8190ae;
  line-height: 1.4;
}

.selka-fulfill-btn-split--arranged-disabled .selka-fulfill-btn-split__main {
  opacity: 0.4;
  cursor: not-allowed;
}

.selka-fulfill-btn-split--arranged-disabled .selka-fulfill-btn-split__menu {
  cursor: not-allowed;
}

.selka-shipment-status {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 8px 8px 16px;
  border-radius: 12px;
}

.selka-shipment-status--in_delivery {
  border: 1px solid rgba(0, 81, 243, 0.08);
  background: rgba(0, 81, 243, 0.08);
}

.selka-shipment-status--delivered {
  border: 1px solid rgba(24, 143, 26, 0.08);
  background: rgba(24, 143, 26, 0.08);
}

.selka-shipment-status__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.selka-shipment-status__left img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.selka-shipment-status__time {
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
  white-space: nowrap;
}

.selka-shipment-status__label {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.selka-shipment-status--in_delivery .selka-shipment-status__label {
  color: #0051f3;
}

.selka-shipment-status--delivered .selka-shipment-status__label {
  color: #188f1a;
}

.selka-shipment-status__details {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
  white-space: nowrap;
}

.selka-shipment-status__details img {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selka-shipment-card__header--completed .selka-fulfill-card__check {
  align-self: center;
}

.selka-shipment-card__header--completed {
  align-items: center;
}

.selka-shipment-card__header-completed {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.selka-shipment-card__header-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
}

.selka-shipment-card__header-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.selka-shipment-card__header-meta {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
  white-space: nowrap;
}

.selka-fulfill-card__chip--items {
  color: #0051f3;
}

.selka-fulfill-btn-split--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.selka-btn-print-awb {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
  white-space: nowrap;
}

.selka-btn-print-awb img {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selka-fulfill-toolbar {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  padding: 0 40px 16px 0;
}

.selka-fulfill-toolbar--selection {
  flex-wrap: nowrap;
}

.selka-fulfill-toolbar--selection .selka-fulfill-btn-split {
  flex: 0 0 auto;
  width: auto;
}

.selka-fulfill-toolbar--selection .selka-fulfill-btn-split__main {
  flex: 0 0 auto;
}

.selka-fulfill-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #68748d;
  cursor: pointer;
}

.selka-fulfill-toolbar--selection .selka-fulfill-check {
  color: #0051f3;
}

.selka-fulfill-card__check {
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.selka-fulfill-toolbar__select {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #68748d;
  cursor: pointer;
}

.selka-fulfill-toolbar__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.selka-fulfill-toolbar__divider {
  flex-shrink: 0;
  width: 1px;
  height: 32px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-fulfill-toolbar__group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.selka-fulfill-toolbar__count {
  margin: 0;
  font-size: 12px;
  color: #68748d;
}

.selka-fulfill-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  padding: 8px 12px 8px 16px;
  background: rgba(129, 144, 174, 0.08);
  font: inherit;
  font-size: 12px;
  color: #0051f3;
  cursor: pointer;
}

.selka-fulfill-sort__label strong {
  font-weight: 600;
}

.selka-fulfill-sort img {
  width: 16px;
  height: 16px;
}

.selka-fulfill-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding-right: 40px;
  -webkit-overflow-scrolling: touch;
}

.selka-fulfill-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
  width: 100%;
  max-width: 900px;
}

.selka-fulfill-card {
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}

.selka-fulfill-card__header {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 40px;
  padding: 8px 16px;
  background: rgba(129, 144, 174, 0.08);
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-fulfill-card--selected .selka-fulfill-card__header {
  background: rgba(0, 81, 243, 0.08);
}

.selka-fulfill-card__header-main {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.selka-fulfill-card__customer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.selka-fulfill-card__customer-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-customer-avatar {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.12);
  font-size: 9.6px;
  font-weight: 600;
  color: #8190ae;
  flex-shrink: 0;
}

.selka-fulfill-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
}

.selka-fulfill-card__chip--muted {
  color: #68748d;
}

.selka-fulfill-card__chip img {
  width: 12px;
  height: 12px;
}

.selka-fulfill-card__badges {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.selka-fulfill-card__body {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  box-sizing: border-box;
  padding: 16px;
}

.selka-fulfill-card__items {
  flex: 1 1 auto;
  width: 100%;
  max-width: 544px;
  min-width: 0;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.selka-fulfill-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 8px 20px 8px 8px;
}

.selka-fulfill-line__product {
  display: flex;
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.selka-fulfill-line__info {
  min-width: 0;
}

.selka-fulfill-line__name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0051f3;
}

.selka-fulfill-line__meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: #68748d;
}

.selka-fulfill-line__end {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
}

.selka-fulfill-line__total {
  font-size: 12px;
  color: #68748d;
}

.selka-fulfill-line__qty {
  font-size: 14px;
  color: #0051f3;
  white-space: nowrap;
}

.selka-fulfill-line__qty-num {
  font-weight: 600;
}

.selka-fulfill-line__qty-unit {
  font-weight: 300;
}

.selka-fulfill-line-divider {
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-fulfill-card__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 179px;
  width: 179px;
  align-self: flex-start;
}

.selka-fulfill-card__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.selka-fulfill-btn-split {
  display: inline-flex;
  gap: 1px;
  width: 100%;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.selka-fulfill-card__actions .selka-fulfill-btn-split {
  display: flex;
  width: 100%;
}

.selka-fulfill-btn-split__main {
  flex: 1;
  border: none;
  border-radius: 8px 0 0 8px;
  padding: 8px 12px 8px 16px;
  background: var(--dark-metal-100);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.selka-fulfill-btn-split__menu {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  border: none;
  border-radius: 0 8px 8px 0;
  padding: 8px;
  background: var(--dark-metal-100);
  cursor: pointer;
}

.selka-fulfill-btn-split--disabled .selka-fulfill-btn-split__main {
  opacity: 0.4;
  cursor: default;
}

.selka-fulfill-btn-split--bulk-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.selka-fulfill-btn-split--bulk-disabled .selka-fulfill-btn-split__main,
.selka-fulfill-btn-split--bulk-disabled .selka-fulfill-btn-split__menu {
  cursor: not-allowed;
}

.selka-action-tooltip {
  position: fixed;
  z-index: 1300;
  max-width: 280px;
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
  font-size: 12px;
  line-height: 1.4;
  color: #68748d;
  pointer-events: none;
  text-align: center;
}

.selka-fulfill-btn-split__menu img {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.selka-fulfill-btn-split__dropdown {
  position: fixed;
  z-index: 1300;
  width: 180px;
}

.selka-fulfill-order-details {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  text-decoration: none;
}

.selka-fulfill-order-details img {
  width: 16px;
  height: 16px;
}

.selka-fulfill-card__meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-fulfill-card__meta-label {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  color: #8190ae;
}

.selka-fulfill-card__meta-value {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
}

.selka-order-id {
  font-weight: 600;
  color: #0051f3;
}

.selka-order-id--link:hover {
  text-decoration: underline;
}

.selka-cell-expand {
  display: flex;
  height: 34px;
  align-items: center;
  gap: 4px;
  margin: -8px 0;
  padding: 0 8px;
  border-radius: 4px;
}

.selka-cell-expand .selka-chevron {
  width: 8px;
  height: 8px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.selka-cell-trigger:hover .selka-chevron {
  opacity: 1;
}

.selka-cell-trigger {
  position: relative;
  min-width: 0;
  margin: -8px 0;
  overflow: visible;
}

.selka-cell-trigger:hover .selka-cell-expand {
  background: rgba(0, 81, 243, 0.12);
}

.selka-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 100px;
  border: 1px solid transparent;
  padding: 2px 8px 2px 3px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.selka-badge img {
  width: 12px;
  height: 12px;
}

.selka-badge--blue {
  background: rgba(0, 81, 243, 0.12);
  color: #0051f3;
}

.selka-badge--yellow {
  background: rgba(212, 177, 0, 0.12);
  color: #d4b100;
}

.selka-badge--green {
  background: rgba(24, 143, 26, 0.12);
  color: #188f1a;
}

.selka-badge__check {
  display: flex;
  width: 12px;
  height: 12px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: #188f1a;
}

.selka-badge__check img {
  width: 12px;
  height: 12px;
}

/* Products table */
.selka-products-table {
  --selka-products-col-gap: 16px;
  --selka-freeze-thumb-width: 56px;
  --selka-freeze-name-left: calc(
    var(--selka-freeze-check-width) + var(--selka-freeze-thumb-width)
  );
}

.selka-products-table__col-check {
  width: var(--selka-freeze-check-width);
}

.selka-products-table__col-thumb {
  width: var(--selka-freeze-thumb-width);
}

.selka-products-table thead th:not(.selka-orders-table__freeze) {
  padding-left: calc(var(--selka-products-col-gap) / 2);
  padding-right: calc(var(--selka-products-col-gap) / 2);
}

.selka-products-table tbody td:not(.selka-orders-table__freeze) {
  padding-left: calc(var(--selka-products-col-gap) / 2);
  padding-right: calc(var(--selka-products-col-gap) / 2);
}

.selka-products-table .selka-orders-table__freeze--check {
  padding: 10px calc(var(--selka-products-col-gap) / 2) 10px 16px;
}

.selka-products-table__freeze--thumb {
  left: var(--selka-freeze-check-width);
  z-index: 7;
  width: var(--selka-freeze-thumb-width);
  min-width: var(--selka-freeze-thumb-width);
  max-width: var(--selka-freeze-thumb-width);
  padding: 8px calc(var(--selka-products-col-gap) / 2);
}

.selka-products-table__freeze--name {
  left: var(--selka-freeze-name-left);
  z-index: 9;
  width: max-content;
  min-width: 0;
  max-width: none;
  padding: 10px calc(var(--selka-products-col-gap) / 2);
}

.selka-table-viewport-shell--scrolled .selka-products-table__freeze--name {
  border-right: 1px solid rgba(129, 144, 174, 0.2);
  box-shadow: 4px 0 12px -4px rgba(15, 33, 68, 0.12);
}

.selka-products-table .selka-product-name {
  max-width: none;
  overflow: visible;
  text-overflow: unset;
}

.selka-products-table thead .selka-products-table__freeze--thumb {
  z-index: 17;
}

.selka-products-table thead .selka-products-table__freeze--name {
  z-index: 19;
}

.selka-products-table__cell-price {
  text-align: right;
}

.selka-products-table__cell-sold {
  text-align: right;
  color: #0051f3;
}

.selka-products-table thead th {
  height: 48px;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
}

.selka-products-table thead .selka-orders-table__freeze--check,
.selka-products-table thead .selka-products-table__freeze--thumb,
.selka-products-table thead .selka-products-table__freeze--name {
  padding-top: 0;
  padding-bottom: 0;
}

.selka-products-table thead .selka-th-sort {
  vertical-align: middle;
}

.selka-products-table thead th.selka-products-table__cell-stock,
.selka-products-table thead th.selka-products-table__cell-price,
.selka-products-table thead th.selka-products-table__cell-sold {
  text-align: right;
}

.selka-products-table thead .selka-th-sort--align-right {
  margin-left: 0;
}

.selka-products-table tbody tr:hover .selka-product-name {
  text-decoration: none;
}

.selka-product-thumb {
  display: flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  background: #fff;
}

.selka-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.selka-product-thumb--placeholder {
  padding: 8px;
  border-color: rgba(129, 144, 174, 0.12);
}

.selka-product-thumb--placeholder img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.selka-product-name {
  display: block;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #0f2144;
}

.selka-product-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.selka-product-badge--published {
  background: rgba(24, 143, 26, 0.12);
  color: #188f1a;
}

.selka-product-badge--draft {
  background: rgba(0, 81, 243, 0.12);
  color: #0051f3;
}

.selka-product-badge--archived {
  background: rgba(212, 177, 0, 0.12);
  color: #d4b100;
}

.selka-product-stock {
  display: inline-block;
  font-size: 12px;
  line-height: normal;
}

.selka-product-stock strong {
  font-weight: 600;
  color: #0f2144;
}

.selka-product-stock__muted {
  font-weight: 400;
  color: #8190ae;
}

.selka-product-stock--out strong,
.selka-product-stock--out .selka-product-stock__muted {
  color: #c62225;
}

.selka-product-stock--expandable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  max-width: 120px;
  min-height: 32px;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}

.selka-product-stock--expandable strong {
  color: #0f2144;
}

.selka-product-stock--expandable .selka-product-stock__muted {
  color: #8190ae;
}

.selka-product-stock__chevron {
  flex-shrink: 0;
  transform: rotate(180deg);
}

.selka-product-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  color: #0f2144;
  white-space: nowrap;
}

.selka-product-chip--muted {
  color: #68748d;
}

.selka-product-chip--more {
  color: #0051f3;
}

.selka-product-collections {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  max-width: 156px;
}

.selka-product-collections--interactive {
  cursor: default;
}

.selka-product-collections-empty {
  color: #8190ae;
  font-size: 12px;
}

.selka-product-collections-popover__title {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: #0f2144;
}

.selka-product-collections-popover__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selka-product-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.selka-product-price__current {
  font-size: 12px;
  color: #0051f3;
}

.selka-product-price__compare {
  font-size: 10px;
  color: #8190ae;
  text-decoration: line-through;
}

.selka-product-stock--table {
  display: block;
  font-size: 12px;
  color: #68748d;
  text-align: right;
}

.selka-products-table__cell-stock {
  text-align: right;
}

.selka-products-table tbody tr:hover {
  background: #f5f8ff;
}

.selka-products-table tbody tr.selka-products-table__row--selected td {
  background: #ebf1fe;
}

.selka-products-table tbody tr.selka-products-table__row--selected:hover td {
  background: #ebf1fe;
}

.selka-products-table .selka-product-name--link {
  font-weight: 600;
  color: #0051f3;
}

.selka-products-table tbody tr:hover .selka-product-name--link {
  text-decoration: underline;
}

.selka-products-table__checkbox {
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}

.selka-products-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding-right: 40px;
}

.selka-products-filters .selka-toolbar {
  margin-top: 0;
}

.selka-products-filters .selka-toolbar-divider {
  width: 100%;
  margin: 0;
}

.selka-products-filters .selka-orders-subtoolbar {
  margin-top: 0;
  padding-left: 16px;
  padding-right: 0;
}

.selka-products-table-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  margin-top: 16px;
}

.selka-products-table-block .selka-table-wrap {
  margin-top: 0;
}

.selka-pagination--products {
  justify-content: center;
  width: 100%;
  padding-right: 40px;
  box-sizing: border-box;
}

.selka-popover--collections {
  left: 0;
  top: calc(100% + 8px);
  min-width: 200px;
}

.selka-popover {
  position: absolute;
  z-index: 100;
  width: max-content;
  max-width: 272px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.selka-cell-trigger:hover .selka-popover:not(.selka-popover--portal) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.selka-popover--portal {
  position: fixed;
  z-index: 1100;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.selka-popover--portal.selka-popover--align-right {
  transform: translateX(-100%);
}

.selka-popover--customer {
  left: 0;
  top: calc(100% + 8px);
  width: 212px;
}

.selka-popover--items {
  right: 0;
  left: auto;
  top: calc(100% + 8px);
  width: 272px;
}

.selka-popover h4 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 500;
}

.selka-popover p {
  margin: 0;
  font-size: 12px;
}

.selka-popover__muted {
  color: #8190ae;
}

.selka-popover__link {
  color: #0051f3;
}

.selka-popover__btn {
  display: flex;
  width: 100%;
  height: 32px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.12);
  color: #0051f3;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.selka-item-list {
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  overflow: hidden;
}

.selka-item-row {
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
}

.selka-item-row + .selka-item-row {
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-item-thumb {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
}

.selka-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-item-meta div p {
  margin: 0;
  font-size: 12px;
}

.selka-item-meta div p:last-child {
  color: #68748d;
}

/* —— Responsive (viewport width; mobile = 768px and below) —— */

@media (max-width: 1023px) and (min-width: 768px) {
  .selka-sidebar {
    width: 72px;
    padding: 24px 12px 20px;
  }

  .selka-sidebar__brand span,
  .selka-nav__link > span:not(.selka-nav__label-group),
  .selka-nav__label-group > span:not(.selka-nav__badge),
  .selka-sidebar__footer > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .selka-nav__label-group {
    position: absolute;
    width: 0;
    height: 0;
    overflow: visible;
  }

  .selka-nav__label-group .selka-nav__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    min-width: 20px;
    height: 14px;
    padding: 0 4px;
    font-size: 9px;
  }

  .selka-nav__link {
    position: relative;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    padding: 0;
  }

  .selka-panel__inner {
    padding: 32px 0 0 32px;
    border-radius: 32px 0 0 0;
  }

  .selka-panel__inner > .selka-page-title,
  .selka-panel__inner > .selka-toolbar {
    padding-right: 32px;
  }

  .selka-toolbar-divider {
    margin-right: 32px;
  }

  .selka-table-viewport {
    padding-right: 32px;
  }

  .selka-pagination {
    padding-right: 32px;
  }

  .selka-fulfill-toolbar {
    padding-right: 32px;
  }

  .selka-fulfill-scroll {
    padding-right: 32px;
  }
}

@media (max-width: 1023px) {
  .selka-topbar {
    height: 72px;
    padding-right: 16px;
  }

  .selka-panel__inner {
    padding: 24px 0 0 24px;
    border-radius: 24px 0 0 0;
  }

  .selka-panel__inner > .selka-page-title,
  .selka-panel__inner > .selka-toolbar {
    padding-right: 24px;
  }

  .selka-toolbar-divider {
    margin-right: 24px;
  }

  .selka-table-viewport {
    padding-right: 24px;
  }

  .selka-pagination {
    padding-right: 24px;
  }

  .selka-fulfill-toolbar {
    padding-right: 24px;
  }

  .selka-fulfill-scroll {
    padding-right: 24px;
  }

  .selka-page-title {
    font-size: 18px;
  }

  .selka-toolbar {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .selka-btn-primary {
    flex-shrink: 0;
  }
}

@media (max-width: 767px) {
  body.selka-nav-open {
    overflow: hidden;
  }

  .selka-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 40;
    border: none;
    padding: 0;
    background: rgba(15, 33, 68, 0.35);
    cursor: pointer;
  }

  .selka-admin--nav-open .selka-sidebar-backdrop {
    display: block;
  }

  .selka-sidebar {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(280px, 85vw);
    padding: 24px 20px 20px;
    background: #f7f8fa;
    box-shadow: 4px 0 24px rgba(15, 33, 68, 0.12);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .selka-admin--nav-open .selka-sidebar {
    transform: translateX(0);
  }

  .selka-sidebar__brand span,
  .selka-nav__link > span:not(.selka-nav__label-group),
  .selka-nav__label-group > span:not(.selka-nav__badge),
  .selka-sidebar__footer > span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .selka-nav__link {
    width: 100%;
    height: 56px;
    justify-content: flex-start;
    padding: 16px;
    margin: 0;
  }

  .selka-nav__label-group .selka-nav__badge {
    position: static;
    min-width: 32px;
    height: 16px;
    font-size: 10px;
  }

  .selka-topbar {
    height: 64px;
    justify-content: space-between;
    padding: 0 16px;
  }

  .selka-topbar__menu {
    display: flex;
  }

  .selka-topbar__profile-text {
    display: none;
  }

  .selka-panel__inner {
    padding: 16px 0 0 16px;
    border-radius: 16px 0 0 0;
  }

  .selka-panel__inner > .selka-page-title,
  .selka-panel__inner > .selka-toolbar {
    padding-right: 16px;
  }

  .selka-toolbar-divider {
    margin-right: 16px;
  }

  .selka-table-viewport {
    padding-right: 16px;
  }

  .selka-pagination {
    padding-right: 16px;
  }

  .selka-fulfill-toolbar {
    padding-right: 16px;
  }

  .selka-fulfill-scroll {
    padding-right: 16px;
  }

  .selka-fulfill-list {
    max-width: none;
  }

  .selka-fulfill-card__body {
    flex-wrap: wrap;
  }

  .selka-fulfill-card__items {
    flex: 1 1 100%;
    max-width: none;
  }

  .selka-fulfill-card__aside {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .selka-fulfill-card__header-main {
    flex-direction: column;
    align-items: flex-start;
  }

  .selka-fulfill-card__badges {
    justify-content: flex-start;
  }

  .selka-shipment-card .selka-fulfill-card__body--shipment {
    flex-wrap: wrap;
  }

  .selka-shipment-card .selka-ship-card__main--shipment {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .selka-shipment-card .selka-fulfill-card__aside--shipment {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .selka-shipment-card__header-completed {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .selka-shipment-card__header-meta {
    align-self: flex-end;
  }

  .selka-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .selka-filters {
    width: 100%;
  }

  .selka-btn-primary {
    width: 100%;
    justify-content: center;
  }

  .selka-orders-table thead th,
  .selka-orders-table tbody td {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Desktop: undo mobile drawer / stacked toolbar when viewport is wide enough */
@media (min-width: 768px) {
  .selka-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    height: 100dvh;
    transform: none;
    z-index: 50;
    box-shadow: none;
  }

  .selka-main {
    margin-left: 72px;
  }

  .selka-sidebar-backdrop {
    display: none !important;
  }

  .selka-topbar__menu {
    display: none !important;
  }

  .selka-topbar {
    justify-content: flex-end;
    height: 80px;
    padding: 0 20px 0 0;
  }

  .selka-topbar__profile-text {
    display: block;
  }

  .selka-toolbar {
    flex-direction: row;
    align-items: center;
  }

  .selka-filters {
    width: auto;
  }

  .selka-btn-primary {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .selka-sidebar {
    width: 240px;
    padding: 36px 20px 20px;
  }

  .selka-main {
    margin-left: 240px;
  }

  .selka-sidebar__brand span,
  .selka-nav__link > span:not(.selka-nav__label-group),
  .selka-nav__label-group > span:not(.selka-nav__badge),
  .selka-sidebar__footer > span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .selka-nav__link {
    width: 100%;
    height: 56px;
    justify-content: flex-start;
    padding: 16px;
    margin: 0;
  }

  .selka-nav__label-group .selka-nav__badge {
    position: static;
    min-width: 32px;
    height: 16px;
    font-size: 10px;
  }

  .selka-panel__inner {
    padding: 40px 0 0 40px;
    border-radius: 40px 0 0 0;
  }
}

@media (max-width: 479px) {
  .selka-filter {
    padding: 6px 12px;
    font-size: 11px;
  }

  .selka-page-title {
    font-size: 16px;
  }
}

/* Order detail */

.selka-order-detail {
  display: flex;
  flex: 1;
  align-self: stretch;
  min-height: 0;
  height: 100%;
  gap: 20px;
  overflow: hidden;
  padding: 0 60px 0 0;
  box-sizing: border-box;
}

.selka-order-detail__main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  min-height: 0;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-right: none;
  border-bottom: none;
  border-radius: 40px 40px 0 0;
  background: #fff;
  overflow: hidden;
}

.selka-order-detail__header {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 40px 40px 12px;
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
}

.selka-order-detail__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 48px;
  background: #fff;
}

.selka-order-detail__body {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px;
}

.selka-order-detail__sections {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.selka-order-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-order-detail__breadcrumb-link {
  display: flex;
  line-height: 0;
}

.selka-order-detail__breadcrumb h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-order-detail__breadcrumb-icon {
  /* Metal 100 #8190ae */
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-order-detail__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.selka-order-detail__action-split {
  position: relative;
  flex: 0 0 auto;
  width: auto;
}

.selka-order-detail__action-menu {
  position: absolute;
  right: 0;
  z-index: 10;
  width: 180px;
}

.selka-order-detail__stepper {
  display: grid;
  grid-template-columns: 166px 1fr 166px 1fr 166px 1fr 166px;
  align-items: start;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

.selka-order-detail__step {
  display: flex;
  width: 166px;
  flex-shrink: 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.selka-order-detail__step-copy {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.selka-order-detail__step-check {
  position: absolute;
  top: 37px;
  left: 37px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background: #0051f3;
  pointer-events: none;
}

.selka-order-detail__step-check-icon {
  display: block;
  flex-shrink: 0;
}

.selka-order-detail__step-connector {
  align-self: start;
  width: calc(100% + 66px);
  height: 0;
  margin-top: 50px;
  margin-left: -33px;
  margin-right: -33px;
  border-top: 1px dashed rgba(129, 144, 174, 0.28);
}

.selka-order-detail__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 20px;
  background: #fff;
}

.selka-order-detail__panel--energy {
  border-color: #0051f3;
}

.selka-order-detail__panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.selka-order-detail__panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selka-order-detail__panel-title h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-order-detail__panel-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.selka-order-detail__panel-toggle {
  display: flex;
  align-items: center;
  padding: 4px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
}

.selka-order-detail__panel-toggle:not(:disabled):hover {
  background: rgba(129, 144, 174, 0.12);
}

.selka-order-detail__panel-toggle img {
  /* Energy 100 #0051f3 */
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%)
    hue-rotate(212deg) brightness(101%) contrast(101%);
}

.selka-order-detail__panel-chevron--open {
  transform: rotate(180deg);
}

.selka-order-detail__panel-body {
  width: 100%;
}

.selka-order-detail__price-divider {
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-order-detail__split--payment {
  align-items: stretch;
}

.selka-order-detail__payment-aside {
  gap: 16px;
  padding: 24px 8px;
}

.selka-order-detail__payment-aside-copy {
  text-align: center;
}

.selka-order-detail__payment-aside-prefix {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-order-detail__payment-aside-method {
  margin: 0;
  font-size: 14px;
  color: #0f2144;
}

.selka-order-detail__aside-card {
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 20px;
  background: #fff;
  padding: 20px 0 24px;
}

.selka-order-detail__aside-top {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
}

.selka-order-detail__aside-divider {
  height: 1px;
  margin: 24px 0;
  background: rgba(129, 144, 174, 0.12);
}

.selka-order-detail__aside-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 20px;
  font-size: 14px;
}

.selka-order-detail__split {
  display: flex;
  gap: 8px;
}

.selka-order-detail__split-main {
  flex: 1;
  min-width: 0;
}

.selka-order-detail__split-aside {
  width: 243px;
  flex-shrink: 0;
}

.selka-order-detail__aside {
  width: 288px;
  flex-shrink: 0;
  min-width: 0;
}

.selka-order-detail__confirm-payment-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: var(--dark-metal-100);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.selka-order-detail__payment-proof-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: transparent;
  color: #0051f3;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  cursor: pointer;
}

.selka-order-detail__payment-proof-btn:not(:disabled):hover {
  background: rgba(129, 144, 174, 0.08);
}

.selka-order-detail__split--items {
  align-items: stretch;
}

.selka-order-detail__items-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 240px;
  height: 180px;
  padding: 0 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  box-sizing: border-box;
}

.selka-order-detail__items-aside--simple {
  width: 243px;
  padding: 32px 8px;
}

.selka-order-detail__items-aside-summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.selka-order-detail__items-aside-label {
  margin: 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-order-detail__items-aside-count {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0051f3;
}

.selka-order-detail__items-aside .selka-fulfill-btn-split {
  width: auto;
  gap: 1px;
}

.selka-order-detail__items-fulfill-btn {
  flex-shrink: 0;
}

.selka-order-detail__items-fulfill-btn .selka-fulfill-btn-split__main {
  flex: 0 0 auto;
}

.selka-order-detail__items-packed-btn {
  flex-shrink: 0;
}

.selka-order-detail__shipping-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 48px 24px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}

.selka-order-detail__shipping-empty-title {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-order-detail__shipping-empty-sub {
  margin: 0 0 12px;
  font-size: 12px;
  color: #8190ae;
  max-width: 280px;
}

.selka-order-detail__shipping-arrange-btn {
  width: auto;
  gap: 1px;
}

.selka-order-detail__shipping-arrange-btn .selka-fulfill-btn-split__main {
  flex: 0 0 auto;
}

.selka-order-detail__split--shipping {
  align-items: stretch;
}

.selka-order-detail__shipping-details {
  flex: 1;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
}

.selka-order-detail__shipping-details-grid {
  display: flex;
  gap: 20px;
}

.selka-order-detail__shipping-details-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.selka-order-detail__shipping-details-col:first-child {
  width: 164px;
  flex-shrink: 0;
}

.selka-order-detail__shipping-details-col:last-child {
  flex: 1;
  min-width: 0;
}

.selka-order-detail__shipping-vendor {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.selka-order-detail__shipping-vendor-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
}

.selka-order-detail__shipping-vendor-logo img {
  width: 28px;
  height: auto;
  object-fit: contain;
}

.selka-order-detail__shipping-vendor-fallback {
  font-size: 10px;
  font-weight: 600;
  color: #0f2144;
  text-align: center;
}

.selka-order-detail__shipping-field-label {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-order-detail__shipping-field-value {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-order-detail__shipping-field-value--energy {
  color: #0051f3;
}

.selka-order-detail__shipping-field-address {
  margin: 4px 0 0;
  font-size: 11px;
  color: #8190ae;
  line-height: normal;
}

.selka-order-detail__shipping-status-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  padding: 0 20px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-order-detail__shipping-status-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-order-detail__shipping-status-label {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-order-detail__shipping-status-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0051f3;
}

.selka-order-detail__shipping-status-title--delivered {
  color: #188f1a;
}

.selka-order-detail__shipping-status-desc {
  margin: 0;
  font-size: 12px;
  color: #68748d;
}

.selka-order-detail__shipping-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  color: #0051f3;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.selka-order-detail__shipping-detail-btn:not(:disabled):hover {
  background: rgba(129, 144, 174, 0.12);
}

/* Shipment details modal (Figma 131:4690 / 543:3811) */
.selka-modal--shipment-details {
  z-index: 1000;
}

.selka-shipment-details-dialog {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(600px, 100%);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}

.selka-shipment-details-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-shipment-details-dialog__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-shipment-details-dialog__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-shipment-details-dialog__close {
  flex-shrink: 0;
}

.selka-shipment-details-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
}

.selka-shipment-details-dialog__timeline-wrap {
  position: relative;
  width: 100%;
  max-height: 430px;
  overflow-y: auto;
  padding: 24px 24px 24px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-shipment-details-dialog__timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.selka-shipment-details-dialog__timeline-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 58px 17px minmax(0, 1fr);
  gap: 20px;
  align-items: stretch;
}

.selka-shipment-details-dialog__timeline-time {
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: right;
  font-size: 12px;
  color: #8190ae;
}

.selka-shipment-details-dialog__timeline-date {
  margin: 0;
  font-weight: 600;
}

.selka-shipment-details-dialog__timeline-clock {
  margin: 0;
  font-weight: 400;
}

.selka-shipment-details-dialog__timeline-track {
  position: relative;
  display: flex;
  justify-content: center;
  align-self: stretch;
  padding-top: 2px;
}

.selka-shipment-details-dialog__timeline-item:not(:last-child)
  .selka-shipment-details-dialog__timeline-track::after {
  content: "";
  position: absolute;
  top: 17px;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: rgba(129, 144, 174, 0.28);
}

.selka-shipment-details-dialog__timeline-dot {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: #8190ae;
  box-sizing: border-box;
}

.selka-shipment-details-dialog__timeline-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.selka-shipment-details-dialog__timeline-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #8190ae;
}

.selka-shipment-details-dialog__timeline-desc {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-shipment-details-dialog__timeline-item--active
  .selka-shipment-details-dialog__timeline-time,
.selka-shipment-details-dialog__timeline-item--active
  .selka-shipment-details-dialog__timeline-date {
  color: #0051f3;
}

.selka-shipment-details-dialog__timeline-item--active
  .selka-shipment-details-dialog__timeline-clock {
  color: #68748d;
}

.selka-shipment-details-dialog__timeline-item--active
  .selka-shipment-details-dialog__timeline-dot {
  background: #0051f3;
}

.selka-shipment-details-dialog__timeline-item--active
  .selka-shipment-details-dialog__timeline-title {
  color: #0051f3;
}

.selka-shipment-details-dialog__timeline-item--active
  .selka-shipment-details-dialog__timeline-desc {
  color: #68748d;
}

.selka-shipment-details-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.selka-shipment-details-dialog__delivered-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--energy);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.selka-shipment-details-dialog__delivered-btn:not(:disabled):hover {
  background: #0f2d5c;
}

.selka-shipment-details-dialog__cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  color: #c62225;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.selka-shipment-details-dialog__cancel-btn:not(:disabled):hover {
  background: rgba(129, 144, 174, 0.12);
}

/* Cancel shipment modal (Figma 142:4942) */
.selka-modal--cancel-shipment {
  z-index: 1001;
}

.selka-cancel-shipment-dialog {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(470px, 100%);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}

.selka-cancel-shipment-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-cancel-shipment-dialog__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-cancel-shipment-dialog__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-cancel-shipment-dialog__label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-cancel-shipment-dialog__reasons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-cancel-shipment-dialog__reason {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  color: #68748d;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.selka-cancel-shipment-dialog__reason--selected {
  border-color: #0051f3;
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
}

.selka-cancel-shipment-dialog__reason-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 1px solid rgba(129, 144, 174, 0.6);
  border-radius: 4px;
  background: #fff;
}

.selka-cancel-shipment-dialog__reason-check--selected {
  border-color: #0051f3;
  background: #0051f3;
}

.selka-cancel-shipment-dialog__reason-check--selected img {
  filter: brightness(0) invert(1);
}

.selka-cancel-shipment-dialog__notes {
  width: 100%;
  min-height: 60px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  color: #0f2144;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  resize: vertical;
}

.selka-cancel-shipment-dialog__notes::placeholder {
  color: #8190ae;
}

.selka-cancel-shipment-dialog__notes:focus {
  outline: none;
  border-color: #0051f3;
}

.selka-cancel-shipment-dialog__footer {
  display: flex;
  gap: 8px;
  align-items: center;
}

.selka-cancel-shipment-dialog__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  color: #0051f3;
  font-size: 14px;
  font-weight: 500;
}

.selka-cancel-shipment-dialog__confirm-btn {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 4px 8px 16px;
  border: none;
  border-radius: 8px;
  background: #c62225;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.selka-cancel-shipment-dialog__confirm-btn:not(:disabled):hover {
  background: #a81d20;
}

/* Arrange shipment modal (Figma 85:2615) */
.selka-modal--arrange-shipment {
  padding: 24px;
}

/* Selected orders dialog (Figma 124:3971) */
.selka-modal--selected-orders {
  z-index: 1001;
}

.selka-selected-orders-dialog {
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-selected-orders-dialog__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 24px 0;
}

.selka-selected-orders-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-selected-orders-dialog__title {
  margin: 0;
  max-width: 342px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #0f2144;
}

.selka-selected-orders-dialog__title-accent {
  color: var(--energy-100, #0051f3);
}

.selka-selected-orders-dialog__close {
  flex-shrink: 0;
  font-size: 12px;
}

.selka-selected-orders-dialog__table {
  width: 100%;
  padding-bottom: 40px;
}

.selka-selected-orders-dialog__table-head,
.selka-selected-orders-dialog__table-row {
  display: grid;
  grid-template-columns: 100px 100px 60px 100px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  font-size: 12px;
}

.selka-selected-orders-dialog__table-head {
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  background: rgba(129, 144, 174, 0.08);
  color: #68748d;
  font-weight: 500;
}

.selka-selected-orders-dialog__table-row {
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 0 0 16px 16px;
  color: #0f2144;
}

.selka-selected-orders-dialog__order-id {
  font-weight: 600;
  color: var(--energy-100, #0051f3);
}

/* Pickup exit confirm (Figma 124:3952) */
.selka-modal--pickup-exit-confirm {
  z-index: 1001;
}

.selka-pickup-exit-confirm {
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-pickup-exit-confirm__body {
  padding: 24px 24px 0;
  text-align: center;
}

.selka-pickup-exit-confirm__title {
  margin: 0;
  padding-top: 40px;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-pickup-exit-confirm__subtitle {
  margin: 10px 0 0;
  padding-bottom: 40px;
  font-size: 14px;
  color: #68748d;
}

.selka-pickup-exit-confirm__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 21px 24px 24px;
}

.selka-pickup-exit-confirm__btn-exit {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  padding: 8px 4px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* Pickup arrangement confirm (Figma 124:3737) */
.selka-modal--pickup-arrangement-confirm {
  z-index: 1002;
}

.selka-pickup-arrangement-confirm {
  display: flex;
  flex-direction: column;
  width: min(332px, 100%);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-pickup-arrangement-confirm__body {
  padding: 24px 24px 0;
  text-align: center;
}

.selka-pickup-arrangement-confirm__title {
  margin: 0;
  padding-top: 40px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: #0f2144;
}

.selka-pickup-arrangement-confirm__title-accent {
  color: var(--energy-100, #0051f3);
}

.selka-pickup-arrangement-confirm__subtitle {
  margin: 10px 0 0;
  padding-bottom: 40px;
  font-size: 14px;
  color: #68748d;
}

.selka-pickup-arrangement-confirm__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 21px 24px 24px;
}

.selka-pickup-arrangement-confirm__btn-confirm {
  flex: 1;
  width: auto;
  min-width: 0;
}

/* Pickup arrangement success (Figma 124:3377) */
.selka-modal--pickup-arrangement-success {
  z-index: 1003;
}

.selka-pickup-arrangement-success {
  display: flex;
  flex-direction: column;
  width: min(882px, 100%);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-pickup-arrangement-success__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 24px 0;
}

.selka-pickup-arrangement-success__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.selka-pickup-arrangement-success__head-copy {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 0;
}

.selka-pickup-arrangement-success__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--energy-100, #0051f3);
  flex-shrink: 0;
}

.selka-pickup-arrangement-success__badge-icon {
  filter: brightness(0) invert(1);
}

.selka-pickup-arrangement-success__head-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.selka-pickup-arrangement-success__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-pickup-arrangement-success__subtitle {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-pickup-arrangement-success__close {
  flex-shrink: 0;
  font-size: 12px;
}

.selka-pickup-arrangement-success__table {
  width: 100%;
  padding-bottom: 40px;
}

.selka-pickup-arrangement-success__table-head,
.selka-pickup-arrangement-success__table-row {
  display: grid;
  grid-template-columns: 100px 100px 60px 120px 100px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 12px 16px 12px 16px;
  font-size: 12px;
}

.selka-pickup-arrangement-success__table-head {
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  background: rgba(129, 144, 174, 0.08);
  color: #68748d;
  font-weight: 500;
}

.selka-pickup-arrangement-success__table-row {
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 0 0 16px 16px;
  color: #0f2144;
}

.selka-pickup-arrangement-success__order-id,
.selka-pickup-arrangement-success__tracking {
  font-weight: 600;
  color: var(--energy-100, #0051f3);
}

.selka-pickup-arrangement-success__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 21px 24px 24px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-pickup-arrangement-success__btn-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  padding: 8px 4px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  color: var(--energy-100, #0051f3);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.selka-pickup-arrangement-success__btn-print {
  width: 160px;
  padding: 8px 12px 8px 16px;
}

.selka-pickup-arrangement-success__btn-print-icon {
  filter: brightness(0) invert(1);
}

.selka-arrange-shipment-modal {
  display: flex;
  flex-direction: column;
  width: min(600px, 100%);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-arrange-shipment-modal--pickup {
  width: min(882px, 100%);
  overflow: visible;
}

.selka-arrange-shipment-modal--pickup .selka-arrange-shipment-modal__main {
  overflow: visible;
}

.selka-arrange-shipment-modal__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 24px 32px;
}

.selka-arrange-shipment-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-arrange-shipment-modal__head-copy {
  flex: 1;
  min-width: 0;
}

.selka-arrange-shipment-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-arrange-shipment-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-arrange-shipment-modal__subtitle--pickup {
  color: #68748d;
}

.selka-arrange-shipment-modal__close {
  flex-shrink: 0;
}

.selka-arrange-shipment-modal__options {
  display: flex;
  gap: 8px;
  min-height: 200px;
}

.selka-arrange-shipment-modal__option {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  text-align: center;
  cursor: pointer;
}

.selka-arrange-shipment-modal__option--selected {
  border-color: #0051f3;
  background: rgba(0, 81, 243, 0.08);
}

.selka-arrange-shipment-modal__option--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.selka-arrange-shipment-modal__option-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.selka-arrange-shipment-modal__option-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #8190ae;
}

.selka-arrange-shipment-modal__option-desc {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-arrange-shipment-modal__option--selected
  .selka-arrange-shipment-modal__option-title,
.selka-arrange-shipment-modal__option--selected
  .selka-arrange-shipment-modal__option-desc {
  color: #0051f3;
}

.selka-arrange-shipment-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 21px 24px 24px;
  border-radius: 0 0 24px 24px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-arrange-shipment-modal__footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.selka-arrange-shipment-modal__footer-label {
  margin: 0;
  font-size: 14px;
  color: #68748d;
  white-space: nowrap;
}

.selka-arrange-shipment-modal__footer-chips {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selka-arrange-shipment-modal__count-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 6px 12px 6px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  color: #0051f3;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.selka-arrange-shipment-modal__vendor-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 33px;
  padding: 10px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  box-sizing: border-box;
}

.selka-arrange-shipment-modal__vendor-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.selka-arrange-shipment-modal__vendor-name {
  font-size: 10px;
  font-weight: 600;
  color: #68748d;
  text-align: center;
}

.selka-arrange-shipment-modal__btn-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 160px;
  height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}

.selka-arrange-shipment-modal__btn-next-icon {
  filter: brightness(0) invert(1);
}

.selka-arrange-shipment-modal__btn-next--disabled {
  opacity: 0.5;
  cursor: default;
}

.selka-arrange-shipment-modal__pickup-body {
  display: flex;
  gap: 40px;
  align-items: stretch;
  width: 100%;
}

.selka-arrange-shipment-modal__pickup-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 347px;
  flex-shrink: 0;
  padding: 20px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
}

.selka-arrange-shipment-modal__pickup-card-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-arrange-shipment-modal__pickup-card-icon {
  display: block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.selka-arrange-shipment-modal__pickup-card-title {
  margin: 0;
  font-family: var(--font-family-sans, "DM Sans", system-ui, sans-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--energy-100, #0051f3);
}

.selka-arrange-shipment-modal__pickup-card-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-arrange-shipment-modal__pickup-card-desc {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-arrange-shipment-modal__pickup-card-desc p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: #68748d;
}

.selka-arrange-shipment-modal__pickup-card-desc strong {
  font-weight: 600;
}

.selka-arrange-shipment-modal__pickup-card-subnote {
  font-size: 12px;
  color: #68748d;
}

.selka-arrange-shipment-modal__pickup-card-link {
  margin: 0;
  font-size: 11px;
  color: var(--energy-100, #0051f3);
}

.selka-arrange-shipment-modal__pickup-card-link a {
  color: var(--energy-100, #0051f3);
  text-decoration: underline;
}

.selka-arrange-shipment-modal__pickup-schedule {
  display: flex;
  gap: 16px;
  flex-shrink: 0;
}

.selka-arrange-shipment-modal__pickup-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 225px;
}

.selka-arrange-shipment-modal__pickup-column--time {
  width: 201px;
  overflow: visible;
}

.selka-arrange-shipment-modal__pickup-field-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 54px;
}

.selka-arrange-shipment-modal__pickup-field-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-arrange-shipment-modal__pickup-field-hint {
  margin: 0;
  font-size: 12px;
  color: #68748d;
}

.selka-arrange-shipment-modal__date-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 200px;
}

.selka-arrange-shipment-modal__date-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  color: #68748d;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.selka-arrange-shipment-modal__date-option--selected {
  border-color: var(--energy-100, #0051f3);
  background: rgba(0, 81, 243, 0.08);
  color: var(--energy-100, #0051f3);
}

.selka-arrange-shipment-modal__date-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(129, 144, 174, 0.6);
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
}

.selka-arrange-shipment-modal__date-check--selected {
  border-color: #0051f3;
  background: #0051f3;
}

.selka-arrange-shipment-modal__date-check-icon {
  filter: brightness(0) invert(1);
}

.selka-arrange-shipment-modal__time-select {
  position: relative;
  width: 100%;
}

.selka-arrange-shipment-modal__time-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
}

.selka-arrange-shipment-modal__time-select--open .selka-arrange-shipment-modal__time-trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}

.selka-arrange-shipment-modal__time-trigger-value {
  font-size: 14px;
  color: #68748d;
}

.selka-arrange-shipment-modal__time-trigger-value--selected {
  color: var(--energy-100, #0051f3);
}

.selka-arrange-shipment-modal__time-menu {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.06);
}

.selka-arrange-shipment-modal__time-menu.selka-dropdown-menu--below {
  top: 100%;
  bottom: auto;
  border-top: none;
  border-radius: 0 0 12px 12px;
}

.selka-arrange-shipment-modal__time-menu.selka-dropdown-menu--above {
  top: auto;
  bottom: 100%;
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}

.selka-arrange-shipment-modal__time-option {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 16px;
  border: none;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
  background: transparent;
  color: #0f2144;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

.selka-arrange-shipment-modal__time-option:first-child {
  border-top: none;
}

.selka-arrange-shipment-modal__time-option--disabled {
  color: rgba(129, 144, 174, 0.28);
  cursor: default;
}

.selka-arrange-shipment-modal__time-option--selected {
  color: var(--energy-100, #0051f3);
}

.selka-arrange-shipment-modal__pickup-divider {
  width: 1px;
  align-self: stretch;
  min-height: 256px;
  background: rgba(129, 144, 174, 0.12);
  flex-shrink: 0;
}

.selka-arrange-shipment-modal__pickup-location {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 422px;
}

.selka-arrange-shipment-modal__location-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-arrange-shipment-modal__location-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.selka-arrange-shipment-modal__location-badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
  font-size: 10px;
}

.selka-arrange-shipment-modal__location-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: #0051f3;
  font-size: 12px;
  cursor: pointer;
}

.selka-arrange-shipment-modal__location-name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-arrange-shipment-modal__location-address {
  margin: 0;
  font-size: 12px;
  color: #68748d;
}

.selka-arrange-shipment-modal__notes-input {
  width: 100%;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  color: #0f2144;
  font-size: 14px;
}

.selka-arrange-shipment-modal__notes-input::placeholder {
  color: #8190ae;
}

.selka-arrange-shipment-modal__notes-input:focus {
  outline: none;
  border-color: var(--energy-100, #0051f3);
}

/* Active (focused) text inputs — Energy 100 border */
.selka-add-category-modal__input:focus,
.selka-edit-variant-modal__input:focus {
  outline: none;
  border-color: var(--energy-100, #0051f3);
}

.selka-product-detail__field:focus-within:not(
    .selka-product-detail__field--disabled
  ),
.selka-product-detail__unit-field:focus-within:not(
    .selka-product-detail__field--disabled
  ),
.selka-variant-settings__field:focus-within,
.selka-variant-settings__bulk-input:focus-within,
.selka-edit-variant-modal__option-field:focus-within,
.selka-collection-picker-modal__search:focus-within,
.selka-photo-picker-modal__search-bar:focus-within {
  border-color: var(--energy-100, #0051f3);
}

.selka-arrange-shipment-modal__footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.selka-arrange-shipment-modal__btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100px;
  height: 40px;
  padding: 8px 16px 8px 4px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  color: #0051f3;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.selka-arrange-shipment-modal__btn-back-icon {
  transform: rotate(180deg);
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%)
    hue-rotate(212deg) brightness(102%) contrast(101%);
}

.selka-arrange-shipment-modal__btn-confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 160px;
  height: 40px;
  padding: 8px 4px 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.selka-arrange-shipment-modal__btn-confirm-icon {
  filter: brightness(0) invert(1);
}

.selka-arrange-shipment-modal__btn-confirm--disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 960px) {
  .selka-arrange-shipment-modal__pickup-body {
    flex-direction: column;
  }

  .selka-arrange-shipment-modal__pickup-divider {
    width: 100%;
    min-height: 1px;
    height: 1px;
  }

  .selka-arrange-shipment-modal__pickup-schedule {
    flex-direction: column;
    width: 100%;
  }

  .selka-arrange-shipment-modal__pickup-column,
  .selka-arrange-shipment-modal__pickup-column--time,
  .selka-arrange-shipment-modal__date-list,
  .selka-arrange-shipment-modal__time-select {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .selka-arrange-shipment-modal__options {
    flex-direction: column;
    min-height: 0;
  }

  .selka-arrange-shipment-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .selka-arrange-shipment-modal__btn-next,
  .selka-arrange-shipment-modal__btn-confirm {
    width: 100%;
    padding: 8px 16px;
  }

  .selka-arrange-shipment-modal__footer-actions {
    width: 100%;
    flex-direction: column;
  }

  .selka-arrange-shipment-modal__btn-back {
    width: 100%;
    padding: 8px 16px;
  }
}

/* Confirm payment modal (Figma 545:4717) */
.selka-modal--confirm-payment {
  padding: 24px;
}

.selka-confirm-payment-modal {
  display: flex;
  flex-direction: column;
  width: min(600px, 100%);
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-confirm-payment-modal__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 24px 0;
}

.selka-confirm-payment-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-confirm-payment-modal__head-copy {
  flex: 1;
  min-width: 0;
}

.selka-confirm-payment-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-confirm-payment-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #68748d;
}

.selka-confirm-payment-modal__close {
  flex-shrink: 0;
}

.selka-confirm-payment-modal__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-confirm-payment-modal__section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-confirm-payment-modal__section-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  color: #68748d;
}

.selka-confirm-payment-modal__split {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.selka-confirm-payment-modal__proof {
  flex: 0 0 188px;
  min-width: 0;
}

.selka-confirm-payment-modal__proof-box {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  height: 218px;
  margin-top: 4px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-confirm-payment-modal__proof-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.selka-confirm-payment-modal__divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-confirm-payment-modal__details {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.selka-confirm-payment-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-confirm-payment-modal__field-label {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-confirm-payment-modal__field-value {
  margin: 0;
  font-size: 14px;
  color: #0f2144;
}

.selka-confirm-payment-modal__amount {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0051f3;
}

.selka-confirm-payment-modal__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 21px 24px 24px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-confirm-payment-modal__btn-cancel-order {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #c62225;
  cursor: pointer;
}

.selka-confirm-payment-modal__btn-cancel-order img {
  display: block;
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(4452%)
    hue-rotate(346deg) brightness(95%) contrast(95%);
}

.selka-confirm-payment-modal__btn-confirm {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 4px 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.selka-confirm-payment-modal__btn-confirm img {
  display: block;
  filter: brightness(0) invert(1);
}

@media (max-width: 767px) {
  .selka-confirm-payment-modal__split {
    flex-direction: column;
  }

  .selka-confirm-payment-modal__proof {
    flex-basis: auto;
    width: 100%;
  }

  .selka-confirm-payment-modal__divider {
    width: 100%;
    height: 1px;
  }

  .selka-confirm-payment-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .selka-confirm-payment-modal__btn-cancel-order,
  .selka-confirm-payment-modal__btn-confirm {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1023px) and (min-width: 768px) {
  .selka-order-detail__header {
    padding: 32px 32px 12px;
  }

  .selka-order-detail__body {
    padding: 32px;
  }

  .selka-order-detail__main {
    border-radius: 32px 32px 0 0;
  }
}

@media (max-width: 1023px) {
  .selka-order-detail {
    flex-direction: column;
    gap: 16px;
    overflow-y: auto;
  }

  .selka-order-detail__aside {
    width: 100%;
  }

  .selka-order-detail__header {
    padding: 24px 24px 12px;
  }

  .selka-order-detail__body {
    padding: 24px;
  }

  .selka-order-detail__main {
    border-radius: 24px 24px 0 0;
  }

  .selka-order-detail__split {
    flex-direction: column;
  }

  .selka-order-detail__split-aside {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .selka-order-detail__header {
    padding: 16px 16px 12px;
  }

  .selka-order-detail__body {
    padding: 16px;
  }

  .selka-order-detail__main {
    border-radius: 16px 16px 0 0;
  }

  .selka-order-detail__header-actions {
    width: 100%;
  }
}

/* Product detail (PDP) */
.selka-product-detail {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 20px;
  overflow: hidden;
  padding-right: 60px;
  box-sizing: border-box;
}

.selka-product-detail__main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-right: none;
  border-bottom: none;
  border-radius: 40px 40px 0 0;
  background: #fff;
}

.selka-product-detail__header {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 40px 40px 12px;
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
}

.selka-product-detail__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 48px;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 144, 174, 0.45) transparent;
}

.selka-product-detail__scroll::-webkit-scrollbar {
  width: 6px;
}

.selka-product-detail__scroll::-webkit-scrollbar-track {
  background: transparent;
}

.selka-product-detail__scroll::-webkit-scrollbar-thumb {
  background: rgba(129, 144, 174, 0.45);
  border-radius: 999px;
}

.selka-product-detail__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-product-detail__breadcrumb .selka-page-title__crumb-icon {
  flex-shrink: 0;
}

.selka-product-detail__crumb-chevron {
  flex-shrink: 0;
  display: block;
  /* Metal 28 solid #d6dbe5 */
  filter: brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(347%)
    hue-rotate(184deg) brightness(95%) contrast(91%);
}

.selka-product-detail__breadcrumb-link {
  display: flex;
  line-height: 0;
}

.selka-product-detail__breadcrumb h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-product-detail__editing-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 100px;
  background: rgba(0, 81, 243, 0.08);
  font-size: 14px;
  font-weight: 500;
  color: #0051f3;
  white-space: nowrap;
}

.selka-product-detail__editing-badge--saving {
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
}

.selka-product-detail__editing-badge--saved {
  background: rgba(24, 143, 26, 0.08);
  border-color: rgba(24, 143, 26, 0.08);
  color: #188f1a;
}

.selka-product-detail__editing-badge--error {
  background: rgba(198, 34, 37, 0.08);
  border-color: rgba(198, 34, 37, 0.08);
  color: #c62225;
}

.selka-product-detail__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.selka-product-detail__save-split {
  flex: 0 0 auto;
  width: auto;
}

.selka-product-detail__save-split .selka-fulfill-btn-split__main:disabled,
.selka-product-detail__save-split .selka-fulfill-btn-split__menu:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-product-detail__save-split--active .selka-fulfill-btn-split__main:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}

.selka-product-detail__save-split--active .selka-fulfill-btn-split__menu:not(:disabled) {
  cursor: pointer;
}

.selka-product-detail__save-split--menu .selka-fulfill-btn-split__menu:not(:disabled) {
  opacity: 1;
  cursor: pointer;
}

.selka-product-detail__ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-product-detail__ghost-btn:not(:disabled):hover {
  background: var(--energy-8);
}

.selka-product-detail__ghost-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.selka-product-detail__ghost-btn img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-product-detail__body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 40px;
}

.selka-product-detail__anchor {
  position: sticky;
  top: 32px;
  z-index: 1;
  flex: 0 0 215px;
  align-self: flex-start;
  padding: 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
}

.selka-product-detail__anchor-item {
  display: flex;
  width: 100%;
  align-items: center;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: #68748d;
  text-align: left;
  cursor: pointer;
}

.selka-product-detail__anchor-item--active {
  border-color: rgba(0, 81, 243, 0.08);
  background: rgba(0, 81, 243, 0.08);
  font-weight: 600;
  color: #0051f3;
}

.selka-product-detail__anchor-divider {
  margin: 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-product-detail__sections {
  flex: 1;
  min-width: 0;
  max-width: 539px;
}

.selka-product-detail__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-margin-top: 104px;
}

.selka-product-detail__section-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-product-detail__section-head p {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-product-detail__section-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.selka-product-detail__section-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.selka-product-detail__section-divider {
  margin: 40px 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-product-detail__label {
  display: block;
  font-size: 14px;
  color: #68748d;
}

.selka-product-detail__field,
.selka-product-detail__price-field,
.selka-product-detail__select,
.selka-product-detail__unit-field {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  color: #0f2144;
}

.selka-product-detail__field--disabled,
.selka-product-detail__price-field.selka-product-detail__field--disabled {
  opacity: 0.4;
}

.selka-product-detail__field-control {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
  resize: vertical;
}

.selka-product-detail__field-control--disabled {
  pointer-events: none;
}

.selka-product-detail__field--compact {
  min-height: 42px;
  width: 60px;
  justify-content: center;
}

.selka-product-detail__price-field {
  justify-content: space-between;
  width: 200px;
  gap: 8px;
}

.selka-product-detail__price-input {
  flex: 1;
  min-width: 0;
  text-align: right;
}

.selka-product-detail__tax-select-wrap {
  position: relative;
}

.selka-product-detail__tax-select {
  width: 100%;
  min-width: 266px;
  font-family: inherit;
  cursor: pointer;
}

.selka-product-detail__tax-menu {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
}

.selka-product-detail__tax-divider {
  height: 1px;
  margin: 4px 0;
  padding: 0;
  background: rgba(129, 144, 174, 0.12);
  list-style: none;
}

.selka-product-detail__tax-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.selka-product-detail__tax-option:hover,
.selka-product-detail__tax-option:focus-visible {
  background: var(--energy-8);
}

.selka-product-detail__tax-option-label {
  font-size: 14px;
  color: #0f2144;
}

.selka-product-detail__tax-option-hint {
  font-size: 12px;
  color: #8190ae;
  line-height: 1.4;
}

.selka-product-detail__stock-out-select {
  min-width: 229px;
}

.selka-product-detail__stock-out-menu {
  min-width: 100%;
  width: max(100%, 320px);
}

.selka-product-detail__price-prefix {
  color: #8190ae;
}

.selka-product-detail__select {
  justify-content: space-between;
  gap: 16px;
  min-width: 200px;
}

.selka-product-detail__select img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-product-detail__unit-field {
  justify-content: space-between;
  width: 200px;
}

.selka-product-detail__unit-field .selka-price {
  color: #0f2144;
}

.selka-product-detail__unit-field span:last-child {
  color: #8190ae;
}

.selka-product-detail__row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.selka-product-detail__hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: #0051f3;
}

.selka-product-detail__media-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-product-detail__media-card--managed {
  background: rgba(129, 144, 174, 0.04);
  border-color: rgba(129, 144, 174, 0.16);
}

.selka-product-detail__media-card--managed .selka-product-detail__media-item {
  opacity: 0.55;
  pointer-events: none;
}

.selka-product-detail__media-managed-text {
  color: #68748d;
}

.selka-product-detail__media-managed-text strong {
  color: #0f2144;
  font-weight: 600;
}

.selka-product-detail__media-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.selka-product-detail__media-toolbar p {
  margin: 0;
  font-size: 12px;
  color: #68748d;
}

.selka-product-detail__media-toolbar strong {
  color: #0051f3;
  font-weight: 400;
}

.selka-product-detail__media-toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 12px 0;
  border-top: 1px solid #e5e7eb;
}

.selka-product-detail__media-toggle-label {
  font-size: 12px;
  color: #68748d;
}

.selka-product-detail__media-scroll {
  position: relative;
  min-width: 0;
}

.selka-product-detail__media-scroll::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 48px;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 100%);
  transition: opacity 0.15s ease;
}

.selka-product-detail__media-scroll--fade-right::after {
  opacity: 1;
}

.selka-product-detail__media-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 144, 174, 0.45) transparent;
  padding-right: 8px;
  padding-bottom: 4px;
}

.selka-product-detail__media-grid::-webkit-scrollbar {
  height: 6px;
}

.selka-product-detail__media-grid::-webkit-scrollbar-track {
  background: transparent;
}

.selka-product-detail__media-grid::-webkit-scrollbar-thumb {
  background: rgba(129, 144, 174, 0.45);
  border-radius: 999px;
}

.selka-product-detail__media-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 80px;
  flex-shrink: 0;
}

.selka-product-detail__media-item--primary {
  width: auto;
  flex-shrink: 0;
}

.selka-product-detail__media-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.selka-product-detail__media-drag,
.selka-product-detail__media-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-product-detail__media-drag {
  cursor: grab;
}

.selka-product-detail__media-drag:active {
  cursor: grabbing;
}

.selka-product-detail__media-drag img {
  display: block;
  transform: rotate(-90deg);
  pointer-events: none;
}

.selka-product-detail__media-item--dragging {
  opacity: 0.45;
}

.selka-product-detail__media-item--drop-target .selka-product-detail__media-frame {
  outline: 2px solid #0051f3;
  outline-offset: 2px;
}

.selka-product-detail__media-delete img {
  display: block;
  /* Metal 100 #8190ae */
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-product-detail__media-frame {
  overflow: hidden;
  border-radius: 8px;
  background: #f8f7f5;
  width: 100%;
}

.selka-product-detail__media-item--primary .selka-product-detail__media-frame {
  width: 133px;
  height: 200px;
}

.selka-product-detail__media-item--primary .selka-product-detail__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selka-product-detail__media-item:not(.selka-product-detail__media-item--primary) .selka-product-detail__media-frame {
  aspect-ratio: 2 / 3;
}

.selka-product-detail__media-item:not(.selka-product-detail__media-item--primary) .selka-product-detail__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selka-product-detail__media-item span {
  font-size: 12px;
  color: #68748d;
  text-align: center;
}

.selka-product-detail__variant-group {
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  margin-bottom: 16px;
}

.selka-product-detail__variant-group-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.selka-product-detail__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selka-product-detail__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  font-weight: 500;
  color: #0f2144;
}

.selka-product-detail__swatch {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 4px;
}

.selka-product-detail__variant-group-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 16px;
}

.selka-product-detail__chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-product-detail__chip-btn--icon {
  padding: 8px;
}

.selka-product-detail__chip-btn img {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

/* Variant table (Figma 258:258) */
.selka-variant-table {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 539px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  padding-bottom: 20px;
}

.selka-variant-table--with-dims {
  max-width: none;
  padding-bottom: 0;
  overflow: hidden;
}

.selka-variant-table__dims-fade {
  position: relative;
  min-width: 0;
  background: #fff;
}

.selka-variant-table__dims-fade::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 50px;
  border-left: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
  box-shadow: -4px 0 16px rgba(15, 33, 68, 0.06);
  pointer-events: none;
}

.selka-variant-table__dims-fade::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50px;
  z-index: 4;
  width: 24px;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to right, rgba(15, 33, 68, 0) 0%, rgba(15, 33, 68, 0.16) 100%);
  transition: opacity 0.15s ease;
}

.selka-variant-table__dims-fade--active::after {
  opacity: 1;
}

.selka-variant-table__dims-head-row {
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.selka-variant-table__dims-spacer {
  height: 16px;
}

.selka-variant-table__dims-scroll--head {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.selka-variant-table__dims-scroll--body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 8px;
}

.selka-variant-table__dims-action-col {
  position: relative;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  border-left: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
  box-sizing: border-box;
}

.selka-variant-table__dims-action-col--head {
  align-self: stretch;
  border-radius: 0 12px 0 0;
  background: #eff1f4;
}

.selka-variant-table__dims-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 786px;
  padding-bottom: 12px;
  box-sizing: border-box;
}

.selka-variant-table__dims-group {
  width: 100%;
}

.selka-variant-table__dims-group-divider {
  margin: 0 0 16px;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.28);
  width: 100%;
}

.selka-variant-table__dims-band {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.selka-variant-table__dims-band-main {
  flex: 1;
  min-width: 786px;
  box-sizing: border-box;
}

.selka-variant-table__dims-band-action {
  position: sticky;
  right: 0;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 50px;
  border-left: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
  box-sizing: border-box;
}

.selka-variant-table__scroll-wrap {
  width: 100%;
}


.selka-variant-table__head,
.selka-variant-table__group-row,
.selka-variant-table__child-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) 140px 72px 34px;
  column-gap: 12px;
  align-items: center;
}

.selka-variant-table__head {
  padding: 12px 16px;
  border-radius: 12px 12px 0 0;
  background: rgba(129, 144, 174, 0.08);
  border: 1px solid rgba(129, 144, 174, 0.08);
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
}

.selka-variant-table__head > span:nth-child(4) {
  text-align: center;
}

.selka-variant-table--with-dims .selka-variant-table__head,
.selka-variant-table--with-dims .selka-variant-table__group-row,
.selka-variant-table--with-dims .selka-variant-table__child-row {
  grid-template-columns:
    14px minmax(160px, 1fr) 140px 72px repeat(4, minmax(64px, 72px));
  min-width: 786px;
}

.selka-variant-table--with-dims .selka-variant-table__head {
  min-width: 786px;
  border-radius: 12px 0 0 0;
  box-sizing: border-box;
}

.selka-variant-table--with-dims .selka-variant-table__group-row,
.selka-variant-table--with-dims .selka-variant-table__child-row {
  padding: 0 16px;
  box-sizing: border-box;
}

.selka-variant-table--with-dims .selka-variant-table__child-wrap,
.selka-variant-table--with-dims .selka-variant-table__children {
  min-width: 0;
}

.selka-variant-table--with-dims .selka-variant-table__head > span:nth-child(n + 5):nth-child(-n + 8) {
  text-align: center;
}

/* Discount product settings table — Figma 301:3837 */

.selka-variant-settings-modal__table-wrap.selka-discount-settings-table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.selka-discount-settings-table__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 12px 16px;
  background: #f5f6f9;
  border-bottom: 1px solid rgba(129, 144, 174, 0.08);
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
}

.selka-discount-settings-table__head-cols {
  display: grid;
  grid-template-columns: 14px 200px 100px 100px 140px;
  gap: 16px;
  align-items: center;
}

.selka-discount-settings-table__head-check {
  width: 14px;
}

.selka-discount-settings-table__head-cols > span:nth-child(2),
.selka-discount-settings-table__head-cols > span:nth-child(3),
.selka-discount-settings-table__head-cols > span:nth-child(4),
.selka-discount-settings-table__head-cols > span:nth-child(5) {
  width: auto;
}

.selka-discount-settings-table__head-cols > span:nth-child(3) {
  text-align: right;
}

.selka-discount-settings-table__head-cols > span:nth-child(4) {
  text-align: center;
}

.selka-discount-settings-table__head-cols > span:nth-child(5) {
  text-align: right;
}

.selka-discount-settings-table__add-product {
  flex-direction: row;
  gap: 8px;
  padding: 8px 16px 8px 12px;
  white-space: nowrap;
}

.selka-discount-settings-table__scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 20px;
}

.selka-discount-settings-table__group-divider {
  margin: 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.28);
}

.selka-discount-settings-table__group > .selka-discount-settings-table__row {
  padding: 8px 16px;
}

.selka-discount-settings-table__row--selected {
  background: var(--energy-8-solid);
}

.selka-discount-settings-table__row {
  display: grid;
  grid-template-columns: 14px 200px 100px 100px 140px minmax(72px, 1fr);
  gap: 16px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.selka-discount-settings-table__product {
  min-width: 0;
}

.selka-discount-settings-table__product--child {
  width: auto;
}

.selka-discount-settings-table__product .selka-variant-table__variant {
  gap: 8px;
}

.selka-discount-settings-table__original {
  font-size: 14px;
  color: #68748d;
  text-align: right;
}

.selka-discount-settings-table__percent-col {
  display: flex;
  justify-content: center;
}

.selka-discount-settings-table__discount-col {
  min-width: 0;
}

.selka-discount-settings-table__percent-field,
.selka-discount-settings-table__price-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.selka-discount-settings-table__percent-field {
  width: 80px;
}

.selka-discount-settings-table__price-field {
  width: 100%;
}

.selka-discount-settings-table__percent-field span,
.selka-discount-settings-table__price-field > span:first-child {
  flex-shrink: 0;
  color: #8190ae;
}

.selka-discount-settings-table__field-input {
  width: 100%;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
}

.selka-discount-settings-table__field--mixed .selka-discount-settings-table__field-input {
  color: #68748d;
  text-align: center;
}

.selka-discount-settings-table__children {
  display: flex;
  flex-direction: column;
}

.selka-discount-settings-table__child-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 8px 32px;
}

.selka-discount-settings-table__child-block--selected {
  background: var(--energy-8-solid);
}

.selka-discount-settings-table__child-block .selka-discount-settings-table__row {
  grid-template-columns: 14px 184px 100px 100px 140px minmax(72px, 1fr);
}

.selka-discount-settings-table__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-height: 34px;
}

.selka-discount-settings-table__icon-btn {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
  box-sizing: border-box;
}

.selka-discount-settings-table__icon-btn img {
  display: block;
  width: 16px;
  height: 16px;
}

.selka-discount-settings-table__icon-btn:not(.selka-discount-settings-table__icon-btn--delete) img {
  transition: transform 0.15s ease;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-discount-settings-table__icon-btn-chevron--up {
  transform: rotate(180deg);
}

.selka-discount-settings-table__icon-btn--delete {
  border-color: rgba(129, 144, 174, 0.12);
  background: rgba(129, 144, 174, 0.08);
}

.selka-discount-settings-table__child-divider {
  margin: 0;
  border: 0;
  height: 0;
  border-top: 1px dashed rgba(129, 144, 174, 0.4);
  width: 100%;
  background: none;
}

.selka-variant-table__dim-col {
  text-align: center;
}


.selka-variant-table__expand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
  box-sizing: border-box;
}

.selka-variant-table__expand img {
  display: block;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-variant-table__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

.selka-variant-table__group {
  width: 100%;
}

.selka-variant-table__group-divider {
  margin: 0 0 16px;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.28);
}

.selka-variant-table__toggle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  justify-self: end;
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
  box-sizing: border-box;
}

.selka-variant-table__toggle img {
  display: block;
  width: 16px;
  height: 16px;
  transition: transform 0.15s ease;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-variant-table__toggle-icon--up {
  transform: rotate(180deg);
}

.selka-variant-table__toggle-spacer {
  flex-shrink: 0;
  justify-self: end;
  width: 34px;
  height: 34px;
}

.selka-variant-table__thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-color: rgba(129, 144, 174, 0.12);
  background: #fff;
}

.selka-variant-table__thumb--placeholder img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.selka-variant-table__children {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 16px 0 0;
}

.selka-variant-table__child-wrap {
  width: 100%;
}

.selka-variant-table__child-divider {
  /* checkbox + column-gap + variant indent — lines start at child thumb */
  margin: 0 0 8px calc(14px + 12px + 16px);
  border: none;
  height: 0;
  border-top: 1px dashed rgba(129, 144, 174, 0.4);
  width: auto;
}

.selka-variant-table--with-dims .selka-variant-table__child-divider {
  margin-left: calc(16px + 14px + 12px + 16px);
  margin-right: 16px;
  min-width: 0;
}

.selka-variant-table__child-row .selka-variant-table__variant {
  padding-left: 16px;
  box-sizing: border-box;
}

.selka-variant-table__variant {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.selka-variant-table__thumb {
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  background: #fff;
}

.selka-variant-table__thumb--lg {
  width: 56px;
  height: 56px;
}

.selka-variant-table__thumb--sm {
  width: 40px;
  height: 40px;
}

.selka-variant-table__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.selka-variant-table__variant-text {
  min-width: 0;
}

.selka-variant-table__variant-text strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-variant-table__variant-text span {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
}

.selka-variant-table__price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.selka-variant-table__price-prefix {
  color: #8190ae;
}

.selka-variant-table__price .selka-price {
  color: #0f2144;
}

.selka-variant-table__price-input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0;
  background: transparent;
  font-family: var(--font-inter, "Inter"), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 14px;
  color: #0f2144;
  text-align: right;
  outline: none;
}

.selka-variant-table__stock {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 12px 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.selka-variant-table__stock .selka-price {
  color: #0f2144;
}

.selka-variant-table__stock-input {
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;
  font-family: var(--font-inter, "Inter"), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 14px;
  color: #0f2144;
  text-align: center;
  outline: none;
}

.selka-variant-table__stock--aggregate {
  background: var(--metal-8, rgba(129, 144, 174, 0.08));
  border-color: rgba(129, 144, 174, 0.12);
  cursor: default;
}

.selka-variant-table__stock-tooltip {
  width: 100%;
  min-width: 0;
}

.selka-variant-table__stock--muted .selka-price,
.selka-variant-table__stock--muted .selka-variant-table__stock-input {
  color: #8190ae;
}

.selka-variant-table__dim {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 12px 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  box-sizing: border-box;
}

.selka-variant-table__dim .selka-price {
  color: #0f2144;
}

.selka-variant-table__dim-input {
  width: 100%;
  border: none;
  padding: 0;
  background: transparent;
  font-family: var(--font-inter, "Inter"), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 14px;
  color: #0f2144;
  text-align: center;
  outline: none;
}

.selka-variant-table__dim-spacer {
  min-width: 0;
}

/* Variant settings modal (Figma 258:664) */
.selka-modal--variant-settings {
  padding: 24px;
}

.selka-variant-settings-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(1342px, 100%);
  max-height: calc(100vh - 48px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-variant-settings-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.selka-variant-settings-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-variant-settings-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-variant-settings-modal__content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  min-height: 0;
  flex: 1;
}

.selka-variant-settings-modal__table-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  max-width: 900px;
  height: 547px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.selka-variant-settings__scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.selka-variant-settings__head,
.selka-variant-settings__group-row {
  display: grid;
  grid-template-columns:
    14px minmax(160px, 200px) minmax(108px, 132px) minmax(72px, 92px);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-width: 480px;
  box-sizing: border-box;
}

.selka-variant-settings__scroll--with-dims .selka-variant-settings__head,
.selka-variant-settings__scroll--with-dims .selka-variant-settings__group-row {
  grid-template-columns:
    14px minmax(160px, 200px) minmax(108px, 132px) minmax(72px, 92px)
    repeat(4, minmax(68px, 76px));
  min-width: 834px;
}

.selka-variant-settings__scroll--with-dims .selka-variant-settings__head > span:nth-child(n + 6) {
  text-align: center;
}

.selka-variant-settings__head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 16px;
  background: #eff1f4;
  border-bottom: 1px solid #e4e8ee;
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
  white-space: nowrap;
}

.selka-variant-settings__body {
  padding: 8px 0 20px;
}

.selka-variant-settings__group {
  padding-top: 8px;
}

.selka-variant-settings__group-gap {
  display: block;
  width: 100%;
  margin: 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.28);
}

.selka-variant-settings__group-row {
  width: 100%;
  min-width: 100%;
  padding: 12px 16px;
  background: #fff;
  box-sizing: border-box;
}

.selka-variant-settings__children {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 16px 4px;
  padding: 4px 12px 8px 20px;
  border: none;
  box-sizing: border-box;
  max-width: calc(100% - 32px);
}

.selka-variant-settings__child-wrap + .selka-variant-settings__child-wrap {
  border-top: 1px dotted rgba(129, 144, 174, 0.28);
}

.selka-variant-settings__child-divider {
  display: none;
}

.selka-variant-settings__child-row {
  display: grid;
  grid-template-columns:
    14px minmax(140px, 184px) minmax(108px, 132px) minmax(72px, 92px);
  gap: 12px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px 0;
  box-sizing: border-box;
}

.selka-variant-settings__scroll--with-dims .selka-variant-settings__child-row {
  grid-template-columns:
    14px minmax(140px, 184px) minmax(108px, 132px) minmax(72px, 92px)
    repeat(4, minmax(60px, 72px));
}

.selka-variant-settings__child-row--selected {
  border-radius: 6px;
  background: rgba(0, 81, 243, 0.08);
}

.selka-variant-settings__variant {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.selka-variant-settings__variant--child strong {
  font-weight: 500;
}

.selka-variant-settings__variant strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-variant-settings__variant span {
  display: block;
  font-size: 12px;
  color: #0051f3;
}

.selka-variant-settings__thumb {
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  background: #fff;
}

.selka-variant-settings__thumb--lg {
  width: 56px;
  height: 56px;
}

.selka-variant-settings__thumb--sm {
  width: 40px;
  height: 40px;
}

.selka-variant-settings__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.selka-variant-settings__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.selka-variant-settings__field--muted {
  background: rgba(129, 144, 174, 0.08);
}

.selka-variant-settings__field--price {
  width: 100%;
  max-width: 132px;
  justify-self: start;
}

.selka-variant-settings__field--stock {
  width: 100%;
  max-width: 92px;
  justify-self: start;
  justify-content: center;
}

.selka-variant-settings__field--dim {
  justify-content: center;
}

.selka-variant-settings__field--stock .selka-variant-settings__field-input,
.selka-variant-settings__field--dim .selka-variant-settings__field-input {
  text-align: center;
}

.selka-variant-settings__cell-empty {
  display: block;
  min-height: 42px;
}

.selka-variant-settings__field-prefix {
  font-size: 14px;
  color: #8190ae;
}

.selka-variant-settings__field-input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  text-align: right;
  outline: none;
}

.selka-variant-settings__field--price .selka-variant-settings__field-prefix {
  flex-shrink: 0;
}

.selka-variant-settings__price-input {
  font-family: var(--font-inter, "Inter"), system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.selka-variant-settings__field--stock .selka-variant-settings__stock-input:disabled {
  cursor: default;
  color: #8190ae;
}

.selka-variant-settings__field--muted .selka-variant-settings__field-input {
  color: #8190ae;
}

.selka-variant-settings-modal__bulk {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  width: 402px;
  padding: 20px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-variant-settings-modal__bulk-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-variant-settings-modal__bulk-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: #8190ae;
  line-height: 1.4;
}

.selka-variant-settings-modal__bulk-count {
  margin: 0;
  font-size: 14px;
  color: #0051f3;
}

.selka-variant-settings__bulk-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-variant-settings__bulk-label {
  font-size: 14px;
  color: #68748d;
}

.selka-variant-settings__bulk-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 200px;
  max-width: 100%;
  height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.selka-variant-settings__bulk-input span {
  font-size: 14px;
  color: #8190ae;
  flex-shrink: 0;
}

.selka-variant-settings__bulk-input input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
}

.selka-variant-settings-modal__bulk-dims {
  display: flex;
  gap: 20px;
}

.selka-variant-settings-modal__bulk-dims .selka-variant-settings__bulk-field {
  flex: 1;
  min-width: 0;
}

.selka-variant-settings-modal__bulk-dims .selka-variant-settings__bulk-input {
  width: 100%;
}

.selka-variant-settings-modal__bulk-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.selka-variant-settings-modal__bulk-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  height: 48px;
  padding: 8px 4px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #68748d;
  cursor: pointer;
}

.selka-variant-settings-modal__bulk-apply {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-variant-settings-modal__bulk-apply:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-variant-settings-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.selka-variant-settings-modal__btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 48px;
  padding: 8px 4px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-variant-settings-modal__btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  height: 48px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.selka-variant-settings-modal__btn-save:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 1200px) {
  .selka-variant-settings-modal__content {
    flex-direction: column;
  }

  .selka-variant-settings-modal__table-wrap {
    max-width: none;
    width: 100%;
  }

  .selka-variant-settings-modal__bulk {
    width: 100%;
  }
}

.selka-product-detail__toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 8px;
}

.selka-product-detail__toggle {
  position: relative;
  width: 48px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.28);
  cursor: pointer;
}

.selka-product-detail__toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.selka-product-detail__toggle--on {
  background: #0051f3;
}

.selka-product-detail__toggle--on span {
  transform: translateX(24px);
}

.selka-product-detail__toggle--disabled,
.selka-product-detail__toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.selka-product-detail__shipping-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

.selka-product-detail__shipping-toggle-label {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #68748d;
  line-height: normal;
}

.selka-product-detail__shipping-toggle-hint {
  margin: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: var(--energy-100, #0051f3);
}

.selka-product-detail__shipping-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-product-detail__shipping-fields--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.selka-product-detail__unit-field .selka-product-detail__field-control {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.selka-product-detail__dims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  column-gap: 12px;
  width: 100%;
}

.selka-product-detail__dim {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.selka-product-detail__dim .selka-product-detail__unit-field {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.selka-product-detail__help {
  margin: 4px 0 0;
  font-size: 12px;
  color: #8190ae;
  line-height: 1.4;
}

.selka-product-detail__aside {
  width: 288px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 144, 174, 0.45) transparent;
}

.selka-product-detail__aside::-webkit-scrollbar {
  width: 6px;
}

.selka-product-detail__aside::-webkit-scrollbar-track {
  background: transparent;
}

.selka-product-detail__aside::-webkit-scrollbar-thumb {
  background: rgba(129, 144, 174, 0.45);
  border-radius: 999px;
}

.selka-product-detail__aside-card {
  padding: 20px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 20px;
  background: #fff;
}

.selka-product-detail__aside-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-product-detail__status-select-wrap {
  position: relative;
}

.selka-product-detail__status-select .selka-product-badge {
  font-size: 14px;
}

.selka-product-detail__status-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 50px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
}

.selka-product-detail__status-select img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-product-detail__status-menu {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.selka-product-detail__status-option {
  display: block;
  width: 100%;
  padding: 8px;
  border: none;
  background: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.selka-product-detail__status-divider {
  height: 1px;
  margin: 0;
  padding: 0;
  background: rgba(129, 144, 174, 0.12);
  list-style: none;
}

.selka-product-detail__status-option-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 12px;
}

.selka-product-detail__status-option:hover .selka-product-detail__status-option-inner {
  background: rgba(0, 81, 243, 0.04);
}

.selka-product-detail__status-option--selected {
  padding: 8px 8px 0;
}

.selka-product-detail__status-option--selected .selka-product-detail__status-option-inner {
  padding: 8px 16px 16px;
}

.selka-product-detail__status-option-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selka-product-detail__status-check {
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-product-detail__status-option-hint {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #8190ae;
}

.selka-product-badge--menu {
  padding: 4px 12px;
  font-size: 14px;
}

.selka-product-detail__status-select-wrap > .selka-product-detail__aside-hint {
  margin-top: 8px;
}

.selka-product-detail__category-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  cursor: pointer;
}

.selka-product-detail__category-select .selka-product-chip {
  font-size: 14px;
}

.selka-product-detail__category-placeholder {
  color: #8190ae;
}

.selka-product-detail__category-select img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

/* Category picker modal (Figma 263:1398) */
.selka-modal--category-picker {
  padding: 24px;
}

.selka-category-picker-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(720px, 100%);
  max-height: calc(100vh - 48px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-category-picker-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.selka-category-picker-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-category-picker-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-category-picker-modal__columns {
  display: flex;
  gap: 8px;
  align-items: stretch;
  height: 360px;
  min-height: 0;
}

.selka-category-picker-modal__column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  height: 100%;
}

.selka-category-picker-modal__vdivider {
  width: 1px;
  flex-shrink: 0;
  background: rgba(129, 144, 174, 0.12);
}

.selka-category-picker-modal__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
  overflow-y: auto;
}

.selka-category-picker-modal__divider {
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
  flex-shrink: 0;
}

.selka-category-picker-modal__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 46px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: #68748d;
  text-align: left;
  cursor: pointer;
}

.selka-category-picker-modal__item--active {
  border-color: rgba(129, 144, 174, 0.12);
  background: rgba(129, 144, 174, 0.12);
  font-weight: 600;
}

.selka-category-picker-modal__item--leaf {
  border-color: rgba(0, 81, 243, 0.08);
  background: rgba(0, 81, 243, 0.08);
  font-weight: 600;
  color: #0051f3;
}

.selka-category-picker-modal__chevron {
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(42%) sepia(10%) saturate(707%)
    hue-rotate(184deg) brightness(96%) contrast(88%);
}

.selka-category-picker-modal__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  padding: 8px 12px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
  flex-shrink: 0;
}

.selka-category-picker-modal__add img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-category-picker-modal__add:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Add category popup (Figma 527:1259) — nested over category picker */
.selka-modal--add-category {
  position: absolute;
  inset: 0;
  z-index: 5;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.selka-modal--add-category .selka-modal__backdrop {
  position: absolute;
  border-radius: 24px;
}

.selka-add-category-modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(480px, calc(100% - 48px));
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(15, 33, 68, 0.16);
}

.selka-add-category-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-add-category-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-add-category-modal__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selka-add-category-modal__label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-add-category-modal__input {
  box-sizing: border-box;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
}

.selka-add-category-modal__input::placeholder {
  color: #8190ae;
}

.selka-add-category-modal__hint {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-add-category-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.selka-add-category-modal__save {
  flex: 1;
  max-width: none;
}

.selka-category-picker-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.selka-category-picker-modal__save {
  min-width: 200px;
  height: 48px;
}

@media (max-width: 767px) {
  .selka-category-picker-modal__columns {
    flex-direction: column;
    height: auto;
    max-height: 50vh;
    overflow-y: auto;
  }

  .selka-category-picker-modal__vdivider {
    width: 100%;
    height: 1px;
  }

  .selka-category-picker-modal__column {
    height: auto;
    max-height: 200px;
  }
}

.selka-product-detail__collection-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-product-detail__collection-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.selka-product-detail__collection-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-product-detail__collection-add img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-product-detail__collection-select {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: flex-start;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  min-height: 45px;
  box-sizing: border-box;
}

.selka-product-detail__collection-placeholder {
  padding: 8px 8px 8px 16px;
  font-size: 14px;
  color: #8190ae;
}

.selka-product-detail__collection-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 14px;
  color: #0f2144;
}

.selka-product-detail__collection-tag-remove {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-product-detail__collection-tag-remove img {
  display: block;
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-product-detail__hint-count {
  color: #0051f3;
}

/* Collection picker modal (Figma 528:1315, 528:1476, 528:1529) */
.selka-modal--collection-picker {
  padding: 24px;
}

.selka-collection-picker-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(480px, 100%);
  max-height: calc(100vh - 48px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-collection-picker-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.selka-collection-picker-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-collection-picker-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-collection-picker-modal__subtitle-count {
  color: #0051f3;
}

.selka-collection-picker-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  flex: 1;
}

.selka-collection-picker-modal__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  flex-shrink: 0;
}

.selka-collection-picker-modal__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
}

.selka-collection-picker-modal__search-input::placeholder {
  color: #8190ae;
}

.selka-collection-picker-modal__search-clear {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-collection-picker-modal__list-wrap {
  min-height: 200px;
  max-height: 280px;
  overflow-y: auto;
}

.selka-collection-picker-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-collection-picker-modal__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.selka-collection-picker-modal__item--selected {
  border-color: rgba(0, 81, 243, 0.08);
  background: rgba(0, 81, 243, 0.08);
}

.selka-collection-picker-modal__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(129, 144, 174, 0.6);
  border-radius: 4px;
  background: #fff;
}

.selka-collection-picker-modal__checkbox--checked {
  border-color: #0051f3;
  background: #0051f3;
}

.selka-collection-picker-modal__checkbox--checked img {
  filter: brightness(0) invert(1);
}

.selka-collection-picker-modal__item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.selka-collection-picker-modal__item-name {
  font-size: 14px;
  color: #68748d;
}

.selka-collection-picker-modal__item--selected .selka-collection-picker-modal__item-name {
  font-weight: 600;
  color: #0051f3;
}

.selka-collection-picker-modal__item-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8190ae;
  flex-shrink: 0;
}

.selka-collection-picker-modal__item--selected .selka-collection-picker-modal__item-dot {
  background: #0051f3;
}

.selka-collection-picker-modal__item-count {
  font-size: 12px;
  color: #8190ae;
}

.selka-collection-picker-modal__item--selected .selka-collection-picker-modal__item-count {
  color: #0051f3;
}

.selka-collection-picker-modal__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  margin: 0;
  padding: 0 16px;
  font-size: 14px;
  color: #8190ae;
  text-align: center;
}

.selka-collection-picker-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.selka-collection-picker-modal__save {
  flex: 1;
  max-width: none;
  height: 48px;
}

.selka-product-detail__aside-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: #8190ae;
  line-height: 1.4;
}

.selka-product-detail__aside-divider {
  margin: 17px 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-product-detail__stats {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-product-detail__stats dt {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 400;
  color: #8190ae;
}

.selka-product-detail__stats dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0051f3;
}

.selka-product-name--link {
  color: #0051f3;
  text-decoration: none;
}

.selka-products-table tbody tr:hover .selka-product-name--link {
  text-decoration: underline;
}

@media (max-width: 1023px) {
  .selka-product-detail {
    flex-direction: column;
    overflow-y: auto;
    padding-right: 16px;
  }

  .selka-product-detail__main {
    flex: none;
    overflow: visible;
  }

  .selka-product-detail__scroll {
    flex: none;
    overflow: visible;
  }

  .selka-product-detail__aside {
    width: 100%;
    overflow: visible;
  }

  .selka-product-detail__body {
    flex-direction: column;
  }

  .selka-product-detail__anchor {
    position: static;
    flex: none;
    width: 100%;
  }

  .selka-product-detail__sections {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .selka-product-detail__header {
    padding: 16px 16px 12px;
  }

  .selka-product-detail__scroll {
    padding-bottom: 48px;
  }

  .selka-product-detail__body {
    padding: 16px;
  }

  .selka-product-detail__main {
    border-radius: 16px 16px 0 0;
  }

  .selka-product-detail__header-actions {
    width: 100%;
  }

  .selka-variant-table__head,
  .selka-variant-table__group-row,
  .selka-variant-table__child-row {
    grid-template-columns: 14px minmax(0, 1fr) 120px 64px 34px;
    column-gap: 8px;
  }

  .selka-variant-table--with-dims .selka-variant-table__head,
  .selka-variant-table--with-dims .selka-variant-table__group-row,
  .selka-variant-table--with-dims .selka-variant-table__child-row {
    grid-template-columns:
      14px minmax(140px, 1fr) 120px 64px repeat(4, minmax(56px, 64px));
    min-width: 686px;
  }

  .selka-variant-table--with-dims .selka-variant-table__head,
  .selka-variant-table--with-dims .selka-variant-table__dims-body,
  .selka-variant-table--with-dims .selka-variant-table__dims-band-main {
    min-width: 686px;
  }

  .selka-variant-table__dims-fade::after {
    right: 50px;
    width: 20px;
  }

  .selka-variant-table__child-divider {
    margin-left: calc(14px + 8px + 16px);
  }

  .selka-variant-table--with-dims .selka-variant-table__child-divider {
    margin-left: calc(16px + 14px + 8px + 16px);
  }

  .selka-edit-variant-modal__options-grid {
    grid-template-columns: 1fr;
  }

  .selka-edit-variant-modal__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .selka-edit-variant-modal__footer-actions {
    flex-direction: column;
    width: 100%;
  }

  .selka-edit-variant-modal__btn-save {
    width: 100%;
  }
}

/* Modal: Tambah Varian (Figma 258:420) / Edit Varian (Figma 258:576) */
.selka-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.selka-modal__backdrop {
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.selka-modal__panel {
  position: relative;
  z-index: 1;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.selka-edit-variant-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(798px, 100%);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}

.selka-edit-variant-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-edit-variant-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-edit-variant-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-edit-variant-modal__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selka-edit-variant-modal__body-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-edit-variant-modal__field-block {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.selka-edit-variant-modal__label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-edit-variant-modal__input {
  box-sizing: border-box;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
}

.selka-edit-variant-modal__input--name {
  width: 240px;
  max-width: 100%;
  padding: 12px 16px;
}

.selka-edit-variant-modal__input--error {
  border-color: #c62225;
}

.selka-edit-variant-modal__input--error:focus {
  border-color: #c62225;
}

.selka-edit-variant-modal__field-error {
  margin: 0;
  font-size: 12px;
  color: #c62225;
}

.selka-edit-variant-modal__hint {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-edit-variant-modal__divider {
  margin: 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-edit-variant-modal__options-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-edit-variant-modal__toggle-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #68748d;
}

.selka-edit-variant-modal__options-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  width: 100%;
}

.selka-edit-variant-modal__option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.selka-edit-variant-modal__option-label {
  font-size: 14px;
  color: #68748d;
}

.selka-edit-variant-modal__option-field {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  gap: 8px;
}

.selka-edit-variant-modal__option-field--error {
  border-color: #c62225;
}

.selka-edit-variant-modal__option-input {
  flex: 1;
  min-width: 0;
  border: none;
  padding: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
}

.selka-edit-variant-modal__option-input::placeholder,
.selka-edit-variant-modal__input::placeholder {
  color: #8190ae;
}

.selka-edit-variant-modal__option-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.selka-edit-variant-modal__swatch-picker {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: pointer;
}

.selka-edit-variant-modal__swatch {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 4px;
  pointer-events: none;
}

.selka-edit-variant-modal__swatch-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

.selka-edit-variant-modal__swatch-picker:has(
    .selka-edit-variant-modal__swatch-input:focus-visible
  )
  .selka-edit-variant-modal__swatch {
  outline: 2px solid #0051f3;
  outline-offset: 2px;
}

.selka-edit-variant-modal__option-delete {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-edit-variant-modal__option-delete img {
  display: block;
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-edit-variant-modal__add-option {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-edit-variant-modal__add-option img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-edit-variant-modal__photos-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-edit-variant-modal__photos-blocked {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-edit-variant-modal__photos-blocked strong {
  color: #0f2144;
  font-weight: 600;
}

.selka-edit-variant-modal__photos-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-edit-variant-modal__photos-divider {
  margin: 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-edit-variant-modal__option-photos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-edit-variant-modal__option-photos-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.selka-edit-variant-modal__option-photos-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.selka-edit-variant-modal__option-photos-name {
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-edit-variant-modal__option-photos-count {
  font-size: 14px;
  font-weight: 400;
  color: #8190ae;
}

.selka-edit-variant-modal__add-photo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-edit-variant-modal__add-photo-btn img {
  display: block;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-edit-variant-modal__option-photos-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 144, 174, 0.45) transparent;
}

.selka-edit-variant-modal__option-photos-grid::-webkit-scrollbar {
  height: 6px;
}

.selka-edit-variant-modal__option-photos-grid::-webkit-scrollbar-thumb {
  background: rgba(129, 144, 174, 0.45);
  border-radius: 999px;
}

.selka-edit-variant-modal__option-photos-empty {
  margin: 0;
  padding: 4px 0;
  color: #8190ae;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
}

.selka-edit-variant-modal__option-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 80px;
  flex-shrink: 0;
}

.selka-edit-variant-modal__option-photo--primary {
  width: auto;
}

.selka-edit-variant-modal__option-photo-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.selka-edit-variant-modal__option-photo-frame {
  overflow: hidden;
  border-radius: 12px;
  background: #f8f7f5;
  width: 100%;
}

.selka-edit-variant-modal__option-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selka-edit-variant-modal__option-photo--primary .selka-edit-variant-modal__option-photo-frame {
  width: 133px;
  height: 200px;
}

.selka-edit-variant-modal__option-photo:not(.selka-edit-variant-modal__option-photo--primary)
  .selka-edit-variant-modal__option-photo-frame {
  aspect-ratio: 2 / 3;
}

.selka-edit-variant-modal__option-photo-label {
  font-size: 12px;
  color: #0051f3;
  text-align: center;
}

.selka-edit-variant-modal__option-photo--dragging {
  opacity: 0.45;
}

.selka-edit-variant-modal__option-photo--drop-target .selka-edit-variant-modal__option-photo-frame {
  outline: 2px solid #0051f3;
  outline-offset: 2px;
}

.selka-edit-variant-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.selka-edit-variant-modal--add .selka-edit-variant-modal__footer {
  justify-content: flex-end;
}

.selka-edit-variant-modal--add .selka-edit-variant-modal__btn-save {
  min-width: 322px;
}

.selka-edit-variant-modal__delete-variant {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #c62225;
  cursor: pointer;
}

.selka-edit-variant-modal__delete-variant:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-edit-variant-modal__delete-variant img {
  display: block;
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(4452%)
    hue-rotate(346deg) brightness(95%) contrast(95%);
}

.selka-edit-variant-modal__footer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1;
}

.selka-edit-variant-modal__btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 40px;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-edit-variant-modal__btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.selka-edit-variant-modal__btn-save:disabled {
  opacity: 0.4;
  cursor: default;
}

/* === Variant Modal Option Grid === */

.selka-edit-variant-modal__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-edit-variant-modal__section-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-edit-variant-modal__section-title {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-edit-variant-modal__divider {
  border: none;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
  margin: 0;
}

.selka-edit-variant-modal__option-grid {
  display: grid;
  gap: 16px 20px;
}

.selka-edit-variant-modal__option-grid--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.selka-edit-variant-modal__option-grid--4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.selka-edit-variant-modal__option-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-edit-variant-modal__option-label {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #68748d;
}

.selka-edit-variant-modal__option-input-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-edit-variant-modal__input--flex {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  outline: none;
  padding: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #0f2144;
  background: transparent;
}

.selka-edit-variant-modal__drag-handle {
  cursor: grab;
  color: #8190ae;
  font-size: 14px;
  user-select: none;
  line-height: 1;
}

.selka-edit-variant-modal__drag-handle:active {
  cursor: grabbing;
}

.selka-edit-variant-modal__swatch {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  cursor: pointer;
  flex-shrink: 0;
}

.selka-edit-variant-modal__option-input-row .selka-edit-variant-modal__swatch {
  pointer-events: auto;
}

.selka-edit-variant-modal__color-input {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.selka-edit-variant-modal__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.selka-edit-variant-modal__icon-btn:hover {
  opacity: 1;
}

.selka-edit-variant-modal__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 12px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.selka-edit-variant-modal__add-btn:hover {
  background: rgba(0, 81, 243, 0.14);
}

.selka-edit-variant-modal__toggle-label {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #68748d;
}

.selka-edit-variant-modal__toggle {
  position: relative;
  width: 48px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.28);
  cursor: pointer;
  flex-shrink: 0;
}

.selka-edit-variant-modal__toggle span {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}

.selka-edit-variant-modal__toggle--on {
  background: #0051f3;
}

.selka-edit-variant-modal__toggle--on span {
  transform: translateX(24px);
}

.selka-edit-variant-modal__toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.selka-edit-variant-modal__select {
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #0f2144;
  background: #fff;
  min-height: 42px;
  cursor: pointer;
}

/* === Size Guide Gallery === */

.selka-edit-variant-modal__sizeguide-gallery {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
}

.selka-edit-variant-modal__sizeguide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selka-edit-variant-modal__sizeguide-count {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: #0051f3;
}

.selka-edit-variant-modal__sizeguide-grid {
  display: flex;
  gap: 8px;
}

.selka-edit-variant-modal__sizeguide-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 120px;
}

.selka-edit-variant-modal__sizeguide-photo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-edit-variant-modal__sizeguide-img {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(129, 144, 174, 0.28);
}

.selka-edit-variant-modal__sizeguide-main-label {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: #0051f3;
}

.selka-edit-variant-modal__field-label {
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #68748d;
}

/* === Drag-over highlight === */

.selka-edit-variant-modal__option-card {
  cursor: grab;
}

.selka-edit-variant-modal__option-card:active {
  cursor: grabbing;
}

.selka-dragging {
  opacity: 0.4;
}

.selka-drag-over {
  box-shadow: inset 3px 0 0 0 #0051f3;
}

/* === Empty Gallery State === */

.selka-edit-variant-modal__empty-gallery {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  padding: 20px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-edit-variant-modal__empty-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selka-edit-variant-modal__empty-gallery-count {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: #0051f3;
}

.selka-edit-variant-modal__empty-gallery-text {
  display: flex;
  justify-content: center;
  padding: 40px 0;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: #8190ae;
  text-align: center;
}

/* === Varian & Foto Cards === */

.selka-variant-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-variant-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-variant-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selka-variant-card__title {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #68748d;
}

.selka-variant-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selka-variant-card__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0f2144;
  background: #fff;
}

.selka-variant-card__chip--active,
.selka-variant-card__chip:active {
  border-color: #0051f3;
}

.selka-variant-card__swatch {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  flex-shrink: 0;
}

.selka-variant-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 100px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 11px;
  font-weight: 500;
  color: #0051f3;
}

.selka-variant-card__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.selka-variant-card__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.selka-variant-card__edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
}

.selka-variant-card__guide-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  background: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

/* Photo picker modal (Figma 520:354, 520:647, 520:748, 520:849) */
.selka-modal--photo-picker {
  padding: 24px;
}

.selka-photo-picker-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(861px, 100%);
  max-height: calc(100vh - 48px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-photo-picker-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.selka-photo-picker-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-photo-picker-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-photo-picker-modal__close {
  flex-shrink: 0;
}

.selka-photo-picker-modal__body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.selka-photo-picker-modal__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.selka-photo-picker-modal__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.selka-photo-picker-modal__tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  color: #68748d;
  cursor: pointer;
}

.selka-photo-picker-modal__tab--icon {
  padding: 8px 16px;
}

.selka-photo-picker-modal__tab--active {
  border-color: rgba(129, 144, 174, 0.08);
  background: var(--dark-metal-100);
  font-weight: 600;
  color: #fff;
}

.selka-photo-picker-modal__sort {
  position: relative;
  flex-shrink: 0;
}

.selka-photo-picker-modal__sort-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  color: #0051f3;
  cursor: pointer;
}

.selka-photo-picker-modal__sort-label strong {
  font-weight: 600;
}

.selka-photo-picker-modal__sort-menu {
  position: absolute;
  right: 0;
  z-index: 10;
  min-width: 100%;
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 33, 68, 0.12);
}

.selka-photo-picker-modal__sort-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #0f2144;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.selka-photo-picker-modal__sort-option:hover {
  background: rgba(129, 144, 174, 0.08);
}

.selka-photo-picker-modal__sort-option--active {
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
  font-weight: 600;
}

.selka-photo-picker-modal--search .selka-photo-picker-modal__upload {
  display: none;
}

.selka-photo-picker-modal__search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 400px;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
}

.selka-photo-picker-modal__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
}

.selka-photo-picker-modal__search-clear {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-photo-picker-modal__divider {
  margin: 12px 0 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
  flex-shrink: 0;
}

.selka-photo-picker-modal__used-filter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  font-size: 12px;
  color: #68748d;
  flex-shrink: 0;
}

.selka-photo-picker-modal__product-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  color: #0051f3;
  cursor: pointer;
}

.selka-photo-picker-modal__product-select-label strong {
  font-weight: 600;
}

.selka-photo-picker-modal__product-select-native {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.selka-photo-picker-modal__content {
  display: flex;
  gap: 20px;
  min-height: 0;
  flex: 1;
  margin-top: 16px;
  overflow: hidden;
}

.selka-photo-picker-modal__main {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  flex: 1;
  overflow-y: auto;
  max-height: 465px;
}

.selka-photo-picker-modal--preview .selka-photo-picker-modal__main {
  flex: 0 0 min(400px, 48%);
  max-width: 400px;
}

.selka-photo-picker-modal__upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 126px;
  padding: 16px;
  border: 1px dashed rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  text-align: center;
}

.selka-photo-picker-modal__upload--active {
  border-color: #0051f3;
  background: rgba(0, 81, 243, 0.06);
}

.selka-photo-picker-modal__upload p {
  margin: 0;
  max-width: 357px;
  font-size: 12px;
  color: #8190ae;
}

.selka-photo-picker-modal__file-input {
  display: none;
}

.selka-photo-picker-modal__upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 8px 40px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: var(--dark-metal-100);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.selka-photo-picker-modal__upload-btn img {
  filter: brightness(0) invert(1);
}

.selka-photo-picker-modal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 8px;
}

.selka-photo-picker-modal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-photo-picker-modal__card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-photo-picker-modal__card--selected {
  border-color: rgba(129, 144, 174, 0.28);
  background: rgba(0, 81, 243, 0.08);
}

.selka-photo-picker-modal__card--previewing {
  outline: 1px solid rgba(0, 81, 243, 0.35);
}

.selka-photo-picker-modal__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid rgba(129, 144, 174, 0.6);
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
}

.selka-photo-picker-modal__checkbox--checked {
  border-color: #0051f3;
  background: #0051f3;
}

.selka-photo-picker-modal__checkbox-order {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.selka-photo-picker-modal__checkbox--checked img {
  filter: brightness(0) invert(1);
}

.selka-photo-picker-modal__thumb {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.selka-photo-picker-modal__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.selka-photo-picker-modal__card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-photo-picker-modal__card-name {
  margin: 0;
  font-size: 14px;
  color: #0f2144;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-photo-picker-modal__card-spec {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-photo-picker-modal__icon-btn {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.selka-photo-picker-modal__icon-btn img {
  display: block;
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-photo-picker-modal__preview-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 0;
  background: rgba(129, 144, 174, 0.08);
  overflow-y: auto;
}

.selka-photo-picker-modal__preview-image {
  width: 100%;
  max-width: 361px;
  aspect-ratio: 1;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.selka-photo-picker-modal__preview-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.selka-photo-picker-modal__preview-meta {
  text-align: center;
  max-width: 361px;
}

.selka-photo-picker-modal__preview-name {
  margin: 0 0 8px;
  font-size: 14px;
  color: #0f2144;
}

.selka-photo-picker-modal__preview-spec {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: #8190ae;
}

.selka-photo-picker-modal__preview-spec span[aria-hidden] {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #8190ae;
  flex-shrink: 0;
}

.selka-photo-picker-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.selka-photo-picker-modal__btn-confirm {
  min-width: 200px;
}

@media (max-width: 767px) {
  .selka-photo-picker-modal--preview .selka-photo-picker-modal__content {
    flex-direction: column;
  }

  .selka-photo-picker-modal--preview .selka-photo-picker-modal__main {
    flex: none;
    max-width: none;
  }

  .selka-photo-picker-modal__grid {
    grid-template-columns: 1fr;
  }

  .selka-photo-picker-modal__toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .selka-photo-picker-modal__sort {
    justify-content: center;
  }
}

/* Success confirmation toast */
.selka-success-toast-host {
  position: fixed;
  top: 32px;
  left: 50%;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 48px);
  padding: 0 24px;
  pointer-events: none;
  transform: translateX(-50%);
}

.selka-success-toast {
  pointer-events: auto;
  flex-shrink: 0;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.selka-success-toast__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.selka-success-toast__content {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-success-toast__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: rgba(24, 143, 26, 0.12);
}

.selka-success-toast__icon img {
  width: 24px;
  height: 24px;
  filter: brightness(0) saturate(100%) invert(36%) sepia(98%) saturate(749%) hue-rotate(88deg)
    brightness(95%) contrast(90%);
}

.selka-success-toast__message {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #68748d;
  white-space: nowrap;
}

.selka-success-toast__status {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #188f1a;
  white-space: nowrap;
}

.selka-success-toast__close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.selka-success-toast__close img {
  width: 16px;
  height: 16px;
}

.selka-success-toast--error .selka-success-toast__icon {
  background: rgba(198, 40, 40, 0.12);
}

.selka-success-toast--error .selka-success-toast__icon img {
  filter: brightness(0) saturate(100%) invert(24%) sepia(86%) saturate(2476%) hue-rotate(346deg)
    brightness(92%) contrast(92%);
}

.selka-success-toast--error .selka-success-toast__status {
  color: #c62828;
}

.selka-success-toast__timer-track {
  height: 4px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-success-toast__timer-bar {
  height: 100%;
  width: 100%;
  background: rgba(129, 144, 174, 0.28);
  transform-origin: left center;
  animation-name: selka-success-toast-timer;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes selka-success-toast-timer {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(0);
  }
}

/* Manual order */

.selka-manual-order__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 774px;
  min-width: 0;
  padding: 40px;
  box-sizing: border-box;
}

.selka-manual-order__header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-manual-order__submit-btn {
  padding: 8px 24px;
}

.selka-manual-order__breadcrumb-link {
  display: flex;
  line-height: 0;
}

.selka-manual-order__breadcrumb-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  transition: background 0.15s ease;
}

.selka-manual-order__breadcrumb-link:hover .selka-manual-order__breadcrumb-icon {
  background: rgba(129, 144, 174, 0.08);
}

.selka-manual-order__breadcrumb-icon img {
  /* Metal 100 #8190ae */
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-manual-order__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.selka-manual-order__section-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-manual-order__section-head p {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-manual-order__divider {
  margin: 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-manual-order__card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
}

.selka-manual-order__card-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.selka-manual-order__card-toolbar p {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-manual-order__card-toolbar strong {
  color: #0051f3;
  font-weight: 400;
}

.selka-manual-order__card-actions {
  display: flex;
  flex-shrink: 0;
  gap: 4px;
}

.selka-manual-order__empty-products {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  text-align: center;
}

.selka-manual-order__empty-products p {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-manual-order__empty-products span {
  font-size: 12px;
  color: #8190ae;
}

.selka-manual-order__product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-manual-order__product-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px 104px 96px 104px 20px;
  column-gap: 16px;
  align-items: center;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
}

.selka-manual-order__product-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.selka-manual-order__product-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  background: #f8f7f5;
}

.selka-manual-order__product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selka-manual-order__product-thumb--custom {
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(0, 81, 243, 0.08);
  background: #ebf1fe;
}

.selka-manual-order__product-info {
  min-width: 0;
}

.selka-manual-order__product-name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-manual-order__product-variant {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-manual-order__product-variant--custom {
  font-style: italic;
  color: #8190ae;
}

.selka-manual-order__discount-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

.selka-manual-order__discount-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.selka-manual-order__discount-icon {
  flex-shrink: 0;
  display: block;
}

.selka-manual-order__unit-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.selka-manual-order__unit-price-current {
  font-size: 14px;
  color: var(--dark-metal-100, #68748d);
  white-space: nowrap;
}

.selka-manual-order__product-row--discounted .selka-manual-order__unit-price-current {
  color: var(--energy-100, #0051f3);
}

.selka-manual-order__unit-price-compare {
  font-size: 12px;
  color: #8190ae;
  text-decoration: line-through;
  white-space: nowrap;
}

.selka-manual-order__qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.selka-manual-order__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
}

.selka-manual-order__qty-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-manual-order__qty-btn img {
  /* Energy 100 #0051f3 */
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order__qty-value {
  box-sizing: border-box;
  width: 40px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.selka-manual-order__qty-value:focus {
  outline: none;
  border-color: rgba(0, 81, 243, 0.48);
}

.selka-manual-order__qty-value::-webkit-outer-spin-button,
.selka-manual-order__qty-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.selka-manual-order__line-total {
  font-size: 14px;
  font-weight: 500;
  color: #0051f3;
  text-align: right;
  white-space: nowrap;
}

.selka-manual-order__remove-btn {
  display: flex;
  justify-self: end;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.72;
}

.selka-manual-order__remove-btn img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order__radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-manual-order__radio {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
}

.selka-manual-order__radio-input {
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.selka-manual-order__radio-dot {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.selka-manual-order__radio--checked .selka-manual-order__radio-dot {
  border: 4px solid #0051f3;
}

.selka-manual-order__radio-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.selka-manual-order__radio-label {
  font-size: 14px;
  font-weight: 500;
  color: #68748d;
  white-space: nowrap;
}

.selka-manual-order__radio--checked .selka-manual-order__radio-label {
  color: #0051f3;
  font-weight: 600;
}

.selka-manual-order__radio-desc {
  font-size: 12px;
  color: #8190ae;
  line-height: normal;
}

.selka-manual-order__radio--checked .selka-manual-order__radio-desc {
  color: #8190ae;
}

.selka-manual-order__info-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-manual-order__info-alert p {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-manual-order__payment-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  min-width: 0;
  padding: 16px 0;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box;
}

.selka-manual-order__payment-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 0 16px;
}

.selka-manual-order__payment-divider {
  height: 0;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-manual-order__payment-footer {
  display: flex;
  flex-wrap: nowrap;
  gap: 20px;
  align-items: center;
  min-width: 0;
  padding: 0 16px;
}

.selka-manual-order__payment-footer-chips {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  max-width: 410px;
  min-width: 0;
}

.selka-manual-order__payment-footer-chips:empty {
  display: none;
}

.selka-manual-order__payment-footer-divider {
  position: relative;
  flex: 1 1 0;
  align-self: stretch;
  min-width: 1px;
  min-height: 32px;
  pointer-events: none;
}

.selka-manual-order__payment-footer:not(:has(.selka-manual-order__discount-chip))
  .selka-manual-order__payment-footer-divider {
  display: none;
}

.selka-manual-order__payment-footer:not(:has(.selka-manual-order__discount-chip))
  .selka-manual-order__payment-footer-actions {
  margin-left: auto;
}

.selka-manual-order__payment-footer-divider::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-manual-order__payment-footer-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
}

.selka-manual-order__payment-action {
  padding: 8px 16px 8px 12px;
  white-space: nowrap;
}

.selka-manual-order__payment-action img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  filter: none;
}

.selka-manual-order__discount-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 4px 4px 4px 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 100px;
  background: #ebf1fe;
}

.selka-manual-order__discount-chip-body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.selka-manual-order__discount-chip-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.selka-manual-order__discount-chip-name {
  font-size: 12px;
  font-weight: 600;
  color: #0051f3;
  white-space: nowrap;
}

.selka-manual-order__discount-chip-sep {
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-manual-order__discount-chip-value {
  font-size: 12px;
  font-weight: 400;
  color: #0051f3;
  white-space: nowrap;
}

.selka-manual-order__discount-chip-remove {
  position: relative;
  z-index: 2;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.selka-manual-order__discount-chip-remove img {
  display: block;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.selka-manual-order__aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-manual-order__aside-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 20px;
  background: #fff;
}

.selka-manual-order__aside-card:first-child {
  gap: 8px;
}

.selka-manual-order__aside-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.selka-manual-order__aside-card-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-manual-order__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.selka-manual-order__icon-btn:not(:disabled):hover {
  border-color: rgba(129, 144, 174, 0.08);
  background: rgba(129, 144, 174, 0.08);
}

.selka-manual-order__customer-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.selka-manual-order__customer-menu {
  position: absolute;
  right: 0;
  z-index: 20;
  width: 220px;
}

.selka-manual-order__notes-box {
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-manual-order__notes-box p {
  margin: 0;
  font-size: 14px;
  color: #0f2144;
}

.selka-manual-order__notes-placeholder {
  font-style: italic;
  color: #8190ae !important;
}

.selka-manual-order__customer-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.selka-manual-order__customer-empty p {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-manual-order__customer-search-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-manual-order__customer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-manual-order__customer-search--open {
  border-color: #0051f3;
}

.selka-manual-order__customer-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
}

.selka-manual-order__customer-search input::placeholder {
  color: #8190ae;
}

.selka-manual-order__customer-search-clear {
  display: flex;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.72;
}

.selka-manual-order__customer-search-popover {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.04);
}

.selka-manual-order__customer-search-popover--portal {
  position: fixed;
  z-index: 120;
}

.selka-manual-order__customer-search-popover-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: none;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.selka-manual-order__customer-search-popover-item:hover {
  background: var(--energy-8);
}

.selka-manual-order__customer-search-popover-avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 20px;
  background: rgba(129, 144, 174, 0.12);
  font-size: 16px;
  font-weight: 600;
  color: #8190ae;
}

.selka-manual-order__customer-search-popover-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.selka-manual-order__customer-search-popover-name {
  font-size: 13px;
  font-weight: 500;
  color: #0f2144;
}

.selka-manual-order__customer-search-popover-joined {
  font-size: 12px;
  color: #8190ae;
}

.selka-manual-order__customer-search-popover-divider {
  height: 0;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-manual-order__customer-search-popover-empty {
  margin: 0;
  padding: 16px;
  font-size: 14px;
  color: #8190ae;
}

.selka-manual-order__customer-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
}

.selka-manual-order__customer-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 20px;
  background: rgba(129, 144, 174, 0.12);
  font-size: 16px;
  font-weight: 600;
  color: #8190ae;
}

.selka-manual-order__customer-name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0051f3;
}

.selka-manual-order__customer-joined {
  margin: 2px 0 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-manual-order__customer-contact-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-manual-order__field-label {
  margin: 0 0 4px;
  font-size: 12px;
  color: #8190ae;
}

.selka-manual-order__contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-manual-order__contact-row span {
  font-size: 12px;
  color: #0051f3;
}

.selka-manual-order__contact-actions {
  display: flex;
  gap: 8px;
}

.selka-manual-order__contact-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

.selka-manual-order__contact-icon-btn__stack {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
}

.selka-manual-order__contact-icon-btn__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.72);
  transition:
    opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.28s cubic-bezier(0.34, 1.3, 0.64, 1);
  pointer-events: none;
}

.selka-manual-order__contact-icon-btn__layer.is-visible {
  opacity: 1;
  transform: scale(1);
}

.selka-manual-order__contact-icon-btn__layer.is-hidden {
  opacity: 0;
  transform: scale(0.72);
}

.selka-manual-order__contact-icon-btn__layer--check img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order__address-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  color: #0051f3;
}

.selka-manual-order__address-select img {
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order__customer-field p:last-child {
  margin: 0;
  font-size: 14px;
  color: #0f2144;
}

.selka-manual-order__billing-note {
  font-style: italic;
  color: #68748d !important;
}

@media (max-width: 1100px) {
  .selka-manual-order__product-row {
    grid-template-columns: minmax(0, 1fr) 20px;
    row-gap: 12px;
    padding-right: 12px;
  }

  .selka-manual-order__discount-slot,
  .selka-manual-order__unit-price,
  .selka-manual-order__qty,
  .selka-manual-order__line-total {
    grid-column: 1;
  }

  .selka-manual-order__remove-btn {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
  }

  .selka-manual-order__unit-price,
  .selka-manual-order__line-total {
    justify-self: start;
    text-align: left;
  }

  .selka-manual-order__unit-price {
    align-items: flex-start;
  }
}

/* Manual order — Pilih Produk modal (Figma 601:1935 / 601:2278) */

.selka-modal--manual-order-picker {
  padding: 24px;
}

.selka-manual-order-picker {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(584px, 100%);
  max-height: calc(100vh - 48px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}

.selka-manual-order-picker__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.selka-manual-order-picker__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-manual-order-picker__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-manual-order-picker__close img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order-picker__count {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-manual-order-picker__count strong {
  font-weight: 400;
  color: #0051f3;
}

.selka-manual-order-picker__search-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.selka-manual-order-picker__search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-manual-order-picker__search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
}

.selka-manual-order-picker__search input::placeholder {
  color: #8190ae;
}

.selka-manual-order-picker__search-clear {
  display: flex;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.72;
}

.selka-manual-order-picker__table {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.selka-manual-order-picker__table-head,
.selka-manual-order-picker__row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 84px 120px;
  gap: 16px;
  align-items: center;
}

.selka-manual-order-picker__table-head {
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 12px 12px 0 0;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
  flex-shrink: 0;
}

.selka-manual-order-picker__table-head span:nth-child(3),
.selka-manual-order-picker__table-head span:nth-child(4) {
  text-align: right;
}

.selka-manual-order-picker__table-body {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-top: none;
  border-radius: 0 0 12px 12px;
  -webkit-overflow-scrolling: touch;
}

.selka-manual-order-picker__group-divider {
  margin: 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-manual-order-picker__variant-divider {
  margin: 0 0 0 32px;
  border: none;
  border-top: 1px dashed rgba(129, 144, 174, 0.28);
  width: calc(100% - 32px);
}

.selka-manual-order-picker__row {
  padding: 8px 16px;
  background: #fff;
}

.selka-manual-order-picker__row--parent {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 0 1px 0 rgba(129, 144, 174, 0.12);
}

.selka-manual-order-picker__row--selected {
  background: rgba(0, 81, 243, 0.08);
}

.selka-manual-order-picker__row--parent-selected {
  background: #f5f8ff;
  box-shadow: 0 1px 0 rgba(129, 144, 174, 0.12);
}

.selka-manual-order-picker__row--variant {
  padding: 8px 16px;
}

.selka-manual-order-picker__row--variant .selka-manual-order-picker__checkbox {
  margin-left: 16px;
}

.selka-manual-order-picker__checkbox {
  display: flex;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.selka-manual-order-picker__product {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.selka-manual-order-picker__product--variant {
  padding-left: 16px;
}

.selka-manual-order-picker__thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  background: #f8f7f5;
}

.selka-manual-order-picker__thumb--sm {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selka-manual-order-picker__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selka-manual-order-picker__name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-manual-order-picker__variant-meta {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
}

.selka-manual-order-picker__stock {
  justify-self: end;
  min-width: 0;
  padding-right: 4px;
  text-align: right;
  font-size: 14px;
  color: #68748d;
}

.selka-manual-order-picker__row > :nth-child(4) {
  justify-self: end;
  min-width: 0;
}

.selka-manual-order-picker__price-current {
  display: block;
  font-size: 14px;
  color: #0051f3;
  text-align: right;
  white-space: nowrap;
}

.selka-manual-order-picker__price-compare {
  display: block;
  font-size: 12px;
  color: #8190ae;
  text-align: right;
  text-decoration: line-through;
  white-space: nowrap;
}

.selka-manual-order-picker__price-range {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  font-size: 14px;
  color: #0051f3;
  text-align: right;
  white-space: nowrap;
}

.selka-manual-order-picker__price-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.selka-manual-order-picker__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.selka-manual-order-picker__save {
  width: 322px;
  max-width: 100%;
}

/* Manual order — Buat Barang Custom modal (Figma 604:2634 / 601:2437) */

.selka-modal--manual-order-custom-item {
  padding: 24px;
}

.selka-manual-order-custom-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(584px, 100%);
  max-height: calc(100vh - 48px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  overflow: auto;
}

.selka-manual-order-custom-item__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.selka-manual-order-custom-item__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-manual-order-custom-item__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-manual-order-custom-item__close img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order-custom-item__fields {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.selka-manual-order-custom-item__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.selka-manual-order-custom-item__field--name {
  flex: 1;
}

.selka-manual-order-custom-item__field--price {
  width: 140px;
  flex-shrink: 0;
}

.selka-manual-order-custom-item__field--qty {
  flex-shrink: 0;
}

.selka-manual-order-custom-item__label {
  font-size: 14px;
  color: #68748d;
}

.selka-manual-order-custom-item__required {
  color: #0051f3;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.selka-manual-order-custom-item__input,
.selka-manual-order-custom-item__price-input,
.selka-manual-order-custom-item__weight-input {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-manual-order-custom-item__input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
}

.selka-manual-order-custom-item__input::placeholder {
  color: #8190ae;
}

.selka-manual-order-custom-item__input:focus,
.selka-manual-order-custom-item__price-value:focus,
.selka-manual-order-custom-item__qty-value:focus,
.selka-manual-order-custom-item__weight-value:focus {
  outline: none;
  border-color: rgba(0, 81, 243, 0.48);
}

.selka-manual-order-custom-item__price-input {
  justify-content: space-between;
  gap: 8px;
}

.selka-manual-order-custom-item__price-prefix {
  font-size: 14px;
  color: #8190ae;
  flex-shrink: 0;
}

.selka-manual-order-custom-item__price-value {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  text-align: right;
}

.selka-manual-order-custom-item__price-value::placeholder {
  color: #8190ae;
}

.selka-manual-order-custom-item__qty {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selka-manual-order-custom-item__qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
}

.selka-manual-order-custom-item__qty-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-manual-order-custom-item__qty-btn img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order-custom-item__qty-value {
  box-sizing: border-box;
  width: 48px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

.selka-manual-order-custom-item__qty-value::-webkit-outer-spin-button,
.selka-manual-order-custom-item__qty-value::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.selka-manual-order-custom-item__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-manual-order-custom-item__checkbox {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.selka-manual-order-custom-item__checkbox-label {
  font-size: 14px;
  color: #68748d;
}

.selka-manual-order-custom-item__checkbox--checked
  .selka-manual-order-custom-item__checkbox-label {
  color: #0051f3;
}

.selka-manual-order-custom-item__weight {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-manual-order-custom-item__weight-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-manual-order-custom-item__optional {
  padding: 2px 8px;
  border-radius: 23px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 10px;
  color: #68748d;
}

.selka-manual-order-custom-item__weight-input {
  justify-content: space-between;
  gap: 45px;
  width: fit-content;
  min-width: 120px;
}

.selka-manual-order-custom-item__weight-value {
  width: 64px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
}

.selka-manual-order-custom-item__weight-unit {
  font-size: 14px;
  color: #8190ae;
}

.selka-manual-order-custom-item__weight-hint {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-manual-order-custom-item__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.selka-manual-order-custom-item__save {
  width: 322px;
  max-width: 100%;
}

@media (max-width: 640px) {
  .selka-manual-order-custom-item__fields {
    flex-direction: column;
  }

  .selka-manual-order-custom-item__field--price {
    width: 100%;
  }
}

/* Manual order — product discount popover (Figma 604:2726 / 604:2773) */

.selka-manual-order-discount-popover {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 272px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.04);
}

.selka-manual-order-discount-popover--portal {
  position: fixed;
  z-index: 1100;
}

.selka-manual-order-discount-popover__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.selka-manual-order-discount-popover__label {
  font-size: 14px;
  color: #68748d;
}

.selka-manual-order-discount-popover__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-manual-order-discount-popover__select {
  appearance: none;
  width: 100%;
  padding: 12px 36px 12px 16px;
  border: none;
  border-radius: 12px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0051f3;
  cursor: pointer;
}

.selka-manual-order-discount-popover__select:focus {
  outline: none;
}

.selka-manual-order-discount-popover__select-wrap:focus-within {
  border-color: rgba(0, 81, 243, 0.48);
}

.selka-manual-order-discount-popover__select-wrap img {
  position: absolute;
  right: 12px;
  pointer-events: none;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order-discount-popover__value-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-manual-order-discount-popover__value-input:focus-within {
  border-color: rgba(0, 81, 243, 0.48);
}

.selka-manual-order-discount-popover__value {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
}

.selka-manual-order-discount-popover__value--amount {
  text-align: right;
}

.selka-manual-order-discount-popover__value::placeholder {
  color: #8190ae;
}

.selka-manual-order-discount-popover__value:focus {
  outline: none;
}

.selka-manual-order-discount-popover__prefix,
.selka-manual-order-discount-popover__suffix {
  flex-shrink: 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-manual-order-discount-popover__footer {
  display: flex;
  gap: 4px;
  width: 100%;
}

.selka-manual-order-discount-popover__delete {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid rgba(198, 34, 37, 0.12);
  border-radius: 8px;
  background: rgba(198, 34, 37, 0.12);
  cursor: pointer;
}

.selka-manual-order-discount-popover__delete:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-manual-order-discount-popover__apply {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.selka-manual-order-discount-popover__apply:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Manual order — Diskon Total Order modal (Figma 604:2801 / 604:2872) */

.selka-modal--manual-order-total-discount {
  padding: 24px;
}

.selka-manual-order-total-discount {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  overflow: auto;
}

.selka-manual-order-total-discount__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.selka-manual-order-total-discount__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-manual-order-total-discount__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-manual-order-total-discount__close img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order-total-discount__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
}

.selka-manual-order-total-discount__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.selka-manual-order-total-discount__field--value {
  width: min(260px, 100%);
}

.selka-manual-order-total-discount__label {
  font-size: 14px;
  color: #68748d;
}

.selka-manual-order-total-discount__required {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: #0051f3;
}

.selka-manual-order-total-discount__input {
  width: 100%;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
}

.selka-manual-order-total-discount__input::placeholder {
  color: #8190ae;
}

.selka-manual-order-total-discount__input:focus {
  outline: none;
  border-color: #0051f3;
}

.selka-manual-order-total-discount__hint {
  font-size: 12px;
  color: #8190ae;
}

.selka-manual-order-total-discount__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 42px;
  padding: 0 12px 0 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-manual-order-total-discount__select-wrap:focus-within {
  border-color: #0051f3;
}

.selka-manual-order-total-discount__select {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0051f3;
  appearance: none;
  cursor: pointer;
}

.selka-manual-order-total-discount__select:focus {
  outline: none;
}

.selka-manual-order-total-discount__select-wrap img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.selka-manual-order-total-discount__value-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-manual-order-total-discount__value-input:focus-within {
  border-color: #0051f3;
}

.selka-manual-order-total-discount__value {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  text-align: left;
}

.selka-manual-order-total-discount__value--amount {
  text-align: right;
  font-feature-settings: "ss01" 1, "lnum" 1, "tnum" 1;
}

.selka-manual-order-total-discount__value::placeholder {
  color: #8190ae;
}

.selka-manual-order-total-discount__value:focus {
  outline: none;
}

.selka-manual-order-total-discount__prefix,
.selka-manual-order-total-discount__suffix {
  flex-shrink: 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-manual-order-total-discount__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.selka-manual-order-total-discount__delete {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid rgba(198, 34, 37, 0.12);
  border-radius: 8px;
  background: rgba(198, 34, 37, 0.12);
  cursor: pointer;
}

.selka-manual-order-total-discount__delete:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-manual-order-total-discount__footer-actions {
  display: flex;
  flex: 1;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.selka-manual-order-total-discount__cancel {
  flex-shrink: 0;
  width: 100px;
  min-width: 100px;
}

.selka-manual-order-total-discount__apply {
  flex: 1;
  max-width: 322px;
}

@media (max-width: 640px) {
  .selka-manual-order-total-discount__row {
    grid-template-columns: 1fr;
  }

  .selka-manual-order-total-discount__field--value {
    width: 100%;
  }

  .selka-manual-order-total-discount__footer {
    flex-wrap: wrap;
  }

  .selka-manual-order-total-discount__footer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .selka-manual-order-total-discount__apply {
    max-width: none;
    width: 100%;
  }
}

/* Manual order — Tambah Catatan modal (Figma 610:2950 / 610:2995) */

.selka-modal--manual-order-notes {
  padding: 24px;
}

.selka-manual-order-notes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(584px, 100%);
  max-height: calc(100vh - 48px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  overflow: auto;
}

.selka-manual-order-notes__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.selka-manual-order-notes__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-manual-order-notes__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-manual-order-notes__close img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-manual-order-notes__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.selka-manual-order-notes__label {
  font-size: 14px;
  color: #68748d;
}

.selka-manual-order-notes__textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: #0f2144;
  resize: vertical;
}

.selka-manual-order-notes__textarea::placeholder {
  color: #8190ae;
}

.selka-manual-order-notes__textarea:focus {
  outline: none;
  border-color: #0051f3;
}

.selka-manual-order-notes__footer {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.selka-manual-order-notes__delete {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid rgba(198, 34, 37, 0.12);
  border-radius: 8px;
  background: rgba(198, 34, 37, 0.12);
  cursor: pointer;
}

.selka-manual-order-notes__delete:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-manual-order-notes__footer-actions {
  display: flex;
  flex: 1;
  gap: 8px;
  justify-content: flex-end;
  min-width: 0;
}

.selka-manual-order-notes__cancel {
  flex-shrink: 0;
  width: 100px;
  min-width: 100px;
}

.selka-manual-order-notes__save {
  flex: 1;
  max-width: 322px;
}

@media (max-width: 640px) {
  .selka-manual-order-notes__footer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .selka-manual-order-notes__save {
    max-width: none;
    width: 100%;
  }
}

/* Create customer page (Figma 601:617) */

.selka-create-customer {
  flex: 1;
  min-height: 0;
}

.selka-create-customer__header-actions {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
}

.selka-create-customer__header-btn {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
}

.selka-create-customer__header-btn:disabled,
.selka-create-customer__header-primary:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-create-customer__header-primary {
  padding: 8px 24px;
  font-size: 12px;
  font-weight: 500;
}

.selka-create-customer__body {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 774px;
  min-width: 0;
  padding: 40px;
  box-sizing: border-box;
}

.selka-create-customer__profile-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.selka-create-customer__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 100px;
  background: rgba(129, 144, 174, 0.12);
  font-size: 24px;
  font-weight: 600;
  color: #8190ae;
}

.selka-create-customer__profile-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  max-width: 654px;
}

.selka-create-customer__section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.selka-create-customer__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-create-customer__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.selka-create-customer__section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-create-customer__section-divider {
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-create-customer__field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.selka-create-customer__field-row--date {
  grid-template-columns: 1fr;
}

.selka-create-customer__date-fields {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 317px;
}

.selka-create-customer__input.selka-create-customer__input--day {
  width: 60px;
  flex-shrink: 0;
  text-align: center;
  padding: 0 12px;
}

.selka-create-customer__select-wrap--month {
  width: 160px;
  flex-shrink: 0;
}

.selka-create-customer__select.selka-create-customer__select--month {
  appearance: none;
  padding-right: 36px;
  color: #0051f3;
}

.selka-create-customer__input.selka-create-customer__input--year {
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 12px;
}

.selka-create-customer__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.selka-create-customer__label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #68748d;
}

.selka-create-customer__required {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: #0051f3;
}

.selka-create-customer__optional-pill {
  margin-left: 4px;
  padding: 2px 8px;
  border-radius: 23px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 10px;
  color: #68748d;
}

.selka-create-customer__input,
.selka-create-customer__select {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 0 12px 0 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: #0f2144;
}

.selka-create-customer__input::placeholder {
  color: #8190ae;
}

.selka-create-customer__input:focus,
.selka-create-customer__select:focus {
  outline: none;
  border-color: #0051f3;
}

.selka-create-customer__input--error {
  border-color: #c62225;
}

.selka-create-customer__input--error:focus {
  border-color: #c62225;
}

.selka-create-customer__field-error {
  margin: 0;
  font-size: 12px;
  color: #c62225;
}

.selka-create-customer__phone {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.selka-create-customer__phone-code {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  height: 42px;
  box-sizing: border-box;
  padding: 0 8px 0 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: #0051f3;
  cursor: pointer;
}

.selka-create-customer__phone-code--open {
  border-color: #0051f3;
}

.selka-create-customer__phone-code img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-create-customer__input--phone {
  flex: 1;
  min-width: 0;
}

.selka-create-customer__select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.selka-create-customer__select {
  appearance: none;
  padding-right: 36px;
}

.selka-create-customer__select--placeholder {
  color: #0051f3;
}

.selka-create-customer__select-wrap img {
  position: absolute;
  right: 12px;
  pointer-events: none;
}

.selka-create-customer__add-address {
  gap: 8px;
  padding: 8px 16px 8px 12px;
  font-size: 12px;
  font-weight: 500;
}

.selka-create-customer__add-address img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-create-customer__address-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px 24px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  text-align: center;
}

.selka-create-customer__address-empty p:first-child {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-create-customer__address-empty p:last-child {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-create-customer__address-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-create-customer__address-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 20px 24px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
}

.selka-create-customer__address-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.selka-create-customer__address-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-create-customer__default-badge {
  padding: 2px 8px;
  border-radius: 23px;
  background: #ebf1fe;
  font-size: 12px;
  font-weight: 400;
  color: #0051f3;
}

.selka-create-customer__address-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.selka-create-customer__address-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-create-customer__address-action:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-create-customer__address-action img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-create-customer__address-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 8px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
}

.selka-create-customer__address-delete:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-create-customer__address-rename-popover {
  display: flex;
  flex-direction: column;
  width: 272px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.04);
}

.selka-create-customer__address-rename-popover--portal {
  position: fixed;
  z-index: 1100;
}

.selka-create-customer__address-rename-popover-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}

.selka-create-customer__address-rename-popover-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.selka-create-customer__address-rename-popover-label {
  font-size: 14px;
  color: #68748d;
}

.selka-create-customer__address-rename-popover-input {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  padding: 0 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
}

.selka-create-customer__address-rename-popover-input::placeholder {
  color: #8190ae;
}

.selka-create-customer__address-rename-popover-input:focus {
  outline: none;
  border-color: rgba(0, 81, 243, 0.48);
}

.selka-create-customer__address-rename-popover-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.selka-create-customer__address-rename-popover-cancel {
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #68748d;
  cursor: pointer;
}

.selka-create-customer__address-rename-popover-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  height: 40px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.selka-create-customer__address-rename-popover-save:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-create-customer__billing {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.selka-create-customer__billing p {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-create-customer__aside {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-create-customer__aside-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 20px;
  background: #fff;
}

.selka-create-customer__aside-card--rewards {
  gap: 8px;
}

.selka-create-customer__aside-card--data {
  gap: 16px;
  align-items: stretch;
  padding: 20px 0 24px;
}

.selka-create-customer__aside-card--data .selka-create-customer__aside-title {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.selka-create-customer__aside-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-create-customer__rewards-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.selka-create-customer__rewards-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.selka-create-customer__rewards-balance {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 80px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  text-align: center;
}

.selka-create-customer__rewards-balance span {
  font-size: 12px;
  color: #68748d;
}

.selka-create-customer__rewards-balance strong {
  font-size: 16px;
  font-weight: 600;
  color: #0051f3;
}

.selka-create-customer__rewards-balance strong span {
  font-size: 16px;
  font-weight: 400;
  color: #0051f3;
}

.selka-create-customer__rewards-history {
  width: 100%;
  justify-content: center;
  padding: 8px 12px 8px 16px;
  font-size: 12px;
  font-weight: 500;
}

.selka-create-customer__rewards-history img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-create-customer__rewards-actions {
  display: flex;
  gap: 4px;
}

.selka-create-customer__rewards-set {
  flex: 1;
  min-width: 0;
  width: 184px;
  height: 40px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #0051f3;
  cursor: pointer;
}

.selka-create-customer__rewards-set:disabled,
.selka-create-customer__rewards-settings:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-create-customer__rewards-settings {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 40px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
  cursor: pointer;
}

.selka-create-customer__rewards-settings img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-create-customer__data-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.selka-create-customer__data-row span {
  font-size: 12px;
  color: #68748d;
}

.selka-create-customer__data-value {
  font-size: 16px;
  font-weight: 600;
  color: #0051f3;
}

.selka-create-customer__data-value--date {
  font-size: 14px;
  font-weight: 500;
  color: #68748d;
}

@media (max-width: 1100px) {
  .selka-create-customer.selka-order-detail {
    flex-direction: column;
    overflow: auto;
  }

  .selka-create-customer .selka-order-detail__main {
    flex: none;
    min-height: auto;
  }

  .selka-create-customer__aside {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .selka-create-customer__aside-card {
    flex: 1;
    min-width: min(100%, 288px);
  }
}

@media (max-width: 768px) {
  .selka-create-customer__body {
    padding: 24px 20px 40px;
  }

  .selka-order-detail__header .selka-create-customer__header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .selka-create-customer__profile-row {
    flex-direction: column;
    gap: 20px;
  }

  .selka-create-customer__profile-column {
    max-width: none;
  }

  .selka-create-customer__field-row {
    grid-template-columns: 1fr;
  }

  .selka-create-customer__aside {
    flex-direction: column;
  }
}

/* Country code picker (create customer phone fields) */

.selka-country-code-picker__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.selka-country-code-picker__popover {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(15, 33, 68, 0.08);
}

.selka-country-code-picker__popover--portal {
  position: fixed;
  z-index: 120;
}

.selka-country-code-picker__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-country-code-picker__search img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-country-code-picker__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #0f2144;
  outline: none;
}

.selka-country-code-picker__search-input::placeholder {
  color: #8190ae;
}

.selka-country-code-picker__search-clear {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  opacity: 0.72;
}

.selka-country-code-picker__list-wrap {
  max-height: 240px;
  overflow-y: auto;
}

.selka-country-code-picker__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-country-code-picker__option {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.selka-country-code-picker__option:hover,
.selka-country-code-picker__option--selected {
  background: rgba(0, 81, 243, 0.08);
}

.selka-country-code-picker__option-name {
  font-size: 14px;
  color: #0f2144;
}

.selka-country-code-picker__option-code {
  flex-shrink: 0;
  font-size: 14px;
  color: #0051f3;
}

.selka-country-code-picker__empty {
  margin: 0;
  padding: 16px 12px;
  font-size: 14px;
  color: #8190ae;
  text-align: center;
}

/* Product categories list — Figma 629:1630 */
.selka-categories-search-btn,
.selka-categories-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-categories-search-btn {
  cursor: pointer;
}

.selka-categories-search-btn img {
  flex-shrink: 0;
  /* Energy 100 #0051f3 */
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%)
    hue-rotate(212deg) brightness(101%) contrast(101%);
}

.selka-categories-search img {
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-categories-search {
  gap: 8px;
  min-width: 200px;
}

.selka-categories-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #0f2144;
  outline: none;
}

.selka-categories-search input::placeholder {
  color: #8190ae;
}

.selka-categories-table-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin-top: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  overflow: hidden;
}

.selka-categories-table-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.selka-categories-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}

.selka-categories-table thead {
  position: relative;
  z-index: 10;
}

.selka-categories-table thead tr {
  background: var(--metal-12-solid);
}

.selka-categories-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 12px 0;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-bottom: none;
  background: var(--metal-12-solid);
  box-shadow: 0 1px 0 var(--metal-12);
  text-align: left;
  font-weight: 400;
  vertical-align: middle;
  white-space: nowrap;
}

.selka-categories-table thead th:not(:last-child) {
  padding-right: 20px;
}

.selka-categories-table thead th:first-child {
  padding-left: 16px;
  border-radius: 16px 0 0 0;
  overflow: hidden;
}

.selka-categories-table thead th:last-child {
  padding-right: 31px;
  border-radius: 0 16px 0 0;
  overflow: hidden;
}

.selka-categories-table thead th.selka-categories-table__col-count {
  text-align: right;
}

.selka-categories-table tbody td {
  height: 48px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
  vertical-align: middle;
}

.selka-categories-table tbody td:not(:last-child) {
  padding-right: 20px;
}

.selka-categories-table tbody td:first-child {
  padding-left: 16px;
}

.selka-categories-table tbody td:last-child {
  padding-right: 31px;
}

.selka-categories-table tbody tr:last-child td {
  border-bottom: none;
}

.selka-categories-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 16px;
}

.selka-categories-table tbody tr:last-child td:last-child {
  border-radius: 0 0 16px 0;
}

.selka-categories-table__row:hover {
  background: #f5f8ff;
}

.selka-categories-table__col-check {
  width: 36px;
}

.selka-categories-table__col-l1,
.selka-categories-table__col-l2,
.selka-categories-table__col-l3 {
  width: 120px;
}

.selka-categories-table__col-count {
  width: 112px;
  text-align: right;
}

.selka-categories-table__col-products {
  min-width: 280px;
}

.selka-categories-table__check {
  display: inline-flex;
  position: relative;
  cursor: pointer;
}

.selka-categories-table__row--selected {
  background: #ebf1fe;
}

.selka-categories-table__row--selected:hover {
  background: #ebf1fe;
}

.selka-categories-table thead .selka-th-label {
  display: inline-flex;
  padding: 2px 2px 2px 8px;
}

.selka-categories-table__cell-editable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  color: #68748d;
  cursor: pointer;
  transition: background 0.12s ease;
}

.selka-categories-table__cell-editable:hover,
.selka-categories-table__cell-editable:focus-within {
  background: rgba(0, 81, 243, 0.04);
}

.selka-categories-table__edit-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.selka-categories-table__cell-editable:hover .selka-categories-table__edit-btn,
.selka-categories-table__cell-editable:focus-within .selka-categories-table__edit-btn {
  display: inline-flex;
}

.selka-categories-table__edit-btn img {
  /* Energy 100 #0051f3 */
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%)
    hue-rotate(212deg) brightness(101%) contrast(101%);
}

.selka-categories-table__count {
  display: block;
  color: #0051f3;
  text-align: right;
}

.selka-categories-table__product-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.selka-categories-table__product-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  color: #68748d;
  white-space: nowrap;
}

.selka-categories-table thead th,
.selka-categories-table tbody td {
  border-left: none;
  border-right: none;
}

.selka-categories-table thead th {
  border-top: none;
}

.selka-categories-table tbody tr:first-child td {
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-categories-products-table__col-thumb {
  width: 56px;
}

.selka-categories-products-table__col-name {
  width: 280px;
}

.selka-categories-products-table__col-category {
  min-width: 220px;
}

.selka-categories-products-table__col-action {
  width: 120px;
}

.selka-categories-products-table__name {
  font-size: 12px;
  color: #68748d;
}

.selka-categories-products-table .selka-product-thumb {
  width: 40px;
  height: 40px;
}

.selka-categories-assign-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-categories-assign-btn img {
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%)
    hue-rotate(212deg) brightness(101%) contrast(101%);
}

.selka-categories-assign-btn--primary {
  background: rgba(0, 81, 243, 0.08);
  border-color: rgba(0, 81, 243, 0.12);
}

.selka-categories-product-category {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.selka-categories-product-category__edit {
  opacity: 0;
  transition: opacity 0.15s ease;
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%)
    hue-rotate(212deg) brightness(101%) contrast(101%);
}

.selka-categories-product-category:hover .selka-categories-product-category__edit,
.selka-categories-product-category:focus-visible .selka-categories-product-category__edit {
  opacity: 1;
}

.selka-categories-table__product-chip--action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

.selka-categories-table__product-chip--action img {
  opacity: 0;
  transition: opacity 0.15s ease;
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%)
    hue-rotate(212deg) brightness(101%) contrast(101%);
}

.selka-categories-table__product-chip--action:hover img,
.selka-categories-table__product-chip--action:focus-visible img {
  opacity: 1;
}

.selka-categories-empty {
  padding: 48px 16px;
  text-align: center;
  font-size: 14px;
  color: #8190ae;
}

/* Edit category modal — Figma 629:2179 */
.selka-edit-category-modal {
  width: min(520px, calc(100% - 48px));
}

.selka-edit-category-modal__children {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-edit-category-modal__children-summary {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
}

.selka-edit-category-modal__children-summary strong {
  font-weight: 500;
  color: #0051f3;
}

.selka-edit-category-modal__children-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selka-edit-category-modal__child-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  color: #68748d;
  white-space: nowrap;
}

.selka-edit-category-modal__footer {
  display: flex;
  align-items: center;
  gap: 60px;
}

.selka-edit-category-modal__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid rgba(198, 34, 37, 0.12);
  border-radius: 8px;
  background: rgba(198, 34, 37, 0.12);
  cursor: pointer;
}

.selka-edit-category-modal__delete img {
  display: block;
  filter: brightness(0) saturate(100%) invert(18%) sepia(95%) saturate(4452%)
    hue-rotate(346deg) brightness(95%) contrast(95%);
}

.selka-edit-category-modal__footer-actions {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.selka-edit-category-modal__btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 80px;
  height: 40px;
  padding: 8px 4px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: #0051f3;
  cursor: pointer;
}

.selka-edit-category-modal__footer .selka-edit-variant-modal__btn-save {
  flex: 1;
  min-width: 0;
}

/* Delete category confirm — warning dialog */
.selka-modal--delete-category-confirm {
  z-index: 1001;
}

.selka-delete-category-confirm {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(440px, calc(100% - 48px));
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(15, 33, 68, 0.16);
}

.selka-delete-category-confirm__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.selka-delete-category-confirm__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(198, 34, 37, 0.12);
}

.selka-delete-category-confirm__icon img {
  display: block;
}

.selka-delete-category-confirm__title {
  margin: 16px 0 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-delete-category-confirm__message {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: #68748d;
}

.selka-delete-category-confirm__impact {
  padding: 12px 16px;
  border: 1px solid rgba(198, 34, 37, 0.12);
  border-radius: 12px;
  background: rgba(198, 34, 37, 0.08);
}

.selka-delete-category-confirm__impact p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #68748d;
}

.selka-delete-category-confirm__impact strong {
  font-weight: 600;
  color: #c62225;
}

.selka-delete-category-confirm__footer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-delete-category-confirm__footer .selka-cancel-shipment-dialog__confirm-btn img {
  filter: brightness(0) invert(1);
}

@media (max-width: 1023px) and (min-width: 768px) {
  .selka-nav__submenu,
  .selka-nav__chevron-btn,
  .selka-nav__tree {
    display: none;
  }

  .selka-nav__link--parent {
    width: 48px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 0;
  }

  .selka-nav__parent-main span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Product collections — Figma 629:356, 629:262 */
.selka-panel__inner--collections {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
}

.selka-collections-contents {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.selka-collections-contents > .selka-page-title {
  flex-shrink: 0;
  padding-right: 40px;
}

.selka-collections-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  padding-right: 40px;
}

.selka-collections-filters .selka-toolbar {
  margin-top: 0;
}

.selka-collections-filters .selka-toolbar-divider {
  width: 100%;
  margin: 0;
}

.selka-collections-filters .selka-orders-subtoolbar {
  margin-top: 0;
  padding-right: 0;
}

.selka-collections-table-block {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  min-height: 0;
  padding-right: 40px;
  padding-bottom: 24px;
}

.selka-pagination--collections {
  margin-top: 0;
  padding: 0;
}

.selka-collections-table-wrap {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  margin-top: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

.selka-collections-table-viewport {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.selka-collections-table {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 12px;
}

.selka-collections-table__header {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 12px 31px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px 16px 0 0;
  background: var(--metal-12-solid);
}

.selka-collections-table__header-row {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.selka-collections-table__header-row .selka-collections-table__cell {
  display: flex;
  align-items: center;
}

.selka-collections-table__header-row .selka-collections-table__cell--count {
  justify-content: flex-end;
}

.selka-collections-table__row-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}

.selka-collections-table__body {
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-top: none;
  border-radius: 0 0 16px 16px;
  background: #fff;
  overflow: hidden;
}

.selka-collections-table__row {
  padding: 8px 31px 8px 16px;
  background: #fff;
  transition: background 0.12s ease;
}

.selka-collections-table__row:hover,
.selka-collections-table__row--selected {
  background: #f5f8ff;
}

.selka-collections-table__divider {
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-collections-table__cell {
  flex-shrink: 0;
}

.selka-collections-table__cell--check {
  width: 16px;
}

.selka-collections-table__cell--thumb-spacer {
  width: 40px;
  height: 8px;
}

.selka-collections-table__cell--thumb {
  width: 40px;
}

.selka-collections-table__cell--name {
  width: 160px;
}

.selka-collections-table__cell--status {
  width: 82px;
}

.selka-collections-table__cell--count {
  width: 105px;
  text-align: right;
}

.selka-collections-table__cell--updated {
  width: 140px;
}

.selka-collections-table__check {
  display: inline-flex;
}

.selka-collections-table__thumb {
  display: flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
}

.selka-collections-table__thumb--photo {
  border: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
}

.selka-collections-table__thumb--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selka-collections-table__thumb--placeholder {
  padding: 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
}

.selka-collections-table__thumb--placeholder img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.selka-collections-table__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
  color: #0051f3;
  text-decoration: none;
  white-space: nowrap;
}

.selka-collections-table__row:hover .selka-collections-table__name {
  text-decoration: underline;
}

.selka-collections-table__count,
.selka-collections-table__updated {
  font-size: 12px;
  color: #68748d;
}

.selka-collections-table .selka-product-badge {
  font-size: 12px;
  font-weight: 400;
}

.selka-collection-detail__crumb-link {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  flex-shrink: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: #8190ae;
  text-decoration: none;
  transition: background 0.12s ease;
}

.selka-collection-detail__crumb-link:hover,
.selka-collection-detail__crumb-link:focus-visible {
  background: rgba(129, 144, 174, 0.08);
}

.selka-collection-detail__breadcrumb {
  gap: 0;
  flex: 1;
  min-width: 0;
}

.selka-collection-detail .selka-product-detail__header-actions {
  flex-shrink: 0;
}

.selka-collection-detail__title-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.selka-collection-detail__title-wrap h1 {
  margin: 0;
  padding: 0 8px;
  overflow: hidden;
  white-space: nowrap;
}

.selka-collection-detail__title-wrap--fade::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

.selka-collection-detail .selka-product-detail__aside {
  gap: 8px;
}

.selka-collection-detail__crumb-chevron {
  flex-shrink: 0;
  display: block;
  /* Metal 28 solid #d6dbe5 */
  filter: brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(347%)
    hue-rotate(184deg) brightness(95%) contrast(91%);
}

.selka-collection-detail .selka-page-title__crumb-icon {
  flex-shrink: 0;
  background: transparent;
}

.selka-collection-detail .selka-page-title__crumb-icon:hover,
.selka-collection-detail .selka-page-title__crumb-icon:focus-visible {
  background: rgba(129, 144, 174, 0.08);
}

.selka-collection-detail__required {
  margin-left: 4px;
  color: #0051f3;
  font-family: "JetBrains Mono", monospace;
}

.selka-collection-detail__body {
  padding: 40px;
}

.selka-collection-detail__sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 674px;
}

.selka-collection-detail .selka-product-detail__section {
  gap: 20px;
}

.selka-collection-detail .selka-product-detail__section-head h2 {
  margin: 0;
}

.selka-collection-detail .selka-product-detail__section-divider {
  margin: 0;
}

.selka-collection-detail__fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 100px;
}

.selka-collection-detail__field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-collection-detail__field--textarea {
  align-items: stretch;
  min-height: 100px;
  padding: 12px 12px 12px 16px;
}

.selka-collection-detail__field-control::placeholder {
  color: #8190ae;
}

.selka-collection-detail__field--error {
  border-color: #c62225;
}

.selka-collection-detail__field-error {
  margin: 0;
  font-size: 12px;
  color: #c62225;
}

.selka-collection-detail__status-hint .selka-collection-detail__link {
  color: #0051f3;
}

.selka-collection-detail__products-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  padding: 12px;
}

.selka-collection-detail__products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: #68748d;
}

.selka-collection-detail__products-toolbar strong {
  font-weight: 400;
  color: #0051f3;
}

.selka-collection-detail__add-product {
  padding: 8px 16px 8px 12px;
}

.selka-collection-detail__products-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 16px;
  text-align: center;
}

.selka-collection-detail__products-empty-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.selka-collection-detail__products-empty img {
  filter: brightness(0) saturate(100%) invert(46%) sepia(12%) saturate(749%)
    hue-rotate(182deg) brightness(93%) contrast(88%);
}

.selka-collection-detail__products-empty-title {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-collection-detail__products-empty-hint {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-collection-detail__product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-collection-detail__product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 28px 12px 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
}

.selka-collection-detail__product-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.selka-collection-detail__product-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.selka-collection-detail__product-name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-collection-detail__product-meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-collection-detail__product-date {
  color: #0051f3;
}

.selka-collection-detail__product-actions {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}

.selka-collection-detail__remove-product {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.selka-collection-detail__remove-product img {
  display: block;
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7492%) hue-rotate(215deg)
    brightness(99%) contrast(101%);
}

.selka-collection-detail__background-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.selka-collection-detail__background-menu-wrap {
  position: relative;
  flex-shrink: 0;
}

.selka-collection-detail__background-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.selka-collection-detail__background-menu:hover,
.selka-collection-detail__background-menu:focus-visible {
  border-color: rgba(129, 144, 174, 0.08);
  background: rgba(129, 144, 174, 0.08);
}

.selka-collection-detail__background-menu-dropdown {
  position: absolute;
  right: 0;
  z-index: 20;
  width: 180px;
}

.selka-collection-detail__background-preview {
  overflow: hidden;
  height: 140px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
}

.selka-collection-detail__background-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selka-collection-detail__background-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 140px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  text-align: center;
}

.selka-collection-detail__background-empty-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #68748d;
}

.selka-collection-detail__background-size {
  color: #0051f3;
}

.selka-collection-detail__background-input {
  display: none;
}

.selka-collection-detail__pick-image {
  margin-top: 4px;
}

.selka-collection-detail__seo-preview {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-collection-detail__seo-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-collection-detail__seo-site {
  margin: 0;
  font-size: 14px;
  color: #0f2144;
}

.selka-collection-detail__seo-url {
  margin: 0;
  font-size: 11px;
  color: #68748d;
}

.selka-collection-detail__seo-title {
  margin: 0;
  font-size: 14px;
  color: #0051f3;
}

.selka-collection-detail__seo-description {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #68748d;
}

.selka-collection-product-picker-modal {
  width: min(584px, 100%);
}

.selka-modal--collection-product-picker {
  padding: 24px;
}

.selka-collection-product-picker-modal__summary {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-collection-product-picker-modal__summary strong {
  font-weight: 400;
  color: #0051f3;
}

.selka-collection-product-picker-modal__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.selka-collection-product-picker-modal__search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 8px 16px 8px 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-collection-product-picker-modal__search img:first-child {
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7492%) hue-rotate(215deg)
    brightness(99%) contrast(101%);
}

.selka-collection-product-picker-modal__table {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.selka-collection-product-picker-modal__table-head,
.selka-collection-product-picker-modal__row {
  display: grid;
  grid-template-columns: 16px 200px 100px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.selka-collection-product-picker-modal__table-head {
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 12px 12px 0 0;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
}

.selka-collection-product-picker-modal__table-head span:nth-child(3),
.selka-collection-product-picker-modal__table-head span:nth-child(4) {
  text-align: right;
}

.selka-collection-product-picker-modal__table-body {
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.selka-collection-product-picker-modal__row {
  padding: 8px 16px;
  background: #fff;
}

.selka-collection-product-picker-modal__row--selected {
  background: #f5f8ff;
}

.selka-collection-product-picker-modal__row-divider {
  margin: 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-collection-product-picker-modal__checkbox-btn {
  display: flex;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.selka-collection-product-picker-modal__product {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.selka-collection-product-picker-modal__thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.selka-collection-product-picker-modal__product-copy {
  min-width: 0;
}

.selka-collection-product-picker-modal__product-name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-collection-product-picker-modal__product-variant {
  margin: 0;
  font-size: 12px;
  color: #0051f3;
}

.selka-collection-product-picker-modal__stock {
  margin: 0;
  font-size: 14px;
  color: #68748d;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.selka-collection-product-picker-modal__status {
  display: flex;
  justify-content: flex-end;
}

.selka-collection-product-picker-modal__empty {
  margin: 0;
  padding: 24px 16px;
  font-size: 14px;
  color: #8190ae;
  text-align: center;
}

.selka-collection-product-picker-modal__save {
  flex: 1;
  max-width: 322px;
}

/* Discount product picker — Figma 683:1709 / 683:1907 */

.selka-discount-product-picker-modal__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.selka-discount-product-picker-modal__collections {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
}

.selka-discount-product-picker-modal__collection {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  color: #68748d;
  cursor: pointer;
}

.selka-discount-product-picker-modal__collection--active {
  border-color: rgba(129, 144, 174, 0.08);
  background: #0f2144;
  font-weight: 600;
  color: #fff;
}

.selka-discount-product-picker-modal__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-height: 42px;
  font-size: 14px;
  color: #0051f3;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.selka-discount-product-picker-modal__row--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.selka-discount-product-picker-modal__disabled-row {
  position: relative;
}

.selka-discount-product-picker-modal__disabled-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(0, 81, 243, 0.6);
  backdrop-filter: blur(2px);
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  pointer-events: none;
}

.selka-discount-product-picker-modal .selka-collection-product-picker-modal__row--selected {
  background: rgba(0, 81, 243, 0.08);
}

/* Discounts list — Figma 703:7685 */

.selka-discounts-table-block {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  margin-top: 16px;
  padding-right: 40px;
  box-sizing: border-box;
}

.selka-discounts-table {
  --selka-discounts-col-gap: 20px;
  --selka-discounts-freeze-name-left: 36px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.selka-discounts-table__col-check {
  width: 36px;
}

.selka-discounts-table__col-name {
  width: 160px;
}

.selka-discounts-table__col-status {
  width: 132px;
}

.selka-discounts-table__col-type {
  width: 241px;
}

.selka-discounts-table__col-amount {
  width: 176px;
}

.selka-discounts-table__col-usage {
  width: 133px;
}

.selka-discounts-table__col-start {
  width: 170px;
}

.selka-discounts-table__col-expiry {
  width: 170px;
}

.selka-discounts-table thead th {
  padding: 12px calc(var(--selka-discounts-col-gap) / 2);
  background: #f5f6f9;
  border-bottom: 1px solid rgba(129, 144, 174, 0.08);
  vertical-align: middle;
  white-space: nowrap;
}

.selka-discounts-table thead th:first-child {
  padding-left: 16px;
  border-top-left-radius: 16px;
}

.selka-discounts-table thead th:last-child {
  padding-right: 31px;
  border-top-right-radius: 16px;
}

.selka-discounts-table tbody td {
  padding: 8px calc(var(--selka-discounts-col-gap) / 2);
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
  vertical-align: middle;
}

.selka-discounts-table tbody td:first-child {
  padding-left: 16px;
}

.selka-discounts-table tbody td:last-child {
  padding-right: 31px;
}

.selka-discounts-table tbody tr:last-child td {
  border-bottom: none;
}

.selka-discounts-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 16px;
}

.selka-discounts-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 16px;
}

.selka-discounts-table__row--selected {
  background: rgba(0, 81, 243, 0.04);
}

.selka-discounts-table__freeze {
  position: sticky !important;
  background-clip: padding-box;
}

.selka-discounts-table__freeze--name {
  left: var(--selka-discounts-freeze-name-left) !important;
  z-index: 10 !important;
  background-color: var(--selka-row-bg);
}

.selka-discounts-table__freeze--check {
  left: 0 !important;
  z-index: 11 !important;
  background-color: var(--selka-row-bg);
}

.selka-discounts-table thead .selka-discounts-table__freeze--name {
  z-index: 20 !important;
  background-color: #f5f6f9;
}

.selka-discounts-table thead .selka-discounts-table__freeze--check {
  z-index: 21 !important;
  background-color: #f5f6f9;
}

.selka-table-viewport-shell--scrolled .selka-discounts-table__freeze--name {
  border-right: 1px solid rgba(129, 144, 174, 0.2);
  box-shadow: 4px 0 12px -4px rgba(15, 33, 68, 0.12);
}

.selka-discounts-table tbody tr:hover td.selka-discounts-table__freeze--name {
  background-color: var(--selka-row-hover-bg);
}

.selka-discounts-table tbody tr:hover td.selka-discounts-table__freeze--check {
  background-color: var(--selka-row-hover-bg);
}

.selka-discounts-table tbody tr.selka-discounts-table__row--selected td.selka-discounts-table__freeze--name {
  background-color: #ebf1fe;
}

.selka-discounts-table tbody tr.selka-discounts-table__row--selected td.selka-discounts-table__freeze--check {
  background-color: #ebf1fe;
}

.selka-discounts-table tbody tr.selka-discounts-table__row--selected:hover td.selka-discounts-table__freeze--name {
  background-color: #ebf1fe;
}

.selka-discounts-table tbody tr.selka-discounts-table__row--selected:hover td.selka-discounts-table__freeze--check {
  background-color: #ebf1fe;
}

.selka-discounts-table__checkbox {
  display: inline-flex;
  align-items: center;
}

.selka-discounts-table thead .selka-th-sort {
  margin: 0;
}

.selka-discounts-table__name-link {
  display: inline-block;
  max-width: 160px;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  color: #0051f3;
  text-decoration: none;
}

.selka-discounts-table__name-link:hover,
.selka-discounts-table__name-link:focus-visible {
  text-decoration: underline;
}

.selka-discounts-table__name-static {
  display: inline-block;
  max-width: 160px;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  color: var(--energy-100, #0051f3);
}

.selka-discount-badge,
.selka-discount-badge--scheduled,
.selka-discount-badge--active,
.selka-discount-badge--inactive,
.selka-discount-badge--draft,
.selka-discount-badge--expired,
.selka-discount-badge--quota {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.selka-discount-badge--scheduled,
.selka-discount-badge--active {
  background: #e3f1e3;
  color: #188f1a;
}

.selka-discount-badge--inactive {
  background: #f9f5e0;
  color: #aa8e00;
}

.selka-discount-badge--draft {
  background: #ebf1fe;
  color: #0051f3;
}

.selka-discount-badge--expired {
  background: rgba(129, 144, 174, 0.12);
  color: #5c6b82;
}

.selka-discount-badge--quota {
  background: #f9f5e0;
  color: #aa8e00;
}

.selka-discount-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  line-height: normal;
  color: #68748d;
  white-space: nowrap;
}

.selka-discount-type-chip img {
  flex-shrink: 0;
}

.selka-discounts-table__bullets {
  margin: 0;
  padding-left: 18px;
  font-family: var(--font-inter, "Inter"), system-ui, sans-serif;
  font-size: 12px;
  line-height: normal;
  color: #68748d;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "ss01" 1, "lnum" 1, "tnum" 1;
}

.selka-discounts-table__bullets li + li {
  margin-top: 0;
}

.selka-discounts-table__expiry {
  font-size: 12px;
  line-height: normal;
  color: #68748d;
}

.selka-discounts-table__expiry p {
  margin: 0;
}

.selka-discounts-table__expiry-relative {
  color: #0051f3;
}

.selka-discounts-table__schedule {
  font-size: 12px;
  line-height: normal;
  color: #68748d;
}

.selka-discounts-table__schedule p {
  margin: 0;
}

.selka-discounts-table__schedule-relative {
  color: #0051f3;
}

.selka-discounts-table-block .selka-table-wrap {
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  overflow: hidden;
}

.selka-discounts-table-block .selka-table-viewport-shell {
  padding-right: 0;
}

.selka-discounts-table-block .selka-table-viewport-shell::after {
  right: 0;
}

.selka-pagination--discounts {
  padding-right: 40px;
}

.selka-discounts-placeholder {
  margin: 0;
  padding-right: 40px;
  font-size: 14px;
  color: #8190ae;
}

.selka-discounts-filter-popover__list-wrap {
  min-height: 0;
  max-height: none;
}

/* Create discount type modal (Figma 272:2445) */

.selka-modal--create-discount-type {
  padding: 24px;
}

.selka-create-discount-type-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(798px, 100%);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}

.selka-create-discount-type-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-create-discount-type-modal__head-text {
  flex: 1;
  min-width: 0;
}

.selka-create-discount-type-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-create-discount-type-modal__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-create-discount-type-modal__close {
  flex-shrink: 0;
}

.selka-create-discount-type-modal__cards {
  display: flex;
  gap: 8px;
  min-height: 300px;
}

.selka-create-discount-type-modal__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.selka-create-discount-type-modal__card:hover,
.selka-create-discount-type-modal__card:focus-visible {
  border-color: rgba(0, 81, 243, 0.12);
  background: rgba(0, 81, 243, 0.08);
  outline: none;
}

.selka-create-discount-type-modal__card-icon {
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-create-discount-type-modal__card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.selka-create-discount-type-modal__card-title {
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  color: #8190ae;
}

.selka-create-discount-type-modal__card-description {
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  color: #8190ae;
}

@media (max-width: 767px) {
  .selka-create-discount-type-modal__cards {
    flex-direction: column;
    min-height: 0;
  }

  .selka-create-discount-type-modal__card {
    min-height: 180px;
  }
}

/* Product price discount detail (Figma 683:1302 / 683:289) */

.selka-discount-detail .selka-product-detail__scroll {
  padding-bottom: 200px;
}

.selka-discount-detail .selka-product-detail__anchor {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 8px 9px;
}

.selka-discount-detail__body {
  gap: 20px;
}

.selka-discount-detail__sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 539px;
}

.selka-discount-detail__scroll-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.selka-discount-detail__block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-discount-detail__field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-discount-detail__divider {
  margin: 0;
  border: none;
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
  flex-shrink: 0;
}

.selka-discount-detail__section-intro {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.selka-discount-detail__section-intro h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-discount-detail__section-intro p {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-discount-detail__section-head h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-discount-detail__section-head p {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-discount-detail__products-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-discount-detail__products-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.selka-discount-detail__products-toolbar p {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-discount-detail__products-toolbar strong {
  color: #0051f3;
  font-weight: 400;
}

.selka-discount-detail__products-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.selka-discount-detail__add-product {
  flex-direction: row-reverse;
}

.selka-discount-detail__products-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 16px;
  text-align: center;
}

.selka-discount-detail__products-empty p {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

.selka-discount-detail__products-empty span {
  font-size: 12px;
  color: #8190ae;
}

.selka-discount-detail__product-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-discount-detail__product-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 80px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-discount-detail__product-meta {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
  align-items: center;
}

.selka-discount-detail__product-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.selka-discount-detail__product-copy {
  min-width: 0;
}

.selka-discount-detail__product-name {
  margin: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-discount-detail__product-variants {
  margin: 0;
  font-size: 12px;
  color: #0051f3;
}

.selka-discount-detail__product-pricing {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.selka-discount-detail__price-compare {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  overflow: hidden;
}

.selka-discount-detail__price-compare-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.selka-discount-detail__price-compare-col--original {
  background: rgba(129, 144, 174, 0.08);
}

.selka-discount-detail__price-compare-col--discount {
  background: rgba(0, 81, 243, 0.08);
}

.selka-discount-detail__price-compare-label {
  color: #8190ae;
}

.selka-discount-detail__price-compare-label-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selka-discount-detail__price-compare-col--discount .selka-discount-detail__price-compare-label {
  color: #0051f3;
}

.selka-discount-detail__price-compare-value {
  color: #0f2144;
}

.selka-discount-detail__price-percent {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  border-radius: 14px;
  background: #0051f3;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
}

.selka-discount-detail__price-compare-divider {
  width: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-discount-detail__product-remove {
  display: flex;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  line-height: 0;
}

.selka-discount-detail__combination-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-discount-detail__checkbox {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 14px;
  color: #68748d;
  text-align: left;
  cursor: pointer;
}

.selka-discount-detail__checkbox--checked {
  color: #0051f3;
}

.selka-discount-detail__info-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-discount-detail__info-box p {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
  line-height: normal;
}

.selka-discount-detail__date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.selka-discount-detail__date-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-discount-detail__date-label {
  font-size: 14px;
  color: #68748d;
}

.selka-discount-detail__date-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 220px;
  min-height: 42px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.selka-discount-detail__date-control--open {
  border-color: #0051f3;
}

.selka-discount-detail__date-control--disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.selka-discount-detail__date-popover {
  z-index: 1200;
  width: 320px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 33, 68, 0.12);
}

.selka-discount-detail__date-popover--portal {
  position: fixed;
}

.selka-discount-detail__time-popover {
  z-index: 1200;
  width: 220px;
  padding: 8px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 33, 68, 0.12);
}

.selka-discount-detail__time-popover--portal {
  position: fixed;
}

.selka-discount-detail__time-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 240px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.selka-discount-detail__time-option {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #0f2144;
  text-align: left;
  cursor: pointer;
}

.selka-discount-detail__time-option:hover {
  background: rgba(0, 81, 243, 0.06);
}

.selka-discount-detail__time-option--active {
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
  font-weight: 600;
}

.selka-discount-detail__time-empty {
  padding: 12px;
  font-size: 14px;
  color: #8190ae;
  text-align: center;
}

.selka-discount-detail__date-value {
  font-size: 14px;
  color: #0051f3;
}

.selka-discount-detail__date-control img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-discount-detail__end-modes {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-discount-detail__end-mode {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-discount-detail__radio {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: #68748d;
  text-align: left;
  cursor: pointer;
}

.selka-discount-detail__radio:focus-visible {
  outline: 2px solid rgba(0, 81, 243, 0.4);
  outline-offset: 2px;
  border-radius: 4px;
}

.selka-discount-detail__radio-mark {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.selka-discount-detail__radio--checked {
  color: #0051f3;
  font-weight: 600;
}

.selka-discount-detail__radio--checked .selka-discount-detail__radio-mark {
  border: 4px solid #0051f3;
}

.selka-discount-detail__end-mode-fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 32px;
}

.selka-discount-detail__period-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  max-width: 537px;
}

.selka-discount-detail__period-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-discount-detail__period-hint {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
  line-height: 1.4;
}

.selka-discount-detail__period-value {
  width: 80px;
  flex-shrink: 0;
  justify-content: center;
}

.selka-discount-detail__period-value .selka-product-detail__field-control {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.selka-discount-detail__period-unit-wrap {
  position: relative;
  flex: 0 1 auto;
  width: fit-content;
  max-width: calc(100% - 96px);
}

.selka-discount-detail__period-unit-wrap .selka-product-detail__select {
  width: auto;
  min-width: 0;
  gap: 8px;
  padding: 12px 16px;
  color: var(--energy-100, #0051f3);
}

.selka-discount-detail__period-unit-select {
  font-family: inherit;
  cursor: pointer;
}

.selka-discount-detail__period-unit-menu {
  width: max-content;
  min-width: 100%;
}

.selka-discount-detail__summary,
.selka-discount-detail__stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.selka-discount-detail__summary div,
.selka-discount-detail__stats div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-discount-detail__summary dt,
.selka-discount-detail__stats dt {
  font-size: 12px;
  font-weight: 400;
  color: #68748d;
}

.selka-discount-detail__summary dd,
.selka-discount-detail__stats dd {
  margin: 0;
  font-size: 14px;
  color: #0f2144;
}

.selka-discount-detail__stats-highlight {
  color: #0051f3;
}

.selka-discount-detail__stats--triggered dd {
  font-size: 16px;
  font-weight: 600;
  color: #0051f3;
}

.selka-discount-detail__block--section > h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

/* Discount product settings modal — reuses variant-settings shell + variant-table band (Figma 301:3837) */

.selka-modal--discount-product-settings {
  padding: 24px;
}

/* Total order discount detail — Figma 703:7111 / 703:6551 */

.selka-discount-detail__field-hint {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-discount-detail__radio--bold {
  font-weight: 600;
}

.selka-discount-detail__option-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-discount-detail__option-fields {
  padding-left: 32px;
}

.selka-discount-detail__field-select-wrap {
  position: relative;
  width: fit-content;
}

.selka-discount-detail__field-select {
  min-width: 220px;
  color: var(--energy-100, #0051f3);
}

.selka-discount-detail__field-select-menu {
  position: absolute;
  left: 0;
  z-index: 20;
  min-width: 100%;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #fff;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 33, 68, 0.08);
}

.selka-discount-detail__field-select-divider {
  height: 1px;
  margin: 4px 0;
  background: rgba(129, 144, 174, 0.12);
}

.selka-discount-detail__field-select-option {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 14px;
  color: #0f2144;
  cursor: pointer;
}

.selka-discount-detail__field-select-option:hover,
.selka-discount-detail__field-select-option--selected {
  color: #0051f3;
}

.selka-discount-detail__field-select--locked {
  background: rgba(129, 144, 174, 0.08);
  cursor: default;
}

.selka-discount-detail__field-select-value--energy {
  color: var(--energy-100, #0051f3);
}

.selka-total-order-discount-detail__trigger-auto-hint {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: var(--energy-100, #0051f3);
}

.selka-total-order-discount-detail__voucher-template {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px 0 16px;
  background: rgba(129, 144, 174, 0.08);
  border-color: rgba(129, 144, 174, 0.28);
}

.selka-total-order-discount-detail__voucher-template-segments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.selka-total-order-discount-detail__voucher-template-literal {
  font-size: 14px;
  color: #0f2144;
  white-space: nowrap;
}

.selka-total-order-discount-detail__voucher-template-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  padding: 4px;
  border-radius: 4px;
  background: rgba(0, 81, 243, 0.08);
  font-size: 12px;
  color: var(--energy-100, #0051f3);
  white-space: nowrap;
}

.selka-total-order-discount-detail__voucher-template-action {
  flex-shrink: 0;
}

.selka-total-order-discount-detail__trigger-expiry {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.selka-total-order-discount-detail__trigger-expiry-days {
  width: 60px;
  flex-shrink: 0;
}

.selka-total-order-discount-detail__trigger-expiry-unit .selka-discount-detail__field-select {
  min-width: 232px;
}

.selka-total-order-discount-detail__trigger-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.selka-total-order-discount-detail__trigger-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.selka-total-order-discount-detail__trigger-card:not(
    .selka-total-order-discount-detail__trigger-card--active
  ):hover,
.selka-total-order-discount-detail__trigger-card:not(
    .selka-total-order-discount-detail__trigger-card--active
  ):focus-visible {
  background: var(--energy-4);
  outline: none;
}

.selka-total-order-discount-detail__trigger-card--active .selka-total-order-discount-detail__trigger-icon--energy {
  /* Energy 100 #0051f3 */
  filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%)
    hue-rotate(212deg) brightness(101%) contrast(101%);
}

.selka-total-order-discount-detail__trigger-card--active {
  border-color: #0051f3;
  background: rgba(0, 81, 243, 0.08);
}

.selka-total-order-discount-detail__trigger-title {
  font-size: 14px;
  font-weight: 600;
  color: #68748d;
}

.selka-total-order-discount-detail__trigger-card--active .selka-total-order-discount-detail__trigger-title,
.selka-total-order-discount-detail__trigger-card--active .selka-total-order-discount-detail__trigger-description {
  color: #0051f3;
}

.selka-total-order-discount-detail__trigger-description {
  font-size: 12px;
  line-height: 1.4;
  color: #8190ae;
}

.selka-total-order-discount-detail__method-select .selka-discount-detail__field-select {
  min-width: 240px;
}

.selka-total-order-discount-detail__voucher-field {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-total-order-discount-detail__voucher-field .selka-product-detail__field-control {
  flex: 1;
}

.selka-total-order-discount-detail__voucher-generate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.selka-total-order-discount-detail__voucher-example {
  color: #0f2144;
}

.selka-total-order-discount-detail__amount-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
}

.selka-total-order-discount-detail__percent-field {
  width: 100px;
}

.selka-total-order-discount-detail__max-field {
  width: 160px;
}

.selka-total-order-discount-detail__suffix-field,
.selka-total-order-discount-detail__prefix-field,
.selka-total-order-discount-detail__quantity-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.selka-total-order-discount-detail__suffix-field span,
.selka-total-order-discount-detail__prefix-field span,
.selka-total-order-discount-detail__quantity-field span {
  font-size: 14px;
  color: #8190ae;
  flex-shrink: 0;
}

.selka-total-order-discount-detail__prefix-field .selka-product-detail__field-control,
.selka-total-order-discount-detail__suffix-field .selka-product-detail__field-control,
.selka-total-order-discount-detail__quantity-field .selka-product-detail__field-control {
  text-align: right;
}

.selka-total-order-discount-detail__usage-limits {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-total-order-discount-detail__usage-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-total-order-discount-detail__usage-nested {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 32px;
}

.selka-total-order-discount-detail__usage-nested--disabled {
  opacity: 0.4;
}

.selka-total-order-discount-detail__usage-group--quota {
  gap: 16px;
}

.selka-discount-detail__radio-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.selka-discount-detail__option-group--disabled .selka-discount-detail__radio {
  cursor: default;
}

.selka-shipping-discount-detail__country-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.selka-shipping-discount-detail__country-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.selka-shipping-discount-detail__country-search {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding-left: 16px;
  padding-right: 12px;
  border-radius: 12px;
}

.selka-shipping-discount-detail__country-search img {
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-shipping-discount-detail__country-add-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #0f2144;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.selka-shipping-discount-detail__country-add-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-shipping-discount-detail__country-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selka-shipping-discount-detail__country-tag {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 160px;
  height: 42px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-shipping-discount-detail__country-tag-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  color: #0f2144;
}

.selka-shipping-discount-detail__country-flag {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 4px;
  object-fit: cover;
}

.selka-shipping-discount-detail__country-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.selka-shipping-discount-detail__country-remove img {
  width: 16px;
  height: 16px;
  opacity: 0.56;
}

.selka-shipping-discount-detail__country-options {
  margin: 0;
  padding: 4px;
  list-style: none;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 33, 68, 0.08);
  max-height: 200px;
  overflow-y: auto;
}

.selka-shipping-discount-detail__country-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #0f2144;
  text-align: left;
  cursor: pointer;
}

.selka-shipping-discount-detail__country-option:hover,
.selka-shipping-discount-detail__country-option:focus-visible {
  background: rgba(0, 81, 243, 0.04);
  outline: none;
}

/* Rewards (Figma 730:32) */

.selka-rewards-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-rewards-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 40px;
}

.selka-rewards-tabs__divider {
  width: 100%;
  margin: 0;
}

.selka-rewards-settings-tab {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-right: 40px;
  padding-bottom: 24px;
}

.selka-rewards-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-rewards-section__title {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: #68748d;
}

.selka-rewards-settings-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.selka-rewards-settings-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 320px;
  max-width: 100%;
  padding: 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-rewards-settings-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.selka-rewards-settings-card__label {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: var(--energy-100, #0051f3);
}

.selka-rewards-settings-card__configure {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border: none;
  border-radius: 100px;
  background: var(--energy-8);
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  color: var(--energy-100, #0051f3);
  cursor: pointer;
  transition: background 0.15s ease;
}

.selka-rewards-settings-card__configure:hover,
.selka-rewards-settings-card__configure:focus-visible {
  background: var(--energy-8-solid, #ebf1fe);
  outline: none;
}

.selka-rewards-settings-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-rewards-settings-card__value {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--energy-100, #0051f3);
}

.selka-rewards-settings-card__helper {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #68748d;
}

.selka-rewards-rule-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.selka-rewards-rule-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 320px;
  max-width: 100%;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  overflow: visible;
}

.selka-rewards-rule-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 24px;
}

.selka-rewards-rule-card__type {
  margin: 0;
  display: flex;
  align-items: center;
  height: 24px;
  font-size: 12px;
  line-height: 24px;
  color: var(--energy-100, #0051f3);
}

.selka-rewards-rule-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
}

.selka-rewards-rule-card__actions .selka-discount-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 8px;
  line-height: 1;
}

.selka-rewards-rule-card__menu-wrap {
  position: relative;
  display: flex;
  align-items: center;
  height: 24px;
}

.selka-rewards-rule-card__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: background 0.15s ease;
}

.selka-rewards-rule-card__menu img {
  display: block;
  width: 24px;
  height: 24px;
}

.selka-rewards-rule-card__menu:hover,
.selka-rewards-rule-card__menu:focus-visible,
.selka-rewards-rule-card__menu--open {
  background: rgba(129, 144, 174, 0.12);
  outline: none;
}

.selka-rewards-rule-card__menu-dropdown {
  position: absolute;
  right: 0;
  z-index: 20;
  min-width: 160px;
}

.selka-rewards-rule-card__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-rewards-rule-card__title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.selka-rewards-rule-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: var(--energy-100, #0051f3);
}

.selka-rewards-rule-card__reward {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--energy-100, #0051f3);
}

.selka-rewards-rule-card__description {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #68748d;
}

.selka-rewards-rule-card__stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.selka-rewards-rule-card__stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  line-height: normal;
}

.selka-rewards-rule-card__stat span {
  color: #8190ae;
}

.selka-rewards-rule-card__stat strong {
  font-weight: 400;
  color: var(--energy-100, #0051f3);
  text-align: right;
}

.selka-rewards-tab-placeholder {
  margin: 0;
  padding-right: 40px;
  padding-bottom: 24px;
  font-size: 14px;
  color: #8190ae;
}

/* Rewards — Riwayat tab (Figma 730:893) */

.selka-rewards-history-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding-right: 40px;
  padding-bottom: 24px;
}

.selka-rewards-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.selka-rewards-history-toolbar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.selka-rewards-history-toolbar__summary {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #68748d;
  white-space: nowrap;
}

.selka-rewards-history-toolbar__summary strong {
  font-weight: 400;
  color: #0051f3;
}

.selka-rewards-history-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.selka-rewards-history-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.selka-rewards-history-toolbar__divider {
  width: 1px;
  height: 32px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-rewards-history-export {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: #0051f3;
  cursor: pointer;
}

.selka-rewards-history-export:hover,
.selka-rewards-history-export:focus-visible {
  background: var(--energy-8);
  outline: none;
}

.selka-rewards-ledger-table-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  min-height: 0;
}

.selka-table-wrap--rewards-ledger {
  width: 100%;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  overflow: hidden;
}

.selka-rewards-ledger-table {
  width: 100%;
  min-width: 1066px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

.selka-rewards-ledger-table thead {
  background: #f5f6f9;
}

.selka-rewards-ledger-table thead th {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(129, 144, 174, 0.08);
  text-align: left;
  vertical-align: middle;
}

.selka-rewards-ledger-table thead th:first-child {
  padding-left: 16px;
}

.selka-rewards-ledger-table thead th:last-child {
  padding-right: 16px;
}

.selka-rewards-ledger-table tbody td {
  padding: 14px 10px;
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
  color: #68748d;
  vertical-align: middle;
}

.selka-rewards-ledger-table tbody td:first-child {
  padding-left: 16px;
}

.selka-rewards-ledger-table tbody td:last-child {
  padding-right: 16px;
}

.selka-rewards-ledger-table tbody tr:last-child td {
  border-bottom: none;
}

.selka-rewards-ledger-table__cell--right {
  text-align: right;
}

.selka-rewards-ledger-table thead th.selka-rewards-ledger-table__cell--right .selka-th-sort {
  justify-content: flex-end;
}

.selka-rewards-ledger-table tbody td.selka-rewards-ledger-table__change--positive {
  color: var(--energy-100, #0051f3);
}

.selka-rewards-ledger-table tbody td.selka-rewards-ledger-table__change--negative {
  color: var(--destruction-100, #c62225);
}

.selka-rewards-ledger-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  color: #68748d;
  white-space: nowrap;
}

.selka-rewards-ledger-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.selka-pagination--rewards-ledger {
  width: 100%;
  padding: 0;
}

.selka-rewards-ledger-table thead th:nth-child(1),
.selka-rewards-ledger-table tbody td:nth-child(1) {
  width: 144px;
}

.selka-rewards-ledger-table thead th:nth-child(2),
.selka-rewards-ledger-table tbody td:nth-child(2) {
  width: 148px;
}

.selka-rewards-ledger-table thead th:nth-child(3),
.selka-rewards-ledger-table tbody td:nth-child(3) {
  width: 90px;
}

.selka-rewards-ledger-table thead th:nth-child(4),
.selka-rewards-ledger-table tbody td:nth-child(4) {
  width: 106px;
}

.selka-rewards-ledger-table thead th:nth-child(5),
.selka-rewards-ledger-table tbody td:nth-child(5) {
  width: 88px;
}

.selka-rewards-ledger-table thead th:nth-child(6),
.selka-rewards-ledger-table tbody td:nth-child(6) {
  width: 93px;
}

.selka-rewards-ledger-table thead th:nth-child(7),
.selka-rewards-ledger-table tbody td:nth-child(7) {
  width: 93px;
}

.selka-rewards-ledger-table thead th:nth-child(8),
.selka-rewards-ledger-table tbody td:nth-child(8) {
  width: 170px;
}

/* Rewards — Saldo Pelanggan tab (Figma 730:1539, 735:2027) */

.selka-rewards-balance-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  padding-right: 40px;
  padding-bottom: 24px;
}

.selka-rewards-balance-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-left: 16px;
}

.selka-rewards-balance-toolbar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.selka-rewards-balance-toolbar__summary {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #68748d;
  white-space: nowrap;
}

.selka-rewards-balance-toolbar__summary strong {
  font-weight: 400;
  color: #0051f3;
}

.selka-rewards-balance-toolbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.selka-rewards-balance-toolbar__divider {
  width: 1px;
  height: 32px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-rewards-balance-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12px;
  color: #68748d;
  cursor: pointer;
  white-space: nowrap;
}

.selka-rewards-balance-checkbox--selection {
  color: #0051f3;
}

.selka-rewards-balance-checkbox--row {
  cursor: pointer;
}

.selka-checkbox--indeterminate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #0051f3;
  border-color: #0051f3;
}

.selka-checkbox__indeterminate-mark {
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: #fff;
}

.selka-rewards-balance-table-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

.selka-rewards-balance-table {
  width: 100%;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  overflow: hidden;
  font-size: 12px;
}

.selka-rewards-balance-table__head {
  display: grid;
  grid-template-columns: 16px 122px 107px 140px 150px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  padding: 12px 16px 12px 16px;
  background: #f5f6f9;
  border-bottom: 1px solid rgba(129, 144, 174, 0.08);
}

.selka-rewards-balance-table__head-cell--right .selka-th-sort {
  justify-content: flex-end;
}

.selka-rewards-balance-table__head-actions {
  min-width: 0;
}

.selka-rewards-balance-table__body {
  display: flex;
  flex-direction: column;
}

.selka-rewards-balance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-rewards-balance-row:last-child {
  border-bottom: none;
}

.selka-rewards-balance-row:hover:not(.selka-rewards-balance-row--selected) {
  background: #f5f8ff;
}

.selka-rewards-balance-row--selected {
  background: #ebf1fe;
}

.selka-rewards-balance-row__main {
  display: grid;
  grid-template-columns: 16px 122px 107px 140px 150px;
  gap: 20px;
  align-items: center;
  min-width: 0;
}

.selka-rewards-balance-row__name {
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  color: #0051f3;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.selka-rewards-balance-row:hover .selka-rewards-balance-row__name {
  text-decoration: underline;
}

.selka-rewards-balance-row__name:hover,
.selka-rewards-balance-row__name:focus-visible {
  color: #003bb8;
  outline: none;
}

.selka-rewards-balance-row__name:focus-visible {
  text-decoration: underline;
}

.selka-rewards-balance-row__value {
  color: #68748d;
  text-align: right;
}

.selka-rewards-balance-row__actions {
  display: none;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.selka-rewards-balance-row:hover:not(.selka-rewards-balance-row--selected) .selka-rewards-balance-row__actions,
.selka-rewards-balance-row__actions:focus-within {
  display: flex;
}

.selka-rewards-balance-row__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: #0051f3;
  cursor: pointer;
  white-space: nowrap;
}

.selka-rewards-balance-row__action:hover,
.selka-rewards-balance-row__action:focus-visible {
  background: var(--energy-8);
  outline: none;
}

.selka-pagination--rewards-balance {
  width: 100%;
  padding: 0;
}

/* Rewards — Atur Poin modal (PRD + balance flows) */

.selka-modal--adjust-reward-points {
  padding: 24px;
}

.selka-adjust-reward-points-modal {
  width: min(100%, 480px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}

.selka-adjust-reward-points-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.selka-adjust-reward-points-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: #0f2144;
}

.selka-adjust-reward-points-modal__close {
  flex-shrink: 0;
}

.selka-adjust-reward-points-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-adjust-reward-points-modal__mode {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.selka-adjust-reward-points-modal__mode-btn {
  cursor: pointer;
}

.selka-adjust-reward-points-modal__label {
  font-size: 12px;
  font-weight: 500;
  color: #68748d;
}

.selka-adjust-reward-points-modal__input,
.selka-adjust-reward-points-modal__textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  color: #0f2144;
}

.selka-adjust-reward-points-modal__input:focus-visible,
.selka-adjust-reward-points-modal__textarea:focus-visible {
  outline: 2px solid rgba(0, 81, 243, 0.24);
  outline-offset: 0;
}

.selka-adjust-reward-points-modal__textarea {
  min-height: 96px;
  resize: vertical;
}

.selka-adjust-reward-points-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

/* Rewards — bulk Atur Saldo modal (Figma 735:2415, 735:2511) */

.selka-modal--bulk-reward-adjust {
  padding: 24px;
}

.selka-bulk-reward-adjust-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(100%, 631px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}

.selka-bulk-reward-adjust-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-bulk-reward-adjust-modal__title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.selka-bulk-reward-adjust-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  color: #0f2144;
}

.selka-bulk-reward-adjust-modal__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: normal;
  color: #68748d;
}

.selka-bulk-reward-adjust-modal__subtitle-count {
  color: #0051f3;
}

.selka-bulk-reward-adjust-modal__close {
  flex-shrink: 0;
}

.selka-bulk-reward-adjust-modal__mode-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid #d6dbe5;
  border-radius: 12px;
  overflow: hidden;
}

.selka-bulk-reward-adjust-modal__mode-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  width: 100%;
  height: 44px;
  isolation: isolate;
}

.selka-bulk-reward-adjust-modal__mode-tabs::before {
  content: "";
  position: absolute;
  inset: 0;
  border: none;
  border-radius: 0;
  background: rgba(129, 144, 174, 0.12);
  z-index: 0;
}

.selka-bulk-reward-adjust-modal__mode-tabs[data-active="subtract"]::before {
  background: #e9ecf1;
}

.selka-bulk-reward-adjust-modal__mode-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 18px;
  background: #fff;
  z-index: 1;
  pointer-events: none;
}

.selka-bulk-reward-adjust-modal__mode-tab {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 43px;
  margin-top: 1px;
  padding: 8px 12px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: #8190ae;
  cursor: pointer;
}

.selka-bulk-reward-adjust-modal__mode-tab-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
}

.selka-bulk-reward-adjust-modal__mode-tab-icon--add {
  -webkit-mask: url("/assets/icon-add-circle.svg") no-repeat center / contain;
  mask: url("/assets/icon-add-circle.svg") no-repeat center / contain;
}

.selka-bulk-reward-adjust-modal__mode-tab-icon--subtract {
  -webkit-mask: url("/assets/icon-do-not-disturb.svg") no-repeat center / contain;
  mask: url("/assets/icon-do-not-disturb.svg") no-repeat center / contain;
}

.selka-bulk-reward-adjust-modal__mode-tab--add.selka-bulk-reward-adjust-modal__mode-tab--active {
  background: #fff;
  color: #0051f3;
  border-radius: 11px 11px 0 0;
}

.selka-bulk-reward-adjust-modal__mode-tab--add:not(.selka-bulk-reward-adjust-modal__mode-tab--active) {
  background: #e9ecf1;
  border-radius: 11px 11px 11px 0;
}

.selka-bulk-reward-adjust-modal__mode-tab--subtract:not(.selka-bulk-reward-adjust-modal__mode-tab--active) {
  background: #f0f2f5;
  border-radius: 12px 12px 0 12px;
}

.selka-bulk-reward-adjust-modal__mode-tab--subtract.selka-bulk-reward-adjust-modal__mode-tab--active {
  background: #fff;
  color: #c62225;
  border-radius: 12px 12px 0 12px;
}

.selka-bulk-reward-adjust-modal__amount-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border: none;
  border-radius: 0;
  background: #fff;
}

.selka-bulk-reward-adjust-modal__amount-label {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #68748d;
  text-align: center;
}

.selka-bulk-reward-adjust-modal__amount-value {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  cursor: text;
}

.selka-bulk-reward-adjust-modal__amount-value--add,
.selka-bulk-reward-adjust-modal__amount-value--add .selka-bulk-reward-adjust-modal__amount-input,
.selka-bulk-reward-adjust-modal__amount-value--add .selka-bulk-reward-adjust-modal__amount-suffix {
  color: #0051f3;
}

.selka-bulk-reward-adjust-modal__amount-value--subtract,
.selka-bulk-reward-adjust-modal__amount-value--subtract .selka-bulk-reward-adjust-modal__amount-input,
.selka-bulk-reward-adjust-modal__amount-value--subtract .selka-bulk-reward-adjust-modal__amount-suffix {
  color: #c62225;
}

.selka-bulk-reward-adjust-modal__amount-input {
  field-sizing: content;
  width: auto;
  min-width: 1ch;
  max-width: 14ch;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  text-align: right;
}

.selka-bulk-reward-adjust-modal__amount-input:focus-visible {
  outline: none;
}

.selka-bulk-reward-adjust-modal__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.selka-bulk-reward-adjust-modal__field-label-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selka-bulk-reward-adjust-modal__field-label {
  font-size: 14px;
  line-height: normal;
  color: #68748d;
}

.selka-bulk-reward-adjust-modal__optional-pill {
  padding: 2px 8px;
  border-radius: 23px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 10px;
  line-height: normal;
  color: #68748d;
}

.selka-bulk-reward-adjust-modal__required {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  line-height: normal;
  color: #0051f3;
}

.selka-bulk-reward-adjust-modal__textarea {
  width: 100%;
  min-height: 42px;
  box-sizing: border-box;
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  line-height: normal;
  color: #0f2144;
  resize: vertical;
}

.selka-bulk-reward-adjust-modal__textarea::placeholder {
  color: #8190ae;
}

.selka-bulk-reward-adjust-modal__textarea:focus-visible {
  outline: 2px solid rgba(0, 81, 243, 0.24);
  outline-offset: 0;
}

.selka-bulk-reward-adjust-modal__expiration {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.selka-bulk-reward-adjust-modal__expiration-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
}

.selka-bulk-reward-adjust-modal__expiration-segments {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 2px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 20px;
  background: #fff;
}

.selka-bulk-reward-adjust-modal__expiration-segment {
  flex: 1 1 0;
  min-width: 0;
  height: 32px;
  padding: 8px 4px;
  border: none;
  border-radius: 20px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  line-height: normal;
  color: #68748d;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.selka-bulk-reward-adjust-modal__expiration-segment--active {
  background: #0051f3;
  color: #fff;
}

.selka-bulk-reward-adjust-modal__expiration-date {
  width: 162px;
}

.selka-bulk-reward-adjust-modal__date-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: #0051f3;
  cursor: pointer;
}

.selka-bulk-reward-adjust-modal__date-trigger--open {
  border-color: rgba(0, 81, 243, 0.4);
}

.selka-bulk-reward-adjust-modal__date-trigger:focus-visible {
  outline: 2px solid rgba(0, 81, 243, 0.24);
  outline-offset: 0;
}

.selka-bulk-reward-adjust-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
}

.selka-bulk-reward-adjust-modal__footer .selka-edit-variant-modal__btn-cancel {
  width: 120px;
  flex-shrink: 0;
}

.selka-bulk-reward-adjust-modal__save {
  flex: 1 1 0;
  min-width: 0;
}

/* Rewards — single Atur Saldo modal (Figma 735:2318) */

.selka-modal--single-reward-adjust {
  padding: 24px;
}

.selka-single-reward-adjust-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(100%, 798px);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}

.selka-single-reward-adjust-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-single-reward-adjust-modal__customer-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding: 12px 16px 12px 12px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 12px;
  background: rgba(0, 81, 243, 0.08);
}

.selka-single-reward-adjust-modal__customer-main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.selka-single-reward-adjust-modal__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 100px;
  background: rgba(129, 144, 174, 0.12);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: #8190ae;
  flex-shrink: 0;
}

.selka-single-reward-adjust-modal__customer-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}

.selka-single-reward-adjust-modal__customer-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: #0f2144;
}

.selka-single-reward-adjust-modal__customer-meta {
  margin: 0;
  font-size: 11px;
  line-height: normal;
  color: #0051f3;
}

.selka-single-reward-adjust-modal__customer-stats {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
}

.selka-single-reward-adjust-modal__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-single-reward-adjust-modal__stat-label {
  font-size: 12px;
  line-height: normal;
  color: #68748d;
}

.selka-single-reward-adjust-modal__stat-value {
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: #0051f3;
}

.selka-single-reward-adjust-modal__body {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.selka-single-reward-adjust-modal__history {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 395px;
  padding: 16px 16px 20px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-single-reward-adjust-modal__history-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-single-reward-adjust-modal__history-head img {
  flex-shrink: 0;
}

.selka-single-reward-adjust-modal__history-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: #68748d;
}

.selka-single-reward-adjust-modal__history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.selka-single-reward-adjust-modal__history-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.selka-single-reward-adjust-modal__history-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.selka-single-reward-adjust-modal__history-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.selka-single-reward-adjust-modal__history-title-text {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: #0f2144;
}

.selka-single-reward-adjust-modal__history-meta {
  margin: 0;
  font-size: 11px;
  line-height: normal;
  color: #68748d;
}

.selka-single-reward-adjust-modal__history-points {
  margin: 0;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  color: #0051f3;
  white-space: nowrap;
}

.selka-single-reward-adjust-modal__history-points--negative {
  color: #c62225;
}

.selka-single-reward-adjust-modal__history-points-suffix {
  font-weight: 400;
}

.selka-single-reward-adjust-modal__history-divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-single-reward-adjust-modal__form-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  min-height: 395px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.selka-single-reward-adjust-modal__form-panel .selka-bulk-reward-adjust-modal__mode-card {
  flex: 1;
  min-height: 0;
  border: none;
  border-radius: 0;
  overflow: hidden;
}

.selka-single-reward-adjust-modal__form-fields {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: none;
  border-radius: 0;
  background: #fff;
}

.selka-single-reward-adjust-modal__amount-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-bulk-reward-adjust-modal__amount-value--card .selka-bulk-reward-adjust-modal__amount-input {
  text-align: center;
}

.selka-single-reward-adjust-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
}

.selka-single-reward-adjust-modal__footer .selka-edit-variant-modal__btn-cancel {
  width: 120px;
  flex-shrink: 0;
}

.selka-single-reward-adjust-modal__save {
  width: min(100%, 456px);
  flex-shrink: 0;
}

/* Rewards — settings modals (Figma 730:451, 730:543) */

.selka-modal--reward-point-exchange,
.selka-modal--reward-redemption-limit {
  padding: 24px;
}

.selka-reward-settings-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}

.selka-reward-settings-modal--exchange {
  width: min(100%, 480px);
}

.selka-reward-settings-modal--redemption {
  width: min(100%, 560px);
}

.selka-reward-settings-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-reward-settings-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: normal;
  color: #0f2144;
}

.selka-reward-settings-modal__close {
  flex-shrink: 0;
}

.selka-reward-settings-modal__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-reward-settings-modal__preview--extended {
  align-items: stretch;
  gap: 16px;
}

.selka-reward-settings-modal__preview-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.selka-reward-settings-modal__preview-divider {
  height: 1px;
  margin: 0;
  padding: 0;
  border: none;
  background: rgba(129, 144, 174, 0.12);
}

.selka-reward-settings-modal__preview-label {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #68748d;
  text-align: center;
}

.selka-reward-settings-modal__preview-value {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  color: #0051f3;
  text-align: center;
}

.selka-reward-settings-modal__preview-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(129, 144, 174, 0.12);
  font-size: 12px;
  line-height: normal;
  color: #0051f3;
}

.selka-reward-settings-modal__exchange-input-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: text;
}

.selka-reward-settings-modal__exchange-prefix {
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  color: #0051f3;
}

.selka-reward-settings-modal__exchange-input {
  field-sizing: content;
  width: auto;
  min-width: 1ch;
  max-width: 14ch;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  color: #0051f3;
  text-align: left;
}

.selka-reward-settings-modal__exchange-input:focus-visible {
  outline: none;
}

.selka-reward-settings-modal__simulation {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-reward-settings-modal__simulation-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  color: #68748d;
}

.selka-reward-settings-modal__simulation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  line-height: normal;
  color: #8190ae;
}

.selka-reward-settings-modal__simulation-row strong {
  font-weight: 400;
  color: #0051f3;
  text-align: right;
  white-space: nowrap;
}

.selka-reward-settings-modal__info {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: rgba(0, 81, 243, 0.08);
}

.selka-reward-settings-modal__info p {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #0051f3;
}

.selka-reward-settings-modal__info strong {
  font-weight: 600;
}

.selka-reward-settings-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.selka-reward-settings-modal__save {
  flex: 1;
  max-width: none;
}

.selka-reward-redemption-options {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-reward-redemption-options__divider {
  margin: 0;
  border: none;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-reward-redemption-option__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.selka-reward-redemption-option__radio {
  flex-shrink: 0;
  width: auto;
  margin-top: 2px;
}

.selka-reward-redemption-option__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.selka-reward-redemption-option__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.selka-reward-redemption-option__title {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: #68748d;
}

.selka-reward-redemption-option__title--active {
  font-weight: 600;
  color: #0051f3;
}

.selka-reward-redemption-option__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(0, 81, 243, 0.08);
  font-size: 12px;
  line-height: normal;
  color: #0051f3;
}

.selka-reward-redemption-option__description {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #8190ae;
}

.selka-reward-redemption-option__highlight {
  color: #0051f3;
}

.selka-reward-redemption-option__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 240px;
  max-width: 100%;
  height: 42px;
  margin-top: 8px;
  margin-left: 32px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  line-height: normal;
  color: #8190ae;
}

.selka-reward-redemption-option__field--amount {
  width: 140px;
}

.selka-reward-redemption-option__field--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.selka-reward-redemption-option__field--error {
  border-color: #c62225;
}

.selka-reward-redemption-option__field-error {
  margin: 4px 0 0 32px;
  font-size: 12px;
  line-height: normal;
  color: #c62225;
}

.selka-reward-redemption-option__field-input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: #0f2144;
}

.selka-reward-redemption-option__field-input:focus-visible {
  outline: none;
}

.selka-reward-redemption-option__field--amount .selka-reward-redemption-option__field-input {
  text-align: right;
}

/* Rewards — Atur Trigger modal (Figma 730:640, 730:712) */

.selka-modal--reward-trigger {
  padding: 24px;
}

.selka-reward-settings-modal--trigger {
  width: min(100%, 560px);
}

.selka-reward-trigger-modal__multiplier-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: text;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.selka-reward-trigger-modal__multiplier-amount {
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.selka-reward-trigger-modal__multiplier-prefix {
  color: #8190ae;
}

.selka-reward-trigger-modal__multiplier-rp {
  color: #0051f3;
}

.selka-reward-trigger-modal__multiplier-input {
  field-sizing: content;
  width: auto;
  min-width: 1ch;
  max-width: 14ch;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  color: #0051f3;
  text-align: left;
}

.selka-reward-trigger-modal__multiplier-input:focus-visible {
  outline: none;
}

.selka-reward-trigger-modal__fixed-line {
  display: flex;
  justify-content: center;
}

.selka-reward-trigger-modal__fixed-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  cursor: text;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  color: #0051f3;
}

.selka-reward-trigger-modal__fixed-input {
  field-sizing: content;
  width: auto;
  min-width: 1ch;
  max-width: 14ch;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  color: #0051f3;
  text-align: right;
}

.selka-reward-trigger-modal__fixed-input:focus-visible {
  outline: none;
}

.selka-reward-trigger-modal__fixed-suffix {
  color: #0051f3;
}

.selka-reward-trigger-modal__simulation {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.selka-reward-trigger-modal__simulation-grid {
  display: flex;
  gap: 8px;
  width: 100%;
}

.selka-reward-trigger-modal__simulation-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  text-align: center;
}

.selka-reward-trigger-modal__simulation-card--payment {
  background: rgba(129, 144, 174, 0.08);
}

.selka-reward-trigger-modal__simulation-card--points {
  background: rgba(0, 81, 243, 0.08);
}

.selka-reward-trigger-modal__simulation-card-label {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #8190ae;
}

.selka-reward-trigger-modal__simulation-amount {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: text;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: #8190ae;
  white-space: nowrap;
}

.selka-reward-trigger-modal__simulation-amount--edited {
  color: #0f2144;
}

.selka-reward-trigger-modal__simulation-input {
  field-sizing: content;
  width: auto;
  min-width: 1ch;
  max-width: 12ch;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: inherit;
  text-align: left;
}

.selka-reward-trigger-modal__simulation-input:focus-visible {
  outline: none;
}

.selka-reward-trigger-modal__simulation-hint {
  margin: 0;
  font-size: 11px;
  line-height: normal;
  color: #0051f3;
}

.selka-reward-trigger-modal__simulation-points {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  color: #0051f3;
}

.selka-reward-trigger-modal__simulation-worth {
  margin: 0;
  font-size: 11px;
  line-height: normal;
  color: #0051f3;
}

.selka-reward-trigger-modal__simulation-worth strong {
  font-weight: 600;
}

.selka-reward-settings-modal--trigger .selka-edit-variant-modal__btn-cancel {
  width: 120px;
  min-width: 120px;
}

.selka-reward-trigger-modal__head {
  align-items: flex-start;
}

.selka-reward-trigger-modal__title-block {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-right: 16px;
}

.selka-reward-trigger-modal__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: normal;
  color: #68748d;
}

.selka-reward-trigger-modal__preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(129, 144, 174, 0.12);
  font-size: 12px;
  line-height: normal;
  color: #0051f3;
}

.selka-reward-trigger-modal__preview-chip-strong {
  font-weight: 600;
}

.selka-reward-trigger-modal__preview-chip-divider {
  width: 1px;
  height: 16px;
  background: rgba(129, 144, 174, 0.28);
}

.selka-reward-trigger-modal__expiration-fields {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  margin-left: 32px;
}

.selka-reward-trigger-modal__expiration-fields--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.selka-reward-trigger-modal__days-field {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 42px;
  padding: 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-reward-trigger-modal__days-input {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: #0f2144;
  text-align: center;
}

.selka-reward-trigger-modal__days-input:focus-visible {
  outline: none;
}

.selka-reward-trigger-modal__unit-field-wrap {
  position: relative;
  width: 232px;
}

.selka-reward-trigger-modal__unit-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 42px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  line-height: normal;
  color: #0051f3;
  text-align: left;
  cursor: pointer;
}

.selka-reward-trigger-modal__unit-field:disabled {
  cursor: default;
}

.selka-reward-trigger-modal__unit-field span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-reward-trigger-modal__unit-menu {
  position: absolute;
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.04);
  list-style: none;
}

.selka-reward-trigger-modal__unit-option {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: #0f2144;
  text-align: left;
  cursor: pointer;
}

.selka-reward-trigger-modal__unit-option:hover,
.selka-reward-trigger-modal__unit-option:focus-visible,
.selka-reward-trigger-modal__unit-option--selected {
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
  outline: none;
}

/* Customers list + detail */
.selka-customers-page,
.selka-customer-detail-page,
.selka-email-stub-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding-bottom: 24px;
}

.selka-customers-toolbar,
.selka-customers-subtoolbar,
.selka-customers-toolbar-divider {
  margin-right: 40px;
}

.selka-customers-toolbar-divider {
  margin-top: 0;
  margin-bottom: 0;
}

.selka-customers-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.selka-customers-add-btn {
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border-radius: 8px;
}

.selka-customers-subtoolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.selka-customers-subtoolbar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.selka-customers-subtoolbar__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.selka-customers-subtoolbar__divider {
  width: 1px;
  height: 32px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-customers-toolbar__summary {
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #68748d;
  white-space: nowrap;
}

.selka-customers-toolbar__summary strong {
  color: #0051f3;
  font-weight: 400;
}

.selka-customers-table-block {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  padding-right: 40px;
  box-sizing: border-box;
}

.selka-customers-table-block .selka-table-viewport-shell {
  padding-right: 0;
}

.selka-customers-table-block .selka-table-viewport-shell::after {
  right: 0;
}

.selka-table-wrap--customers .selka-table-viewport-shell--scrolled::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(16px + 122px);
  z-index: 25;
  width: 1px;
  background: rgba(129, 144, 174, 0.2);
  box-shadow: 4px 0 12px -4px rgba(15, 33, 68, 0.12);
  pointer-events: none;
}

.selka-table-wrap--customers {
  width: 100%;
  margin-top: 0;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  overflow: hidden;
}

.selka-customers-table {
  width: 100%;
  min-width: 1191px;
}

.selka-customers-table__head,
.selka-customers-row {
  display: grid;
  grid-template-columns: 122px 140px 106px 100px 77px 119px 170px 170px;
  gap: 20px;
  align-items: center;
  min-width: max-content;
}

.selka-customers-table__head {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 12px 31px 12px 16px;
  background: #f5f6f9;
  border-bottom: 1px solid rgba(129, 144, 174, 0.08);
  box-shadow: 0 1px 0 rgba(129, 144, 174, 0.08);
}

.selka-customers-table__head-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.selka-customers-table__head-cell--right {
  justify-content: flex-end;
}

.selka-customers-table__head-cell--right .selka-th-sort {
  justify-content: flex-end;
}

.selka-customers-table__head-cell--right .selka-th-sort--icon-left {
  flex-direction: row;
}

.selka-customers-table__head-cell--label .selka-th-label {
  font-size: 12px;
  color: #68748d;
}

.selka-customers-table__body {
  display: flex;
  flex-direction: column;
}

.selka-customers-row {
  min-height: 48px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
}

.selka-customers-row:last-child {
  border-bottom: none;
}

.selka-customers-row:hover {
  background: #f5f8ff;
}

.selka-customers-table__freeze--name {
  position: sticky;
  left: 16px;
  z-index: 10;
  align-self: stretch;
  display: flex;
  align-items: center;
  width: 122px;
  min-width: 122px;
  max-width: 122px;
  background-color: #fff;
  background-clip: padding-box;
}

.selka-customers-table__head .selka-customers-table__freeze--name {
  z-index: 30;
  background-color: #f5f6f9;
}

.selka-customers-row:hover .selka-customers-table__freeze--name {
  background-color: #f5f8ff;
}

.selka-customers-row__name {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #0051f3;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selka-customers-row:hover .selka-customers-row__name {
  text-decoration: underline;
}

.selka-customers-row__name:hover,
.selka-customers-row__name:focus-visible {
  text-decoration: underline;
}

.selka-customers-row__text,
.selka-customers-row__value {
  font-size: 12px;
  color: #68748d;
  min-width: 0;
}

.selka-customers-row__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-customers-row__text--right,
.selka-customers-row__value {
  text-align: right;
}

.selka-customers-row__value--link {
  color: #0051f3;
  text-decoration: none;
}

.selka-customers-row__value--link:hover,
.selka-customers-row__value--link:focus-visible {
  text-decoration: underline;
}

.selka-customers-contact-pill {
  display: flex;
  align-items: center;
  gap: 0;
  width: 170px;
  height: 28px;
  padding: 4px 8px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 100px;
  background: rgba(129, 144, 174, 0.08);
  box-sizing: border-box;
}

.selka-customers-contact-pill__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: normal;
  color: #68748d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-customers-contact-pill__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.12s ease,
    max-width 0.12s ease;
}

.selka-customers-row:hover .selka-customers-contact-pill:not(.selka-customers-contact-pill--empty),
.selka-customers-row:focus-within .selka-customers-contact-pill:not(.selka-customers-contact-pill--empty) {
  gap: 8px;
  padding-right: 4px;
  background: rgba(0, 81, 243, 0.08);
}

.selka-customers-row:hover .selka-customers-contact-pill:not(.selka-customers-contact-pill--empty)
  .selka-customers-contact-pill__text,
.selka-customers-row:focus-within
  .selka-customers-contact-pill:not(.selka-customers-contact-pill--empty)
  .selka-customers-contact-pill__text {
  color: #0051f3;
}

.selka-customers-row:hover .selka-customers-contact-pill:not(.selka-customers-contact-pill--empty)
  .selka-customers-contact-pill__actions,
.selka-customers-row:focus-within
  .selka-customers-contact-pill:not(.selka-customers-contact-pill--empty)
  .selka-customers-contact-pill__actions {
  width: auto;
  max-width: 40px;
  opacity: 1;
  pointer-events: auto;
}

.selka-customers-table__empty {
  padding: 24px 16px;
  color: #68748d;
  text-align: center;
  font-size: 12px;
}

.selka-customers-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 0;
  transition: background-color 0.12s ease;
}

.selka-customers-contact-pill__actions
  .selka-customers-contact-btn:not(.selka-customers-contact-btn--confirmed)
  img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-customers-contact-btn:hover:not(:active):not(.selka-customers-contact-btn--confirmed),
.selka-customers-contact-btn:focus-visible:not(:active):not(.selka-customers-contact-btn--confirmed) {
  background: rgba(0, 81, 243, 0.12);
  outline: none;
}

.selka-customers-contact-btn:active:not(.selka-customers-contact-btn--confirmed),
.selka-customers-contact-btn--confirmed {
  background: #0051f3;
}

.selka-customers-contact-pill__actions
  .selka-customers-contact-btn:active:not(.selka-customers-contact-btn--confirmed)
  img {
  filter: brightness(0) invert(1);
}

.selka-customers-contact-btn--confirmed img {
  filter: none;
}

.selka-customers-contact-btn__stack {
  position: relative;
  width: 20px;
  height: 20px;
}

.selka-customers-contact-btn__layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}

.selka-customers-contact-btn__layer.is-hidden {
  opacity: 0;
}

.selka-customers-contact-btn__layer.is-visible {
  opacity: 1;
}

.selka-pagination--customers {
  width: 100%;
  padding-right: 0;
}

.selka-customer-detail {
  padding-right: 40px;
}

.selka-customer-detail__body {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  max-width: 774px;
  padding: 40px;
  box-sizing: border-box;
}

.selka-customer-detail__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: #0051f3;
  white-space: nowrap;
  cursor: pointer;
}

.selka-customer-detail__edit-btn:hover {
  background: rgba(0, 81, 243, 0.08);
  border-color: rgba(0, 81, 243, 0.08);
}

.selka-customer-detail__edit-btn img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-customer-detail__profile-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-customer-detail__profile-row {
  display: flex;
  gap: 40px;
  align-items: center;
}

.selka-customer-detail__name-row {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  min-width: 0;
}

.selka-customer-detail__details {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 120px;
}

.selka-customer-detail__value-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.selka-customer-detail__value-label {
  font-size: 12px;
  color: #8190ae;
}

.selka-customer-detail__value-text {
  font-size: 14px;
  color: #0f2144;
}

.selka-customer-detail__value-text--large {
  font-size: 20px;
  font-weight: 600;
}

.selka-customer-detail__contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.selka-customer-detail__contact-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.selka-customer-detail__contact-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 250px;
  max-width: 100%;
  min-height: 32px;
  padding: 4px 4px 4px 12px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 100px;
  background: rgba(0, 81, 243, 0.08);
  box-sizing: border-box;
}

.selka-customer-detail__contact-pill--empty {
  border-color: rgba(129, 144, 174, 0.12);
  background: rgba(129, 144, 174, 0.08);
}

.selka-customer-detail__contact-pill-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  color: #0051f3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-customer-detail__contact-pill--empty .selka-customer-detail__contact-pill-text {
  color: #68748d;
}

.selka-customer-detail__contact-pill-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

.selka-customer-detail__contact-pill-actions .selka-customers-contact-btn img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-customer-detail__contact-pill-actions
  .selka-customers-contact-btn:active:not(.selka-customers-contact-btn--confirmed)
  img,
.selka-customer-detail__contact-pill-actions .selka-customers-contact-btn--confirmed img {
  filter: none;
}

.selka-customer-detail__address-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.selka-customer-detail__address-heading {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-customer-detail__address-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.selka-customer-detail__address-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: min(318px, 100%);
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
}

.selka-customer-detail__address-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.selka-customer-detail__address-label {
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-customer-detail__address-badge {
  padding: 2px 8px;
  border-radius: 23px;
  background: #ebf1fe;
  font-size: 12px;
  color: #0051f3;
}

.selka-customer-detail__address-body {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 14px;
  line-height: normal;
  color: #68748d;
}

.selka-customer-detail__address-body p {
  margin: 0;
}

.selka-customer-detail__divider {
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-customer-detail__feed-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-customer-detail__feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.selka-customer-detail__feed-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selka-customer-detail__feed-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-customer-detail__feed-title h2 span {
  color: #8190ae;
  font-weight: 600;
}

.selka-customer-detail__section-btn {
  gap: 8px;
  padding: 8px 12px 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #0051f3;
  text-decoration: none;
}

.selka-customer-detail__section-btn img {
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-customer-detail__order-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
}

.selka-customer-detail__order-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.selka-customer-detail__order-heading {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-width: 0;
}

.selka-customer-detail__order-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.selka-customer-detail__order-title-row strong {
  font-size: 16px;
  color: #0051f3;
}

.selka-customer-detail__order-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selka-customer-detail__order-date {
  margin: 4px 0 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-customer-detail__order-total {
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
  white-space: nowrap;
}

.selka-customer-detail__order-divider,
.selka-customer-detail__order-item-divider {
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-customer-detail__order-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selka-customer-detail__order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}

.selka-customer-detail__order-item-main {
  display: flex;
  flex: 1;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.selka-customer-detail__order-thumb {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 8px;
  background: #f8f7f5;
}

.selka-customer-detail__order-item-main strong {
  display: block;
  font-size: 14px;
  color: #0f2144;
}

.selka-customer-detail__order-item-main span {
  display: block;
  font-size: 12px;
  color: #68748d;
}

.selka-customer-detail__order-item-side {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 14px;
  white-space: nowrap;
}

.selka-customer-detail__order-item-side span {
  color: #0051f3;
}

.selka-customer-detail__order-item-side strong {
  color: #68748d;
  font-weight: 400;
}

.selka-customer-detail__empty-copy {
  margin: 0;
  font-size: 12px;
  color: #68748d;
}

.selka-customer-detail__feed-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  box-sizing: border-box;
}

.selka-customer-detail__feed-empty p {
  margin: 0;
  font-size: 14px;
  color: #8190ae;
  text-align: center;
}

.selka-customer-detail__icon-metal {
  /* Metal 100 #8190ae */
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-customer-detail__feed-title img {
  /* Metal 100 #8190ae */
  filter: brightness(0) saturate(100%) invert(62%) sepia(9%) saturate(582%)
    hue-rotate(184deg) brightness(94%) contrast(91%);
}

.selka-customer-detail__rewards-card {
  gap: 12px;
}

.selka-customer-detail__rewards-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 148px;
  padding: 16px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 12px;
  background: rgba(0, 81, 243, 0.08);
  box-sizing: border-box;
}

.selka-customer-detail__rewards-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.selka-customer-detail__rewards-summary strong {
  font-size: 20px;
  font-weight: 600;
  color: #0051f3;
}

.selka-customer-detail__rewards-summary p {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  line-height: normal;
  color: #0051f3;
  white-space: nowrap;
}

.selka-customer-detail__rewards-rate {
  display: inline-block;
  flex-shrink: 0;
  width: 1px;
  height: 16px;
  background: rgba(0, 81, 243, 0.2);
}

.selka-customer-detail__rewards-actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.selka-customer-detail__rewards-btn {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 1px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(0, 81, 243, 0.08);
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  color: #0051f3;
  white-space: nowrap;
  cursor: pointer;
}

.selka-customer-detail__rewards-btn img {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(23%) sepia(94%) saturate(2476%)
    hue-rotate(211deg) brightness(97%) contrast(101%);
}

.selka-customer-detail__rewards-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.selka-customer-detail__data-card {
  gap: 16px;
  padding: 20px;
}

.selka-customer-detail__data-card .selka-create-customer__aside-title span {
  color: #8190ae;
  font-weight: 600;
}

.selka-customer-detail__data-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.selka-customer-detail__data-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.selka-customer-detail__data-grid span {
  display: block;
  font-size: 12px;
  color: #68748d;
}

.selka-customer-detail__data-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #0051f3;
}

.selka-customer-detail__data-metric span {
  display: block;
  font-size: 12px;
  color: #68748d;
}

.selka-customer-detail__data-metric strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #8190ae;
}

.selka-customer-detail__data-divider {
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

@media (max-width: 1100px) {
  .selka-customer-detail {
    flex-direction: column;
    overflow: auto;
    padding-right: 0;
  }

  .selka-customer-detail__details {
    padding-left: 0;
  }

  .selka-customer-detail__profile-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .selka-customer-detail__name-row {
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }
}

/* ── Email Engine (Figma 380:21, 799:2185, 790:131, 794:1102, 790:33, 798:1570) ── */

.selka-email-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  padding-bottom: 24px;
}

.selka-email-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 40px;
}

.selka-email-header__top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-email-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
}

.selka-email-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selka-email-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  color: #68748d;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.selka-email-tab--active {
  padding: 8px 16px 8px 12px;
  background: var(--black-100);
  border-color: rgba(129, 144, 174, 0.08);
  color: #fff;
  font-weight: 600;
}

.selka-email-tab img {
  width: 16px;
  height: 16px;
}

.selka-email-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 8px 12px 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--black-100);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.selka-email-create-btn img {
  width: 16px;
  height: 16px;
}

.selka-email-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 32px;
  padding-right: 40px;
}

.selka-email-toolbar__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.selka-email-toolbar__summary {
  margin: 0;
  font-size: 12px;
  color: #68748d;
  white-space: nowrap;
}

.selka-email-toolbar__summary strong {
  color: var(--energy-100);
  font-weight: 400;
}

.selka-email-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-email-filter-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
}

.selka-email-filter-pill__label {
  font-size: 12px;
  color: var(--energy-100);
  pointer-events: none;
}

.selka-email-filter-pill__select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.selka-email-search-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: rgba(129, 144, 174, 0.08);
  cursor: pointer;
}

.selka-email-search-pill img {
  filter: brightness(0) saturate(100%) invert(42%) sepia(8%) saturate(874%)
    hue-rotate(184deg) brightness(94%) contrast(88%);
}

.selka-email-search-input {
  width: 180px;
  height: 32px;
  padding: 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  color: #0f2144;
}

.selka-email-loading {
  margin: 0;
  padding: 40px 40px 40px 0;
  font-size: 12px;
  color: #68748d;
}

.selka-email-campaign-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 40px;
}

.selka-email-campaign-row {
  border: 1px solid rgba(129, 144, 174, 0.16);
  border-radius: 16px;
  background: #fff;
  padding: 20px;
  min-height: 101px;
}

.selka-email-campaign-row__contents {
  display: flex;
  align-items: center;
  gap: 20px;
}

.selka-email-campaign-row__detail {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 370px;
  min-width: 0;
}

.selka-email-campaign-row__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 60px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
}

.selka-email-campaign-row__meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.selka-email-campaign-row__name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #0f2144;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selka-email-campaign-row__status-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.selka-email-campaign-row__timestamp {
  font-size: 12px;
  color: #68748d;
}

.selka-email-campaign-row__stats-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  min-width: 0;
}

.selka-email-campaign-row__stats {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.selka-email-campaign-row__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 120px;
  min-height: 61px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
}

.selka-email-campaign-row__stat-label {
  font-size: 12px;
  color: #8190ae;
}

.selka-email-campaign-row__stat-value {
  display: flex;
  align-items: center;
  gap: 4px;
}

.selka-email-campaign-row__stat-count {
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-email-campaign-row__stat-percent {
  display: inline-flex;
  align-items: center;
  padding: 2px 4px;
  border-radius: 100px;
  font-size: 11px;
  line-height: 1;
  color: #68748d;
  background: rgba(129, 144, 174, 0.08);
}

.selka-email-campaign-row__stat-percent--energy {
  color: var(--energy-100);
  background: var(--energy-8);
}

.selka-email-campaign-row__stat-percent--positive {
  color: var(--hulk, #188f1a);
  background: var(--hulk-12-solid, #e3f1e3);
}

.selka-email-campaign-row__stat-percent--destructive {
  color: var(--destruction-100);
  background: var(--destruction-12);
}

.selka-email-campaign-row__stat-count--destructive {
  color: var(--destruction-100);
}

.selka-email-campaign-row__stat-count--positive {
  color: var(--hulk, #188f1a);
}

.selka-email-campaign-row__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.selka-email-campaign-row__action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.selka-email-campaign-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}

.selka-email-campaign-badge--terkirim {
  color: var(--success-100);
  background: var(--success-12);
}

.selka-email-campaign-badge--dijadwalkan {
  color: var(--energy-100);
  background: var(--energy-8);
}

.selka-email-campaign-badge--sedang-proses {
  color: #0f2144;
  background: rgba(129, 144, 174, 0.12);
}

.selka-email-campaign-badge--draft {
  color: #68748d;
  background: rgba(129, 144, 174, 0.08);
}

.selka-email-campaign-badge--gagal {
  color: var(--destruction-100);
  background: var(--destruction-12);
}

.selka-email-campaign-row__overflow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.selka-email-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  padding: 100px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: var(--metallic-white, #f7f8fa);
  margin-right: 40px;
}

.selka-email-empty-state__icon {
  width: 60px;
  height: 60px;
}

.selka-email-empty-state__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.selka-email-empty-state__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #68748d;
}

.selka-email-empty-state__subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #8190ae;
}

.selka-email-empty-state__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 8px 12px 8px 16px;
  border-radius: 8px;
  background: var(--black-100);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}

.selka-email-notif-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-right: 40px;
}

.selka-email-notif-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding-right: 40px;
}

.selka-email-notif-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.selka-email-notif-card__thumb {
  height: 116px;
  background:
    linear-gradient(45deg, #e9ecf1 25%, transparent 25%),
    linear-gradient(-45deg, #e9ecf1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9ecf1 75%),
    linear-gradient(-45deg, transparent 75%, #e9ecf1 75%);
  background-size: 16px 16px;
  background-position:
    0 0,
    0 8px,
    8px -8px,
    -8px 0;
  background-color: #f7f8fa;
}

.selka-email-notif-card__thumb--preview {
  overflow: hidden;
  background: #fff;
}

.selka-email-notif-card__thumb--preview iframe {
  width: 600px;
  height: 600px;
  border: none;
  transform: scale(0.55);
  transform-origin: top left;
  pointer-events: none;
}

.selka-email-notif-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 20px;
}

.selka-email-notif-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-email-notif-card__actions {
  display: flex;
  gap: 10px;
}

.selka-email-notif-card__preview,
.selka-email-notif-card__edit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 20px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

.selka-email-notif-card__preview {
  border: 1px solid rgba(129, 144, 174, 0.08);
  background: #fff;
  color: var(--energy-100);
}

.selka-email-notif-card__edit {
  flex: 1;
  justify-content: center;
  border: 1px solid var(--energy-8);
  background: var(--energy-8);
  color: var(--energy-100);
  font-weight: 500;
}

.selka-email-create-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding-right: 60px;
  box-sizing: border-box;
}

.selka-email-create-shell {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-right: none;
  border-bottom: none;
  border-radius: 40px 40px 0 0;
  background: #fff;
}

.selka-email-create-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 40px 40px 12px;
}

.selka-email-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-email-breadcrumb img {
  width: 24px;
  height: 24px;
}

.selka-email-breadcrumb__chevron {
  filter: brightness(0) saturate(100%) invert(91%) sepia(10%) saturate(347%)
    hue-rotate(184deg) brightness(95%) contrast(91%);
}

.selka-email-create-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-email-create-actions__outline {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.selka-email-create-actions__outline--cancel {
  color: var(--destruction-100);
}

.selka-email-create-actions__outline--preview {
  color: var(--energy-100);
}

.selka-email-create-actions__schedule-group {
  display: inline-flex;
  align-items: stretch;
  gap: 1px;
}

.selka-email-create-actions__schedule-group--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.selka-email-create-actions__schedule-main,
.selka-email-create-actions__schedule-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--black-100);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.selka-email-create-actions__schedule-main {
  padding: 8px 12px 8px 16px;
  border-radius: 8px 0 0 8px;
}

.selka-email-create-actions__schedule-toggle {
  padding: 8px;
  border-radius: 0 8px 8px 0;
}

.selka-email-create-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 40px 40px 200px;
  -webkit-overflow-scrolling: touch;
}

.selka-email-create-scroll::-webkit-scrollbar {
  width: 8px;
}

.selka-email-create-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.selka-email-create-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(129, 144, 174, 0.28);
}

.selka-email-create-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 774px;
}

.selka-email-create-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.selka-email-create-block--subject {
  max-width: 400px;
}

.selka-email-create-block__title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-email-create-block__required {
  font-size: 14px;
  font-weight: 400;
  color: var(--energy-100);
}

.selka-email-create-block__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
}

.selka-email-create-block__field--narrow {
  max-width: 288px;
}

.selka-email-create-input {
  width: 100%;
  max-width: 400px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
}

.selka-email-create-input::placeholder {
  color: #8190ae;
}

.selka-email-audience-filter {
  position: relative;
}

.selka-email-audience-select {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 240px;
  max-width: 100%;
  height: 42px;
  padding: 0 12px 0 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 14px;
  color: var(--energy-100);
  cursor: pointer;
}

.selka-email-audience-select--open {
  border-color: rgba(15, 33, 68, 0.2);
  background: #fff;
}

.selka-email-audience-select__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.selka-email-audience-select img {
  pointer-events: none;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(32%) sepia(93%) saturate(5152%)
    hue-rotate(212deg) brightness(99%) contrast(101%);
}

.selka-email-audience-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: 320px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(15, 33, 68, 0.08);
}

.selka-email-audience-popover--portal {
  position: fixed;
  top: auto;
  left: auto;
}

.selka-email-audience-popover__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-email-audience-popover__search img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selka-email-audience-popover__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #0f2144;
}

.selka-email-audience-popover__search-input::placeholder {
  color: #8190ae;
}

.selka-email-audience-popover__search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-email-audience-popover__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.selka-email-audience-popover__select-all {
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--energy-100);
  cursor: pointer;
}

.selka-email-audience-popover__count {
  font-size: 12px;
  color: #8190ae;
}

.selka-email-audience-popover__list-wrap {
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.selka-email-audience-popover__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selka-email-audience-popover__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.selka-email-audience-popover__item--selected {
  background: rgba(129, 144, 174, 0.08);
}

.selka-email-audience-popover__checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid rgba(129, 144, 174, 0.4);
  border-radius: 4px;
  background: #fff;
}

.selka-email-audience-popover__checkbox--checked {
  border-color: var(--energy-100);
  background: var(--energy-100);
}

.selka-email-audience-popover__checkbox--checked img {
  filter: brightness(0) invert(1);
}

.selka-email-audience-popover__item-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.selka-email-audience-popover__item-label img {
  flex-shrink: 0;
}

.selka-email-audience-popover__item-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.selka-email-audience-popover__item-name {
  font-size: 13px;
  font-weight: 500;
  color: #0f2144;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-email-audience-popover__item-email {
  font-size: 11px;
  color: #8190ae;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-email-audience-popover__empty {
  margin: 0 0 12px;
  font-size: 12px;
  color: #8190ae;
  text-align: center;
}

.selka-email-audience-popover__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.selka-email-audience-popover__clear {
  border: none;
  background: none;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  color: #8190ae;
  cursor: pointer;
}

.selka-email-audience-popover__confirm {
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--energy-100);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.selka-email-audience-popover__confirm:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.selka-email-create-divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-email-form-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-email-form-section__label {
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-email-form-section__label span {
  color: var(--destruction-100);
}

.selka-email-form-section__helper {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-email-form-two-col {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
}

.selka-email-form-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-email-rich-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-email-rich-field__label {
  font-size: 14px;
  font-weight: 400;
  color: #68748d;
}

.selka-email-rich-field__required {
  margin-left: 4px;
  font-size: 14px;
  color: var(--energy-100);
}

.selka-email-rich-field__box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-email-rich-field__input {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: #0f2144;
}

.selka-email-rich-field__editor {
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  color: #0f2144;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  cursor: text;
}

.selka-email-rich-field__editor:empty::before {
  content: attr(data-placeholder);
  color: #8190ae;
  pointer-events: none;
}

.selka-email-merge-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 1px;
  padding: 4px;
  border-radius: 4px;
  background: rgba(0, 81, 243, 0.08);
  vertical-align: baseline;
  user-select: none;
}

.selka-email-merge-chip__label {
  font-size: 12px;
  line-height: 1;
  color: var(--energy-100, #0051f3);
  white-space: nowrap;
}

.selka-email-merge-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-email-merge-chip__remove img {
  width: 16px;
  height: 16px;
}

.selka-email-rich-field__input::placeholder {
  color: #8190ae;
}

.selka-email-rich-field__input:focus {
  outline: none;
}

.selka-email-chip-row {
  display: flex;
  gap: 4px;
}

.selka-email-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: none;
  border-radius: 40px;
  background: rgba(129, 144, 174, 0.08);
  font-size: 12px;
  color: #8190ae;
  cursor: pointer;
}

.selka-email-chip img {
  width: 16px;
  height: 16px;
}

.selka-email-chip--active {
  background: rgba(129, 144, 174, 0.16);
  color: #68748d;
}

.selka-email-variable-popover,
.selka-email-emoji-popover {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  width: 280px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 16px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(15, 33, 68, 0.08);
}

.selka-email-variable-popover--portal,
.selka-email-emoji-popover--portal {
  position: fixed;
  top: auto;
  left: auto;
}

.selka-email-variable-popover__search,
.selka-email-emoji-popover__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
}

.selka-email-variable-popover__search img,
.selka-email-emoji-popover__search img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selka-email-variable-popover__search-input,
.selka-email-emoji-popover__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: #0f2144;
}

.selka-email-variable-popover__search-input::placeholder,
.selka-email-emoji-popover__search-input::placeholder {
  color: #8190ae;
}

.selka-email-variable-popover__search-clear,
.selka-email-emoji-popover__search-clear {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.selka-email-variable-popover__list-wrap {
  max-height: 240px;
  overflow-y: auto;
}

.selka-email-variable-popover__group + .selka-email-variable-popover__group {
  margin-top: 12px;
}

.selka-email-variable-popover__group-title {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #8190ae;
}

.selka-email-variable-popover__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.selka-email-variable-popover__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.selka-email-variable-popover__item:hover {
  background: rgba(129, 144, 174, 0.08);
}

.selka-email-variable-popover__item-label {
  font-size: 13px;
  font-weight: 500;
  color: #0f2144;
}

.selka-email-variable-popover__item-value {
  font-size: 11px;
  color: #8190ae;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.selka-email-variable-popover__empty,
.selka-email-emoji-popover__empty {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
  text-align: center;
}

.selka-email-emoji-popover__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

.selka-email-emoji-popover__tab {
  border: none;
  border-radius: 40px;
  padding: 4px 10px;
  background: rgba(129, 144, 174, 0.08);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: #8190ae;
  cursor: pointer;
}

.selka-email-emoji-popover__tab--active {
  background: rgba(129, 144, 174, 0.16);
  color: #68748d;
}

.selka-email-emoji-popover__grid-wrap {
  max-height: 200px;
  overflow-y: auto;
}

.selka-email-emoji-popover__grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}

.selka-email-emoji-popover__emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.selka-email-emoji-popover__emoji:hover {
  background: rgba(129, 144, 174, 0.08);
}

.selka-email-inbox-preview {
  flex: 0 0 354px;
  max-width: 354px;
  min-height: 239px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: var(--metallic-white, #f7f8fa);
}

.selka-email-inbox-preview__frame {
  position: relative;
  width: 100%;
  height: 239px;
}

.selka-email-inbox-preview__phone {
  position: absolute;
  top: 22px;
  left: 50%;
  width: 264px;
  max-width: calc(100% - 32px);
  height: 217px;
  transform: translateX(-50%);
  object-fit: contain;
  pointer-events: none;
}

.selka-email-inbox-preview__screen {
  position: absolute;
  top: 69px;
  left: 50%;
  width: 229px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-email-inbox-preview__status {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: #68748d;
}

.selka-email-inbox-preview__messages {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.selka-email-inbox-preview__item {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(129, 144, 174, 0.08);
}

.selka-email-inbox-preview__item img {
  flex-shrink: 0;
  border-radius: 50%;
}

.selka-email-inbox-preview__content {
  flex: 1;
  min-width: 0;
}

.selka-email-inbox-preview__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.selka-email-inbox-preview__sender {
  font-size: 12px;
  font-weight: 600;
  color: #68748d;
}

.selka-email-inbox-preview__time {
  font-size: 10px;
  color: #68748d;
  white-space: nowrap;
}

.selka-email-inbox-preview__subject {
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  color: #68748d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-email-inbox-preview__preheader {
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  color: #68748d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selka-email-inbox-preview__skeleton {
  display: block;
  height: 14px;
  border-radius: 12px;
  background: #e0e3ed;
}

.selka-email-inbox-preview__skeleton--sm {
  width: 100px;
  height: 16px;
}

.selka-email-inbox-preview__skeleton--short {
  width: 175px;
  height: 12px;
}

.selka-email-inbox-preview__item--placeholder .selka-email-inbox-preview__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-email-design-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.selka-email-design-section__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-email-design-panel {
  position: relative;
  min-height: 356px;
  padding: 20px 20px 24px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 16px;
  background: var(--metallic-white, #f7f8fa);
}

.selka-email-design-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 312px;
  text-align: center;
}

.selka-email-design-empty__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-email-design-empty__copy p {
  margin: 0;
  color: #8190ae;
}

.selka-email-design-empty__copy p:first-child {
  font-size: 14px;
  font-weight: 600;
}

.selka-email-design-empty__copy p:last-child {
  font-size: 12px;
  font-weight: 400;
}

.selka-email-design-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 20px;
  border: 1px solid var(--energy-8);
  border-radius: 8px;
  background: var(--energy-8);
  color: var(--energy-100);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.selka-email-design-cta img {
  transform: rotate(-90deg);
  filter: brightness(0) saturate(100%) invert(32%) sepia(93%) saturate(5152%)
    hue-rotate(212deg) brightness(99%) contrast(101%);
}

.selka-email-design-cta--edit {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 8px 20px;
}

.selka-email-design-previews {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding-top: 32px;
}

.selka-email-design-preview-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 220px;
}

.selka-email-design-preview-card--mobile {
  width: 180px;
}

.selka-email-design-preview-card__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #8190ae;
}

.selka-email-design-preview-card__frame {
  height: 280px;
  border: 1px solid #e9ecf1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 1px 4px 4px rgba(15, 33, 68, 0.04);
  overflow: hidden;
}

.selka-email-design-preview-card__frame--empty {
  background: #fff;
}

.selka-email-design-preview-card__iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.selka-email-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 33, 68, 0.4);
}

.selka-email-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(960px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  padding: 24px;
  box-sizing: border-box;
}

.selka-email-modal--wide {
  width: min(960px, 100%);
}

.selka-email-modal--split {
  border-radius: 24px;
}

.selka-email-modal__header {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
}

.selka-email-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-email-modal__close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 8px;
  background: rgba(129, 144, 174, 0.08);
  color: var(--energy-100);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.selka-email-modal__content {
  flex: 1;
  min-height: 0;
  height: 600px;
  border: 1px solid rgba(129, 144, 174, 0.08);
  border-radius: 12px;
  background: #f7f8fa;
  padding: 19px;
  overflow: hidden;
  box-sizing: border-box;
}

.selka-email-modal-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.selka-email-modal-split__preview {
  flex: 0 0 600px;
  max-width: 100%;
}

.selka-email-modal-split__sidebar {
  flex: 0 0 292px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.selka-email-viewport-pills {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.selka-email-viewport-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: #8190ae;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
}

.selka-email-viewport-pill--active {
  background: var(--energy-8);
  color: var(--energy-100);
}

.selka-email-viewport-pill--active img {
  filter: brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(5000%) hue-rotate(215deg);
}

.selka-email-preview-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.selka-email-preview-modal__split {
  display: flex;
  flex: 1;
  min-height: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.selka-email-preview-modal__sidebar {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 20px;
  width: 292px;
}

.selka-email-preview-modal__sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-email-preview-modal__label {
  font-size: 14px;
  font-weight: 400;
  color: #68748d;
}

.selka-email-preview-modal__recipient-input {
  box-sizing: border-box;
  width: 100%;
  height: 42px;
  padding: 12px 12px 12px 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
}

.selka-email-preview-modal__recipient-input::placeholder {
  color: #8190ae;
}

.selka-email-preview-modal__divider {
  height: 1px;
  margin: 0;
  border: none;
  background: rgba(129, 144, 174, 0.12);
}

.selka-email-preview-modal__send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 8px 12px 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--black-100);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.selka-email-preview-modal__send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.selka-email-preview-modal__feedback {
  margin: 0;
  font-size: 13px;
}

.selka-email-preview-modal__feedback--error {
  color: var(--destruction-100);
}

.selka-email-preview-modal__feedback--success {
  color: var(--success-100);
}

.selka-email-preview-frame__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #68748d;
}

.selka-email-preview-frame {
  width: 100%;
  height: 584px;
  border: 1px solid #e9ecf1;
  border-radius: 12px;
  background: #fff;
  box-shadow: 1px 4px 4px rgba(15, 33, 68, 0.04);
  overflow: hidden;
}

.selka-email-preview-frame iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.selka-email-preview-frame--mobile {
  max-width: 375px;
  margin: 0 auto;
}

.selka-email-template-picker__layout {
  display: flex;
  min-height: 600px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  overflow: hidden;
  background: #f7f8fa;
}

.selka-email-template-picker__sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 280px;
  padding: 20px;
  border-right: 1px solid rgba(129, 144, 174, 0.08);
  background: rgba(129, 144, 174, 0.08);
}

.selka-email-template-picker__blank-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 8px 12px 8px 16px;
  border: none;
  border-radius: 8px;
  background: var(--dark-metal-100);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.selka-email-template-picker__divider {
  height: 1px;
  background: rgba(129, 144, 174, 0.12);
}

.selka-email-template-picker__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-email-template-picker__nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px 8px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #68748d;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.selka-email-template-picker__nav-item img {
  width: 24px;
  height: 24px;
}

.selka-email-template-picker__nav-item--active {
  background: #fff;
  color: var(--energy-100);
}

.selka-email-template-picker__main {
  flex: 1;
  padding: 20px 24px;
  overflow: auto;
}

.selka-email-template-picker__category-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-email-template-picker__category-desc {
  margin: 0 0 16px;
  font-size: 14px;
  color: #8190ae;
}

.selka-email-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.selka-email-template-card {
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.selka-email-template-card__thumb {
  height: 116px;
  background:
    linear-gradient(45deg, #e9ecf1 25%, transparent 25%),
    linear-gradient(-45deg, #e9ecf1 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e9ecf1 75%),
    linear-gradient(-45deg, transparent 75%, #e9ecf1 75%);
  background-size: 16px 16px;
  background-color: #f7f8fa;
}

.selka-email-template-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 20px;
}

.selka-email-template-card__name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-email-template-card__actions {
  display: flex;
  gap: 10px;
}

.selka-email-template-card__preview,
.selka-email-template-card__use {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 20px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

.selka-email-template-card__preview {
  border: 1px solid rgba(129, 144, 174, 0.08);
  background: #fff;
  color: var(--energy-100);
}

.selka-email-template-card__use {
  flex: 1;
  justify-content: center;
  border: 1px solid var(--energy-8);
  background: var(--energy-8);
  color: var(--energy-100);
  font-weight: 500;
}

.selka-email-schedule-panel__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-email-schedule-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.selka-email-schedule-option-row {
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
}

.selka-email-schedule-option-row--nested {
  gap: 0;
}

.selka-email-schedule-option__label-btn {
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.selka-email-schedule-option__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.selka-email-schedule-radio {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(129, 144, 174, 0.45);
  border-radius: 8px;
  background: #fff;
}

.selka-email-schedule-radio--active {
  border: 4px solid var(--energy-100);
}

.selka-email-schedule-option__label {
  font-size: 14px;
  font-weight: 400;
  color: #68748d;
}

.selka-email-schedule-option__label--active {
  color: var(--energy-100);
}

.selka-email-schedule-option-group {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.selka-email-schedule-option-group__radio {
  display: flex;
  flex-shrink: 0;
  padding-top: 1px;
  cursor: pointer;
}

.selka-email-schedule-option-group__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.selka-email-schedule-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-email-schedule-fields--disabled {
  opacity: 0.4;
  pointer-events: none;
}

.selka-email-schedule-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-email-schedule-field__label {
  font-size: 14px;
  font-weight: 400;
  color: #8190ae;
}

.selka-email-schedule-date-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 220px;
  max-width: 100%;
  height: 42px;
  padding: 0 12px 0 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.selka-email-schedule-date-field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--energy-100);
  outline: none;
}

.selka-email-schedule-date-field__input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.selka-email-schedule-date-field img {
  flex-shrink: 0;
  pointer-events: none;
}

.selka-email-schedule-time-row {
  display: flex;
  gap: 8px;
}

.selka-email-schedule-time-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 80px;
  height: 42px;
  padding: 0 12px 0 16px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
}

.selka-email-schedule-time-field__select {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--energy-100);
  outline: none;
  appearance: none;
  cursor: pointer;
}

.selka-email-schedule-time-field img {
  flex-shrink: 0;
  pointer-events: none;
}

.selka-email-editor-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #fff;
}

.selka-email-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(129, 144, 174, 0.12);
  background: #fff;
}

.selka-email-editor-toolbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selka-email-editor-toolbar__back {
  border: none;
  background: none;
  color: #68748d;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.selka-email-editor-toolbar__title {
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-email-editor-toolbar__actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 1200px) {
  .selka-email-campaign-row__contents {
    flex-wrap: wrap;
  }

  .selka-email-campaign-row__detail {
    flex: 1 1 100%;
  }

  .selka-email-form-two-col {
    flex-direction: column;
  }

  .selka-email-inbox-preview {
    flex: 1 1 auto;
    max-width: 100%;
  }

  .selka-email-notif-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .selka-email-modal-split,
  .selka-email-preview-modal__split {
    flex-direction: column;
  }

  .selka-email-modal-split__preview {
    flex: 1 1 auto;
    width: 100%;
  }

  .selka-email-preview-modal__sidebar,
  .selka-email-modal-split__sidebar {
    width: 100%;
    flex: 1 1 auto;
  }
}

@media (max-width: 768px) {
  .selka-email-notif-grid {
    grid-template-columns: 1fr;
  }

  .selka-email-campaign-row__stats {
    flex-wrap: wrap;
  }

  .selka-email-template-picker__layout {
    flex-direction: column;
  }

  .selka-email-template-picker__sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(129, 144, 174, 0.08);
  }
}

/* ===== Dashboard (Figma frame 660:2539) ===== */

.selka-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

/* ------- Hero card (dark) ------- */

.selka-hero {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 20px;
  background: var(--black-100);
  border: 1px solid var(--metal-28);
  border-radius: 20px;
  color: var(--white-100);
  box-sizing: border-box;
}

.selka-hero__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.selka-hero__greeting {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-hero__title {
  margin: 0;
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  color: var(--white-100);
}

.selka-hero__subtitle {
  margin: 0;
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: var(--metal-100);
}

.selka-hero__date {
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: var(--white-100);
  white-space: nowrap;
  text-align: right;
}

/* ------- 6-tile order grid ------- */

.selka-tile-grid {
  display: flex;
  gap: 16px;
  width: 100%;
}

.selka-tile {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border-radius: 12px;
  box-sizing: border-box;
}

.selka-tile--active {
  background: rgba(0, 81, 243, 0.20);
  border: 1px solid var(--energy-100);
}

.selka-tile--muted {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.selka-tile__header {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
}

.selka-tile__label {
  flex: 1 1 0;
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: var(--white-100);
}

.selka-tile__alert {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.selka-tile__count {
  font-family: var(--font-inter), "Inter", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  color: var(--white-100);
  width: 100%;
}

/* ------- Generic card (white) ------- */

.selka-card {
  background: var(--white-100);
  border: 1px solid var(--metal-12);
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  padding: 20px;
  box-sizing: border-box;
  overflow: hidden;
}

.selka-card__body {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.selka-card__info {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-card__label {
  margin: 0;
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: var(--metal-100);
}

.selka-card__amount {
  margin: 0;
  font-family: var(--font-inter), "Inter", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: normal;
  color: var(--energy-100);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.selka-card__amount--sync {
  font-size: 20px;
}

/* ------- Growth pill ------- */

.selka-growth {
  display: flex;
  align-items: center;
  gap: 8px;
}

.selka-growth__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  background: #e3f1e3;
  color: var(--success-100);
  border-radius: 100px;
  font-family: var(--font-inter), "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
}

.selka-growth__detail {
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: var(--metal-100);
}

/* ------- Period switcher ------- */

.selka-period-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--metal-8);
  border-radius: 12px;
  padding: 0;
  gap: 0;
}

.selka-period-switcher__btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: normal;
  color: var(--energy-100);
  cursor: pointer;
  border-radius: 12px;
}

.selka-period-switcher__btn--active {
  background: var(--energy-100);
  color: var(--white-100);
  font-weight: 600;
}

.selka-card__period-only {
  align-self: flex-end;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

/* ------- Omzet card with chart ------- */

.selka-card--omzet {
  flex: 0 0 auto;
  width: 785px;
  max-width: 100%;
}

.selka-card__chart {
  flex: 0 0 auto;
  width: 509px;
  max-width: 100%;
  height: 168px;
}

.selka-revenue-chart {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.selka-revenue-chart__plot {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

/* Callout pill — Figma 812:214. Pill at `left:405 top:55` with
   8px horizontal padding and 2px vertical padding. */
.selka-revenue-chart__callout {
  position: absolute;
  top: 55px;
  left: 405px;
  background: var(--energy-100);
  color: var(--white-100);
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-inter), "Inter", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

/* ------- Pengunjung card ------- */

.selka-card--pengunjung {
  flex: 1 1 0;
  min-width: 0;
}

.selka-card--pengunjung .selka-card__body {
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

/* ------- Stock sync card ------- */

.selka-card--sync {
  flex: 1 1 0;
  min-width: 0;
}

.selka-card__body--sync {
  height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.selka-feed {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--metal-8);
  border-radius: 12px;
  width: 100%;
}

.selka-feed__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.selka-feed__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.selka-feed__detail {
  margin: 0;
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: var(--energy-100);
}

.selka-feed__timestamp {
  margin: 0;
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: normal;
  color: var(--metal-100);
}

/* ------- Pelanggan card ------- */

.selka-card--pelanggan {
  flex: 1 1 0;
  min-width: 0;
}

.selka-card__body--pelanggan {
  height: 100%;
  align-items: center;
}

.selka-card__info--pelanggan {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}

.selka-segments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-segment {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.selka-segment__bar {
  width: 8px;
  height: 48px;
  border-radius: 24px;
  flex-shrink: 0;
}

.selka-segment__bar--energy {
  background: var(--energy-100);
}

.selka-segment__bar--yellow {
  background: #f3d643;
}

.selka-segment__info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.selka-segment__title {
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: var(--dark-metal-100);
}

.selka-segment__pct {
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: var(--metal-100);
}

.selka-card__donut {
  width: 168px;
  height: 168px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selka-donut {
  width: 168px;
  height: 168px;
}

/* ------- Ulasan card ------- */

.selka-card--ulasan {
  flex: 1 1 0;
  min-width: 0;
}

.selka-card__body--ulasan {
  height: 100%;
  flex-direction: column;
}

.selka-ulasan {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: auto;
}

.selka-review-indicator {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  display: block;
}

.selka-ulasan__info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.selka-ulasan__rating {
  font-family: var(--font-inter), "Inter", system-ui, sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: normal;
  color: var(--energy-100);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.selka-ulasan__count {
  font-family: var(--font-dm-sans), "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: var(--metal-100);
}

/* ------- Dashboard rows ------- */

.selka-dashboard__row {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

.selka-dashboard__row--performance {
  align-items: stretch;
}

.selka-dashboard__row--performance .selka-card {
  height: 208px;
}

.selka-dashboard__row--insights .selka-card {
  height: 208px;
}

/* ------- Skeleton ------- */

.selka-skel {
  background: var(--metal-12);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}

.selka-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: selka-skel-shimmer 1.4s infinite;
}

@keyframes selka-skel-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.selka-skel--hero { height: 188px; }
.selka-skel--card { height: 208px; }

/* ------- Screen reader only utility ------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------- Responsive ------- */

@media (max-width: 1100px) {
  .selka-dashboard__row--performance {
    flex-direction: column;
  }
  .selka-card--omzet {
    width: 100%;
  }
  .selka-card--omzet .selka-card__body {
    flex-direction: column;
  }
  .selka-card__chart {
    width: 100%;
    height: 220px;
  }
  .selka-dashboard__row--insights {
    flex-direction: column;
  }
}

@media (max-width: 720px) {
  .selka-tile-grid {
    flex-wrap: wrap;
  }
  .selka-tile {
    flex: 1 1 calc(50% - 8px);
    min-width: calc(50% - 8px);
  }
}

/* ===== AWB Print Modal ===== */

.selka-awb-print-modal {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: min(820px, 100%);
  padding: 24px;
  border-radius: 24px;
  background: #fff;
}

.selka-modal--awb-print .selka-modal__panel {
  overflow-x: hidden;
}

.selka-awb-print-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selka-awb-print-modal__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-awb-print-modal__close {
  color: #8190ae;
}

.selka-awb-print-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-awb-print-modal__loading,
.selka-awb-print-modal__error,
.selka-awb-print-modal__empty {
  padding: 32px 16px;
  text-align: center;
  color: #8190ae;
  font-size: 14px;
}

.selka-awb-print-modal__label {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* AWB Label Styles */

.awb-label {
  width: 100mm;
  max-width: 100%;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}

.awb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.awb-sender-name {
  font-weight: 700;
  font-size: 14px;
  color: #0f2144;
}

.awb-sender-address {
  font-size: 11px;
  color: #555;
  margin-top: 2px;
}

.awb-courier-badge {
  background: #0f2144;
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 4px;
}

.awb-recipient {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.awb-recipient-name {
  font-weight: 700;
  font-size: 13px;
  color: #0f2144;
}

.awb-recipient-address {
  font-size: 11px;
  color: #333;
}

.awb-recipient-phone {
  font-size: 11px;
  color: #555;
}

.awb-barcode-section {
  display: flex;
  align-items: center;
  gap: 12px;
}

.awb-tracking {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: #0f2144;
  margin-top: 4px;
}

.awb-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
  font-size: 11px;
}

.awb-order-id {
  font-weight: 600;
  color: #0f2144;
}

.awb-eta {
  color: #555;
}

.selka-awb-label__print-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: #0051f3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.selka-awb-label__print-btn:hover {
  background: #003fbd;
}

/* Settings Page */

.selka-settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(129, 144, 174, 0.45) transparent;
}

.selka-settings__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selka-settings__head-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-settings__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: #0f2144;
}

.selka-settings__subtitle {
  margin: 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-settings__btn-save {
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: #0051f3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.selka-settings__btn-save:hover:not(:disabled) {
  background: #003fbd;
}

.selka-settings__btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.selka-settings__body {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.selka-settings__section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--metal-12, #e8e8e8);
}

.selka-settings__section-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f2144;
}

.selka-settings__section-desc {
  margin: 0;
  font-size: 13px;
  color: #8190ae;
}

.selka-settings__form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.selka-settings__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.selka-settings__field--full {
  grid-column: 1 / -1;
}

.selka-settings__label {
  font-size: 13px;
  font-weight: 500;
  color: #0f2144;
}

.selka-settings__input,
.selka-settings__textarea {
  padding: 10px 12px;
  border: 1px solid var(--metal-12, #e8e8e8);
  border-radius: 10px;
  font-size: 14px;
  color: #0f2144;
  outline: none;
  transition: border-color 0.2s;
}

.selka-settings__input:focus,
.selka-settings__textarea:focus {
  border-color: #0051f3;
}

.selka-settings__courier-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selka-settings__courier-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--metal-12, #e8e8e8);
  border-radius: 10px;
  background: #fff;
  font-size: 13px;
  color: #0f2144;
  cursor: pointer;
  transition: all 0.2s;
}

.selka-settings__courier-chip:hover {
  border-color: #0051f3;
}

.selka-settings__courier-chip--selected {
  border-color: #0051f3;
  background: rgba(0, 81, 243, 0.08);
}

.selka-settings__courier-name {
  font-weight: 500;
}


/* ===== Settings — Toggle ===== */

.selka-settings__toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selka-settings__toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  background: #e0e0e0;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  padding: 0;
  flex-shrink: 0;
}

.selka-settings__toggle--on {
  background: #0051f3;
  border-color: #0051f3;
}

.selka-settings__toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.selka-settings__toggle--on .selka-settings__toggle-knob {
  transform: translateX(20px);
}

.selka-settings__toggle-label {
  font-size: 13px;
  font-weight: 400;
  color: rgba(15, 33, 68, 0.6);
}

/* ===== Settings — Radio ===== */

.selka-settings__radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.selka-settings__radio {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: #0f2144;
}

.selka-settings__radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #c4c4c4;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  transition: border-color 0.2s;
  position: relative;
}

.selka-settings__radio input[type="radio"]:checked {
  border-color: #0051f3;
}

.selka-settings__radio input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0051f3;
}

.selka-settings__radio input[type="radio"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.selka-settings__radio:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Settings — Field Hint ===== */

.selka-settings__field-hint {
  font-size: 12px;
  font-weight: 400;
  color: rgba(15, 33, 68, 0.45);
  margin-top: 4px;
}
/* ===== Arrange Shipment Modal — Courier Step ===== */

.selka-arrange-shipment-modal__courier-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
}

.selka-arrange-shipment-modal__courier-loading,
.selka-arrange-shipment-modal__courier-error,
.selka-arrange-shipment-modal__courier-empty {
  padding: 32px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-arrange-shipment-modal__courier-skeleton {
  height: 48px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.selka-arrange-shipment-modal__courier-loading-text {
  color: #8190ae;
  font-size: 14px;
}

.selka-arrange-shipment-modal__courier-error-text {
  color: #e53935;
  font-size: 14px;
  font-weight: 500;
}

.selka-arrange-shipment-modal__courier-error-hint {
  color: #8190ae;
  font-size: 13px;
}

.selka-arrange-shipment-modal__courier-empty-text {
  color: #8190ae;
  font-size: 14px;
}

.selka-arrange-shipment-modal__courier-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-arrange-shipment-modal__courier-group-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8190ae;
}

.selka-arrange-shipment-modal__courier-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-arrange-shipment-modal__courier-option {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--metal-12, #e8e8e8);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: left;
}

.selka-arrange-shipment-modal__courier-option:hover {
  border-color: #0051f3;
  background: rgba(0, 81, 243, 0.04);
}

.selka-arrange-shipment-modal__courier-option--selected {
  border-color: #0051f3;
  background: rgba(0, 81, 243, 0.08);
}

.selka-arrange-shipment-modal__courier-option-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.selka-arrange-shipment-modal__courier-option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.selka-arrange-shipment-modal__courier-option-name {
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-arrange-shipment-modal__courier-option-duration {
  font-size: 12px;
  color: #8190ae;
}

.selka-arrange-shipment-modal__courier-option-price {
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

/* ===== Checkout Courier Picker ===== */

.selka-checkout-courier__loading,
.selka-checkout-courier__error,
.selka-checkout-courier__empty {
  padding: 24px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-checkout-courier__skeleton {
  height: 48px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

.selka-checkout-courier__loading-text,
.selka-checkout-courier__error-text,
.selka-checkout-courier__empty-text {
  color: #8190ae;
  font-size: 14px;
}

.selka-checkout-courier__retry-btn {
  padding: 8px 16px;
  border: 1px solid #0051f3;
  border-radius: 8px;
  background: transparent;
  color: #0051f3;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.selka-checkout-courier__title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-checkout-courier__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.selka-checkout-courier__group-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8190ae;
}

.selka-checkout-courier__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.selka-checkout-courier__option {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--metal-12, #e8e8e8);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: left;
}

.selka-checkout-courier__option:hover {
  border-color: #0051f3;
}

.selka-checkout-courier__option--selected {
  border-color: #0051f3;
  background: rgba(0, 81, 243, 0.08);
}

.selka-checkout-courier__option-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.selka-checkout-courier__option-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.selka-checkout-courier__option-name {
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-checkout-courier__option-duration {
  font-size: 12px;
  color: #8190ae;
}

.selka-checkout-courier__option-price {
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

/* ===== Order Tracking Page ===== */

.selka-order-tracking {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.selka-order-tracking__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.selka-order-tracking__header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.selka-order-tracking__status-icon {
  font-size: 32px;
}

.selka-order-tracking__title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #0f2144;
}

.selka-order-tracking__order-id {
  margin: 2px 0 0;
  font-size: 13px;
  color: #8190ae;
}

.selka-order-tracking__delivered-badge {
  padding: 4px 12px;
  background: #e8f5e9;
  color: #2e7d32;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
}

.selka-order-tracking__courier-info {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-order-tracking__courier-row {
  display: flex;
  justify-content: space-between;
}

.selka-order-tracking__courier-label {
  font-size: 13px;
  color: #8190ae;
}

.selka-order-tracking__courier-value {
  font-size: 13px;
  font-weight: 500;
  color: #0f2144;
}

.selka-order-tracking__courier-value--tracking {
  letter-spacing: 0.5px;
}

.selka-order-tracking__courier-link {
  font-size: 13px;
  color: #0051f3;
  text-decoration: none;
}

.selka-order-tracking__courier-link:hover {
  text-decoration: underline;
}

.selka-order-tracking__timeline {
  display: flex;
  flex-direction: column;
}

.selka-order-tracking__timeline-item {
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
}

.selka-order-tracking__timeline-item--active .selka-order-tracking__timeline-title {
  font-weight: 600;
  color: #0051f3;
}

.selka-order-tracking__timeline-time {
  min-width: 80px;
  text-align: right;
}

.selka-order-tracking__timeline-date {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-order-tracking__timeline-clock {
  margin: 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-order-tracking__timeline-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20px;
}

.selka-order-tracking__timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8190ae;
}

.selka-order-tracking__timeline-item--active .selka-order-tracking__timeline-dot {
  background: #0051f3;
}

.selka-order-tracking__timeline-copy {
  flex: 1;
}

.selka-order-tracking__timeline-title {
  margin: 0;
  font-size: 14px;
  color: #0f2144;
}

.selka-order-tracking__timeline-desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: #8190ae;
}

.selka-order-tracking__loading,
.selka-order-tracking__error,
.selka-order-tracking__empty {
  padding: 48px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.selka-order-tracking__skeleton {
  width: 100%;
  height: 48px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

.selka-order-tracking__loading-text {
  color: #8190ae;
  font-size: 14px;
}

.selka-order-tracking__error-title,
.selka-order-tracking__empty-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f2144;
}

.selka-order-tracking__error-text,
.selka-order-tracking__empty-text {
  margin: 0;
  font-size: 14px;
  color: #8190ae;
}

/* Storefront CMS — shared modal */
.selka-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.selka-modal-backdrop > .selka-modal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.selka-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 0;
  flex-shrink: 0;
}

.selka-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.selka-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px 24px;
  flex-shrink: 0;
}

.selka-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 0;
}

.selka-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0f2144;
}

.selka-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #8190ae;
}

.selka-modal__close:hover {
  background: rgba(129, 144, 174, 0.08);
}

.selka-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.selka-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 24px 24px;
}

/* Storefront CMS — field */
.selka-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.selka-field__label {
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-field__input {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: #0f2144;
  outline: none;
}

.selka-field__input:focus {
  border-color: #0051f3;
  box-shadow: 0 0 0 3px rgba(0, 81, 243, 0.08);
}

.selka-field--toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* Storefront CMS — btn secondary */
.selka-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
  cursor: pointer;
  transition: background 0.15s;
}

.selka-btn-secondary:hover {
  background: #f7f8fa;
}

/* Storefront CMS — section layout */
.selka-homepage-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selka-section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f2144;
}

.selka-section-divider {
  margin: 8px 0;
  border: none;
  border-top: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-empty-text {
  margin: 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 32px 16px;
  border-radius: 16px;
  background: #f7f8fa;
  text-align: center;
}

.selka-empty-state p {
  margin: 0;
  font-size: 14px;
  color: #8190ae;
}

.selka-storefront-section-desc {
  margin: 0;
  font-size: 14px;
  color: #68748d;
}

/* Storefront CMS — icon button */
.selka-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #8190ae;
  transition: background 0.15s;
}

.selka-icon-btn:hover {
  background: rgba(129, 144, 174, 0.08);
}

.selka-icon-btn--danger:hover {
  background: rgba(198, 34, 37, 0.08);
  color: #c62225;
}

/* Storefront CMS — page title icon */
.selka-page-title__icon--metal {
  opacity: 0.4;
}

/* Storefront CMS — hero slides */
.selka-homepage-slides {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-homepage-slide-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  background: #fff;
}

.selka-homepage-slide-card--inactive {
  opacity: 0.5;
}

.selka-homepage-slide-card__preview {
  flex-shrink: 0;
  width: 80px;
  height: 56px;
  overflow: hidden;
  border-radius: 8px;
  background: #f7f8fa;
}

.selka-homepage-slide-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selka-homepage-slide-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.selka-homepage-slide-card__info {
  flex: 1;
  min-width: 0;
}

.selka-homepage-slide-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-homepage-slide-card__subtitle {
  margin: 2px 0 0;
  font-size: 13px;
  color: #68748d;
}

.selka-homepage-slide-card__meta {
  margin: 4px 0 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-homepage-slide-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Storefront CMS — picker grid */
.selka-homepage-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.selka-homepage-picker-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid rgba(129, 144, 174, 0.28);
  border-radius: 100px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  color: #0f2144;
  cursor: pointer;
  transition: all 0.15s;
}

.selka-homepage-picker-item:hover {
  border-color: #0051f3;
}

.selka-homepage-picker-item--selected {
  border-color: #0051f3;
  background: rgba(0, 81, 243, 0.08);
  color: #0051f3;
}

.selka-homepage-picker-item__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* Storefront CMS — collections grid */
.selka-storefront-collections-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-storefront-collection-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  background: #fff;
}

.selka-storefront-collection-card__banner {
  flex-shrink: 0;
  width: 120px;
  height: 68px;
  overflow: hidden;
  border-radius: 8px;
  background: #f7f8fa;
}

.selka-storefront-collection-card__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.selka-storefront-collection-card__banner-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  color: #8190ae;
}

.selka-storefront-collection-card__banner-empty span {
  font-size: 11px;
}

.selka-storefront-collection-card__info {
  flex: 1;
  min-width: 0;
}

.selka-storefront-collection-card__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-storefront-collection-card__headline {
  margin: 2px 0 0;
  font-size: 13px;
  color: #68748d;
}

.selka-storefront-collection-card__subtitle {
  margin: 2px 0 0;
  font-size: 12px;
  color: #8190ae;
}

/* Storefront CMS — banner preview in modal */
.selka-storefront-banner-preview {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
}

.selka-storefront-banner-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  object-fit: cover;
}

/* Storefront CMS — pages list */
.selka-pages-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.selka-page-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 16px;
  background: #fff;
}

.selka-page-card__info {
  flex: 1;
  min-width: 0;
}

.selka-page-card__title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #0f2144;
}

.selka-page-card__slug {
  margin: 2px 0 0;
  font-size: 12px;
  color: #8190ae;
}

.selka-page-card__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
}

.selka-page-card__badge--published {
  background: rgba(24, 143, 26, 0.12);
  color: #188f1a;
}

.selka-page-card__badge--draft {
  background: rgba(129, 144, 174, 0.12);
  color: #68748d;
}

.selka-page-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Storefront CMS — navigation */
.selka-nav-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.selka-nav-section__items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.selka-nav-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  border-radius: 12px;
  background: #fff;
}

.selka-nav-item-row__label {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #0f2144;
}

.selka-nav-item-row__href {
  font-size: 13px;
  color: #8190ae;
}

.selka-nav-item-row__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Hero slide — drag handle */
.selka-homepage-slide-card__drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: grab;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.selka-homepage-slide-card__drag-handle:hover {
  opacity: 0.8;
}

.selka-homepage-slide-card__drag-handle:active {
  cursor: grabbing;
}

/* Hero slide — drag states */
.selka-homepage-slide-card.selka-dragging {
  opacity: 0.4;
}

.selka-homepage-slide-card.selka-drag-over {
  border-color: #0051f3;
  box-shadow: 0 0 0 2px rgba(0, 81, 243, 0.12);
}

/* Hero slide — image preview in modal */
.selka-hero-slide-resolution {
  margin: 0 0 8px;
  font-size: 12px;
  color: #8190ae;
}

.selka-hero-slide-image-preview {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(129, 144, 174, 0.12);
  max-width: 100%;
}

.selka-hero-slide-image-preview img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 120px;
  object-fit: cover;
}

.selka-hero-slide-image-preview--mobile {
  max-width: 140px;
}

.selka-hero-slide-image-preview--mobile img {
  max-height: 160px;
  object-fit: cover;
  aspect-ratio: 750 / 1475;
  background: #f7f8fa;
}

.selka-hero-slide-image-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.selka-hero-slide-image-remove:hover {
  background: rgba(0, 0, 0, 0.7);
}