/**
 * Shared admin form controls — Metronic 8 ecommerce look.
 * Used by all admin forms via .admin-form (and product form layout CSS).
 *
 * Do not rely on arbitrary Tailwind utilities here: the admin loads a
 * prebuilt stylesheet, so missing classes silently do nothing.
 */

/* ---------------------------------------------------------------- shell */

.admin-form-card {
  width: 100%;
  max-width: 48rem;
}

.admin-form-card--wide {
  max-width: 56rem;
}

.admin-form-card--full {
  max-width: none;
}

.admin-form-card > form,
.admin-form-card .admin-form-body {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .admin-form-card > form,
  .admin-form-card .admin-form-body {
    padding: 2rem;
  }
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.admin-form-stack {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.admin-form-stack-sm {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .admin-form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-form-row-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-form-row-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .admin-form-row-lg-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-form-row-lg-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.admin-form-col-full {
  grid-column: 1 / -1;
}

[data-show-when][hidden] {
  display: none !important;
}

.admin-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.5rem;
  padding-top: 0.25rem;
}

.admin-form-actions--end {
  justify-content: flex-end;
}

.admin-form-actions--between {
  justify-content: space-between;
}

/* Nested admin-form inside a padded shell shouldn't re-apply outer gap twice visually —
   keep it as a normal stack for fields only. */

/* --------------------------------------------------------------- field */

.admin-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.admin-form .kt-form-label,
.admin-form-field .kt-form-label,
.admin-product-form .kt-form-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: auto;
  margin-bottom: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25;
  color: #252f4a;
}

.admin-form-hint {
  margin-top: 0.25rem;
  font-size: 0.7125rem;
  line-height: 1.4;
  color: #99a1b7;
}

.admin-form-field > .admin-form-hint,
.admin-form-field > .admin-form-error {
  margin-top: 0;
}

.admin-form-error {
  margin-top: 0.25rem;
  font-size: 0.7125rem;
  line-height: 1.4;
  color: #f8285a;
}

/* ------------------------------------------------------------- controls */

.admin-form input.kt-input,
.admin-form select.kt-select,
.admin-form textarea.kt-input:not([data-tinymce]),
.admin-form-card input.kt-input,
.admin-form-card select.kt-select,
.admin-form-card textarea.kt-input:not([data-tinymce]),
.admin-product-form input.kt-input,
.admin-product-form select.kt-select,
.admin-product-form textarea.kt-input:not([data-tinymce]) {
  display: block !important;
  width: 100%;
  height: 40px;
  padding: 0.575rem 0.75rem;
  font-size: 0.825rem;
  font-weight: 400;
  line-height: 1.5;
  color: #4b5675;
  background-color: #ffffff;
  border: 1px solid #dbdfe9;
  border-radius: 0.475rem;
  box-shadow: none !important;
  outline: none;
  transition: border-color 0.15s ease;
}

.admin-form select.kt-select,
.admin-form-card select.kt-select,
.admin-product-form select.kt-select {
  appearance: none;
  padding-inline-end: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2399a1b7' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 16px;
}

[dir='rtl'] .admin-form select.kt-select,
[dir='rtl'] .admin-form-card select.kt-select,
[dir='rtl'] .admin-product-form select.kt-select {
  background-position: left 0.75rem center;
}

.admin-form textarea.kt-input,
.admin-form-card textarea.kt-input,
.admin-product-form textarea.kt-input {
  height: auto;
  min-height: 120px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  resize: vertical;
}

.admin-form input.kt-input:focus,
.admin-form select.kt-select:focus,
.admin-form textarea.kt-input:focus,
.admin-form-card input.kt-input:focus,
.admin-form-card select.kt-select:focus,
.admin-form-card textarea.kt-input:focus,
.admin-product-form input.kt-input:focus,
.admin-product-form select.kt-select:focus,
.admin-product-form textarea.kt-input:focus {
  border-color: #93c5fd;
  box-shadow: none !important;
}

.admin-form input.kt-input::placeholder,
.admin-form textarea.kt-input::placeholder,
.admin-form-card input.kt-input::placeholder,
.admin-form-card textarea.kt-input::placeholder,
.admin-product-form input.kt-input::placeholder,
.admin-product-form textarea.kt-input::placeholder {
  color: #a1a5b7;
  opacity: 1;
}

.admin-form input.kt-input.is-invalid,
.admin-form select.kt-select.is-invalid,
.admin-form textarea.kt-input.is-invalid,
.admin-form input.kt-input[aria-invalid='true'],
.admin-form-card input.kt-input.is-invalid,
.admin-form-card select.kt-select.is-invalid,
.admin-form-card textarea.kt-input.is-invalid,
.admin-product-form input.kt-input.is-invalid,
.admin-product-form select.kt-select.is-invalid,
.admin-product-form textarea.kt-input.is-invalid {
  border-color: #f8285a !important;
}

.admin-form input.kt-input.is-invalid:focus,
.admin-form select.kt-select.is-invalid:focus,
.admin-form textarea.kt-input.is-invalid:focus,
.admin-form-card input.kt-input.is-invalid:focus,
.admin-form-card select.kt-select.is-invalid:focus,
.admin-form-card textarea.kt-input.is-invalid:focus,
.admin-product-form input.kt-input.is-invalid:focus,
.admin-product-form select.kt-select.is-invalid:focus,
.admin-product-form textarea.kt-input.is-invalid:focus {
  border-color: #f8285a !important;
  box-shadow: 0 0 0 3px rgba(248, 40, 90, 0.12) !important;
}

/* Password toggle wrapper stays flex (Metronic pattern) */
.admin-form .kt-input[data-kt-toggle-password],
.admin-form-card .kt-input[data-kt-toggle-password] {
  display: flex !important;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 0.35rem 0 0.75rem;
  border: 1px solid #dbdfe9;
  border-radius: 0.475rem;
  background: #ffffff;
  box-shadow: none !important;
}

.admin-form .kt-input[data-kt-toggle-password]:focus-within,
.admin-form-card .kt-input[data-kt-toggle-password]:focus-within {
  border-color: #93c5fd;
}

.admin-form .kt-input[data-kt-toggle-password] > input,
.admin-form-card .kt-input[data-kt-toggle-password] > input {
  display: block !important;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  border: 0 !important;
  box-shadow: none !important;
  outline: none;
  background: transparent;
  padding: 0;
  font-size: 0.825rem;
  color: #4b5675;
}

.admin-form .kt-input[data-kt-toggle-password].is-invalid,
.admin-form-card .kt-input[data-kt-toggle-password].is-invalid {
  border-color: #f8285a;
}

/* Compact inputs inside tables / PO lines */
.admin-form input.kt-input.kt-input-sm,
.admin-form-card input.kt-input.kt-input-sm {
  height: 34px;
  padding: 0.35rem 0.6rem;
  font-size: 0.775rem;
}

/* Checkbox / switch field label spacing */
.admin-form-field .kt-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.825rem;
  color: #4b5675;
  cursor: pointer;
}

/* -------------------------------------------------------------- alerts */

.admin-form-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: 0.475rem;
  border: 1px solid transparent;
  font-size: 0.825rem;
  line-height: 1.45;
}

.admin-form-body > .admin-form-alert,
.admin-form > .admin-form-alert,
.kt-card-content > .admin-form-alert {
  margin-bottom: 0.25rem;
}

.admin-form-alert > i {
  margin-top: 0.1rem;
  font-size: 1.1rem;
  line-height: 1;
}

.admin-form-alert--success {
  color: #17c653;
  background: rgba(23, 198, 83, 0.08);
  border-color: rgba(23, 198, 83, 0.25);
}

.admin-form-alert--error {
  color: #f8285a;
  background: rgba(248, 40, 90, 0.08);
  border-color: rgba(248, 40, 90, 0.25);
}

.admin-form-alert--info {
  color: #1b84ff;
  background: rgba(27, 132, 255, 0.08);
  border-color: rgba(27, 132, 255, 0.28);
}

.admin-form-alert--info .admin-form-alert__body {
  color: #4b5675;
}

.admin-form-alert--info .admin-form-alert__title {
  color: #1b84ff;
}

.admin-form-alert--info strong {
  color: #071437;
}

.admin-form-alert--info code {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  background: rgba(27, 132, 255, 0.12);
  color: #056ee9;
  font-size: 0.75rem;
}

.admin-form-alert--info a:not(.kt-btn) {
  color: #1b84ff;
  font-weight: 500;
  text-decoration: none;
}

.admin-form-alert--info a:not(.kt-btn):hover {
  text-decoration: underline;
}

/* Buttons inside Information boxes — always readable (white on primary). */
.admin-form-alert .kt-btn,
.admin-form-alert .kt-btn-primary,
.admin-form-alert a.kt-btn,
.admin-form-alert a.kt-btn-primary,
.admin-form-alert button.kt-btn {
  color: #ffffff !important;
  background-color: #1b84ff !important;
  border-color: #1b84ff !important;
  text-decoration: none !important;
}

.admin-form-alert .kt-btn:hover,
.admin-form-alert .kt-btn-primary:hover,
.admin-form-alert a.kt-btn:hover,
.admin-form-alert a.kt-btn-primary:hover,
.admin-form-alert button.kt-btn:hover {
  color: #ffffff !important;
  background-color: #056ee9 !important;
  border-color: #056ee9 !important;
  text-decoration: none !important;
}

.admin-form-alert .kt-btn i,
.admin-form-alert .kt-btn-primary i {
  color: #ffffff !important;
}

.admin-form-alert .admin-form-vars__list {
  margin-top: 0.75rem;
}

.admin-form-alert .admin-form-vars__chip {
  border-color: rgba(27, 132, 255, 0.28);
  background: rgba(27, 132, 255, 0.08);
  color: #056ee9;
}

.admin-form-alert--neutral {
  color: #4b5675;
  background: #f9f9f9;
  border-color: #f1f1f4;
}

.admin-form-alert--neutral .admin-form-alert__title {
  color: #071437;
}

.admin-form-alert__body {
  flex: 1;
  min-width: 0;
}

.admin-form-alert__body > p {
  margin: 0;
}

.admin-form-alert__body > p + p,
.admin-form-alert__body > p + ul,
.admin-form-alert__body > ul + p {
  margin-top: 0.5rem;
}

.admin-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.2;
}

.admin-status-pill--ok {
  color: #17c653;
  background: rgba(23, 198, 83, 0.12);
}

.admin-status-pill--warn {
  color: #f6c000;
  background: rgba(246, 192, 0, 0.14);
}

.admin-form-alert__title {
  margin: 0 0 0.35rem;
  font-weight: 600;
}

.admin-form-alert ul {
  margin: 0;
  padding-inline-start: 1.1rem;
}

.admin-form-alert li + li {
  margin-top: 0.15rem;
}

.admin-return-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.admin-return-layout__main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

@media (min-width: 1200px) {
  .admin-return-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .admin-return-layout__main {
    flex: 1 1 auto;
  }

  .admin-return-layout > .admin-form-card {
    width: 320px;
    flex: 0 0 320px;
    max-width: 320px;
  }
}

/* Homepage hero banner preview (wide, not square avatar) */

.admin-hero-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 1;
  min-height: 140px;
  max-height: 220px;
  margin-top: 0.25rem;
  border-radius: 0.475rem;
  background-color: #f5f8fa;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid #dbdfe9;
  overflow: hidden;
}

.admin-hero-image__preview {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.admin-hero-image__empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: #7e8299;
  font-size: 0.8125rem;
  pointer-events: none;
}

.admin-hero-image.has-image .admin-hero-image__empty {
  display: none;
}

.admin-hero-image__empty > i {
  font-size: 1.5rem;
  color: #a1a5b7;
}

.admin-hero-image__empty-hint {
  font-size: 0.6875rem;
  color: #a1a5b7;
}

.admin-hero-image__action {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
  border-radius: 9999px;
  border: 0;
  background: #ffffff;
  box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.08);
  color: #3e97ff;
}

.admin-hero-image__action:hover {
  color: #2884ef;
}

.admin-hero-image__action input[type='file'] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.admin-hero-image__remove {
  display: none;
  top: 3rem;
  color: #99a1b7;
}

.admin-hero-image.has-image .admin-hero-image__remove,
.admin-hero-image.is-changed.has-image .admin-hero-image__remove {
  display: inline-flex;
}

.admin-hero-image.is-changed:not(.has-image) .admin-hero-image__remove {
  display: none;
}

/* Safety: native inputs must stay block — some theme builds set .kt-input { display:flex } */
input.kt-input,
textarea.kt-input:not([data-tinymce]) {
  display: block !important;
  width: 100%;
}

/* TinyMCE keeps a synced textarea — hide it so only the editor shows */
textarea.kt-input[data-tinymce] {
  display: none !important;
}

/* TinyMCE fills the form column and matches kt-input radius */
.admin-form .tox-tinymce,
.admin-form-card .tox-tinymce {
  width: 100% !important;
  border-radius: 0.475rem;
  border-color: #dbdfe9 !important;
}

.admin-form .tox-tinymce:focus-within,
.admin-form-card .tox-tinymce:focus-within {
  border-color: #93c5fd !important;
}

/* Logo / favicon previews — show full mark without cropping */
.kt-image-input.kt-image-input--contain .kt-image-input-placeholder,
.kt-image-input.kt-image-input--contain .kt-image-input-preview {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #ffffff;
}

/* Email template variable chips (admin settings) */
.admin-form-vars {
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .admin-form-vars {
    padding: 2rem;
  }
}

.admin-form-vars__intro {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #78829d;
}

.admin-form-vars__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.admin-form-vars__chip {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  line-height: 1.25;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid #e1e3ea;
  background: #f5f6f8;
  color: #252f4a;
}

/**
 * Admin shell layout
 * Sidebar is position:fixed (out of flow). Reserve space with padding so the
 * main column stays inside the viewport at 100% zoom — never margin+full-width.
 */
.admin-app,
.admin-app__body {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.admin-main-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .admin-main-shell {
    padding-inline-start: var(--sidebar-width, 270px);
  }
}

/* Tables may be wide; scroll inside the card, not the page */
.admin-main-shell .kt-scrollable-x-auto,
.admin-main-shell [data-admin-datatable-card] {
  max-width: 100%;
}

/* Imports: keep File column narrow; long names ellipsis */
[data-admin-datatable-card="imports-table"] table.kt-table {
  table-layout: fixed;
  width: 100%;
}

[data-admin-datatable-card="imports-table"] table.kt-table th:first-child,
[data-admin-datatable-card="imports-table"] table.kt-table td:first-child {
  width: 11rem;
  max-width: 11rem;
  overflow: hidden;
  vertical-align: top;
}

.admin-import-file-cell {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.admin-import-file-cell a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Datatable search clear (X) */
.admin-datatable-search {
  position: relative;
}

.admin-datatable-search input[type="search"] {
  padding-inline-end: 2rem;
}

.admin-datatable-search input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.admin-datatable-search__clear {
  position: absolute;
  inset-inline-end: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--tw-secondary-foreground, #78829d);
  cursor: pointer;
  z-index: 3;
  pointer-events: auto;
}

.admin-datatable-search__clear:hover {
  color: var(--tw-foreground, #071437);
  background: var(--tw-muted, #f1f1f4);
}

.admin-datatable-search__clear[hidden] {
  display: none !important;
}

/* Import show: Bootstrap-style animated progress */
.admin-import-progress.progress {
  display: flex;
  height: 0.75rem;
  overflow: hidden;
  border-radius: 9999px;
  background-color: var(--tw-muted, #f1f1f4);
}

.admin-import-progress .progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: var(--tw-primary, #1b84ff);
  transition: width 0.35s ease;
}

.admin-import-progress .progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.admin-import-progress .progress-bar-animated {
  animation: admin-import-progress-stripes 1s linear infinite;
}

@keyframes admin-import-progress-stripes {
  0% {
    background-position-x: 1rem;
  }
  100% {
    background-position-x: 0;
  }
}

.dark .admin-import-progress.progress {
  background-color: var(--tw-coal-500, #1e2129);
}

/* ---------------------------------------------------------------- import map */

.admin-import-map {
  gap: 1.5rem;
}

.admin-import-map .admin-form-actions {
  margin-top: 0;
  padding-top: 0;
}

.admin-import-map__body {
  padding: 0 !important;
}

.admin-import-map__table {
  width: 100%;
  font-size: 0.8125rem;
  border-collapse: separate;
  border-spacing: 0;
}

.admin-import-map__table th,
.admin-import-map__table td {
  padding: 0.875rem 1rem;
  text-align: start;
  vertical-align: middle;
  border-bottom: 1px solid var(--tw-border-color, #f1f1f4);
  white-space: nowrap;
}

.admin-import-map__map-row th {
  min-width: 11.5rem;
  padding: 1.125rem 1rem 1rem;
  vertical-align: top;
  background: #fff;
}

.admin-import-map__map-row th.admin-import-map__sticky {
  min-width: 3.5rem;
  width: 3.5rem;
}

.admin-import-map__col-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--tw-secondary-foreground, #78829d);
}

.admin-import-map__select {
  width: 100%;
  min-width: 9.5rem;
}

.admin-import-map__header-row th {
  padding: 0.75rem 1rem;
  background: #f8f9fb;
  font-weight: 500;
}

.admin-import-map__csv-header {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tw-foreground, #071437);
}

.admin-import-map__sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 var(--tw-border-color, #f1f1f4);
}

.admin-import-map__header-row .admin-import-map__sticky {
  background: #f8f9fb;
}

.admin-import-map__row-num {
  color: var(--tw-secondary-foreground, #78829d);
  font-variant-numeric: tabular-nums;
}

.admin-import-map__cell {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-import-map__empty {
  padding: 2.5rem 1.25rem !important;
  text-align: center;
  white-space: normal;
  color: var(--tw-secondary-foreground, #78829d);
}

.admin-import-map__footer {
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--tw-border-color, #f1f1f4);
  font-size: 0.8125rem;
  color: var(--tw-secondary-foreground, #78829d);
}

.dark .admin-import-map__map-row th,
.dark .admin-import-map__sticky {
  background: var(--tw-background, #0f1419);
}

.dark .admin-import-map__header-row th,
.dark .admin-import-map__header-row .admin-import-map__sticky {
  background: var(--tw-coal-500, #1e2129);
}

/* Compact refund modal — order details */
.order-refund-modal .kt-modal-content {
  width: 100%;
  max-width: 36rem;
  top: 15%;
}

.order-refund-modal__form {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0.75rem;
}

.order-refund-modal__amount {
  flex: 0 0 7.25rem;
  width: 7.25rem;
}

.order-refund-modal__reason {
  flex: 1 1 auto;
  min-width: 0;
}

.order-refund-modal__submit {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 639px) {
  .order-refund-modal__form {
    flex-wrap: wrap;
  }

  .order-refund-modal__amount,
  .order-refund-modal__reason {
    flex: 1 1 100%;
    width: 100%;
  }

  .order-refund-modal__submit {
    width: 100%;
  }
}



/* Bulk selection bar — shown above a datatable once rows are ticked.
   Hand-written here because the admin pages load a prebuilt stylesheet whose
   Tailwind source globs do not cover resources/views, so arbitrary-value
   utilities from Blade never get compiled. */
.admin-bulk-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(27, 132, 255, 0.28);
  background: rgba(27, 132, 255, 0.06);
}

.admin-bulk-bar[hidden] {
  display: none;
}

.admin-bulk-bar__main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.admin-bulk-bar__banner {
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-secondary-foreground, #78829d);
}

.admin-bulk-bar__banner[hidden],
.admin-bulk-bar__banner > span[hidden] {
  display: none;
}

.admin-bulk-bar__link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: #1b84ff;
  text-decoration: underline;
  cursor: pointer;
}

.admin-bulk-bar__link:hover {
  color: #056ee9;
}

.admin-bulk-bar__summary {
  margin: 0.75rem 0;
  line-height: 1.5;
  color: var(--color-secondary-foreground, #78829d);
}

/* Compact bulk-assign modal — products list.
   Without a max-width the kt-modal content stretches the full viewport. */
.products-bulk-modal .kt-modal-content {
  width: 100%;
  max-width: 32rem;
  top: 15%;
}

.products-bulk-modal .kt-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.products-bulk-modal form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.products-bulk-modal .kt-select {
  width: 100%;
}

.products-bulk-modal [data-admin-bulk-submit] {
  align-self: flex-start;
  margin-top: 0.25rem;
}