/* RealEthio Property Alerts — popup. Everything is scoped under .rea- to stay clear of Houzez/Elementor styles. */
.rea-overlay {
	--rea-red: #E73032;
	--rea-red-dark: #c4232a;
	--rea-ink: #1b1d22;
	--rea-muted: #5f6470;
	--rea-line: #e3e5ea;
	--rea-bg: #ffffff;
	--rea-soft: #f6f7f9;
	position: fixed; inset: 0; z-index: 999999;
	display: flex; align-items: center; justify-content: center;
	padding: 20px;
	background: rgba(17, 19, 24, .62);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	opacity: 0; transition: opacity .22s ease;
	font-family: inherit; line-height: 1.45; color: var(--rea-ink);
}
.rea-overlay[hidden] { display: none !important; }
.rea-overlay.rea-open { opacity: 1; }
html.rea-lock, html.rea-lock body { overflow: hidden !important; }

.rea-modal {
	position: relative;
	display: grid; grid-template-columns: 1fr 1.08fr;
	width: 100%; max-width: 860px; max-height: calc(100vh - 40px);
	background: var(--rea-bg); border-radius: 18px; overflow: hidden;
	box-shadow: 0 30px 80px rgba(0,0,0,.35);
	transform: translateY(14px) scale(.985); transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.rea-open .rea-modal { transform: none; }
.rea-modal *, .rea-modal *::before, .rea-modal *::after { box-sizing: border-box; }

.rea-close {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	width: 36px; height: 36px; padding: 0; margin: 0;
	display: grid; place-items: center;
	border: 0; border-radius: 50%; cursor: pointer;
	background: rgba(255,255,255,.92); color: var(--rea-ink);
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.rea-close:hover { background: #fff; color: var(--rea-red); }

/* ---- Visual side: collage of real listing photos ---- */
.rea-visual {
	position: relative; min-height: 100%;
	display: grid; gap: 6px; padding: 6px;
	background: var(--rea-soft);
	grid-template-columns: 1fr 1fr; grid-template-rows: 1.6fr 1fr;
}
.rea-visual.rea-n1 .rea-shot-0, .rea-visual.rea-n0 .rea-shot-0 { grid-column: 1 / -1; grid-row: 1 / -1; }
.rea-visual.rea-n2 .rea-shot-0 { grid-column: 1 / -1; }
.rea-visual.rea-n2 .rea-shot-1 { grid-column: 1 / -1; }
.rea-visual.rea-n3 .rea-shot-0 { grid-column: 1 / -1; }
.rea-shot { position: relative; overflow: hidden; border-radius: 12px; background: #dde0e6; }
.rea-shot img {
	position: absolute; inset: 0; width: 100% !important; height: 100% !important;
	max-width: none !important; object-fit: cover; display: block;
	transition: transform 6s ease;
}
.rea-open .rea-shot-0 img { transform: scale(1.06); }
.rea-shot-empty { background: linear-gradient(135deg, #f2c9ca, #E73032); }
.rea-visual::after {
	content: ""; position: absolute; inset: 6px; border-radius: 12px; pointer-events: none;
	background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.28) 100%);
}

/* Sample notification card floating on the photos — shows what an alert looks like */
.rea-toast {
	position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px; border-radius: 12px;
	background: rgba(255,255,255,.96); box-shadow: 0 8px 24px rgba(0,0,0,.22);
	font-size: 13px; line-height: 1.25;
	opacity: 0; transform: translateY(10px);
	transition: opacity .35s ease .35s, transform .35s ease .35s;
}
.rea-open .rea-toast { opacity: 1; transform: none; }
.rea-toast strong { display: block; color: var(--rea-ink); }
.rea-toast small { display: block; color: var(--rea-muted); font-size: 12px; }
.rea-toast-bell {
	flex: 0 0 32px; height: 32px; border-radius: 50%;
	display: grid; place-items: center; background: var(--rea-red); color: #fff;
	animation: rea-ring 2.4s ease 1s infinite;
}
@keyframes rea-ring { 0%,80%,100% { transform: rotate(0) } 84% { transform: rotate(14deg) } 88% { transform: rotate(-12deg) } 92% { transform: rotate(8deg) } 96% { transform: rotate(-4deg) } }

/* ---- Content side ---- */
.rea-body { padding: 34px 32px 28px; overflow-y: auto; }
.rea-step[hidden] { display: none !important; }
.rea-eyebrow {
	margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--rea-red);
}
.rea-title { margin: 0 0 10px !important; font-size: 26px !important; line-height: 1.15 !important; font-weight: 800 !important; color: var(--rea-ink) !important; letter-spacing: -.01em; }
.rea-lead { margin: 0 0 16px; font-size: 15px; color: var(--rea-muted); }

.rea-points { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 7px; }
.rea-points li { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; font-size: 14px; color: var(--rea-ink); }
.rea-points li::before { content: none; }
.rea-ic {
	flex: 0 0 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
	background: #fdeceb; font-size: 13px;
}

.rea-form { margin: 0; display: grid; gap: 12px; }
.rea-field { display: grid; gap: 5px; margin: 0; font-size: 13px; font-weight: 600; color: var(--rea-ink); }
.rea-field em { font-style: normal; font-weight: 400; color: var(--rea-muted); }
.rea-field input {
	width: 100%; height: 46px; margin: 0; padding: 0 14px;
	font: inherit; font-size: 16px; font-weight: 400; color: var(--rea-ink);
	background: #fff; border: 1.5px solid var(--rea-line); border-radius: 10px;
	box-shadow: none; outline: none; transition: border-color .15s, box-shadow .15s;
}
.rea-field input:focus { border-color: var(--rea-red); box-shadow: 0 0 0 3px rgba(231,48,50,.15); }
.rea-field input.rea-bad { border-color: var(--rea-red); }
.rea-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.rea-consent { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 0; font-size: 12.5px; font-weight: 400; color: var(--rea-muted); cursor: pointer; }
.rea-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--rea-red); }
.rea-consent a { color: var(--rea-red); text-decoration: underline; }

.rea-error { margin: 0; padding: 9px 12px; border-radius: 8px; background: #fdeceb; color: #a3191e; font-size: 13.5px; }
.rea-error[hidden] { display: none; }

.rea-submit {
	position: relative; width: 100%; height: 50px; margin: 4px 0 0; padding: 0 20px;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	border: 0; border-radius: 12px; cursor: pointer;
	background: var(--rea-red); color: #fff !important;
	font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .01em; text-transform: none;
	box-shadow: 0 8px 20px rgba(231,48,50,.3); transition: background .15s, transform .1s;
}
.rea-submit:hover { background: var(--rea-red-dark); }
.rea-submit:active { transform: translateY(1px); }
.rea-submit[disabled] { opacity: .75; cursor: wait; }
.rea-spinner { display: none; width: 18px; height: 18px; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: rea-spin .7s linear infinite; }
.rea-busy .rea-spinner { display: inline-block; }
@keyframes rea-spin { to { transform: rotate(360deg) } }

.rea-link { display: block; margin: 14px auto 0; padding: 4px; border: 0; background: none; color: var(--rea-muted); font: inherit; font-size: 13.5px; text-decoration: underline; cursor: pointer; }
.rea-link:hover { color: var(--rea-red); background: none; }

.rea-done { text-align: center; padding-top: 22px; }
.rea-check { color: #1f9d55; margin: 0 auto 12px; width: 56px; }
.rea-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: rea-draw .45s ease .15s forwards; }
@keyframes rea-draw { to { stroke-dashoffset: 0 } }
.rea-crit { display: inline-block; margin: 0 0 18px; padding: 8px 12px; border-radius: 999px; background: var(--rea-soft); font-size: 13.5px; color: var(--rea-ink); }
.rea-crit[hidden] { display: none; }

/* ---- Phone: bottom sheet with a photo strip on top ---- */
@media (max-width: 720px) {
	.rea-overlay { padding: 0; align-items: flex-end; }
	.rea-modal {
		grid-template-columns: 1fr; grid-template-rows: 150px auto;
		max-height: 94vh; border-radius: 20px 20px 0 0;
		transform: translateY(40px);
	}
	.rea-visual { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr; min-height: 0; }
	.rea-visual.rea-n3 .rea-shot-0, .rea-visual.rea-n2 .rea-shot-0, .rea-visual.rea-n2 .rea-shot-1 { grid-column: auto; }
	.rea-visual.rea-n2 { grid-template-columns: 2fr 1fr; }
	.rea-toast { left: 12px; right: auto; bottom: 12px; max-width: 250px; padding: 8px 10px; }
	.rea-body { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
	.rea-title { font-size: 22px !important; }
	.rea-lead { font-size: 14.5px; margin-bottom: 12px; }
	.rea-points { margin-bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.rea-overlay, .rea-modal, .rea-toast, .rea-shot img { transition: none !important; }
	.rea-toast-bell, .rea-check path { animation: none !important; stroke-dashoffset: 0; }
}

/* ---- Done step note + Manage alerts list ---- */
.rea-note { margin: 0 0 16px; font-size: 13px; color: var(--rea-muted); }
.rea-done .rea-link { margin-top: 10px; }
.rea-mylist { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; max-height: 300px; overflow-y: auto; }
.rea-myitem { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--rea-line); border-radius: 10px; }
.rea-myitem::before { content: none; }
.rea-mytext { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rea-mytext strong { font-size: 14px; color: var(--rea-ink); }
.rea-mytext small { font-size: 12px; color: var(--rea-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rea-myremove { flex: 0 0 30px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: var(--rea-soft); color: var(--rea-muted); font-size: 20px; line-height: 1; cursor: pointer; }
.rea-myremove:hover { background: #fdeceb; color: var(--rea-red); }
.rea-empty { margin: 0 0 18px; font-size: 14px; color: var(--rea-muted); }
.rea-empty[hidden] { display: none; }

/* ---- "New for you" balloon ---- */
.rea-balloon {
	--rea-red: #E73032; --rea-ink: #1b1d22; --rea-muted: #5f6470; --rea-line: #e3e5ea;
	position: fixed; left: 16px; bottom: 16px; z-index: 999990;
	width: 340px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px);
	display: flex; flex-direction: column;
	background: #fff; color: var(--rea-ink); border-radius: 16px; overflow: hidden;
	box-shadow: 0 18px 48px rgba(0,0,0,.24), 0 0 0 1px rgba(0,0,0,.04);
	font-family: inherit; line-height: 1.35;
	opacity: 0; transform: translateY(16px); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.rea-balloon.rea-in { opacity: 1; transform: none; }
.rea-balloon * { box-sizing: border-box; }
.rea-b-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 14px; border-bottom: 1px solid var(--rea-line); }
.rea-b-bell { flex: 0 0 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--rea-red); color: #fff; animation: rea-ring 2.4s ease .6s 2; }
.rea-b-htext { flex: 1; min-width: 0; }
.rea-b-htext strong { display: block; font-size: 15px; }
.rea-b-htext small { display: block; font-size: 12px; color: var(--rea-muted); }
.rea-b-close { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; margin: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--rea-muted); cursor: pointer; }
.rea-b-close:hover { background: #f3f4f6; color: var(--rea-ink); }
.rea-b-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.rea-b-list li { margin: 0; padding: 0; }
.rea-b-list li::before { content: none; }
.rea-b-item { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 10px; color: inherit !important; text-decoration: none !important; }
.rea-b-item:hover { background: #f6f7f9; }
.rea-b-thumb { flex: 0 0 64px; width: 64px; height: 52px; border-radius: 8px; overflow: hidden; background: #e9ebef; }
.rea-b-thumb img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
.rea-b-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rea-b-text b { font-size: 13.5px; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rea-b-text small { font-size: 12.5px; color: var(--rea-ink); font-weight: 600; }
.rea-b-text em { font-style: normal; font-size: 11.5px; color: var(--rea-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rea-b-foot { display: flex; justify-content: space-between; gap: 8px; padding: 8px 14px 12px; border-top: 1px solid var(--rea-line); }
.rea-b-link { padding: 4px 0; margin: 0; border: 0; background: none; color: var(--rea-red); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.rea-b-link:hover { text-decoration: underline; background: none; color: var(--rea-red); }
.rea-b-foot .rea-b-link:only-child { margin-left: auto; }

@media (max-width: 720px) {
	.rea-balloon { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; max-width: none; max-height: 60vh; }
}
@media (prefers-reduced-motion: reduce) {
	.rea-balloon { transition: none; } .rea-b-bell { animation: none; }
}

/* ---- "Send me alerts" button (Elementor widget + [alertme] shortcode) ---- */
.rea-btn-wrap { display: block; }
.rea-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	margin: 0; padding: 12px 22px; border: 0; border-radius: 999px; cursor: pointer;
	background: #E73032; color: #fff;
	font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; letter-spacing: .01em; text-transform: none;
	box-shadow: 0 6px 16px rgba(231,48,50,.28); transition: background-color .15s, color .15s, transform .1s, box-shadow .15s;
}
.rea-btn:hover, .rea-btn:focus-visible { background: #c4232a; color: #fff; box-shadow: 0 8px 20px rgba(231,48,50,.36); }
.rea-btn:active { transform: translateY(1px); }
.rea-btn-bell { display: inline-grid; place-items: center; transform-origin: 50% 10%; }
.rea-btn-ring .rea-btn-bell { animation: rea-ring 3.5s ease 2s infinite; }
.rea-align-left .rea-btn-wrap { text-align: left; }
.rea-align-center .rea-btn-wrap { text-align: center; }
.rea-align-right .rea-btn-wrap { text-align: right; }
.rea-align-justify .rea-btn { width: 100%; }
@media (max-width: 1024px) {
	.rea-align-tablet-left .rea-btn-wrap { text-align: left; } .rea-align-tablet-center .rea-btn-wrap { text-align: center; }
	.rea-align-tablet-right .rea-btn-wrap { text-align: right; } .rea-align-tablet-justify .rea-btn { width: 100%; }
}
@media (max-width: 767px) {
	.rea-align-mobile-left .rea-btn-wrap { text-align: left; } .rea-align-mobile-center .rea-btn-wrap { text-align: center; }
	.rea-align-mobile-right .rea-btn-wrap { text-align: right; } .rea-align-mobile-justify .rea-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rea-btn-ring .rea-btn-bell { animation: none; } }

/* ---- ?rea_debug=1 panel ---- */
.rea-debug { position: fixed; top: 10px; right: 10px; z-index: 1000000; max-width: min(560px, calc(100vw - 20px)); max-height: 80vh; overflow: auto; margin: 0; padding: 12px 14px; background: #111827; color: #d1fae5; font: 12px/1.45 ui-monospace, Menlo, Consolas, monospace; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.35); white-space: pre-wrap; word-break: break-word; cursor: pointer; }