/*
 * Strefa Inwestora 0.5.3
 *
 * Założenie:
 * - spokojny, lekki UI;
 * - jeden język wizualny dla wszystkich klas aktywów;
 * - maksimum możliwości nadpisania CSS-em bez edycji pluginu.
 *
 * Najważniejsze zmienne możesz nadpisać np. w Elementor Custom CSS:
 *
 * .si-market-chart {
 *   --si-card-radius: 18px;
 *   --si-card-border: #eceff3;
 *   --si-card-bg: #ffffff;
 *   --si-card-shadow: 0 10px 30px rgba(15, 23, 42, .06);
 * }
 */

:root {
	--si-card-radius: 16px;
	--si-card-border: #edf0f4;
	--si-card-bg: #ffffff;
	--si-card-shadow: 0 8px 24px rgba(15, 23, 42, .045);
	--si-grid-gap: 16px;
	--si-widget-credit-size: 10px;
	--si-widget-credit-opacity: .45;
}

/* Pojedynczy wykres */

.si-market-chart {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--si-market-chart-height, 320px);
	border: 1px solid var(--si-card-border);
	border-radius: var(--si-card-radius);
	background: var(--si-card-bg);
	box-shadow: var(--si-card-shadow);
	overflow: hidden;
	isolation: isolate;
}

.si-market-chart .tradingview-widget-container__widget {
	width: 100%;
	min-height: calc(var(--si-market-chart-height, 320px) - 22px);
}

.si-market-chart .tradingview-widget-copyright,
.si-macro-calendar .tradingview-widget-copyright {
	padding: 3px 10px 7px;
	font-size: var(--si-widget-credit-size);
	line-height: 1.2;
	text-align: right;
	opacity: var(--si-widget-credit-opacity);
}

.si-market-chart .tradingview-widget-copyright a,
.si-macro-calendar .tradingview-widget-copyright a {
	color: inherit;
	text-decoration: none;
}

/*
 * Klasy do własnego stylowania:
 *
 * .si-market-chart--forex
 * .si-market-chart--crypto
 * .si-market-chart--metals
 * .si-market-chart--indices
 *
 * .si-market-chart--eurpln
 * .si-market-chart--usdpln
 * .si-market-chart--gbppln
 * .si-market-chart--chfpln
 * .si-market-chart--bitcoin
 * .si-market-chart--gold
 * .si-market-chart--wig20
 * .si-market-chart--sp500
 * .si-market-chart--nasdaq100
 * .si-market-chart--dax
 */

/* Grid */

.si-market-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--si-grid-gap);
	align-items: stretch;
}

.si-market-grid > .si-market-chart {
	height: 100%;
}

/* Kalendarz */

.si-macro-card,
.si-macro-calendar {
	box-sizing: border-box;
	width: 100%;
}

.si-macro-calendar {
	min-height: var(--si-macro-height, 480px);
	overflow: hidden;
	border: 1px solid var(--si-card-border);
	border-radius: var(--si-card-radius);
	background: var(--si-card-bg);
	box-shadow: var(--si-card-shadow);
}

.si-macro-calendar .tradingview-widget-container__widget {
	width: 100%;
	min-height: calc(var(--si-macro-height, 480px) - 30px);
}

/* Komunikaty */

.si-market-message {
	box-sizing: border-box;
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--si-card-border);
	border-radius: var(--si-card-radius);
	background: var(--si-card-bg);
	box-shadow: var(--si-card-shadow);
	font-size: 14px;
	line-height: 1.5;
}

/* Responsywność */

@media (max-width: 1024px) {
	.si-market-grid {
		gap: 14px;
	}
}

@media (max-width: 767px) {
	:root {
		--si-card-radius: 14px;
		--si-grid-gap: 12px;
	}

	.si-market-grid {
		grid-template-columns: 1fr;
	}

	.si-market-chart {
		min-height: min(var(--si-market-chart-height, 320px), 360px);
	}
}


/*
 * Kompaktowe karty rynkowe.
 * Użycie:
 * [si_market_card key="wig20"]
 * [si_market_cards group="indices"]
 *
 * Możesz dowolnie nadpisywać poniższe zmienne w Elementorze.
 */

:root {
	--si-mini-radius: 14px;
	--si-mini-border: #edf0f4;
	--si-mini-bg: #ffffff;
	--si-mini-shadow: 0 5px 18px rgba(15, 23, 42, .035);
	--si-mini-gap: 12px;
	--si-mini-credit-size: 9px;
	--si-mini-credit-opacity: .32;
}

.si-market-card {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--si-market-card-height, 180px);
	border: 1px solid var(--si-mini-border);
	border-radius: var(--si-mini-radius);
	background: var(--si-mini-bg);
	box-shadow: var(--si-mini-shadow);
	overflow: hidden;
	isolation: isolate;
}

.si-market-card .tradingview-widget-container__widget {
	width: 100%;
	min-height: calc(var(--si-market-card-height, 180px) - 18px);
}

.si-market-card .tradingview-widget-copyright {
	padding: 0 8px 5px;
	font-size: var(--si-mini-credit-size);
	line-height: 1;
	text-align: right;
	opacity: var(--si-mini-credit-opacity);
}

.si-market-card .tradingview-widget-copyright a {
	color: inherit;
	text-decoration: none;
}

.si-market-card-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--si-mini-gap);
	align-items: stretch;
}

/* Klasy do indywidualnego stylowania:
 * .si-market-card--forex
 * .si-market-card--crypto
 * .si-market-card--metals
 * .si-market-card--indices
 *
 * .si-market-card--eurpln
 * .si-market-card--bitcoin
 * .si-market-card--gold
 * .si-market-card--wig20
 * itd.
 */

@media (max-width: 1024px) {
	.si-market-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.si-market-card-grid {
		grid-template-columns: 1fr;
	}
}


/* v0.6.3: zabezpieczenie renderowania TradingView w Elementorze */
.si-tv-embed {
	position: relative;
}

.si-tv-embed > script[data-si-tv-runtime="1"] {
	display: none !important;
}


/* Elementor editor previews — local and deterministic */
.si-editor-preview,
.si-editor-grid-preview,
.si-editor-calendar-preview {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid #e7ebf0;
	border-radius: 14px;
	background: #fff;
	color: #111827;
	overflow: hidden;
}

.si-editor-preview {
	min-height: min(var(--si-editor-preview-height, 180px), 360px);
	padding: 16px;
}

.si-editor-preview__head,
.si-editor-calendar-preview__head,
.si-editor-grid-preview__title {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}

.si-editor-preview__head strong,
.si-editor-calendar-preview__head strong,
.si-editor-grid-preview__title strong {
	font-size: 14px;
}

.si-editor-preview__head span,
.si-editor-calendar-preview__head span,
.si-editor-grid-preview__title span {
	font-size: 11px;
	color: #64748b;
}

.si-editor-preview__value {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 12px;
}

.si-editor-preview__value > span {
	font-size: 24px;
	font-weight: 750;
}

.si-editor-preview__value small,
.si-editor-grid-preview__item small {
	color: #16a34a;
	font-weight: 700;
}

.si-editor-preview__chart {
	height: 72px;
	margin-top: 10px;
	color: #16a34a;
}

.si-editor-preview__chart svg {
	width: 100%;
	height: 100%;
	display: block;
}

.si-editor-preview__ranges {
	display: flex;
	gap: 7px;
	margin-top: 8px;
	font-size: 10px;
	color: #64748b;
}

.si-editor-preview__ranges > * {
	padding: 2px 6px;
	border-radius: 999px;
	background: #f1f5f9;
}

.si-editor-preview__note {
	margin-top: 10px;
	font-size: 10px;
	line-height: 1.35;
	color: #94a3b8;
}

.si-editor-grid-preview {
	padding: 14px;
}

.si-editor-grid-preview__items {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.si-editor-grid-preview__item {
	padding: 10px;
	border: 1px solid #edf0f4;
	border-radius: 10px;
}

.si-editor-grid-preview__item > span {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 12px;
}

.si-editor-grid-preview__item svg {
	width: 100%;
	height: 34px;
	margin-top: 6px;
	color: #16a34a;
}

.si-editor-calendar-preview {
	min-height: min(var(--si-editor-calendar-height, 480px), 420px);
	padding: 14px;
}

.si-editor-calendar-preview__row {
	display: grid;
	grid-template-columns: 48px 24px minmax(0, 1fr) 60px 60px;
	gap: 8px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #eef2f6;
	font-size: 12px;
}

.si-editor-calendar-preview__row time,
.si-editor-calendar-preview__row em {
	color: #64748b;
	font-style: normal;
}

/*
 * TradingView Economic Calendar is rendered in a cross-origin iframe.
 * Its internal filter icons cannot be styled from WordPress CSS.
 * The following small overlay hides only those top-left filter controls.
 */
.si-macro-calendar {
	position: relative;
	--si-calendar-filter-mask-width: 96px;
	--si-calendar-filter-mask-height: 48px;
	--si-calendar-filter-mask-bg: #fff;
}

.si-macro-calendar::before {
	content: "";
	position: absolute;
	z-index: 5;
	top: 0;
	left: 0;
	width: var(--si-calendar-filter-mask-width);
	height: var(--si-calendar-filter-mask-height);
	background: var(--si-calendar-filter-mask-bg);
	pointer-events: auto;
}


/* v0.6.5 — Elementor preview hardening */
.elementor-editor-active .si-editor-preview,
.elementor-editor-active .si-editor-grid-preview,
.elementor-editor-active .si-editor-calendar-preview,
.elementor-widget-si_market .si-editor-preview,
.elementor-widget-si_market_grid .si-editor-grid-preview,
.elementor-widget-si_macro_calendar .si-editor-calendar-preview {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	line-height: 1.35;
}

.elementor-widget-si_market .si-editor-preview {
	display: block;
	max-width: 100%;
	min-height: 180px;
	padding: 16px;
}

.elementor-widget-si_market .si-editor-preview__chart {
	display: block;
	width: 100%;
	height: 80px;
	max-height: 120px;
	overflow: hidden;
}

.elementor-widget-si_market .si-editor-preview__chart svg {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 120px;
}

.elementor-widget-si_market_grid .si-editor-grid-preview__items {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 10px !important;
}

.elementor-widget-si_market_grid .si-editor-grid-preview__item svg {
	display: block;
	width: 100%;
	height: 34px;
}

.elementor-widget-si_macro_calendar .si-editor-calendar-preview__row {
	display: grid !important;
	grid-template-columns: 48px 24px minmax(0, 1fr) 60px 60px !important;
	gap: 8px !important;
}


/* v0.6.6 — Economic Calendar: hide TradingView top filter toolbar and remove dead space */
.si-macro-calendar {
    overflow: hidden;
    --si-calendar-toolbar-crop: 44px;
}

.si-macro-calendar::before {
    display: none !important;
    content: none !important;
}

.si-macro-calendar .tradingview-widget-container__widget {
    position: relative;
    margin-top: calc(var(--si-calendar-toolbar-crop) * -1);
    min-height: calc(var(--si-macro-height, 480px) + var(--si-calendar-toolbar-crop));
}

.si-macro-calendar .tradingview-widget-container__widget iframe {
    min-height: calc(var(--si-macro-height, 480px) + var(--si-calendar-toolbar-crop)) !important;
}

/* v0.7.0 — własny kalendarz makro FRED */
.si-own-calendar {
	--si-cal-bg: #fff;
	--si-cal-border: #e7ebf0;
	--si-cal-text: #111827;
	--si-cal-muted: #667085;
	--si-cal-accent: #2563eb;
	--si-cal-positive: #089981;
	--si-cal-row: #f8fafc;
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--si-cal-border);
	border-radius: 16px;
	background: var(--si-cal-bg);
	color: var(--si-cal-text);
	overflow: hidden;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.si-own-calendar--message {
	padding: 18px 20px;
	color: var(--si-cal-muted);
}

.si-own-calendar__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px 12px;
}

.si-own-calendar__topline > div {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.si-own-calendar__topline strong { font-size: 15px; }
.si-own-calendar__topline span { font-size: 11px; color: var(--si-cal-muted); }
.si-own-calendar__source {
	padding: 4px 7px;
	border: 1px solid var(--si-cal-border);
	border-radius: 999px;
	font-size: 9px !important;
	font-weight: 700;
	letter-spacing: .04em;
}

.si-own-calendar__columns,
.si-own-calendar__event summary {
	display: grid;
	grid-template-columns: 62px 28px 48px minmax(240px, 1fr) 100px 100px 100px;
	gap: 8px;
	align-items: center;
}

.si-own-calendar__columns {
	grid-template-columns: 146px minmax(240px, 1fr) 100px 100px 100px;
	padding: 7px 18px;
	border-top: 1px solid var(--si-cal-border);
	border-bottom: 1px solid var(--si-cal-border);
	background: #fbfcfe;
	font-size: 10px;
	font-weight: 600;
	color: var(--si-cal-muted);
}

.si-own-calendar__day > header {
	padding: 10px 18px 7px;
	border-bottom: 1px solid var(--si-cal-border);
	font-size: 12px;
	font-weight: 700;
	text-transform: capitalize;
}

.si-own-calendar__event {
	border-bottom: 1px solid var(--si-cal-border);
}
.si-own-calendar__event:last-child { border-bottom: 0; }

.si-own-calendar__event summary {
	padding: 11px 18px;
	cursor: pointer;
	list-style: none;
	font-size: 12px;
}
.si-own-calendar__event summary::-webkit-details-marker { display: none; }
.si-own-calendar__event summary:hover { background: var(--si-cal-row); }

.si-own-calendar__event time,
.si-own-calendar__number { color: var(--si-cal-muted); }
.si-own-calendar__country { font-size: 18px; line-height: 1; }
.si-own-calendar__name { font-size: 12px; font-weight: 650; }
.si-own-calendar__actual.has-value { color: var(--si-cal-positive); font-weight: 700; }

.si-own-calendar__importance {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 16px;
}
.si-own-calendar__importance i {
	display: block;
	width: 3px;
	border-radius: 2px;
	background: #dbe2ea;
}
.si-own-calendar__importance i:nth-child(1) { height: 6px; }
.si-own-calendar__importance i:nth-child(2) { height: 10px; }
.si-own-calendar__importance i:nth-child(3) { height: 14px; }
.si-own-calendar__importance i.is-active { background: var(--si-cal-accent); }

.si-own-calendar__description {
	padding: 0 18px 14px 164px;
	font-size: 12px;
	line-height: 1.55;
	color: #344054;
}
.si-own-calendar__description p { margin: 0 0 6px; }
.si-own-calendar__description small { color: var(--si-cal-muted); }

@media (max-width: 900px) {
	.si-own-calendar__columns { display: none; }
	.si-own-calendar__event summary {
		grid-template-columns: 54px 26px 38px minmax(150px, 1fr) 82px 82px;
	}
	.si-own-calendar__forecast { display: none; }
	.si-own-calendar__description { padding-left: 18px; }
}

@media (max-width: 640px) {
	.si-own-calendar__topline { padding: 13px 14px 9px; }
	.si-own-calendar__topline > div { display: block; }
	.si-own-calendar__topline span { display: block; margin-top: 2px; }
	.si-own-calendar__day > header { padding-inline: 14px; }
	.si-own-calendar__event summary {
		grid-template-columns: 48px 24px 30px minmax(0, 1fr) 74px;
		padding-inline: 14px;
	}
	.si-own-calendar__number:not(.si-own-calendar__actual) { display: none; }
	.si-own-calendar__name { font-size: 11px; }
	.si-own-calendar__description { padding: 0 14px 13px; }
}


/* v0.7.2 — uproszczony kalendarz: Czas | Kraj | Wydarzenie | Ważność */
.si-own-calendar__columns,
.si-own-calendar__event > summary {
	display: grid;
	grid-template-columns: 74px minmax(130px, .8fr) minmax(260px, 2.4fr) 92px;
	gap: 14px;
	align-items: center;
}

.si-own-calendar__columns {
	padding: 8px 16px;
	font-size: 11px;
	font-weight: 700;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.si-own-calendar__event > summary {
	padding: 12px 16px;
	cursor: pointer;
}

.si-own-calendar__country {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-width: 0;
}

.si-own-calendar__flag {
	flex: 0 0 auto;
}

.si-own-calendar__country-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 12px;
	color: #475569;
}

.si-own-calendar__name {
	min-width: 0;
}

.si-own-calendar__importance {
	display: inline-flex;
	justify-content: flex-start;
	gap: 4px;
}

@media (max-width: 767px) {
	.si-own-calendar__columns {
		display: none;
	}

	.si-own-calendar__event > summary {
		grid-template-columns: 58px 34px minmax(0, 1fr) 70px;
		gap: 9px;
	}

	.si-own-calendar__country-name {
		display: none;
	}
}


/* v0.7.3 — calendar UX cleanup */
.si-own-calendar__topline {
	display: flex;
	align-items: center;
	min-height: 64px;
	padding: 0 18px;
	border-bottom: 1px solid #e8edf3;
}

.si-own-calendar__topline > strong {
	font-size: 16px;
	line-height: 1.2;
}

.si-own-calendar__columns,
.si-own-calendar__event > summary {
	display: grid;
	grid-template-columns: 74px minmax(130px, .8fr) minmax(260px, 2.4fr) 24px;
	gap: 14px;
	align-items: center;
}

.si-own-calendar__columns {
	padding: 10px 16px;
}

.si-own-calendar__event > summary {
	position: relative;
	padding: 14px 16px;
	list-style: none;
}

.si-own-calendar__event > summary::-webkit-details-marker {
	display: none;
}

.si-own-calendar__event > summary::marker {
	content: "";
}

.si-own-calendar__event[open] > summary {
	background: #fbfcfe;
}

.si-own-calendar__chevron {
	width: 9px;
	height: 9px;
	border-right: 2px solid #64748b;
	border-bottom: 2px solid #64748b;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .18s ease;
	justify-self: end;
	margin-right: 2px;
}

.si-own-calendar__event[open] .si-own-calendar__chevron {
	transform: rotate(225deg);
}

.si-own-calendar__description {
	display: grid;
	grid-template-columns: 74px minmax(130px, .8fr) minmax(260px, 2.4fr) 24px;
	gap: 14px;
	padding: 0 16px 16px;
	background: #fbfcfe;
	border-top: 0;
}

.si-own-calendar__description-inner {
	grid-column: 3 / 4;
	padding-top: 2px;
}

.si-own-calendar__description-inner p {
	margin: 0;
	font-size: 13px;
	line-height: 1.65;
	color: #475569;
}

.si-own-calendar__description-inner small {
	display: block;
	margin-top: 8px;
	font-size: 11px;
	line-height: 1.4;
	color: #94a3b8;
}

.si-own-calendar__event + .si-own-calendar__event {
	border-top: 1px solid #f0f3f7;
}

.si-own-calendar__event > summary:hover {
	background: #fafcff;
}

@media (max-width: 767px) {
	.si-own-calendar__event > summary {
		grid-template-columns: 58px 34px minmax(0, 1fr) 20px;
		gap: 9px;
	}

	.si-own-calendar__description {
		grid-template-columns: 58px 34px minmax(0, 1fr) 20px;
		gap: 9px;
		padding: 0 12px 14px;
	}

	.si-own-calendar__description-inner {
		grid-column: 3 / 4;
	}
}


/* v0.7.7 — mobile compact card typography fix
 *
 * TradingView Mini Symbol Overview is cross-origin, so its internal font sizes
 * cannot be targeted directly. We keep the exact v0.7.5 card/widget and only
 * scale the iframe content slightly on mobile. Outer layout, columns, gap,
 * radius and dimensions remain entirely controlled by Elementor / existing CSS.
 */

@media (max-width: 767px) {
	.si-market-card .tradingview-widget-container__widget {
		overflow: hidden;
	}

	.si-market-card .tradingview-widget-container__widget iframe {
		width: 108.7% !important;
		height: 108.7% !important;
		min-width: 108.7% !important;
		min-height: 108.7% !important;
		transform: scale(.92);
		transform-origin: top left;
	}
}

@media (max-width: 390px) {
	.si-market-card .tradingview-widget-container__widget iframe {
		width: 111.2% !important;
		height: 111.2% !important;
		min-width: 111.2% !important;
		min-height: 111.2% !important;
		transform: scale(.90);
	}
}


/* v0.7.10 — clean mobile typography fix.
 * No custom overlays and no duplicate labels.
 * No changes to columns, gaps, radius, card width/height or Elementor layout.
 */
@media (max-width: 767px) {
	.si-market-card .tradingview-widget-container__widget {
		overflow: hidden;
	}

	.si-market-card .tradingview-widget-container__widget iframe {
		width: 133.34% !important;
		height: 133.34% !important;
		min-width: 133.34% !important;
		min-height: 133.34% !important;
		transform: scale(.75) !important;
		transform-origin: top left !important;
	}
}

@media (max-width: 390px) {
	.si-market-card .tradingview-widget-container__widget iframe {
		width: 138.89% !important;
		height: 138.89% !important;
		min-width: 138.89% !important;
		min-height: 138.89% !important;
		transform: scale(.72) !important;
	}
}


/* v0.7.14 — second-line descriptions.
 *
 * The legacy Mini Symbol Overview keeps its description inside a cross-origin
 * iframe. This single narrow layer matches the measured description bounds in
 * the 180 px card (x: 50 px, y: 30.5 px, h: 14 px). It never reaches the price
 * row. Every market group uses normalized Polish text from
 * data-si-description.
 */
.si-market-card {
	position: relative;
}

.si-market-card::after {
	position: absolute;
	top: 29px;
	right: 8px;
	left: 50px;
	z-index: 3;
	display: flex;
	align-items: center;
	height: 17px;
	overflow: hidden;
	background: var(--si-mini-bg, #ffffff);
	color: #808080;
	font-family: -apple-system, BlinkMacSystemFont, "Trebuchet MS", Roboto, Ubuntu, sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 14px;
	letter-spacing: .5px;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-transform: uppercase;
	content: attr(data-si-description);
	pointer-events: none;
}

@media (max-width: 767px) {
	.si-market-card::after {
		top: 22px;
		right: 6px;
		left: 38px;
		height: 13px;
		font-size: 9px;
		line-height: 11px;
		letter-spacing: .375px;
	}
}

@media (max-width: 390px) {
	.si-market-card::after {
		top: 21px;
		left: 36px;
		height: 13px;
		font-size: 9px;
		line-height: 10px;
		letter-spacing: .36px;
	}
}


/* v0.7.18 — hide the legacy widget's inconsistent quote decorations.
 * TradingView may put the change beside the price or wrap it below. The
 * cross-origin iframe cannot be styled internally; this card-owned layer
 * covers both positions while leaving the live price, chart and attribution.
 * Bounds follow the 277px iframe used by the existing card layout.
 */
.si-market-card {
	--si-mini-quote-mask-start: 160px;
}

.si-market-card--eurpln,
.si-market-card--gbppln,
.si-market-card--chfpln { --si-mini-quote-mask-start: 138px; }
.si-market-card--usdpln,
.si-market-card--silver { --si-mini-quote-mask-start: 156px; }
.si-market-card--ethereum { --si-mini-quote-mask-start: 141px; }
.si-market-card--wig20 { --si-mini-quote-mask-start: 140px; }
.si-market-card--dax { --si-mini-quote-mask-start: 158px; }
.si-market-card--sp500 { --si-mini-quote-mask-start: 122px; }
.si-market-card--solana,
.si-market-card--xrp { --si-mini-quote-mask-start: 119px; }

.si-market-card__quote-mask {
	position: absolute;
	z-index: 4;
	top: 83px;
	right: 8px;
	left: 32px;
	height: 20px;
	background: var(--si-mini-bg, #ffffff);
	pointer-events: none;
}

.si-market-card__quote-mask::before {
	position: absolute;
	top: -33px;
	right: 0;
	left: calc(var(--si-mini-quote-mask-start) - 32px);
	height: 34px;
	background: var(--si-mini-bg, #ffffff);
	content: "";
}

@media (max-width: 767px) {
	.si-market-card { --si-mini-quote-mask-start: 120px; }
	.si-market-card--eurpln,
	.si-market-card--gbppln,
	.si-market-card--chfpln { --si-mini-quote-mask-start: 103.5px; }
	.si-market-card--usdpln,
	.si-market-card--silver { --si-mini-quote-mask-start: 117px; }
	.si-market-card--ethereum { --si-mini-quote-mask-start: 105.75px; }
	.si-market-card--wig20 { --si-mini-quote-mask-start: 105px; }
	.si-market-card--dax { --si-mini-quote-mask-start: 118.5px; }
	.si-market-card--sp500 { --si-mini-quote-mask-start: 91.5px; }
	.si-market-card--solana,
	.si-market-card--xrp { --si-mini-quote-mask-start: 89.25px; }

	.si-market-card__quote-mask {
		top: 62.25px;
		right: 6px;
		left: 24px;
		height: 15px;
	}

	.si-market-card__quote-mask::before {
		top: -24.75px;
		left: calc(var(--si-mini-quote-mask-start) - 24px);
		height: 25.5px;
	}
}

@media (max-width: 390px) {
	.si-market-card { --si-mini-quote-mask-start: 115.2px; }
	.si-market-card--eurpln,
	.si-market-card--gbppln,
	.si-market-card--chfpln { --si-mini-quote-mask-start: 99.36px; }
	.si-market-card--usdpln,
	.si-market-card--silver { --si-mini-quote-mask-start: 112.32px; }
	.si-market-card--ethereum { --si-mini-quote-mask-start: 101.52px; }
	.si-market-card--wig20 { --si-mini-quote-mask-start: 100.8px; }
	.si-market-card--dax { --si-mini-quote-mask-start: 113.76px; }
	.si-market-card--sp500 { --si-mini-quote-mask-start: 87.84px; }
	.si-market-card--solana,
	.si-market-card--xrp { --si-mini-quote-mask-start: 85.68px; }

	.si-market-card__quote-mask {
		top: 59.76px;
		right: 6px;
		left: 23px;
		height: 14.4px;
	}

	.si-market-card__quote-mask::before {
		top: -23.76px;
		left: calc(var(--si-mini-quote-mask-start) - 23px);
		height: 24.48px;
	}
}

/* v0.7.17 — TradingView now mounts the iframe directly inside the card.
 * The older mobile scale rules only matched an iframe inside the widget slot,
 * leaving quotes clipped and the normalized description over the native one.
 * Keep the existing two-column layout and the external TradingView credit.
 */
@media (max-width: 767px) {
	.si-market-card > iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 133.333% !important;
		min-width: 133.333% !important;
		height: calc(133.333% - 42.667px) !important;
		min-height: calc(133.333% - 42.667px) !important;
		transform: scale(.75) !important;
		transform-origin: top left !important;
	}

	.si-market-card > .tradingview-widget-copyright {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
	}
}

@media (max-width: 390px) {
	.si-market-card > iframe {
		width: 138.889% !important;
		min-width: 138.889% !important;
		height: calc(138.889% - 44.444px) !important;
		min-height: calc(138.889% - 44.444px) !important;
		transform: scale(.72) !important;
	}
}