/* =======================================================
   GVS - Eggplant Purple + Bolder Checkbox
   Version: 3.5 - Astra override protection with fixed form visibility
======================================================= */

/* Namespace all variables to avoid conflicts */
:root {
  --gvs-primary: #6a3cbf;           /* Main brand color (eggplant) */
  --gvs-primary-hover: #5832a0;     /* Darker eggplant */
  --gvs-bg-light: #faf8fc;          /* Light background */
  --gvs-text: #2e2a33;              /* Dark text color */
  --gvs-error: #c92a2a;
  --gvs-success: #2f9e44;
  --gvs-field-bg: #f5f2fa;
  --gvs-border-color: #ddd;
  --gvs-transition: 0.2s ease-in-out;
  --gvs-shadow-sm: 0 4px 8px rgba(106, 60, 191, 0.3);
  --gvs-shadow-md: 0 0 0 3px rgba(106, 60, 191, 0.2);
  --gvs-shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.3);
  --gvs-border-radius: 8px;
  --gvs-spacing-sm: 8px;
  --gvs-spacing-md: 16px;
  --gvs-spacing-lg: 24px;
}

/* Base Layout - increase specificity with body prefix */
body .gvs-wrapper {
  margin: 40px auto !important;
  max-width: 1000px !important;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  padding: 0 var(--gvs-spacing-md) !important;
  color: var(--gvs-text) !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Typography - increase specificity */
body .gvs-wrapper h2,
body .gvs-wrapper h3 {
  font-weight: 600 !important;
  margin-bottom: 1.2em !important;
  color: var(--gvs-primary) !important;
  font-size: inherit !important; /* Override Astra font sizes */
  border: none !important; /* Override any border Astra might add */
  text-transform: none !important; /* Override any text transform */
  letter-spacing: normal !important; /* Override any letter spacing */
}

/* User Meta Form Box */
body .gvs-user-meta-form-box {
  margin-bottom: 30px !important;
  padding: var(--gvs-spacing-md) !important;
  border: 1px solid var(--gvs-border-color) !important;
  border-radius: var(--gvs-border-radius) !important;
  background-color: var(--gvs-bg-light) !important;
}

body .gvs-user-meta-form-box label {
  font-weight: 500 !important;
  margin-top: var(--gvs-spacing-sm) !important;
  display: block !important;
  margin-bottom: 5px !important;
  color: var(--gvs-text) !important;
  font-size: 14px !important; /* Ensure consistent font size */
}

/* Target all inputs directly with higher specificity */
body .gvs-user-meta-form-box input[type="text"],
body .gvs-user-meta-form-box input[type="number"],
body .gvs-user-meta-form-box input[type="email"] {
  width: 100% !important;
  padding: 10px !important;
  margin-top: 4px !important;
  margin-bottom: var(--gvs-spacing-md) !important;
  border: 1px solid var(--gvs-border-color) !important;
  border-radius: 6px !important;
  background-color: var(--gvs-field-bg) !important;
  transition: border-color var(--gvs-transition), box-shadow var(--gvs-transition) !important;
  color: var(--gvs-text) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  outline: none !important;
  height: auto !important; /* Override fixed heights */
}

body .gvs-user-meta-form-box input:focus {
  border-color: var(--gvs-primary) !important;
  box-shadow: var(--gvs-shadow-md) !important;
  outline: none !important;
}

/* Buttons - higher specificity */
body .gvs-add-filter-btn,
body .gvs-submit-btn,
body .gvs-view-btn,
body .gvs-delete-btn,
body #gvs-user-meta-save-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  cursor: pointer !important;
  transition: background-color var(--gvs-transition), 
              box-shadow var(--gvs-transition) !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-transform: none !important;
  line-height: 1.5 !important;
  letter-spacing: normal !important;
  min-height: auto !important;
  width: auto !important;
  box-shadow: none !important;
}

body .gvs-add-filter-btn,
body .gvs-submit-btn,
body #gvs-user-meta-save-btn {
  background-color: var(--gvs-primary) !important;
  color: #fff !important;
}

body .gvs-add-filter-btn {
  margin-bottom: 15px !important;
}

body .gvs-add-filter-btn:hover,
body .gvs-submit-btn:hover,
body #gvs-user-meta-save-btn:hover {
  background-color: var(--gvs-primary-hover) !important;
  box-shadow: var(--gvs-shadow-sm) !important;
  color: #fff !important; /* Make sure hover color doesn't change */
}

body .gvs-view-btn {
  background-color: #ffca2c !important;
  color: #222 !important;
}

body .gvs-view-btn:hover {
  background-color: #e6b412 !important;
  box-shadow: 0 4px 8px rgba(215, 180, 48, 0.2) !important;
  color: #222 !important;
}

body .gvs-delete-btn {
  background-color: #e03e3e !important;
  color: #fff !important;
}

body .gvs-delete-btn:hover {
  background-color: #c92a2a !important;
  box-shadow: 0 4px 8px rgba(201, 42, 42, 0.3) !important;
  color: #fff !important;
}

/* Tables - higher specificity */
body .gvs-table,
body .widefat.striped {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin-bottom: var(--gvs-spacing-lg) !important;
  background-color: #fff !important;
  border-radius: var(--gvs-border-radius) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  margin-top: 0 !important;
  table-layout: auto !important; /* Prevent fixed layout */
  border: none !important;
}

body .gvs-table th,
body .gvs-table td,
body .widefat.striped th,
body .widefat.striped td {
  border: 1px solid var(--gvs-border-color) !important;
  padding: 12px 14px !important;
  text-align: left !important;
  vertical-align: middle !important;
  font-size: 0.9rem !important;
  background-color: transparent !important; /* Override any background */
  color: var(--gvs-text) !important;
  line-height: 1.5 !important;
  font-weight: normal !important;
}

body .gvs-table th,
body .widefat.striped th {
  background-color: var(--gvs-bg-light) !important;
  font-weight: 600 !important;
  color: var(--gvs-text) !important;
}

body .widefat.striped tbody tr:hover {
  background-color: #f4ebfa !important;
}

/* Modal styling - higher specificity */
body .gvs-modal-overlay {
  position: fixed !important;
  top: 0 !important; 
  left: 0 !important;
  width: 100% !important; 
  height: 100% !important;
  background-color: rgba(26, 11, 42, 0.7) !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--gvs-spacing-md) !important;
  z-index: 9999 !important; /* Make sure it's above everything */
  display: none !important; /* Hide by default */
}

/* Fix for form visibility - ensure modal displays properly when active */
body .gvs-modal-overlay.active,
body .gvs-modal-overlay.open,
body .gvs-modal-overlay.visible,
body .gvs-modal-overlay[style*="display: block"],
body .gvs-modal-overlay[style*="display:block"] {
  display: flex !important;
}

body .gvs-modal-content {
  background-color: #fff !important;
  padding: 30px !important;
  width: 100% !important;
  max-width: 700px !important;
  border-radius: 12px !important;
  position: relative !important;
  box-shadow: var(--gvs-shadow-lg) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  margin: 0 !important; /* Override any margin */
}

body .gvs-modal-close {
  position: absolute !important;
  top: 18px !important; 
  right: 24px !important;
  font-size: 1.8rem !important;
  color: #999 !important;
  cursor: pointer !important;
  transition: color var(--gvs-transition) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
}

body .gvs-modal-close:hover {
  color: var(--gvs-primary) !important;
}

/* Filter Form - highly specific selectors */
body #gvs-filter-form {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gvs-spacing-lg) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .gvs-field-group {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--gvs-spacing-sm) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body #gvs-filter-form label {
  font-weight: 500 !important;
  color: var(--gvs-text) !important;
  margin-bottom: 5px !important;
  font-size: 0.94rem !important;
  display: block !important;
}

body #gvs-filter-form select,
body #gvs-filter-form input[type="text"],
body #gvs-filter-form input[type="number"] {
  width: 100% !important;
  padding: 10px !important;
  border: 1px solid var(--gvs-border-color) !important;
  border-radius: 6px !important;
  background-color: var(--gvs-field-bg) !important;
  font-size: 0.95rem !important;
  transition: border-color var(--gvs-transition), box-shadow var(--gvs-transition) !important;
  color: var(--gvs-text) !important;
  height: auto !important;
  margin: 0 !important;
  box-shadow: none !important;
}

body #gvs-filter-form select:focus,
body #gvs-filter-form input[type="text"]:focus,
body #gvs-filter-form input[type="number"]:focus {
  border-color: var(--gvs-primary) !important;
  box-shadow: var(--gvs-shadow-md) !important;
  outline: none !important;
}

/* Grid layouts - higher specificity */
body .inline-two {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: var(--gvs-spacing-lg) !important;
  margin: 0 !important;
  padding: 0 !important;
}

body .gvs-field-group.condition-field {
  border: 1px solid #eee !important;
  padding: 14px 16px !important;
  border-radius: var(--gvs-border-radius) !important;
  background-color: var(--gvs-bg-light) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

body .gvs-field-group.condition-field h4,
body .gvs-extras-label {
  margin: 0 0 10px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  color: var(--gvs-primary) !important;
  line-height: 1.4 !important;
}

body .gvs-condition-group {
  margin-bottom: var(--gvs-spacing-md) !important;
}

body .gvs-condition-group-sub {
  margin-left: 25px !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
  gap: var(--gvs-spacing-sm) !important;
  margin-top: var(--gvs-spacing-sm) !important;
}

body .gvs-checkbox-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Enhanced Checkbox Design - very specific selectors */
body .gvs-wrapper input[type="checkbox"],
body #gvs-filter-form input[type="checkbox"],
body .gvs-field-group input[type="checkbox"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #b7b1c7 !important;
  border-radius: 4px !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
  position: relative !important;
  cursor: pointer !important;
  background-color: #fff !important;
  transition: all var(--gvs-transition) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  box-sizing: border-box !important;
}

body .gvs-wrapper input[type="checkbox"]:hover {
  box-shadow: 0 0 3px rgba(106, 60, 191, 0.3) !important;
}

/* Create a highly specific selector for checked checkboxes */
body .gvs-wrapper input[type="checkbox"]:checked,
body #gvs-filter-form input[type="checkbox"]:checked,
body .gvs-field-group input[type="checkbox"]:checked {
  background-color: var(--gvs-primary) !important;
  border-color: var(--gvs-primary) !important;
}

/* Checkmark - ensure ::after is applied */
body .gvs-wrapper input[type="checkbox"]:checked::after,
body #gvs-filter-form input[type="checkbox"]:checked::after,
body .gvs-field-group input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 5px !important;
  top: 1px !important;
  width: 5px !important;
  height: 10px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
}

body .gvs-wrapper input[type="checkbox"]:focus,
body #gvs-filter-form input[type="checkbox"]:focus {
  border-color: var(--gvs-primary) !important;
  box-shadow: var(--gvs-shadow-md) !important;
}

body .gvs-field-group.extras-field {
  background-color: var(--gvs-bg-light) !important;
  border: 1px solid #eee !important;
  padding: 14px !important;
  border-radius: var(--gvs-border-radius) !important;
}

/* Notification Messages - maintain styling but fix visibility control */
body .gvs-error,
body .gvs-success,
body .gvs-user-meta-error,
body .gvs-user-meta-success {
  padding: 14px !important;
  border-radius: var(--gvs-border-radius) !important;
  margin-bottom: var(--gvs-spacing-md) !important;
  font-weight: 600 !important;
  color: inherit !important; /* Override any color */
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Preserve default hiding */
body .gvs-error:not([style*="display: block"]),
body .gvs-success:not([style*="display: block"]),
body .gvs-user-meta-error:not([style*="display: block"]),
body .gvs-user-meta-success:not([style*="display: block"]) {
  display: none !important;
}

/* But show when explicitly displayed */
body .gvs-error[style*="display: block"],
body .gvs-success[style*="display: block"],
body .gvs-user-meta-error[style*="display: block"],
body .gvs-user-meta-success[style*="display: block"] {
  display: block !important;
}

body .gvs-error,
body .gvs-user-meta-error {
  background-color: #fdecea !important;
  color: var(--gvs-error) !important;
  border: 1px solid #f5c2c2 !important;
}

body .gvs-success,
body .gvs-user-meta-success {
  background-color: #e6f4ea !important;
  color: var(--gvs-success) !important;
  border: 1px solid #c2f5cd !important;
}

body .gvs-info-editing {
  background-color: #fff3cd !important;
  color: #856404 !important;
  border: 1px solid #ffeeba !important;
  padding: 12px !important;
  border-radius: var(--gvs-border-radius) !important;
  font-weight: 500 !important;
  margin-bottom: var(--gvs-spacing-md) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* Fix info editing visibility */
body .gvs-info-editing:not([style*="display: block"]) {
  display: none !important;
}

body .gvs-info-editing[style*="display: block"] {
  display: block !important;
}

/* Force checkbox styles even when disabled - maximum specificity */
body .gvs-wrapper input[type="checkbox"]:checked,
body .gvs-wrapper input[type="checkbox"]:disabled:checked,
body #gvs-filter-form input[type="checkbox"]:checked,
body #gvs-filter-form input[type="checkbox"]:disabled:checked {
  background-color: var(--gvs-primary) !important;
  border-color: var(--gvs-primary) !important;
  opacity: 1 !important;
}

/* Ensure form visibility state is preserved */
body .gvs-hidden,
body .hidden,
body .toggle-hidden,
body .gvs-form-container.hidden,
body .gvs-form-container[style*="display: none"],
body .gvs-form-container[style*="display:none"] {
  display: none !important;
}

body .gvs-visible,
body .visible,
body .toggle-visible {
  display: block !important;
}

/* Responsive - maintain specificity */
@media (max-width: 768px) {
  body .inline-two {
    grid-template-columns: 1fr !important;
    gap: var(--gvs-spacing-md) !important;
  }
  
  body .gvs-condition-group-sub {
    grid-template-columns: 1fr 1fr !important;
  }
  
  body .gvs-checkbox-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  
  body .gvs-modal-content {
    padding: var(--gvs-spacing-md) !important;
    border-radius: var(--gvs-border-radius) !important;
  }
  
  body .gvs-modal-close {
    top: 12px !important;
    right: 16px !important;
  }
}

@media (max-width: 480px) {
  body .gvs-checkbox-grid,
  body .gvs-condition-group-sub {
    grid-template-columns: 1fr !important;
  }
  
  body .gvs-table,
  body .widefat.striped {
    font-size: 0.85rem !important;
  }
  
  body .gvs-table th,
  body .gvs-table td,
  body .widefat.striped th,
  body .widefat.striped td {
    padding: 10px 8px !important;
  }
}

/* Reset Astra-specific styles that might interfere */
body.theme-astra .gvs-wrapper button {
  -webkit-appearance: none !important;
  border-radius: 6px !important;
}

body.theme-astra .gvs-wrapper input {
  -webkit-appearance: none !important;
}

body.theme-astra .gvs-wrapper select {
  -webkit-appearance: menulist !important;
  appearance: menulist !important;
}