/* ==========================================================================
   Padmira Cargo — blog (listings + single article)
   Loaded only on blog views (inc/blog.php). Cards live in main.css because
   the homepage "latest posts" section uses them too.
   ========================================================================== */

/* Listing hero ----------------------------------------------------------- */

.pc-blog-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(2.25rem, 1.5rem + 3vw, 4rem);
	background: linear-gradient(125deg, var(--pc-primary-dark) 0%, var(--pc-primary) 45%, #1d6fc0 100%);
	color: #fff;
}

/* Flight routes: dotted arcs + a soft glow, drawn with CSS only. */
.pc-blog-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(600px 300px at 12% 110%, rgba(84, 149, 214, .45), transparent 70%),
		radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .12) 1px, transparent 0) 0 0 / 22px 22px;
	mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 60%, transparent 100%);
}

.pc-blog-hero::after {
	content: "";
	position: absolute;
	inset-block-start: -35%;
	inset-inline-end: -12%;
	z-index: -1;
	width: min(620px, 70vw);
	aspect-ratio: 1;
	border: 2px dashed rgba(255, 255, 255, .16);
	border-radius: 50%;
	box-shadow: inset 0 0 0 70px rgba(255, 255, 255, .03), inset 0 0 0 140px rgba(255, 255, 255, .025);
}

.pc-blog-hero__inner { position: relative; max-width: calc(var(--pc-container) + 2 * var(--pc-gutter)); }

.pc-blog-hero .breadcrumbs,
.pc-article-head .breadcrumbs { margin-bottom: 1rem; font-size: .85rem; }
.pc-blog-hero .breadcrumbs,
.pc-blog-hero .breadcrumbs a,
.pc-blog-hero .breadcrumbs span { color: rgba(255, 255, 255, .8); }
.pc-blog-hero .breadcrumbs a:hover { color: #fff; }

.pc-blog-hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .6rem;
	padding: .2rem .85rem;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	font-size: .85rem;
	font-weight: 700;
}
.pc-blog-hero__kicker::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: #9fd0ff; }

.pc-blog-hero__title { margin: 0 0 .5rem; color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); font-weight: 800; line-height: 1.5; text-align: center; }

.pc-blog-hero__desc { max-width: 720px; color: rgba(255, 255, 255, .88); font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); }
.pc-blog-hero__desc p { margin: 0 0 .25rem; }

.pc-blog-search {
	display: flex;
	align-items: center;
	gap: .5rem;
	max-width: 640px;
	margin-top: 1.5rem;
	padding: .35rem;
	padding-inline-start: 1rem;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45);
	color: var(--pc-muted);
}
.pc-blog-search:focus-within { outline: 3px solid #9fd0ff; outline-offset: 2px; }
.pc-blog-search .pc-icon { flex: 0 0 auto; }
.pc-blog-search input[type="search"] { flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; color: var(--pc-heading); font-size: .95rem; }
.pc-blog-search input[type="search"]:focus { outline: none; }
.pc-blog-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.pc-blog-search .pc-button { flex: 0 0 auto; min-height: 44px; margin: 0; border-radius: 10px; }

/* Filters ---------------------------------------------------------------- */

.pc-blog-filters { position: relative; z-index: 2; margin-top: -1.35rem; }

.pc-chips-nav {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin: 0;
	padding: .55rem;
	overflow-x: auto;
	border: 1px solid var(--pc-border);
	border-radius: 16px;
	background: #fff;
	box-shadow: var(--pc-shadow);
	list-style: none;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	overscroll-behavior-x: contain;
}
.pc-chips-nav::-webkit-scrollbar { display: none; }
.pc-chips-nav > li { flex: 0 0 auto; scroll-snap-align: start; }

.pc-chips-nav__sep { align-self: stretch; width: 1px; margin-inline: .25rem; background: var(--pc-border); }

.pc-chip-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 40px;
	padding: .35rem .95rem;
	border-radius: 11px;
	color: var(--pc-heading);
	font-size: .9rem;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color .2s, color .2s;
}
.pc-chip-link:hover { background: var(--pc-surface); color: var(--pc-primary); text-decoration: none; }
.pc-chip-link.is-active { background: var(--pc-primary); color: #fff; }
.pc-chip-link--tag { color: var(--pc-text); font-weight: 500; }

.pc-chip-link__count { min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--pc-surface); color: var(--pc-muted); font-size: .72rem; font-weight: 700; line-height: 1.5rem; text-align: center; }
.pc-chip-link.is-active .pc-chip-link__count { background: rgba(255, 255, 255, .2); color: #fff; }

/* Results ---------------------------------------------------------------- */

.pc-blog__body { position: relative; padding-block: 1.75rem 3rem; }
.pc-blog__summary { margin: 0 0 1.25rem; color: var(--pc-muted); font-size: .88rem; }

.pc-blog-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .pc-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pc-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; } }

/* Featured row: one large story + two compact ones. */
.pc-blog-featured { display: grid; gap: 1.5rem; margin-bottom: 1.75rem; }
@media (min-width: 1024px) { .pc-blog-featured { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.75rem; } }

.pc-blog-featured__side { display: grid; gap: 1.5rem; align-content: stretch; }
@media (min-width: 640px) and (max-width: 1023px) { .pc-blog-featured__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card--featured .card__media { aspect-ratio: 16 / 9; }
@media (min-width: 1024px) { .card--featured .card__media { aspect-ratio: 2 / 1; } }
.card--featured .card__title { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.7; }
@media (min-width: 1024px) {
	.card--featured { display: grid; grid-template-rows: auto 1fr; }
	.card--featured .card__body { padding: 1.35rem 1.5rem 1.35rem; }
}

.card--compact { flex-direction: row; }
.card--compact .card__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 150px; }
.card--compact .card__body { justify-content: center; padding: 1rem; }
.card--compact .card__title { font-size: .98rem; }
.card--compact .card__title a { -webkit-line-clamp: 3; }
.card--compact .card__footer { padding-top: .5rem; }
@media (min-width: 1024px) { .card--compact { height: 100%; } }

/* Pagination (in-place loading keeps the same markup). */
.pc-blog .pagination { margin-top: 2.75rem; }
.pc-blog .page-numbers { min-width: 44px; height: 44px; border: 1px solid var(--pc-border); border-radius: 12px; background: #fff; text-decoration: none; }
.pc-blog .page-numbers.current,
.pc-blog a.page-numbers:hover { border-color: var(--pc-primary); background: var(--pc-primary); color: #fff; }
.pc-blog .page-numbers.prev, .pc-blog .page-numbers.next { padding-inline: 1rem; }
.pc-blog .page-numbers.dots { border-color: transparent; background: none; }

/* Loading state while a filter or page is fetched. */
.pc-blog__body.is-loading { pointer-events: none; }
.pc-blog__body.is-loading > * { opacity: .35; transition: opacity .2s; }
.pc-blog__body.is-loading::after {
	content: "";
	position: absolute;
	inset-block-start: 5rem;
	inset-inline-start: 50%;
	width: 42px;
	height: 42px;
	margin-inline-start: -21px;
	border: 3px solid rgba(1, 83, 165, .2);
	border-top-color: var(--pc-primary);
	border-radius: 50%;
	animation: pc-spin .8s linear infinite;
}
@keyframes pc-spin { to { transform: rotate(360deg); } }

/* Empty state */
.pc-empty { max-width: 560px; margin: 1rem auto; padding: 2.5rem 1.5rem; border: 1px dashed #c7d4e3; border-radius: 20px; background: #fff; text-align: center; }
.pc-empty__icon { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 1rem; border-radius: 50%; background: var(--pc-surface); color: var(--pc-primary); }
.pc-empty__title { margin: 0 0 .5rem; color: var(--pc-navy); font-size: 1.25rem; }
.pc-empty__text { margin: 0 0 1.25rem; }
.pc-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* Consultation CTA ------------------------------------------------------- */

.pc-blog-cta--band { padding-bottom: 3rem; }

.pc-blog-cta__box {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	overflow: hidden;
	padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	border-radius: 20px;
	background: linear-gradient(120deg, var(--pc-navy), var(--pc-primary-dark) 55%, var(--pc-primary));
	color: #fff;
}
.pc-blog-cta__box::after { content: ""; position: absolute; inset-block-start: -80%; inset-inline-end: -8%; z-index: -1; width: 320px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .15), transparent 65%); }

.pc-blog-cta__icon { display: grid; flex: 0 0 56px; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, .12); }
.pc-blog-cta__body { flex: 1 1 300px; }
.pc-blog-cta__title { margin: 0 0 .2rem; color: #fff; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 800; line-height: 1.6; }
.pc-blog-cta__text { margin: 0; color: rgba(255, 255, 255, .85); font-size: .92rem; }
.pc-blog-cta__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; }
.pc-blog-cta__actions .pc-button { min-height: 46px; margin: 0; font-weight: 700; text-decoration: none; }
.pc-blog-cta__actions .pc-button--light { direction: ltr; }

.pc-blog-cta--inline { margin-block: 2.25rem; }

.pc-blog-cta--card .pc-blog-cta__box { flex-direction: column; align-items: stretch; text-align: start; }
.pc-blog-cta--card .pc-blog-cta__body { flex: none; }
.pc-blog-cta--card .pc-blog-cta__actions { flex-direction: column; }
.pc-blog-cta--card .pc-blog-cta__actions .pc-button { width: 100%; }

/* Article header --------------------------------------------------------- */

.pc-progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; height: 3px; pointer-events: none; }
.pc-progress span { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--pc-sky), var(--pc-primary)); transform: scaleX(var(--pc-progress, 0)); transform-origin: right; }
.admin-bar .pc-progress { inset-block-start: 32px; }
@media (max-width: 782px) { .admin-bar .pc-progress { inset-block-start: 46px; } }

.pc-article-head {
	padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) clamp(4.5rem, 3rem + 6vw, 8rem);
	background:
		radial-gradient(900px 360px at 85% -20%, rgba(84, 149, 214, .22), transparent 70%),
		linear-gradient(180deg, #eef3fb, #f6f8fc);
}
.has-no-thumb .pc-article-head, .pc-article:not(.has-post-thumbnail) .pc-article-head { padding-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem); }

.pc-article-head__inner { text-align: center; }
.pc-article-head__title { max-width: 1000px; margin-inline: auto; }
.pc-article-head .breadcrumbs ol, .pc-article-head .breadcrumbs > p { justify-content: center; }

.pc-article-head__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0 0 .75rem; padding: 0; list-style: none; }
.pc-article-head__cats .card__badge { background: #fff; box-shadow: 0 4px 14px -8px rgba(1, 83, 165, .6); }
.pc-article-head__cats .card__badge.is-primary { background: var(--pc-primary); color: #fff; }

.pc-article-head__title { margin: 0 auto .85rem; color: var(--pc-navy); font-size: clamp(1.45rem, 1.1rem + 1.7vw, 2.35rem); font-weight: 800; line-height: 1.6; text-align: center; }
.pc-article-head__lead { max-width: 760px; margin: 0 auto 1rem; color: var(--pc-text); font-size: 1.05rem; }

.pc-article-head .pc-meta { justify-content: center; gap: .5rem 1.25rem; font-size: .85rem; }
.pc-meta__author { gap: .5rem; font-weight: 700; }
.pc-meta__author a { color: var(--pc-heading); }
.pc-meta__avatar { width: 28px; height: 28px; border-radius: 50%; }

.pc-article-cover { margin-top: clamp(-7rem, -2.5rem - 5vw, -3.5rem); }
/* Never upscale: older featured images are often narrower than the column. */
.pc-article-cover__figure { width: fit-content; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: 22px; background: var(--pc-surface); box-shadow: 0 30px 60px -35px rgba(19, 33, 68, .55); }
.pc-article-cover__figure img { display: block; width: auto; max-width: 100%; height: auto; max-height: 620px; object-fit: cover; }

/* Article layout --------------------------------------------------------- */

.pc-article-layout { display: grid; gap: 2rem 3rem; padding-block: clamp(1.75rem, 1.25rem + 2vw, 2.75rem) 1rem; }
@media (min-width: 1024px) {
	.pc-article-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
	.pc-article-layout--no-toc { grid-template-columns: minmax(0, 1fr) 280px; }
}

.pc-article-main { min-width: 0; }

.pc-article-content { font-size: clamp(1rem, .96rem + .15vw, 1.08rem); line-height: 2.1; }
.pc-article-content > p { text-align: justify; }
@media (max-width: 599px) { .pc-article-content p { text-align: start !important; } }
.pc-article-content h2,
.pc-article-content h3 { scroll-margin-top: 90px; }
.pc-article-content h2 { position: relative; margin-top: 2.5rem; padding-inline-start: 1rem; color: var(--pc-navy); }
.pc-article-content h2::before { content: ""; position: absolute; inset-block: .35em; inset-inline-start: 0; width: 4px; border-radius: 4px; background: linear-gradient(180deg, var(--pc-sky), var(--pc-primary)); }
.pc-article-content h3 { color: var(--pc-primary-dark); }
.pc-article-content img { height: auto; border-radius: 14px; }
.pc-article-content ul li::marker { color: var(--pc-primary); }
.pc-article-content blockquote { border-inline-start-color: var(--pc-sky); background: #f3f7fd; }

.pc-article-aside { display: none; }
@media (min-width: 1024px) {
	.pc-article-aside { display: block; height: 100%; }
	.pc-article-aside__sticky { position: sticky; inset-block-start: 1.5rem; display: grid; gap: 1.25rem; }
	.admin-bar .pc-article-aside__sticky { inset-block-start: calc(32px + 1.5rem); }
}

/* Table of contents */
.pc-toc { border: 1px solid var(--pc-border); border-radius: 16px; background: #fff; }
.pc-toc--side { max-height: calc(100vh - 20rem); padding: 1rem .5rem 1rem 1rem; overflow-y: auto; scrollbar-width: thin; }
.pc-toc__title, .pc-toc--mobile > summary { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; color: var(--pc-navy); font-weight: 800; }
.pc-toc__title .pc-icon, .pc-toc--mobile > summary .pc-icon { color: var(--pc-primary); }

.pc-toc__list, .pc-toc__sub { margin: 0; padding: 0; list-style: none; }
.pc-toc__list { counter-reset: pc-toc; }
.pc-toc__list > li { counter-increment: pc-toc; }
.pc-toc a { position: relative; display: block; padding: .35rem .6rem; padding-inline-start: 2rem; border-radius: 8px; color: var(--pc-text); font-size: .88rem; line-height: 1.8; text-decoration: none; }
.pc-toc__list > li > a::before { content: counter(pc-toc, persian); position: absolute; inset-inline-start: .5rem; color: var(--pc-primary); font-weight: 700; }
.pc-toc__sub a { padding-inline-start: 2.75rem; font-size: .83rem; }
.pc-toc__sub a::before { content: ""; position: absolute; inset-block-start: 1.05rem; inset-inline-start: 2.05rem; width: 5px; height: 5px; border-radius: 50%; background: #b8c7d8; }
.pc-toc a:hover { background: var(--pc-surface); color: var(--pc-primary); text-decoration: none; }
.pc-toc a.is-active { background: rgba(1, 83, 165, .08); color: var(--pc-primary); font-weight: 700; }

.pc-toc--mobile { margin-bottom: 1.5rem; }
.pc-toc--mobile > summary { margin: 0; padding: .85rem 1rem; list-style: none; cursor: pointer; }
.pc-toc--mobile > summary::-webkit-details-marker { display: none; }
.pc-toc--mobile > summary::after { content: ""; width: .5rem; height: .5rem; margin-inline-start: auto; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; }
.pc-toc--mobile[open] > summary::after { transform: rotate(-135deg); }
.pc-toc--mobile > .pc-toc__list { padding: 0 .5rem .75rem; }
@media (min-width: 1024px) { .pc-toc--mobile { display: none; } }

/* Article footer, share */
.pc-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.25rem; padding-top: 1.25rem; border-top: 1px solid var(--pc-border); }
.pc-article-foot .tag-list a { text-decoration: none; }
.pc-article-foot .tag-list a:hover { background: var(--pc-primary); color: #fff; }

.pc-share { display: flex; align-items: center; gap: .6rem; margin-inline-start: auto; }
.pc-share__label { color: var(--pc-muted); font-size: .85rem; }
.pc-share__list { display: flex; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pc-share__btn { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 40px; height: 40px; padding-inline: .6rem; border: 1px solid var(--pc-border); border-radius: 12px; background: #fff; color: var(--pc-heading); font: inherit; font-size: .82rem; cursor: pointer; text-decoration: none; transition: background-color .2s, color .2s, border-color .2s; }
.pc-share__btn:hover { border-color: var(--pc-primary); background: var(--pc-primary); color: #fff; text-decoration: none; }
.pc-share__btn--whatsapp:hover { border-color: #1fa855; background: #1fa855; }
.pc-share__btn.is-copied { border-color: #1fa855; background: #e7f6ec; color: #17602f; }
@media (max-width: 479px) { .pc-share__text { display: none; } .pc-share { margin-inline-start: 0; } }

/* Related + comments ----------------------------------------------------- */

.pc-related { margin-top: 2rem; padding-block: 2.75rem 3.25rem; background: var(--pc-surface); }
.pc-related__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1.25rem; }
.pc-related .related__title { margin: 0; color: var(--pc-navy); font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
.pc-related__all { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; text-decoration: none; }

.pc-article .comments-area { margin-top: 2.5rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--pc-border); border-radius: 18px; background: #fff; }
.pc-article .comment-reply-title, .pc-article .comments-title { margin-top: 0; color: var(--pc-navy); font-size: 1.2rem; }
.pc-article .comment-form { display: grid; gap: .25rem 1rem; }
@media (min-width: 640px) {
	.pc-article .comment-form { grid-template-columns: 1fr 1fr; }
	.pc-article .comment-form > p { grid-column: 1 / -1; }
	.pc-article .comment-form-author { grid-column: 1 !important; }
	.pc-article .comment-form-email { grid-column: 2 !important; }
}
.pc-article .comment-form label { display: block; margin-bottom: .25rem; color: var(--pc-heading); font-size: .88rem; font-weight: 500; }
.pc-article .comment-form input:not([type="submit"]):not([type="checkbox"]), .pc-article .comment-form textarea { border-radius: 10px; }
.pc-article .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; }
.pc-article .comment-form-cookies-consent label { display: inline; font-weight: 400; }
.pc-article .comment-notes, .pc-article .logged-in-as { color: var(--pc-muted); font-size: .85rem; }

/* The side column already carries the consultation box on desktop. */
@media (min-width: 1024px) { .pc-blog-cta--inline { display: none; } }

/* Article action rail (desktop) -------------------------------------------
   Like · bookmark · comments · share popover · reading progress. Sits in a
   gutter reserved at the start (right) side of the article column. */

.pc-rail { display: none; }

@media (min-width: 1024px) {
	.pc-article-main { padding-inline-start: 88px; }

	.pc-rail {
		position: fixed;
		/* Start edge of the 1400px container + 16px. */
		right: calc(max(var(--pc-gutter), 50% - var(--pc-container) / 2) + 16px);
		top: 160px;
		z-index: 40;
		display: block;
	}
}

.pc-rail__box { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.pc-rail__btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; line-height: 1.5; cursor: pointer; }
.pc-rail__btn:hover { text-decoration: none; }
.pc-rail__circle { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
.pc-rail__circle svg { display: block; width: 22px; height: 22px; fill: none; stroke: #62748e; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: fill .15s cubic-bezier(.4, 0, .2, 1), stroke .15s cubic-bezier(.4, 0, .2, 1); }
.pc-rail__count { font-size: 11px; font-weight: 700; line-height: 16.5px; color: #62748e; }

@media (hover: hover) {
	.pc-rail__btn--like:hover .pc-rail__circle { background: #fff1f2; }
	.pc-rail__btn--like:hover svg { stroke: #ff2056; }
	.pc-rail__btn--bookmark:hover .pc-rail__circle { background: #eef5fc; }
	.pc-rail__btn--bookmark:hover svg { stroke: var(--pc-primary); }
	.pc-rail__btn--comments:hover .pc-rail__circle { background: #f1f5f9; }
	.pc-rail__btn--comments:hover svg { stroke: var(--pc-primary); }
	.pc-rail__btn--share:hover .pc-rail__circle { background: #ecfdf5; }
	.pc-rail__btn--share:hover svg { stroke: #009966; }
}
.pc-rail__btn--like[aria-pressed="true"] svg { fill: #ff2056; stroke: #ff2056; }
.pc-rail__btn--bookmark[aria-pressed="true"] svg { fill: var(--pc-primary); stroke: var(--pc-primary); }
.pc-rail__btn--share[aria-expanded="true"] .pc-rail__circle { background: #ecfdf5; }
.pc-rail__btn--share[aria-expanded="true"] svg { stroke: #009966; }

.pc-rail__share { position: relative; }

.pc-rail__pop {
	position: absolute;
	top: 50%;
	right: 100%;
	width: 224px;
	margin-right: 12px;
	padding: 12px;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 20px 25px -5px rgba(202, 213, 226, .5), 0 8px 10px -6px rgba(202, 213, 226, .5);
	transform: translateY(-50%);
	animation: pc-rail-pop .15s cubic-bezier(0, 0, .2, 1);
}
.pc-rail__pop[hidden] { display: none; }
@keyframes pc-rail-pop { from { opacity: 0; transform: translate(8px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }

.pc-rail__pop-title { margin-bottom: 8px; color: #0c2530; font-size: 12px; font-weight: 900; line-height: 16px; }
.pc-rail__nets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pc-rail__net { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border: 0; border-radius: 12px; background: none; color: #45556c; font: inherit; font-size: 11px; font-weight: 700; line-height: 1.5; cursor: pointer; transition: color .15s cubic-bezier(.4, 0, .2, 1), background-color .15s cubic-bezier(.4, 0, .2, 1); }
.pc-rail__net svg { display: block; width: 24px; height: 24px; }
.pc-rail__net:hover { text-decoration: none; }
@media (hover: hover) {
	.pc-rail__net--telegram:hover { background: #f0f9ff; color: #0084d1; }
	.pc-rail__net--whatsapp:hover { background: #ecfdf5; color: #009966; }
	.pc-rail__net--instagram:hover { background: #fdf2f8; color: #e60076; }
	.pc-rail__copy:hover { background: #f8fafc; }
}

.pc-rail__copy { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: none; color: #45556c; font: inherit; font-size: 12px; font-weight: 700; line-height: 16px; cursor: pointer; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
.pc-rail__copy svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.pc-rail__progress { width: 4px; height: 96px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: rgba(226, 232, 240, .7); }
.pc-rail__progress span { display: block; width: 100%; height: 0; border-radius: 999px; background: linear-gradient(to bottom, var(--pc-sky), var(--pc-primary-dark)); transition: height .15s cubic-bezier(0, 0, .2, 1); }

@media (prefers-reduced-motion: reduce) { .pc-rail__pop { animation: none; } }