/* pages/commissions.css */

.pricing-overview { display: grid; gap: 1rem; }
.pricing-row{
	display:flex; align-items:center; justify-content:space-between;
	padding: 0.5rem 0.5rem;
	border-radius: var(--radius-xl);
	background: rgba(0,0,0,0.55);
	box-shadow: var(--shadow-subtle);
}
.pricing-left{ display:flex; flex-direction:column; gap:.25rem; }
.pricing-right{ font-weight:700; letter-spacing:.02em; }
.pricing-sub{ color: var(--text-soft); font-size:.95rem; }
.muted{ color: var(--text-soft); font-weight:600; }

.pricing-divider{
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(255,255,255,0.10), transparent);
	margin: .25rem 0;
}

.builder { display:grid; gap: 1.25rem; }

.builder-row { display:grid; gap: .7rem; }
.builder-label { font-weight: 700; letter-spacing: .02em; }

.builder-choice{
	display:flex; gap:.75rem; flex-wrap:wrap;
}

.builder-control{
	display:flex; align-items:center; gap: 1rem; flex-wrap:wrap;
}

.range{
	width: min(520px, 100%);
	height: 14px;					 /* bigger */
	accent-color: var(--accent);
}
.range-readout{
	font-weight:800;
	padding: .45rem .75rem;
	border-radius: var(--radius-pill);
	background: rgba(0,0,0,0.55);
	border: 1px solid rgba(255,255,255,0.10);
}

.builder-checks{ gap: .85rem; }
.check{
	display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
	padding: .85rem 1rem;
	border-radius: var(--radius-xl);
	background: rgba(0,0,0,0.45);
	border: 1px solid rgba(255,255,255,0.10);
}
.check input{ width: 20px; height: 20px; transform: scale(1.15); }
.tag{
	font-style: normal;
	color: var(--text-soft);
	font-weight: 700;
	padding: .25rem .55rem;
	border-radius: var(--radius-pill);
	background: rgba(255,255,255,0.06);
}

.textarea{
	width: 100%;
	font-size: 1rem;
	line-height: 1.5;
	padding: 1rem 1rem;
	border-radius: var(--radius-xl);
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.55);
	color: var(--text-main);
	resize: none;
}
.textarea::placeholder{ color: rgba(255,255,255,0.35); }

.builder-hint{
	color: var(--text-soft);
	font-size: .95rem;
}

.estimate{
	display:flex; align-items:center; justify-content:space-between; gap: 1rem;
	padding: 1.1rem 1.25rem;
	border-radius: var(--radius-xl);
	background: rgba(0,0,0,0.55);
	border: 1px solid rgba(255,255,255,0.10);
}
.estimate-title{ font-weight: 800; font-size: 1.05rem; }
.estimate-sub{ color: var(--text-soft); font-size: .95rem; margin-top:.2rem; }
.estimate-right{ font-weight: 900; font-size: 1.35rem; letter-spacing: .02em; }

.email-actions{ display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.75rem; }

.link-cta--ghost{
	background: rgba(0,0,0,0.35) !important;
	color: var(--text-main) !important;
	border: 2px solid rgba(255,255,255,0.18) !important;
}

.email-preview{
	margin-top: 1rem;
	padding: 1rem 1rem;
	font-size: 1rem;
	border-radius: var(--radius-xl);
	background: rgba(0,0,0,0.65);
	border: 1px solid rgba(255,255,255,0.10);
	color: var(--text-main);
	overflow:auto;
	max-height: 420px;
	white-space: pre-wrap;
}

.name-mention-details{
	margin-top: .65rem;
	padding-left: 3.1rem; /* lines up under checkbox text */
	display: grid;
	gap: .45rem;
}

.subfield-label{
	font-weight: 700;
	color: var(--text-main);
	letter-spacing: .01em;
}

.text-input{
	width: min(520px, 100%);
	font-size: 1rem;
	padding: .85rem 1rem;
	border-radius: var(--radius-xl);
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.55);
	color: var(--text-main);
}

.text-input::placeholder{
	color: rgba(255,255,255,0.35);
}

.text-input::internal-autofill-selected {
    width: min(520px, 100%);
	font-size: 1rem;
	padding: .85rem 1rem;
	border-radius: var(--radius-xl);
	border: 1px solid rgba(255,255,255,0.12);
	background: rgba(0,0,0,0.55);
	color: var(--text-main);
}

.segmented{
	display: inline-flex;
	gap: .5rem;
	padding: .4rem;
	border-radius: var(--radius-pill);
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.10);
	box-shadow: var(--shadow-subtle);
}

.segmented__opt{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: .7rem 1.05rem;
	border-radius: var(--radius-pill);
	cursor: pointer;
	user-select: none;
	font-weight: 650;
	letter-spacing: .01em;
	color: var(--text-soft);
	transition: transform var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.segmented__opt input{
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.segmented__opt:has(input:checked){
	color: var(--text-main);
	background: linear-gradient(135deg, var(--nav-pill-active-left), var(--nav-pill-active-right));
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.14),
		0 14px 28px rgba(0,0,0,0.55);
}

.segmented__opt:has(input:checked):active{
	transform: scale(0.98);
}

.builder-hint{
	margin-top: .65rem;
	color: var(--text-muted);
	line-height: 1.6;
}

/* =========================
	 Range slider (Commission)
	 ========================= */

:root{
	/* slider sizing */
	--range-track-h: 10px;
	--range-thumb: 26px;

	/* slider colours (theme-friendly) */
	--range-track: rgba(255,255,255,0.14);
	--range-track-soft: rgba(255,255,255,0.08);
	--range-fill: var(--accent);
	--range-fill-soft: var(--accent-soft);
	--range-thumb-bg: #0b0c14; /* dark knob */
	--range-thumb-border: rgba(255,255,255,0.18);
	--range-glow: rgba(255, 79, 174, 0.35); /* overridden by theme if you wish */
}

/* wrap if you have one; optional */
.commission-range {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;
	align-items: center;
}

/* the pill that shows "30 min" */
#lengthValue {
	padding: 0.55rem 1rem;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.35);
	color: var(--text-main);
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: var(--shadow-subtle);
}

/* The slider itself */
#lengthRange {
	width: 100%;
	height: var(--range-thumb);
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	outline: none;
}

/* Track */
#lengthRange::-webkit-slider-runnable-track {
	height: var(--range-track-h);
	border-radius: var(--radius-pill);
	background:
		linear-gradient(90deg,
			var(--range-fill) 0%,
			var(--range-fill) var(--range-pct, 50%),
			var(--range-track) var(--range-pct, 50%),
			var(--range-track) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.12),
		0 10px 28px rgba(0,0,0,0.55);
}

#lengthRange::-moz-range-track {
	height: var(--range-track-h);
	border-radius: var(--radius-pill);
	background: var(--range-track);
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}

/* Fill (Firefox uses a separate pseudo element) */
#lengthRange::-moz-range-progress {
	height: var(--range-track-h);
	border-radius: var(--radius-pill);
	background: linear-gradient(90deg, var(--range-fill), rgba(255,255,255,0.10));
	box-shadow: 0 0 18px var(--range-glow);
}

/* Thumb */
#lengthRange::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: var(--range-thumb);
	height: var(--range-thumb);
	border-radius: 999px;
	margin-top: calc((var(--range-track-h) - var(--range-thumb)) / 2);
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 55%),
		linear-gradient(180deg, var(--accent-alt), var(--accent-alt2)),
		var(--range-thumb-bg);
	border: 1px solid var(--range-thumb-border);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.08),
		0 10px 26px rgba(0,0,0,0.75),
		0 0 18px var(--range-glow);
	transition: transform var(--transition-fast), filter var(--transition-fast);
}

#lengthRange::-moz-range-thumb {
	width: var(--range-thumb);
	height: var(--range-thumb);
	border-radius: 999px;
	background:
		radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 55%),
		linear-gradient(180deg, rgba(255,255,255,0.10), rgba(0,0,0,0.2)),
		var(--range-thumb-bg);
	border: 1px solid var(--range-thumb-border);
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.08),
		0 10px 26px rgba(0,0,0,0.75),
		0 0 18px var(--range-glow);
	transition: transform var(--transition-fast), filter var(--transition-fast);
}

/* Hover/Focus */
#lengthRange:hover::-webkit-slider-thumb,
#lengthRange:focus-visible::-webkit-slider-thumb,
#lengthRange:hover::-moz-range-thumb,
#lengthRange:focus-visible::-moz-range-thumb {
	transform: scale(1.06);
	filter: brightness(1.05);
}

#lengthRange:focus-visible {
	outline: none;
}

/* Disabled (package deal locks it) */
#lengthRange:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

#lengthRange:disabled::-webkit-slider-thumb,
#lengthRange:disabled::-moz-range-thumb {
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.06),
		0 10px 22px rgba(0,0,0,0.55);
}

/* ===== Checkbox Row (your existing structure) ===== */

.check{
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1.05rem 1.2rem;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(0,0,0,0.25);
	box-shadow: var(--shadow-subtle);
	cursor: pointer;
	user-select: none;
	transition:
		background var(--transition-fast),
		border-color var(--transition-fast),
		transform var(--transition-fast),
		box-shadow var(--transition-fast);
}

.check:hover{
	background: rgba(0,0,0,0.35);
	border-color: rgba(255,255,255,0.18);
	transform: translateY(-1px);
}

.check span:not(.check-box){
	color: var(--text-main);
	font-weight: 650;
}

.check .tag{
	margin-left: auto;
	padding: 0.4rem 0.75rem;
	border-radius: var(--radius-pill);
	border: 1px solid rgba(255,255,255,0.10);
	background: rgba(255,255,255,0.04);
	color: var(--text-muted);
	font-weight: 650;
	font-style: normal;
}

/* hide native checkbox but keep it accessible */
.check > input[type="checkbox"]{
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* custom square */
.check-box{
	width: 22px;
	height: 22px;
	border-radius: 7px;
	border: 2px solid rgba(255,255,255,0.45);
	background: rgba(0,0,0,0.35);
	display: grid;
	place-items: center;
	flex: 0 0 auto;
}

.check-box::after{
	content:"";
	width: 10px;
	height: 6px;
	border-left: 3px solid rgba(255,255,255,0.95);
	border-bottom: 3px solid rgba(255,255,255,0.95);
	transform: rotate(-45deg);
	opacity: 0;
	translate: 0 -1px;
	transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* checked state (works everywhere, no :has needed) */
.check > input[type="checkbox"]:checked + .check-box{
	border-color: rgba(255,255,255,0.72);
	background:
		linear-gradient(135deg, rgba(163,125,255,0.35), rgba(255,79,174,0.35)),
		rgba(0,0,0,0.25);
	box-shadow: 0 0 16px rgba(255,79,174,0.25);
}

.check > input[type="checkbox"]:checked + .check-box::after{
	opacity: 1;
}

/* focus ring */
.check > input[type="checkbox"]:focus-visible + .check-box{
	outline: none;
	box-shadow:
		0 0 0 3px rgba(255,255,255,0.08),
		0 0 0 6px var(--accent-soft);
}

/* Optional: make the whole pill “active” when checked (modern browsers) */
@supports selector(.check:has(input:checked)) {
	.check:has(input:checked){
		border-color: rgba(255,255,255,0.18);
		background:
			radial-gradient(circle at 15% 0%, rgba(255,255,255,0.12), transparent 55%),
			rgba(0,0,0,0.35);
	}
}

/* TEST */

/* --- Commission Status Badge --- */
.commission-status{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  margin: 1.2rem 0 1.6rem;
}

.commission-status__badge{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.55rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.55);
  box-shadow: var(--shadow-subtle);
  color: var(--text-main);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.commission-status__badge::before{
  content:"";
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

.commission-status__badge.is-open{
  border-color: rgba(255, 79, 174, 0.35);
}

.commission-status__badge.is-open::before{
  background: var(--accent);
  box-shadow:
    0 0 0 3px rgba(255,79,174,0.15),
    0 0 18px rgba(255,79,174,0.35);
}

.commission-status__badge.is-closed{
  border-color: rgba(255,255,255,0.18);
  opacity: .9;
}

.commission-status__badge.is-closed::before{
  background: rgba(200,200,200,0.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}

.commission-status__badge.is-loading{
  opacity: .8;
}

.commission-status__note{
  color: var(--text-soft);
  max-width: 52rem;
  text-align:center;
  line-height: 1.6;
  margin: 0;
}

.comm-heading {
	font-size: clamp(1rem, 4vw + 1rem, 2rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--text-soft);
	text-align: center;
	margin: 2.2rem 0 1.2rem;
}

.comm-heading::before,
.comm-heading::after {
	content: "";
	display: inline-block;
	width: 6rem;
	height: 10px;
	background: linear-gradient(to right, transparent, rgba(255,255,255,0.25));
	vertical-align: middle;
	margin: 0 0.75rem;
}

.comm-heading::after {
	transform: scaleX(-1);
}

/* Optional: visually dim/lock the builder when closed */
.commission-builder.is-disabled{
  opacity: .55;
  pointer-events: none;
  filter: grayscale(0.15);
}

a[aria-disabled="true"]{
  opacity: .6;
  cursor: not-allowed;
}