/* ============================================
   AV UTILITIES - MODERN PROFILE FORM STYLES
   ============================================ */

/* CSS Variables for consistent theming */
:root {
  --av-primary: #2563eb;
  --av-primary-dark: #1d4ed8;
  --av-primary-light: #dbeafe;
  --av-secondary: #0f172a;
  --av-success: #10b981;
  --av-warning: #f59e0b;
  --av-danger: #ef4444;
  --av-gray-50: #f8fafc;
  --av-gray-100: #f1f5f9;
  --av-gray-200: #e2e8f0;
  --av-gray-300: #cbd5e1;
  --av-gray-400: #94a3b8;
  --av-gray-500: #64748b;
  --av-gray-600: #475569;
  --av-gray-700: #334155;
  --av-gray-800: #1e293b;
  --av-gray-900: #0f172a;
  --av-radius: 12px;
  --av-radius-sm: 8px;
  --av-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --av-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --av-transition: all 0.2s ease-in-out;
}

/* ============================================
   FORM CONTAINER
   ============================================ */
.av-modern-profile-form {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem;
}

/* ============================================
   PROFILE TIPS BLOCK - TOP OF FORM
   ============================================ */
.profile-tips-block {
  margin-bottom: 2.5rem;
}

.profile-tips-wrapper {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--av-radius);
  padding: 1.5rem;
  border: 1px solid #fbbf24;
  box-shadow: var(--av-shadow);
}

.tips-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(251, 191, 36, 0.4);
}

.tips-icon {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.tips-title-wrap h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--av-gray-800);
}

.tips-title-wrap p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--av-gray-600);
}

.tips-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.tips-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--av-radius-sm);
  transition: var(--av-transition);
}

.tips-list li:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
}

.tip-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.tip-text {
  font-size: 0.9rem;
  color: var(--av-gray-700);
}

/* ============================================
   SECTION HEADERS
   ============================================ */
.form-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 1rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--av-gray-200);
}

.form-section-header:first-of-type {
  margin-top: 0;
}

.section-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.form-section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--av-gray-800);
}

/* ============================================
   FORM SECTIONS
   ============================================ */
.profile-section {
  background: var(--av-gray-50);
  border-radius: var(--av-radius);
  padding: 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid var(--av-gray-200);
}

.photo-section {
  text-align: center;
  background: linear-gradient(135deg, var(--av-gray-50) 0%, var(--av-gray-100) 100%);
}

.photo-section .image-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.photo-section img {
  border-radius: 50%;
  border: 4px solid white;
  box-shadow: var(--av-shadow-lg);
  max-width: 150px;
  height: auto;
}

/* ============================================
   FORM FIELDS STYLING
   ============================================ */
.av-modern-profile-form .form-item {
  margin-bottom: 1.25rem;
}

.av-modern-profile-form label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--av-gray-700);
  margin-bottom: 0.5rem;
}

.av-modern-profile-form .form-text,
.av-modern-profile-form .form-email,
.av-modern-profile-form .form-tel,
.av-modern-profile-form input[type="text"],
.av-modern-profile-form input[type="email"],
.av-modern-profile-form input[type="password"],
.av-modern-profile-form input[type="tel"],
.av-modern-profile-form select,
.av-modern-profile-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--av-gray-800);
  background-color: white;
  border: 2px solid var(--av-gray-200);
  border-radius: var(--av-radius-sm);
  transition: var(--av-transition);
  box-sizing: border-box;
}

.av-modern-profile-form input[type="text"]:focus,
.av-modern-profile-form input[type="email"]:focus,
.av-modern-profile-form input[type="password"]:focus,
.av-modern-profile-form input[type="tel"]:focus,
.av-modern-profile-form select:focus,
.av-modern-profile-form textarea:focus {
  outline: none;
  border-color: var(--av-primary);
  box-shadow: 0 0 0 3px var(--av-primary-light);
}

.av-modern-profile-form textarea {
  min-height: 120px;
  resize: vertical;
}

.av-modern-profile-form .description {
  font-size: 0.8rem;
  color: var(--av-gray-500);
  margin-top: 0.5rem;
}

/* ============================================
   DETAILS/FIELDSET STYLING
   ============================================ */
.av-modern-profile-form details,
.av-modern-profile-form fieldset {
  background: white;
  border: 1px solid var(--av-gray-200);
  border-radius: var(--av-radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--av-shadow);
}

.av-modern-profile-form details summary,
.av-modern-profile-form fieldset legend {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--av-gray-800);
  padding: 0.5rem 0;
  cursor: pointer;
}

.av-modern-profile-form details[open] summary {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--av-gray-200);
}

/* ============================================
   PASSWORD FIELDS
   ============================================ */
.av-modern-profile-form .password-field {
  position: relative;
}

.av-modern-profile-form .password-strength {
  margin-top: 0.5rem;
}

.av-modern-profile-form .password-confirm {
  margin-top: 0.25rem;
  font-size: 0.8rem;
}

/* ============================================
   FILE UPLOAD / IMAGE WIDGET
   ============================================ */
.av-modern-profile-form .form-managed-file {
  background: var(--av-gray-50);
  border: 2px dashed var(--av-gray-300);
  border-radius: var(--av-radius-sm);
  padding: 1.5rem;
  text-align: center;
  transition: var(--av-transition);
}

.av-modern-profile-form .form-managed-file:hover {
  border-color: var(--av-primary);
  background: var(--av-primary-light);
}

.av-modern-profile-form .form-managed-file input[type="file"] {
  width: auto;
  padding: 0;
  border: none;
  background: transparent;
}

/* ============================================
   ADDRESS FIELD STYLING
   ============================================ */
.av-modern-profile-form .address-container-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.av-modern-profile-form .address-container-inline > .form-item {
  margin-bottom: 0;
}

/* ============================================
   FORM ACTIONS / SUBMIT BUTTON
   ============================================ */
.form-actions-wrapper {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--av-gray-200);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.av-modern-profile-form .button,
.av-modern-profile-form input[type="submit"],
.av-modern-profile-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  border-radius: var(--av-radius-sm);
  cursor: pointer;
  transition: var(--av-transition);
}

.av-modern-profile-form .button--primary,
.av-modern-profile-form input[type="submit"].button--primary,
.av-modern-profile-form #edit-submit {
  background: linear-gradient(135deg, var(--av-primary) 0%, var(--av-primary-dark) 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}

.av-modern-profile-form .button--primary:hover,
.av-modern-profile-form input[type="submit"].button--primary:hover,
.av-modern-profile-form #edit-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.av-modern-profile-form .button--danger {
  background: var(--av-danger);
  color: white;
}

.av-modern-profile-form .button--danger:hover {
  background: #dc2626;
}

/* Secondary/Cancel buttons */
.av-modern-profile-form .button:not(.button--primary):not(.button--danger) {
  background: var(--av-gray-100);
  color: var(--av-gray-700);
  border: 2px solid var(--av-gray-300);
}

.av-modern-profile-form .button:not(.button--primary):not(.button--danger):hover {
  background: var(--av-gray-200);
}

/* ============================================
   MESSAGES & NOTIFICATIONS
   ============================================ */
.av-modern-profile-form .messages {
  border-radius: var(--av-radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.av-modern-profile-form .messages--status {
  background: #d1fae5;
  border-color: var(--av-success);
  color: #065f46;
}

.av-modern-profile-form .messages--warning {
  background: #fef3c7;
  border-color: var(--av-warning);
  color: #92400e;
}

.av-modern-profile-form .messages--error {
  background: #fee2e2;
  border-color: var(--av-danger);
  color: #991b1b;
}

/* ============================================
   REQUIRED FIELD INDICATOR
   ============================================ */
.av-modern-profile-form .form-required::after {
  content: " *";
  color: var(--av-danger);
  font-weight: 700;
}

/* ============================================
   CHECKBOX & RADIO STYLING
   ============================================ */
.av-modern-profile-form input[type="checkbox"],
.av-modern-profile-form input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  accent-color: var(--av-primary);
}

.av-modern-profile-form .form-type-checkbox,
.av-modern-profile-form .form-type-radio {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border-radius: var(--av-radius-sm);
  transition: var(--av-transition);
}

.av-modern-profile-form .form-type-checkbox:hover,
.av-modern-profile-form .form-type-radio:hover {
  background: var(--av-gray-100);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
  .av-modern-profile-form {
    padding: 1rem;
  }

  .profile-tips-wrapper {
    padding: 1rem;
  }

  .tips-header {
    flex-direction: column;
    text-align: center;
  }

  .tips-icon {
    font-size: 2.5rem;
  }

  .form-section-header h2 {
    font-size: 1.1rem;
  }

  .form-actions-wrapper {
    flex-direction: column;
  }

  .av-modern-profile-form .button,
  .av-modern-profile-form input[type="submit"] {
    width: 100%;
  }

  .av-modern-profile-form details,
  .av-modern-profile-form fieldset {
    padding: 1rem;
  }

  .address-container-inline {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================
   ANIMATION FOR TIPS
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.profile-tips-block {
  animation: fadeInUp 0.5s ease-out;
}

.tips-list li {
  animation: fadeInUp 0.4s ease-out;
  animation-fill-mode: both;
}

.tips-list li:nth-child(1) { animation-delay: 0.1s; }
.tips-list li:nth-child(2) { animation-delay: 0.2s; }
.tips-list li:nth-child(3) { animation-delay: 0.3s; }
.tips-list li:nth-child(4) { animation-delay: 0.4s; }
.tips-list li:nth-child(5) { animation-delay: 0.5s; }

/* ============================================
   PROFILE COMPLETION PROGRESS (OPTIONAL)
   ============================================ */
.profile-progress {
  background: var(--av-gray-100);
  border-radius: 9999px;
  height: 8px;
  overflow: hidden;
  margin-top: 1rem;
}

.profile-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--av-primary) 0%, var(--av-success) 100%);
  border-radius: 9999px;
  transition: width 0.5s ease;
}

/* ============================================
   MODERN CHECKBOX/RADIO STYLING (Taxonomy Fields)
   These selectors work with Drupal's profile module
   checkbox and radio button field widgets
   ============================================ */

/* Container for checkboxes - make it flex */
.av-modern-profile-form .form-checkboxes,
.av-modern-profile-form .form-radios,
.av-modern-profile-form .js-form-type-checkboxes .form-checkboxes,
.av-modern-profile-form .js-form-type-radios .form-radios,
#user-form .form-checkboxes,
#user-form .form-radios {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Individual checkbox/radio wrapper */
.av-modern-profile-form .form-type-checkbox,
.av-modern-profile-form .form-type-radio,
.av-modern-profile-form .js-form-type-checkbox,
.av-modern-profile-form .js-form-type-radio,
#user-form .form-type-checkbox,
#user-form .form-type-radio,
#user-form .js-form-type-checkbox,
#user-form .js-form-type-radio {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide the actual checkbox/radio input */
.av-modern-profile-form .form-type-checkbox input[type="checkbox"],
.av-modern-profile-form .form-type-radio input[type="radio"],
.av-modern-profile-form .js-form-type-checkbox input[type="checkbox"],
.av-modern-profile-form .js-form-type-radio input[type="radio"],
#user-form .form-type-checkbox input[type="checkbox"],
#user-form .form-type-radio input[type="radio"],
#user-form .js-form-type-checkbox input[type="checkbox"],
#user-form .js-form-type-radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  z-index: 10 !important;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

/* Style the label as a pill button */
.av-modern-profile-form .form-type-checkbox label,
.av-modern-profile-form .form-type-radio label,
.av-modern-profile-form .js-form-type-checkbox label,
.av-modern-profile-form .js-form-type-radio label,
#user-form .form-type-checkbox label,
#user-form .form-type-radio label,
#user-form .js-form-type-checkbox label,
#user-form .js-form-type-radio label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 22px !important;
  background: #ffffff !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 50px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #475569 !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  user-select: none !important;
  margin: 0 !important;
  position: relative !important;
}

/* Custom checkbox indicator */
.av-modern-profile-form .form-type-checkbox label::before,
.av-modern-profile-form .form-type-radio label::before,
.av-modern-profile-form .js-form-type-checkbox label::before,
.av-modern-profile-form .js-form-type-radio label::before,
#user-form .form-type-checkbox label::before,
#user-form .form-type-radio label::before,
#user-form .js-form-type-checkbox label::before,
#user-form .js-form-type-radio label::before {
  content: '' !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  border: 2px solid #cbd5e1 !important;
  background: #fff !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Radio button - circular indicator */
.av-modern-profile-form .form-type-radio label::before,
.av-modern-profile-form .js-form-type-radio label::before,
#user-form .form-type-radio label::before,
#user-form .js-form-type-radio label::before {
  border-radius: 50% !important;
}

/* Hover State */
.av-modern-profile-form .form-type-checkbox:hover label,
.av-modern-profile-form .form-type-radio:hover label,
.av-modern-profile-form .js-form-type-checkbox:hover label,
.av-modern-profile-form .js-form-type-radio:hover label,
#user-form .form-type-checkbox:hover label,
#user-form .form-type-radio:hover label,
#user-form .js-form-type-checkbox:hover label,
#user-form .js-form-type-radio:hover label {
  border-color: #0a66c2 !important;
  background: linear-gradient(135deg, #f0f7ff 0%, #e0f2fe 100%) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 20px rgba(10, 102, 194, 0.2) !important;
}

.av-modern-profile-form .form-type-checkbox:hover label::before,
.av-modern-profile-form .form-type-radio:hover label::before,
.av-modern-profile-form .js-form-type-checkbox:hover label::before,
.av-modern-profile-form .js-form-type-radio:hover label::before,
#user-form .form-type-checkbox:hover label::before,
#user-form .form-type-radio:hover label::before,
#user-form .js-form-type-checkbox:hover label::before,
#user-form .js-form-type-radio:hover label::before {
  border-color: #0a66c2 !important;
}

/* Checked State */
.av-modern-profile-form .form-type-checkbox input:checked + label,
.av-modern-profile-form .form-type-radio input:checked + label,
.av-modern-profile-form .js-form-type-checkbox input:checked + label,
.av-modern-profile-form .js-form-type-radio input:checked + label,
#user-form .form-type-checkbox input:checked + label,
#user-form .form-type-radio input:checked + label,
#user-form .js-form-type-checkbox input:checked + label,
#user-form .js-form-type-radio input:checked + label {
  background: linear-gradient(135deg, #0a66c2 0%, #2563eb 100%) !important;
  border-color: #0a66c2 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(10, 102, 194, 0.4) !important;
  transform: translateY(-2px) !important;
}

.av-modern-profile-form .form-type-checkbox input:checked + label::before,
.av-modern-profile-form .form-type-radio input:checked + label::before,
.av-modern-profile-form .js-form-type-checkbox input:checked + label::before,
.av-modern-profile-form .js-form-type-radio input:checked + label::before,
#user-form .form-type-checkbox input:checked + label::before,
#user-form .form-type-radio input:checked + label::before,
#user-form .js-form-type-checkbox input:checked + label::before,
#user-form .js-form-type-radio input:checked + label::before {
  background: #ffffff !important;
  border-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230a66c2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px !important;
}

/* Focus State */
.av-modern-profile-form .form-type-checkbox input:focus + label,
.av-modern-profile-form .form-type-radio input:focus + label,
.av-modern-profile-form .js-form-type-checkbox input:focus + label,
.av-modern-profile-form .js-form-type-radio input:focus + label,
#user-form .form-type-checkbox input:focus + label,
#user-form .form-type-radio input:focus + label,
#user-form .js-form-type-checkbox input:focus + label,
#user-form .js-form-type-radio input:focus + label {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.25), 0 6px 20px rgba(10, 102, 194, 0.2) !important;
}

/* ============================================
   FIELD-SPECIFIC COLORS (Employment, Education, Specialties)
   ============================================ */

/* Employment Types - Green Theme */
[class*="field-employment-types"] .form-type-checkbox input:checked + label,
[class*="field-employment-types"] .form-type-radio input:checked + label,
[class*="field-employment-types"] .js-form-type-checkbox input:checked + label,
[class*="field-employment-types"] .js-form-type-radio input:checked + label {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  border-color: #059669 !important;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.4) !important;
}

[class*="field-employment-types"] .form-type-checkbox input:checked + label::before,
[class*="field-employment-types"] .form-type-radio input:checked + label::before,
[class*="field-employment-types"] .js-form-type-checkbox input:checked + label::before,
[class*="field-employment-types"] .js-form-type-radio input:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

[class*="field-employment-types"] .form-type-checkbox:hover label,
[class*="field-employment-types"] .form-type-radio:hover label,
[class*="field-employment-types"] .js-form-type-checkbox:hover label,
[class*="field-employment-types"] .js-form-type-radio:hover label {
  border-color: #059669 !important;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  box-shadow: 0 6px 20px rgba(5, 150, 105, 0.2) !important;
}

/* Education Level - Blue Theme */
[class*="field-education-level"] .form-type-checkbox input:checked + label,
[class*="field-education-level"] .form-type-radio input:checked + label,
[class*="field-education-level"] .js-form-type-checkbox input:checked + label,
[class*="field-education-level"] .js-form-type-radio input:checked + label {
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
  border-color: #2563eb !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4) !important;
}

[class*="field-education-level"] .form-type-checkbox input:checked + label::before,
[class*="field-education-level"] .form-type-radio input:checked + label::before,
[class*="field-education-level"] .js-form-type-checkbox input:checked + label::before,
[class*="field-education-level"] .js-form-type-radio input:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

[class*="field-education-level"] .form-type-checkbox:hover label,
[class*="field-education-level"] .form-type-radio:hover label,
[class*="field-education-level"] .js-form-type-checkbox:hover label,
[class*="field-education-level"] .js-form-type-radio:hover label {
  border-color: #2563eb !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.2) !important;
}

/* Listing Specialties - Orange/Gold Theme */
[class*="field-listing-specialties"] .form-type-checkbox input:checked + label,
[class*="field-listing-specialties"] .form-type-radio input:checked + label,
[class*="field-listing-specialties"] .js-form-type-checkbox input:checked + label,
[class*="field-listing-specialties"] .js-form-type-radio input:checked + label {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  border-color: #d97706 !important;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.4) !important;
}

[class*="field-listing-specialties"] .form-type-checkbox input:checked + label::before,
[class*="field-listing-specialties"] .form-type-radio input:checked + label::before,
[class*="field-listing-specialties"] .js-form-type-checkbox input:checked + label::before,
[class*="field-listing-specialties"] .js-form-type-radio input:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

[class*="field-listing-specialties"] .form-type-checkbox:hover label,
[class*="field-listing-specialties"] .form-type-radio:hover label,
[class*="field-listing-specialties"] .js-form-type-checkbox:hover label,
[class*="field-listing-specialties"] .js-form-type-radio:hover label {
  border-color: #d97706 !important;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
  box-shadow: 0 6px 20px rgba(217, 119, 6, 0.2) !important;
}

/* ============================================
   RESPONSIVE CHECKBOX STYLING
   ============================================ */
@media (max-width: 768px) {
  .av-modern-profile-form .form-checkboxes,
  .av-modern-profile-form .form-radios,
  #user-form .form-checkboxes,
  #user-form .form-radios {
    gap: 8px !important;
  }
  
  .av-modern-profile-form .form-type-checkbox label,
  .av-modern-profile-form .form-type-radio label,
  .av-modern-profile-form .js-form-type-checkbox label,
  .av-modern-profile-form .js-form-type-radio label,
  #user-form .form-type-checkbox label,
  #user-form .form-type-radio label,
  #user-form .js-form-type-checkbox label,
  #user-form .js-form-type-radio label {
    padding: 10px 16px !important;
    font-size: 13px !important;
  }
  
  .av-modern-profile-form .form-type-checkbox label::before,
  .av-modern-profile-form .form-type-radio label::before,
  .av-modern-profile-form .js-form-type-checkbox label::before,
  .av-modern-profile-form .js-form-type-radio label::before,
  #user-form .form-type-checkbox label::before,
  #user-form .form-type-radio label::before,
  #user-form .js-form-type-checkbox label::before,
  #user-form .js-form-type-radio label::before {
    width: 18px !important;
    height: 18px !important;
  }
}

/* ============================================
   AUTOCOMPLETE / ENTITY REFERENCE WIDGET STYLING
   Modern multi-select autocomplete with tags
   ============================================ */

/* Main container for entity reference autocomplete */
.av-modern-profile-form .field--widget-entity-reference-autocomplete,
.av-modern-profile-form .field--widget-entity-reference-autocomplete-tags,
#user-form .field--widget-entity-reference-autocomplete,
#user-form .field--widget-entity-reference-autocomplete-tags,
.av-modern-profile-form [class*="field-listing-specialties"],
#user-form [class*="field-listing-specialties"] {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 50%, #f0fdf4 100%);
  border-radius: 20px;
  padding: 28px;
  border: 2px solid #6ee7b7;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
  position: relative;
  overflow: visible;
}

/* Field label */
.av-modern-profile-form .field--widget-entity-reference-autocomplete > .form-item > label,
.av-modern-profile-form .field--widget-entity-reference-autocomplete-tags > .form-item > label,
#user-form .field--widget-entity-reference-autocomplete > .form-item > label {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
  display: block;
}

/* Table wrapper for multi-value fields */
.av-modern-profile-form .field-multiple-table,
#user-form .field-multiple-table {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
}

.av-modern-profile-form .field-multiple-table thead,
#user-form .field-multiple-table thead {
  display: none;
}

.av-modern-profile-form .field-multiple-table tbody,
#user-form .field-multiple-table tbody {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.av-modern-profile-form .field-multiple-table tr,
#user-form .field-multiple-table tr {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.2s ease;
}

.av-modern-profile-form .field-multiple-table tr:last-child,
#user-form .field-multiple-table tr:last-child {
  border-bottom: none;
}

.av-modern-profile-form .field-multiple-table tr:hover,
#user-form .field-multiple-table tr:hover {
  background: #f8fafc;
}

/* Drag handle */
.av-modern-profile-form .field-multiple-table .tabledrag-handle,
#user-form .field-multiple-table .tabledrag-handle {
  width: 24px;
  height: 24px;
  padding: 0;
  margin-right: 12px;
  cursor: grab;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.av-modern-profile-form .field-multiple-table .tabledrag-handle:hover,
#user-form .field-multiple-table .tabledrag-handle:hover {
  opacity: 1;
}

.av-modern-profile-form .field-multiple-table .tabledrag-handle .handle,
#user-form .field-multiple-table .tabledrag-handle .handle {
  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='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='9' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='9' cy='19' r='1'%3E%3C/circle%3E%3Ccircle cx='15' cy='5' r='1'%3E%3C/circle%3E%3Ccircle cx='15' cy='12' r='1'%3E%3C/circle%3E%3Ccircle cx='15' cy='19' r='1'%3E%3C/circle%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  width: 16px;
  height: 16px;
}

/* Input field in autocomplete */
.av-modern-profile-form .field-multiple-table td,
#user-form .field-multiple-table td {
  padding: 0;
  border: none;
}

.av-modern-profile-form .field-multiple-table input[type="text"],
#user-form .field-multiple-table input[type="text"] {
  flex: 1;
  padding: 12px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  transition: all 0.25s ease;
  min-width: 200px;
}

.av-modern-profile-form .field-multiple-table input[type="text"]:focus,
#user-form .field-multiple-table input[type="text"]:focus {
  outline: none;
  border-color: #0a66c2;
  box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.15);
}

.av-modern-profile-form .field-multiple-table input[type="text"]::placeholder,
#user-form .field-multiple-table input[type="text"]::placeholder {
  color: #94a3b8;
}

/* Remove button */
.av-modern-profile-form .field-multiple-table .field-remove-button,
.av-modern-profile-form .field-multiple-table input[value="Remove"],
#user-form .field-multiple-table .field-remove-button,
#user-form .field-multiple-table input[value="Remove"] {
  padding: 8px 16px;
  background: #fff;
  border: 2px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-left: 12px;
}

.av-modern-profile-form .field-multiple-table .field-remove-button:hover,
.av-modern-profile-form .field-multiple-table input[value="Remove"]:hover,
#user-form .field-multiple-table .field-remove-button:hover,
#user-form .field-multiple-table input[value="Remove"]:hover {
  background: #fef2f2;
  border-color: #dc2626;
  transform: translateY(-1px);
}

/* Add another item button */
.av-modern-profile-form .field-add-more-submit,
.av-modern-profile-form input[value="Add another item"],
#user-form .field-add-more-submit,
#user-form input[value="Add another item"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  color: #475569;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 16px;
}

.av-modern-profile-form .field-add-more-submit:hover,
.av-modern-profile-form input[value="Add another item"]:hover,
#user-form .field-add-more-submit:hover,
#user-form input[value="Add another item"]:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #0a66c2;
  border-style: solid;
  color: #0a66c2;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(10, 102, 194, 0.15);
}

/* Description text */
.av-modern-profile-form .field--widget-entity-reference-autocomplete .description,
.av-modern-profile-form .field--widget-entity-reference-autocomplete-tags .description,
#user-form .field--widget-entity-reference-autocomplete .description {
  margin-top: 16px;
  padding: 12px 16px;
  background: #f0fdf4;
  border-radius: 8px;
  border-left: 4px solid #22c55e;
  font-size: 13px;
  color: #166534;
  font-style: normal;
}

/* Weight column hide */
.av-modern-profile-form .field-multiple-table .delta-order,
.av-modern-profile-form .field-multiple-table .tabledrag-hide,
#user-form .field-multiple-table .delta-order,
#user-form .field-multiple-table .tabledrag-hide {
  display: none !important;
}

/* Autocomplete suggestions dropdown */
.ui-autocomplete {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  padding: 8px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 9999;
}

.ui-autocomplete .ui-menu-item {
  padding: 0;
  margin: 0;
}

.ui-autocomplete .ui-menu-item-wrapper {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #0a66c2;
}

/* ============================================
   AUTOCOMPLETE TAGS WIDGET - Selected Items as Tags
   ============================================ */

/* Tags container - where selected items appear */
.av-modern-profile-form .field--widget-entity-reference-autocomplete-tags .form-autocomplete,
#user-form .field--widget-entity-reference-autocomplete-tags .form-autocomplete,
.av-modern-profile-form [class*="field-listing-specialties"] input.form-autocomplete,
#user-form [class*="field-listing-specialties"] input.form-autocomplete {
  width: 100% !important;
  padding: 16px 20px !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  color: #1e293b !important;
  background: #fff !important;
  transition: all 0.3s ease !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.av-modern-profile-form .field--widget-entity-reference-autocomplete-tags .form-autocomplete:focus,
#user-form .field--widget-entity-reference-autocomplete-tags .form-autocomplete:focus,
.av-modern-profile-form [class*="field-listing-specialties"] input.form-autocomplete:focus,
#user-form [class*="field-listing-specialties"] input.form-autocomplete:focus {
  outline: none !important;
  border-color: #10b981 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
}

.av-modern-profile-form .field--widget-entity-reference-autocomplete-tags .form-autocomplete::placeholder,
#user-form .field--widget-entity-reference-autocomplete-tags .form-autocomplete::placeholder,
.av-modern-profile-form [class*="field-listing-specialties"] input.form-autocomplete::placeholder,
#user-form [class*="field-listing-specialties"] input.form-autocomplete::placeholder {
  color: #94a3b8 !important;
  font-style: italic !important;
}

/* Search icon indicator */
.av-modern-profile-form [class*="field-listing-specialties"] .form-item,
#user-form [class*="field-listing-specialties"] .form-item {
  position: relative;
}

/* Selected tags styling - comma separated values become visual tags */
.av-modern-profile-form .field--widget-entity-reference-autocomplete-tags .entity-reference-tag,
#user-form .field--widget-entity-reference-autocomplete-tags .entity-reference-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  margin: 4px;
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.3);
}

/* Help text / instructions */
.av-modern-profile-form [class*="field-listing-specialties"] .description,
#user-form [class*="field-listing-specialties"] .description {
  margin-top: 16px !important;
  padding: 14px 18px !important;
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  border-radius: 10px !important;
  border-left: 4px solid #10b981 !important;
  font-size: 13px !important;
  color: #065f46 !important;
  font-style: normal !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.av-modern-profile-form [class*="field-listing-specialties"] .description::before,
#user-form [class*="field-listing-specialties"] .description::before {
  content: '💡' !important;
  font-size: 16px !important;
}

/* ============================================
   BEAUTIFUL AUTOCOMPLETE DROPDOWN SUGGESTIONS
   ============================================ */
.ui-autocomplete {
  background: #fff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
  padding: 12px !important;
  max-height: 350px !important;
  overflow-y: auto !important;
  z-index: 99999 !important;
}

.ui-autocomplete::-webkit-scrollbar {
  width: 8px;
}

.ui-autocomplete::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.ui-autocomplete::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.ui-autocomplete::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.ui-autocomplete .ui-menu-item {
  padding: 0 !important;
  margin: 4px 0 !important;
}

.ui-autocomplete .ui-menu-item-wrapper {
  padding: 14px 18px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1e293b !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
  color: #065f46 !important;
  transform: translateX(4px);
}

/* ============================================
   MULTI-VALUE TABLE IMPROVEMENTS
   ============================================ */
.av-modern-profile-form [class*="field-listing-specialties"] .field-multiple-table,
#user-form [class*="field-listing-specialties"] .field-multiple-table {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 2px solid #a7f3d0;
}

.av-modern-profile-form [class*="field-listing-specialties"] .field-multiple-table tr,
#user-form [class*="field-listing-specialties"] .field-multiple-table tr {
  display: flex;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #d1fae5;
  transition: all 0.2s ease;
  gap: 12px;
}

.av-modern-profile-form [class*="field-listing-specialties"] .field-multiple-table tr:hover,
#user-form [class*="field-listing-specialties"] .field-multiple-table tr:hover {
  background: linear-gradient(135deg, #ecfdf5 0%, #fff 100%);
}

/* Specialty item input */
.av-modern-profile-form [class*="field-listing-specialties"] .field-multiple-table input[type="text"],
#user-form [class*="field-listing-specialties"] .field-multiple-table input[type="text"] {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid #a7f3d0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  background: #fff;
  transition: all 0.3s ease;
}

.av-modern-profile-form [class*="field-listing-specialties"] .field-multiple-table input[type="text"]:focus,
#user-form [class*="field-listing-specialties"] .field-multiple-table input[type="text"]:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

/* Remove button - specialty specific */
.av-modern-profile-form [class*="field-listing-specialties"] input[value="Remove"],
#user-form [class*="field-listing-specialties"] input[value="Remove"] {
  padding: 10px 18px !important;
  background: #fff !important;
  border: 2px solid #fecaca !important;
  border-radius: 10px !important;
  color: #dc2626 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.av-modern-profile-form [class*="field-listing-specialties"] input[value="Remove"]:hover,
#user-form [class*="field-listing-specialties"] input[value="Remove"]:hover {
  background: #fef2f2 !important;
  border-color: #dc2626 !important;
  transform: scale(1.02) !important;
}

/* Add another item - specialty specific */
.av-modern-profile-form [class*="field-listing-specialties"] input[value="Add another item"],
#user-form [class*="field-listing-specialties"] input[value="Add another item"],
.av-modern-profile-form [class*="field-listing-specialties"] .field-add-more-submit,
#user-form [class*="field-listing-specialties"] .field-add-more-submit {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 28px !important;
  background: linear-gradient(135deg, #fff 0%, #ecfdf5 100%) !important;
  border: 2px dashed #6ee7b7 !important;
  border-radius: 14px !important;
  color: #065f46 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  margin-top: 20px !important;
}

.av-modern-profile-form [class*="field-listing-specialties"] input[value="Add another item"]:hover,
#user-form [class*="field-listing-specialties"] input[value="Add another item"]:hover,
.av-modern-profile-form [class*="field-listing-specialties"] .field-add-more-submit:hover,
#user-form [class*="field-listing-specialties"] .field-add-more-submit:hover {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  border-color: #10b981 !important;
  border-style: solid !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.25) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .av-modern-profile-form .field--widget-entity-reference-autocomplete,
  .av-modern-profile-form .field--widget-entity-reference-autocomplete-tags,
  .av-modern-profile-form [class*="field-listing-specialties"],
  #user-form .field--widget-entity-reference-autocomplete,
  #user-form [class*="field-listing-specialties"] {
    padding: 20px;
    border-radius: 16px;
  }
  
  .av-modern-profile-form .field-multiple-table tr,
  .av-modern-profile-form [class*="field-listing-specialties"] .field-multiple-table tr,
  #user-form .field-multiple-table tr,
  #user-form [class*="field-listing-specialties"] .field-multiple-table tr {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
  }
  
  .av-modern-profile-form .field-multiple-table input[type="text"],
  .av-modern-profile-form [class*="field-listing-specialties"] .field-multiple-table input[type="text"],
  #user-form .field-multiple-table input[type="text"],
  #user-form [class*="field-listing-specialties"] .field-multiple-table input[type="text"] {
    width: 100%;
    min-width: unset;
  }
  
  .av-modern-profile-form .field-multiple-table .field-remove-button,
  .av-modern-profile-form .field-multiple-table input[value="Remove"],
  .av-modern-profile-form [class*="field-listing-specialties"] input[value="Remove"],
  #user-form .field-multiple-table .field-remove-button,
  #user-form .field-multiple-table input[value="Remove"],
  #user-form [class*="field-listing-specialties"] input[value="Remove"] {
    margin-left: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
  
  .av-modern-profile-form [class*="field-listing-specialties"] input[value="Add another item"],
  #user-form [class*="field-listing-specialties"] input[value="Add another item"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================
   AV PROFESSIONALS LISTING PAGE
   Modern Creative Design
   ============================================ */

/* Page container */
.view-listing-content,
.view-av-professionals,
.path-find .view {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* ============================================
   FILTER SECTION - MODERN SEARCH BAR
   ============================================ */
.view-listing-content .views-exposed-form,
.view-av-professionals .views-exposed-form,
.path-find .views-exposed-form {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-radius: 24px;
  padding: 35px 40px;
  margin-bottom: 50px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.view-listing-content .views-exposed-form::before,
.view-av-professionals .views-exposed-form::before,
.path-find .views-exposed-form::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff0055 0%, #003596 50%, #37736c 100%);
}

/* Form layout */
.view-listing-content .views-exposed-form .form--inline,
.view-av-professionals .views-exposed-form .form--inline,
.path-find .views-exposed-form .form--inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
  align-items: end;
}

/* Form items */
.view-listing-content .views-exposed-form .form-item,
.view-av-professionals .views-exposed-form .form-item,
.path-find .views-exposed-form .form-item {
  margin: 0;
}

.view-listing-content .views-exposed-form label,
.view-av-professionals .views-exposed-form label,
.path-find .views-exposed-form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Input fields */
.view-listing-content .views-exposed-form input[type="text"],
.view-listing-content .views-exposed-form select,
.view-av-professionals .views-exposed-form input[type="text"],
.view-av-professionals .views-exposed-form select,
.path-find .views-exposed-form input[type="text"],
.path-find .views-exposed-form select {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 15px;
  color: #1e293b;
  background: #fff;
  transition: all 0.3s ease;
  appearance: none;
}

.view-listing-content .views-exposed-form select,
.view-av-professionals .views-exposed-form select,
.path-find .views-exposed-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 45px;
}

.view-listing-content .views-exposed-form input[type="text"]:focus,
.view-listing-content .views-exposed-form select:focus,
.view-av-professionals .views-exposed-form input[type="text"]:focus,
.view-av-professionals .views-exposed-form select:focus,
.path-find .views-exposed-form input[type="text"]:focus,
.path-find .views-exposed-form select:focus {
  outline: none;
  border-color: #003596;
  box-shadow: 0 0 0 4px rgba(0, 53, 150, 0.1);
}

/* Apply button */
.view-listing-content .views-exposed-form .form-actions,
.view-av-professionals .views-exposed-form .form-actions,
.path-find .views-exposed-form .form-actions {
  display: flex;
  align-items: flex-end;
}

.view-listing-content .views-exposed-form input[type="submit"],
.view-listing-content .views-exposed-form .button,
.view-av-professionals .views-exposed-form input[type="submit"],
.view-av-professionals .views-exposed-form .button,
.path-find .views-exposed-form input[type="submit"],
.path-find .views-exposed-form .button {
  padding: 14px 35px;
  background: linear-gradient(135deg, #ff0055 0%, #003596 100%);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 53, 150, 0.3);
}

.view-listing-content .views-exposed-form input[type="submit"]:hover,
.view-listing-content .views-exposed-form .button:hover,
.view-av-professionals .views-exposed-form input[type="submit"]:hover,
.view-av-professionals .views-exposed-form .button:hover,
.path-find .views-exposed-form input[type="submit"]:hover,
.path-find .views-exposed-form .button:hover {
  background: linear-gradient(135deg, #003596 0%, #ff0055 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 53, 150, 0.4);
}

/* ============================================
   PROFESSIONALS GRID
   ============================================ */
.view-listing-content .view-content,
.view-av-professionals .view-content,
.path-find .view-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
}

/* ============================================
   PROFESSIONAL CARD - CREATIVE DESIGN
   ============================================ */
.view-listing-content .views-row,
.view-av-professionals .views-row,
.path-find .views-row,
.listing-item,
.professional-card {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.view-listing-content .views-row:hover,
.view-av-professionals .views-row:hover,
.path-find .views-row:hover,
.listing-item:hover,
.professional-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Card image container */
.view-listing-content .views-row .views-field-field-listing-gallery,
.view-listing-content .views-row .field--name-field-listing-gallery,
.view-av-professionals .views-row .field--name-user-picture,
.path-find .views-row .listing-image,
.listing-item .listing-image,
.professional-card .card-image,
.gva-view .listing-block .listing-image {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.view-listing-content .views-row img,
.view-av-professionals .views-row img,
.path-find .views-row .listing-image img,
.listing-item .listing-image img,
.professional-card .card-image img,
.gva-view .listing-block .listing-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.view-listing-content .views-row:hover img,
.view-av-professionals .views-row:hover img,
.path-find .views-row:hover .listing-image img,
.listing-item:hover .listing-image img,
.professional-card:hover .card-image img,
.gva-view .listing-block:hover .listing-image img {
  transform: scale(1.1);
}

/* Gradient overlay on image */
.gva-view .listing-block .listing-image::after,
.listing-item .listing-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 70%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
  pointer-events: none;
}

/* Content overlay on image */
.gva-view .listing-block .listing-content,
.listing-item .listing-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px;
  color: #fff;
  z-index: 2;
}

/* Professional name */
.gva-view .listing-block .listing-title,
.gva-view .listing-block .listing-title a,
.listing-item .listing-title,
.listing-item .listing-title a {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff !important;
  margin: 0 0 8px 0;
  text-decoration: none;
  display: block;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Specialization tag */
.gva-view .listing-block .listing-category,
.gva-view .listing-block .listing-category a,
.listing-item .listing-category,
.listing-item .listing-category a {
  display: inline-block;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #fff !important;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Location indicator */
.gva-view .listing-block .listing-location,
.listing-item .listing-location {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
}

.gva-view .listing-block .listing-location::before,
.listing-item .listing-location::before {
  content: '';
  width: 16px;
  height: 16px;
  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='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'%3E%3C/path%3E%3Ccircle cx='12' cy='10' r='3'%3E%3C/circle%3E%3C/svg%3E");
  background-size: contain;
  flex-shrink: 0;
}

/* Media icons (video/photo) */
.gva-view .listing-block .listing-icons,
.listing-item .listing-icons {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 8px;
  z-index: 3;
}

.gva-view .listing-block .listing-icons span,
.listing-item .listing-icons span {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.gva-view .listing-block .listing-icons span:hover,
.listing-item .listing-icons span:hover {
  background: #fff;
  transform: scale(1.1);
}

/* ============================================
   ALTERNATIVE CARD STYLE (If content is below image)
   ============================================ */
.view-listing-content .views-row .views-field-title,
.view-av-professionals .views-row .views-field-name,
.professional-card .card-content {
  padding: 20px 25px 25px;
}

.view-listing-content .views-row .views-field-title a,
.view-av-professionals .views-row .views-field-name a,
.professional-card .card-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1e293b;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.view-listing-content .views-row:hover .views-field-title a,
.view-av-professionals .views-row:hover .views-field-name a,
.professional-card:hover .card-content h3 {
  color: #003596;
}

/* Category badge */
.view-listing-content .views-row .views-field-field-listing-category,
.view-av-professionals .views-row .views-field-field-specialization,
.professional-card .card-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 25px;
  font-size: 13px;
  font-weight: 500;
  color: #0369a1;
  margin-bottom: 15px;
}

.view-listing-content .views-row .views-field-field-listing-category::before,
.view-av-professionals .views-row .views-field-field-specialization::before,
.professional-card .card-category::before {
  content: '⭐';
  font-size: 12px;
}

/* View profile button */
.view-listing-content .views-row .views-field-view-node a,
.view-av-professionals .views-row .views-field-view-user a,
.professional-card .view-profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(135deg, #003596 0%, #37736c 100%);
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  margin-top: 15px;
}

.view-listing-content .views-row .views-field-view-node a:hover,
.view-av-professionals .views-row .views-field-view-user a:hover,
.professional-card .view-profile-btn:hover {
  background: linear-gradient(135deg, #ff0055 0%, #003596 100%);
  transform: translateX(5px);
}

.view-listing-content .views-row .views-field-view-node a::after,
.view-av-professionals .views-row .views-field-view-user a::after,
.professional-card .view-profile-btn::after {
  content: '→';
  transition: transform 0.3s ease;
}

.view-listing-content .views-row .views-field-view-node a:hover::after,
.view-av-professionals .views-row .views-field-view-user a:hover::after,
.professional-card .view-profile-btn:hover::after {
  transform: translateX(5px);
}

/* ============================================
   PAGER / PAGINATION
   ============================================ */
.view-listing-content .pager,
.view-av-professionals .pager,
.path-find .pager {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.view-listing-content .pager__item,
.view-av-professionals .pager__item,
.path-find .pager__item {
  list-style: none;
}

.view-listing-content .pager__link,
.view-av-professionals .pager__link,
.path-find .pager__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 45px;
  height: 45px;
  padding: 0 15px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  color: #475569;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.view-listing-content .pager__link:hover,
.view-av-professionals .pager__link:hover,
.path-find .pager__link:hover {
  background: #003596;
  border-color: #003596;
  color: #fff;
  transform: translateY(-2px);
}

.view-listing-content .pager__item--active .pager__link,
.view-av-professionals .pager__item--active .pager__link,
.path-find .pager__item--active .pager__link,
.view-listing-content .pager__item.is-active .pager__link,
.view-av-professionals .pager__item.is-active .pager__link,
.path-find .pager__item.is-active .pager__link {
  background: linear-gradient(135deg, #ff0055 0%, #003596 100%);
  border-color: transparent;
  color: #fff;
}

/* ============================================
   NO RESULTS MESSAGE
   ============================================ */
.view-listing-content .view-empty,
.view-av-professionals .view-empty,
.path-find .view-empty {
  text-align: center;
  padding: 80px 40px;
  background: #f8fafc;
  border-radius: 20px;
  color: #64748b;
}

.view-listing-content .view-empty::before,
.view-av-professionals .view-empty::before,
.path-find .view-empty::before {
  content: '🔍';
  display: block;
  font-size: 60px;
  margin-bottom: 20px;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */
@media (max-width: 992px) {
  .view-listing-content .views-exposed-form,
  .view-av-professionals .views-exposed-form,
  .path-find .views-exposed-form {
    padding: 25px;
  }
  
  .view-listing-content .views-exposed-form .form--inline,
  .view-av-professionals .views-exposed-form .form--inline,
  .path-find .views-exposed-form .form--inline {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .view-listing-content .view-content,
  .view-av-professionals .view-content,
  .path-find .view-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .view-listing-content,
  .view-av-professionals,
  .path-find .view {
    padding: 20px 15px;
  }
  
  .view-listing-content .views-exposed-form .form--inline,
  .view-av-professionals .views-exposed-form .form--inline,
  .path-find .views-exposed-form .form--inline {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .view-listing-content .views-exposed-form input[type="submit"],
  .view-av-professionals .views-exposed-form input[type="submit"],
  .path-find .views-exposed-form input[type="submit"] {
    width: 100%;
  }
  
  .view-listing-content .view-content,
  .view-av-professionals .view-content,
  .path-find .view-content {
    grid-template-columns: 1fr;
  }
  
  .gva-view .listing-block .listing-image,
  .listing-item .listing-image {
    height: 250px;
  }
}

/* ============================================
   LISTING BLOCK SPECIFIC (GVA Theme)
   ============================================ */
.gva-view .listing-block {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
}

.gva-view .listing-block:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Hide duplicate elements if needed */
.gva-view .listing-block .hidden-info,
.listing-item .hidden-info {
  display: none;
}