/* ==========================================================================
   DownPortal — Paid Memberships Pro Universal Integration (DownPortal Studio Design System)
   Matches: Submit Studio (uploader.css) & Settings Studio (settings.css)
   ========================================================================== */

:root {
  --pmpro--color--accent: #2563eb !important;
  --pmpro--color--contrast: #090d16 !important;
  --pmpro--color--base: transparent !important;
  --pmpro--color--base-2: #f8fafc !important;
  --pmpro--color--border--variation: transparent !important;
  --pmpro--btn--border-radius: 4px !important;
  --pmpro--base--border-radius: 0 !important;
  --pmpro--box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   1. Form Shell & Studio Layout
   -------------------------------------------------------------------------- */
.pmpro,
.pmpro_section,
.pmpro_checkout,
.pmpro_account,
.pmpro_confirmation,
.pmpro_invoice,
.pmpro_billing,
.pmpro_cancel,
#pmpro_account {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
  color: var(--ui-color-text-strong, #090d16) !important;
}

.pmpro_form {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

/* --------------------------------------------------------------------------
   2. Section Blocks & Headings (Matching .uploader-section & .profile-form-section)
   -------------------------------------------------------------------------- */
.pmpro .pmpro_card,
.pmpro .pmpro_box,
.pmpro .pmpro_form_fieldset,
.pmpro .pmpro_checkout-fields,
.pmpro section.pmpro_section,
.pmpro #pmpro_user_fields,
.pmpro #pmpro_payment_information_fields,
.pmpro #pmpro_billing_address_fields,
.pmpro #pmpro_tos_fields,
.pmpro #pmpro_account-membership,
.pmpro #pmpro_account-invoices,
.pmpro #pmpro_account-profile,
.pmpro #pmpro_account-links {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.pmpro .pmpro_card_title,
.pmpro .pmpro_form_legend,
.pmpro .pmpro_table_title,
.pmpro .pmpro_section_title,
.pmpro legend.pmpro_form_legend,
.pmpro h2.pmpro_card_title {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ui-color-text-strong, #090d16) !important;
  border-bottom: 1.5px solid var(--ui-color-border-strong, #cbd5e1) !important;
  padding-bottom: 6px !important;
  margin: 0 0 8px 0 !important;
  display: block !important;
  width: 100% !important;
  letter-spacing: -0.01em !important;
}

.pmpro .pmpro_card_content {
  padding: 0 !important;
}

/* --------------------------------------------------------------------------
   3. Pricing Banner (Matching .uploader-target-card)
   -------------------------------------------------------------------------- */
.pmpro #pmpro_pricing_fields,
.pmpro .pmpro_checkout-fields-pricing {
  background: #eff6ff !important;
  border: 1.5px solid var(--ui-color-primary, #2563eb) !important;
  border-radius: var(--ui-radius-xs, 4px) !important;
  padding: 14px 18px !important;
  margin-bottom: 10px !important;
}

.pmpro #pmpro_pricing_fields .pmpro_card_title {
  border-bottom: 1px solid #bfdbfe !important;
  color: #1e40af !important;
  margin-bottom: 8px !important;
  padding-bottom: 4px !important;
}

.pmpro .pmpro_level_name_text {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ui-color-text-strong, #090d16) !important;
  margin-bottom: 2px !important;
  display: block !important;
}

.pmpro .pmpro_level_cost_text {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--ui-color-primary, #2563eb) !important;
  margin-bottom: 4px !important;
  display: block !important;
}

.pmpro .pmpro_level_description_text {
  font-size: 12.5px !important;
  color: var(--ui-color-text-muted, #475569) !important;
  line-height: 1.45 !important;
  margin-bottom: 0 !important;
}

/* --------------------------------------------------------------------------
   4. Form Grid & Input Groups (Matching .modal-form-group & .uploader-grid-2col)
   -------------------------------------------------------------------------- */
.pmpro .pmpro_form_fields {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

.pmpro .pmpro_form_field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
}

.pmpro .pmpro_cols-2,
.pmpro .pmpro_form_fields.pmpro_cols-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.pmpro .pmpro_cols-3 {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}

.pmpro .pmpro_form_label,
.pmpro label.pmpro_form_label {
  font-size: 13px !important;
  font-weight: 750 !important;
  color: var(--ui-color-text-strong, #090d16) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  display: block !important;
}

.pmpro .pmpro_asterisk {
  color: #dc2626 !important;
  margin-left: 2px !important;
}

/* Standard Form Controls (.modal-form-input / .modal-form-select) */
.pmpro input[type="text"],
.pmpro input[type="password"],
.pmpro input[type="email"],
.pmpro input[type="number"],
.pmpro input[type="tel"],
.pmpro input[type="url"],
.pmpro select,
.pmpro textarea,
.pmpro .pmpro_form_input-text,
.pmpro .pmpro_form_input-password,
.pmpro .pmpro_form_input-email {
  width: 100% !important;
  height: 40px !important;
  line-height: 22px !important;
  font-family: inherit !important;
  font-size: 13.5px !important;
  color: var(--ui-color-text-strong, #090d16) !important;
  background: var(--ui-color-canvas, #ffffff) !important;
  border: 1.5px solid var(--ui-color-border-strong, #cbd5e1) !important;
  border-radius: var(--ui-radius-xs, 4px) !important;
  padding: 8px 12px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.12s ease !important;
}

.pmpro textarea {
  height: auto !important;
  min-height: 80px !important;
  padding: 8px 12px !important;
}

.pmpro select,
.pmpro select.pmpro_form_input {
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 14px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

.pmpro input[type="text"]:focus,
.pmpro input[type="password"]:focus,
.pmpro input[type="email"]:focus,
.pmpro input[type="number"]:focus,
.pmpro input[type="tel"]:focus,
.pmpro select:focus,
.pmpro textarea:focus {
  border-color: var(--ui-color-primary, #2563eb) !important;
  outline: 1.5px solid var(--ui-color-primary, #2563eb) !important;
  outline-offset: -1px !important;
}

/* --------------------------------------------------------------------------
   5. Checkbox & Radio Controls (Strict Native Inline Sizing)
   -------------------------------------------------------------------------- */
.pmpro input[type="checkbox"],
.pmpro input[type="radio"],
.pmpro .pmpro_form_input-checkbox,
.pmpro .pmpro_form_input-radio,
.pmpro input.pmpro_form_input-checkbox,
.pmpro input.pmpro_form_input-radio,
#tos,
#rememberme {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  margin: 0 8px 0 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  accent-color: var(--ui-color-primary, #2563eb) !important;
  box-shadow: none !important;
  outline: none !important;
}

.pmpro .pmpro_form_field-checkbox,
.pmpro .pmpro_form_field-radio,
.pmpro .pmpro_form_field-tos,
.pmpro .pmpro_form_field-rememberme,
.pmpro #pmpro_tos_fields .pmpro_form_field {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 !important;
}

.pmpro .pmpro_form_label-inline,
.pmpro .pmpro_form_field-checkbox label,
.pmpro .pmpro_form_field-radio label,
.pmpro label[for="tos"],
.pmpro label[for="rememberme"] {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ui-color-text-strong, #090d16) !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.pmpro .pmpro_form_hint {
  font-size: 12px !important;
  color: var(--ui-color-text-muted, #64748b) !important;
  margin-top: 2px !important;
}

/* Password Toggle */
.pmpro .pmpro_form_field-password-toggle {
  position: relative !important;
}

.pmpro .pmpro_btn-password-toggle {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: #64748b !important;
  cursor: pointer !important;
  padding: 4px !important;
}

/* --------------------------------------------------------------------------
   6. Action Buttons (.btn-primary / .btn-subtle)
   -------------------------------------------------------------------------- */
.pmpro .pmpro_btn,
.pmpro .pmpro_btn-primary,
.pmpro .pmpro_btn-submit,
.pmpro input[type="submit"].pmpro_btn,
.pmpro input[type="submit"].pmpro_btn-submit,
.pmpro button.pmpro_btn-submit,
.pmpro .pmpro_card_actions .pmpro_btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 42px !important;
  padding: 9px 28px !important;
  border-radius: var(--ui-radius-xs, 4px) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

.pmpro .pmpro_btn-primary,
.pmpro .pmpro_btn-submit,
.pmpro input[type="submit"].pmpro_btn,
.pmpro input[type="submit"].pmpro_btn-submit,
.pmpro button.pmpro_btn-submit {
  background: var(--ui-color-primary, #2563eb) !important;
  color: #ffffff !important;
  border: none !important;
  width: 100% !important;
}

.pmpro .pmpro_btn-primary:hover,
.pmpro .pmpro_btn-submit:hover,
.pmpro input[type="submit"].pmpro_btn:hover,
.pmpro input[type="submit"].pmpro_btn-submit:hover,
.pmpro button.pmpro_btn-submit:hover {
  background: #1d4ed8 !important;
  color: #ffffff !important;
}

.pmpro .pmpro_btn-secondary,
.pmpro .pmpro_btn-cancel,
.pmpro .pmpro_btn-plain {
  background: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

.pmpro .pmpro_checkout_actions,
.pmpro .pmpro_form_actions {
  margin-top: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* --------------------------------------------------------------------------
   7. Alerts & Notices
   -------------------------------------------------------------------------- */
.pmpro .pmpro_message,
.pmpro .pmpro_alert,
.pmpro .pmpro_success,
.pmpro .pmpro_error {
  padding: 12px 16px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.45 !important;
}

.pmpro .pmpro_success,
.pmpro .pmpro_message.pmpro_success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

.pmpro .pmpro_error,
.pmpro .pmpro_alert,
.pmpro .pmpro_message.pmpro_error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}

.pmpro .pmpro_message.pmpro_info,
.pmpro .pmpro_box-info {
  background: #eff6ff !important;
  border: 1px solid #bfdbfe !important;
  color: #1e40af !important;
}

/* --------------------------------------------------------------------------
   8. Tables & Invoices (Matching .req-table-stream / specs)
   -------------------------------------------------------------------------- */
.pmpro .pmpro_table,
.pmpro .pmpro_invoice_table,
.pmpro table.pmpro_table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 12px 0 !important;
  font-size: 13px !important;
  border: 1px solid var(--ui-color-border-strong, #cbd5e1) !important;
  border-radius: 4px !important;
}

.pmpro .pmpro_table th,
.pmpro table.pmpro_table th {
  background: #f8fafc !important;
  padding: 10px 14px !important;
  font-weight: 750 !important;
  color: #090d16 !important;
  border-bottom: 1.5px solid #cbd5e1 !important;
  text-align: left !important;
}

.pmpro .pmpro_table td,
.pmpro table.pmpro_table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  color: #334155 !important;
}

/* --------------------------------------------------------------------------
   9. Account Hub Navigation
   -------------------------------------------------------------------------- */
.pmpro .pmpro_account_links ul,
.pmpro #pmpro_account-links ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.pmpro .pmpro_account_links li a,
.pmpro #pmpro_account-links li a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 4px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-decoration: none !important;
}

.pmpro .pmpro_account_links li a:hover,
.pmpro #pmpro_account-links li a:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   10. Responsive Breakpoint
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pmpro .pmpro_cols-2,
  .pmpro .pmpro_form_fields.pmpro_cols-2,
  .pmpro .pmpro_cols-3 {
    grid-template-columns: 1fr !important;
  }
  .pmpro .pmpro_table {
    display: block !important;
    overflow-x: auto !important;
  }
}