/* Hotel Reputation Popup — front-end styles
   Clean, modern, neutral. Scoped under #hrp-root / .hrp. */

.hrp, .hrp * { box-sizing: border-box; }

.hrp {
	--hrp-accent: #1f6feb;
	--hrp-ink: #16181d;
	--hrp-muted: #5c6370;
	--hrp-line: #e7e9ee;
	--hrp-bg: #ffffff;
	--hrp-soft: #f6f7f9;
	--hrp-shadow: 0 -8px 40px rgba(16, 18, 24, .16);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--hrp-ink);
	line-height: 1.25;
}
/* Lock typography so the active theme's line-height / letter-spacing can't leak in. */
.hrp, .hrp span, .hrp a, .hrp small, .hrp button {
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
}

/* ---- Floating tab ---- */
.hrp-tab {
	position: fixed;
	left: 20px;
	right: auto;
	bottom: 20px;
	z-index: 2147483000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--hrp-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(16, 18, 24, .22);
	transition: transform .18s ease, box-shadow .18s ease, opacity .2s ease;
}
.hrp-tab:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(16, 18, 24, .28); }
.hrp-tab:active { transform: translateY(0); }
.hrp-tab__star { font-size: 16px; line-height: 1; }
.hrp.is-open .hrp-tab { opacity: 0; pointer-events: none; }

/* ---- Bottom bar (hugs its content, bottom-left) ---- */
.hrp-bar {
	position: fixed;
	left: 0;
	right: auto;
	bottom: 0;
	z-index: 2147483001;
	width: auto;
	max-width: 100%;
	background: var(--hrp-bg);
	border-top: 1px solid var(--hrp-line);
	border-right: 1px solid var(--hrp-line);
	border-top-right-radius: 14px;
	box-shadow: var(--hrp-shadow);
	transform: translateY(100%);
	transition: transform .32s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}
.hrp.is-open .hrp-bar { transform: translateY(0); }

.hrp-bar__inner {
	padding: 8px 16px 9px;
}

.hrp-bar__row {
	display: flex;
	align-items: center;
	gap: 18px;
}
.hrp-bar__heading { font-size: 15px; font-weight: 700; flex: 0 0 auto; max-width: 160px; }

.hrp-close {
	flex: 0 0 auto;
	border: 1px solid var(--hrp-line);
	background: var(--hrp-soft);
	color: var(--hrp-muted);
	width: 34px; height: 34px; border-radius: 8px;
	font-size: 12px; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease;
}
.hrp-close:hover { background: #ececf0; color: var(--hrp-ink); }

/* Reviews */
.hrp-reviews {
	flex: 0 0 auto;
	display: flex;
	gap: 10px;
}
.hrp-card {
	border: 1px solid var(--hrp-line);
	border-radius: 9px;
	padding: 6px 10px;
	background: #fff;
	display: flex;
	align-items: center;
	gap: 9px;
	transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.hrp-card:hover {
	border-color: color-mix(in srgb, var(--hrp-accent) 45%, var(--hrp-line));
	box-shadow: 0 4px 14px rgba(16, 18, 24, .09);
	transform: translateY(-1px);
}
.hrp-card__score { font-size: 17px; font-weight: 800; letter-spacing: -.01em; line-height: 1; flex: 0 0 auto; }
.hrp-card__score small { font-size: 10px; font-weight: 600; color: var(--hrp-muted); margin-left: 1px; }
.hrp-card__meta { display: flex; flex-direction: column; gap: 0; min-width: 0; line-height: 1.25; white-space: nowrap; }
.hrp-card__brand { font-size: 11px; font-weight: 600; color: var(--hrp-ink); overflow: hidden; text-overflow: ellipsis; }
.hrp-card__sub { font-size: 10px; color: var(--hrp-muted); overflow: hidden; text-overflow: ellipsis; }

/* Actions */
.hrp-bar__foot { display: flex; align-items: center; gap: 8px; }
.hrp-actions {
	flex: 0 0 auto;
	display: flex;
	gap: 8px;
	border-left: 1px solid var(--hrp-line);
	padding-left: 20px;
}
.hrp-action {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--hrp-line);
	border-radius: 10px;
	background: #fff;
	color: var(--hrp-ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.hrp-action:hover { border-color: color-mix(in srgb, var(--hrp-accent) 55%, var(--hrp-line)); background: var(--hrp-soft); }
.hrp-action:active { transform: translateY(1px); }
.hrp-action__ico { font-size: 16px; width: 20px; text-align: center; color: var(--hrp-accent); }
.hrp-ico { width: 22px; height: 22px; display: block; color: var(--hrp-accent); }
.hrp-action--primary .hrp-ico { color: #fff; }
.hrp-action--icon { padding: 0; width: 40px; height: 40px; justify-content: center; border-radius: 9px; }
.hrp-action--icon .hrp-action__ico { font-size: 20px; width: auto; }
.hrp-action--icon .hrp-ico { width: 20px; height: 20px; }
.hrp-action--primary { background: var(--hrp-accent); border-color: var(--hrp-accent); color: #fff; }
.hrp-action--primary .hrp-action__ico { color: #fff; }
.hrp-action--primary:hover { background: color-mix(in srgb, var(--hrp-accent) 88%, #000); border-color: transparent; }
.hrp-action__phone { font-variant-numeric: tabular-nums; }

/* ---- Side panels (left / right, vertically centered) ---- */
.hrp[data-pos="left"] .hrp-bar,
.hrp[data-pos="right"] .hrp-bar {
	top: 50%;
	bottom: auto;
	width: 300px;
	max-width: 92vw;
	max-height: 86vh;
	overflow-y: auto;
	border: 1px solid var(--hrp-line);
}
.hrp[data-pos="left"] .hrp-bar {
	left: 0; right: auto;
	border-left: 0;
	border-top-right-radius: 14px;
	border-bottom-right-radius: 14px;
	transform: translate(-101%, -50%);
}
.hrp[data-pos="left"].is-open .hrp-bar { transform: translate(0, -50%); }
.hrp[data-pos="right"] .hrp-bar {
	right: 0; left: auto;
	border-right: 0;
	border-top-right-radius: 0;
	border-top-left-radius: 14px;
	border-bottom-left-radius: 14px;
	transform: translate(101%, -50%);
}
.hrp[data-pos="right"].is-open .hrp-bar { transform: translate(0, -50%); }

/* Side layout: reviews stacked, then the icons + close row */
.hrp[data-pos="left"] .hrp-bar__row,
.hrp[data-pos="right"] .hrp-bar__row { flex-direction: column; align-items: stretch; gap: 14px; }
.hrp[data-pos="left"] .hrp-reviews,
.hrp[data-pos="right"] .hrp-reviews { flex-direction: column; }
.hrp[data-pos="left"] .hrp-actions,
.hrp[data-pos="right"] .hrp-actions { border-left: 0; padding-left: 0; }
.hrp[data-pos="left"] .hrp-bar__foot,
.hrp[data-pos="right"] .hrp-bar__foot {
	justify-content: space-between;
	border-top: 1px solid var(--hrp-line);
	padding-top: 12px;
}

/* Tab placement per position */
.hrp[data-pos="left"] .hrp-tab {
	left: 0; right: auto; top: 50%; bottom: auto;
	transform: translateY(-50%);
	border-radius: 0 999px 999px 0;
}
.hrp[data-pos="right"] .hrp-tab {
	right: 0; left: auto; top: 50%; bottom: auto;
	transform: translateY(-50%);
	border-radius: 999px 0 0 999px;
}
.hrp[data-pos="left"] .hrp-tab:hover,
.hrp[data-pos="right"] .hrp-tab:hover { transform: translateY(-50%); }

/* ---- Responsive (bottom bar) — compact bottom sheet ---- */
@media (max-width: 620px) {
	.hrp[data-pos="bottom"] .hrp-bar,
	.hrp[data-pos="left"] .hrp-bar,
	.hrp[data-pos="right"] .hrp-bar {
		left: 0; right: 0;
		top: auto; bottom: 0;
		width: auto; max-width: 100%;
		max-height: 88vh;
		overflow-y: auto;
		border: 0;
		border-top: 1px solid var(--hrp-line);
		border-radius: 16px 16px 0 0;
		transform: translateY(100%);
	}
	.hrp.is-open .hrp-bar { transform: translateY(0) !important; }

	.hrp-bar__inner { padding: 8px 12px 12px; }

	/* Stacked: reviews row on top, actions row below */
	.hrp-bar__row { flex-direction: column; align-items: stretch; gap: 8px; }

	/* Reviews: 3 compact cards side-by-side, desktop-style (score left, meta right) */
	.hrp-reviews { flex: 1 1 auto; display: flex; flex-direction: row; gap: 5px; }
	.hrp-card { flex: 1; min-width: 0; padding: 6px 5px; gap: 5px; overflow: hidden; }
	.hrp-card__score { font-size: 13px; }
	.hrp-card__score small { font-size: 8px; }
	.hrp-card__brand { font-size: 9px; }
	.hrp-card__sub { font-size: 8px; }

	/* Actions row: full width, evenly spread; no divider, no primary fill */
	.hrp-bar__foot { display: flex; align-items: center; gap: 6px; }
	.hrp-actions { flex: 1 1 auto; display: flex; gap: 6px; border-left: 0; padding-left: 0; }
	.hrp-action--icon { flex: 1; width: auto; height: 38px; }

	.hrp-close { width: 30px; height: 30px; }

	.hrp-tab { padding: 11px 15px; font-size: 14px; }
	.hrp-tab,
	.hrp[data-pos="left"] .hrp-tab,
	.hrp[data-pos="right"] .hrp-tab {
		left: auto; right: 14px; top: auto; bottom: 16px;
		transform: none;
		border-radius: 999px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hrp-bar, .hrp-tab { transition: none; }
}