/**
 * Transparent / Glass-style form design
 * Applied to forms with class .form-glass for consistent UI across the project.
 * Reference: leasekey.in-style glassmorphism with backdrop blur and subtle borders.
 */

/* -------------------------------------------------------------------------
   Form container (form or wrapper with .form-glass)
   ------------------------------------------------------------------------- */
.form-glass {
  display: block;
  padding: 6px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Fallback when backdrop-filter is not supported (e.g. older Firefox) */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .form-glass {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* Light context (e.g. auth page, light modals): slightly different contrast */
.form-glass.form-glass-light {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
  .form-glass.form-glass-light {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* -------------------------------------------------------------------------
   Inputs: text, email, tel, password, textarea, select
   ------------------------------------------------------------------------- */
.form-glass .form-control,
.form-glass input:not([type="checkbox"]):not([type="radio"]),
.form-glass textarea,
.form-glass .form-select {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #fff;
  border-radius: 8px;
  min-height: 48px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-glass.form-glass-light .form-control,
.form-glass.form-glass-light input:not([type="checkbox"]):not([type="radio"]),
.form-glass.form-glass-light textarea,
.form-glass.form-glass-light .form-select {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  color: var(--bs-gray-800, #1e2129);
}

.form-glass .form-control::placeholder,
.form-glass input::placeholder,
.form-glass textarea::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.form-glass.form-glass-light .form-control::placeholder,
.form-glass.form-glass-light input::placeholder,
.form-glass.form-glass-light textarea::placeholder {
  color: var(--bs-gray-500, #a1a5b7);
}

/* Focus state: visible ring and border highlight (accessibility) */
.form-glass .form-control:focus,
.form-glass input:not([type="checkbox"]):not([type="radio"]):focus,
.form-glass textarea:focus,
.form-glass .form-select:focus {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: var(--bs-primary, #009ef7) !important;
  box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.2);
  outline: 0;
}

.form-glass.form-glass-light .form-control:focus,
.form-glass.form-glass-light input:not([type="checkbox"]):not([type="radio"]):focus,
.form-glass.form-glass-light textarea:focus,
.form-glass.form-glass-light .form-select:focus {
  background: #fff !important;
  border-color: var(--bs-primary, #009ef7) !important;
  box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.2);
}

/* Focus visible for keyboard navigation */
.form-glass .form-control:focus-visible,
.form-glass input:focus-visible,
.form-glass textarea:focus-visible,
.form-glass .form-select:focus-visible,
.form-glass .btn:focus-visible {
  outline: 2px solid var(--bs-primary, #009ef7);
  outline-offset: 2px;
}

/* Error state: red border + helper text remains visible */
.form-glass .form-control.is-invalid,
.form-glass input.is-invalid,
.form-glass textarea.is-invalid,
.form-glass .form-select.is-invalid {
  border-color: var(--bs-danger, #f1416c) !important;
  background: rgba(241, 65, 108, 0.06) !important;
}

.form-glass .form-control.is-invalid:focus,
.form-glass input.is-invalid:focus,
.form-glass textarea.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(241, 65, 108, 0.2);
}

.form-glass .invalid-feedback {
  color: var(--bs-danger, #f1416c);
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

/* Textarea consistent height */
.form-glass textarea.form-control,
.form-glass textarea {
  min-height: 100px;
  border-radius: 8px;
}

/* -------------------------------------------------------------------------
   Buttons: primary alignment with branding, hover, active, disabled
   ------------------------------------------------------------------------- */
.form-glass .btn-primary {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-glass .btn-primary:hover:not(:disabled):not(.disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 158, 247, 0.4);
}

.form-glass .btn-primary:active:not(:disabled):not(.disabled) {
  transform: translateY(0);
}

.form-glass .btn-primary:disabled,
.form-glass .btn-primary.disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

/* Other buttons in form (e.g. warning, secondary) */
.form-glass .btn:not(.btn-primary):hover:not(:disabled):not(.disabled) {
  transform: translateY(-1px);
}

.form-glass .btn:not(.btn-primary):disabled,
.form-glass .btn:not(.btn-primary).disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* -------------------------------------------------------------------------
   Labels: readable contrast
   ------------------------------------------------------------------------- */
.form-glass .form-label {
  color: var(--bs-gray-800, #1e2129);
  font-weight: 600;
}

.form-glass.form-glass-light .form-label {
  color: var(--bs-gray-800, #1e2129);
}

/* -------------------------------------------------------------------------
   Checkbox / radio in forms
   ------------------------------------------------------------------------- */
.form-glass .form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(0, 158, 247, 0.2);
}

.form-glass .form-check-label {
  color: var(--bs-gray-700, #5e6278);
}

/* -------------------------------------------------------------------------
   Responsive: spacing on small screens
   ------------------------------------------------------------------------- */
/* Compact variant for search / inline forms */
.form-glass.form-glass-compact {
  padding: 12px 16px;
}

/* Preserve flex layout when form has d-flex */
.form-glass.d-flex {
  display: flex;
}

/* Optional: glass-style modal content (for modals that wrap a form) */
.modal-content.form-glass-modal {
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .modal-content.form-glass-modal {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* -------------------------------------------------------------------------
   Responsive: spacing on small screens
   ------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .form-glass {
    padding: 20px 24px;
    border-radius: 10px;
  }

  .form-glass.form-glass-compact {
    padding: 10px 14px;
  }

  .form-glass .form-control,
  .form-glass input:not([type="checkbox"]):not([type="radio"]),
  .form-glass .form-select {
    min-height: 44px;
  }
}