/**
 * Wrestletix Tools & Calculators Stylesheet
 * Strict Light Mode Only
 *
 * @package WrestletixTools
 */

:root {
	color-scheme: light;
	--wtx-tool-blue: #1D4ED8;
	--wtx-tool-blue-hover: #1E40AF;
	--wtx-tool-blue-light: #EFF6FF;
	--wtx-tool-navy: #0F172A;
	--wtx-tool-slate: #334155;
	--wtx-tool-gray-100: #F8FAFC;
	--wtx-tool-gray-200: #E2E8F0;
	--wtx-tool-gray-300: #CBD5E1;
	--wtx-tool-gray-400: #94A3B8;
	--wtx-tool-white: #FFFFFF;
	--wtx-tool-success: #059669;
	--wtx-tool-success-bg: #ECFDF5;
	--wtx-tool-warning: #D97706;
	--wtx-tool-warning-bg: #FFFBEB;
	--wtx-tool-danger: #DC2626;
	--wtx-tool-danger-bg: #FEF2F2;
	--wtx-tool-radius-sm: 6px;
	--wtx-tool-radius-md: 10px;
	--wtx-tool-radius-lg: 16px;
	--wtx-tool-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--wtx-tool-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
	--wtx-tool-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.03);
}

/* Tool Container */
.wtx-tool-wrapper {
	background: var(--wtx-tool-white);
	border: 1px solid var(--wtx-tool-gray-200);
	border-radius: var(--wtx-tool-radius-lg);
	box-shadow: var(--wtx-tool-shadow-md);
	padding: clamp(1rem, 3.5vw, 2.25rem);
	margin: 2rem 0;
	color: var(--wtx-tool-navy);
	box-sizing: border-box;
	max-width: 100%;
}


.wtx-tool-header {
	margin-bottom: 1.75rem;
}

.wtx-tool-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wtx-tool-blue-light);
	color: var(--wtx-tool-blue);
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 10px;
	border-radius: 9999px;
	margin-bottom: 0.75rem;
}

.wtx-tool-title {
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--wtx-tool-navy);
	margin: 0 0 0.5rem 0;
	line-height: 1.25;
}

.wtx-tool-desc {
	font-size: 1rem;
	color: var(--wtx-tool-slate);
	margin: 0;
	line-height: 1.5;
}

/* Presets Bar */
.wtx-presets-bar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	background: var(--wtx-tool-gray-100);
	border: 1px solid var(--wtx-tool-gray-200);
	padding: 8px 12px;
	border-radius: var(--wtx-tool-radius-md);
	margin-bottom: 1.75rem;
}

.wtx-presets-label {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--wtx-tool-slate);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wtx-presets-group {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wtx-preset-btn {
	background: var(--wtx-tool-white);
	border: 1px solid var(--wtx-tool-gray-300);
	color: var(--wtx-tool-navy);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 5px 12px;
	border-radius: var(--wtx-tool-radius-sm);
	cursor: pointer;
	transition: all 0.15s ease-in-out;
}

.wtx-preset-btn:hover {
	border-color: var(--wtx-tool-blue);
	color: var(--wtx-tool-blue);
}

.wtx-preset-btn.is-active {
	background: var(--wtx-tool-blue);
	border-color: var(--wtx-tool-blue);
	color: var(--wtx-tool-white);
}

/* Two-column Calculator Grid */
.wtx-calc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 860px) {
	.wtx-calc-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Calculator Form & Inputs */
.wtx-calc-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.wtx-input-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.wtx-input-group label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wtx-tool-navy);
}

.wtx-tooltip {
	cursor: help;
	color: var(--wtx-tool-gray-400);
	font-size: 0.875rem;
	position: relative;
}

.wtx-tooltip:hover::after {
	content: attr(data-tip);
	position: absolute;
	bottom: 125%;
	right: 0;
	width: 220px;
	background: var(--wtx-tool-navy);
	color: var(--wtx-tool-white);
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	padding: 6px 10px;
	border-radius: var(--wtx-tool-radius-sm);
	z-index: 100;
	box-shadow: var(--wtx-tool-shadow-md);
	pointer-events: none;
}

.wtx-input-affix {
	display: flex;
	align-items: center;
	background: var(--wtx-tool-white);
	border: 1px solid var(--wtx-tool-gray-300);
	border-radius: var(--wtx-tool-radius-sm);
	overflow: hidden;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wtx-input-affix:focus-within {
	border-color: var(--wtx-tool-blue);
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

.wtx-input-affix input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	padding: 10px 14px;
	font-size: 1rem;
	font-weight: 600;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	color: var(--wtx-tool-navy);
	outline: none;
}


.wtx-affix-prefix,
.wtx-affix-label {
	padding: 10px 14px;
	background: var(--wtx-tool-gray-100);
	color: var(--wtx-tool-slate);
	font-size: 0.875rem;
	font-weight: 600;
	user-select: none;
	border-left: 1px solid var(--wtx-tool-gray-200);
}

.wtx-affix-prefix {
	border-left: none;
	border-right: 1px solid var(--wtx-tool-gray-200);
}

.wtx-select,
.wtx-input,
.wtx-textarea {
	width: 100%;
	border: 1px solid var(--wtx-tool-gray-300);
	border-radius: var(--wtx-tool-radius-sm);
	padding: 10px 14px;
	font-size: 0.9375rem;
	color: var(--wtx-tool-navy);
	background: var(--wtx-tool-white);
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wtx-select:focus,
.wtx-input:focus,
.wtx-textarea:focus {
	border-color: var(--wtx-tool-blue);
	box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.15);
}

/* Results Panel */
.wtx-calc-results {
	background: var(--wtx-tool-gray-100);
	border: 1px solid var(--wtx-tool-gray-200);
	border-radius: var(--wtx-tool-radius-md);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.wtx-results-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wtx-results-header h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
	color: var(--wtx-tool-navy);
}

/* Stat Cards */
.wtx-stat-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wtx-stat-card {
	background: var(--wtx-tool-white);
	border: 1px solid var(--wtx-tool-gray-200);
	border-radius: var(--wtx-tool-radius-sm);
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
}

.wtx-stat-card.is-primary {
	border-color: var(--wtx-tool-blue);
	background: #F8FAFF;
	border-left-width: 4px;
}

.wtx-stat-label {
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wtx-tool-slate);
	margin-bottom: 4px;
}

.wtx-stat-value {
	font-size: 1.875rem;
	font-weight: 800;
	color: var(--wtx-tool-navy);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	line-height: 1.2;
}

.wtx-stat-sub {
	font-size: 0.8125rem;
	color: var(--wtx-tool-slate);
	margin-top: 4px;
}

/* Badges */
.wtx-badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 9999px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.wtx-badge-success { background: var(--wtx-tool-success-bg); color: var(--wtx-tool-success); }
.wtx-badge-primary { background: var(--wtx-tool-blue-light); color: var(--wtx-tool-blue); }
.wtx-badge-warning { background: var(--wtx-tool-warning-bg); color: var(--wtx-tool-warning); }
.wtx-badge-danger { background: var(--wtx-tool-danger-bg); color: var(--wtx-tool-danger); }
.wtx-badge-neutral { background: var(--wtx-tool-gray-200); color: var(--wtx-tool-slate); }
.wtx-badge-info { background: #F0F9FF; color: #0284C7; }

/* Progress Bar */
.wtx-progress-container {
	margin-top: 4px;
}

.wtx-progress-meta {
	display: flex;
	justify-content: space-between;
	font-size: 0.8125rem;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--wtx-tool-slate);
}

.wtx-progress-bar {
	background: var(--wtx-tool-gray-200);
	border-radius: 9999px;
	height: 10px;
	overflow: hidden;
}

.wtx-progress-fill {
	background: var(--wtx-tool-blue);
	height: 100%;
	border-radius: 9999px;
	transition: width 0.3s ease;
}

/* Actions Bar */
.wtx-actions-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 6px;
	padding-top: 1rem;
	border-top: 1px solid var(--wtx-tool-gray-200);
}

.wtx-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wtx-tool-white);
	border: 1px solid var(--wtx-tool-gray-300);
	color: var(--wtx-tool-navy);
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: var(--wtx-tool-radius-sm);
	cursor: pointer;
	transition: all 0.15s ease-in-out;
}

.wtx-action-btn:hover {
	border-color: var(--wtx-tool-blue);
	color: var(--wtx-tool-blue);
	background: #F8FAFF;
}

.wtx-share-feedback {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wtx-tool-success);
	opacity: 0;
	transition: opacity 0.2s ease;
	min-height: 18px;
}

.wtx-share-feedback.is-visible {
	opacity: 1;
}

.wtx-share-feedback.is-error {
	color: var(--wtx-tool-danger);
}

/* Compare Grid */
.wtx-compare-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.wtx-compare-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.wtx-compare-col {
	background: var(--wtx-tool-gray-100);
	border: 1px solid var(--wtx-tool-gray-200);
	border-radius: var(--wtx-tool-radius-md);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.wtx-col-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wtx-col-heading h3 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

/* Buttons */
.wtx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 16px;
	font-size: 0.9375rem;
	font-weight: 600;
	border-radius: var(--wtx-tool-radius-sm);
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}

.wtx-btn-primary {
	background: var(--wtx-tool-blue);
	color: var(--wtx-tool-white);
}

.wtx-btn-primary:hover {
	background: var(--wtx-tool-blue-hover);
	color: var(--wtx-tool-white);
}

.wtx-btn-secondary {
	background: var(--wtx-tool-gray-200);
	color: var(--wtx-tool-navy);
}

.wtx-btn-secondary:hover {
	background: var(--wtx-tool-gray-300);
}

.wtx-btn-outline {
	background: transparent;
	border-color: var(--wtx-tool-gray-300);
	color: var(--wtx-tool-navy);
}

.wtx-btn-outline:hover {
	border-color: var(--wtx-tool-blue);
	color: var(--wtx-tool-blue);
}

.wtx-btn-small {
	padding: 4px 10px;
	font-size: 0.8125rem;
	background: var(--wtx-tool-gray-100);
	border: 1px solid var(--wtx-tool-gray-300);
	color: var(--wtx-tool-navy);
}

.wtx-btn-small:hover {
	background: var(--wtx-tool-blue);
	color: var(--wtx-tool-white);
	border-color: var(--wtx-tool-blue);
}

/* Related Tools Grid */
.wtx-tools-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
	margin: 2rem 0;
}

.wtx-tool-promo-card {
	background: var(--wtx-tool-white);
	border: 1px solid var(--wtx-tool-gray-200);
	border-radius: var(--wtx-tool-radius-md);
	padding: 1.5rem;
	text-decoration: none;
	color: inherit;
	box-shadow: var(--wtx-tool-shadow-sm);
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.wtx-tool-promo-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--wtx-tool-shadow-md);
	border-color: var(--wtx-tool-blue);
}

.wtx-promo-icon {
	color: var(--wtx-tool-blue);
	margin-bottom: 0.75rem;
}

.wtx-tool-promo-card h4 {
	margin: 0 0 0.5rem 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--wtx-tool-navy);
}

.wtx-tool-promo-card p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wtx-tool-slate);
	line-height: 1.5;
}

/* Contact Form */
.wtx-contact-form-wrap {
	max-width: 680px;
	margin: 2rem 0;
}

.wtx-contact-form {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.wtx-form-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 600px) {
	.wtx-form-row {
		grid-template-columns: 1fr 1fr;
	}
}

.wtx-required {
	color: var(--wtx-tool-danger);
}

.wtx-form-footer {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 0.5rem;
}

.wtx-form-status {
	font-size: 0.875rem;
	font-weight: 600;
	display: none;
}

.wtx-form-status.is-visible {
	display: inline-block;
}

.wtx-form-status.is-success {
	color: var(--wtx-tool-success);
}

.wtx-form-status.is-error {
	color: var(--wtx-tool-danger);
}