/* Leave-a-task ("Hand this off") modal - house skin.
 *
 * The same navy card, gold hairline and gold accents as the payment receipt
 * (success.php) and the checkout (task-paypal-payment.php), laid over the
 * modal's own layout on index.php and property-details.php. Only looks change
 * here: every id, step and script hook stays as it was.
 *
 * Much of the modal is styled inline or with class-level !important, so rules
 * here are scoped by #handoffModal and carry !important to win. The urgency
 * buttons also get inline backgrounds from setActiveUrgencyNew(); the
 * .active rule below overrides those too. */

#handoffModal {
  --hm-ink: #f3f7fb;
  --hm-ink-2: #b9c6d6;
  --hm-ink-3: #8394a8;
  --hm-gold: #e8c983;
  --hm-gold-2: #d9b06a;
  --hm-line: rgba(255, 255, 255, .12);
  --hm-field: rgba(255, 255, 255, .04);
  --hm-field-2: rgba(255, 255, 255, .07);
  --hm-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: rgba(3, 9, 18, .74) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ---------------------------------------------------------------- card */

#handoffModal .handoff-modal-content {
  background: linear-gradient(180deg, rgba(20, 38, 62, .97) 0%, rgba(9, 21, 38, .99) 100%) !important;
  border: 1px solid rgba(232, 201, 131, .28) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  animation: none !important;
  font-family: var(--hm-font) !important;
  color: var(--hm-ink);
  -webkit-font-smoothing: antialiased;
}

#handoffModal .handoff-modal-content::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 3px !important;
  width: auto !important;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, var(--hm-gold), transparent) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  animation: none !important;
  z-index: 3;
  pointer-events: none;
}

#handoffModal .handoff-modal-content::after { display: none !important; }
#handoffModal .space-particles { display: none !important; }

#handoffModal .handoff-modal-content :is(h1, h2, h3, h4, p, label, span, div, input, textarea, button, small, b) {
  font-family: var(--hm-font) !important;
}

/* Headings: "Hand this off." / "Tell us what you need" / "Add context" */
#handoffModal h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -.4px !important;
  line-height: 1.2 !important;
  color: #fff !important;
}

#handoffModal h2 + p,
#handoffModal h2 ~ p {
  color: var(--hm-ink-2) !important;
  font-size: 14.5px !important;
}

/* Close button */
#handoffModal .handoff-modal-content > button:first-of-type,
#handoffModal button[onclick*="closeHandoffModal"] {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--hm-line) !important;
  color: var(--hm-ink-2) !important;
  box-shadow: none !important;
}

#handoffModal button[onclick*="closeHandoffModal"]:hover {
  border-color: rgba(232, 201, 131, .5) !important;
  color: #fff !important;
}

/* ---------------------------------------------------------------- the request */

/* Desktop: the white lined card around #final_result. */
#handoffModal div:has(> #final_result),
#handoffModal .step1-card {
  background: var(--hm-field) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  color: var(--hm-ink) !important;
}

#handoffModal div:has(> #final_result):focus-within,
#handoffModal .step1-card:focus-within {
  border-color: rgba(232, 201, 131, .55) !important;
  box-shadow: 0 0 0 3px rgba(232, 201, 131, .12) !important;
}

#handoffModal div:has(> #final_result) > label,
#handoffModal .step1-label {
  color: var(--hm-ink-3) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
}

#handoffModal #final_result,
#handoffModal .step1-textarea {
  background: transparent !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  caret-color: var(--hm-gold);
  font-size: 15.5px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

#handoffModal #final_result::placeholder,
#handoffModal .step1-textarea::placeholder {
  color: var(--hm-ink-3) !important;
  -webkit-text-fill-color: var(--hm-ink-3) !important;
}

#handoffModal div:has(> #final_result) .fa-pen { color: var(--hm-gold) !important; opacity: .7; }

/* The "paper stack" strip under the old white card. */
#handoffModal div:has(> div > #final_result) > div:not(:has(#final_result)) { display: none !important; }

/* property-details.php: the teal glowing box around the request. */
#handoffModal .glowing-textarea-wrap {
  background: var(--hm-field) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  padding: 0 !important;
  animation: none !important;
}

#handoffModal .glowing-textarea-wrap::before,
#handoffModal .glowing-textarea-wrap::after { display: none !important; }

#handoffModal .glowing-textarea-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#handoffModal .glowing-textarea-inner > div:first-child {
  color: var(--hm-ink-3) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
}

#handoffModal .glowing-textarea-inner > div:first-child i { color: var(--hm-gold) !important; }

#handoffModal .glowing-textarea-wrap:focus-within {
  border-color: rgba(232, 201, 131, .55) !important;
  box-shadow: 0 0 0 3px rgba(232, 201, 131, .12) !important;
}

#handoffModal .glowing-textarea-inner .step1-textarea {
  background: rgba(0, 0, 0, .18) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}

/* Note under the request ("Not limited to real estate ...") */
#handoffModal .step1-card p,
#handoffModal .step1-card small { color: var(--hm-ink-3) !important; }

/* Type pills: Buying / Renting / Investing / Other */
#handoffModal .type-select-btn {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--hm-line) !important;
  color: var(--hm-ink-2) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 8px 18px !important;
  box-shadow: none !important;
}

#handoffModal .type-select-btn:hover { border-color: rgba(232, 201, 131, .5) !important; color: #fff !important; }

#handoffModal .type-select-btn.active {
  background: rgba(232, 201, 131, .14) !important;
  border-color: var(--hm-gold) !important;
  color: var(--hm-gold) !important;
}

/* ---------------------------------------------------------------- map tools */

#handoffModal #handoffDrawBtn,
#handoffModal button[onclick="clearHandoffDrawing()"] {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 10px !important;
  color: var(--hm-ink) !important;
  box-shadow: none !important;
}

#handoffModal #handoffDrawBtn i,
#handoffModal button[onclick="clearHandoffDrawing()"] i { color: var(--hm-gold) !important; }

#handoffModal #handoffDrawBtn:hover,
#handoffModal button[onclick="clearHandoffDrawing()"]:hover { border-color: rgba(232, 201, 131, .5) !important; }

#handoffModal #handoffMapSearch,
#handoffModal .handoff-input,
#handoffModal #property_reference {
  background: var(--hm-field) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 12px !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 14.5px !important;
  box-shadow: none !important;
}

#handoffModal #handoffMapSearch:focus,
#handoffModal .handoff-input:focus,
#handoffModal #property_reference:focus {
  border-color: rgba(232, 201, 131, .6) !important;
  background: var(--hm-field-2) !important;
  box-shadow: 0 0 0 3px rgba(232, 201, 131, .12) !important;
}

#handoffModal #handoffMapSearch::placeholder,
#handoffModal .handoff-input::placeholder {
  color: var(--hm-ink-3) !important;
  -webkit-text-fill-color: var(--hm-ink-3) !important;
}

/* 2D / 3D switch */
#handoffModal .map-dimension-toggle {
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 12px !important;
}

#handoffModal .map-dim-btn { color: var(--hm-ink-3) !important; border-radius: 9px !important; }

#handoffModal .map-dim-btn.active-2d,
#handoffModal .map-dim-btn.active-3d {
  background: rgba(232, 201, 131, .14) !important;
  color: var(--hm-gold) !important;
  box-shadow: inset 0 0 0 1px rgba(232, 201, 131, .55) !important;
}

#handoffModal .map-dim-btn.active-2d i,
#handoffModal .map-dim-btn.active-3d i { color: var(--hm-gold) !important; }

#handoffModal #handoff-map,
#handoffModal #handoff3DMapContainer {
  border-radius: 14px !important;
  border: 1px solid var(--hm-line) !important;
  overflow: hidden;
}

/* ---------------------------------------------------------------- details */

#handoffModal .accordion-header {
  background: var(--hm-field) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

#handoffModal .accordion-header:hover { border-color: rgba(232, 201, 131, .45) !important; }
#handoffModal .accordion-header .card-icon-part i { color: var(--hm-gold) !important; }
#handoffModal .accordion-header .card-text-part :is(span, small, div) { color: var(--hm-ink-3); }

#handoffModal .upload-btn-hover {
  background: rgba(232, 201, 131, .08) !important;
  border: 1px solid rgba(232, 201, 131, .45) !important;
  border-radius: 10px !important;
  color: var(--hm-gold) !important;
}

#handoffModal .upload-btn-hover :is(i, span) { color: var(--hm-gold) !important; }
#handoffModal .upload-btn-hover:hover { background: rgba(232, 201, 131, .14) !important; }

/* Linked HOUSBE Trace ID (index.php has .trace-id-box; property-details.php an unclassed div) */
#handoffModal div:has(> div > #traceIdDisplay),
#handoffModal .trace-id-box {
  background: var(--hm-field) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

#handoffModal .trace-id-box::before,
#handoffModal .trace-id-box::after { display: none !important; }

#handoffModal div:has(> div > #traceIdDisplay) > div:first-child,
#handoffModal .trace-id-box > div:first-child {
  background: rgba(232, 201, 131, .12) !important;
  border-color: rgba(232, 201, 131, .4) !important;
}

#handoffModal .fa-fingerprint { color: var(--hm-gold) !important; }
#handoffModal #traceIdDisplay { text-shadow: none !important; color: #fff !important; }

/* Urgency: Now / Today / Tomorrow / Pick a time */
#handoffModal .urgency-btn {
  background: rgba(255, 255, 255, .05) !important;
  border: 1px solid var(--hm-line) !important;
  border-radius: 10px !important;
  color: var(--hm-ink-2) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#handoffModal .urgency-btn:hover { border-color: rgba(232, 201, 131, .5) !important; color: #fff !important; }

#handoffModal .urgency-btn.active,
#handoffModal input[name="urgency"]:checked + .urgency-btn {
  background: rgba(232, 201, 131, .14) !important;
  border: 1px solid var(--hm-gold) !important;
  color: var(--hm-gold) !important;
}

/* "Assign a vetted Task Operator" */
#handoffModal div:has(> label[for="chkTraceId"]) {
  background: rgba(232, 201, 131, .06) !important;
  border: 1px solid rgba(232, 201, 131, .3) !important;
  border-radius: 14px !important;
}

#handoffModal #chkTraceId { accent-color: var(--hm-gold) !important; }

/* ---------------------------------------------------------------- actions */

#handoffModal button[type="submit"],
#handoffModal #handoffStep1Btn {
  background: linear-gradient(135deg, #f3d89c 0%, #d9b06a 100%) !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #16110a !important;
  box-shadow: 0 12px 30px rgba(217, 176, 106, .28) !important;
  transition: transform .15s, box-shadow .15s, opacity .15s;
}

#handoffModal button[type="submit"] :is(span, i),
#handoffModal #handoffStep1Btn :is(span, i) { color: #16110a !important; }

#handoffModal button[type="submit"] span:first-child { font-weight: 800 !important; }

#handoffModal button[type="submit"]:hover,
#handoffModal #handoffStep1Btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(217, 176, 106, .38) !important;
}

#handoffModal #handoffStep1Btn:disabled { opacity: .45 !important; box-shadow: none !important; }

/* Scroll hint (the round bubble is the indicator's inner div) */
#handoffModal .handoff-scroll-indicator > div {
  background: rgba(9, 21, 38, .92) !important;
  border: 1px solid rgba(232, 201, 131, .45) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .4) !important;
}

#handoffModal .handoff-scroll-indicator i { color: var(--hm-gold) !important; }

@media (max-width: 600px) {
  #handoffModal .handoff-modal-content { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; }
  #handoffModal .handoff-modal-content::before { border-radius: 0; }
  #handoffModal h2 { font-size: 23px !important; }
}