/* Pakistan Forex Rates - front-end styles
   Colours fall back to a navy + gold palette but inherit theme variables when present. */

:root {
	--pfr-navy: var(--pfr-color-navy, #14305f);
	--pfr-navy-deep: var(--pfr-color-navy-deep, #0e2347);
	--pfr-gold: var(--pfr-color-gold, #ffc629);
	--pfr-gold-deep: var(--pfr-color-gold-deep, #e8a900);
	--pfr-ink: var(--pfr-color-ink, #1f2a3c);
	--pfr-muted: var(--pfr-color-muted, #6b7585);
	--pfr-line: var(--pfr-color-line, #e7ebf2);
	--pfr-bg-soft: var(--pfr-color-bg-soft, #f5f7fb);
	--pfr-sell: var(--pfr-color-sell, #c8102e);
	--pfr-radius: var(--pfr-radius-card, 16px);
	--pfr-shadow: var(--pfr-shadow-card, 0 10px 30px rgba(18, 38, 71, 0.08));
}

.pfr-card {
	background: #fff;
	border: 1px solid var(--pfr-line);
	border-radius: var(--pfr-radius);
	box-shadow: var(--pfr-shadow);
	padding: 22px 24px;
	margin: 0 0 26px;
	color: var(--pfr-ink);
	font-size: 16px;
}

.pfr-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.pfr-card__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--pfr-navy);
	letter-spacing: -0.01em;
}

.pfr-updated {
	font-size: 0.8rem;
	color: var(--pfr-muted);
	background: var(--pfr-bg-soft);
	padding: 4px 10px;
	border-radius: 999px;
}

/* Table */
.pfr-table-wrap {
	overflow-x: auto;
}

.pfr-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
}

.pfr-table thead th {
	text-align: left;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pfr-muted);
	font-weight: 700;
	padding: 10px 14px;
	border-bottom: 2px solid var(--pfr-line);
}

.pfr-table tbody td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--pfr-line);
	vertical-align: middle;
}

.pfr-table tbody tr:last-child td {
	border-bottom: none;
}

.pfr-table tbody tr:hover {
	background: var(--pfr-bg-soft);
}

.pfr-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.pfr-sell {
	color: var(--pfr-sell);
}

.pfr-cur {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pfr-flag {
	font-size: 1.5rem;
	line-height: 1;
}

.pfr-cur__meta {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.pfr-cur__code {
	font-weight: 800;
	color: var(--pfr-navy);
}

.pfr-cur__name {
	font-size: 0.8rem;
	color: var(--pfr-muted);
}

.pfr-foot-note {
	margin: 14px 0 0;
	font-size: 0.78rem;
	color: var(--pfr-muted);
}

/* Ticker */
.pfr-ticker {
	background: var(--pfr-navy-deep);
	color: #fff;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	padding: 9px 0;
}

.pfr-ticker__track {
	display: inline-flex;
	gap: 34px;
	padding-left: 34px;
	animation: pfr-marquee 45s linear infinite;
	will-change: transform;
}

.pfr-ticker:hover .pfr-ticker__track {
	animation-play-state: paused;
}

.pfr-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9rem;
}

.pfr-ticker__item strong {
	color: var(--pfr-gold);
	font-weight: 800;
}

.pfr-ticker__val {
	font-variant-numeric: tabular-nums;
}

@keyframes pfr-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

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

/* Converter */
.pfr-conv-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 14px;
}

.pfr-conv-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pfr-conv-field label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--pfr-muted);
}

.pfr-conv-field input,
.pfr-conv-field select {
	width: 100%;
	padding: 11px 12px;
	border: 1.5px solid var(--pfr-line);
	border-radius: 12px;
	font-size: 1rem;
	background: #fff;
	color: var(--pfr-ink);
}

.pfr-conv-field input:focus,
.pfr-conv-field select:focus {
	outline: none;
	border-color: var(--pfr-gold);
	box-shadow: 0 0 0 3px rgba(255, 198, 41, 0.25);
}

.pfr-conv-result {
	margin-top: 18px;
	padding: 16px 18px;
	background: var(--pfr-bg-soft);
	border-radius: 14px;
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--pfr-navy);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.pfr-inline-rate {
	font-weight: 800;
	color: var(--pfr-navy);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.pfr-conv-row { grid-template-columns: 1fr; }
	.pfr-card { padding: 18px 16px; }
}

/* ===== Hero rate card (Selling big + Buying + Change) ===== */
.pfr-ratecard{background:#fff;border-radius:18px;padding:26px 28px;box-shadow:0 18px 50px rgba(14,35,71,.12);color:#15233f}
.pfr-ratecard__pair{font-family:var(--pfr-font-display,"Poppins",sans-serif);font-weight:700;color:#14305f;font-size:1.05rem;display:flex;align-items:center;gap:8px}
.pfr-ratecard__arrow{color:#9aa6bd}
.pfr-ratecard__label{font-family:var(--pfr-font-display,"Poppins",sans-serif);font-size:.82rem;font-weight:600;color:#65728c;margin-top:10px}
.pfr-ratecard__big{font-family:var(--pfr-font-display,"Poppins",sans-serif);font-weight:800;font-size:clamp(2.6rem,6vw,3.4rem);line-height:1;color:#14305f;margin:2px 0}
.pfr-ratecard__big .pfr-inline-rate{font-size:inherit!important;font-weight:inherit!important;color:inherit!important}
.pfr-ratecard__divider{height:1px;background:#e6ebf3;margin:16px 0}
.pfr-ratecard__row{display:flex;gap:24px}
.pfr-ratecard__cell{flex:1}
.pfr-ratecard__sub{font-family:var(--pfr-font-display,"Poppins",sans-serif);font-weight:800;font-size:1.5rem;color:#14305f;margin-top:2px}
.pfr-ratecard__sub.pfr-chg-up{color:#1f9d57}
.pfr-ratecard__sub.pfr-chg-down{color:#d23048}
.pfr-ratecard__sub.pfr-chg-flat{color:#65728c}

/* ===== Rates table: align Buying/Selling headers with their values ===== */
.pfr-table th.pfr-num,.pfr-table td.pfr-num{text-align:right}
.pfr-table th.pfr-th-cur,.pfr-table td.pfr-cur{text-align:left}

/* ===== Currency converter: navy card, light inputs, gold result ===== */
.pfr-converter{background:#14305f!important;border:0!important;color:#fff}
.pfr-converter .pfr-card__title{color:#fff}
.pfr-converter .pfr-conv-field label{color:#c7d3ec}
.pfr-converter input,.pfr-converter select{background:#fff;border:1px solid rgba(255,255,255,.18);color:#15233f;border-radius:10px;padding:11px 12px;width:100%}
.pfr-converter input:focus,.pfr-converter select:focus{outline:2px solid #ffc629;border-color:#ffc629}
.pfr-converter .pfr-conv-result{background:#ffc629;color:#0e2347;font-family:var(--pfr-font-display,"Poppins",sans-serif);font-weight:800;font-size:1.1rem;border-radius:10px;padding:14px;text-align:center;margin-top:8px}
.pfr-converter .pfr-foot-note{color:#9fb0d2}