/**
 * DHEERGAYUSH — Premium form system (loads after page CSS)
 * Matches dheergayush-theme.css — orange #F26727, charcoal #3C3C3C
 */

/* ── Form panels & containers ── */
.dg-form-panel,
.form-container,
.login-card,
.card#loginCard,
#adminLoginContainer,
.auth-form,
.payment-form,
.modal-content form,
.checkout-grid .dg-form-panel {
  position: relative;
}

.dg-form-panel,
.form-container,
.login-card,
.card#loginCard,
#adminLoginContainer,
.auth-form {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: min(90dvh, 920px);
}

/* Long registration / payment forms — scroll inside the panel when content exceeds viewport */
#custom-prejoin,
#regdocsec .auth-form,
.telemedicine .auth-form,
#paymentFormContainer,
.checkout-grid .dg-form-panel,
#orderPaymentForm.dg-form-panel,
.prescription-modal .modal-content,
.reports-modal-content {
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top)) - max(32px, env(safe-area-inset-bottom)));
}

.dg-form-panel::before,
.form-container::before,
.login-card::before,
.card#loginCard::before,
#adminLoginContainer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--dg-orange), var(--dg-orange-light), var(--dg-charcoal));
  border-radius: var(--dg-radius-lg) var(--dg-radius-lg) 0 0;
  pointer-events: none;
}

.login-card,
.card#loginCard,
#adminLoginContainer {
  border: 1px solid var(--dg-border) !important;
  box-shadow: 0 20px 60px rgba(60, 60, 60, 0.12), 0 8px 24px rgba(242, 103, 39, 0.08) !important;
  border-radius: var(--dg-radius-lg) !important;
}

.form-container {
  background: var(--dg-card) !important;
  border: 1px solid var(--dg-border) !important;
  border-radius: var(--dg-radius-lg) !important;
  box-shadow: 0 20px 60px rgba(60, 60, 60, 0.12), 0 8px 24px rgba(242, 103, 39, 0.08) !important;
  padding: 36px 32px !important;
}

.auth-form {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius-lg);
  padding: 28px 24px;
  box-shadow: var(--dg-shadow);
}

.auth-form h3 {
  font-family: var(--dg-display);
  color: var(--dg-charcoal);
  border-bottom: 2px solid rgba(242, 103, 39, 0.2);
  padding-bottom: 12px;
  margin-bottom: 22px !important;
}

/* ── Labels ── */
form label:not(:has(input[type='checkbox'])):not(:has(input[type='radio'])),
.form-container > label,
.form-group > label,
.dg-form-group > label,
.filter-group > label,
.payment-form .form-group label,
.file-upload-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dg-charcoal);
  margin-bottom: 8px;
}

.form-container .doctor-details label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  color: #666;
}

/* ── Text inputs, selects, textareas ── */
form input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='hidden']):not([type='file']):not([type='image']):not([type='range']),
form select,
form textarea,
.dg-input,
.dg-select,
.dg-textarea,
.form-group input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='hidden']),
.form-group select,
.form-group textarea,
.form-container input:not([type='hidden']):not([type='file']):not([type='checkbox']):not([type='radio']),
.form-container textarea,
.filter-group input:not([type='button']),
.filter-group select,
#username-input,
#phone-input,
#search-input,
.room-input,
.search-wrap input,
.modal-content input:not([type='hidden']):not([type='file']),
.modal-content select,
.modal-content textarea,
#orderPaymentForm input:not([type='file']):not([type='radio']):not([type='hidden']),
#payment-form input:not([type='file']):not([type='radio']):not([type='hidden']),
#payment-form textarea,
.payment-form input:not([type='file']):not([type='hidden']),
.payment-form textarea,
#adminLoginForm input,
#modalFields input,
#modalFields select,
#modalFields textarea {
  width: 100% !important;
  max-width: 100%;
  padding: 14px 16px !important;
  margin-bottom: 0;
  border: 1.5px solid var(--dg-border) !important;
  border-radius: 12px !important;
  font-family: var(--dg-font) !important;
  font-size: 0.95rem !important;
  color: var(--dg-charcoal) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
  box-sizing: border-box !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.15s ease;
  box-shadow: inset 0 1px 2px rgba(60, 60, 60, 0.04);
}

form input::placeholder,
form textarea::placeholder,
.dg-input::placeholder,
.dg-textarea::placeholder {
  color: rgba(60, 60, 60, 0.45);
  font-weight: 400;
}

form input:hover:not(:disabled),
form select:hover:not(:disabled),
form textarea:hover:not(:disabled),
.dg-input:hover,
.dg-select:hover,
.dg-textarea:hover {
  border-color: rgba(242, 103, 39, 0.45) !important;
}

form input:focus,
form select:focus,
form textarea:focus,
.dg-input:focus,
.dg-select:focus,
.dg-textarea:focus {
  outline: none !important;
  border-color: var(--dg-orange) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(242, 103, 39, 0.14), inset 0 1px 2px rgba(60, 60, 60, 0.04) !important;
}

form textarea,
.dg-textarea,
.form-group textarea,
.form-container textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}

/* Search / room inputs */
.search-wrap,
.search-container {
  display: flex;
  align-items: center;
  background: #fff !important;
  border: 1.5px solid var(--dg-border) !important;
  border-radius: 50px !important;
  padding: 4px 6px 4px 18px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.search-wrap:focus-within,
.search-container:focus-within {
  border-color: var(--dg-orange) !important;
  box-shadow: 0 0 0 4px rgba(242, 103, 39, 0.12);
}

.search-wrap input,
.search-container input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 12px 8px !important;
}

.room-input-section {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}

.room-input {
  flex: 1;
  min-width: 200px;
}

/* ── Form groups & spacing ── */
.form-group,
.dg-form-group,
.filter-group {
  margin-bottom: 20px;
}

form > label + input,
form > label + textarea,
.form-container > label + input,
.form-container > label + textarea {
  margin-bottom: 18px;
}

#orderPaymentForm .dg-form-group,
#orderPaymentForm h4 + input {
  margin-bottom: 16px;
}

/* ── File uploads ── */
.form-inputfile,
.file-upload,
#payment-proof-container,
.manual-report-upload form {
  margin: 20px 0;
}

.form-inputfile label[for],
.file-input-button,
.file-upload-label,
.form-container label[for='patientReports'],
#payment-proof-label {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 14px 20px !important;
  background: linear-gradient(135deg, rgba(242, 103, 39, 0.08), rgba(255, 248, 225, 0.9)) !important;
  border: 2px dashed rgba(242, 103, 39, 0.45) !important;
  border-radius: 12px !important;
  color: var(--dg-charcoal) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
  margin-bottom: 10px !important;
  width: auto;
  max-width: 100%;
}

.form-inputfile label[for]:hover,
.file-input-button:hover,
.file-upload-label:hover {
  background: rgba(242, 103, 39, 0.14) !important;
  border-color: var(--dg-orange) !important;
  transform: translateY(-1px);
}

input[type='file'] {
  width: 100%;
  padding: 12px !important;
  border: 1.5px dashed rgba(242, 103, 39, 0.35) !important;
  border-radius: 12px !important;
  background: #fafafa !important;
  font-family: var(--dg-font);
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

input[type='file']:hover {
  border-color: var(--dg-orange) !important;
  background: #fff !important;
}

input[type='file']::file-selector-button {
  padding: 10px 18px;
  margin-right: 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--dg-orange), var(--dg-orange-light));
  color: var(--dg-charcoal);
  font-family: var(--dg-font);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

input[type='file']::file-selector-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(242, 103, 39, 0.35);
}

/* ── Checkboxes & radios ── */
.terms-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  margin: 20px 0;
  background: linear-gradient(135deg, rgba(255, 248, 225, 0.6), rgba(242, 103, 39, 0.06));
  border: 1px solid rgba(242, 103, 39, 0.2);
  border-radius: 12px;
}

.terms-box label,
form label:has(input[type='checkbox']),
form label:has(input[type='radio']),
.dg-form-group label:has(input[type='radio']) {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  margin-bottom: 0 !important;
  cursor: pointer;
}

input[type='checkbox']:not(.form-checkbox),
input[type='radio'] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: var(--dg-orange);
  cursor: pointer;
  flex-shrink: 0;
}

.form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 22px !important;
  height: 22px !important;
  border: 2px solid rgba(60, 60, 60, 0.25) !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

.form-checkbox:checked {
  background: linear-gradient(135deg, var(--dg-orange), var(--dg-orange-light)) !important;
  border-color: var(--dg-orange) !important;
}

.form-checkbox:checked::before {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

/* ── Submit & form buttons (keeps custom .button components on login pages) ── */
form button[type='submit']:not(.button),
.form-container button[type='submit'],
.login-btn,
#adminLoginForm .login-btn,
.auth-form .btn,
.submit-btn:not(.tab-btn):not(.button),
#orderPaymentForm button[type='submit']:not(.button),
.payment-form .submit-btn,
#proceed-payment-btn,
#join-btn,
#checkout-btn.submit-btn,
#report-upload-form .submit-btn {
  width: 100%;
  padding: 14px 24px !important;
  margin-top: 8px;
  border: none !important;
  border-radius: 50px !important;
  font-family: var(--dg-font) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  cursor: pointer;
  color: var(--dg-charcoal) !important;
  background: linear-gradient(135deg, var(--dg-orange), var(--dg-orange-light)) !important;
  box-shadow: 0 6px 20px rgba(242, 103, 39, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

form button[type='submit']:not(.button):hover,
.form-container button[type='submit']:hover,
.login-btn:hover,
.submit-btn:not(.button):hover,
#join-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(242, 103, 39, 0.45) !important;
}

.filter-btn {
  border-radius: 50px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(242, 103, 39, 0.25);
}

.filter-controls {
  background: linear-gradient(135deg, rgba(255, 248, 225, 0.5), #fff) !important;
  border: 1px solid var(--dg-border) !important;
  border-radius: var(--dg-radius) !important;
  padding: 20px !important;
}

/* Prejoin panel */
#custom-prejoin .right-panel input[type='text'] {
  margin-bottom: 16px;
}

#custom-prejoin .right-panel h2 {
  font-family: var(--dg-display);
  color: var(--dg-charcoal);
  margin-bottom: 20px;
}

.role-selection {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid var(--dg-border);
}

/* Modal forms */
.modal-content {
  border-radius: var(--dg-radius-lg) !important;
  border: 1px solid var(--dg-border);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15) !important;
}

.modal-content h2 {
  font-family: var(--dg-display);
  color: var(--dg-charcoal);
  padding-right: 36px;
}

#orderPaymentForm {
  padding: 20px 0 0;
  border-top: 1px solid var(--dg-border);
}

#orderPaymentForm h4 {
  font-family: var(--dg-display);
  color: var(--dg-charcoal);
  margin-bottom: 18px;
}

/* Doctor details read-only blocks */
.doctor-details p {
  background: linear-gradient(180deg, #fff, #f5f5f5) !important;
  border: 1px solid var(--dg-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-weight: 600;
  color: var(--dg-charcoal);
  margin: 0;
}

/* Login headings */
.login-card h2,
.card h2,
#adminLoginContainer h2 {
  font-family: var(--dg-display) !important;
  color: var(--dg-charcoal) !important;
  margin-bottom: 28px !important;
}

#adminLoginContainer h2 {
  color: var(--dg-orange) !important;
}

/* Payment form in video call overlay */
#payment-form[style],
.payment-form {
  padding: 16px 0;
}

.manual-report-upload {
  padding: 16px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid var(--dg-border);
  margin-top: 16px;
}

.manual-report-upload h4 {
  font-family: var(--dg-display);
  color: var(--dg-charcoal);
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  .form-container,
  .login-card,
  #adminLoginContainer,
  .dg-form-panel,
  .auth-form {
    padding: 28px 20px !important;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top)) - max(24px, env(safe-area-inset-bottom)));
  }

  #custom-prejoin {
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  #custom-prejoin .right-panel {
    min-height: 0;
    flex-shrink: 0;
  }

  form input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='file']),
  form textarea,
  form select {
    padding: 12px 14px !important;
  }
}

/* Utility: force scroll on any tall form wrapper */
.dg-form-scroll {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100dvh - max(32px, env(safe-area-inset-top)) - max(32px, env(safe-area-inset-bottom)));
}