/**
 * Qram Velikosti — widget doporuceni velikosti boty (Mylerie.cz)
 * Styly pro sizes.js. Prefix .qram-vel-* aby nekolidovalo se Shoptet sablonou.
 */

.qram-vel-widget {
	--qram-vel-bg: #faf8f5;
	--qram-vel-card: #ffffff;
	--qram-vel-accent: #9f8373;
	--qram-vel-accent-light: #f5eeea;
	--qram-vel-accent-dark: #7a6355;
	--qram-vel-text: #2d2a26;
	--qram-vel-muted: #8a857e;
	--qram-vel-border: #e8e4df;
	--qram-vel-shadow: 0 2px 16px rgba(45,42,38,.07);
	--qram-vel-radius: 12px;
	--qram-vel-ideal: #1a7a3a;
	--qram-vel-ideal-bg: #eaf7ee;
	--qram-vel-hranicni: #b07d10;
	--qram-vel-hranicni-bg: #fef6e0;
	/* font-family NENI nastaven — widget dedi typografii Shoptet sablony */
	color: var(--qram-vel-text);
	max-width: 820px;
	margin: 20px auto 15px;
	padding: 4px;
	box-sizing: border-box;
	line-height: 1.5;
}
.qram-vel-widget *, .qram-vel-widget *::before, .qram-vel-widget *::after { box-sizing: border-box; }
.qram-vel-title { font-size: 1.7rem; font-weight: 700; margin: 0 0 4px; }
.qram-vel-subtitle { color: #000; font-size: 1.3rem; margin: 0 0 18px; }

/* Univerzalni helper na skryti elementu */
.qram-vel-widget .qram-vel-hidden { display: none !important; }

/* Akce pod result boxem — chip tlacitka vedle sebe, vlevo, vyplnaji sirku cardu */
.qram-vel-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 14px;
}
.qram-vel-chip {
	padding: 5px 10px;
	background: var(--qram-vel-card);
	border: 1px solid var(--qram-vel-border);
	border-radius: 16px;
	color: var(--qram-vel-muted);
	font-family: inherit;
	font-size: 1.1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, border-color .15s, color .15s;
	white-space: nowrap;
}
.qram-vel-chip:hover {
	background: var(--qram-vel-accent-light);
	border-color: var(--qram-vel-accent);
	color: var(--qram-vel-accent-dark);
}
.qram-vel-chip.qram-vel-chip-active {
	background: var(--qram-vel-accent);
	border-color: var(--qram-vel-accent-dark);
	color: #fff;
}

.qram-vel-card {
	position: relative;
	background: var(--qram-vel-card);
	border: 1px solid var(--qram-vel-border);
	border-radius: var(--qram-vel-radius);
	padding: 26px 26px 22px;
	margin-bottom: 18px;
	box-shadow: var(--qram-vel-shadow);
}
.qram-vel-label {
	display: block; font-size: 1.2rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
	color: var(--qram-vel-muted); text-align: center; margin-bottom: 6px;
}
.qram-vel-value {
	text-align: center; font-size: 3rem; font-weight: 700;
	color: var(--qram-vel-accent-dark); line-height: 1.1; margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
}
.qram-vel-value .qram-vel-unit {
	font-size: 1.5rem; color: var(--qram-vel-muted); font-weight: 600; margin-left: 4px;
}
.qram-vel-slider-wrap { padding: 0 14px; margin-bottom: 8px; }
.qram-vel-ticks {
	display: flex; justify-content: space-between;
	font-size: 1.15rem; color: var(--qram-vel-muted);
	padding: 0; margin-top: 6px; font-variant-numeric: tabular-nums;
}

.qram-vel-widget input[type="range"].qram-vel-main-slider {
	-webkit-appearance: none; appearance: none; width: 100%; height: 10px;
	border-radius: 5px; background: var(--qram-vel-border); outline: none; cursor: pointer;
}
.qram-vel-widget input[type="range"].qram-vel-main-slider::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 28px; height: 28px; border-radius: 50%;
	background: var(--qram-vel-accent); border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(159,131,115,.35); cursor: grab; transition: transform .1s;
}
.qram-vel-widget input[type="range"].qram-vel-main-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.1); }
.qram-vel-widget input[type="range"].qram-vel-main-slider::-moz-range-thumb {
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--qram-vel-accent); border: 3px solid #fff;
	box-shadow: 0 2px 8px rgba(159,131,115,.35); cursor: grab;
}

.qram-vel-nadmerek { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--qram-vel-border); }
.qram-vel-nad-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.qram-vel-nad-label {
	font-size: 1.15rem; font-weight: 700; color: var(--qram-vel-muted);
	text-transform: uppercase; letter-spacing: .03em;
}
.qram-vel-reset {
	padding: 4px 10px; border: 1px solid var(--qram-vel-border);
	border-radius: 5px; background: var(--qram-vel-card);
	font-family: inherit; font-size: 1.15rem; font-weight: 600;
	cursor: pointer; transition: all .15s; color: var(--qram-vel-muted);
}
.qram-vel-reset:hover { border-color: var(--qram-vel-accent); color: var(--qram-vel-accent-dark); }
.qram-vel-reset:disabled { opacity: .35; cursor: default; border-color: var(--qram-vel-border); color: var(--qram-vel-muted); }
.qram-vel-nad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qram-vel-nad-item label { display: block; font-size: 1.1rem; color: var(--qram-vel-muted); margin-bottom: 4px; }
.qram-vel-nad-val {
	font-size: 1.4rem; font-weight: 700; color: var(--qram-vel-accent-dark);
	margin-bottom: 2px; font-variant-numeric: tabular-nums;
}

.qram-vel-mini-wrap { position: relative; padding: 18px 8px 0; }
.qram-vel-marker {
	position: absolute; top: 0;
	left: calc(8px + (100% - 16px) * var(--qram-vel-default-pos, 0));
	transform: translateX(-50%);
	font-size: 1.1rem; font-weight: 700;
	color: var(--qram-vel-accent-dark);
	background: var(--qram-vel-accent-light);
	padding: 1px 5px; border-radius: 8px;
	white-space: nowrap; pointer-events: none; line-height: 1.2;
}
.qram-vel-marker::after {
	content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
	width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
	border-top: 5px solid var(--qram-vel-accent);
}
.qram-vel-widget input[type="range"].qram-vel-mini-slider {
	-webkit-appearance: none; appearance: none; width: 100%; height: 5px;
	border-radius: 3px; background: var(--qram-vel-border); outline: none; cursor: pointer;
}
.qram-vel-widget input[type="range"].qram-vel-mini-slider::-webkit-slider-thumb {
	-webkit-appearance: none; appearance: none;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--qram-vel-accent); border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(159,131,115,.4); cursor: pointer;
}
.qram-vel-widget input[type="range"].qram-vel-mini-slider::-moz-range-thumb {
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--qram-vel-accent); border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(159,131,115,.4); cursor: pointer;
}
.qram-vel-nad-note { font-size: 1.1rem; color: var(--qram-vel-muted); text-align: center; margin-top: 10px; }
.qram-vel-nad-note.qram-vel-changed { color: #9a7b1c; }

.qram-vel-result {
	margin-top: 18px; padding: 12px 16px; border-radius: 10px; text-align: center;
	background: var(--qram-vel-ideal-bg); border: 2px solid var(--qram-vel-ideal);
	transition: background .25s, border-color .25s;
	/* fixni vyska aby pri prepnuti pending -> result nedoslo k layout shiftu */
	min-height: 85px;
	display: flex; flex-direction: column; justify-content: center;
}
.qram-vel-result.qram-vel-result-nomatch { background: #fff; border-color: #e88; }
.qram-vel-result.qram-vel-result-pending { background: var(--qram-vel-bg); border-color: var(--qram-vel-border); color: var(--qram-vel-muted); }
.qram-vel-result-title { font-weight: 700; font-size: 1.7rem; margin-bottom: 6px; line-height: 1.3; }
.qram-vel-result-title .qram-vel-rec-size {
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--qram-vel-ideal);
	margin: 0 4px;
	letter-spacing: .01em;
	font-variant-numeric: tabular-nums;
	vertical-align: -.05em;
}
.qram-vel-result-detail { font-size: 1.25rem; color: var(--qram-vel-muted); line-height: 1.5; }

.qram-vel-table-card {
	background: var(--qram-vel-card); border: 1px solid var(--qram-vel-border);
	border-radius: var(--qram-vel-radius); overflow: hidden;
	box-shadow: var(--qram-vel-shadow); margin-bottom: 18px;
}
/* table-layout: fixed -> sirky sloupcu se NEMENI pri zmene obsahu (z prazdneho na cislo) */
.qram-vel-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qram-vel-table thead th {
	padding: 6px 6px; font-size: 1.1rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .02em; line-height: 1.2;
	color: #fff; background: #9f8373; border: 1px solid var(--qram-vel-accent-dark); text-align: center;
}
.qram-vel-table col.qram-vel-col-check,
.qram-vel-table th.qram-vel-col-check, .qram-vel-table td.qram-vel-col-check {
	width: 32px; padding: 0; text-align: center;
}
.qram-vel-table td.qram-vel-col-check { font-size: 1.65rem; color: var(--qram-vel-ideal); }
.qram-vel-table tbody td {
	padding: 5px 8px; text-align: center; font-size: 1.45rem; line-height: 1.25;
	border: 1px solid var(--qram-vel-border); transition: background .25s;
}
.qram-vel-row-ideal { background: var(--qram-vel-ideal-bg) !important; }
.qram-vel-row-ideal td.qram-vel-nad-cell, .qram-vel-row-ideal td.qram-vel-vys-cell { font-weight: 700; color: var(--qram-vel-ideal); }
.qram-vel-row-hranicni { background: var(--qram-vel-hranicni-bg) !important; }
.qram-vel-row-hranicni td.qram-vel-nad-cell, .qram-vel-row-hranicni td.qram-vel-vys-cell { color: var(--qram-vel-hranicni); font-weight: 700; }
/* Bota mala/velka — nezvyraznene (netucne, mute color), at nestrhne pozornost */
.qram-vel-row-mala td.qram-vel-vys-cell, .qram-vel-row-velka td.qram-vel-vys-cell { color: #888; font-weight: 400; }
.qram-vel-nad-cell { font-weight: 700; font-variant-numeric: tabular-nums; }
.qram-vel-nad-red { color: #cc3333 !important; }
.qram-vel-vys-cell { font-weight: 700; font-size: 1.35rem; white-space: nowrap; }
.qram-vel-legend {
	padding: 10px 22px; font-size: 1.15rem; color: var(--qram-vel-muted);
	border-top: 1px solid var(--qram-vel-border); line-height: 2;
}
.qram-vel-legend-item { display: inline-flex; align-items: center; margin-right: 14px; }
.qram-vel-legend-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 4px; }

.qram-vel-howto {
	margin-top: 18px;
	padding: 16px 20px; background: var(--qram-vel-card);
	border: 1px solid var(--qram-vel-border); border-radius: var(--qram-vel-radius);
	box-shadow: var(--qram-vel-shadow);
}
.qram-vel-howto h4 { font-size: 1.35rem; font-weight: 700; margin: 0 0 8px; }
.qram-vel-howto ol { padding-left: 20px; font-size: 1.25rem; color: var(--qram-vel-muted); line-height: 1.8; margin: 0; }
.qram-vel-formula { font-weight: 700; color: var(--qram-vel-text); }

@media (max-width: 580px) {
	.qram-vel-card { padding: 20px 16px; }
	.qram-vel-actions { gap: 6px; }
	.qram-vel-chip { padding: 4px 8px; font-size: 1.02rem; }
	.qram-vel-value { font-size: 2.5rem; }
	.qram-vel-value .qram-vel-unit { font-size: 1.35rem; }
	.qram-vel-nad-grid { gap: 10px; }
	.qram-vel-result-title { font-size: 1.45rem; }
	.qram-vel-result-title .qram-vel-rec-size { font-size: 2.25rem; }

	/* MOBILE TABULKA — kompaktni vzhled, header se zalamuje */
	.qram-vel-table thead th {
		padding: 6px 3px; font-size: .8rem;
		text-transform: none; letter-spacing: 0;
		line-height: 1.15; word-break: keep-all;
	}
	.qram-vel-table tbody td {
		padding: 5px 3px; font-size: 1.1rem;
	}
	.qram-vel-table td.qram-vel-col-check { font-size: 1.3rem; }
	.qram-vel-vys-cell {
		font-size: .92rem;
		white-space: normal;
		line-height: 1.2;
	}
	.qram-vel-table col:nth-child(1) { width: 26px; }
	.qram-vel-table col:nth-child(2) { width: 15%; }
	.qram-vel-table col:nth-child(3) { width: 12%; }
	.qram-vel-table col:nth-child(4) { width: 14%; }
	.qram-vel-table col:nth-child(5) { width: 19%; }
}