/*
 * Recohub PGM Prices – component styles.
 * Colours and fonts come from Elementor global variables when present, with fallbacks
 * matching the hub mockup. Override any --rh-pgm-* variable in Elementor custom CSS.
 */
.rh-pgm {
	--rh-pgm-accent: var(--e-global-color-accent, #3C6F76);
	--rh-pgm-text-color: var(--e-global-color-text, #46585A);
	--rh-pgm-heading-color: var(--e-global-color-primary, #13444A);
	--rh-pgm-muted-color: #5f7476;
	--rh-pgm-surface: #ffffff;
	--rh-pgm-surface-alt: #F4F8F9;
	--rh-pgm-border: #C6D8DB;
	--rh-pgm-grid: #E3ECEE;
	--rh-pgm-up: #15803d;
	--rh-pgm-down: #c2410c;
	--rh-pgm-flat: #5b6770;
	--rh-pgm-warn: #b45309;
	--rh-pgm-radius: 0;
	--rh-pgm-c1: #13444A;
	--rh-pgm-c2: #5FA8B3;
	--rh-pgm-c3: #B08A4E;
	--rh-pgm-font: var(--e-global-typography-text-font-family, inherit);
	font-family: var(--rh-pgm-font);
	color: var(--rh-pgm-text-color);
	box-sizing: border-box;
}
.rh-pgm *,
.rh-pgm *::before,
.rh-pgm *::after { box-sizing: inherit; }
.rh-pgm p { margin: 0; }

.rh-pgm-muted { color: var(--rh-pgm-muted-color); font-size: .875em; }
.rh-pgm-note { color: var(--rh-pgm-muted-color); font-size: .8125rem; line-height: 1.5; margin-top: .5rem; }
.rh-pgm-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-pgm-na { color: var(--rh-pgm-muted-color); font-weight: 500; }

/* change */
.rh-pgm-change { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rh-pgm-up { color: var(--rh-pgm-up); }
.rh-pgm-down { color: var(--rh-pgm-down); }
.rh-pgm-flat, .rh-pgm-na.rh-pgm-change { color: var(--rh-pgm-flat); }
.rh-pgm-change.rh-pgm-na { color: var(--rh-pgm-flat); }

/* status */
.rh-pgm-status { display: inline-flex; align-items: center; gap: .4em; font-size: .875rem; color: inherit; flex-wrap: wrap; }
.rh-pgm-dot { width: .55em; height: .55em; border-radius: 50%; background: #22c55e; display: inline-block; }
.rh-pgm-status--delayed .rh-pgm-dot { background: #f59e0b; }
.rh-pgm-status--unavailable, .rh-pgm-status--hidden { font-style: italic; }
.rh-pgm-status__note { opacity: .8; }
.rh-pgm-on-dark, .rh-pgm-on-dark .rh-pgm-status__note { color: #EFF3F3; }
.rh-pgm-on-dark .rh-pgm-price__value, .rh-pgm-on-dark .rh-pgm-num { color: #FFFFFF; }
.rh-pgm-on-dark .rh-pgm-muted, .rh-pgm-on-dark .rh-pgm-unit { color: #D8E4E6; }
.rh-pgm-on-dark .rh-pgm-up { color: #8BE0AE; }
.rh-pgm-on-dark .rh-pgm-down { color: #FFB38A; }
.rh-pgm-on-dark .rh-pgm-flat, .rh-pgm-on-dark .rh-pgm-change.rh-pgm-na { color: #D8E4E6; }
/* Currency/unit switch on a dark band */
.rh-pgm-controls.rh-pgm-on-dark { margin: 1.25rem 0 0; }
.rh-pgm-controls.rh-pgm-on-dark .rh-pgm-controls__field { color: #D8E4E6; }
.rh-pgm-controls.rh-pgm-on-dark select {
	background-color: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .35);
	background-image: linear-gradient(45deg, transparent 50%, #FFFFFF 50%), linear-gradient(135deg, #FFFFFF 50%, transparent 50%);
	background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
	-webkit-appearance: none; appearance: none;
}
.rh-pgm-controls.rh-pgm-on-dark select option { color: #13444A; }
.rh-pgm-controls.rh-pgm-on-dark .rh-pgm-seg { background: transparent; border-color: rgba(255, 255, 255, .35); }
.rh-pgm.rh-pgm-on-dark .rh-pgm-seg__btn { color: #FFFFFF; border-right-color: rgba(255, 255, 255, .35); }
.rh-pgm.rh-pgm-on-dark .rh-pgm-seg__btn[aria-pressed="true"] { background: #FFFFFF; color: #13444A; }
.rh-pgm.rh-pgm-on-dark .rh-pgm-seg__btn:hover:not([disabled]):not([aria-pressed="true"]) { background: rgba(255, 255, 255, .12); }
.rh-pgm.rh-pgm-on-dark .rh-pgm-seg__btn:focus-visible, .rh-pgm-controls.rh-pgm-on-dark select:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }

/* controls */
.rh-pgm-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0 0 1rem; }
.rh-pgm-controls__field { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; font-weight: 600; }
.rh-pgm-controls select {
	font: inherit; font-weight: 500; padding: .4rem 2rem .4rem .75rem; border: 1px solid var(--rh-pgm-border);
	border-radius: 0; background-color: var(--rh-pgm-surface); color: var(--rh-pgm-heading-color); min-height: 40px;
}
.rh-pgm-seg { display: inline-flex; border: 1px solid var(--rh-pgm-border); border-radius: 0; overflow: hidden; background: var(--rh-pgm-surface); }
.rh-pgm .rh-pgm-seg__btn {
	font: inherit; font-size: .8125rem; font-weight: 600; line-height: 1; padding: .6rem .85rem; min-height: 38px;
	border: 0; border-right: 1px solid var(--rh-pgm-border); background: transparent; color: var(--rh-pgm-text-color);
	cursor: pointer; border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.rh-pgm .rh-pgm-seg__btn:last-child { border-right: 0; }
.rh-pgm .rh-pgm-seg__btn[aria-pressed="true"] { background: var(--rh-pgm-heading-color); color: #fff; }
.rh-pgm .rh-pgm-seg__btn:hover:not([disabled]):not([aria-pressed="true"]) { background: var(--rh-pgm-surface-alt); }
.rh-pgm .rh-pgm-seg__btn[disabled] { color: #a5afb5; cursor: not-allowed; }
.rh-pgm .rh-pgm-seg__btn:focus-visible { outline: 2px solid var(--rh-pgm-accent); outline-offset: -2px; }

/* cards */
.rh-pgm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.rh-pgm-card {
	background: var(--rh-pgm-surface); border: 1px solid var(--rh-pgm-border); border-radius: var(--rh-pgm-radius);
	padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem;
}
.rh-pgm-card__head { display: flex; align-items: center; gap: .6rem; }
.rh-pgm-badge {
	display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 0;
	background: var(--rh-pgm-surface-alt); border: 1px solid var(--rh-pgm-border); font-weight: 500; font-size: .9375rem; color: var(--rh-pgm-heading-color);
}
.rh-pgm .rh-pgm-card__title { margin: 0; font-size: 1.375rem; font-weight: 400; line-height: 1.2; color: var(--rh-pgm-heading-color); }
.rh-pgm-card__price { font-size: 2rem; font-weight: 500; line-height: 1.15; color: var(--rh-pgm-heading-color); }
.rh-pgm-card__price .rh-pgm-unit { font-size: .875rem; font-weight: 500; color: var(--rh-pgm-muted-color); }
.rh-pgm-card__change { font-size: .875rem; }
.rh-pgm-card__sub { font-size: .875rem; color: var(--rh-pgm-muted-color); display: flex; flex-wrap: wrap; gap: .25rem; align-items: baseline; }
.rh-pgm-card__sub .rh-pgm-num { color: var(--rh-pgm-text-color); font-weight: 600; }
.rh-pgm-sep { display: inline-block; width: 1px; height: .9em; background: var(--rh-pgm-border); margin: 0 .5rem; }
.rh-pgm-card__link {
	margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--rh-pgm-border); font-weight: 400; font-size: 1rem;
	color: var(--rh-pgm-heading-color); text-decoration: none;
}
.rh-pgm-card__link:hover { text-decoration: underline; }

/* single price */
.rh-pgm-price__value { font-size: clamp(2.25rem, 5vw, 3.4rem); font-weight: 400; line-height: 1.1; }
.rh-pgm-price__value .rh-pgm-unit { font-size: 1rem; font-weight: 500; opacity: .8; }
.rh-pgm-price__change { margin-top: .35rem; font-size: 1rem; }

/* tables */
.rh-pgm-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rh-pgm .rh-pgm-table {
	width: 100%; border-collapse: collapse; margin: 0; font-size: .9375rem; background: var(--rh-pgm-surface);
	border: 1px solid var(--rh-pgm-border); border-radius: var(--rh-pgm-radius); overflow: hidden;
}
.rh-pgm .rh-pgm-table caption { text-align: left; caption-side: top; padding: 0 0 .75rem; font-size: .9375rem; font-weight: 300; color: var(--rh-pgm-muted-color); }
.rh-pgm .rh-pgm-table th,
.rh-pgm .rh-pgm-table td { padding: .75rem 1rem; border: 0; border-bottom: 1px solid var(--rh-pgm-border); text-align: left; white-space: nowrap; vertical-align: middle; }
.rh-pgm .rh-pgm-table thead th { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--rh-pgm-muted-color); background: var(--rh-pgm-surface-alt); }
.rh-pgm .rh-pgm-table tbody th { font-weight: 400; color: var(--rh-pgm-heading-color); }
.rh-pgm .rh-pgm-table tbody tr:last-child th,
.rh-pgm .rh-pgm-table tbody tr:last-child td { border-bottom: 0; }
.rh-pgm .rh-pgm-table td { font-variant-numeric: tabular-nums; color: var(--rh-pgm-heading-color); }
/* Neutralise theme table striping/hover so all price tables look the same on every theme. */
.rh-pgm .rh-pgm-table tbody tr,
.rh-pgm .rh-pgm-table tbody tr:nth-child(odd),
.rh-pgm .rh-pgm-table tbody tr:nth-child(even) { background: transparent; }
.rh-pgm .rh-pgm-table tbody tr > td,
.rh-pgm .rh-pgm-table tbody tr > th { background-color: var(--rh-pgm-surface); }
.rh-pgm .rh-pgm-table tbody tr:hover > td,
.rh-pgm .rh-pgm-table tbody tr:hover > th { background-color: var(--rh-pgm-surface-alt); }
.rh-pgm-table-wrap .rh-pgm-table tbody th { position: sticky; left: 0; }
.rh-pgm .rh-pgm-table caption { white-space: normal; }
.rh-pgm-table-wrap--narrow { max-width: 640px; }

/* History: three unit columns on wide screens, one "selected unit" column on small screens. */
.rh-pgm .rh-pgm-table .rh-pgm-col-sel { display: none; }
.rh-pgm .rh-pgm-table .rh-pgm-col-sel .rh-pgm-unit { text-transform: none; letter-spacing: 0; font-weight: 600; }

/* chart */
.rh-pgm-chart { margin: 0; background: var(--rh-pgm-surface); border: 1px solid var(--rh-pgm-border); border-radius: var(--rh-pgm-radius); padding: 1rem; }
.rh-pgm-chart__ranges { margin-bottom: .75rem; }
.rh-pgm-chart__canvas { position: relative; height: 300px; }
.rh-pgm-chart__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; }
@media (max-width: 600px) { .rh-pgm-chart__canvas { height: 240px; } }

/* stats */
.rh-pgm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin: 1rem 0 0; }
.rh-pgm-stats__item { background: var(--rh-pgm-surface-alt); border-radius: 0; padding: 1rem 1.25rem; margin: 0; }
.rh-pgm-stats dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--rh-pgm-muted-color); margin: 0 0 .25rem; font-weight: 600; }
.rh-pgm-stats dd { margin: 0; font-weight: 500; font-size: 1.25rem; color: var(--rh-pgm-heading-color); font-variant-numeric: tabular-nums; }
.rh-pgm-stats dd .rh-pgm-muted { display: block; font-weight: 500; font-size: .75rem; }

/* snapshot */
.rh-pgm-snapshot p:first-child { font-size: 1.15rem; font-weight: 300; line-height: 1.5; }
/* Elementor Shortcode widgets holding price components may sit in flex rows: let them take the free space. */
.elementor-widget-shortcode:has(.rh-pgm-snapshot) { flex: 1 1 0; min-width: 0; }
.elementor-widget-shortcode:has(.rh-pgm) { max-width: 100%; min-width: 0; }

/* unavailable */
.rh-pgm-unavailable { padding: 1rem 1.25rem; border: 1px dashed var(--rh-pgm-border); border-radius: var(--rh-pgm-radius); color: var(--rh-pgm-muted-color); background: var(--rh-pgm-surface); }

/* FAQ question indicator (Elementor accordion headings with the global class rh-faq-q) */
.rh-faq-q { position: relative; padding-right: 2.25rem !important; }
.rh-faq-q::after {
	content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	font-size: 1.75rem; font-weight: 300; line-height: 1; color: #3C6F76;
}
details[open] .rh-faq-q::after { content: "\2013"; }
summary:has(.rh-faq-q) { list-style: none; cursor: pointer; }
summary:has(.rh-faq-q)::-webkit-details-marker { display: none; }

@media (max-width: 600px) {
	.rh-pgm-card__price { font-size: 1.5rem; }
	.rh-pgm .rh-pgm-table th, .rh-pgm .rh-pgm-table td { padding: .6rem .75rem; }
	.rh-pgm-controls { gap: .75rem; }
	.rh-pgm-controls__field span { font-size: .8125rem; }
	.rh-pgm .rh-pgm-seg__btn { padding: .6rem .7rem; }

	/* History: date, price in the selected unit, change */
	.rh-pgm .rh-pgm-table .rh-pgm-col-unit { display: none; }
	.rh-pgm .rh-pgm-table .rh-pgm-col-sel { display: table-cell; }
	.rh-pgm .rh-pgm-history th, .rh-pgm .rh-pgm-history td { padding: .6rem .55rem; }
	.rh-pgm .rh-pgm-history thead th { white-space: normal; vertical-align: bottom; }

	/* Stacked tables: each row becomes a small card with labelled values */
	.rh-pgm .rh-pgm-table--stack,
	.rh-pgm .rh-pgm-table--stack tbody,
	.rh-pgm .rh-pgm-table--stack tr { display: block; width: 100%; }
	.rh-pgm .rh-pgm-table--stack { border: 0; background: transparent; }
	.rh-pgm .rh-pgm-table--stack caption { display: block; }
	.rh-pgm .rh-pgm-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.rh-pgm .rh-pgm-table--stack tr { border: 1px solid var(--rh-pgm-border); margin: 0 0 .75rem; }
	.rh-pgm .rh-pgm-table--stack tbody tr > th {
		display: block; position: static; padding: .75rem 1rem; white-space: normal;
		background-color: var(--rh-pgm-surface-alt); border-bottom: 1px solid var(--rh-pgm-border);
	}
	.rh-pgm .rh-pgm-table--stack td {
		display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
		padding: .6rem 1rem; white-space: normal; border-bottom: 1px solid var(--rh-pgm-grid);
	}
	.rh-pgm .rh-pgm-table--stack td::before {
		content: attr(data-label); font-size: .75rem; font-weight: 600; text-transform: uppercase;
		letter-spacing: .03em; color: var(--rh-pgm-muted-color);
	}
	.rh-pgm .rh-pgm-table--stack tbody tr > td:last-child,
	.rh-pgm .rh-pgm-table--stack tbody tr:last-child > td:last-child { border-bottom: 0; }
	.rh-pgm .rh-pgm-table--stack tbody tr:last-child > th { border-bottom: 1px solid var(--rh-pgm-border); }
	.rh-pgm .rh-pgm-table--stack tbody tr:hover > th { background-color: var(--rh-pgm-surface-alt); }
	.rh-pgm .rh-pgm-table--stack tbody tr:hover > td { background-color: var(--rh-pgm-surface); }
}