.cpi-form-container { max-width: 900px; margin: 0 auto; padding: 20px; background: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; }
.cpi-form-container h2 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee; color: #333; }

.form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #000; }
.form-group input, .form-group select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; color: #333; }
.form-group input[readonly] { background-color: #f0f0f0; }

.items-container { margin-top: 20px; }
.item-row { display: flex; gap: 15px; margin-bottom: 15px; padding: 15px; background: #fff; border: 1px solid #eee; border-radius: 4px; align-items: flex-end; }
.item-row > .form-group { flex: 1; margin-bottom: 0; }

.row-actions { flex: 0 0 80px; }
.row-actions button { width: 35px; height: 35px; font-size: 16px; line-height: 1; border-radius: 50%; border: 1px solid #ddd; background: #fff; cursor: pointer; margin-right: 5px; color: #333; }
.row-actions .add-row { color: green; border-color: green; }
.row-actions .remove-row { color: red; border-color: red; }
.row-actions button:disabled { opacity: .5; cursor: not-allowed; }

.form-submit { margin-top: 20px; text-align: center; }
.form-submit button { padding: 10px 25px; background: #2271b1; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
.form-submit button:hover { background: #135e96; }

#cpi-form-message { margin-top: 20px; padding: 10px; border-radius: 4px; }
#cpi-form-message .success { background: #dff0d8; border: 1px solid #d6e9c6; color: #3c763d; }
#cpi-form-message .error   { background: #f2dede; border: 1px solid #ebccd1; color: #a94442; }
#cpi-form-message .loading { background: #d9edf7; border: 1px solid #bce8f1; color: #31708f; }

.error { border-color: #ff0000 !important; }

.cpi-access-error { padding: 20px; background: #f2dede; border: 1px solid #ebccd1; color: #a94442; text-align: center; max-width: 600px; margin: 20px auto; border-radius: 5px; }

/* ——— Responsive: tablets and phones ——— */

/* Tablet */
@media (max-width: 1024px) {
  .cpi-form-container { max-width: 720px; padding: 16px; }
  .form-submit button { width: 100%; }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
  .cpi-form-container { max-width: 100%; margin: 0 12px; padding: 16px; }

  /* Allow fields to wrap to new lines */
  .item-row { flex-wrap: wrap; gap: 12px; }

  /* Two columns on tablets */
  .item-row > .form-group {
    flex: 1 1 calc(50% - 12px);
    min-width: 160px;
    margin-bottom: 0;
  }

  /* Move row actions to their own line and align right */
  .row-actions {
    flex: 1 1 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
  }
  .row-actions button { width: 42px; height: 42px; font-size: 18px; }
}

/* Phones */
@media (max-width: 480px) {
  .cpi-form-container { margin: 0 2px; padding: 14px; }

  /* Single column for each field */
  .item-row > .form-group {
    flex: 1 1 100%;
    min-width: 0;
  }

  .form-group label { font-size: 14px; }
  .form-group input,
  .form-group select {
    font-size: 16px; /* prevents iOS zoom */
  }

  .row-actions button { width: 44px; height: 44px; font-size: 18px; }
}

/* Prevent flex items from forcing horizontal overflow */
.item-row select,
.item-row input[type="text"] { min-width: 0; }