/**
 * The plan tray: floating pill and sheet contents.
 *
 * The sheet frame itself is the shared .ph-sheet component (search.css), so
 * only the pill and the tray's own body content live here (rule 2.2).
 */

.ph-tray-pill {
	position: fixed;
	right: var(--ph-space-4);
	bottom: var(--ph-space-4);
	z-index: 900;
	display: inline-flex;
	align-items: center;
	gap: var(--ph-space-2);
	min-height: 48px;
	padding: 0 var(--ph-space-4);
	border: none;
	border-radius: var(--ph-radius-pill);
	background: var(--ph-color-primary);
	color: #fff;
	font-size: var(--ph-text-small);
	font-weight: 800;
	box-shadow: 0 10px 26px rgba(33,37,58,0.28);
	cursor: pointer;
}
.ph-tray-pill[hidden] { display: none; }

.ph-tray-pill .dashicons { font-size: 18px; width: 18px; height: 18px; }

@keyframes ph-tray-pill-flash {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.08); }
	100% { transform: scale(1); }
}
.ph-tray-pill--flash { animation: ph-tray-pill-flash 0.28s ease; }

/* ── Add-to-plan button, on the card ─────────────────────────
   One control, used from card-listing.php, card-place.php, listings.js and
   the single listing page (rule 2.2). Sits beside the existing favourite
   heart wherever one exists. */
.ph-card__addplan,
.ph-favs__addplan,
.ph-scard__addplan {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1.5px solid var(--ph-color-line);
	border-radius: 999px;
	background: var(--ph-color-surface);
	color: var(--ph-color-ink);
	cursor: pointer;
	flex-shrink: 0;
}
.ph-card__addplan:hover,
.ph-favs__addplan:hover,
.ph-scard__addplan:hover {
	border-color: var(--ph-color-primary);
	color: var(--ph-color-primary);
}
.ph-card__addplan.is-added,
.ph-favs__addplan.is-added,
.ph-scard__addplan.is-added,
.ph-pill[data-ph-add-plan].is-added {
	background: var(--ph-color-primary);
	border-color: var(--ph-color-primary);
	color: #fff;
}
.ph-card__addplan .dashicons,
.ph-favs__addplan .dashicons,
.ph-scard__addplan .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* card-listing.php's button sits on the media corner. card-place.php's sits
   in the favourites-style layout, where the media anchor is not clickable
   for this purpose (tabindex="-1"), so the button is positioned the same
   way for visual consistency. */
.ph-card { position: relative; }
.ph-card__addplan {
	position: absolute;
	top: var(--ph-space-2);
	right: var(--ph-space-2);
	z-index: 2;
	box-shadow: 0 1px 3px rgba(33,37,58,0.16);
}

.ph-favs__card--place { position: relative; }
.ph-favs__addplan {
	position: absolute;
	top: var(--ph-space-2);
	right: var(--ph-space-2);
	z-index: 2;
	box-shadow: 0 1px 3px rgba(33,37,58,0.16);
}

/* ── Sheet body content ──────────────────────────────────────── */
.ph-tray__empty {
	padding: var(--ph-space-6) 0;
	text-align: center;
	color: var(--ph-color-ink-soft);
	font-size: var(--ph-text-small);
}

.ph-tray__stops {
	display: flex;
	flex-direction: column;
	gap: var(--ph-space-3);
}

.ph-tray__stop {
	display: flex;
	align-items: center;
	gap: var(--ph-space-3);
	padding-bottom: var(--ph-space-3);
	border-bottom: 1px solid var(--ph-color-line);
}
.ph-tray__stop:last-child { border-bottom: none; padding-bottom: 0; }

.ph-tray__stop-img {
	width: 56px;
	height: 56px;
	border-radius: var(--ph-radius-sm);
	object-fit: cover;
	flex-shrink: 0;
	background: var(--ph-color-bg);
}
.ph-tray__stop-img--placeholder { display: block; }

.ph-tray__stop-body { flex: 1; min-width: 0; }

.ph-tray__stop-title {
	display: block;
	font-size: var(--ph-text-small);
	font-weight: 700;
	color: var(--ph-color-ink);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ph-tray__stop-title:hover { color: var(--ph-color-primary); }

.ph-tray__stop-remove {
	flex-shrink: 0;
	background: none;
	border: 1px solid var(--ph-color-line);
	border-radius: var(--ph-radius-pill);
	padding: 6px 12px;
	font-size: var(--ph-text-label);
	font-weight: 700;
	color: var(--ph-color-ink-soft);
	cursor: pointer;
}
.ph-tray__stop-remove:hover { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }

.ph-tray__save {
	margin-top: var(--ph-space-5);
	padding-top: var(--ph-space-4);
	border-top: 1px solid var(--ph-color-line);
}
.ph-tray__save[hidden] { display: none; }

.ph-tray__namelabel {
	display: block;
	margin-bottom: var(--ph-space-2);
	font-size: var(--ph-text-label);
	font-weight: 800;
	color: var(--ph-color-ink-soft);
}

.ph-tray__nameinput {
	width: 100%;
	min-height: 44px;
	padding: 0 var(--ph-space-3);
	border: 1.5px solid var(--ph-color-line);
	border-radius: var(--ph-radius-sm);
	font-size: var(--ph-text-body);
	color: var(--ph-color-ink);
}
.ph-tray__nameinput:focus { border-color: var(--ph-color-primary); outline: none; }

.ph-tray__msg {
	margin-top: var(--ph-space-2);
	font-size: var(--ph-text-small);
	color: var(--ph-color-ink-soft);
}
.ph-tray__msg.is-error { color: #c0392b; }

.ph-tray__viewlink { color: var(--ph-color-primary); font-weight: 700; }

body.ph-tray-open { overflow: hidden; }