/*
 * Wireroom Property Search — layered on the Wireroom theme.
 * Uses the theme's tokens (--blue, --ink, --border, --radius-card …) and classes
 * (form-card, form-grid, form-field, btn). Only adds what the theme doesn't have.
 * Fallback values match the theme in case the plugin is used elsewhere.
 */
.wr-dt {
	--wr-blue: var(--blue, #006aff);
	--wr-blue-tint: var(--blue-tint, #eaf2ff);
	--wr-ink: var(--ink, #1a1a1a);
	--wr-soft: var(--ink-soft, #4d5157);
	--wr-muted: var(--ink-muted, #70757a);
	--wr-border: var(--border, #e6e8ea);
	--wr-gray: var(--gray-bg, #f5f6f7);
	--wr-r-card: var(--radius-card, 20px);
	--wr-r-btn: var(--radius-btn, 8px);
	color: var(--wr-ink);
}
.wr-dt *, .wr-dt *::before, .wr-dt *::after { box-sizing: border-box; }

.wr-dt-page .container > .wr-dt { display: grid; gap: 24px; }
.wr-dt .form-card { max-width: none; }
.wr-dt-form { max-width: 720px !important; }

/* Mock-mode banner */
.wr-dt-banner { margin: 0; padding: 12px 16px; border-radius: var(--wr-r-btn); background: #fff7e6; color: #7a4a00; font-size: 14px; max-width: 720px; }

/* Property / Foreclosure switch — pill style matching the site nav */
.wr-dt-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.wr-dt-switch label { position: relative; cursor: pointer; }
.wr-dt-switch input { position: absolute; opacity: 0; pointer-events: none; }
.wr-dt-switch span { display: inline-block; padding: 10px 16px; border-radius: var(--wr-r-btn); background: rgba(0, 0, 0, .055); font-size: 15px; font-weight: 600; transition: background-color .15s ease, color .15s ease; }
.wr-dt-switch label:hover span { background: rgba(0, 0, 0, .1); }
.wr-dt-switch input:checked + span { background: var(--wr-blue); color: #fff; }
.wr-dt-switch input:focus-visible + span { outline: 2px solid var(--wr-blue); outline-offset: 2px; }

/* Search-by tabs — underline style */
.wr-dt-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--wr-border); margin: 0 0 22px; }
.wr-dt-tabs button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 0 10px; font: inherit; font-size: 15px; font-weight: 600; color: var(--wr-muted); cursor: pointer; }
.wr-dt-tabs button:hover { color: var(--wr-ink); }
.wr-dt-tabs button[aria-selected="true"] { color: var(--wr-blue); border-bottom-color: var(--wr-blue); }
.wr-dt-tabs button:focus-visible { outline: 2px solid var(--wr-blue); outline-offset: 4px; border-radius: 2px; }

.wr-dt .wr-dt-fields[hidden] { display: none; }
.wr-dt-statewrap { margin-top: 18px; }
.wr-dt-opt { font-weight: 400; color: var(--wr-muted); font-size: 13px; }
.wr-dt-submit:disabled { opacity: .6; cursor: progress; }
.wr-dt-error { margin: 14px 0 0; color: #c62828; font-size: 15px; font-weight: 600; }

/* Results */
.wr-dt-results:empty { display: none; }
.wr-dt-loading { margin: 0; color: var(--wr-soft); }
.wr-dt-card { background: #fff; border: 1px solid var(--wr-border); border-radius: var(--wr-r-card); padding: 40px; }
.wr-dt-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 24px; padding-bottom: 24px; border-bottom: 1px solid var(--wr-border); }
.wr-dt-card-head h3 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; letter-spacing: -.02em; }
.wr-dt-sub { margin: 6px 0 0; color: var(--wr-soft); font-size: 17px; }
.wr-dt-meta { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wr-muted); white-space: nowrap; }
.wr-dt-empty { color: var(--wr-soft); margin: 20px 0 0; }

.wr-dt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 28px; }
.wr-dt-section h4 { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wr-blue); }
.wr-dt-section h5 { margin: 28px 0 10px; font-size: 16px; }
.wr-dt dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 20px; margin: 0; font-size: 16px; }
.wr-dt dt { color: var(--wr-muted); }
.wr-dt dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Foreclosure */
.wr-dt-fc { margin-top: 28px; }
.wr-dt-pill { display: inline-block; margin: 0 0 14px; padding: 5px 12px; border-radius: 99px; background: #fdecea; color: #b3261e; font-size: 13px; font-weight: 700; }
.wr-dt-highlight { background: var(--wr-gray); border-radius: 14px; padding: 24px 26px; }
.wr-dt-highlight h4 { color: var(--wr-ink); }
.wr-dt-tablewrap { overflow-x: auto; border: 1px solid var(--wr-border); border-radius: 12px; }
.wr-dt-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.wr-dt-table th, .wr-dt-table td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--wr-border); white-space: nowrap; }
.wr-dt-table tr:last-child td { border-bottom: 0; }
.wr-dt-table th { background: var(--wr-gray); color: var(--wr-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.wr-dt-raw { margin-top: 28px; font-size: 13px; }
.wr-dt-raw summary { cursor: pointer; color: var(--wr-muted); font-weight: 600; }
.wr-dt-raw pre { max-height: 380px; overflow: auto; background: var(--wr-gray); padding: 14px; border-radius: var(--wr-r-btn); }

.wr-dt-fineprint { margin: 0; max-width: 720px; font-size: 13px; color: var(--wr-muted); }

/* Gate (signed out / not a member) */
.wr-dt-gate h2 { margin: 0 0 10px; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.02em; }
.wr-dt-gate-msg { color: var(--wr-soft); margin: 0 0 18px; }
.wr-dt-gate-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.wr-dt-gate-list li { position: relative; padding-left: 30px; color: var(--wr-ink); font-size: 16px; }
.wr-dt-gate-list li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--wr-blue-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23006aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }

@media (max-width: 700px) {
	.wr-dt .form-card, .wr-dt-card { padding: 24px 20px; }
	.wr-dt .form-grid, .wr-dt-grid { grid-template-columns: 1fr; }
	.wr-dt-tabs { gap: 18px; }
	.wr-dt-actions .btn, .wr-dt .form-actions .btn { width: 100%; text-align: center; }
	.wr-dt-highlight { padding: 18px; }
}