.fulfillment-timing {
  --fulfillment-accent: var(--primary-color, #ed7973);
  --fulfillment-accent-bg: #fff0ef;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
  color: #171b22;
  text-align: left;

  &__heading { margin: 0; font-size: 18px; font-weight: 650; line-height: 1.4; }
  &__methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
  &__method, &__option {
    appearance: none;
    border: 1.5px solid #cbd2dd;
    border-radius: 16px;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: border-color 0.15s, background 0.15s;
    &.is-selected { border-color: var(--fulfillment-accent); background: var(--fulfillment-accent-bg, #fff0ef); }
    &:focus-visible { outline: 2px solid var(--fulfillment-accent); outline-offset: 3px; }
    &:disabled { cursor: default; opacity: .6; }
    strong { font-size: 17px; line-height: 1.35; }
  }
  &__method { display: flex; flex-direction: column; gap: 6px; padding: 16px; }
  &__method-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
  &__icon { display: inline-flex; align-items: center; justify-content: center; background: #eef1f6; width: 42px; height: 42px; border-radius: 12px; font-size: 24px; flex: 0 0 auto; }
  &__radio { flex: 0 0 20px; width: 20px; height: 20px; border: 1.5px solid #aab8cd; border-radius: 50%; }
  .is-selected &__radio { border: 6px solid var(--fulfillment-accent); background: white; }
  &__hint { display: block; font-size: 14px; line-height: 1.5; color: #5b6577; margin: 0; }
  &__timing { display: flex; flex-direction: column; gap: 12px; }
  &__options { display: flex; flex-direction: column; gap: 10px; }
  &__option { display: flex; align-items: center; gap: 12px; padding: 16px; width: 100%; }
  &__option-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  &__badge { padding: 4px 10px; border-radius: 24px; background: #e7f4f0; color: #207758; font-size: 12px; font-weight: 600; }
  &__chevron { font-size: 28px; color: #8390a4; }
  &__loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 120px; color: #5b6577; }
  &__timezone { font-size: 13px; color: #5b6577; background: #f1f4f8; border-radius: 8px; padding: 10px 12px; margin: 0; }
  &__controls { border: 0; padding: 0; margin: 0; min-width: 0; }
  &__controls:disabled { pointer-events: none; opacity: .6; }
  &__empty { text-align: center; color: #5b6577; padding: 24px 8px; margin: 0; }
  &__manual-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; label { display: flex; flex-direction: column; gap: 8px; min-width: 0; } }
  &__modal .ant-modal-body { overflow-y: auto; max-height: 70dvh; }
  &--mobile { gap: 12px; .fulfillment-timing__methods { gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .fulfillment-timing__method { padding: 12px; } }
  &--pos { margin-bottom: 0; .fulfillment-timing__heading { font-size: 16px; } .fulfillment-timing__method { padding: 12px; } }
  &--compact {
    gap: 8px;
    margin-bottom: 12px;

    .fulfillment-timing__heading { font-size: 16px; }
    .fulfillment-timing__methods { gap: 8px; }
    .fulfillment-timing__method {
      min-height: 44px;
      padding: 10px 12px;
      border-radius: 12px;
      strong { font-size: 16px; }
    }
    .fulfillment-timing__timing,
    .fulfillment-timing__options { gap: 8px; }
    .fulfillment-timing__option {
      min-height: 56px;
      padding: 10px 12px;
      gap: 8px;
      border-radius: 12px;
      strong { font-size: 15px; }
    }
    .fulfillment-timing__option-text { gap: 2px; }
    .fulfillment-timing__hint { font-size: 13px; line-height: 1.35; }
    .fulfillment-timing__icon { width: 32px; height: 32px; border-radius: 10px; font-size: 20px; }
    .fulfillment-timing__badge { padding: 3px 8px; }
    .fulfillment-timing__chevron { font-size: 22px; }
  }
}

.pisell-lowcode-modal-root .fulfillment-timing-picker-modal .pisell-lowcode-modal-footer {
  justify-content: flex-end;
}

.fulfillment-timing-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  .event-booking-availability-calendar { width: 100%; }
  .event-booking-availability-calendar .open-card { box-shadow: none; }
  .time-resource-selector { margin-top: 16px; }
}

.fulfillment-timing-picker .week-item-content {
  > .ant-space,
  > .pisell-lowcode-space {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;

    > .ant-space-item,
    > .pisell-lowcode-space-item {
      flex: 1 1 0;
      min-width: 0;
    }
  }

  .calendar-date-item,
  .day-item-calendar-content {
    width: 100%;
    min-width: 0;
  }
}