/*
 * Saved gradients: hearts, the header count, the toast and the Saved page.
 * Loaded on every page with assets/js/fav.js (includes/saved.php).
 */

/* Heart on a card, over the preview's top-right corner */
.gc { position: relative; }
.tg-fav { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tg-fav .tg-i { width: 18px; height: 18px; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), fill .15s, color .15s; }
.tg-fav[aria-pressed="true"] .tg-i { fill: currentColor; color: #FF3B6B; }
.tg-fav.pop .tg-i { animation: tg-fav-pop .38s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tg-fav-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.tg-fav:focus-visible { outline: 2px solid #5b4fcf; outline-offset: 2px; }

.gc-fav {
	position: absolute !important; top: 10px; right: 10px; z-index: 2;
	display: flex !important; align-items: center; justify-content: center;
	width: 36px; height: 36px; padding: 0 !important; margin: 0 !important;
	border: 0 !important; border-radius: 50% !important;
	background: rgba(255, 255, 255, .82) !important; color: #2A2A33 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12) !important;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
	opacity: 0; transform: scale(.9); transition: opacity .15s, transform .15s, background .15s;
}
.gc:hover .gc-fav, .gc-fav:focus-visible, .gc-fav[aria-pressed="true"] { opacity: 1; transform: none; }
.gc-fav:hover { background: #fff !important; }
@media (hover: none) { .gc-fav { opacity: 1; transform: none; } }

/* Heart on a gradient page, beside the title */
.gs-fav {
	display: inline-flex !important; align-items: center; gap: 7px;
	padding: 9px 16px !important; margin: 0 !important;
	border: 1px solid #E2E2E8 !important; border-radius: 999px !important;
	background: #fff !important; color: #222 !important;
	font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
	box-shadow: none !important; transition: border-color .15s, background .15s;
}
.gs-fav:hover { border-color: #C9C9D3 !important; }
.gs-fav[aria-pressed="true"] { border-color: #FFC2D1 !important; background: #FFF3F6 !important; color: #C21E4B !important; }

/* Count on the header's Saved link */
.tg-saved-n {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
	border-radius: 999px; background: #FF3B6B; color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 1px;
}
.tg-saved-n[hidden] { display: none; }

/* Toast */
.tg-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 9999;
	display: flex; align-items: center; gap: 14px;
	width: max-content; max-width: calc(100vw - 32px); padding: 8px 8px 8px 18px;
	border-radius: 999px; background: #111; color: #fff;
	font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
	transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.tg-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tg-toast span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }  /* one line; a long name is cut, not wrapped */
.tg-toast a, .tg-toast button {
	flex-shrink: 0; white-space: nowrap; padding: 7px 14px !important; margin: 0 !important; border: 0 !important; border-radius: 999px !important;
	background: rgba(255, 255, 255, .14) !important; color: #fff !important;
	font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; cursor: pointer;
}
.tg-toast a:hover, .tg-toast button:hover { background: rgba(255, 255, 255, .24) !important; }

/* The Saved page */
.tg-saved-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin: 0 0 16px; }
.tg-saved-bar[hidden] { display: none; }
.tg-saved-btn {
	padding: 9px 18px !important; margin: 0 !important; border: 1px solid #E2E2E8 !important; border-radius: 999px !important;
	background: #fff !important; color: #222 !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; cursor: pointer; box-shadow: none !important;
}
.tg-saved-btn:hover { border-color: #111 !important; }
.tg-saved-btn.ok { background: #F0FDF4 !important; border-color: #BBF7D0 !important; color: #166534 !important; }
.tg-saved-clear { color: #B42318 !important; }
.tg-saved-clear:hover { border-color: #B42318 !important; }

.tg-saved .gc { transition: opacity .2s, transform .2s; }
.tg-saved .gc.tg-out { opacity: 0; transform: scale(.96); }
.tg-saved .gc[hidden] { display: none; }

.tg-saved-ghost { height: 268px; border-radius: 22px; background: linear-gradient(90deg, #F4F4F7 25%, #ECECF1 50%, #F4F4F7 75%) 0 0 / 200% 100%; animation: tg-ghost 1.2s linear infinite; }
@keyframes tg-ghost { to { background-position: -200% 0; } }

.tg-saved-empty { text-align: center; padding: 56px 24px 64px; color: #6E6E78; }
.tg-saved-empty[hidden] { display: none; }
.tg-saved-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: #FFF0F4; color: #FF3B6B; margin-bottom: 14px; }
.tg-saved-empty-icon .tg-i { width: 28px; height: 28px; }
.tg-saved-empty h2 { font-size: 24px !important; margin: 0 0 6px !important; color: #111; letter-spacing: -.02em; }
.tg-saved-empty p { margin: 0 0 20px; font-size: 15px; }
.tg-saved-cta { display: inline-block; padding: 11px 22px; border-radius: 999px; background: #111; color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }
.tg-saved-cta:hover { background: #333; }
.tg-saved-error { grid-column: 1 / -1; text-align: center; color: #6E6E78; padding: 40px 0; }

@media (prefers-reduced-motion: reduce) {
	.tg-fav.pop .tg-i, .tg-saved-ghost { animation: none; }
}
.gs-meta .gs-fav { margin-top: 12px !important; }

/* Sharing a collection */
.tg-saved-btn[hidden] { display: none !important; }
.tg-saved-primary { background: #111 !important; border-color: #111 !important; color: #fff !important; }
.tg-saved-primary:hover { background: #333 !important; }
.tg-saved-mine { text-decoration: none !important; display: inline-flex; align-items: center; }

.tg-share {
	margin: 0 0 20px; padding: 18px 20px; border-radius: 24px;
	background: #fff; border: 1px solid #EFEFF4; box-shadow: 0 10px 30px -18px rgba(20, 10, 60, .25);
}
.tg-share[hidden] { display: none; }
.tg-share-field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.tg-share-field label { font-size: 13px; font-weight: 600; color: #222; }
.tg-share-field label span { font-weight: 400; color: #6E6E78; }
.tg-share-field input { flex: 1 1 220px; }
.tg-share-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tg-share-row input { flex: 1 1 260px; min-width: 0; font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace; font-size: 13px !important; color: #333; }
.tg-share-note { margin: 12px 0 0 !important; font-size: 13px; line-height: 1.55; color: #6E6E78; }

/* Export panel on Saved */
.tg-export-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tg-export-tabs button {
	padding: 7px 14px !important; margin: 0 !important; border: 1px solid #E6E6EC !important; border-radius: 999px !important;
	background: #fff !important; color: #333 !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer; box-shadow: none !important;
}
.tg-export-tabs button[aria-pressed="true"] { background: #111 !important; border-color: #111 !important; color: #fff !important; }
.tg-export-out {
	max-height: 260px; overflow: auto; margin: 0 0 12px !important; padding: 14px 16px !important;
	border: 1px solid #EFEFF4 !important; border-radius: 16px !important; background: #F7F7FA !important;
	font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace; font-size: 12.5px; line-height: 1.6; color: #1A1A22;
	/* Wrap long lines (URLs, gradients) like every other code box on the
	   site, rather than cutting them off at the edge with a sideways scroll. */
	white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; overflow-x: hidden;
}
.tg-export-note { font-size: 12.5px; color: #6E6E78; align-self: center; }
html[data-theme="dark"] .tg-export-tabs button { background: #1D1D27 !important; border-color: rgba(255,255,255,.16) !important; color: #EDEDF2 !important; }
html[data-theme="dark"] .tg-export-tabs button[aria-pressed="true"] { background: #fff !important; color: #111 !important; }
html[data-theme="dark"] .tg-export-out { background: #1D1D27 !important; border-color: rgba(255,255,255,.09) !important; color: #EDEDF2; }
html[data-theme="dark"] .tg-export-note { color: #9393A3; }