/* Tennis API Hub widgets
   Palette: navy #0B2A5B, court blue #2E6DB4, green #3E7C4A, ball #D8E64A */

.usoti-widget,
.usoti-widget * {
	box-sizing: border-box;
}

.usoti-widget {
	border: 1px solid #d7e0ee;
	border-radius: 12px;
	overflow: hidden;
	margin: 1.5em 0;
	background: #ffffff;
	font-size: 15px;
	line-height: 1.45;
	box-shadow: 0 1px 3px rgba(11, 42, 91, 0.06);
}

/* Title bar: works whether it is an h2, h3, h4, or p */
.usoti-widget .usoti-title {
	display: flex;
	align-items: center;
	gap: 10px;
	background: linear-gradient(135deg, #0B2A5B 0%, #143a75 100%);
	color: #ffffff;
	font-weight: 700;
	margin: 0;
	padding: 13px 16px;
	font-size: 17px;
	letter-spacing: 0.02em;
	border-bottom: 3px solid #D8E64A;
}

.usoti-widget .usoti-title::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #D8E64A;
	box-shadow: 0 0 0 3px rgba(216, 230, 74, 0.25);
}

.usoti-body {
	padding: 10px 12px;
}

.usoti-credit {
	padding: 8px 16px;
	font-size: 12px;
	color: #5a6b84;
	background: #f4f7fb;
	border-top: 1px solid #e3eaf4;
}

/* ---- Match cards ---- */

.usoti-match {
	border: 1px solid #e3eaf4;
	border-radius: 8px;
	margin: 8px 0;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.usoti-match:hover {
	border-color: #2E6DB4;
}

.usoti-match-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	background: #eef3fa;
	padding: 6px 12px;
	font-size: 13px;
}

.usoti-tournament {
	color: #0B2A5B;
	font-weight: 600;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.usoti-badge {
	flex: none;
	font-size: 12px;
	font-weight: 600;
	color: #40506a;
	padding: 2px 9px;
	border-radius: 999px;
	background: #ffffff;
	border: 1px solid #d7e0ee;
	white-space: nowrap;
}

.usoti-badge time {
	font: inherit;
	color: inherit;
}

.usoti-badge-live {
	background: #3E7C4A;
	border-color: #3E7C4A;
	color: #ffffff;
}

.usoti-badge-live::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #D8E64A;
	margin-right: 6px;
	animation: usoti-pulse 1.4s infinite;
}

.usoti-badge-done {
	background: #0B2A5B;
	border-color: #0B2A5B;
	color: #ffffff;
}

@keyframes usoti-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
	.usoti-badge-live::before { animation: none; }
	.usoti-match { transition: none; }
}

.usoti-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	gap: 10px;
}

.usoti-row + .usoti-row {
	border-top: 1px dashed #e3eaf4;
}

.usoti-player {
	color: #1c2b42;
	flex: 1 1 auto;
	min-width: 0; /* required for ellipsis inside flex */
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.usoti-won .usoti-player {
	font-weight: 700;
	color: #0B2A5B;
}

.usoti-sets {
	display: flex;
	gap: 4px;
	flex: none;
	max-width: 60%;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.usoti-set {
	min-width: 24px;
	text-align: center;
	background: #eef3fa;
	color: #0B2A5B;
	border-radius: 4px;
	padding: 2px 4px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 13px;
}

.usoti-won .usoti-set {
	background: #2E6DB4;
	color: #ffffff;
}

/* ---- Rankings table ---- */

.usoti-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

table.usoti-rankings {
	width: 100%;
	border-collapse: collapse;
	margin: 4px 0;
}

table.usoti-rankings caption {
	caption-side: top;
	text-align: left;
	font-weight: 700;
	color: #0B2A5B;
	padding: 6px 4px;
}

table.usoti-rankings th {
	background: #2E6DB4;
	color: #ffffff;
	text-align: left;
	padding: 8px 10px;
	font-size: 13px;
}

table.usoti-rankings td {
	padding: 7px 10px;
	border-bottom: 1px solid #e3eaf4;
}

table.usoti-rankings tbody tr:nth-child(even) {
	background: #f4f7fb;
}

table.usoti-rankings tbody tr:hover {
	background: #eef3fa;
}

.usoti-rk, .usoti-pts {
	text-align: right !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.usoti-country {
	color: #5a6b84;
	font-size: 13px;
}

/* ---- Bracket / draw ---- */

.usoti-round {
	margin: 10px 0 18px;
}

.usoti-round-label {
	font-weight: 700;
	color: #ffffff;
	background: #2E6DB4;
	padding: 6px 12px;
	border-radius: 6px;
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	margin-bottom: 8px;
	border-left: 4px solid #D8E64A;
}

.usoti-tie {
	border: 1px solid #e3eaf4;
	border-radius: 8px;
	margin: 6px 0;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.usoti-tie:hover {
	border-color: #2E6DB4;
}

.usoti-tie-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
}

.usoti-tie-row + .usoti-tie-row {
	border-top: 1px dashed #e3eaf4;
}

.usoti-tie-row.usoti-won {
	background: #f2f7f0;
}

.usoti-tie-row.usoti-won .usoti-player {
	font-weight: 700;
	color: #0B2A5B;
}

.usoti-tie-row.usoti-won .usoti-set {
	background: #3E7C4A;
	color: #ffffff;
}

/* Two-column bracket rounds on wide screens; single column on phones */
@media (min-width: 700px) {
	.usoti-round-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 12px;
	}
	.usoti-round-grid .usoti-tie {
		margin: 6px 0;
	}
}

.usoti-notice {
	padding: 14px 12px;
	color: #40506a;
	background: #f4f7fb;
	border-radius: 8px;
	margin: 8px 0;
}

/* ---- Small screens ---- */

@media (max-width: 480px) {
	.usoti-widget { font-size: 14px; border-radius: 10px; }
	.usoti-widget .usoti-title { font-size: 15px; padding: 11px 12px; }
	.usoti-body { padding: 8px; }
	.usoti-set { min-width: 20px; font-size: 12px; }
	.usoti-sets { max-width: 55%; }
	.usoti-row, .usoti-tie-row { padding: 7px 10px; }
	table.usoti-rankings th, table.usoti-rankings td { padding: 6px 8px; font-size: 13px; }
}

/* ---- ESPN-style bracket tree ---- */

.usoti-hidden { display: none !important; }

.usoti-draw-picker {
	margin: 4px 0 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.usoti-draw-label {
	font-size: 13px;
	font-weight: 600;
	color: #0B2A5B;
}

.usoti-draw-select {
	border: 1px solid #d7e0ee;
	border-radius: 999px;
	padding: 5px 14px;
	font-size: 13px;
	color: #0B2A5B;
	background: #ffffff;
}

.usoti-tree-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px 0 10px;
}

.usoti-tree-tab {
	border: 1px solid #d7e0ee;
	background: #eef3fa;
	color: #0B2A5B;
	font-size: 13px;
	font-weight: 600;
	padding: 5px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.usoti-tree-tab:hover {
	background: #2E6DB4;
	color: #ffffff;
}

.usoti-tree-tab.is-active {
	background: #0B2A5B;
	color: #ffffff;
	border-color: #0B2A5B;
	box-shadow: inset 0 -3px 0 #D8E64A;
}

.usoti-tree-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}

.usoti-tree {
	display: flex;
	align-items: stretch;
	min-width: max-content;
}

.usoti-tree-round {
	display: flex;
	flex-direction: column;
	width: 230px;
	flex: none;
	padding-right: 28px; /* room for connector elbows */
}

.usoti-tree-round-name {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5a6b84;
	padding: 4px 2px 8px;
}

.usoti-tree-col {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* Each pair evenly shares the column height; two matches sit at 25% and 75%,
   so the connector elbow aligns exactly with the next round's match center. */
.usoti-tree-pair {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	position: relative;
}

.usoti-tree-pair:not(.usoti-tree-pair-single)::after {
	content: "";
	position: absolute;
	right: -16px;
	top: 25%;
	bottom: 25%;
	width: 14px;
	border: 2px solid #c9d6e8;
	border-left: none;
	border-radius: 0 8px 8px 0;
}

.usoti-tree-pair-single {
	justify-content: center;
}

.usoti-tree-match {
	position: relative;
	background: #ffffff;
	border: 1px solid #e3eaf4;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(11, 42, 91, 0.05);
	margin: 6px 0;
	transition: border-color 0.15s ease;
}

.usoti-tree-match:hover {
	border-color: #2E6DB4;
}

/* Inbound stub from previous round's elbow */
.usoti-tree-in::before {
	content: "";
	position: absolute;
	left: -16px;
	top: 50%;
	width: 14px;
	height: 2px;
	background: #c9d6e8;
}

/* When a tab hides earlier rounds, the new first column drops its stubs */
.usoti-tree-first .usoti-tree-in::before {
	display: none;
}

.usoti-tree-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	min-height: 30px;
}

.usoti-tree-row + .usoti-tree-row {
	border-top: 1px dashed #e3eaf4;
}

.usoti-tree-row .usoti-player {
	font-size: 13px;
}

.usoti-tree-row.usoti-won .usoti-player {
	font-weight: 700;
	color: #0B2A5B;
}

.usoti-tree-row.usoti-won .usoti-set {
	background: #3E7C4A;
	color: #ffffff;
}

.usoti-seed {
	color: #5a6b84;
	font-size: 11px;
}

.usoti-tree-date {
	font-size: 11px;
	color: #8a97ab;
	padding: 3px 10px 5px;
	border-top: 1px solid #f0f4f9;
}

.usoti-tree-done .usoti-tree-date {
	color: #5a6b84;
}

@media (max-width: 480px) {
	.usoti-tree-round { width: 200px; padding-right: 24px; }
	.usoti-tree-tab { font-size: 12px; padding: 4px 11px; }
}

/* ---- Live update flash ---- */

@keyframes usoti-flash {
	0%, 55% {
		background-color: #D8E64A;
		color: #0B2A5B;
		box-shadow: 0 0 0 3px rgba(216, 230, 74, 0.45);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(216, 230, 74, 0);
	}
}

.usoti-set.usoti-flash,
.usoti-badge.usoti-flash {
	animation: usoti-flash 1.5s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
	.usoti-set.usoti-flash,
	.usoti-badge.usoti-flash {
		animation: none;
		outline: 2px solid #D8E64A; /* still visibly marked, without motion */
	}
}

/* ---- Show More button and hidden rankings rows ---- */

.usoti-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

tr.usoti-row-hidden {
	display: none;
}

.usoti-more-btn {
	display: block;
	width: 100%;
	margin: 10px 0 4px;
	padding: 10px 16px;
	background: #0B2A5B;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s ease;
	box-shadow: inset 0 -3px 0 #D8E64A;
}

.usoti-more-btn:hover {
	background: #2E6DB4;
}

.usoti-more-count {
	font-weight: 400;
	opacity: 0.8;
	font-size: 13px;
}

/* ---- Rankings: movement column, flags, Men/Women tabs ---- */

.usoti-mvcol {
	width: 44px;
	text-align: center !important;
	white-space: nowrap;
}

.usoti-mv {
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.usoti-mv-up { color: #3E7C4A; }
.usoti-mv-down { color: #b3413a; }
.usoti-mv-flat { color: #b6c1d1; }

.usoti-flag {
	font-size: 15px;
	line-height: 1;
}

.usoti-rank-tabs {
	display: flex;
	border-bottom: 2px solid #e3eaf4;
	margin: 2px 0 10px;
}

.usoti-rank-tab {
	flex: 1;
	background: none;
	border: none;
	padding: 10px 8px;
	font-size: 14px;
	font-weight: 700;
	color: #8a97ab;
	cursor: pointer;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.usoti-rank-tab:hover {
	color: #2E6DB4;
}

.usoti-rank-tab.is-active {
	color: #0B2A5B;
	border-bottom-color: #D8E64A;
}

@media (max-width: 480px) {
	.usoti-mvcol { width: 36px; }
	.usoti-mv { font-size: 10px; }
}

.usoti-updated {
	font-size: 12px;
	color: #8a97ab;
	font-style: italic;
	padding: 6px 2px 0;
}

/* ---- Heading resets (round names are h3 for SEO; themes must not restyle) ---- */

h3.usoti-tree-round-name,
h3.usoti-round-label {
	margin: 0;
	line-height: 1.3;
	font-family: inherit;
}

h3.usoti-tree-round-name {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5a6b84;
	padding: 4px 2px 8px;
}

h3.usoti-round-label {
	margin-bottom: 8px;
}

/* ---- Print stylesheet ---- */

@media print {
	/* Reveal everything: full rankings, both tour panels, all rounds */
	tr.usoti-row-hidden { display: table-row !important; }
	.usoti-hidden { display: block !important; }
	[data-usoti-rt-panel] { page-break-before: auto; }

	/* Label each panel comes from its sr-only caption, restore it in print */
	@page { margin: 1.5cm; }
	.usoti-sr-only {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		clip: auto;
		white-space: normal;
		font-weight: 700;
		padding: 8px 0 4px;
	}

	/* Hide interactive chrome: buttons, tabs, pickers */
	.usoti-more-btn,
	.usoti-rank-tabs,
	.usoti-tree-tabs,
	.usoti-draw-picker { display: none !important; }

	/* Bracket: let columns wrap instead of clipping in a scroll container */
	.usoti-tree-scroll { overflow: visible !important; }
	.usoti-tree { flex-wrap: wrap; }
	.usoti-tree-round { page-break-inside: avoid; }

	/* No animations or shadows on paper */
	.usoti-widget { box-shadow: none; }
	.usoti-badge-live::before { animation: none !important; }
	.usoti-match, .usoti-tie, .usoti-tree-match { page-break-inside: avoid; }
}

/* ---- Theme-conflict armor for buttons and tabs ----
   Many themes style all button elements globally with their own background
   and text colors, which can leave our button text invisible (same color as
   its background). These rules pin the plugin's palette. */

.usoti-widget .usoti-more-btn {
	background: #0B2A5B !important;
	color: #ffffff !important;
	border: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	box-shadow: inset 0 -3px 0 #D8E64A !important;
}

.usoti-widget .usoti-more-btn:hover,
.usoti-widget .usoti-more-btn:focus {
	background: #2E6DB4 !important;
	color: #ffffff !important;
}

.usoti-widget .usoti-more-btn .usoti-more-count {
	color: #ffffff !important;
}

.usoti-widget .usoti-rank-tab {
	background: transparent !important;
	color: #8a97ab !important;
	border: none !important;
	border-bottom: 3px solid transparent !important;
	text-transform: none !important;
	box-shadow: none !important;
}

.usoti-widget .usoti-rank-tab:hover,
.usoti-widget .usoti-rank-tab:focus {
	color: #2E6DB4 !important;
	background: transparent !important;
}

.usoti-widget .usoti-rank-tab.is-active {
	color: #0B2A5B !important;
	border-bottom-color: #D8E64A !important;
}

.usoti-widget .usoti-tree-tab {
	background: #eef3fa !important;
	color: #0B2A5B !important;
	border: 1px solid #d7e0ee !important;
	text-transform: none !important;
	box-shadow: none !important;
}

.usoti-widget .usoti-tree-tab:hover,
.usoti-widget .usoti-tree-tab:focus {
	background: #2E6DB4 !important;
	color: #ffffff !important;
}

.usoti-widget .usoti-tree-tab.is-active {
	background: #0B2A5B !important;
	color: #ffffff !important;
	border-color: #0B2A5B !important;
	box-shadow: inset 0 -3px 0 #D8E64A !important;
}

/* ---- ESPN-style header labels ---- */

table.usoti-rankings th {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 12px;
}

table.usoti-rankings th.usoti-mvcol {
	text-align: center !important;
	font-size: 13px;
}