/* ==========================================================
   GREENWOODS BOOKING FORM Plugin Stylesheet
   Tokens mirror the main theme (DM Sans / Poppins, green palette)
   ========================================================== */

:root {
  --gw-green:        #61B247;
  --gw-green-top:    #559F3F;
  --gw-forest:       #046937;
  --gw-green-light:  #edf7e7;
  --gw-green-mid:    #c8eab5;
  --gw-border:       #e8f0e3;
  --gw-off-white:    #f7faf5;
  --gw-text:         #1a1a1a;
  --gw-text-sub:     #4a5568;
  --gw-text-muted:   #718096;
  --gw-white:        #ffffff;
  --gw-error:        #e53e3e;
  --gw-radius:       10px;
  --gw-radius-sm:    7px;
  --gw-shadow:       0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --gw-shadow-focus: 0 0 0 3px rgba(97,178,71,0.25);
  --gw-font:         'DM Sans', sans-serif;
  --gw-font-head:    'Poppins', sans-serif;
  --gw-transition:   0.18s ease;
}

/* ── Wrapper ── */
#greenwoods-contact-form {
  position: relative;
  font-family: var(--gw-font);
  color: var(--gw-text);
}

/* ==========================================================
   PROGRESS DOTS
   ========================================================== */
#form-progress {
  padding: 24px 0 20px;
  width: 100%;
}

.progress-container {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
}

#progress-dots {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 0 12px;
}

#progress-line {
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 3px;
  background: var(--gw-green-mid);
  transform: translateY(-50%);
  border-radius: 2px;
  z-index: 1;
}

.progress-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--gw-green-mid);
  background: var(--gw-white);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.progress-dot.inactive {
  background: var(--gw-white);
  border-color: var(--gw-green-mid);
}

.progress-dot.completed {
  background: var(--gw-green);
  border-color: var(--gw-forest);
  transform: scale(1.1);
  box-shadow: 0 0 0 3px rgba(97,178,71,0.2);
}

.progress-dot.active {
  background: var(--gw-forest);
  border-color: var(--gw-forest);
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(4,105,55,0.18);
}

/* ==========================================================
   FORM PAGES
   ========================================================== */
.form-page {
  display: none;
  animation: gw-fade-in 0.22s ease;
}

.form-page:first-of-type {
  display: block;
}

@keyframes gw-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Field label ── */
.field-label {
  display: block;
  font-family: var(--gw-font-head);
  font-size: 15px;
  font-weight: 600;
  color: var(--gw-text);
  margin-bottom: 12px;
  line-height: 1.4;
}

.appointment-label {
  display: block;
  font-family: var(--gw-font);
  font-size: 13px;
  font-weight: 400;
  color: var(--gw-text-muted);
  margin-top: 4px;
}

/* ── Text inputs, selects, textarea ── */
#location,
.booking-field {
  width: 100% !important;
  padding: 13px 16px !important;
  border: 1.5px solid var(--gw-border) !important;
  border-radius: var(--gw-radius-sm) !important;
  font-family: var(--gw-font) !important;
  font-size: 15px !important;
  color: var(--gw-text) !important;
  background: var(--gw-white) !important;
  height: auto !important;
  line-height: 1.5 !important;
  transition: border-color var(--gw-transition), box-shadow var(--gw-transition);
  outline: none !important;
}

#location:focus,
.booking-field:focus {
  border-color: var(--gw-green) !important;
  box-shadow: var(--gw-shadow-focus) !important;
}

textarea.booking-field {
  min-height: 110px;
  resize: vertical;
}

/* ── Appointment date/time row ── */
.appointment-datetime {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* ==========================================================
   OPTION BUTTONS (yes/no, booking type)
   ========================================================== */
.booking-options,
.yes-no-options {
  display: flex;
  gap: 10px;
}

.option {
  flex: 1;
  padding: 13px 16px;
  text-align: center;
  background: var(--gw-white);
  color: var(--gw-text-sub);
  font-family: var(--gw-font);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--gw-radius-sm);
  border: 1.5px solid var(--gw-border);
  transition: background var(--gw-transition), color var(--gw-transition), border-color var(--gw-transition), box-shadow var(--gw-transition);
  user-select: none;
}

.option:hover {
  background: var(--gw-green-light);
  border-color: var(--gw-green-mid);
  color: var(--gw-forest);
}

.option.selected {
  background: var(--gw-forest);
  border-color: var(--gw-forest);
  color: var(--gw-white);
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(4,105,55,0.22);
}

/* Vertical option list */
.vertical-options .option {
  margin-bottom: 8px;
  text-align: center;
}

/* ==========================================================
   LOCATION GRID
   ========================================================== */
.location-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.location-option-btn {
  position: relative;
  cursor: pointer;
  width: 100%;
  border: 1.5px solid var(--gw-border);
  border-radius: var(--gw-radius-sm);
  overflow: hidden;
  padding: 13px 16px;
  background: var(--gw-white);
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--gw-font);
  font-size: 14px;
  font-weight: 500;
  color: var(--gw-text-sub);
  transition: background var(--gw-transition), border-color var(--gw-transition), color var(--gw-transition);
}

.location-option-btn:hover {
  background: var(--gw-green-light);
  border-color: var(--gw-green-mid);
  color: var(--gw-forest);
}

.location-option-btn.selected {
  background: var(--gw-green-light);
  border-color: var(--gw-forest);
  color: var(--gw-forest);
  font-weight: 600;
}

.location-option-btn.selected::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 12px;
  width: 18px;
  height: 18px;
  background: var(--gw-forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  border-radius: 50%;
}

.last-location-message {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--gw-text-muted);
  font-style: italic;
}

/* ==========================================================
   NAME SELECTION LIST
   ========================================================== */
#name-options {
  max-height: 300px;
  overflow-y: auto;
  border: 1.5px solid var(--gw-border);
  border-radius: var(--gw-radius-sm);
}

.name-option {
  padding: 12px 16px;
  border-bottom: 1px solid var(--gw-border);
  cursor: pointer;
  font-size: 14px;
  color: var(--gw-text-sub);
  transition: background var(--gw-transition), color var(--gw-transition);
}

.name-option:last-child { border-bottom: none; }
.name-option:hover { background: var(--gw-green-light); color: var(--gw-forest); }

/* ==========================================================
   ADDRESS AUTOCOMPLETE
   ========================================================== */
#address-suggestions {
  border: 1.5px solid var(--gw-border);
  border-top: none;
  border-radius: 0 0 var(--gw-radius-sm) var(--gw-radius-sm);
  background: var(--gw-white);
  box-shadow: var(--gw-shadow);
  max-height: 220px;
  overflow-y: auto;
}

#address-suggestions div {
  padding: 11px 16px;
  font-size: 14px;
  color: var(--gw-text-sub);
  cursor: pointer;
  border-bottom: 1px solid var(--gw-border);
  transition: background var(--gw-transition);
}

#address-suggestions div:last-child { border-bottom: none; }
#address-suggestions div:hover { background: var(--gw-green-light); color: var(--gw-forest); }

/* Selected address card */
#selected-address-container {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--gw-green-light);
  border: 1.5px solid var(--gw-forest);
  border-radius: var(--gw-radius-sm);
}

.addressSection {
  display: flex;
  align-items: center;
  gap: 12px;
}

.patientAddress { flex: 1; }

.patientAddress label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gw-forest);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#clear-address-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff0f0;
  color: #c53030;
  border: 1.5px solid #fed7d7;
  border-radius: var(--gw-radius-sm);
  font-family: var(--gw-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--gw-transition), border-color var(--gw-transition);
}

#clear-address-btn:hover {
  background: #fed7d7;
  border-color: #fc8181;
}

/* ==========================================================
   FILE UPLOAD SECTION
   ========================================================== */
.uploadImagesSection {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 20px;
  column-gap: 28px;
}

.uploadImagesTitle label {
  display: block;
  font-family: var(--gw-font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--gw-text);
  text-align: center;
  margin-bottom: 4px;
}

.uploadImagesHelpText {
  display: block;
  font-size: 12.5px;
  color: var(--gw-text-muted);
  text-align: center;
  line-height: 1.55;
}

#files_list {
  min-height: 44px;
  font-size: 13px;
  border: 1.5px dashed var(--gw-border);
  padding: 10px 14px;
  border-radius: var(--gw-radius-sm);
  background: var(--gw-off-white);
  color: var(--gw-text-muted);
}

/* ==========================================================
   NAVIGATION BUTTONS
   ========================================================== */
#form-navigation {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}

#prev-btn {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 12px 22px;
  background: var(--gw-white);
  color: var(--gw-text-sub);
  border: 1.5px solid var(--gw-border);
  border-radius: var(--gw-radius-sm);
  font-family: var(--gw-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--gw-transition), border-color var(--gw-transition), color var(--gw-transition);
}

#prev-btn:hover {
  background: var(--gw-green-light);
  border-color: var(--gw-green-mid);
  color: var(--gw-forest);
}

#next-btn,
#submit-btn,
#find-appt-btn,
.submit-button {
  display: none;
  align-items: center;
  gap: 7px;
  padding: 13px 28px;
  background: var(--gw-forest);
  color: var(--gw-white);
  border: none;
  border-radius: var(--gw-radius-sm);
  font-family: var(--gw-font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background var(--gw-transition), transform var(--gw-transition), box-shadow var(--gw-transition);
  box-shadow: 0 3px 10px rgba(4,105,55,0.2);
}

#next-btn:hover,
#submit-btn:hover,
#find-appt-btn:hover,
.submit-button:hover {
  background: var(--gw-green);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(4,105,55,0.28);
}

#next-btn:active,
#submit-btn:active,
#find-appt-btn:active,
.submit-button:active {
  transform: translateY(0);
  box-shadow: none;
}

#prev-btn:disabled,
#next-btn:disabled,
#submit-btn:disabled,
#find-appt-btn:disabled,
.submit-button:disabled {
  background: #e2e8f0;
  color: #a0aec0;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Privacy link */
.privacyPolicyLink {
  font-size: 12px;
  color: var(--gw-text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.privacyPolicyLink a {
  color: var(--gw-forest);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ==========================================================
   SUCCESS MESSAGE
   ========================================================== */
#success-message {
  background: linear-gradient(135deg, var(--gw-forest) 0%, #035228 100%);
  color: var(--gw-white);
  border-radius: var(--gw-radius);
  padding: 20px 24px;
  font-family: var(--gw-font-head);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(4,105,55,0.25);
  transition: opacity 0.4s ease;
}

#success-message p { margin: 0; }
#success-message.hide { opacity: 0; }
#success-message.show { opacity: 1; }

/* ==========================================================
   SECONDARY INSURANCE OPTIONS
   ========================================================== */
.secondary-insurance-options .option {
  display: inline-block;
  width: 48%;
}

.insurance-options label {
  display: block;
  margin-bottom: 10px;
}

/* ==========================================================
   APPOINTMENT SEARCH RESULTS
   ========================================================== */
#results-container {
  display: none;
  margin-top: 20px;
  padding: 20px;
  background: var(--gw-white);
  border: 1.5px solid var(--gw-border);
  border-radius: var(--gw-radius);
  box-shadow: var(--gw-shadow);
}

#results-container .search-results-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 14px;
}

#results-container .search-results-table th,
.search-results-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--gw-border);
}

#results-container .search-results-table th {
  background: var(--gw-forest);
  color: var(--gw-white);
  font-family: var(--gw-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#results-container .search-results-table tr:nth-child(even) {
  background: var(--gw-off-white);
}

#results-container .search-results-table tr:hover {
  background: var(--gw-green-light);
}

#results-container p {
  font-size: 14px;
  color: var(--gw-text-muted);
  text-align: center;
}

/* ==========================================================
   VALIDATION
   ========================================================== */
.required-error {
  border-color: var(--gw-error) !important;
  box-shadow: 0 0 0 3px rgba(229,62,62,0.15) !important;
}

@keyframes shake {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-5px); }
  50%  { transform: translateX(5px); }
  75%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.shake { animation: shake 0.28s ease; }

/* ==========================================================
   PRELOADER
   ========================================================== */
#preloader {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.88);
  border-radius: var(--gw-radius);
  z-index: 1000;
}

.corners {
  width: 52px;
  height: 52px;
  position: relative;
  animation: spin 3s infinite linear;
}

.corner {
  width: 100%;
  height: 100%;
  position: absolute;
}

.corner::before {
  display: block;
  width: 48%;
  height: 48%;
  border-radius: 0 40% 0 40%;
  background: var(--gw-green);
  content: '';
}

@keyframes spin    { 100% { transform: rotate(360deg); } }
@keyframes spin1   { 0%,30%,70% { transform: rotate(0deg); }   100% { transform: rotate(360deg); } }
@keyframes spin2   { 0% { transform: rotate(0deg); }   30%,70% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
@keyframes spin3   { 0% { transform: rotate(0deg); }   30%,70% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@keyframes spin4   { 0% { transform: rotate(0deg); }   30%,70% { transform: rotate(90deg); }  100% { transform: rotate(360deg); } }

.corner--1 { animation: spin1 3s infinite cubic-bezier(0.785,0.135,0.150,0.860); }
.corner--2 { animation: spin2 3s infinite cubic-bezier(0.785,0.135,0.150,0.860); }
.corner--3 { animation: spin3 3s infinite cubic-bezier(0.785,0.135,0.150,0.860); }
.corner--4 { animation: spin4 3s infinite cubic-bezier(0.785,0.135,0.150,0.860); }

/* ==========================================================
   MODAL
   ========================================================== */
.booking-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.52);
  display: none;
  justify-content: center;
  align-items: flex-end;
  z-index: 2147483646;
}

.booking-modal-overlay.active {
  display: flex;
}

.booking-modal-content {
  background: var(--gw-white);
  width: 100%;
  height: 75%;
  max-height: 75%;
  border-radius: 20px 20px 0 0;
  padding: 0;
  position: fixed;
  bottom: 0;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
}

.booking-modal-overlay.active .booking-modal-content {
  transform: translateY(0);
  padding: 52px 52px 40px;
}

/* Drag handle */
.booking-modal-content::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: var(--gw-border);
  border-radius: 2px;
  margin: -36px auto 28px;
}

.close-button {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gw-off-white);
  border: 1.5px solid var(--gw-border);
  border-radius: 50%;
  font-size: 20px;
  font-weight: 400;
  color: var(--gw-text-muted);
  cursor: pointer;
  line-height: 1;
  transition: background var(--gw-transition), color var(--gw-transition);
}

.close-button:hover {
  background: var(--gw-green-light);
  color: var(--gw-forest);
  border-color: var(--gw-green-mid);
}

/* ==========================================================
   FLATPICKR ELEVATION FIX
   ========================================================== */
.flatpickr-calendar { z-index: 2147483647 !important; }

/* ==========================================================
   GREYED-OUT STATES
   ========================================================== */
.greyed-out {
  color: var(--gw-text-muted);
  opacity: 0.5;
  cursor: not-allowed;
}

.hidden { display: none; }

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 600px) {
  .booking-modal-overlay.active .booking-modal-content {
    padding: 44px 20px 32px;
    max-height: 92vh;
  }
  .appointment-datetime {
    flex-direction: column;
    gap: 10px;
  }
  .location-grid {
    grid-template-columns: 1fr;
  }
  .addressSection {
    flex-direction: column;
    align-items: stretch;
  }
  .patientAddress { margin-bottom: 8px; }
  .uploadImagesSection { gap: 14px; }
  #form-navigation { flex-direction: column; align-items: stretch; }
  #prev-btn, #next-btn, #submit-btn, #find-appt-btn, .submit-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .booking-options,
  .yes-no-options { flex-direction: column; }
}