/* PetApp Booking Form — Namespaced Styles */

.petapp-booking-form {
  max-width: 900px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #333;
  line-height: 1.5;
}

.petapp-form-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 24px;
}

/* ── Sections ─────────────────────────────────────────────────── */

.petapp-section {
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
  scroll-margin-top: 80px; /* Clear sticky theme header */
}

.petapp-section.petapp-locked {
  opacity: 0.4;
  pointer-events: none;
}

.petapp-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.petapp-section-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #333;
  margin: 0;
}

.petapp-section-summary {
  font-size: 14px;
  color: #666;
  display: none;
}

.petapp-edit-btn {
  background: none;
  border: 1px solid #4a7c3f;
  color: #4a7c3f;
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
}
.petapp-edit-btn:hover { background: #f0f7ee; }

.petapp-section-body {
  margin-top: 16px;
}

.petapp-section-actions {
  margin-top: 16px;
  text-align: right;
}

/* ── Grid Layout ──────────────────────────────────────────────── */

.petapp-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .petapp-row {
    grid-template-columns: 1fr;
  }
}

/* ── Fields ───────────────────────────────────────────────────── */

.petapp-field {
  margin-bottom: 8px;
}

.petapp-field > label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #4a7c3f;
  margin-bottom: 4px;
}

/* #top prefix beats Enfold theme rule `#top label span { color:#444; font-size:13px }`.
   `.petapp-req` and `.petapp-optional` share the same grey so the user sees them as related markers. */
#top .petapp-field label .petapp-req,
.petapp-field label .petapp-req,
#top .petapp-field label .petapp-optional,
.petapp-field label .petapp-optional {
  color: #888;
  font-weight: 400;
  font-size: inherit;
}

.petapp-standdown-days {
  font: inherit;
  color: inherit;
  font-weight: bold;
}

/* Defensive: lift Flatpickr calendar above any theme overlay/sticky/modal layer.
   Flatpickr's bundled CSS sets z-index:99999 without !important, so theme rules
   (Enfold has many) can outrank it via more-specific selectors. */
.flatpickr-calendar { z-index: 99999 !important; }

.petapp-hint-text {
  font-weight: 400;
  font-size: 12px;
  color: #888;
}

.petapp-field input[type="text"],
.petapp-field input[type="email"],
.petapp-field input[type="tel"],
.petapp-field input[type="date"],
.petapp-field input[type="number"],
.petapp-field select,
.petapp-field textarea {
  width: 100%;
  padding: 8px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  color: #333;
  box-sizing: border-box;
}

.petapp-field textarea { resize: vertical; }

.petapp-field select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.petapp-field-desc {
  font-size: 12px;
  color: #888;
  margin: 2px 0 6px;
}

/* ── Radio & Checkbox ─────────────────────────────────────────── */

.petapp-radio-group label {
  display: block;
  font-size: 14px;
  color: #4a7c3f;
  padding: 4px 0;
  cursor: pointer;
}

.petapp-radio-group input[type="radio"],
.petapp-radio-group input[type="checkbox"] {
  margin-right: 6px;
  accent-color: #4a7c3f;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.petapp-radio-inline {
  display: flex;
  gap: 20px;
}
.petapp-radio-inline label { display: inline-flex; align-items: center; }

.petapp-field:has(.petapp-radio-inline) {
  margin-bottom: 16px;
}

.petapp-dynamic-questions .petapp-field {
  margin-bottom: 16px;
}

.petapp-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.petapp-checkbox-label input[type="checkbox"] {
  accent-color: #4a7c3f;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}
.petapp-checkbox-label a { color: #4a7c3f; font-weight: 700; }

.petapp-time-radios label {
  display: block;
  font-size: 13px;
  color: #666;
  padding: 4px 0;
  cursor: pointer;
}
.petapp-time-radios label span { color: #4a7c3f; }
.petapp-time-radios input[type="radio"] {
  margin-right: 6px;
  accent-color: #4a7c3f;
}

/* ── Birth Row ────────────────────────────────────────────────── */

.petapp-birth-row {
  display: flex;
  gap: 8px;
}
.petapp-birth-row select { flex: 1; }

/* ── Pet Blocks ───────────────────────────────────────────────── */

.petapp-pet-block {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.petapp-pet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  user-select: none;
}

.petapp-pet-label {
  font-weight: 700;
  font-size: 15px;
  color: #333;
}

.petapp-pet-delete {
  background: none;
  border: none;
  font-size: 22px;
  color: #cc0000;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
}
.petapp-pet-delete:hover { color: #900; }

.petapp-pet-body {
  padding: 16px;
}

.petapp-pet-block.petapp-collapsed .petapp-pet-body { display: none; }
.petapp-pet-block.petapp-collapsed .petapp-pet-header { border-bottom: none; }

/* ── Conditional Sub-fields ───────────────────────────────────── */

.petapp-conditional {
  display: none;
  margin-top: 8px;
  padding-left: 20px;
  border-left: 2px solid #e0e0e0;
}

/* ── Add Pet Button ───────────────────────────────────────────── */

.petapp-add-pet-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background: #4a7c3f;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}
.petapp-add-pet-btn:hover { background: #3d6934; }

/* ── Continue Button ──────────────────────────────────────────── */

.petapp-continue-btn {
  padding: 10px 24px;
  background: #4a7c3f;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.petapp-continue-btn:hover { background: #3d6934; }

/* Hide year arrows — just show the year as plain text */
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none !important;
}
.flatpickr-current-month .numInputWrapper span.arrowUp,
.flatpickr-current-month .numInputWrapper span.arrowDown {
  display: none !important;
}
.flatpickr-current-month .numInputWrapper {
  pointer-events: none;
}
.flatpickr-current-month input.cur-year {
  pointer-events: none;
  font-size: 100% !important;
  width: 4.5em !important;
}

/* ── Flatpickr day-state styling ─────────────────────────────── */

/* Selectable days — make them OBVIOUSLY clickable.
   Light blue tint + bold black text so they read as buttons,
   not as inert numbers. */
.flatpickr-day {
  cursor: pointer;
}
.flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):not(.petapp-closed) {
  background: #eaf3fb;
  border-color: #cfe1f2;
  color: #111;
  font-weight: 600;
}
.flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):not(.petapp-closed):hover {
  background: #2271b1;
  border-color: #2271b1;
  color: #fff;
}

/* Past / disabled days — strikethrough + very faint, so it
   is unmistakable that they cannot be clicked. */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #c8c8c8 !important;
  text-decoration: line-through;
  cursor: not-allowed;
  background: transparent;
  border-color: transparent;
}

/* Other-month overflow days — hide entirely to remove clutter. */
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  visibility: hidden;
}

/* Closed days (facility shut) — red, unchanged. */
.flatpickr-day.petapp-closed {
  color: #CC0000 !important;
  font-weight: 700;
  background: #fdecec;
  border-color: #f5cccc;
}
.flatpickr-day.petapp-closed:hover {
  color: #CC0000 !important;
  background: #fdecec;
  border-color: #f5cccc;
}
#petapp-day-tooltip {
  position: fixed;
  background: #333;
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 9999999;
  display: none;
}

/* ── Precheck Modal ──────────────────────────────────────────── */

.petapp-precheck-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999999;
}
.petapp-precheck-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.petapp-precheck-modal h3 {
  margin: 0 0 8px;
  font-size: 18px;
}
.petapp-precheck-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: #4a7c3f;
  color: #fff;
}
.petapp-precheck-btn:hover { background: #3d6934; }
.petapp-precheck-btn-secondary {
  background: #e5e7eb;
  color: #333;
}
.petapp-precheck-btn-secondary:hover { background: #d1d5db; }

/* ── Accommodation ────────────────────────────────────────────── */

.petapp-accom-species {
  margin-bottom: 16px;
}
.petapp-accom-species h4 {
  font-size: 15px;
  font-weight: 700;
  color: #5a8a3a;
  margin: 0 0 8px;
}
.petapp-accom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.petapp-accom-pet-name {
  min-width: 120px;
  font-weight: 600;
  font-size: 14px;
  color: #333;
}
.petapp-accom-select {
  flex: 1;
  padding: 6px 8px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
.petapp-accom-auto {
  font-size: 14px;
  font-weight: 600;
  color: #4a7c3f;
}
.petapp-accom-unit { margin-bottom: 8px; }
.petapp-split-btn {
  background: none;
  border: none;
  color: #4a7c3f;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 0;
  margin-top: 2px;
}
.petapp-split-btn:hover { text-decoration: underline; }
.petapp-accom-ineligible {
  color: #cc0000;
  font-size: 13px;
  font-style: italic;
}
.petapp-accom-desc {
  margin: 4px 0 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: #555;
  background: #f9fafb;
  border-left: 3px solid #166534;
  border-radius: 3px;
}

/* ── Error States ─────────────────────────────────────────────── */

.petapp-invalid {
  border-color: #cc0000 !important;
}

.petapp-field-error {
  display: block;
  color: #cc0000;
  font-size: 12px;
  margin-top: 2px;
}

.petapp-error-box {
  background: #fee2e2;
  color: #cc0000;
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 12px;
}

.petapp-error-text { color: #cc0000; font-size: 13px; }

.petapp-closed-msg { margin: 4px 0 0; }

.petapp-trial-stay-warning {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: #FFF8F0;
  border: 1px solid #FFD6A5;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #8B6914;
}
.petapp-trial-stay-warning .petapp-trial-icon {
  color: #FF9500;
  font-size: 16px;
  flex-shrink: 0;
}

.petapp-hint {
  font-size: 13px;
  color: #888;
  font-style: italic;
  margin: 8px 0;
}

/* ── Terms ────────────────────────────────────────────────────── */

.petapp-terms-intro {
  font-size: 14px;
  color: #4a7c3f;
  font-weight: 600;
}

/* ── Success ──────────────────────────────────────────────────── */

.petapp-success {
  text-align: center;
  padding: 48px 24px;
}
.petapp-success h3 {
  font-size: 24px;
  color: #4a7c3f;
  margin: 0 0 12px;
}
.petapp-success p {
  font-size: 16px;
  color: #555;
}

/* ── Loading ──────────────────────────────────────────────────── */

.petapp-loading {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.petapp-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top-color: #4a7c3f;
  border-radius: 50%;
  animation: petapp-spin 0.8s linear infinite;
  margin-bottom: 12px;
}
@keyframes petapp-spin { to { transform: rotate(360deg); } }
.petapp-loading p {
  font-size: 16px;
  color: #555;
}

/* ── Autocomplete ─────────────────────────────────────────────── */

.petapp-autocomplete-wrap { position: relative; }
.petapp-autocomplete-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
.petapp-autocomplete-item {
  padding: 6px 10px;
  font-size: 14px;
  cursor: pointer;
}
.petapp-autocomplete-item:hover { background: #f0f7ee; }

/* ── Copy from Previous Tab ────────────────────────────────────── */

.petapp-copyable-zone {
  position: relative;
  padding-right: 36px;
}

.petapp-copy-tab {
  position: absolute;
  right: -1px;
  top: 0;
  bottom: 0;
  width: 32px;
  background: #c6e4b8;
  border: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 13px;
  font-weight: 600;
  color: #2d5a1e;
  padding: 12px 4px;
  white-space: nowrap;
  letter-spacing: 0.3px;
}
.petapp-copy-tab:hover { background: #a8d694; }

@media (max-width: 600px) {
  .petapp-copyable-zone { padding-right: 30px; }
  .petapp-copy-tab { width: 26px; font-size: 11px; }
}

/* ── Pre-fill Notice ──────────────────────────────────────────── */

.petapp-prefill-notice {
  background: #f0fdf4;
  border: 1px solid #b7dfc8;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
}
.petapp-prefill-notice p {
  margin: 0 0 12px;
  font-size: 14px;
  color: #333;
}
.petapp-prefill-buttons {
  display: flex;
  gap: 10px;
}
.petapp-prefill-yes {
  background: #4a7c3f;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.petapp-prefill-yes:hover { background: #3d6934; }
.petapp-prefill-no {
  background: none;
  border: 1px solid #ccc;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
}
.petapp-prefill-no:hover { background: #f5f5f5; }
.petapp-prefill-delete {
  background: none;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  color: #999;
  cursor: pointer;
}
.petapp-prefill-delete:hover { background: #fff5f5; color: #c00; border-color: #c00; }

/* ── Vaccination labels (species-specific visibility) ─────────── */

.petapp-vacc-label-cat,
.petapp-tell-label-cat,
.petapp-tell-desc-cat { display: none; }

/* ── iOS App Prompt Modal ─────────────────────────────────────── */

#pawunify-ios-prompt {
  position: fixed; inset: 0; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 999999;
  font-family: system-ui, -apple-system, sans-serif;
}
#pawunify-ios-prompt .pip-card {
  background: #fff; border-radius: 12px; max-width: 420px; width: 90%;
  padding: 24px; box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  position: relative;
}
#pawunify-ios-prompt h3 { margin: 0 0 8px 0; color: #166534; font-size: 20px; }
#pawunify-ios-prompt p  { margin: 0 0 20px 0; color: #444; }
#pawunify-ios-prompt .pip-btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
#pawunify-ios-prompt .pip-btn-primary {
  flex: 1; padding: 12px 16px; border: none; border-radius: 8px;
  background: #166534; color: #fff; font-weight: 600; cursor: pointer;
  text-decoration: none; text-align: center;
}
#pawunify-ios-prompt .pip-btn-secondary {
  flex: 1; padding: 12px 16px; border: 1px solid #ccc; border-radius: 8px;
  background: #f5f5f5; color: #333; cursor: pointer;
}
#pawunify-ios-prompt .pip-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; font-size: 22px; cursor: pointer;
  color: #888;
}