/* =====================================================================
   PhoneRanked — compare list: tray, round badge, menu count (all pages)
   ===================================================================== */

/* Count on the "Compare" menu item: only when the user has phones in the list.
   A small blue circle raised next to the word, like a notification count. */
.main-navigation .menu-item > a .prc-badge{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:17px;height:17px;margin-left:3px;padding:0 4px;
	border-radius:999px;background:#1f5eff;color:#fff;
	font-size:10px;font-weight:800;line-height:1;letter-spacing:0;
	vertical-align:super;
	box-shadow:0 0 0 2px #0e1726;
}

/* "+ Compare" button on phone pages when the phone is in the list */
.pr-btn.is-added,
.pr-btn.is-added:hover,
.pr-btn.is-added:focus{border-color:#0b7f3e;background:#e6f4ec;color:#0b7f3e}

/* Tray */
.prc-tray{
	position:fixed;left:50%;bottom:16px;z-index:9990;
	width:min(760px,calc(100vw - 24px));
	transform:translateX(-50%);
	font-family:inherit;
	animation:prc-in .2s ease-out;
}
.prc-tray[hidden],.prc-fab[hidden]{display:none}
@keyframes prc-in{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.prc-box{
	display:flex;align-items:center;gap:14px;
	padding:10px 10px 10px 14px;
	border-radius:16px;
	background:#0e1726;color:#dee3ec;
	box-shadow:0 18px 40px rgba(10,17,29,.35);
}
.prc-ico{display:flex;color:#a9b4c8}
.prc-slots{display:flex;gap:6px;flex:0 0 auto}
.prc-slot{
	position:relative;
	display:flex;align-items:center;justify-content:center;
	width:44px;height:48px;border-radius:10px;background:#fff;
}
.prc-slot img{width:100%;height:100%;padding:3px;object-fit:contain}
.prc-slot i{display:block;width:14px;height:28px;border-radius:4px;background:#2a3342}
.prc-slot.is-empty{background:transparent;border:1.5px dashed #5b6475}
.prc-tray .prc-x{
	position:absolute;top:-6px;right:-6px;
	display:flex;align-items:center;justify-content:center;
	width:20px;height:20px;margin:0;padding:0;
	border:2px solid #0e1726;border-radius:999px;
	background:#dee3ec;color:#0e1726;cursor:pointer;
}
.prc-tray .prc-x:hover,.prc-tray .prc-x:focus{background:#fff;color:#c93434}
.prc-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.prc-text strong{color:#fff;font-size:14px;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prc-text small{font-size:12px;color:#a9b4c8;line-height:1.3}
.prc-text small.is-warn{color:#ffcf70}
.prc-tray .prc-go{
	flex:0 0 auto;
	display:inline-flex;align-items:center;justify-content:center;
	min-height:44px;padding:10px 16px;border-radius:12px;
	background:#1f5eff;color:#fff;
	font-size:14px;font-weight:800;text-decoration:none;white-space:nowrap;
}
.prc-tray .prc-go:hover,.prc-tray .prc-go:focus{background:#1747c9;color:#fff}
.prc-tray .prc-clear,
.prc-tray .prc-min{
	flex:0 0 auto;margin:0;border:0;background:transparent;color:#a9b4c8;cursor:pointer;
	font:inherit;font-size:13px;font-weight:600;
}
.prc-tray .prc-clear{padding:8px 4px;text-decoration:underline;text-underline-offset:2px}
.prc-tray .prc-min{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:999px}
.prc-tray .prc-clear:hover,.prc-tray .prc-min:hover,
.prc-tray .prc-clear:focus,.prc-tray .prc-min:focus{background:transparent;color:#fff}
.prc-tray .prc-min:hover{background:#2a3342}
.prc-tray :focus-visible,.prc-fab:focus-visible{outline:3px solid #4c7fff;outline-offset:2px}

/* Round badge (folded tray) */
.prc-fab{
	position:fixed;right:16px;bottom:16px;z-index:9990;
	display:flex;align-items:center;justify-content:center;
	width:56px;height:56px;margin:0;padding:0;
	border:0;border-radius:999px;
	background:#0e1726;color:#fff;
	box-shadow:0 12px 28px rgba(10,17,29,.35);
	cursor:pointer;
	animation:prc-pop .2s ease-out;
}
.prc-fab:hover,.prc-fab:focus{background:#1f5eff;color:#fff}
.prc-fab-count{
	position:absolute;top:-4px;right:-4px;
	display:flex;align-items:center;justify-content:center;
	min-width:22px;height:22px;padding:0 6px;
	border:2px solid #fff;border-radius:999px;
	background:#1f5eff;color:#fff;font-size:12px;font-weight:800;line-height:1;
}
.prc-fab:hover .prc-fab-count{background:#0e1726}
@keyframes prc-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}

/* Keep page content above the open tray */
html.prc-open body{padding-bottom:96px}

/* Phones: full-width bar at the bottom */
@media (max-width:640px){
	.prc-tray{left:0;bottom:0;width:100%;transform:none;animation:none}
	.prc-box{
		flex-wrap:wrap;gap:10px 12px;
		padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));
		border-radius:18px 18px 0 0;
	}
	.prc-ico{display:none}
	.prc-slots{order:1}
	.prc-text{order:2;flex:1 1 0}
	.prc-min{order:3}
	.prc-tray .prc-go{order:4;flex:1 1 auto}
	.prc-tray .prc-clear{order:5}
	.prc-slot{width:40px;height:44px}
	html.prc-open body{padding-bottom:150px}
	.prc-fab{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
}
@media (prefers-reduced-motion:reduce){ .prc-tray,.prc-fab{animation:none} }