/**
 * Fundcollector Admin Styles
 * 
 * @package   Fundcollector
 * @author    Bruno Alesiani
 * @copyright Copyright (c) 2025, Bruno Alesiani
 */

/* ==========================================================================
   MENU ICON STYLES (loaded on all admin pages)
   ========================================================================== */

/* Fundcollector menu icon states management */
/* Default state - normal icon - WordPress standard gray #a7aaad */
#adminmenu .toplevel_page_fundcollector-donations-list .wp-menu-image img,
#adminmenu li.menu-top.toplevel_page_fundcollector-donations-list .wp-menu-image img,
#adminmenu li.toplevel_page_fundcollector-donations-list div.wp-menu-image img {
  opacity: 1 !important;
  transition: all 0.2s ease !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 8px auto !important;
  display: block !important;
  filter: brightness(0) saturate(100%) invert(65%) sepia(4%) saturate(544%) hue-rotate(202deg)
    brightness(97%) contrast(93%) !important;
}

/* Hover state - white icon to work on any hover background color (dark, blue, purple, etc.)
   WordPress 7 "Modern" theme uses #3858e9 (purple/blue) on hover, while older themes use
   dark backgrounds. White (#fff) is visible on all of them. */
#adminmenu .toplevel_page_fundcollector-donations-list:hover .wp-menu-image img,
#adminmenu li.menu-top.toplevel_page_fundcollector-donations-list:hover .wp-menu-image img,
#adminmenu li.toplevel_page_fundcollector-donations-list:hover div.wp-menu-image img {
  opacity: 1 !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 8px auto !important;
  display: block !important;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
    brightness(100%) contrast(100%) !important;
}

/* Active/Current state - white color #fff */
#adminmenu li.current .toplevel_page_fundcollector-donations-list .wp-menu-image img,
#adminmenu li.wp-has-current-submenu .toplevel_page_fundcollector-donations-list .wp-menu-image img,
#adminmenu li.current.menu-top.toplevel_page_fundcollector-donations-list .wp-menu-image img,
#adminmenu
  li.wp-has-current-submenu.menu-top.toplevel_page_fundcollector-donations-list
  .wp-menu-image
  img,
#adminmenu li.current.toplevel_page_fundcollector-donations-list div.wp-menu-image img,
#adminmenu
  li.wp-has-current-submenu.toplevel_page_fundcollector-donations-list
  div.wp-menu-image
  img {
  opacity: 1 !important;
  width: 20px !important;
  height: 20px !important;
  padding: 0 !important;
  margin: 8px auto !important;
  display: block !important;
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg)
    brightness(100%) contrast(100%) !important;
}

/* High-specificity override to prevent external CSS from squashing the icon */
#adminmenu
  li.toplevel_page_fundcollector-donations-list
  .wp-menu-image
  img[src*='fundcollector-icon'],
#adminmenu
  .toplevel_page_fundcollector-donations-list
  div.wp-menu-image
  img[src*='fundcollector-icon'],
body.wp-admin #adminmenu .toplevel_page_fundcollector-donations-list .wp-menu-image img {
  padding: 0 !important;
  margin: 8px auto !important;
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   GENERAL ADMIN STYLES
   ========================================================================== */

/* Ensure the wrap has minimum height to push footer to bottom */
.wrap {
  min-height: 600px; /* Minimum height to push footer down */
  box-sizing: border-box;
  clear: both;
}

#wpbody-content {
  padding-bottom: 20px;
}

/* Fix for footer text appearing in middle of page */
#wpfooter {
  position: static; /* Let WordPress handle positioning */
  clear: both;
  z-index: 10;
  margin-top: 40px;
  width: auto; /* Remove 100% which causes horizontal scroll */
}

.fundcollector-settings-form {
  clear: both;
  display: block;
  overflow: hidden; /* clear internal floats */
}

.spinner {
  float: none;
  margin: 0 10px;
  display: none;
  visibility: visible;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #2196f3;
  border-radius: 50%;
  animation: spinner-rotation 0.8s linear infinite;
  opacity: 0.7;
  filter: alpha(opacity=70);
  vertical-align: middle;
  position: relative;
  top: 2px;
}

.spinner.is-active {
  display: inline-block;
}

@keyframes spinner-rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   TAB NAVIGATION STYLING
   ========================================================================== */

.nav-tab-wrapper {
  padding: 2px 2px 0 2px;
  margin: 0 0 0 0;
  line-height: inherit;
  border-bottom: none;
}

.nav-tab-wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.nav-tab {
  float: left;
  border: 1px solid #ccd0d4;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  margin-left: 0.5em;
  margin-bottom: 0;
  padding: 5px 10px;
  font-size: 14px;
  line-height: 1.71428571;
  background: #f0f0f1;
  color: #50575e;
  text-decoration: none;
  cursor: pointer;
}

.nav-tab:first-child {
  margin-left: 0;
}

.nav-tab:hover {
  background-color: #fff;
  color: #3c434a;
}

.nav-tab.nav-tab-active {
  margin-bottom: -1px;
  padding-bottom: calc(5px + 1px);
  color: #1d2327;
  background: #fff;
  border-bottom: 1px solid #fff;
}

/* Fix focus outline being cut off - use box-shadow instead of outline */
.nav-tab:focus {
  outline: 1px solid #2271b1;
  outline-offset: 0;
  box-shadow: 0 0 0 1px #2271b1;
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   TAB CONTENT STYLING
   ========================================================================== */

.tab-pane {
  display: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0 0 4px 4px;
  padding: 20px;
  overflow-x: hidden;
}

.tab-pane.active {
  display: block;
}

/* Special class for email tab when a configuration section is active */
#tab-email.tab-pane.active.config-active {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* ==========================================================================
   FORM STYLING
   ========================================================================== */

.fundcollector-settings-form .form-section,
.form-section {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.fundcollector-settings-form .form-row,
.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 15px;
  gap: 0;
}

.fundcollector-settings-form .form-row label,
.form-row label,
.form-label-heading {
  width: 250px;
  min-width: 250px;
  display: inline-block;
  margin-right: 10px;
  text-align: right;
  flex-shrink: 0;
  font-weight: 600;
}

/* Keep option labels next to radio/checkbox controls. */
.fundcollector-settings-form .form-row input[type='radio'] + label,
.fundcollector-settings-form .form-row input[type='checkbox'] + label,
.form-row input[type='radio'] + label,
.form-row input[type='checkbox'] + label {
  width: auto !important;
  min-width: 0 !important;
  display: inline-block !important;
  margin: 0 !important;
  text-align: left !important;
  font-weight: 400;
}

.fundcollector-settings-form .form-row input[type='text'],
.fundcollector-settings-form .form-row input[type='email'],
.fundcollector-settings-form .form-row input[type='password'],
.fundcollector-settings-form .form-row input[type='number'],
.fundcollector-settings-form .form-row select,
.form-row input[type='text'],
.form-row input[type='email'],
.form-row input[type='password'],
.form-row input[type='number'],
.form-row select {
  flex: 0 0 auto;
  min-width: 300px;
  max-width: 400px;
}

.fundcollector-settings-form .form-row input[type='checkbox'],
.form-row input[type='checkbox'] {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  min-width: auto !important;
  max-width: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  cursor: pointer;
}

/* Radio buttons same size as checkboxes */
.fundcollector-settings-form .form-row input[type='radio'],
.form-row input[type='radio'] {
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  min-width: auto !important;
  max-width: 16px !important;
  margin: 0 5px 0 0 !important;
  padding: 0 !important;
  vertical-align: middle;
  cursor: pointer;
}

/* ==========================================================================
   TOGGLE SWITCH (SLIDER) - For Forms Page
   ========================================================================== */

/* Toggle switch container */
.fundcollector-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

/* Hide default HTML checkbox */
.fundcollector-toggle input[type='checkbox'] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* The slider */
.fundcollector-toggle .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.3s;
  border-radius: 24px;
}

.fundcollector-toggle .slider:before {
  position: absolute;
  content: '';
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

/* Checked state - blue background */
.fundcollector-toggle input:checked + .slider {
  background-color: #2196f3;
}

.fundcollector-toggle input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

.fundcollector-toggle input:checked + .slider:before {
  transform: translateX(26px);
}

/* Disabled state */
.fundcollector-toggle input:disabled + .slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.fundcollector-settings-form .form-row p,
.form-row p {
  margin: 0;
  padding: 0;
  color: #666;
  font-size: 13px;
}

/* Correzione specifica per l'allineamento dei testi in italico - sempre sulla riga successiva */
.form-row > p {
  flex-basis: 100%;
  margin-left: 260px !important;
  margin-top: 5px;
  margin-bottom: 0;
  text-align: left;
  order: 10;
  padding-left: 0 !important;
}

/* Testi descrittivi dentro i paragrafi (con <i> o <em>) */
.form-row > p i,
.form-row > p em {
  font-style: italic;
  color: #666;
}

/* Special alignment for email editor rows */
.email-editor-row {
  align-items: flex-start;
}

.email-editor-row label {
  margin-top: 120px;
}

/* Email editor rows - now using email-editor-row class for all editors */
.form-row.email-editor-row {
  align-items: flex-start;
}

/* Email Sub-tabs Navigation */
.email-sub-tabs {
  margin-bottom: 20px;
  display: flex;
  border-bottom: 1px solid #ddd;
}

.email-sub-tab-button {
  padding: 10px 15px;
  margin-right: 5px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background-color: #f5f5f5;
  color: #23282d;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.2s ease;
}

.email-sub-tab-button:hover {
  background-color: #e8e8e8;
}

.email-sub-tab-button.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
  font-weight: 500;
}

.email-sub-tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in;
}

.email-sub-tab-content.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Email Cards Container */
.email-cards-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 20px 0;
  max-width: 100%;
}

/* Email Configuration Sections */
.email-main-menu {
  display: none;
}

.email-main-menu.active {
  display: block;
  background: #fff;
}

.email-config-section {
  display: none;
}

.email-config-section.active {
  display: block;
  background: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
}

.email-config-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #ddd;
  margin-top: 0;
}

.email-back-button {
  margin-bottom: 10px;
  background: #f1f1f1;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  color: #333;
}

.email-back-button:hover {
  background: #e0e0e0;
  color: #333;
}

@media (max-width: 768px) {
  .email-cards-container {
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 15px 0;
  }
  
  .email-sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
  }
  
  .email-sub-tab-button {
    flex: 0 1 auto;
    font-size: 13px;
    padding: 8px 12px;
  }
}

/* Extra small screens - additional adjustments */
@media (max-width: 480px) {
  .email-cards-container {
    gap: 12px;
    margin: 12px 0;
  }
  
  .email-sub-tab-button {
    font-size: 12px;
    padding: 6px 10px;
  }
  
  .email-notifications-list {
    border-radius: 4px;
  }
}

.submit-button-container {
  margin-top: 20px;
  clear: both;
  padding: 4px;
}

/* ==========================================================================
   PAYMENT METHOD NAVIGATION
   ========================================================================== */

.payment-method-nav {
  margin-bottom: 20px;
  display: flex;
  border-bottom: 1px solid #ddd;
}

.payment-method-link {
  padding: 10px 15px;
  margin-right: 5px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-bottom: none;
  outline: none;
  border-radius: 3px 3px 0 0;
  background-color: #f5f5f5;
  color: #23282d;
  cursor: pointer;
}

.payment-method-link:focus {
  outline: none;
  box-shadow: none;
}

.payment-method-link.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.payment-method-section {
  display: none;
}

.payment-method-section.active {
  display: block;
}

/* ==========================================================================
   EDITOR STYLING
   ========================================================================== */

/* Make sure the editor doesn't overflow */
.wp-editor-container {
  max-width: 100%;
  box-sizing: border-box;
}

#wp-fundcollector_bank_transfer_instructions-wrap {
  max-width: 100%;
  box-sizing: border-box;
}

.mce-tinymce {
  box-sizing: border-box;
  max-width: 100%;
}

/* ==========================================================================
   EMAIL SUBTABS STYLING
   ========================================================================== */

.email-subtabs-nav {
  margin-bottom: 20px;
  display: flex;
  border-bottom: 1px solid #ddd;
}

.email-subtab-link {
  padding: 10px 15px;
  margin-right: 5px;
  text-decoration: none;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background-color: #f5f5f5;
  color: #23282d;
  cursor: pointer;
}

.email-subtab-link.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.email-subtab-content {
  display: none;
}

.email-subtab-content.active {
  display: block;
}

/* ==========================================================================
   EMAIL CONFIGURATION LIST
   ========================================================================== */

.email-notifications-list {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100%;
}

.email-notification-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
  box-sizing: border-box;
  width: 100%;
}

.email-notification-item:last-child {
  border-bottom: none;
}

.email-notification-item:hover {
  background-color: #f8f9fa;
}

.notification-icon {
  flex-shrink: 0;
  margin-right: 15px;
  width: 40px;
  height: 40px;
  background: #f1f1f1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-icon .dashicons {
  font-size: 20px;
  color: #666;
}

.notification-info {
  flex-grow: 1;
  flex-shrink: 1;
  width: 100%;
  max-width: 500px;
  margin-right: 40px;
  min-width: 0;
}

.notification-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #23282d;
}

.notification-info p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

.notification-status {
  flex-shrink: 0;
  margin-right: 15px;
  min-width: 80px;
}

.status-indicator {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}

.status-indicator.enabled {
  color: #00a32a;
}

.status-indicator.disabled {
  color: #d63638;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}

.status-indicator.enabled .status-dot {
  background-color: #00a32a;
}

.status-indicator.disabled .status-dot {
  background-color: #d63638;
}

.notification-action {
  flex-shrink: 0;
}

.notification-action .email-config-button {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 4px;
  background: #f1f1f1;
  border: 1px solid #ddd;
  color: #333;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notification-action .email-config-button:hover {
  background: #e0e0e0;
  border-color: #ccc;
  color: #333;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .email-notification-item {
    flex-wrap: wrap;
    padding: 12px 15px;
  }

  .notification-icon {
    margin-right: 12px;
    width: 36px;
    height: 36px;
  }
  
  .notification-icon .dashicons {
    font-size: 18px;
  }

  .notification-info {
    width: 100%;
    max-width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }
  
  .notification-info h4 {
    font-size: 13px;
  }
  
  .notification-info p {
    font-size: 12px;
  }

  .notification-status {
    min-width: auto;
    margin-right: 10px;
  }
  
  .notification-action {
    margin-left: auto;
  }
  
  .notification-action .email-config-button {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Extra small screens (phones) */
@media (max-width: 480px) {
  .email-notification-item {
    padding: 10px 12px;
  }
  
  .notification-icon {
    width: 32px;
    height: 32px;
    margin-right: 10px;
  }
  
  .notification-icon .dashicons {
    font-size: 16px;
  }
  
  .notification-info h4 {
    font-size: 12px;
  }
  
  .notification-info p {
    font-size: 11px;
    line-height: 1.3;
  }
  
  .status-indicator {
    font-size: 11px;
  }
  
  .notification-action .email-config-button {
    padding: 5px 8px;
    font-size: 11px;
  }
}

/* ==========================================================================
   PAYPAL SETUP WIZARD SPECIFIC STYLES
   ========================================================================== */

#paypal-setup-wizard {
  display: none;
  background: #f8f9fa;
  border: 2px solid #4caf50;
  border-radius: 8px;
  padding: 20px;
  margin: 20px 0;
  position: relative !important;
  z-index: 1000 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 50px !important;
  visibility: hidden;
}

#paypal-setup-wizard.wizard-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  background: #f8f9fa !important;
  border: 2px solid #4caf50 !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 20px 0 !important;
}

#paypal-setup-wizard h4 {
  color: #4caf50;
  margin-top: 0;
}

#paypal-setup-wizard h4,
#paypal-setup-wizard h5,
#paypal-setup-wizard p,
#paypal-setup-wizard li,
#paypal-setup-wizard ol,
#paypal-setup-wizard ul {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: inherit !important;
  line-height: 1.4 !important;
  margin: inherit !important;
  padding: inherit !important;
}

.wizard-step {
  margin-bottom: 25px !important;
  display: block !important;
  visibility: visible !important;
}

.wizard-step h5 {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  font-size: 15px !important;
  font-weight: bold !important;
  color: #2196f3 !important;
}

.wizard-step ol,
.wizard-step ul {
  padding-left: 20px !important;
  margin-bottom: 15px !important;
}

.wizard-step li {
  margin-bottom: 8px !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   FORMS PAGE STYLES
   ========================================================================== */

/* Back button styled as button (same as email settings) */
.fundcollector-back-link {
  display: inline-flex;
  align-items: center;
  color: #2271b1;
  background-color: #f6f7f7;
  text-decoration: none;
  font-size: 14px;
  margin-bottom: 20px;
  font-weight: 400;
  padding: 8px 12px;
  border: 1px solid #2271b1;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.fundcollector-back-link:hover {
  color: #135e96;
  background-color: #f0f0f1;
  border-color: #135e96;
}

.fundcollector-back-link .dashicons {
  margin-right: 5px;
  font-size: 16px;
  line-height: 20px;
  height: 16px;
  width: 16px;
}

/* Shortcode section with grey background box */
.fundcollector-shortcode-info {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
  margin: 20px 0;
}

.fundcollector-shortcode-info h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}

.fundcollector-shortcode-info p {
  margin-bottom: 10px;
  color: #666;
}

.fundcollector-shortcode-info code {
  display: inline-block;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 8px 12px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 13px;
  color: #333;
}

.fundcollector-admin-tabs {
  display: flex;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
}

.fundcollector-tab {
  padding: 10px 15px;
  margin-right: 5px;
  cursor: pointer;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: #f5f5f5;
  text-decoration: none;
  color: #23282d;
  transition: background-color 0.2s ease;
}

.fundcollector-tab.active {
  background: #fff;
  border-color: #ccc;
  margin-bottom: -1px;
  padding-bottom: 11px;
  font-weight: 600;
}

.fundcollector-tab:hover {
  background: #e0e0e0;
}

.fundcollector-tab-pane {
  display: none;
}

.fundcollector-tab-pane.active {
  display: block;
}

/* ==========================================================================
   SEARCH SPINNER STYLES
   ========================================================================== */

/* Search form container */
.fundcollector-search-form .search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Search spinner - appears during search */
.fundcollector-search-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 115, 170, 0.2);
  border-top-color: #0073aa;
  border-radius: 50%;
  animation: fundcollector-spin 0.8s linear infinite;
  margin-left: 8px;
  flex-shrink: 0;
}

.fundcollector-search-spinner.is-active {
  display: inline-block;
}

@keyframes fundcollector-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Search button loading state */
.fundcollector-search-form button.is-loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Search input when loading */
.fundcollector-search-form input[type="search"].is-loading {
  background-color: #f0f0f1;
}

/* ==========================================================================
   DONATIONS LIST STYLES
   ========================================================================== */

.fundcollector-donations-list {
  margin-top: 20px;
}

.fundcollector-no-donations {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 30px;
  margin-top: 20px;
  text-align: center;
}

.fundcollector-no-donations p {
  margin: 0;
  font-size: 14px;
  color: #666;
}

.fundcollector-donations-list table {
  width: 100%;
}

/* Desktop: extra spacing between Amount and next column for readability */
@media screen and (min-width: 769px) {
  table.wp-list-table.donations .column-amount {
    padding-right: 1.5em !important;
  }
}

/* Donation status colors */
.donation-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
}

.donation-status.completed {
  background-color: #d4edda;
  color: #155724;
}

.donation-status.pending {
  background-color: #fff3cd;
  color: #856404;
}

.donation-status.cancelled {
  background-color: #f8d7da;
  color: #721c24;
}

.donation-status.failed {
  background-color: #f8d7da;
  color: #721c24;
}

.donation-status.expired {
  background-color: #e2e3e5;
  color: #383d41;
}

.donation-status.refunded {
  background-color: #d1ecf1;
  color: #0c5460;
}

/* Donation ID actions */
.button-link {
  text-decoration: none;
  font-size: 13px;
  padding: 0 5px;
}

.button-link:hover {
  text-decoration: underline;
}

.button-link.delete-button {
  color: #d63638;
}

.button-link.delete-button:hover {
  color: #a00;
}

/* Hide donation actions by default, show only on row hover */
.donation-id-actions {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

tr:hover .donation-id-actions {
  opacity: 1;
}

/* Table rows use default arrow cursor; pointer only on interactive elements */
table.donations tbody tr,
table.fundcollector-donors-table tbody tr,
table.fundcollector-recurring-table tbody tr {
  cursor: default;
}

table.donations tbody tr a,
table.donations tbody tr button,
table.fundcollector-donors-table tbody tr a,
table.fundcollector-donors-table tbody tr button,
table.fundcollector-recurring-table tbody tr a,
table.fundcollector-recurring-table tbody tr button {
  cursor: pointer;
}

/* ==========================================================================
   FORMS LIST STYLES
   ========================================================================== */

.fundcollector-new-form-container {
  background: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 20px;
}

.fundcollector-new-form-container.hidden {
  display: none;
}

/* ==========================================================================
   FORMS PAGE STYLES
   ========================================================================== */

.fundcollector-admin-container {
  background: #fff;
  padding: 20px;
  margin-top: 20px;
}

/* ==========================================================================
   UNIFIED FORM PREVIEW
   ========================================================================== */

.fundcollector-preview-unified {
  box-sizing: border-box;
}

.fundcollector-preview-accordion-item {
  border-bottom: 1px solid #e0e0e0;
}

.fundcollector-preview-accordion-item:last-child {
  border-bottom: none !important;
}

.fundcollector-preview-accordion-header {
  transition: background-color 0.2s ease;
}

.fundcollector-preview-accordion-header:hover {
  background-color: #f8f9fa !important;
}

.fundcollector-preview-accordion-header.active {
  background-color: #f0f7ff !important;
  border-left: 3px solid #0073aa;
  padding-left: 17px !important;
}

.fundcollector-preview-accordion-content {
  transition: max-height 0.3s ease;
}

.fundcollector-preview-summary {
  box-sizing: border-box;
}

.fundcollector-tab {
  display: inline-block;
  padding: 10px 15px;
  margin-right: 5px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background-color: #f5f5f5;
  text-decoration: none;
  color: #23282d;
}

.fundcollector-tab.active {
  background-color: #fff;
  border-bottom: 1px solid #fff;
  margin-bottom: -1px;
}

.fundcollector-tab-content {
  display: none;
  padding: 20px;
  border: 1px solid #ddd;
  background: #fff;
}

.fundcollector-tab-content.active {
  display: block;
}

/* ==========================================================================
   MODAL STYLES
   ========================================================================== */

.fundcollector-modal {
  display: none;
  position: fixed;
  z-index: 100000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.6);
}

.fundcollector-modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 30px;
  border: 1px solid #888;
  border-radius: 5px;
  width: 80%;
  max-width: 800px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.fundcollector-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 20px;
}

.fundcollector-modal-close:hover,
.fundcollector-modal-close:focus {
  color: #000;
  text-decoration: none;
}

/* Last viewed donation row highlight */
tr.fundcollector-row-last-viewed {
  background-color: #fff8e5 !important;
  box-shadow: inset 0 0 0 2px #f0c14b;
  animation: fundcollector-highlight-pulse 0.5s ease-out;
}

tr.fundcollector-row-last-viewed td {
  background-color: transparent !important;
}

@keyframes fundcollector-highlight-pulse {
  0% {
    background-color: #ffe680;
    box-shadow: inset 0 0 0 3px #f0c14b;
  }
  100% {
    background-color: #fff8e5;
    box-shadow: inset 0 0 0 2px #f0c14b;
  }
}

/* Donation Details Popup Content */
.fundcollector-donation-details {
  margin-top: 20px;
}

.donation-detail-row {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #e0e0e0;
}

.donation-detail-row:last-child {
  border-bottom: none;
}

.donation-detail-label {
  flex: 0 0 200px;
  font-weight: 600;
  color: #333;
  padding-right: 15px;
}

.donation-detail-value {
  flex: 1;
  color: #666;
  word-break: break-word;
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

.fundcollector-loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.fundcollector-error {
  background-color: #f8d7da;
  color: #721c24;
  padding: 12px;
  border: 1px solid #f5c6cb;
  border-radius: 4px;
  margin: 10px 0;
}

.fundcollector-success {
  background-color: #d4edda;
  color: #155724;
  padding: 12px;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  margin: 10px 0;
}

.fundcollector-info {
  background-color: #d1ecf1;
  color: #0c5460;
  padding: 12px;
  border: 1px solid #bee5eb;
  border-radius: 4px;
  margin: 10px 0;
}

.hidden {
  display: none !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE & TABLET
   ========================================================================== */

/* Tablet (768px - 1024px) */
@media screen and (max-width: 1024px) {
  /* Tab navigation: wrap tabs on multiple lines (like Charitable) */
  .nav-tab-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 0;
    padding: 2px 2px 0 2px;
  }

  .nav-tab {
    flex-shrink: 0;
    white-space: nowrap;
    margin: 0 4px 0 0;
    border-bottom: 1px solid #ccd0d4;
  }

  .nav-tab.nav-tab-active {
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
  }

  /* Tab content: attach to bottom of tabs */
  .fundcollector-tab-content {
    margin-top: 0;
    border-top: 1px solid #ccd0d4;
  }

  /* Form rows: labels above fields on smaller screens */
  .fundcollector-settings-form .form-row,
  .form-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .fundcollector-settings-form .form-row label,
  .form-row label,
  .form-label-heading {
    width: 100%;
    min-width: auto;
    text-align: left;
    margin-right: 0;
    margin-bottom: 8px;
  }

  .fundcollector-settings-form .form-row input[type='text'],
  .fundcollector-settings-form .form-row input[type='email'],
  .fundcollector-settings-form .form-row input[type='password'],
  .fundcollector-settings-form .form-row input[type='number'],
  .fundcollector-settings-form .form-row select,
  .form-row input[type='text'],
  .form-row input[type='email'],
  .form-row input[type='password'],
  .form-row input[type='number'],
  .form-row select {
    width: 100%;
    min-width: auto;
    max-width: 500px;
  }

  /* Description text below fields */
  .form-row > p {
    margin-left: 0 !important;
    width: 100%;
    max-width: 500px;
  }

  /* Email editor rows */
  .email-editor-row label {
    margin-top: 0;
  }

  /* TinyMCE editors: ensure reasonable width */
  .wp-editor-container {
    max-width: 100%;
  }

  /* Notification info - full width */
  .notification-info {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/* Mobile (< 768px) */
@media screen and (max-width: 768px) {
  /* Tab navigation: wrap tabs on multiple lines without scrollbar */
  .nav-tab-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 0;
    padding: 2px 2px 0 2px;
  }

  .nav-tab {
    flex: 0 1 auto;
    white-space: nowrap;
    font-size: 13px;
    padding: 8px 12px;
    margin: 0 4px 0 0;
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #ccd0d4;
  }

  .nav-tab.nav-tab-active {
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
  }

  /* Tab content: attach to bottom of tabs */
  .fundcollector-tab-content {
    margin-top: 0;
    border-top: 1px solid #ccd0d4;
  }

  /* Form sections: reduce padding */
  .fundcollector-settings-form .form-section,
  .form-section {
    padding: 12px;
  }

  .tab-pane {
    padding: 15px;
  }

  /* Form rows: stack vertically */
  .fundcollector-settings-form .form-row,
  .form-row {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .fundcollector-settings-form .form-row label,
  .form-row label,
  .form-label-heading {
    width: 100%;
    min-width: auto;
    text-align: left;
    margin-right: 0;
    margin-bottom: 8px;
    font-weight: 600;
  }

  .fundcollector-settings-form .form-row input[type='radio'] + label,
  .fundcollector-settings-form .form-row input[type='checkbox'] + label,
  .form-row input[type='radio'] + label,
  .form-row input[type='checkbox'] + label {
    width: auto !important;
    min-width: 0 !important;
    margin-bottom: 0 !important;
    line-height: 1.35;
  }

  /* Input fields and selects: reasonable max width on mobile */
  .fundcollector-settings-form .form-row input[type='text'],
  .fundcollector-settings-form .form-row input[type='email'],
  .fundcollector-settings-form .form-row input[type='password'],
  .fundcollector-settings-form .form-row input[type='number'],
  .fundcollector-settings-form .form-row select,
  .form-row input[type='text'],
  .form-row input[type='email'],
  .form-row input[type='password'],
  .form-row input[type='number'],
  .form-row select {
    width: 100%;
    min-width: 200px;
    max-width: 400px;
    box-sizing: border-box;
  }

  /* Radio buttons: ensure proper centering */
  .fundcollector-settings-form .form-row input[type='radio'],
  .form-row input[type='radio'] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 8px 0 0 !important;
    vertical-align: middle;
    position: relative;
    top: 0;
  }

  /* Checkboxes: ensure proper centering */
  .fundcollector-settings-form .form-row input[type='checkbox'],
  .form-row input[type='checkbox'] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 8px 0 0 !important;
    vertical-align: middle;
    position: relative;
    top: 0;
  }

  /* Description text */
  .form-row > p {
    margin-left: 0 !important;
    width: 100%;
    max-width: 400px;
    font-size: 12px;
  }

  /* Email editor: adjust margins */
  .email-editor-row label {
    margin-top: 0;
  }

  /* TinyMCE editors: ensure minimum readable width on mobile */
  .wp-editor-container {
    max-width: 100%;
    min-width: 280px;
  }

  .wp-editor-container iframe,
  .wp-editor-container textarea {
    min-width: 280px !important;
    max-width: 100%;
  }

  /* ========== FIX: WordPress editor tabs (Add Media/Visual/Code) above editor on mobile ========== */
  /* Force the editor wrap to stack vertically on mobile */
  .wp-editor-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  /* Force the tabs container (Add Media, Visual, Code) to be full width and above editor */
  .wp-editor-wrap > .wp-editor-tabs,
  .wp-editor-wrap > div:first-child:not(.wp-editor-container),
  .wp-editor-wrap > .wp-media-buttons {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-bottom: 5px !important;
    order: 1 !important;
    float: none !important;
    clear: both !important;
  }

  /* The editor container comes after the tabs */
  .wp-editor-wrap > .wp-editor-container {
    width: 100% !important;
    max-width: 100% !important;
    order: 2 !important;
    float: none !important;
    clear: both !important;
  }

  /* Ensure the tabs bar (Visual/Code) is full width and stacked */
  .wp-editor-tabs {
    width: 100% !important;
    display: block !important;
    margin-bottom: 5px !important;
    float: none !important;
    clear: both !important;
  }

  .wp-switch-editor {
    display: inline-block !important;
    width: auto !important;
    float: none !important;
  }

  /* Media buttons container should be full width */
  .wp-media-buttons {
    width: 100% !important;
    margin-bottom: 5px !important;
    float: none !important;
    clear: both !important;
  }

  /* Force any divs inside editor wrap to stack vertically - target all direct children */
  .wp-editor-wrap > div {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
  }

  /* Specific fix for the container that holds Add Media button and Visual/Code tabs */
  .wp-editor-wrap > div:first-of-type {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    order: 1 !important;
  }

  /* Ensure Add Media button is above Visual/Code tabs */
  .wp-media-buttons {
    order: 1 !important;
  }

  .wp-editor-tabs {
    order: 2 !important;
  }

  /* Make sure TinyMCE wrapper has proper width */
  #wp-fundcollector_donor_paypal_receipt_email_content-wrap,
  #wp-fundcollector_donor_bank_transfer_receipt_email_content-wrap,
  #wp-fundcollector_admin_paypal_notification_email_content-wrap,
  #wp-fundcollector_admin_bank_transfer_notification_email_content-wrap,
  #wp-fundcollector_bank_transfer_instructions-wrap {
    max-width: 100%;
    min-width: 280px;
  }

  /* Payment method tabs: wrap instead of scroll */
  .payment-method-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .payment-method-link {
    flex: 0 1 auto;
    font-size: 13px;
    padding: 8px 12px;
  }

  /* Email subtabs: wrap instead of scroll */
  .email-subtabs-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .email-subtab-link {
    flex: 0 1 auto;
    font-size: 13px;
    padding: 8px 12px;
  }

  /* Notification list: adjust for mobile */
  .email-notification-item {
    flex-wrap: wrap;
    padding: 12px 15px;
  }

  .notification-info {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .notification-status {
    min-width: auto;
    margin-right: 10px;
  }

  /* Modal: narrower on mobile to avoid overflow */
  .fundcollector-modal-content {
    width: 90%;
    max-width: 90%;
    margin: 10% auto;
    padding: 20px;
  }

  /* Donation details: stack layout */
  .donation-detail-row {
    flex-direction: column;
  }

  .donation-detail-label {
    flex: 0 0 auto;
    margin-bottom: 5px;
    padding-right: 0;
  }

  .donation-detail-value {
    flex: 1;
  }

  /* Admin tabs: wrap instead of scroll */
  .fundcollector-admin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .fundcollector-tab {
    flex: 0 1 auto;
    font-size: 13px;
    padding: 8px 12px;
  }

  /* ========== FIX 1: Honeypot "Generate New" button wrap on mobile ========== */
  /* Force the honeypot field container to wrap on mobile */
  #fundcollector_honeypot_field_name {
    width: 100% !important;
    max-width: 250px !important;
    margin-bottom: 10px;
  }

  /* Make the parent flex container wrap */
  #fundcollector_honeypot_field_name + button,
  #fundcollector_generate_honeypot_name {
    flex-shrink: 0;
  }

  /* Target the parent div with inline flex style */
  div[style*='display: flex'][style*='align-items: center'] {
    flex-wrap: wrap !important;
  }

  /* ========== FIX 2: Site Key, Secret Key and API keys overflow ========== */
  /* Limit width of long API keys and credentials */
  input[name='fundcollector_recaptcha_site_key'],
  input[name='fundcollector_recaptcha_secret_key'],
  input[name='fundcollector_paypal_sandbox_client_id'],
  input[name='fundcollector_paypal_sandbox_client_secret'],
  input[name='fundcollector_paypal_sandbox_webhook_id'],
  input[name='fundcollector_paypal_live_client_id'],
  input[name='fundcollector_paypal_live_client_secret'],
  input[name='fundcollector_paypal_live_webhook_id'] {
    max-width: 320px !important;
    width: 100% !important;
  }

  /* ========== FIX 3: Test SMTP Configuration field ========== */
  /* Limit width of test SMTP email input */
  input[type='email'][placeholder*='studioranking'],
  .form-row input[type='email']:not([name*='from']) {
    max-width: 300px !important;
  }

  /* ========== FIX 4: ALL editors - stack vertically on mobile ========== */
  /* CRITICAL: Force ALL form rows with editors (email-editor-row class) to stack label above editor */

  /* Target email editor rows specifically - compatible with all browsers */
  .fundcollector-settings-form .form-row.email-editor-row,
  .form-row.email-editor-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
  }

  /* Force label to be full width and display as block */
  .form-row.email-editor-row > label {
    width: 100% !important;
    display: block !important;
    margin-bottom: 5px !important;
  }

  /* Force the editor container to be full width - override inline style */
  .form-row.email-editor-row > div[style],
  .form-row.email-editor-row > div[style*='flex-grow'],
  .form-row.email-editor-row > div[style*='calc(100%'] {
    width: 100% !important;
    max-width: 100% !important;
    flex-grow: 1 !important;
  }

  /* Make the paragraph and table under editors full width */
  .form-row p.description,
  .form-row > div > p,
  .form-row.email-editor-row p {
    max-width: none !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 5px 0 !important;
  }

  /* Template tags table - responsive vertical layout */
  .form-row table,
  .form-row.email-editor-row table {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-top: 10px !important;
  }

  .form-row table tbody,
  .form-row.email-editor-row table tbody {
    display: block !important;
    width: 100% !important;
  }

  .form-row table tr,
  .form-row.email-editor-row table tr {
    display: flex !important;
    flex-direction: column !important;
    border-bottom: 1px solid #e0e0e0;
    padding: 8px 0 !important;
    width: 100% !important;
  }

  .form-row table td,
  .form-row.email-editor-row table td {
    display: block !important;
    width: 100% !important;
    padding: 2px 0 !important;
    border: none !important;
  }

  .form-row table td code,
  .form-row.email-editor-row table td code {
    font-weight: bold;
    background: #f0f0f0;
    padding: 2px 6px;
    border-radius: 3px;
  }

  /* ========== FIX 5: Long links in PayPal wizard ========== */
  /* Make long URLs break and wrap properly - use correct ID */
  #paypal-setup-wizard a,
  #paypal-setup-wizard li a,
  .wizard-step a {
    word-break: break-all !important;
    overflow-wrap: break-word !important;
    display: inline-block !important;
    max-width: 100% !important;
  }

  /* Also handle code blocks in wizard */
  #paypal-setup-wizard code {
    word-break: break-all !important;
    white-space: pre-wrap !important;
    display: inline-block !important;
    max-width: 100% !important;
  }

  /* ========== FIX 6: Center radio buttons and checkboxes properly ========== */
  /* CRITICAL: Remove any background, outline or decoration WordPress might add */
  .fundcollector-settings-form input[type='radio'],
  .fundcollector-settings-form input[type='checkbox'],
  input[type='radio'],
  input[type='checkbox'] {
    width: 18px !important;
    height: 18px !important;
    margin: 0 8px 0 0 !important;
    vertical-align: middle !important;
    position: static !important;
    transform: none !important;
    flex-shrink: 0 !important;
    /* Reset all custom styling to use native browser appearance */
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
    /* Remove any background or outline that might cause the blue box */
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    /* Ensure the native control is shown */
    accent-color: #0073aa;
  }

  /* Reset any ::before or ::after pseudo-elements that might add custom styling */
  .fundcollector-settings-form input[type='radio']::before,
  .fundcollector-settings-form input[type='checkbox']::before,
  .fundcollector-settings-form input[type='radio']::after,
  .fundcollector-settings-form input[type='checkbox']::after,
  input[type='radio']::before,
  input[type='checkbox']::before,
  input[type='radio']::after,
  input[type='checkbox']::after {
    display: none !important;
    content: none !important;
  }

  /* Ensure label containers align items properly */
  .form-row > div > div {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px;
  }

  /* For labels that contain just text (not inputs) */
  .form-row > label:first-child {
    display: block !important;
    margin-bottom: 8px !important;
  }

  /* ========== FIX 7: Reduce spacing between Email Subject and Email message ========== */
  /* CRITICAL: Reduce all spacing in form rows on mobile */

  /* Reduce margin between all form rows in email config */
  .fundcollector-settings-form .form-row,
  .form-row {
    margin-bottom: 8px !important;
  }

  /* Remove top margin on email-editor-row */
  .fundcollector-settings-form .form-row.email-editor-row,
  .form-row.email-editor-row {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
  }

  /* Reduce the description paragraph margin - target paragraphs with <i> tags */
  .form-row p,
  .form-row > p {
    margin-top: 3px !important;
    margin-bottom: 3px !important;
  }

  /* ========== FIX 8: Test SMTP Configuration field width ========== */
  /* Target the email input specifically for test SMTP - use ID selector for compatibility */
  #fundcollector_test_smtp_email {
    max-width: 220px !important;
    width: 100% !important;
  }

  /* Also target any email input in form rows */
  .form-row input[type='email'] {
    max-width: 220px !important;
    width: 100% !important;
  }

  /* ========== FIX 9: Donations List Table - Responsive Card Layout on Mobile ========== */
  /* Transform the donations table into a card-based layout on mobile */

  /* Override WordPress core style that uses position: absolute for labels */
  table.wp-list-table.donations
    tbody
    tr:not(.inline-edit-row):not(.no-items)
    td:not(.column-primary)::before {
    position: static !important;
    left: auto !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* Remove white background and border from table and tbody on mobile */
  table.wp-list-table.donations {
    background: transparent !important;
    border: none !important;
    border-width: 0 !important;
  }

  table.wp-list-table.donations tbody {
    background: transparent !important;
    border: none !important;
    border-width: 0 !important;
  }

  /* Hide table headers on mobile */
  table.wp-list-table.donations thead,
  table.wp-list-table.donations tfoot {
    display: none !important;
  }

  /* Transform table rows into cards */
  table.wp-list-table.donations tbody tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 12px 40px 0 12px !important; /* No bottom padding */
    background: #f6f7f7 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    position: relative !important; /* For absolute positioning of checkbox */
    box-sizing: border-box !important;
    overflow: hidden !important; /* Prevent white space overflow */
    height: auto !important;
    min-height: auto !important;
  }

  /* Make all table cells block-level */
  table.wp-list-table.donations tbody td,
  table.wp-list-table.donations tbody th {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    border: none !important;
    text-align: left !important;
    box-sizing: border-box !important;
    clear: both !important;
    overflow: visible !important;
    position: relative !important;
  }

  /* Remove extra space from last cell - ensure it ends exactly where the row ends */
  table.wp-list-table.donations tbody tr td:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Remove border-bottom from last row to eliminate horizontal line */
  table.wp-list-table.donations tbody tr:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  /* Remove min-height from status cell to eliminate white space */
  table.wp-list-table.donations tbody td[data-label].column-status {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Ensure all cells don't have extra height */
  table.wp-list-table.donations tbody td[data-label] {
    height: auto !important;
  }

  /* Checkbox column - keep it at the top right */
  table.wp-list-table.donations tbody th.check-column {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ID column - make it prominent at the top */
  table.wp-list-table.donations tbody td.column-id {
    border-bottom: 1px solid #e0e0e0 !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
    padding-top: 0 !important;
  }

  .donation-id-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .donation-id-number {
    font-weight: bold !important;
    font-size: 16px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }

  .donation-id-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  .donation-id-actions .separator {
    color: #ccc !important;
    margin: 0 4px !important;
  }

  .donation-id-actions a {
    white-space: nowrap !important;
  }

  /* Add labels using data-label attribute - on separate line above content, aligned left */
  table.wp-list-table.donations tbody td[data-label]::before {
    content: attr(data-label) !important;
    position: static !important;
    display: block !important;
    font-weight: bold !important;
    color: #50575e !important;
    margin: 0 0 4px 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: left !important;
    width: auto !important;
    float: none !important;
  }

  /* Ensure cells have proper spacing and content appears below label, aligned left */
  table.wp-list-table.donations tbody td[data-label] {
    padding: 8px 0 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.6 !important;
    display: block !important;
    white-space: normal !important;
    font-size: 14px !important;
    min-height: auto !important;
    text-align: left !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  table.wp-list-table.donations tbody td[data-label].column-status {
    border-bottom: none !important;
    padding-bottom: 4px !important;
  }

  /* Ensure content inside cells appears as block below the label with increased spacing */
  table.wp-list-table.donations tbody td[data-label] > *:not(.fundcollector-payment-type-badge) {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    line-height: 1.6 !important;
    text-align: left !important;
  }

  /* Specific styling for text content to ensure proper spacing and left alignment */
  table.wp-list-table.donations tbody td[data-label] > span:not(.fundcollector-payment-type-badge),
  table.wp-list-table.donations tbody td[data-label] > strong,
  table.wp-list-table.donations tbody td[data-label] > em {
    display: block !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* Payment type badge: keep inline-block so background fits the text only */
  table.wp-list-table.donations tbody td[data-label].column-payment-type > span.fundcollector-payment-type-badge {
    display: inline-block !important;
    width: auto !important;
  }

  /* Add bottom padding to payment-type cell so badge doesn't touch card border */
  table.wp-list-table.donations tbody td[data-label].column-payment-type {
    padding-bottom: 12px !important;
    border-bottom: none !important;
  }

  /* Amount column: keep left alignment on mobile cards */
  table.wp-list-table.donations tbody td[data-label].column-amount {
    text-align: left !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap !important;
  }

  table.wp-list-table.donations tbody td[data-label].column-amount > * {
    text-align: left !important;
    display: block !important;
    font-variant-numeric: tabular-nums !important;
  }

  /* Style status badges */
  .donation-status {
    display: inline-block !important;
    padding: 4px 8px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
  }

  /* Make bulk actions responsive */
  .tablenav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 15px !important;
  }

  .tablenav .alignleft.actions {
    width: 100% !important;
    margin-bottom: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .tablenav .alignleft.actions label {
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
  }

  .tablenav .alignleft.actions select {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .tablenav .alignleft.actions .button {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 10px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* Pagination responsive */
  .tablenav-pages {
    width: 100% !important;
    text-align: center !important;
    margin-top: 10px !important;
  }

  .tablenav-pages .button {
    padding: 6px 10px !important;
    font-size: 13px !important;
  }

  .tablenav-pages .current-page {
    width: 50px !important;
    text-align: center !important;
  }

  /* ============================================
     FORMS LIST - MOBILE RESPONSIVE STYLES
     ============================================ */

  /* Hide table on mobile and transform to transparent container */
  table.wp-list-table.forms-list {
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
  }

  table.wp-list-table.forms-list thead,
  table.wp-list-table.forms-list tfoot {
    display: none !important;
  }

  table.wp-list-table.forms-list tbody {
    display: block !important;
    border: none !important;
    border-width: 0 !important;
    background: transparent !important;
  }

  /* Transform each row into a card */
  table.wp-list-table.forms-list tbody tr {
    display: block !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    background: #f6f7f7 !important;
    padding: 15px !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: auto !important;
  }

  /* Remove border from last row */
  table.wp-list-table.forms-list tbody tr:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  /* Style table cells as block elements */
  table.wp-list-table.forms-list tbody tr th,
  table.wp-list-table.forms-list tbody tr td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 20px 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    height: auto !important;
    min-height: auto !important;
    line-height: 2.2 !important;
  }

  /* Style checkbox column */
  table.wp-list-table.forms-list tbody tr th.check-column {
    text-align: right !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 10px !important;
  }

  table.wp-list-table.forms-list tbody tr th.check-column input[type='checkbox'] {
    margin: 0 !important;
    float: right !important;
  }

  /* Override WordPress default positioning for labels */
  table.wp-list-table.forms-list tbody tr td:not(.column-primary)::before {
    position: static !important;
    left: auto !important;
    width: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  /* Add labels before content using data-label attribute */
  table.wp-list-table.forms-list tbody tr td[data-label]:not([data-label=''])::before {
    content: attr(data-label);
    display: block !important;
    font-weight: 600 !important;
    color: #1d2327 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.4 !important;
  }

  /* Remove label spacing for checkbox column */
  table.wp-list-table.forms-list tbody tr th[data-label='']::before {
    display: none !important;
  }

  /* Style form name column */
  table.wp-list-table.forms-list tbody tr td.column-name {
    font-size: 16px !important;
    padding-bottom: 12px !important;
    padding-top: 0 !important;
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 10px !important;
    line-height: 1.8 !important;
  }

  table.wp-list-table.forms-list tbody tr td.column-name strong {
    display: block !important;
    margin-top: 0 !important;
  }

  table.wp-list-table.forms-list tbody tr td.column-name strong a {
    color: #2271b1 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
  }

  /* Style form ID column */
  table.wp-list-table.forms-list tbody tr td.column-form-id {
    font-family: monospace !important;
    font-size: 13px !important;
    color: #50575e !important;
    line-height: 1.8 !important;
    padding-top: 15px !important;
    margin-top: 0 !important;
  }

  /* Style shortcode column */
  table.wp-list-table.forms-list tbody tr td.column-shortcode {
    padding-bottom: 10px !important;
    padding-top: 15px !important;
    line-height: 1.8 !important;
    margin-top: 0 !important;
  }

  table.wp-list-table.forms-list tbody tr td.column-shortcode code {
    display: block !important;
    background: #fff !important;
    padding: 8px !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    margin-bottom: 8px !important;
    margin-top: 8px !important;
    font-size: 12px !important;
    word-break: break-all !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }

  table.wp-list-table.forms-list tbody tr td.column-shortcode button {
    width: 100% !important;
    text-align: center !important;
    padding: 8px !important;
  }

  /* Style status column */
  table.wp-list-table.forms-list tbody tr td.column-status {
    padding-bottom: 10px !important;
    padding-top: 15px !important;
    line-height: 1.8 !important;
    margin-top: 0 !important;
  }

  table.wp-list-table.forms-list tbody tr td.column-status span {
    display: inline-block !important;
    padding: 4px 12px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    margin-top: 8px !important;
  }

  table.wp-list-table.forms-list tbody tr td.column-status .fundcollector-status-active {
    background: #d7f0db !important;
    color: #007017 !important;
  }

  table.wp-list-table.forms-list tbody tr td.column-status .fundcollector-status-inactive {
    background: #f6e8ea !important;
    color: #7e2e2f !important;
  }

  /* Style actions column */
  table.wp-list-table.forms-list tbody tr td.column-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 15px !important;
    padding-bottom: 0 !important;
    line-height: 1.8 !important;
    margin-top: 0 !important;
  }

  table.wp-list-table.forms-list tbody tr td.column-actions a.button,
  table.wp-list-table.forms-list tbody tr td.column-actions button.button {
    width: 100% !important;
    text-align: center !important;
    padding: 10px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Remove extra space from last cell */
  table.wp-list-table.forms-list tbody tr td:last-child {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    height: auto !important;
  }

  /* Ensure all content aligns left */
  table.wp-list-table.forms-list tbody tr td > * {
    text-align: left !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* ============================================
     Form Fields Table Responsive (Form Detail Page)
     ============================================ */

  /* Hide table header on mobile */
  table.fundcollector-fields-table thead {
    display: none !important;
  }

  /* Transform table rows into cards */
  table.fundcollector-fields-table tbody tr {
    display: block !important;
    margin-bottom: 20px !important;
    padding: 15px !important;
    background: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }

  /* Remove table and tbody default styles */
  table.fundcollector-fields-table,
  table.fundcollector-fields-table tbody {
    background: transparent !important;
    border: none !important;
  }

  /* Remove border from last row */
  table.fundcollector-fields-table tbody tr:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  /* Style table cells as block elements */
  table.fundcollector-fields-table tbody tr td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 12px 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }

  /* Override WordPress default positioning for labels */
  table.fundcollector-fields-table tbody tr td:not(.column-primary)::before {
    position: static !important;
    left: auto !important;
    width: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  /* Add labels before content using data-label attribute */
  table.fundcollector-fields-table tbody tr td[data-label]:not([data-label=''])::before {
    content: attr(data-label);
    display: block !important;
    font-weight: 600 !important;
    color: #1d2327 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    line-height: 1.4 !important;
  }

  /* Make "Field" label lighter gray - target all labels that contain "Field" */
  table.fundcollector-fields-table tbody tr td[data-label*='Field']::before {
    color: #1d23278c !important;
  }

  /* Style the field name (first column) */
  table.fundcollector-fields-table tbody tr td:first-child {
    font-size: 16px !important;
    font-weight: 600 !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 12px !important;
  }

  /* Hide data-label for field name since it's the card title */
  table.fundcollector-fields-table tbody tr td:first-child::before {
    display: none !important;
  }

  /* Add spacing for toggle switches */
  table.fundcollector-fields-table tbody tr td .fundcollector-toggle {
    margin-top: 5px !important;
  }

  /* Style text inputs and textareas */
  table.fundcollector-fields-table tbody tr td input[type='text'],
  table.fundcollector-fields-table tbody tr td textarea {
    width: 100% !important;
    margin-top: 5px !important;
  }

  /* Style description text */
  table.fundcollector-fields-table tbody tr td .description {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.5 !important;
  }

  /* Preview tab - responsive */
  .fundcollector-preview-unified {
    max-width: 100% !important;
  }

  .fundcollector-preview-accordion-header {
    padding: 12px 15px !important;
  }

  /* Template tags wrapper - ensure it's right after "HTML is accepted." */
  .fundcollector-template-tags-wrapper {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 5px !important;
    margin-bottom: 15px !important;
    clear: both !important;
    float: none !important;
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    flex-direction: column !important;
  }

  /* When inside email-editor-row, ensure it's full width and stacked */
  .form-row.email-editor-row .fundcollector-template-tags-wrapper,
  .fundcollector-settings-form .form-row.email-editor-row .fundcollector-template-tags-wrapper {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Reduce margin after "HTML is accepted." paragraph */
  p.description + .fundcollector-template-tags-wrapper {
    margin-top: 0 !important;
  }

  .fundcollector-template-tags-wrapper p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 10px !important;
    text-align: left !important;
    clear: both !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    order: 1 !important;
  }

  /* Template tags table - stack vertically on mobile */
  .fundcollector-template-tags-table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse !important;
    clear: both !important;
    float: none !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 100% !important;
    flex-basis: 100% !important;
    order: 2 !important;
  }

  /* When inside email-editor-row, ensure table is below paragraph */
  .form-row.email-editor-row .fundcollector-template-tags-table,
  .fundcollector-settings-form .form-row.email-editor-row .fundcollector-template-tags-table {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .fundcollector-template-tags-table tr {
    display: block !important;
    margin-bottom: 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #eee !important;
  }

  .fundcollector-template-tags-table tr:last-child {
    border-bottom: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .fundcollector-template-tags-table td {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 4px 0 !important;
    border: none !important;
  }

  .fundcollector-template-tags-table td:first-child {
    font-weight: 600 !important;
    margin-bottom: 4px !important;
  }

  .fundcollector-template-tags-table td code {
    background: #f5f5f5 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 13px !important;
  }
}

/* ============================================================================
   Admin Notices with Icons
   ============================================================================ */

/* Enhanced error notice with icon */
.fundcollector-error-notice {
  border-left-color: #d63638 !important;
  padding: 0 !important;
}

.fundcollector-notice-content {
  display: flex;
  align-items: flex-start;
  padding: 12px;
}

.fundcollector-notice-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  color: #d63638;
  font-size: 24px;
}

.fundcollector-notice-icon.dashicons {
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 24px;
}

.fundcollector-notice-message {
  flex: 1;
}

.fundcollector-notice-message strong {
  display: block;
  margin-bottom: 4px;
  color: #1d2327;
  font-size: 14px;
}

.fundcollector-notice-message p {
  margin: 0;
  color: #50575e;
  line-height: 1.5;
}

/* Ensure notices stack properly */
.fundcollector-error-notice + .fundcollector-error-notice {
  margin-top: 8px;
}

/* --- FundCollector admin footer --- */

#wpfooter.fundcollector-footer {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-top: 42px;
}

#wpfooter.fundcollector-footer #footer-left {
  float: none;
  flex: 1 1 0;
  padding: 0 0 12px;
}

#wpfooter.fundcollector-footer #footer-upgrade {
  float: none;
  flex: 0 0 auto;
  padding: 0 0 12px;
  text-align: right;
}

.fundcollector-footer-center {
  position: absolute;
  display: block;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 13px;
  line-height: 1.3;
  width: max-content;
  z-index: 1;
}

.fundcollector-footer-left-text {
  display: inline;
}

@media (max-width: 782px) {
  .fundcollector-footer-center,
  .fundcollector-footer-left-text,
  #wpfooter.fundcollector-footer #footer-upgrade {
    display: none !important;
  }
}

/* --- end FundCollector admin footer --- */

/* ==========================================================================
   Mollie settings: PRO upsell banner — link contrast on purple gradient
   (WordPress default admin link color is too dark on #667eea / #764ba2)
   ========================================================================== */

.fundcollector-mollie-upgrade-banner h2 a.fundcollector-mollie-upgrade-banner__link {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  font-weight: 700;
  text-decoration-color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.fundcollector-mollie-upgrade-banner h2 a.fundcollector-mollie-upgrade-banner__link:hover,
.fundcollector-mollie-upgrade-banner h2 a.fundcollector-mollie-upgrade-banner__link:focus {
  color: #f0f4ff;
  text-decoration-color: #f0f4ff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
  border-radius: 2px;
}

/* Advanced settings: uninstall data warning — WP admin can reset nested <strong> weight/color */
.fundcollector-uninstall-data-warning {
  color: #d63638 !important;
  font-weight: 700;
}

.fundcollector-uninstall-data-warning .fundcollector-uninstall-data-warning__attention {
  font-weight: 700 !important;
  color: #d63638 !important;
}

/* Forms preview: PayPal footer line (same look as frontend donation form) */
.fundcollector-paypal-powered-link {
  color: #003087;
  text-decoration: none;
  font-weight: 700;
}