/**
 * RDP SaaS Portal — My Account tab styling.
 *
 * Deliberately light-touch: it decorates the WooCommerce account navigation and
 * gives each rendered panel a predictable wrapper, without imposing colours the
 * active theme has not asked for. Everything inherits currentColor so the tabs
 * follow the theme in both light and dark palettes.
 */

/* ── Navigation icons ─────────────────────────────────────────────────────── */

.woocommerce-MyAccount-navigation ul li.rdp-portal-item a {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

/* The dashicons-before class supplies the font; the dashicons-<name> class
   supplies the glyph. Nudge it onto the same baseline as the label. */
.woocommerce-MyAccount-navigation ul li.rdp-portal-item.dashicons-before::before {
	float: left;
	margin-right: 0.5em;
	opacity: 0.7;
	font-size: 18px;
	line-height: 1.4;
	speak: never;
}

.woocommerce-MyAccount-navigation ul li.rdp-portal-item.is-active::before,
.woocommerce-MyAccount-navigation ul li.rdp-portal-item:hover::before {
	opacity: 1;
}

/* ── Panels ───────────────────────────────────────────────────────────────── */

.rdp-portal-panel {
	max-width: 100%;
	overflow-x: auto;   /* wide schedule tables scroll inside the panel,
	                       rather than forcing the page to scroll sideways */
}

.rdp-portal-panel > * {
	max-width: 100%;
}

.rdp-portal-panel img,
.rdp-portal-panel video,
.rdp-portal-panel iframe {
	max-width: 100%;
	height: auto;
}

/* Schedule/advert tables inside the panels can be wide; keep them readable
   without breaking the account layout. */
.rdp-portal-panel table {
	width: 100%;
	border-collapse: collapse;
}

.rdp-portal-unavailable {
	margin: 0;
}

/* ── Narrow screens ───────────────────────────────────────────────────────── */

@media screen and (max-width: 768px) {
	.woocommerce-MyAccount-navigation ul li.rdp-portal-item.dashicons-before::before {
		font-size: 16px;
	}

	.rdp-portal-panel {
		font-size: 0.95em;
	}
}

/* Bare-value tabs (e.g. the stream key) and their explanatory intro. */
.rdp-portal-intro {
	margin: 0 0 0.75em;
	opacity: 0.85;
}

.rdp-portal-value {
	display: inline-block;
	padding: 0.5em 0.75em;
	word-break: break-all;
	user-select: all;      /* one click selects the whole key */
	font-size: 0.95em;
}