/* ========================================
   FRONTEND FORM STYLING - Theme-specific forms only
   Apply consistent styling to front-end Drupal forms
   Excludes admin pages and backend forms
   ======================================== */

/* ========================================
   FORM CONTAINERS
   ======================================== */

/* All form wrappers - Frontend only */
body:not(.path-admin) .user-form-wrapper,
body:not(.path-admin) .form-wrapper {
  max-width: 800px;
  margin: 80px auto 40px;
  padding: 0 20px;
}

/* All forms - white card style - Frontend only */
body:not(.path-admin) .user-form,
body:not(.path-admin) #user-form,
body:not(.path-admin) form.user-login-form,
body:not(.path-admin) form.user-register-form,
body:not(.path-admin) form.user-pass,
body:not(.path-admin) form.user-pass-reset,
body:not(.path-admin) form.user-logout-confirm,
body:not(.path-admin) form.commerce-checkout-flow,
body:not(.path-admin) form.webform-submission-form,
body:not(.path-admin) .webform-client-form {
  background: #fff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
  padding: 30px !important;
  border: none !important;
  max-width: 800px;
  margin: 0 auto;
}

/* Exclude search, newsletter, and small forms from card styling */
body:not(.path-admin) form.search-form,
body:not(.path-admin) form.views-exposed-form,
body:not(.path-admin) .block form,
body:not(.path-admin) footer form,
body:not(.path-admin) .footer form,
body:not(.path-admin) .site-footer form,
body:not(.path-admin) .pbmit-footer-newsletter form,
body:not(.path-admin) form[action*="newsletter"],
body:not(.path-admin) form[action*="subscribe"] {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Exclude footer forms from input styling */
body:not(.path-admin) footer form input,
body:not(.path-admin) .footer form input,
body:not(.path-admin) .site-footer form input,
body:not(.path-admin) .pbmit-footer-newsletter input,
body:not(.path-admin) .pbmit-footer-newsletter .form-control,
body:not(.path-admin) footer form textarea,
body:not(.path-admin) .footer form textarea,
body:not(.path-admin) .site-footer form textarea,
body:not(.path-admin) footer form select,
body:not(.path-admin) .footer form select,
body:not(.path-admin) .site-footer form select {
  width: auto !important;
  padding: 10px 15px !important;
  display: inline-block !important;
  border: none !important;
  border-bottom: 1px solid #ddd !important;
  border-radius: 0 !important;
  background: transparent !important;
  min-height: auto !important;
}

/* Exclude footer form buttons from styling */
body:not(.path-admin) footer form button,
body:not(.path-admin) .footer form button,
body:not(.path-admin) .site-footer form button,
body:not(.path-admin) .pbmit-footer-newsletter button,
body:not(.path-admin) footer form input[type="submit"],
body:not(.path-admin) .footer form input[type="submit"],
body:not(.path-admin) .site-footer form input[type="submit"] {
  width: auto !important;
  min-width: auto !important;
  display: inline-block !important;
  transform: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Exclude footer form labels */
body:not(.path-admin) footer form label,
body:not(.path-admin) .footer form label,
body:not(.path-admin) .site-footer form label {
  display: inline-block !important;
  margin-bottom: 5px !important;
  font-weight: normal !important;
}

/* ========================================
   FIELDSETS
   ======================================== */

body:not(.path-admin) fieldset,
body:not(.path-admin) .fieldset {
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  background: #f8f9fa !important;
}

body:not(.path-admin) fieldset legend,
body:not(.path-admin) .fieldset legend {
  font-weight: 600 !important;
  color: #333 !important;
  font-size: 16px !important;
  padding: 0 10px !important;
  background: #fff !important;
  border-radius: 4px !important;
}

/* ========================================
   FORM ITEMS
   ======================================== */

body:not(.path-admin) .form-item,
body:not(.path-admin) .js-form-item,
body:not(.path-admin) .form-type-textfield,
body:not(.path-admin) .form-type-email,
body:not(.path-admin) .form-type-password,
body:not(.path-admin) .form-type-textarea,
body:not(.path-admin) .form-type-select,
body:not(.path-admin) .form-type-number,
body:not(.path-admin) .form-type-url,
body:not(.path-admin) .form-type-tel,
body:not(.path-admin) .form-type-date {
  margin-bottom: 20px !important;
}

/* ========================================
   LABELS
   ======================================== */

body:not(.path-admin) label,
body:not(.path-admin) .form-item label,
body:not(.path-admin) .js-form-item label,
body:not(.path-admin) .form-label {
  display: block !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  color: #333 !important;
  font-size: 14px !important;
}

label.option {
  font-weight: 400 !important;
  display: inline !important;
  margin-left: 8px !important;
}

/* Required indicator */
.form-required,
.js-form-required::after {
  color: #dc3545 !important;
}

/* ========================================
   INPUT FIELDS
   ======================================== */

body:not(.path-admin) input[type="text"],
body:not(.path-admin) input[type="email"],
body:not(.path-admin) input[type="password"],
body:not(.path-admin) input[type="search"],
body:not(.path-admin) input[type="number"],
body:not(.path-admin) input[type="tel"],
body:not(.path-admin) input[type="url"],
body:not(.path-admin) input[type="date"],
body:not(.path-admin) input[type="time"],
body:not(.path-admin) input[type="datetime-local"],
body:not(.path-admin) select,
body:not(.path-admin) textarea,
body:not(.path-admin) .form-text,
body:not(.path-admin) .form-email,
body:not(.path-admin) .form-password,
body:not(.path-admin) .form-search,
body:not(.path-admin) .form-number,
body:not(.path-admin) .form-tel,
body:not(.path-admin) .form-url,
body:not(.path-admin) .form-date,
body:not(.path-admin) .form-select,
body:not(.path-admin) .form-textarea {
  width: 100% !important;
  padding: 12px 15px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  color: #333 !important;
  background: #fff !important;
  transition: all 0.3s ease !important;
  box-sizing: border-box !important;
  line-height: 1.5 !important;
}

/* Focus state */
body:not(.path-admin) input[type="text"]:focus,
body:not(.path-admin) input[type="email"]:focus,
body:not(.path-admin) input[type="password"]:focus,
body:not(.path-admin) input[type="search"]:focus,
body:not(.path-admin) input[type="number"]:focus,
body:not(.path-admin) input[type="tel"]:focus,
body:not(.path-admin) input[type="url"]:focus,
body:not(.path-admin) input[type="date"]:focus,
body:not(.path-admin) select:focus,
body:not(.path-admin) textarea:focus,
body:not(.path-admin) .form-text:focus,
body:not(.path-admin) .form-email:focus,
body:not(.path-admin) .form-password:focus,
body:not(.path-admin) .form-select:focus,
body:not(.path-admin) .form-textarea:focus {
  border-color: #0073aa !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1) !important;
}

/* Textarea specific */
body:not(.path-admin) textarea,
body:not(.path-admin) .form-textarea {
  min-height: 120px !important;
  resize: vertical !important;
}

/* Select specific */
body:not(.path-admin) select,
body:not(.path-admin) .form-select {
  cursor: pointer !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 35px !important;
}

/* ========================================
   CHECKBOXES & RADIOS
   ======================================== */

.form-type-checkbox,
.form-type-radio {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

input[type="checkbox"],
input[type="radio"],
.form-checkbox,
.form-radio {
  width: auto !important;
  margin-right: 8px !important;
  cursor: pointer !important;
}

.form-type-checkbox label,
.form-type-radio label {
  margin-bottom: 0 !important;
  font-weight: 400 !important;
  cursor: pointer !important;
}

/* ========================================
   FORM DESCRIPTIONS
   ======================================== */

.description,
.form-item-description,
.help-block,
small.form-text {
  font-size: 13px !important;
  color: #666 !important;
  margin-top: 5px !important;
  display: block !important;
  line-height: 1.4 !important;
}

/* ========================================
   ERROR STATES
   ======================================== */

/* Error state for form items */
.form-item--error input,
.form-item--error select,
.form-item--error textarea,
.error input,
.error select,
.error textarea {
  border-color: #dc3545 !important;
  background: #fff5f5 !important;
}

/* Error state for inputs with error class */
body:not(.path-admin) input.error,
body:not(.path-admin) input.is-invalid,
body:not(.path-admin) select.error,
body:not(.path-admin) select.is-invalid,
body:not(.path-admin) textarea.error,
body:not(.path-admin) textarea.is-invalid,
body:not(.path-admin) .form-number.error,
body:not(.path-admin) .form-number.is-invalid {
  border: 2px solid #dc3545 !important;
  background: #fff5f5 !important;
  color: #dc3545 !important;
}

.form-item--error-message,
.error-message,
.messages--error {
  color: #dc3545 !important;
  font-size: 13px !important;
  margin-top: 5px !important;
  display: block !important;
  font-weight: bold !important;
}

/* ========================================
   FORM ACTIONS (BUTTONS)
   ======================================== */

body:not(.path-admin) .form-actions,
body:not(.path-admin) .form-submit-wrapper,
body:not(.path-admin) .form-buttons {
  display: flex !important;
  gap: 15px !important;
  margin-top: 30px !important;
  padding-top: 20px !important;
  border-top: 1px solid #e0e0e0 !important;
  justify-content: flex-start !important;
}

/* Primary submit button */
body:not(.path-admin) input[type="submit"],
body:not(.path-admin) button[type="submit"],
body:not(.path-admin) .button--primary,
body:not(.path-admin) .form-submit,
body:not(.path-admin) .btn-primary {
  display: inline-block !important;
  padding: 12px 24px !important;
  background: #0073aa !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  line-height: 1.4 !important;
  width: auto !important;
  min-width: 120px !important;

}

/* Secondary/Cancel buttons */
.button,
.btn-secondary,
.form-actions a,
input[type="button"],
button[type="button"] {
  display: inline-block !important;
  padding: 12px 24px !important;
  background: #6c757d !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  line-height: 1.4 !important;
  width: auto !important;
  min-width: 120px !important;
}

.button:hover,
.btn-secondary:hover,
.form-actions a:hover,
input[type="button"]:hover,
button[type="button"]:hover {
  background: #5a6268 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Delete/Danger buttons */
.button--danger,
.btn-danger {
  background: #dc3545 !important;
}

.button--danger:hover,
.btn-danger:hover {
  background: #c82333 !important;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

/* ========================================
   SPECIFIC FORM ADJUSTMENTS
   ======================================== */

/* Login/Register forms */
.user-login-form,
.user-register-form,
.user-pass {
  max-width: 500px !important;
  margin: 80px auto 40px !important;
}

/* File upload */
input[type="file"],
.form-file {
  padding: 8px !important;
  border: 2px dashed #ddd !important;
  background: #f8f9fa !important;
}

input[type="file"]:hover,
.form-file:hover {
  border-color: #0073aa !important;
}

/* Autocomplete */
.ui-autocomplete {
  background: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Vertical tabs */
.vertical-tabs {
  border: 1px solid #e0e0e0 !important;
  border-radius: 6px !important;
}

.vertical-tabs__menu-item {
  border-bottom: 1px solid #e0e0e0 !important;
}

.vertical-tabs__menu-item.is-selected {
  background: #f8f9fa !important;
  border-left: 3px solid #0073aa !important;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .user-form-wrapper,
  .form-wrapper,
  form {
    padding: 20px !important;
    margin: 40px 15px !important;
  }
  
  .form-actions {
    flex-direction: column !important;
  }
  
  input[type="submit"],
  button[type="submit"],
  .button,
  .form-submit {
    width: 100% !important;
  }
}

/* ========================================
   OVERRIDE THEME SPECIFICS
   ======================================== */

/* Remove any theme-specific form styling */
.form-control {
  height: auto !important;
}

/* Ensure proper spacing */
.form-item + .form-item {
  margin-top: 20px !important;
}

/* Clean up any inline styles */
form[style] {
  background: #fff !important;
  padding: 30px !important;
}