/* =============================================
   GENREDB FORM SHELL — CONSOLIDATED
   Add to: Appearance > Customize > Additional CSS
   ============================================= */

.genredb-form-shell {
  --gdb-bg: #121417;
  --gdb-panel: #1a1d22;
  --gdb-panel-2: #22262d;
  --gdb-border: #343a46;
  --gdb-text: #e7ebf0;
  --gdb-muted: #9aa3b2;
  --gdb-accent: #7c5cff;
  --gdb-accent-2: #9b84ff;
  --gdb-danger: #ff5d73;
  --gdb-radius: 14px;
  --gdb-radius-sm: 10px;
  --gdb-shadow: 0 12px 30px rgba(0,0,0,.28);
  background: linear-gradient(180deg, var(--gdb-panel), var(--gdb-panel-2));
  border: 1px solid var(--gdb-border);
  border-radius: var(--gdb-radius);
  padding: 28px;
  box-shadow: var(--gdb-shadow);
  color: var(--gdb-text);
}

/* Form grid — single column, each field stacks */
.genredb-form-shell .wpuf-form,
.genredb-form-shell form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

/* Labels */
.genredb-form-shell .wpuf-label,
.genredb-form-shell label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gdb-muted);
  font-weight: 700;
}

/* Inputs */
.genredb-form-shell input[type="text"],
.genredb-form-shell input[type="email"],
.genredb-form-shell input[type="url"],
.genredb-form-shell input[type="number"],
.genredb-form-shell input[type="password"],
.genredb-form-shell select,
.genredb-form-shell textarea {
  width: 100%;
  background: #101216;
  color: var(--gdb-text);
  border: 1px solid var(--gdb-border);
  border-radius: var(--gdb-radius-sm);
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.45;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.genredb-form-shell textarea {
  min-height: 180px;
  resize: vertical;
}

.genredb-form-shell input::placeholder,
.genredb-form-shell textarea::placeholder {
  color: #748091;
}

.genredb-form-shell input:focus,
.genredb-form-shell select:focus,
.genredb-form-shell textarea:focus {
  outline: none;
  border-color: var(--gdb-accent);
  box-shadow: 0 0 0 4px rgba(124,92,255,.16);
  background: #0d1014;
}

/* Help text */
.genredb-form-shell .wpuf-help,
.genredb-form-shell .wpuf-help-text,
.genredb-form-shell .description {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gdb-muted);
}

/* Field list items */
.genredb-form-shell .wpuf-el {
  margin: 0;
  min-width: 0;
}

.genredb-form-shell ul.wpuf-form li,
.genredb-form-shell .wpuf-fields > div {
  list-style: none;
  margin: 0;
}

/* Submit button */
.genredb-form-shell input[type="submit"],
.genredb-form-shell button[type="submit"],
.genredb-form-shell .wpuf-submit-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gdb-accent), var(--gdb-accent-2));
  color: white;
  padding: 14px 22px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(124,92,255,.22);
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.genredb-form-shell input[type="submit"]:hover,
.genredb-form-shell button[type="submit"]:hover,
.genredb-form-shell .wpuf-submit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(124,92,255,.28);
}

.genredb-form-shell input[type="submit"]:focus-visible,
.genredb-form-shell button[type="submit"]:focus-visible,
.genredb-form-shell .wpuf-submit-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* Errors */
.genredb-form-shell .wpuf-error,
.genredb-form-shell .wpuf-error-msg,
.genredb-form-shell .wpuf-error-message {
  color: var(--gdb-danger);
  font-size: 13px;
  margin-top: 8px;
}

/* =============================================
   COLUMN LAYOUT
   ============================================= */

.genredb-form-shell ul.wpuf-form li.column_field {
  grid-column: 1 / -1;
  display: block !important;
  width: 100% !important;
  list-style: none;
  margin: 0;
}

.genredb-form-shell .wpuf-field-columns,
.genredb-form-shell .wpuf-column {
  display: block !important;
  width: 100% !important;
}

.genredb-form-shell .wpuf-column-field-inner-columns {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  width: 100% !important;
}

.genredb-form-shell .wpuf-column-inner-fields {
  box-sizing: border-box !important;
  min-width: 0 !important;
}

.genredb-form-shell .wpuf-column-fields {
  display: block !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  .genredb-form-shell .wpuf-column-field-inner-columns {
    flex-direction: column !important;
  }
  .genredb-form-shell .wpuf-column-inner-fields {
    width: 100% !important;
    padding-right: 0 !important;
  }
}

/* =============================================
   IMAGE UPLOAD FIELDS
   ============================================= */

.genredb-form-shell .wpuf-file-input-wrap,
.wpuf-attachment-list .wpuf-file-input-wrap {
  display: none !important;
}

.genredb-form-shell .wpuf-attachment-upload-filelist {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.genredb-form-shell ul.wpuf-attachment-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.genredb-form-shell li.wpuf-image-wrap {
  display: inline-flex !important;
  flex-direction: column !important;
  width: fit-content !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 4px !important;
}

.genredb-form-shell .wpuf-image-wrap .attachment-name,
.genredb-form-shell .wpuf-image-wrap .attachment-name div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.genredb-form-shell .wpuf-image-wrap .attachment-name img,
.genredb-form-shell .wpuf-attachment-image {
  display: block !important;
  max-width: 160px !important;
  height: auto !important;
  border-radius: 8px !important;
  border: 1px solid var(--gdb-border) !important;
}

.genredb-form-shell .wpuf-image-wrap .caption {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.genredb-form-shell .moxie-shim,
.genredb-form-shell .moxie-shim-html5,
[id*="html5_"][class*="moxie-shim"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.genredb-form-shell .wpuf-attachment-upload-filelist,
.genredb-form-shell [id*="-upload-container"] {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* =============================================
   WPUF MULTISTEP — PROGRESS BAR
   ============================================= */

.genredb-form-shell .wpuf-multistep-progressbar {
  width: 100% !important;
  height: 6px !important;
  background: var(--gdb-border) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 28px !important;
  overflow: hidden !important;
  position: relative !important;
}

.genredb-form-shell .ui-progressbar-value {
  height: 100% !important;
  background: linear-gradient(90deg, var(--gdb-accent), var(--gdb-accent-2)) !important;
  border-radius: 999px !important;
  border: none !important;
  box-shadow: none !important;
  transition: width 0.35s ease !important;
}

.genredb-form-shell .wpuf-progress-percentage {
  position: absolute !important;
  top: -22px !important;
  right: 0 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--gdb-muted) !important;
}

/* =============================================
   WPUF MULTISTEP — BUTTON AREAS
   ============================================= */

.genredb-form-shell .multistep-button-area {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--gdb-border) !important;
}

.genredb-form-shell .wpuf-multistep-prev-btn {
  appearance: none !important;
  border: 1px solid var(--gdb-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--gdb-muted) !important;
  padding: 12px 20px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  transition: border-color .18s ease, color .18s ease !important;
  box-shadow: none !important;
}

.genredb-form-shell .wpuf-multistep-prev-btn:hover {
  border-color: var(--gdb-accent) !important;
  color: var(--gdb-text) !important;
}

.genredb-form-shell .wpuf-multistep-next-btn {
  appearance: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--gdb-accent), var(--gdb-accent-2)) !important;
  color: #fff !important;
  padding: 12px 22px !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 20px rgba(124,92,255,.22) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.genredb-form-shell .wpuf-multistep-next-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(124,92,255,.3) !important;
}

.genredb-form-shell #wpuf-post-draft {
  font-size: 13px !important;
  color: var(--gdb-muted) !important;
  text-decoration: none !important;
  padding: 12px 8px !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  transition: color .18s ease !important;
}

.genredb-form-shell #wpuf-post-draft:hover {
  color: var(--gdb-text) !important;
}

.genredb-form-shell .gdb-skip-step {
  font-size: 13px !important;
  color: var(--gdb-muted) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  padding: 12px 8px !important;
  cursor: pointer !important;
  transition: color .18s ease !important;
  margin-left: auto !important;
}

.genredb-form-shell .gdb-skip-step:hover {
  color: var(--gdb-text) !important;
}

/* =============================================
   WPUF MULTISTEP — FINAL STEP LAYOUT
   ============================================= */

.genredb-form-shell li.wpuf-submit {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding-top: 20px !important;
  border-top: 1px solid var(--gdb-border) !important;
  margin-top: 8px !important;
  list-style: none !important;
}

.genredb-form-shell li.wpuf-submit .wpuf-label {
  display: none !important;
}

.genredb-form-shell li.wpuf-submit a#wpuf-post-draft {
  display: none !important;
}

.genredb-form-shell fieldset.wpuf-multistep-fieldset .multistep-button-area {
  border-top: none !important;
  padding-top: 12px !important;
  margin-top: 0 !important;
}

/* =============================================
   FINAL STEP CONFIRMATION CARD
   ============================================= */

.genredb-form-shell .gdb-confirm-card {
  margin: 20px 0 24px !important;
  padding: 20px !important;
  background: rgba(15,23,42,0.6) !important;
  border: 1px solid var(--gdb-border) !important;
  border-radius: var(--gdb-radius) !important;
}

.genredb-form-shell .gdb-confirm-eyebrow {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--gdb-accent) !important;
  margin-bottom: 14px !important;
}

.genredb-form-shell .gdb-confirm-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.genredb-form-shell .gdb-confirm-cover {
  width: 80px !important;
  height: 120px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  flex-shrink: 0 !important;
  border: 1px solid var(--gdb-border) !important;
}

.genredb-form-shell .gdb-confirm-cover--placeholder {
  background: var(--gdb-border) !important;
  display: block !important;
}

.genredb-form-shell .gdb-confirm-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  justify-content: center !important;
}

.genredb-form-shell .gdb-confirm-title {
  margin: 0 !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--gdb-text) !important;
  line-height: 1.2 !important;
}

.genredb-form-shell .gdb-confirm-synopsis {
  margin: 0 !important;
  font-size: 13px !important;
  color: var(--gdb-muted) !important;
  line-height: 1.6 !important;
  max-width: 40ch !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.genredb-form-shell .gdb-confirm-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.genredb-form-shell .gdb-confirm-tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(124,92,255,0.12) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: var(--gdb-accent-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}


/* =============================================
   CHARACTER COUNTERS
   ============================================= */

.gdb-char-counter {
  font-size: 12px;
  margin-top: 6px;
  font-weight: 600;
  transition: color 0.18s ease;
}

.gdb-char-counter--ok   { color: #64748b; }
.gdb-char-counter--warn { color: #f59e0b; }
.gdb-char-counter--over { color: #f87171; }

/* =============================================
   REGISTRATION FORM COMPACT LAYOUT
   ============================================= */

/* The genredb-form-shell class lands on both the Elementor outer container
   AND the inner widget. Strip panel styling from the outer container only
   so it doesn't double-apply and constrain the layout. */
.genredb-form-shell.e-con,
.genredb-form-shell.e-con-boxed {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Inner widget: override Elementor's default 10px padding */
.genredb-form-shell.elementor-widget {
  padding: 28px !important;
}

/* WPUF adds 40px left padding to ul.wpuf-form by default — zero it out */
.wpuf-registration-form ul.wpuf-form,
.genredb-form-shell ul.wpuf-form {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Tighter field gap */
.wpuf-registration-form ul.wpuf-form {
  gap: 12px !important;
}

/* Slightly shorter inputs */
.wpuf-registration-form input[type="text"],
.wpuf-registration-form input[type="email"],
.wpuf-registration-form input[type="password"] {
  padding: 10px 14px !important;
}

/* Password fields: WPUF sets width:fit-content inline — override so they
   stretch full width like the other inputs */
.wpuf-registration-form .wpuf-fields-inline {
  width: 100% !important;
  position: relative !important;
}
.wpuf-registration-form .wpuf-fields-inline input[type="password"] {
  width: 100% !important;
}

/* First + Last side-by-side using the real WPUF class names */
.wpuf-registration-form .wpuf-name-field-wrap {
  display: flex !important;
  gap: 12px !important;
}
.wpuf-registration-form .wpuf-name-field-first-name,
.wpuf-registration-form .wpuf-name-field-last-name {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.wpuf-registration-form .wpuf-name-field-first-name input,
.wpuf-registration-form .wpuf-name-field-last-name input {
  width: 100% !important;
}

/* Hide the redundant outer "Name *" label */
.wpuf-registration-form li:has(.wpuf-name-field-wrap) > .wpuf-label {
  display: none !important;
}

/* Mobile: stack First/Last below 480px */
@media (max-width: 480px) {
  .wpuf-registration-form .wpuf-name-field-wrap {
    flex-direction: column !important;
  }
}