/**
 * 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);
}
/* The added state is defined ONCE, in save.css, as green. It was also
   declared here as pink, at identical specificity, so which colour a
   reader got depended on which stylesheets that particular page happened
   to load. Fourth duplicate definition found today; this is the fix for
   all of them, which is to have one. */
.ph-card__addplan .dashicons,
.ph-favs__addplan .dashicons,
.ph-scard__addplan .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Added: a tick, not a plus.
   A plus on a green button says "add this" while the colour says "already
   added", and the colour is the one people believe. Swapped through the
   icon font's own content property rather than in four templates and two
   scripts: every one of them renders dashicons-plus-alt2, and every one of
   them gets the tick from this single rule.
   f147 is dashicons-yes. */
[data-ph-add-plan].is-added .dashicons::before { content: "\f147"; }

/* 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; }

/* The pill's own icon, now an inline SVG rather than a dashicon: the pill
   is on every page and the dashicons stylesheet was not. */
.ph-tray-pill__ic { display: block; flex-shrink: 0; }