:root {

  /**
  * Layout colors
  */
  /* Body */
  --olena-food-ordering-color-base: var(--ofo-color-base, #FFFFFF);
  --olena-food-ordering-color-contrast: var(--ofo-color-contrast, #1A2024);
  --olena-food-ordering-color-accent-1-50: var(--ofo-color-accent-1-50, rgba(46, 125, 50, 0.1));
  --olena-food-ordering-color-accent-1: var(--ofo-color-accent-1, #2E7D32);
  --olena-food-ordering-color-accent-2: var(--ofo-color-accent-2, #e53e3e);
  --olena-food-ordering-color-accent-3: var(--ofo-color-accent-3, #FFB800);

  /* Gray colors */
  --olena-food-ordering-color-gray-50: var(--ofo-color-gray-50, #F5F7F9);
  --olena-food-ordering-color-gray-100: var(--ofo-color-gray-100, #E0E0E0);
  --olena-food-ordering-color-gray-150: var(--ofo-color-gray-150, rgba(0, 0, 0, 0.05));
  --olena-food-ordering-color-gray-200: var(--ofo-color-gray-200, #6b7280);
  --olena-food-ordering-color-gray-250: var(--ofo-color-gray-250, #4A5056);

  /*
  * Statuses colors
  */
  /* Success */
  --olena-food-ordering-color-success-100: var(--ofo-color-success-100, #F0FDF4);
  --olena-food-ordering-color-success-200: var(--ofo-color-success-200, #22C55E);

  /* Warning */
  --olena-food-ordering-color-warning-200: var(--ofo-color-warning-200, #FFA000);

  /* Error */
  --olena-food-ordering-color-error-100: var(--ofo-color-error-100, #FEE2E2);
  --olena-food-ordering-color-error-200: var(--ofo-color-error-200, #EF4444);
}

.olena-food-ordering-add-ons-wrapper {
  background-color: var(--olena-food-ordering-color-gray-50);

  & .error-message {
    background-color: var(--olena-food-ordering-color-error-100);
    border: 1px solid var(--olena-food-ordering-color-error-200);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  & .error-icon {
    width: 20px;
    height: 20px;
    fill: var(--olena-food-ordering-color-error-200);
  }

  & .error-text {
    color: var(--olena-food-ordering-color-error-200);
    font-size: 0.95rem;
    font-weight: 500;
  }

  .header {
    background-color: var(--olena-food-ordering-color-accent-1);
    color: var(--olena-food-ordering-color-base);
    padding: 1rem 2rem;
    margin: -20px -20px 20px -20px;
  }

  .admin-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
  }

  .page-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--olena-food-ordering-color-contrast);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .save-btn {
    background: var(--olena-food-ordering-color-accent-1);
    color: var(--olena-food-ordering-color-base);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s;
    font-size: 14px;
  }

  .save-btn:hover {
    background: var(--olena-food-ordering-color-accent-1);
  }

  .addons-section {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
    margin-top: 1rem;
  }

  /* Available Categories Column */
  .available-categories {
    background: var(--olena-food-ordering-color-base);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px var(--olena-food-ordering-color-gray-150);
  }

  .section-title {
    font-size: 1.2rem;
    color: var(--olena-food-ordering-color-contrast);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--olena-food-ordering-color-gray-50);
  }

  /* Drop Area Column */
  .drop-area {
    background: var(--olena-food-ordering-color-base);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 4px var(--olena-food-ordering-color-gray-150);
    min-height: 400px;
  }

  .empty-drop-area {
    border: 2px dashed var(--olena-food-ordering-color-gray-100);
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: var(--olena-food-ordering-color-gray-250);
    margin-top: 1rem;
  }

  /* Category Card */
  .category-card {
    background: var(--olena-food-ordering-color-base);
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 8px;
    margin-bottom: 1rem;
    // cursor: move;
    transition: all 0.3s ease;
  }

  .category-card:hover {
    border-color: var(--olena-food-ordering-color-accent-1);
    box-shadow: 0 2px 8px var(--olena-food-ordering-color-accent-1-50);
  }

  .category-header {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--olena-food-ordering-color-gray-50);
    border-radius: 8px 8px 0 0;
  }

  .category-title {
    font-weight: 500;
    color: var(--olena-food-ordering-color-contrast);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .drag-handle {
    color: var(--olena-food-ordering-color-gray-250);
    cursor: pointer;
    padding: 0.25rem;
    align-items: center;
    display: flex;
    background: transparent;
    border: none;
    outline: none;
  }

  .category-controls {
    display: flex;
    gap: 0.5rem;
  }

  .category-btn {
    background: none;
    border: none;
    color: var(--olena-food-ordering-color-gray-250);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s;
  }

  .category-btn:hover {
    background: var(--olena-food-ordering-color-gray-100);
  }

  /* Add-ons List */
  .addons-list {
    padding: 1rem;
  }

  .addon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--olena-food-ordering-color-base);
    transition: all 0.3s;
  }

  .addon-item:hover {
    border-color: var(--olena-food-ordering-color-accent-1);
    background: var(--olena-food-ordering-color-gray-50);
  }

  .addon-info {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .addon-info-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .addon-name {
    font-weight: 500;
  }

  .addon-price {
    color: var(--olena-food-ordering-color-accent-1);
    font-weight: 500;
  }

  .addon-actions {
    display: flex;
    gap: 0.5rem;
  }

  /* Dropzone Styles */
  .dropzone {
    border: 2px dashed var(--olena-food-ordering-color-gray-100);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    min-height: 200px;
    transition: all 0.3s;
  }

  .dropzone.active {
    border-color: var(--olena-food-ordering-color-accent-1);
    background: var(--olena-food-ordering-color-gray-150);
  }

  .required-badge {
    background: var(--olena-food-ordering-color-accent-3);
    color: var(--olena-food-ordering-color-base);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
  }

  .multiple-badge {
    background: var(--olena-food-ordering-color-accent-1);
    color: var(--olena-food-ordering-color-base);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
  }

  /* Addons */
  .dropped {
    margin-bottom: 1rem;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    box-shadow: 0 2px 4px var(--olena-food-ordering-color-gray-150);
  }

  .category-settings {
    padding: 1rem;
    background: var(--olena-food-ordering-color-gray-50);
    border-top: 1px solid var(--olena-food-ordering-color-gray-100);
  }

  .settings-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.75rem;
  }

  .settings-row:last-child {
    margin-bottom: 0;
  }

  .settings-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--olena-food-ordering-color-gray-250);
    font-size: 0.9rem;
  }

  .number-input {
    width: 60px;
    padding: 0.25rem;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 4px;
    text-align: center;
  }

  .remove-btn {
    background: none;
    border: none;
    color: var(--olena-food-ordering-color-accent-2);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 1.1rem;
    transition: all 0.2s;
  }

  .remove-btn:hover {
    background: var(--olena-food-ordering-color-error-100);
  }

  .drop-indicator {
    border: 2px dashed var(--olena-food-ordering-color-gray-100);
    border-radius: 6px;
    padding: 1rem;
    text-align: center;
    color: var(--olena-food-ordering-color-gray-250);
    margin-top: 1rem;
    background: var(--olena-food-ordering-color-gray-50);
    transition: all 0.3s;
  }

  .drop-indicator:hover {
    border-color: var(--olena-food-ordering-color-accent-1);
    background: var(--olena-food-ordering-color-gray-150);
  }

  input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--olena-food-ordering-color-accent-1);
  }

  .addon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--olena-food-ordering-color-base);
    transition: all 0.3s;
  }

  .addon-item:hover {
    border-color: var(--olena-food-ordering-color-accent-1);
    background: var(--olena-food-ordering-color-gray-50);
  }

  .addon-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .addon-limits {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .limit-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--olena-food-ordering-color-gray-250);
  }

  .limit-input {
    width: 50px;
    padding: 0.25rem;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 4px;
    text-align: center;
    font-size: 0.9rem;
  }

  .limit-input:focus {
    outline: none;
    border-color: var(--olena-food-ordering-color-accent-1);
    box-shadow: 0 0 0 2px var(--olena-food-ordering-color-accent-1-50);
  }

  .delete-addon-btn,
  .delete-addon-category-btn {
    background: none;
    border: none;
    color: var(--olena-food-ordering-color-accent-2);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .delete-addon-btn:hover,
  .delete-addon-category-btn:hover {
    background: var(--olena-food-ordering-color-error-100);
  }

  .addon-info {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-width: 200px;
  }

  .addon-name {
    font-weight: 500;
    color: var(--olena-food-ordering-color-contrast);
  }

  .addon-price {
    color: var(--olena-food-ordering-color-accent-1);
    font-weight: 500;
  }

  .category-settings {
    padding: 1rem;
    background: var(--olena-food-ordering-color-gray-50);
    border-top: 1px solid var(--olena-food-ordering-color-gray-100);
  }

  .addon-selector {
    position: relative;
  }

  .addon-select {
    width: 100%;
    padding: 0.4rem 1rem;
    border: 2px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--olena-food-ordering-color-contrast);
    background: var(--olena-food-ordering-color-base);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.3s ease;
    height: 44px;
  }

  .addon-select:hover {
    border-color: var(--olena-food-ordering-color-accent-1);
  }

  .addon-select:focus {
    outline: none;
    border-color: var(--olena-food-ordering-color-accent-1);
    box-shadow: 0 0 0 2px var(--olena-food-ordering-color-accent-1-50);
  }

  /* Custom dropdown arrow */
  .addon-selector::after {
    content: '▼';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--olena-food-ordering-color-gray-250);
    pointer-events: none;
    font-size: 0.8rem;
  }

  /* Styling the disabled option */
  .addon-select option[disabled] {
    color: var(--olena-food-ordering-color-gray-100);
  }

  /* Styling the options */
  .addon-select option:not([disabled]) {
    color: var(--olena-food-ordering-color-contrast);
    padding: 0.5rem;
  }

  /* Hover state for the select */
  .addon-selector:hover::after {
    color: var(--olena-food-ordering-color-accent-1);
  }

  /* Edit addon */
  .addon-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    background: var(--olena-food-ordering-color-base);
    transition: all 0.3s;
  }

  .addon-item:hover {
    border-color: var(--olena-food-ordering-color-accent-1);
    background: var(--olena-food-ordering-color-gray-50);
  }

  .addon-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .edit-addon-btn,
  .delete-addon-btn,
  .delete-addon-category-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .edit-addon-btn {
    color: var(--olena-food-ordering-color-accent-1);
  }

  .edit-addon-btn:hover {
    background: var(--olena-food-ordering-color-accent-1-50);
  }

  .delete-addon-btn,
  .delete-addon-category-btn {
    color: var(--olena-food-ordering-color-accent-2);
  }

  .delete-addon-btn:hover,
  .delete-addon-category-btn:hover {
    background: var(--olena-food-ordering-color-error-100);
  }

  .addon-info {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .addon-name {
    font-weight: 500;
    color: var(--olena-food-ordering-color-contrast);
  }

  .addon-price {
    color: var(--olena-food-ordering-color-accent-1);
    font-weight: 500;
  }

  .addon-item.editing {
    background: var(--olena-food-ordering-color-gray-50);
    border-color: var(--olena-food-ordering-color-accent-1);
  }

  .addon-input-group {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .addon-input {
    background: var(--olena-food-ordering-color-base);
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 0.95rem;
    transition: all 0.3s;
  }

  .addon-input:focus {
    outline: none;
    border-color: var(--olena-food-ordering-color-accent-1);
    box-shadow: 0 0 0 2px var(--olena-food-ordering-color-accent-1-50);
  }

  .name-input {
    width: 200px;
  }

  .price-input-group {
    position: relative;
    display: flex;
    align-items: center;
  }

  .currency-symbol {
    position: absolute;
    left: 0.5rem;
    color: var(--olena-food-ordering-color-gray-250);
  }

  .price-input {
    width: 100px;
    padding-left: 1.5rem;
  }

  /* Remove spinner buttons from number input */
  .price-input::-webkit-outer-spin-button,
  .price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .price-input[type=number] {
    -moz-appearance: textfield;
  }

  /* Save and Cancel buttons */
  .save-addon-btn,
  .cancel-addon-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .save-addon-btn {
    color: var(--olena-food-ordering-color-accent-1);
  }

  .save-addon-btn:hover {
    background: var(--olena-food-ordering-color-accent-1-50);
  }

  .cancel-addon-btn {
    color: var(--olena-food-ordering-color-accent-2);
  }

  .cancel-addon-btn:hover {
    background: var(--olena-food-ordering-color-error-100);
  }

  /* Placeholder styling */
  .addon-input::placeholder {
    color: var(--olena-food-ordering-color-gray-100);
  }

  /* Error state for inputs */
  .addon-input.error {
    border-color: var(--olena-food-ordering-color-accent-2);
    background: var(--olena-food-ordering-color-gray-50);
  }

  .addon-input.error:focus {
    box-shadow: 0 0 0 2px var(--olena-food-ordering-color-error-100);
  }

  /* Optional: Animation for entering edit mode */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .addon-item.editing .addon-input-group {
    animation: fadeIn 0.3s ease;
  }

  .categories-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--olena-food-ordering-color-gray-50);
  }

  .add-category-btn,
  .add-addon-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 2px dashed var(--olena-food-ordering-color-gray-100);
    padding: 0.75rem 1rem;
    width: 100%;
    border-radius: 6px;
    color: var(--olena-food-ordering-color-gray-250);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
  }

  .add-category-btn:hover,
  .add-addon-btn:hover {
    border-color: var(--olena-food-ordering-color-accent-1);
    color: var(--olena-food-ordering-color-accent-1);
  }

  .add-category-btn svg,
  .add-addon-btn svg {
    transition: all 0.3s;
  }

  .add-category-btn:hover svg,
  .add-addon-btn:hover svg {
    stroke: var(--olena-food-ordering-color-accent-1);
  }

  /* New Category Form */
  .new-category-form {
    background: var(--olena-food-ordering-color-base);
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 8px;
    box-shadow: 0 2px 8px var(--olena-food-ordering-color-gray-150);
  }

  .form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--olena-food-ordering-color-gray-50);
  }

  .form-header h3 {
    font-size: 1.1rem;
    color: var(--olena-food-ordering-color-contrast);
    margin: 0;
  }

  .close-form-btn {
    background: none;
    border: none;
    color: var(--olena-food-ordering-color-gray-250);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s;
  }

  .close-form-btn:hover {
    background: var(--olena-food-ordering-color-gray-50);
  }

  .form-fields {
    padding: 1rem;
  }

  .form-group {
    margin-bottom: 1rem;
  }

  .form-label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--olena-food-ordering-color-gray-250);
    font-size: 0.9rem;
    font-weight: 500;
  }

  .form-input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 4px;
    font-size: 0.95rem;
    transition: all 0.3s;
    height: 44px;
  }

  .form-input:focus {
    outline: none;
    border-color: var(--olena-food-ordering-color-accent-1);
    box-shadow: 0 0 0 2px var(--olena-food-ordering-color-accent-1-50);
  }

  .help-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--olena-food-ordering-color-gray-100);
  }

  .form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .cancel-btn {
    padding: 0.75rem 1rem;
    background: none;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 4px;
    color: var(--olena-food-ordering-color-gray-250);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
  }

  .cancel-btn:hover {
    background: var(--olena-food-ordering-color-gray-50);
  }

  .create-btn {
    padding: 0.75rem 1.5rem;
    background: var(--olena-food-ordering-color-accent-1);
    border: none;
    border-radius: 4px;
    color: var(--olena-food-ordering-color-base);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .create-btn:hover {
    background: var(--olena-food-ordering-color-accent-1);
  }

  /* Optional: Animation for form appearance */
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .new-category-form {
    animation: slideDown 0.3s ease;
  }

  .form-textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: all 0.3s;
  }

  .form-textarea:focus {
    outline: none;
    border-color: var(--olena-food-ordering-color-accent-1);
    box-shadow: 0 0 0 2px var(--olena-food-ordering-color-accent-1-50);
  }

  .price-input-wrapper {
    position: relative;
  }

  .currency-symbol {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--olena-food-ordering-color-gray-250);
    pointer-events: none;
  }

  .price-input {
    padding-left: 1.75rem !important;
  }

  /* Remove spinner buttons from number input */
  .price-input::-webkit-outer-spin-button,
  .price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .price-input[type=number] {
    -moz-appearance: textfield;
  }

  /* Placeholder styles */
  .form-textarea::placeholder {
    color: var(--olena-food-ordering-color-gray-100);
  }

  /* Focus styles for all form elements */
  .form-textarea:focus,
  .form-input:focus {
    outline: none;
    border-color: var(--olena-food-ordering-color-accent-1);
    box-shadow: 0 0 0 2px var(--olena-food-ordering-color-accent-1-50);
  }

  /* Optional: Style for disabled state */
  .form-input:disabled,
  .form-textarea:disabled {
    background-color: var(--olena-food-ordering-color-gray-50);
    cursor: not-allowed;
  }

  /* Optional: Error state */
  .form-input.error,
  .form-textarea.error {
    border-color: var(--olena-food-ordering-color-accent-2);
    background-color: var(--olena-food-ordering-color-gray-50);
  }

  .category-header {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--olena-food-ordering-color-gray-50);
    border-radius: 8px 8px 0 0;
    transition: all 0.3s;
  }

  .edit-btn {
    color: var(--olena-food-ordering-color-accent-1);
    transition: all 0.2s;
  }

  .edit-btn:hover {
    background: var(--olena-food-ordering-color-accent-1-50);
  }

  /* Edit State Styles */
  .category-header.editing {
    background: var(--olena-food-ordering-color-gray-50);
    border-bottom: 1px solid var(--olena-food-ordering-color-gray-100);
  }

  .category-edit-form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
  }

  .edit-input-group {
    flex: 1;
    display: flex;
    gap: 1rem;
  }

  .edit-field {
    flex: 1;
  }

  .edit-label {
    display: block;
    font-size: 0.8rem;
    color: var(--olena-food-ordering-color-gray-250);
    margin-bottom: 0.25rem;
  }

  .edit-input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--olena-food-ordering-color-gray-100);
    border-radius: 4px;
    font-size: 0.95rem;
    background: var(--olena-food-ordering-color-base);
    transition: all 0.3s;
  }

  .edit-input:focus {
    outline: none;
    border-color: var(--olena-food-ordering-color-accent-1);
    box-shadow: 0 0 0 2px var(--olena-food-ordering-color-accent-1-50);
  }

  .edit-actions {
    display: flex;
    gap: 0.5rem;
  }

  .save-edit-btn,
  .cancel-edit-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
  }

  .save-edit-btn {
    color: var(--olena-food-ordering-color-accent-1);
  }

  .save-edit-btn:hover {
    background: var(--olena-food-ordering-color-accent-1-50);
  }

  .cancel-edit-btn {
    color: var(--olena-food-ordering-color-accent-2);
  }

  .cancel-edit-btn:hover {
    background: var(--olena-food-ordering-color-error-100);
  }

  /* Optional: Animation for switching states */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-5px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .category-header.editing .category-edit-form {
    animation: fadeIn 0.3s ease;
  }

  /* Error state */
  .edit-input.error {
    border-color: var(--olena-food-ordering-color-accent-2);
    background: var(--olena-food-ordering-color-gray-50);
  }

  .edit-input.error:focus {
    box-shadow: 0 0 0 2px var(--olena-food-ordering-color-error-100);
  }

  /* Help text for errors */
  .edit-field {
    position: relative;
  }

  .error-message {
    font-size: 0.8rem;
    color: var(--olena-food-ordering-color-accent-2);
  }

  .addons-area {
    max-height: 300px;
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-track {
      background: var(--olena-food-ordering-color-gray-50);
    }

    &::-webkit-scrollbar-thumb {
      background: var(--olena-food-ordering-color-gray-200);
      border-radius: 3px;
    }

    /* For Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--olena-food-ordering-color-gray-200) var(--olena-food-ordering-color-gray-50);
  }
}