/* =====================================================
   Auto-order toggle component
   Universal styles — scoped to .auto-order-toggle
   ===================================================== */

.auto-order-toggle {
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  font-family: inherit;
  font-size: 13px;
  color: inherit;
  width: 100%;
}

/* ---- Label row (checkbox + icon + text) ---- */
.auto-order-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  line-height: 1.4;
  margin: 0 !important;
}

.auto-order-switch input[type="checkbox"].auto-order-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 34px !important;
  height: 18px !important;
  min-width: 34px !important;
  min-height: 18px !important;
  max-width: 34px !important;
  max-height: 18px !important;
  border-radius: 18px !important;
  background: #ccc !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  position: relative !important;
  transition: background 0.2s ease;
  display: inline-block !important;
  vertical-align: middle;
  box-sizing: content-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

.auto-order-switch input[type="checkbox"].auto-order-checkbox::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: left 0.2s ease;
}

.auto-order-switch input[type="checkbox"].auto-order-checkbox:checked {
  background: #2a7ae4 !important;
}

.auto-order-switch input[type="checkbox"].auto-order-checkbox:checked::after {
  left: 18px;
}

/* Hide the hidden "value=0" proxy input */
.auto-order-switch input[type="hidden"] {
  display: none;
}

.auto-order-switch span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #444;
  white-space: nowrap;
}

.auto-order-switch span .fa {
  font-size: 12px;
  color: #2a7ae4;
}

/* ---- Interval row (select + custom days input) ---- */
.auto-order-interval-wrapper {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}

.auto-order-interval-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  padding: 5px 28px 5px 10px !important;
  font-size: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  color: #333 !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 120px !important;
  height: auto !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  font-family: inherit !important;
}

.auto-order-interval-select:focus {
  border-color: #2a7ae4 !important;
  box-shadow: 0 0 0 3px rgba(42,122,228,.15) !important;
}

.auto-order-custom-days {
  width: 72px !important;
  padding: 5px 8px !important;
  font-size: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  outline: none !important;
  color: #333 !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.06) !important;
  font-family: inherit !important;
}

.auto-order-custom-days:focus {
  border-color: #2a7ae4 !important;
  box-shadow: 0 0 0 3px rgba(42,122,228,.15) !important;
}

/* =====================================================
   Auto-order summary box
   Shown when auto-order is active for a product.
   Scoped to .auto-order-summary
   ===================================================== */

.auto-order-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 8px;
  padding: 6px 10px;
  background: #f0f6ff;
  border: 1px solid #c8ddf8;
  border-radius: 6px;
  font-size: 12px !important;
  font-family: inherit;
  color: #444;
  line-height: 1.4;
}

.auto-order-summary__icon {
  color: #2a7ae4;
  font-size: 13px !important;
  flex-shrink: 0;
}

.auto-order-summary__title {
  font-weight: 600;
  color: #1a5bbf;
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px !important;
  white-space: nowrap;
}

.auto-order-summary__badge {
  display: inline-block;
  background: #2a7ae4;
  color: #fff;
  font-size: 10px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 1px 5px;
  border-radius: 20px;
}

.auto-order-summary__rows {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auto-order-summary__rows li {
  display: flex;
  gap: 3px;
  font-size: 11px !important;
  white-space: nowrap;
}

.auto-order-summary__rows li span {
    font-size: inherit !important;
}

.auto-order-summary__rows li .label {
  color: #888;
}

.auto-order-summary__rows li .value {
  font-weight: 600;
  color: #222;
}

.auto-order-summary__actions {
  display: none;
}

/* Hidden by default — JS toggles display */
.auto-order-custom-days[style*="display:none"],
.auto-order-custom-days[style*="display: none"] {
  display: none !important;
}

/* =====================================================
   Withdrawal form
   Universal styles — scoped to .withdrawal-form-wrapper
   ===================================================== */

.withdrawal-form-wrapper {
  max-width: 480px;
  font-family: inherit;
  font-size: 14px;
  color: #333;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  padding: 28px 32px;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  margin: 0 auto;
}

.withdrawal-form-wrapper h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 0 22px !important;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.withdrawal-form-wrapper h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background: #2a7ae4;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ---- Form groups ---- */
.withdrawal-form .form-group {
  margin-bottom: 14px !important;
}

.withdrawal-form label {
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #666;
  margin-bottom: 5px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---- Text inputs ---- */
.withdrawal-form .form-control {
  display: block !important;
  width: 100% !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: #222 !important;
  background: #f8fafd !important;
  border: 1px solid #dde3ec !important;
  border-radius: 7px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: none !important;
}

.withdrawal-form .form-control:focus {
  background: #fff !important;
  border-color: #2a7ae4 !important;
  box-shadow: 0 0 0 3px rgba(42,122,228,.12) !important;
}

/* ---- Radio buttons ---- */
.withdrawal-form .radio {
  margin: 3px 0 !important;
}

.withdrawal-form .radio label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 400 !important;
  font-size: 13px !important;
  cursor: pointer;
  color: #333;
  text-transform: none !important;
  letter-spacing: 0 !important;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background 0.12s;
}

.withdrawal-form .radio label:hover {
  background: #f0f5fd;
}

.withdrawal-form .radio:has(input[type="radio"]:checked) label {
  background: #f0f5fd;
}

.withdrawal-form .radio input[type="radio"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  cursor: pointer;
  accent-color: #2a7ae4;
  flex-shrink: 0;
}

/* ---- Partial items list ---- */
.withdrawal-items-wrapper .withdrawal-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px !important;
}

.withdrawal-items-wrapper .withdrawal-item:last-child {
  border-bottom: none;
}

.withdrawal-items-wrapper .withdrawal-item > span {
  cursor: pointer;
}

.withdrawal-items-wrapper .withdrawal-item input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  cursor: pointer;
  accent-color: #2a7ae4;
  flex-shrink: 0;
}

/* Qty stepper */
.withdrawal-qty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.withdrawal-qty .withdrawal-qty-input {
  width: 48px !important;
  text-align: center !important;
  padding: 4px !important;
  font-size: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: #f8fafd !important;
}

.withdrawal-qty .withdrawal-qty-minus,
.withdrawal-qty .withdrawal-qty-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  background: #f5f5f5 !important;
  color: #333 !important;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: none !important;
}

.withdrawal-qty .withdrawal-qty-minus:hover,
.withdrawal-qty .withdrawal-qty-plus:hover {
  background: #e8e8e8 !important;
}

.withdrawal-qty .withdrawal-qty-minus:disabled,
.withdrawal-qty .withdrawal-qty-plus:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
}

/* ---- Captcha ---- */
.withdrawal-captcha .col-h-l,
.withdrawal-captcha .col-h-r {
  display: block !important;
  float: none !important;
  width: auto !important;
}

.withdrawal-captcha .captcha_container {
  display: flex !important;
  align-items: flex-end !important;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 !important;
}

.withdrawal-captcha p.col-h-l.width_10em {
  display: none !important;
}

.withdrawal-captcha .col-h-l.pad_top_16 {
  display: flex !important;
  flex-direction: column !important;
}

.withdrawal-captcha .col-h-l.pad_top_16 span {
  font-size: 12px !important;
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 5px;
}

.withdrawal-captcha #captcha_withdrawal6a10344e5a1ef_input,
.withdrawal-captcha input[name="captcha_withdrawal"] {
  display: block !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  background: #f8fafd !important;
  border: 1px solid #dde3ec !important;
  border-radius: 7px !important;
  outline: none !important;
  width: 150px !important;
  box-shadow: none !important;
  margin-top: 0 !important;
}

.withdrawal-captcha img {
  border-radius: 6px;
  border: 1px solid #dde3ec;
  display: block;
}

.withdrawal-captcha a {
  font-size: 12px !important;
  color: #2a7ae4 !important;
  text-decoration: none;
  display: inline-block;
  margin-top: 6px;
}

.withdrawal-captcha a:hover {
  text-decoration: underline;
}

/* ---- Submit button ---- */
.withdrawal-form .withdrawal-submit-btn {
  display: inline-block !important;
  padding: 11px 30px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  color: #fff !important;
  background: #2a7ae4 !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(42,122,228,.3) !important;
  line-height: 1.4 !important;
  margin-top: 6px;
}

.withdrawal-form .withdrawal-submit-btn:hover {
  background: #1f64c4 !important;
  box-shadow: 0 4px 12px rgba(42,122,228,.4) !important;
  transform: translateY(-1px);
}

/* ---- Alerts ---- */
.withdrawal-form-wrapper .alert {
  padding: 10px 14px !important;
  border-radius: 7px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
  border: 1px solid transparent !important;
  line-height: 1.5 !important;
}

.withdrawal-form-wrapper .alert-danger {
  background: #fdecea !important;
  border-color: #f5c6c2 !important;
  color: #c0392b !important;
}
/*   Complaint list page
   Universal styles — scoped to .wa-complaint-list-page
   ===================================================== */

.wa-complaint-list-page {
  font-family: inherit;
  font-size: 14px;
  color: #333;
  overflow-x: auto;
}

.wa-complaint-list-page h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 0 18px !important;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wa-complaint-list-page h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background: #2a7ae4;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ---- Table ---- */
.wa-complaint-list-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 10px;
  overflow: hidden;
}

.wa-complaint-list-table thead tr {
  background: #f4f7fb !important;
}

.wa-complaint-list-table thead th {
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #888 !important;
  text-align: left !important;
  border-bottom: 1px solid #e4e9f0 !important;
  white-space: nowrap;
}

.wa-complaint-list-table tbody tr {
  border-bottom: 1px solid #f0f3f8 !important;
  transition: background 0.12s;
}

.wa-complaint-list-table tbody tr:last-child {
  border-bottom: none !important;
}

.wa-complaint-list-table tbody tr:hover {
  background: #f8fafd !important;
}

.wa-complaint-list-table tbody td {
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: #333 !important;
  vertical-align: top !important;
  white-space: nowrap;
}

/* ---- Product item row ---- */
.wa-complaint-item-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px;
}

.wa-complaint-item-row:last-of-type {
  margin-bottom: 0;
}

/* ---- Status badges ---- */
.wa-complaint-status-badge {
  display: inline-block !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  letter-spacing: .01em;
}

.wa-complaint-status-sm {
  padding: 2px 7px !important;
  font-size: 11px !important;
}

/* ---- Note preview ---- */
.wa-complaint-note-preview {
  display: block !important;
  font-size: 11px !important;
  color: #999 !important;
  margin-top: 3px !important;
  font-style: italic;
  text-align: left;
}

/* ---- Back button ---- */
.wa-btn {
  display: inline-block !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  line-height: 1.4 !important;
  border: none !important;
}

.wa-btn-secondary {
  background: #f0f3f8 !important;
  color: #444 !important;
  box-shadow: none !important;
}

.wa-btn-secondary:hover {
  background: #e4e9f0 !important;
  color: #222 !important;
  transform: translateY(-1px);
}


/* =====================================================
   Auto-order list page
   Universal styles — scoped to .wa-auto-order-list-page
   ===================================================== */

.wa-auto-order-list-page {
  font-family: inherit;
  font-size: 14px;
  color: #333;
  padding: 20px 0;
  overflow-x: auto;
}

.wa-auto-order-list-page h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 0 18px !important;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wa-auto-order-list-page h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background: #2a7ae4;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ---- Table ---- */
.wa-auto-order-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  font-size: 13px !important;
  background: #fff !important;
  border: 1px solid #e4e9f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.wa-auto-order-table.dataTable {
  margin: 0 !important;
}

.wa-auto-order-table thead tr {
  background: #f4f7fb !important;
}

.wa-auto-order-table thead th {
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #888 !important;
  text-align: left !important;
  border-bottom: 1px solid #e4e9f0 !important;
  white-space: nowrap !important;
  background: #f4f7fb !important;
  box-shadow: none !important;
}

.wa-auto-order-table tbody tr {
  border-bottom: 1px solid #f0f3f8 !important;
  transition: background 0.12s;
  background: #fff !important;
}

.wa-auto-order-table tbody tr:last-child {
  border-bottom: none !important;
}

.wa-auto-order-table tbody tr:hover {
  background: #f8fafd !important;
}

.wa-auto-order-table tbody td {
  padding: 10px 14px !important;
  font-size: 13px !important;
  color: #333 !important;
  vertical-align: middle !important;
  border: none !important;
}

/* ---- Interval select ---- */
.wa-auto-order-interval {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: #f8fafd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E") no-repeat right 8px center !important;
  padding: 5px 26px 5px 9px !important;
  font-size: 12px !important;
  font-family: inherit !important;
  border: 1px solid #dde3ec !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  color: #333 !important;
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 110px !important;
  box-shadow: none !important;
}

.wa-auto-order-interval:focus {
  border-color: #2a7ae4 !important;
  box-shadow: 0 0 0 3px rgba(42,122,228,.12) !important;
  background-color: #fff !important;
}

/* ---- Action buttons ---- */
.wa-auto-order-btn {
  display: inline-block !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  border: none !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s, transform 0.1s;
  line-height: 1.4 !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.wa-auto-order-btn + .wa-auto-order-btn {
  margin-left: 5px !important;
}

.wa-auto-order-btn-save {
  background: #2a7ae4 !important;
  color: #fff !important;
}

.wa-auto-order-btn-save:hover {
  background: #1f64c4 !important;
  transform: translateY(-1px);
}

.wa-auto-order-btn-cancel {
  background: #f0f3f8 !important;
  color: #c0392b !important;
}

.wa-auto-order-btn-cancel:hover {
  background: #fdecea !important;
  transform: translateY(-1px);
}

/* =====================================================
   Complaint form page
   Universal styles — scoped to .wa-complaint-page
   ===================================================== */

.wa-complaint-page {
  max-width: 520px;
  font-family: inherit;
  font-size: 14px;
  color: #333;
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  padding: 28px 32px !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  margin: 20px auto !important;
  box-sizing: border-box !important;
}

.wa-complaint-page h2 {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 0 22px !important;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wa-complaint-page h2::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 20px;
  background: #2a7ae4;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ---- Subtitle ---- */
.wa-complaint-subtitle {
  font-size: 13px !important;
  color: #555;
  margin-bottom: 12px !important;
}

.wa-complaint-subtitle strong {
  color: #1a1a1a;
}

/* ---- Steps spacing ---- */
#wa-complaint-step1 p,
#wa-complaint-step2 p {
  font-size: 13px;
  color: #555;
  margin-bottom: 10px;
}

/* ---- Product table ---- */
.wa-complaint-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 12px;
}

.wa-complaint-table thead th {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 8px;
  border-bottom: 2px solid #e4e9f0;
  text-align: left;
}

.wa-complaint-table tbody tr {
  border-bottom: 1px solid #f0f0f0;
}

.wa-complaint-table tbody tr:last-child {
  border-bottom: none;
}

.wa-complaint-table tbody td {
  padding: 9px 8px;
  vertical-align: middle;
}

.wa-complaint-table tbody td:nth-child(2) {
  cursor: pointer;
}

.wa-complaint-table input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  cursor: pointer;
  accent-color: #2a7ae4;
}

/* ---- Qty stepper ---- */
.wa-complaint-qty {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.wa-complaint-qty-input {
  width: 48px !important;
  text-align: center !important;
  padding: 4px !important;
  font-size: 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background: #f8fafd !important;
}

.wa-complaint-qty-minus,
.wa-complaint-qty-plus {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  background: #f5f5f5 !important;
  color: #333 !important;
  cursor: pointer;
  transition: background 0.15s;
  box-shadow: none !important;
}

.wa-complaint-qty-minus:hover,
.wa-complaint-qty-plus:hover {
  background: #e8e8e8 !important;
}

.wa-complaint-qty-minus:disabled,
.wa-complaint-qty-plus:disabled {
  opacity: .4 !important;
  cursor: not-allowed !important;
}

/* ---- Note textarea ---- */
.wa-complaint-note-wrap {
  margin-top: 16px;
  margin-bottom: 14px;
}

.wa-complaint-note-wrap label {
  display: block;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #666;
  margin-bottom: 5px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.wa-complaint-note-wrap .wa-required {
  color: #c0392b;
}

.wa-complaint-note-wrap textarea {
  display: block !important;
  width: 100% !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  color: #222 !important;
  background: #f8fafd !important;
  border: 1px solid #dde3ec !important;
  border-radius: 7px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: none !important;
  resize: vertical;
}

.wa-complaint-note-wrap textarea:focus {
  background: #fff !important;
  border-color: #2a7ae4 !important;
  box-shadow: 0 0 0 3px rgba(42,122,228,.12) !important;
}

/* ---- Selected products list ---- */
.wa-complaint-selected {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}

.wa-complaint-selected li {
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #333;
}

.wa-complaint-selected li:last-child {
  border-bottom: none;
}

/* ---- Buttons ---- */
.wa-complaint-actions {
  margin-top: 18px;
  padding-top: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.wa-complaint-page .wa-btn {
  display: inline-block !important;
  padding: 11px 30px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  color: #fff !important;
  background: #2a7ae4 !important;
  border: none !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 2px 8px rgba(42,122,228,.3) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  margin-top: 6px;
}

.wa-complaint-page .wa-btn:hover {
  background: #1f64c4 !important;
  box-shadow: 0 4px 12px rgba(42,122,228,.4) !important;
  transform: translateY(-1px);
}

.wa-complaint-page .wa-btn-secondary {
  background: #fff !important;
  color: #555 !important;
  border: 1px solid #dde3ec !important;
  box-shadow: none !important;
}

.wa-complaint-page .wa-btn-secondary:hover {
  background: #f5f8fc !important;
  border-color: #c5cdd8 !important;
  box-shadow: none !important;
  transform: none;
}

/* ---- Error / Success ---- */
.wa-complaint-error {
  color: #c0392b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.wa-complaint-success-msg {
  background: #eafaf1;
  border: 1px solid #a3d9b1;
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1a7a3a;
}

.wa-complaint-success-msg i {
  font-size: 22px;
  color: #27ae60;
}