/**
 * Save from anywhere: the heart, the snackbar, and the add-to-a-plan sheet.
 *
 * Styled from the design tokens in ph-tokens.css rather than hard-coded
 * values, so the capture moment matches the mockups in design/ and moves
 * with them.
 *
 * The heart sits top LEFT on a card. The add-to-plan button already owns the
 * top right corner on every card component, and moving it would change a
 * control that is not part of this stage.
 *
 * @package PlanHeavyTheme
 */

/* ── The heart ─────────────────────────────────────────────── */

.ph-save {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .94);
	color: var(--ink-2);
	box-shadow: 0 2px 8px rgba(22, 24, 31, .18);
	cursor: pointer;
	transition: background var(--fast), color var(--fast), transform var(--fast);
	-webkit-tap-highlight-color: transparent;
}

.ph-save svg {
	width: 17px;
	height: 17px;
	display: block;
	pointer-events: none;
}

.ph-save:hover {
	color: var(--pink);
}

/* Filled is the saved state. The fill is what the eye reads, so it changes
   the instant the tap lands and only reverts if the request fails. */
.ph-save.is-saved {
	background: var(--pink);
	color: #fff;
}

.ph-save.is-saved:hover {
	background: var(--pink-press);
}

.ph-save:active {
	transform: scale(.92);
}

.ph-save[disabled] {
	cursor: default;
}

/* On a card's media corner. */
.ph-card,
.ph-favs__card--place,
.ph-scard {
	position: relative;
}

.ph-card > .ph-save,
.ph-favs__card--place > .ph-save,
.ph-scard > .ph-save {
	position: absolute;
	top: var(--s2);
	left: var(--s2);
	z-index: 2;
}

/* The single listing keeps its labelled pill rather than a bare icon: it
   sits in a row of labelled actions, where an unlabelled heart reads as
   decoration.

   This variant deliberately gives back every icon-button property, because
   listing.css already styles .ph-pill and its active state and should keep
   doing so. Only the sizing is asserted here: the pill was cramped against
   its own text, so it gets real horizontal padding and room to breathe. */
.ph-pill.ph-save--pill {
	width: auto;
	height: auto;
	position: static;
	background: #fff;
	box-shadow: none;
	border-radius: var(--r-pill);
	gap: var(--s2);
	padding: 0 var(--s4);
	min-height: 40px;
	/* .ph-save is an icon button and sets border: 0, which this variant
	   inherited, so the pill sat next to Add to Plan and Share with no edge
	   at all and read as loose text rather than a control. The border comes
	   back from .ph-pill, which is what styles the other two. */
	border: 1px solid var(--ph-color-line, #e6e8ee);
	color: var(--ph-color-ink-soft, #5a5f73);
	font-weight: 500;
}
.ph-pill.ph-save--pill:hover {
	border-color: var(--pink);
	color: var(--pink);
}

/* The active pill is listing.css's to colour, via .is-active, which save.js
   sets alongside .is-saved. This only stops the icon-button background from
   overriding it: without it the pill rendered white on white and vanished. */
.ph-pill.ph-save--pill.is-saved,
.ph-pill.ph-save--pill.is-active {
	background: var(--pink);
	border-color: var(--pink);
	color: #fff;
	font-weight: 700;
}
.ph-pill.ph-save--pill.is-saved:hover,
.ph-pill.ph-save--pill.is-active:hover {
	background: var(--pink-press);
	color: #fff;
}
.ph-pill.ph-save--pill .dashicons { color: inherit; }

/* ── Snackbar ──────────────────────────────────────────────── */

.ph-snack {
	position: fixed;
	left: 50%;
	bottom: var(--s4);
	transform: translate(-50%, 12px);
	z-index: 9000;
	display: flex;
	align-items: center;
	gap: var(--s3);
	width: calc(100% - var(--s8));
	max-width: 420px;
	padding: var(--s3) var(--s4);
	border-radius: var(--r-md);
	background: var(--ink);
	color: #fff;
	box-shadow: var(--e3);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--mid), transform var(--mid);
}

.ph-snack.is-open {
	opacity: 1;
	transform: translate(-50%, 0);
	pointer-events: auto;
}

.ph-snack__icon {
	display: flex;
	flex-shrink: 0;
	color: var(--pink);
}

.ph-snack__icon svg {
	width: 19px;
	height: 19px;
}

.ph-snack__text {
	flex: 1;
	min-width: 0;
	font-size: var(--t-sm);
	font-weight: var(--w-bold);
	line-height: 1.3;
}

.ph-snack__sub {
	display: block;
	font-size: var(--t-xs);
	font-weight: var(--w-med);
	color: rgba(255, 255, 255, .62);
}

.ph-snack__action {
	flex-shrink: 0;
	padding: var(--s2) var(--s3);
	min-height: 34px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: var(--r-pill);
	background: transparent;
	color: #fff;
	font-family: inherit;
	font-size: var(--t-xs);
	font-weight: var(--w-bold);
	cursor: pointer;
}

.ph-snack__action:hover {
	background: rgba(255, 255, 255, .12);
}

/* The ASK. Filled pink, tap sized, and the full width of the card.
   An outlined white button on a near black bar is the same weight as the
   close cross next to it: it reads as one of two ways to make the thing go
   away rather than as the point of it. This is the only thing on the card
   worth doing, so it is the only thing coloured. The count confirmation
   keeps the quiet outlined button above: nothing is being asked there. */
.ph-snack--message .ph-snack__buttons { width: 100%; }
.ph-snack--message .ph-snack__action {
	width: 100%;
	min-height: var(--tap, 44px);
	padding: var(--s3) var(--s5, 20px);
	border: none;
	background: var(--pink);
	color: #fff;
	font-size: var(--t-body);
}
.ph-snack--message .ph-snack__action:hover { background: var(--pink-press); }

/* The blocked and signed-out variants stack, because their message is a
   sentence rather than a count. */
.ph-snack--message {
	align-items: flex-start;
	flex-wrap: wrap;
}

.ph-snack--message .ph-snack__text {
	font-weight: var(--w-med);
	font-size: var(--t-xs);
	line-height: 1.5;
	flex-basis: 100%;
}

.ph-snack--message .ph-snack__title {
	display: block;
	font-size: var(--t-sm);
	font-weight: var(--w-bold);
	margin-bottom: 2px;
}

.ph-snack--message .ph-snack__buttons {
	display: flex;
	gap: var(--s2);
	margin-top: var(--s3);
}

/* ── Add to a plan ─────────────────────────────────────────── */

.ph-planpick {
	position: fixed;
	inset: 0;
	z-index: 9100;
	display: grid;
	place-items: center;
	padding: var(--s4);
	background: var(--shade);
}

.ph-planpick[hidden] {
	display: none;
}

.ph-planpick__panel {
	width: 100%;
	max-width: 330px;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--e2);
}

.ph-planpick__head {
	padding: var(--s3) var(--s4);
	border-bottom: 1px solid var(--line);
	font-size: var(--t-xs);
	font-weight: var(--w-heavy);
	color: var(--ink-2);
}

.ph-planpick__item {
	display: flex;
	align-items: center;
	gap: var(--s3);
	width: 100%;
	padding: var(--s3) var(--s4);
	border: 0;
	border-bottom: 1px solid var(--line);
	background: none;
	font-family: inherit;
	font-size: var(--t-sm);
	font-weight: var(--w-bold);
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}

.ph-planpick__item:hover {
	background: var(--surface);
}

.ph-planpick__ic {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: var(--r-sm);
	background: var(--surface);
	color: var(--ink-2);
}

.ph-planpick__item--new .ph-planpick__ic {
	background: var(--pink-soft);
	color: var(--pink);
}

.ph-planpick__ic svg {
	width: 14px;
	height: 14px;
}

.ph-planpick__sub {
	display: block;
	font-size: var(--t-xs);
	font-weight: var(--w-reg);
	color: var(--ink-3);
}

.ph-planpick__msg {
	padding: var(--s4);
	font-size: var(--t-xs);
	color: var(--ink-3);
	line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
	.ph-save,
	.ph-snack {
		transition: none;
	}
}


/* The snackbar's count links to the whole collection. */
.ph-snack__text--link {
	color: inherit;
	text-decoration: none;
}
.ph-snack__text--link:hover .ph-snack__sub {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: underline;
}

/* A way out of the message variant, which sits for nine seconds and asks
   something of the reader. The saved confirmation has none on purpose: it
   fades in four seconds and ignoring it is the normal path. */
.ph-snack__close {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	padding: 0;
	border: none;
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.ph-snack__close:hover { background: rgba(255, 255, 255, 0.24); }
.ph-snack--message .ph-snack__close {
	position: absolute;
	top: 8px;
	right: 10px;
}
.ph-snack--message { position: fixed; padding: var(--s4) var(--s8) var(--s4) var(--s4); }

/* On a desktop the bar sits at the bottom of a tall window, a long way
   from both the heart that was just pressed and the eye, and it can be
   missed entirely. Asking for something from down there is asking from
   offstage. The message variant comes to the middle of the window on a
   big screen, where a dialogue belongs; the count confirmation stays at
   the bottom, because it confirms rather than asks and should not
   interrupt anybody.

   It still does not trap the page: no backdrop, nothing disabled, the
   close is there and it times out on its own. That is what keeps somebody
   browsing instead of bouncing, which is the whole reason it is not a
   redirect to the sign-in page. */
@media (min-width: 783px) {
	.ph-snack--message {
		top: 50%;
		bottom: auto;
		max-width: 400px;
		padding: var(--s6, 24px);
		border-radius: var(--r-lg, 16px);
		transform: translate(-50%, calc(-50% + 12px));
	}
	.ph-snack--message.is-open { transform: translate(-50%, -50%); }
	.ph-snack--message .ph-snack__text { font-size: var(--t-sm); }
	.ph-snack--message .ph-snack__title { font-size: var(--t-h3, 16px); margin-bottom: var(--s1, 4px); }
	.ph-snack--message .ph-snack__close { top: 12px; right: 14px; }
}

/* Add to plan, once it has been. The confirmation belongs on the control
   that was clicked, not only in a bar at the other end of the screen. */
[data-ph-add-plan].is-added {
	background: var(--open);
	border-color: var(--open);
	color: #fff;
}

/* ── Collections picker ───────────────────────────────────────────────
   The same sheet as the plan picker, but multi-select: a place can be a
   date night and a hidden gem at once, and making it choose is the thing
   folders get wrong. */
.ph-planpick__item--check {
	gap: var(--s3);
}
.ph-planpick__tick {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border: 1.5px solid var(--line-2);
	border-radius: var(--r-sm);
	background: var(--white);
	color: #fff;
}
.ph-planpick__tick svg { width: 13px; height: 13px; }
.ph-planpick__item--check.is-on .ph-planpick__tick {
	background: var(--pink);
	border-color: var(--pink);
}
.ph-planpick__item--new {
	text-decoration: none;
	color: var(--ink);
}
.ph-planpick__foot {
	display: flex;
	justify-content: flex-end;
	padding: var(--s3) var(--s4);
	position: sticky;
	bottom: 0;
	background: var(--white);
	border-top: 1px solid var(--line);
}
.ph-planpick__done {
	padding: var(--s2) var(--s6);
	min-height: 38px;
	border: none;
	border-radius: var(--r-pill);
	background: var(--pink);
	color: #fff;
	font-family: inherit;
	font-size: var(--t-sm);
	font-weight: var(--w-bold);
	cursor: pointer;
}
.ph-planpick__done:hover { background: var(--pink-press); }

/* Two actions now, so they are allowed to drop to their own line rather
   than squeezing the count that explains what just happened. */
.ph-snack .ph-snack__buttons { display: flex; gap: var(--s2); flex-shrink: 0; }

/* The bookmark, wherever save.js injects it. The card's own button styles
   its border and colour; this only sizes the glyph and stops the old
   heart-fill variable from being consulted for a shape that no longer uses
   it. */
[data-ph-save-icon] { display: flex; }
[data-ph-save-icon] svg { width: 17px; height: 17px; display: block; }
.ph-scard__fav [data-ph-save-icon] svg,
.ph-pill.ph-save--pill [data-ph-save-icon] svg { width: 15px; height: 15px; }
.ph-pill.ph-save--pill [data-ph-save-icon] { color: inherit; }

/* Naming a collection without leaving the sheet. */
.ph-planpick__make { border-top: 1px solid var(--line); }
.ph-planpick__makeform { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); }
.ph-planpick__makeform[hidden] { display: none; }
.ph-planpick__makein {
	flex: 1;
	min-width: 0;
	min-height: 36px;
	padding: 0 var(--s3);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-family: inherit;
	font-size: var(--t-sm);
	color: var(--ink);
}
.ph-planpick__makein:focus { outline: 2px solid var(--pink); outline-offset: 1px; }
.ph-planpick__makego {
	flex-shrink: 0;
	padding: 0 var(--s4);
	min-height: 36px;
	border: none;
	border-radius: var(--r-sm);
	background: var(--pink);
	color: #fff;
	font-family: inherit;
	font-size: var(--t-sm);
	font-weight: var(--w-bold);
	cursor: pointer;
}
.ph-planpick__makego[disabled] { opacity: .6; cursor: default; }
.ph-planpick__msg[hidden] { display: none; }