/* CW Referral Agents — frontend styles
   Brand: dark ink + gold accent, Playfair/Cormorant display, DM Sans body */

.cwra-wrap {
	--cwra-ink: #14141a;
	--cwra-ink-soft: #2a2a33;
	--cwra-gold: #c9a84c;
	--cwra-gold-bright: #E8A020;
	--cwra-border: #e4e0d6;
	--cwra-bg: #fbfaf7;
	font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	max-width: 560px;
	margin: 0 auto;
	background: var(--cwra-bg);
	border: 1px solid var(--cwra-border);
	border-radius: 10px;
	padding: 2.25rem;
	box-shadow: 0 10px 40px rgba(20,20,26,0.06);
}

.cwra-heading {
	font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
	font-size: 1.65rem;
	font-weight: 600;
	color: var(--cwra-ink);
	margin: 0 0 0.35rem;
}

.cwra-subheading {
	font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
	font-size: 1.15rem;
	color: var(--cwra-ink);
	margin: 2rem 0 0.75rem;
}

.cwra-subtext {
	color: #5c5c66;
	font-size: 0.92rem;
	margin: 0 0 1.5rem;
	line-height: 1.5;
}

.cwra-notice {
	color: var(--cwra-ink);
	font-size: 0.95rem;
}

/* progress dots */
.cwra-progress {
	display: flex;
	gap: 8px;
	margin-bottom: 1.75rem;
}
.cwra-step-dot {
	height: 4px;
	flex: 1;
	background: var(--cwra-border);
	border-radius: 2px;
	transition: background 0.25s ease;
}
.cwra-step-dot.is-active,
.cwra-step-dot.is-complete {
	background: linear-gradient(90deg, var(--cwra-gold), var(--cwra-gold-bright));
}

/* steps */
.cwra-step { display: none; }
.cwra-step.is-active { display: block; animation: cwra-fade 0.25s ease; }
@keyframes cwra-fade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

.cwra-field-row { display: flex; gap: 1rem; }
.cwra-field-row .cwra-field { flex: 1; }

.cwra-field { margin-bottom: 1.1rem; }
.cwra-field label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--cwra-ink-soft);
	margin-bottom: 0.4rem;
	text-transform: uppercase;
}
.cwra-field input[type="text"],
.cwra-field input[type="email"],
.cwra-field input[type="tel"],
.cwra-field select,
.cwra-field textarea {
	width: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--cwra-border);
	border-radius: 6px;
	font-size: 0.95rem;
	font-family: inherit;
	background: #fff;
	color: var(--cwra-ink);
	box-sizing: border-box;
}
.cwra-field input:focus,
.cwra-field select:focus,
.cwra-field textarea:focus {
	outline: none;
	border-color: var(--cwra-gold);
	box-shadow: 0 0 0 3px rgba(201,168,76,0.18);
}

/* commission slider */
.cwra-slider-block { margin: 1.5rem 0 2rem; text-align: center; }
.cwra-slider-value {
	font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--cwra-ink);
	margin-bottom: 0.75rem;
}
.cwra-slider-value span { color: var(--cwra-gold-bright); }

.cwra-slider-block input[type="range"] {
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--cwra-gold) var(--cwra-fill, 50%), var(--cwra-border) var(--cwra-fill, 50%));
	margin: 0.5rem 0;
}
.cwra-slider-block input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cwra-ink);
	border: 3px solid var(--cwra-gold-bright);
	cursor: pointer;
	margin-top: -8px;
}
.cwra-slider-block input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--cwra-ink);
	border: 3px solid var(--cwra-gold-bright);
	cursor: pointer;
}
.cwra-slider-bounds {
	display: flex;
	justify-content: space-between;
	font-size: 0.78rem;
	color: #8a8a94;
}

/* buttons */
.cwra-btn-row { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; }
.cwra-btn {
	font-family: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 0.75rem 1.6rem;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	background: var(--cwra-ink);
	color: #fff;
	transition: transform 0.15s ease, background 0.2s ease;
}
.cwra-btn:hover { background: #000; transform: translateY(-1px); }
.cwra-btn-ghost {
	background: transparent;
	color: var(--cwra-ink-soft);
	border: 1px solid var(--cwra-border);
}
.cwra-btn-ghost:hover { background: #fff; }
.cwra-next, .cwra-submit { margin-left: auto; background: linear-gradient(90deg, var(--cwra-ink), var(--cwra-ink-soft)); }
.cwra-submit { background: linear-gradient(90deg, var(--cwra-gold), var(--cwra-gold-bright)); color: var(--cwra-ink); }

.cwra-error {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: #fdeceb;
	border: 1px solid #f2b8b5;
	color: #8a2e28;
	border-radius: 6px;
	font-size: 0.88rem;
}

/* tracking link box */
.cwra-link-box {
	display: flex;
	gap: 0.5rem;
	margin: 1rem 0 0.5rem;
}
.cwra-link-box input {
	flex: 1;
	padding: 0.65rem 0.8rem;
	border-radius: 6px;
	border: 1px solid var(--cwra-border);
	background: #fff;
	font-size: 0.9rem;
	color: var(--cwra-ink-soft);
}
.cwra-copy {
	background: var(--cwra-gold);
	color: var(--cwra-ink);
	white-space: nowrap;
}
.cwra-copy:hover { background: var(--cwra-gold-bright); }
.cwra-copy.is-copied { background: #4caf6b; color: #fff; }

/* dashboard */
.cwra-dashboard { max-width: 720px; }
.cwra-dash-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 1rem;
	border-bottom: 1px solid var(--cwra-border);
	padding-bottom: 1.25rem;
	margin-bottom: 1.25rem;
}
.cwra-dash-stat { text-align: right; }
.cwra-dash-stat-label { display: block; font-size: 0.75rem; text-transform: uppercase; color: #8a8a94; letter-spacing: 0.03em; }
.cwra-dash-stat-value { font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; font-size: 1.8rem; color: var(--cwra-gold-bright); font-weight: 700; }

.cwra-inline-form { margin-bottom: 1.5rem; }

.cwra-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.cwra-table th, .cwra-table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--cwra-border); }
.cwra-table th { text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.03em; color: #8a8a94; }
.cwra-empty { text-align: center; color: #8a8a94; padding: 1.5rem 0; }

.cwra-badge {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.cwra-badge-tracked, .cwra-badge-new { background: #eef1fb; color: #3c4fbf; }
.cwra-badge-manual, .cwra-badge-working { background: #fff4e0; color: #a5670a; }
.cwra-badge-won { background: #e6f6ea; color: #1e7d3c; }
.cwra-badge-lost { background: #fdeceb; color: #8a2e28; }

@media (max-width: 480px) {
	.cwra-wrap { padding: 1.5rem; }
	.cwra-field-row { flex-direction: column; gap: 0; }
}