/* === CGPS Form – Modern, clean UI === */
:root {
  --cgps-bg: #ffffff;
  --cgps-surface: #ffffff;
  --cgps-border: #e5e7eb;
  --cgps-muted: #6b7280;
  --cgps-text: #0f172a;
  --cgps-accent: #2563eb;
  --cgps-accent-600: #1d4ed8;
  --cgps-accent-700: #1e40af;
  --cgps-success: #16a34a;
  --cgps-danger: #dc2626;
  --cgps-warning: #f59e0b;
  --cgps-shadow: 0 10px 25px rgba(2, 6, 23, 0.06);
  --cgps-radius: 14px;
}

/* Container */
.cgps-form {
  box-sizing: border-box;
  max-width: 760px;
  margin: 24px auto !important;
  padding: 24px !important;
  background: var(--cgps-surface);
  border: 1px solid var(--cgps-border) !important;
  border-radius: var(--cgps-radius) !important;
  box-shadow: var(--cgps-shadow);
  color: var(--cgps-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Headings & labels */
.cgps-form label {
  display: inline-block;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--cgps-text);
}

/* Inputs */
.cgps-form .cgps-input,
.cgps-form input[type="text"],
.cgps-form input[type="url"],
.cgps-form input[type="file"],
.cgps-form select,
.cgps-form textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--cgps-text);
  background: #fff;
  border: 1px solid var(--cgps-border);
  border-radius: 12px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

.cgps-form input::placeholder,
.cgps-form textarea::placeholder {
  color: #9ca3af;
}

.cgps-form .cgps-input:focus,
.cgps-form input[type="text"]:focus,
.cgps-form input[type="url"]:focus,
.cgps-form input[type="file"]:focus,
.cgps-form select:focus,
.cgps-form textarea:focus {
  border-color: var(--cgps-accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .15);
}

/* Criteria card */
.cgps-form .cgps-criteria {
  background: #f8fafc !important;
  border: 1px solid var(--cgps-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
}

.cgps-form .cgps-criteria strong {
  display: inline-block;
  margin-bottom: 6px;
}

.cgps-form .cgps-criteria ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.cgps-form .cgps-criteria li {
  position: relative;
  padding-left: 28px;
  margin: 8px 0;
  color: var(--cgps-text);
}

.cgps-form .cgps-criteria li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cgps-success);
  font-weight: 700;
}

/* Counters */
#cgps_counters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  background: #f9fafb;
  border: 1px solid var(--cgps-border);
  border-radius: 10px;
  padding: 8px 10px;
}

#cgps_word_counter,
#cgps_link_counter {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  font-weight: 600;
}

#cgps_word_status {
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  color: var(--cgps-warning);
}

#cgps_link_counter.is-danger,
#cgps_word_status.is-danger {
  background: #fef2f2;
  border-color: #fee2e2;
  color: var(--cgps-danger);
}

/* Button */
.cgps-form .cgps-pay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px !important;
  font-size: 17px !important;
  font-weight: 700;
  border-radius: 12px !important;
  border: none;
  color: #ffffff;
  background: linear-gradient(135deg, var(--cgps-accent), var(--cgps-accent-600));
  box-shadow: 0 8px 18px rgba(37, 99, 235, .25);
  transition: transform .06s ease, box-shadow .15s ease, filter .15s ease;
}

.cgps-form .cgps-pay-btn:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(37, 99, 235, .28);
  filter: brightness(1.04);
}

.cgps-form .cgps-pay-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  filter: grayscale(10%);
  box-shadow: none;
}

/* Messages */
.cgps-form .cgps-errors {
  border: 1px solid #fecaca !important;
  background: #fff1f2 !important;
  color: #7f1d1d;
  border-radius: 12px;
  padding: 12px 14px;
}

.cgps-form .cgps-errors ul {
  padding-left: 18px;
  margin: 0;
}

.cgps-form .cgps-msg {
  border: 1px solid #fde68a !important;
  background: #fffbeb !important;
  color: #78350f;
  border-radius: 12px;
  padding: 12px 14px;
}

/* Editor content size */
.mce-content-body {
  font-size: 18px !important;
  line-height: 1.7 !important;
}

/* Spacing between fields */
.cgps-form p {
  margin: 0 0 16px;
}

/* File input nicer spacing */
.cgps-form input[type="file"] {
  padding: 10px;
  background: #fafafa;
}

/* Responsive */
@media (max-width: 600px) {
  .cgps-form {
    padding: 18px !important;
    border-radius: 12px !important;
  }
  .cgps-form .cgps-pay-btn {
    width: 100%;
  }
}

/* Optional subtle divider under section titles */
.cgps-form h3, .cgps-form h4 {
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.cgps-form h3::after, .cgps-form h4::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 3px;
  border-radius: 999px;
  background: var(--cgps-accent);
}

/* Improve select appearance */
.cgps-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #9ca3af 50%), linear-gradient(135deg, #9ca3af 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Highlight required fields (HTML5) */
.cgps-form [required] {
  border-left: 3px solid rgba(37,99,235,.35);
  padding-left: 13px;
}