/* =====================================================
   Web Tools — /tools/
   ===================================================== */

.misk-webtools-wrap {
	padding: 30px 0 60px;
	min-height: 70vh;
}

/* ─── Hero ─── */
.wt-hero {
	text-align: center;
	padding: 40px 20px 30px;
	margin-bottom: 35px;
	background: linear-gradient(135deg, #8e44ad 0%, #5b2c8a 100%);
	border-radius: 16px;
	color: #fff;
}

.wt-hero-title {
	font-size: 1.8rem;
	font-weight: 800;
	margin: 0 0 10px;
	color: #fff;
}

.wt-hero-title i { margin-left: 8px; opacity: .85; }

.wt-hero-desc {
	font-size: 1.05rem;
	opacity: .9;
	margin: 0 0 20px;
	max-width: 640px;
	margin-inline: auto;
	line-height: 1.7;
}

.wt-hero-stats { display: flex; justify-content: center; gap: 30px; }
.wt-stat { display: flex; flex-direction: column; align-items: center; }
.wt-stat strong { font-size: 1.6rem; font-weight: 800; }
.wt-stat span { font-size: .82rem; opacity: .75; }

/* ═══════════════════════════════════════════════════
   3-Column Layout — Right Sidebar | Main | Left Sidebar
   ═══════════════════════════════════════════════════ */

.wt-layout-3col {
	display: grid;
	grid-template-columns: 240px 1fr 220px;
	grid-template-areas: "right main left";
	gap: 24px;
	align-items: start;
}

.wt-sidebar-right { grid-area: right; }
.wt-main-content  { grid-area: main; min-width: 0; }
.wt-sidebar-left  { grid-area: left; }

/* ─── Sidebars ─── */
.wt-sidebar-sticky {
	position: sticky;
	top: 80px;
}

.wt-sidebar-title {
	font-size: .88rem;
	font-weight: 800;
	padding: 10px 14px;
	margin-bottom: 10px;
	background: var(--misk-card-bg, #f8f9fa);
	border: 1px solid var(--misk-border, #e9ecef);
	border-radius: 10px;
	color: var(--misk-text, #333);
	display: flex;
	align-items: center;
	gap: 6px;
}

.wt-sidebar-title i {
	color: var(--misk-primary, #8e44ad);
	font-size: .85rem;
}

.wt-sb-group {
	margin-bottom: 14px;
}

.wt-sb-group-label {
	font-size: .78rem;
	font-weight: 700;
	color: var(--misk-text-muted, #888);
	padding: 4px 8px;
	margin-bottom: 6px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.wt-sb-group-label i {
	font-size: .72rem;
}

.wt-sb-btns {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wt-sb-btn {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: .8rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--misk-text, #444);
	background: var(--misk-card-bg, #fff);
	border: 1px solid var(--misk-border, #eee);
	transition: all .2s;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wt-sb-btn i {
	color: var(--btn-clr, #8e44ad);
	font-size: .78rem;
	flex-shrink: 0;
}

.wt-sb-btn:hover {
	background: color-mix(in srgb, var(--btn-clr, #8e44ad) 8%, transparent);
	border-color: var(--btn-clr, #8e44ad);
	color: var(--btn-clr, #8e44ad);
	transform: translateX(-2px);
}

.wt-sb-btn-active {
	background: color-mix(in srgb, var(--btn-clr, #8e44ad) 10%, transparent);
	border-color: var(--btn-clr, #8e44ad);
	color: var(--btn-clr, #8e44ad);
	font-weight: 700;
}

/* ─── Section Title ─── */
.wt-section-title {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0 0 18px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wt-section-title i {
	color: var(--misk-primary, #8e44ad);
}

/* ─── Grid (index) ─── */
.wt-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin-bottom: 30px;
}

.wt-card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px;
	background: var(--misk-card-bg, #fff);
	border: 1px solid var(--misk-border, #e9ecef);
	border-radius: 14px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s, transform .15s;
}

.wt-card:hover {
	box-shadow: 0 6px 24px rgba(0,0,0,.08);
	transform: translateY(-2px);
}

.wt-card-icon {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	color: #fff;
	font-size: 1.2rem;
}

.wt-card-body { flex: 1; min-width: 0; }
.wt-card-name { font-size: 1rem; font-weight: 700; margin: 0 0 4px; }
.wt-card-desc { font-size: .83rem; color: var(--misk-text-muted, #777); margin: 0; line-height: 1.5; }
.wt-card-arrow { color: var(--misk-text-muted, #bbb); font-size: .9rem; }

/* ─── Tool Header ─── */
.wt-tool-header {
	text-align: center;
	margin-bottom: 30px;
}

.wt-tool-header h1 {
	font-size: 1.5rem;
	font-weight: 800;
	margin: 0 0 10px;
}

.wt-tool-header p {
	font-size: .95rem;
	color: var(--misk-text-muted, #777);
	margin: 0;
	max-width: 700px;
	margin-inline: auto;
	line-height: 1.7;
}

/* ═══════════════════════════════════════════════════
   Rich Content Sections
   ═══════════════════════════════════════════════════ */

.wt-rich-section {
	margin-top: 35px;
	padding-top: 30px;
	border-top: 1px solid var(--misk-border, #eee);
}

.wt-rich-section h2 {
	font-size: 1.15rem;
	font-weight: 800;
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wt-rich-section h2 i {
	color: var(--misk-primary, #8e44ad);
	font-size: 1rem;
}

.wt-rich-section p {
	font-size: .92rem;
	line-height: 1.8;
	color: var(--misk-text, #444);
	margin: 0 0 12px;
}

/* ─── Steps ─── */
.wt-steps {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.wt-step {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 16px;
	background: var(--misk-card-bg, #f9f9fb);
	border: 1px solid var(--misk-border, #eee);
	border-radius: 12px;
}

.wt-step-num {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: linear-gradient(135deg, #8e44ad, #6c3483);
	color: #fff;
	font-weight: 800;
	font-size: .95rem;
}

.wt-step strong {
	display: block;
	font-size: .95rem;
	margin-bottom: 4px;
}

.wt-step p {
	font-size: .85rem;
	margin: 0;
	color: var(--misk-text-muted, #666);
	line-height: 1.6;
}

/* ─── Features Grid ─── */
.wt-features-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}

.wt-features-2col {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.wt-feature {
	padding: 18px;
	background: var(--misk-card-bg, #fff);
	border: 1px solid var(--misk-border, #eee);
	border-radius: 12px;
	text-align: center;
}

.wt-feature-icon {
	font-size: 2rem;
	display: block;
	margin-bottom: 8px;
}

.wt-feature strong {
	display: block;
	font-size: .9rem;
	margin-bottom: 6px;
}

.wt-feature p {
	font-size: .82rem;
	color: var(--misk-text-muted, #777);
	margin: 0;
	line-height: 1.6;
}

/* ─── FAQ ─── */
.wt-faq {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wt-faq-item {
	background: var(--misk-card-bg, #fff);
	border: 1px solid var(--misk-border, #eee);
	border-radius: 10px;
	overflow: hidden;
}

.wt-faq-item summary {
	padding: 14px 18px;
	font-size: .92rem;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	user-select: none;
	transition: background .2s;
}

.wt-faq-item summary::-webkit-details-marker { display: none; }

.wt-faq-item summary::after {
	content: '\f107';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: var(--misk-text-muted, #999);
	transition: transform .2s;
}

.wt-faq-item[open] summary::after {
	transform: rotate(180deg);
}

.wt-faq-item summary:hover {
	background: var(--misk-card-header-bg, #f8f9fa);
}

.wt-faq-item p {
	padding: 0 18px 16px;
	font-size: .87rem;
	line-height: 1.8;
	color: var(--misk-text-muted, #555);
	margin: 0;
}

/* ─── Tool Detail ─── */
.wt-tool-detail {
	padding: 20px;
	background: var(--misk-card-bg, #fff);
	border: 1px solid var(--misk-border, #eee);
	border-radius: 12px;
	margin-bottom: 16px;
}

.wt-tool-detail h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wt-tool-detail p {
	font-size: .88rem;
	line-height: 1.8;
	color: var(--misk-text, #444);
	margin: 0 0 14px;
}

.wt-cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	background: linear-gradient(135deg, #8e44ad, #6c3483);
	color: #fff;
	border-radius: 10px;
	font-size: .88rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform .15s, box-shadow .2s;
}

.wt-cta-btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(142,68,173,.3);
	color: #fff;
}

/* ─── Related Tools ─── */
.wt-related-tools {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

.wt-related-card {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 16px;
	background: var(--misk-card-bg, #fff);
	border: 1px solid var(--misk-border, #eee);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s, transform .15s;
}

.wt-related-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,.07);
	transform: translateY(-2px);
}

.wt-related-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: #fff;
	font-size: 1.1rem;
}

.wt-related-card strong {
	display: block;
	font-size: .92rem;
	margin-bottom: 3px;
}

.wt-related-card p {
	font-size: .8rem;
	color: var(--misk-text-muted, #777);
	margin: 0;
	line-height: 1.4;
}

/* ═══════════════════════════════════════════════════
   Emoji Picker
   ═══════════════════════════════════════════════════ */

.wt-emoji-app {
	position: relative;
}

.wt-emoji-toolbar {
	margin-bottom: 20px;
}

.wt-emoji-search {
	width: 100%;
	padding: 12px 18px;
	border: 2px solid var(--misk-border, #e0e0e0);
	border-radius: 12px;
	font-size: 1rem;
	outline: none;
	margin-bottom: 14px;
	background: var(--misk-card-bg, #fff);
	color: inherit;
	transition: border-color .2s;
}

.wt-emoji-search:focus {
	border-color: var(--misk-primary, #f39c12);
}

.wt-emoji-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.wt-cat-btn {
	min-width: 42px;
	height: 42px;
	border: 2px solid transparent;
	border-radius: 10px;
	font-size: 1.3rem;
	cursor: pointer;
	background: var(--misk-card-bg, #f5f5f5);
	transition: border-color .2s, background .2s;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wt-cat-btn:hover, .wt-cat-btn.active {
	border-color: var(--misk-primary, #f39c12);
	background: rgba(243, 156, 18, .08);
}

.wt-emoji-cat-title {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 18px 0 10px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--misk-border, #eee);
}

.wt-emoji-items {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.wt-emoji-btn {
	width: 46px;
	height: 46px;
	font-size: 1.6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	transition: background .15s, transform .1s;
}

.wt-emoji-btn:hover {
	background: rgba(243, 156, 18, .12);
	transform: scale(1.2);
}

.wt-emoji-empty {
	text-align: center;
	color: var(--misk-text-muted, #999);
	padding: 40px;
}

/* Toast */
.wt-emoji-toast {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%) translateY(100px);
	background: #333;
	color: #fff;
	padding: 12px 28px;
	border-radius: 30px;
	font-size: .95rem;
	font-weight: 600;
	opacity: 0;
	transition: transform .3s, opacity .3s;
	z-index: 9999;
	pointer-events: none;
}

.wt-emoji-toast.show {
	transform: translateX(-50%) translateY(0);
	opacity: 1;
}

/* ═══════════════════════════════════════════════════
   Text Decorator
   ═══════════════════════════════════════════════════ */

.wt-decorator-app {
	position: relative;
}

.wt-dec-input-wrap {
	margin-bottom: 20px;
}

.wt-dec-input {
	width: 100%;
	padding: 14px 18px;
	border: 2px solid var(--misk-border, #e0e0e0);
	border-radius: 12px;
	font-size: 1.1rem;
	font-family: inherit;
	resize: vertical;
	outline: none;
	background: var(--misk-card-bg, #fff);
	color: inherit;
	transition: border-color .2s;
}

.wt-dec-input:focus {
	border-color: var(--misk-primary, #8e44ad);
}

.wt-dec-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.wt-dec-tab {
	padding: 9px 20px;
	border: 2px solid var(--misk-border, #ddd);
	border-radius: 10px;
	background: var(--misk-card-bg, #fff);
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	color: inherit;
	transition: all .2s;
}

.wt-dec-tab:hover, .wt-dec-tab.active {
	border-color: #8e44ad;
	background: rgba(142, 68, 173, .08);
	color: #8e44ad;
}

.wt-dec-results {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wt-dec-card {
	background: var(--misk-card-bg, #fff);
	border: 1px solid var(--misk-border, #e9ecef);
	border-radius: 12px;
	overflow: hidden;
}

.wt-dec-card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	background: var(--misk-card-header-bg, #f8f9fa);
	border-bottom: 1px solid var(--misk-border, #e9ecef);
}

.wt-dec-style-name {
	font-size: .85rem;
	font-weight: 700;
	color: var(--misk-text-muted, #666);
}

.wt-dec-copy {
	padding: 5px 14px;
	border: 1px solid var(--misk-border, #ddd);
	border-radius: 8px;
	background: var(--misk-card-bg, #fff);
	font-size: .8rem;
	font-weight: 600;
	cursor: pointer;
	color: inherit;
	transition: background .2s;
	display: flex;
	align-items: center;
	gap: 4px;
}

.wt-dec-copy:hover {
	background: rgba(142, 68, 173, .08);
}

.wt-dec-card-body {
	padding: 16px;
	font-size: 1.15rem;
	line-height: 1.8;
	word-break: break-word;
	min-height: 48px;
}

.wt-dec-card-body.wt-ascii-body {
	font-size: .75rem;
	line-height: 1.2;
	overflow-x: auto;
}

.wt-dec-card-body pre {
	margin: 0;
	font-family: 'Courier New', Courier, monospace;
	white-space: pre;
	direction: ltr;
	text-align: left;
}

/* ═══════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.wt-layout-3col {
		grid-template-columns: 220px 1fr;
		grid-template-areas:
			"right main"
			"left main";
	}
	.wt-sidebar-left { display: none; }
}

@media (max-width: 768px) {
	.wt-layout-3col {
		grid-template-columns: 1fr;
		grid-template-areas:
			"main"
			"right"
			"left";
	}
	.wt-sidebar-left { display: block; }
	.wt-sidebar-sticky { position: static; }

	.wt-sidebar {
		border-top: 1px solid var(--misk-border, #eee);
		padding-top: 20px;
		margin-top: 10px;
	}

	.wt-sb-btns {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.wt-sb-btn {
		white-space: nowrap;
		padding: 7px 12px;
		font-size: .78rem;
	}

	.wt-features-grid {
		grid-template-columns: 1fr;
	}
	.wt-features-2col {
		grid-template-columns: 1fr;
	}
	.wt-related-tools {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.wt-grid { grid-template-columns: 1fr; }
	.wt-emoji-btn { width: 40px; height: 40px; font-size: 1.4rem; }
	.wt-dec-tabs { gap: 5px; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
	.wt-dec-tab { padding: 7px 12px; font-size: .82rem; white-space: nowrap; flex-shrink: 0; }
	.wt-hero-title { font-size: 1.4rem; }
	.wt-hero-desc { font-size: .9rem; }
	.wt-dec-card-body { font-size: 1rem; }
	.wt-dec-card-body.wt-ascii-body { font-size: .6rem; }
	.wt-tool-header h1 { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════
   Zakat & Discount Calculator Styles
   ═══════════════════════════════════════════════════ */

.wt-zakat-app, .wt-discount-app, .wt-unit-app { margin-bottom: 30px; }

.wt-zakat-panel, .wt-discount-panel,
.wt-unit-panel, .wt-age-panel, .wt-pct-panel,
.wt-gpa-panel, .wt-loan-panel, .wt-savings-panel,
.wt-cal-panel, .wt-color-panel, .wt-cook-panel,
.wt-enc-panel { display: none; }
.wt-zakat-panel.active, .wt-discount-panel.active,
.wt-unit-panel.active, .wt-age-panel.active, .wt-pct-panel.active,
.wt-gpa-panel.active, .wt-loan-panel.active, .wt-savings-panel.active,
.wt-cal-panel.active, .wt-color-panel.active, .wt-cook-panel.active,
.wt-enc-panel.active { display: block; }

.wt-zakat-card {
	background: #fff;
	border-radius: 12px;
	border: 1px solid #e1e8ed;
	padding: 24px;
	margin-top: 15px;
}
.wt-zakat-card h3 { margin: 0 0 8px; font-size: 1.2rem; }
.wt-zakat-note { color: #666; font-size: .92rem; line-height: 1.7; margin-bottom: 20px; }

.wt-zakat-form { display: flex; flex-direction: column; gap: 16px; }
.wt-zakat-field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 6px; color: #444; }
.wt-zakat-field input,
.wt-zakat-field select {
	width: 100%; padding: 10px 14px; border: 1px solid #d1d5db;
	border-radius: 8px; font-size: 1rem; font-family: inherit;
	transition: border-color .2s, box-shadow .2s;
}
.wt-zakat-field input:focus,
.wt-zakat-field select:focus {
	outline: none; border-color: #27ae60; box-shadow: 0 0 0 3px rgba(39,174,96,.15);
}

.wt-zakat-calc-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 28px; border: none; border-radius: 10px; cursor: pointer;
	font-size: 1rem; font-weight: 700; color: #fff; font-family: inherit;
	background: linear-gradient(135deg, #27ae60, #1e8449);
	transition: transform .15s, box-shadow .15s;
}
.wt-zakat-calc-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(39,174,96,.35); }

.wt-zakat-result { margin-top: 20px; animation: fadeInUp .35s ease; }
.wt-zakat-result:empty { display: none; }

.wt-zakat-ok {
	padding: 18px; border-radius: 10px; line-height: 1.9; font-size: .95rem;
}
.wt-zakat-above { background: #d4edda; border: 1px solid #27ae60; color: #155724; }
.wt-zakat-below { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }
.wt-zakat-err { background: #f8d7da; border: 1px solid #e74c3c; color: #721c24; padding: 12px; border-radius: 8px; }
.wt-zakat-amount { display: block; font-size: 1.2rem; margin-top: 8px; color: #155724; }

/* Nisab table */
.wt-info-table-wrap { overflow-x: auto; margin: 15px 0; }
.wt-info-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.wt-info-table th { background: #f0f4f8; padding: 10px 12px; text-align: right; font-weight: 700; border-bottom: 2px solid #d1d5db; }
.wt-info-table td { padding: 10px 12px; border-bottom: 1px solid #e8e8e8; }
.wt-info-table tr:hover td { background: #f7fafc; }

/* Discount presets */
.wt-discount-presets {
	display: flex; flex-wrap: wrap; gap: 8px; margin-top: -4px;
}
.wt-discount-preset {
	padding: 6px 14px; background: #f0f4f8; border: 1px solid #d1d5db;
	border-radius: 20px; font-size: .85rem; cursor: pointer;
	transition: all .2s; font-weight: 600; color: #555;
}
.wt-discount-preset:hover, .wt-discount-preset.active {
	background: #e74c3c; color: #fff; border-color: #e74c3c;
}

/* Discount result cards */
.wt-disc-result-card {
	background: #f7fafc; border-radius: 10px; border: 1px solid #e1e8ed;
	padding: 16px; margin-top: 10px;
}
.wt-disc-result-row {
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 0; border-bottom: 1px solid #eee; font-size: .95rem;
}
.wt-disc-result-row:last-child { border-bottom: none; }
.wt-disc-saving span:last-child { color: #27ae60; font-weight: 700; }
.wt-disc-final span:last-child { font-size: 1.15rem; font-weight: 700; color: #e74c3c; }
.wt-disc-pct { font-weight: 700; color: #e74c3c; }

/* Compare layout */
.wt-compare-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wt-compare-row h4 { margin: 0 0 10px; font-size: 1rem; text-align: center; }
.wt-disc-cmp-results { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.wt-disc-cmp-col { background: #f7fafc; border-radius: 10px; border: 1px solid #e1e8ed; padding: 14px; }
.wt-disc-cmp-col h4 { text-align: center; margin: 0 0 10px; font-size: .95rem; }
.wt-cmp-best { border-color: #27ae60; background: #ecfdf5; }
.wt-cmp-best h4::after { content: ' ✓'; color: #27ae60; }

.wt-disc-winner {
	text-align: center; padding: 12px; border-radius: 10px; margin-top: 12px;
	font-weight: 700; font-size: .95rem;
}
.wt-disc-winner-1, .wt-disc-winner-2 { background: #d4edda; color: #155724; }
.wt-disc-winner-tie { background: #d1ecf1; color: #0c5460; }

/* Stacked discount trace */
.wt-disc-steps-trace { margin-top: 10px; }
.wt-disc-step-item {
	padding: 8px 12px; border-right: 3px solid #e74c3c;
	margin-bottom: 4px; font-size: .92rem; background: #fef9f9;
	border-radius: 0 6px 6px 0;
}
.wt-disc-stack-note {
	margin-top: 12px; padding: 12px; background: #fff3cd; border: 1px solid #ffc107;
	border-radius: 8px; font-size: .88rem; color: #856404; line-height: 1.7;
}

@media (max-width: 600px) {
	.wt-zakat-card { padding: 16px; }
	.wt-compare-row, .wt-disc-cmp-results { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   Pregnancy Calculator
   ═══════════════════════════════════════════════════ */
.wt-preg-summary {
	background: linear-gradient(135deg, #fce4f3, #f8e8ff);
	border-radius: 16px; padding: 24px; margin-bottom: 20px;
	border: 1px solid #f0c0e0;
}
.wt-preg-due {
	text-align: center; font-size: 2rem; font-weight: 700; color: #e91e8c;
	margin-bottom: 8px;
}
.wt-preg-due small { display: block; font-size: .85rem; color: #888; font-weight: 400; margin-top: 4px; }
.wt-preg-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px; margin-top: 16px;
}
.wt-preg-stat {
	background: #fff; border-radius: 12px; padding: 14px; text-align: center;
	border: 1px solid #f0d0e8; box-shadow: 0 2px 8px rgba(233,30,140,.06);
}
.wt-preg-stat strong { display: block; font-size: 1.3rem; color: #e91e8c; }
.wt-preg-stat span { font-size: .8rem; color: #999; }
.wt-preg-progress { margin: 20px 0; }
.wt-preg-progress-label {
	display: flex; justify-content: space-between; font-size: .85rem; color: #888; margin-bottom: 6px;
}
.wt-preg-progress-bar {
	height: 14px; border-radius: 7px; background: #eee; overflow: hidden; position: relative;
}
.wt-preg-progress-fill {
	height: 100%; border-radius: 7px;
	background: linear-gradient(90deg, #f8bbd0, #e91e8c);
	transition: width .6s ease;
}
.wt-preg-meta {
	display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; font-size: .9rem; color: #666;
}
.wt-preg-meta span i { margin-left: 4px; color: #e91e8c; }
.wt-preg-pastdue {
	margin-top: 12px; padding: 12px; background: #fff3cd; border: 1px solid #ffc107;
	border-radius: 8px; color: #856404; font-size: .9rem;
}
.wt-preg-fetal-card {
	background: #fff; border: 1px solid #f0d0e8; border-radius: 16px;
	padding: 20px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.wt-preg-fetal-card h4 { margin: 0 0 16px; color: #e91e8c; font-size: 1.1rem; }
.wt-preg-fetal-icon { font-size: 2.5rem; text-align: center; margin-bottom: 10px; }
.wt-preg-fetal-stats {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 10px; margin-bottom: 14px;
}
.wt-preg-fetal-stat {
	background: #fef6fb; border-radius: 10px; padding: 10px; text-align: center;
	border: 1px solid #f5d0ea;
}
.wt-preg-fetal-stat strong { display: block; font-size: 1.1rem; color: #e91e8c; }
.wt-preg-fetal-stat small { color: #999; font-size: .78rem; }
.wt-preg-fetal-milestone {
	padding: 10px; background: #fcf0f7; border-radius: 8px;
	font-size: .9rem; line-height: 1.6; color: #555;
}
.wt-preg-fetal-milestone i { color: #e91e8c; }
.wt-preg-timeline { margin-top: 20px; position: relative; padding-right: 20px; }
.wt-preg-timeline::before {
	content: ''; position: absolute; right: 6px; top: 0; bottom: 0;
	width: 3px; background: #f0d0e8; border-radius: 2px;
}
.wt-preg-tl-item {
	position: relative; padding: 10px 30px 10px 0; font-size: .88rem; color: #666;
}
.wt-preg-tl-item::before {
	content: ''; position: absolute; right: 0; top: 14px;
	width: 14px; height: 14px; border-radius: 50%;
	background: #f0d0e8; border: 2px solid #fff;
}
.wt-tl-past::before { background: #e91e8c; }
.wt-tl-current::before { background: #e91e8c; box-shadow: 0 0 0 4px rgba(233,30,140,.2); }
.wt-preg-tl-item strong { color: #333; }
.wt-preg-stage {
	background: #fff; border: 1px solid #f0d0e8; border-radius: 12px;
	padding: 16px; margin-bottom: 14px;
}
.wt-preg-stage-head {
	display: flex; align-items: center; gap: 10px;
	font-weight: 700; font-size: 1rem; margin-bottom: 8px;
}
.wt-preg-stage-head i { font-size: 1.2rem; }
.wt-preg-stage p { color: #666; font-size: .9rem; line-height: 1.7; margin: 0; }

@media (max-width: 600px) {
	.wt-preg-stats { grid-template-columns: repeat(2, 1fr); }
	.wt-preg-fetal-stats { grid-template-columns: repeat(2, 1fr); }
	.wt-preg-due { font-size: 1.5rem; }
}

/* ═══════════════════════════════════════════════════
   Period / Ovulation Calculator
   ═══════════════════════════════════════════════════ */
.wt-period-summary {
	background: linear-gradient(135deg, #fce4ec, #f3e5f5);
	border-radius: 16px; padding: 24px; margin-bottom: 20px;
	border: 1px solid #f0c0d0;
}
.wt-period-next-date {
	text-align: center; font-size: 1.8rem; font-weight: 700; color: #e84393;
	margin-bottom: 6px;
}
.wt-period-next-date small { display: block; font-size: .85rem; color: #888; font-weight: 400; margin-top: 4px; }
.wt-period-countdown {
	text-align: center; font-size: 1rem; color: #666; margin-top: 8px;
}
.wt-period-countdown strong { color: #e84393; font-size: 1.3rem; }
.wt-period-cal-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px; margin-top: 20px;
}
.wt-period-month {
	background: #fff; border: 1px solid #f0d0e0; border-radius: 12px;
	padding: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.wt-period-month-title {
	text-align: center; font-weight: 700; font-size: .95rem;
	color: #e84393; margin-bottom: 10px; padding-bottom: 8px;
	border-bottom: 2px solid #fce4ec;
}
.wt-period-month-grid {
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center;
}
.wt-period-day-header {
	font-size: .7rem; font-weight: 700; color: #999; padding: 4px 0;
}
.wt-period-day {
	padding: 5px 2px; font-size: .78rem; border-radius: 6px;
	color: #555; min-height: 26px; display: flex; align-items: center;
	justify-content: center;
}
.wt-period-day.wt-day-empty { visibility: hidden; }
.wt-day-period { background: #f8bbd0; color: #880e4f; font-weight: 600; }
.wt-day-fertile { background: #c8e6c9; color: #2e7d32; font-weight: 600; }
.wt-day-ovulation { background: #fff9c4; color: #f57f17; font-weight: 700; border: 2px solid #fbc02d; }
.wt-day-today { box-shadow: 0 0 0 2px #e84393; }
.wt-period-legend {
	display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px;
	justify-content: center; font-size: .85rem; color: #666;
}
.wt-period-legend-item { display: flex; align-items: center; gap: 6px; }
.wt-period-dot {
	width: 14px; height: 14px; border-radius: 50%; display: inline-block;
}
.wt-period-upcoming {
	margin-top: 20px;
}
.wt-period-upcoming table { width: 100%; border-collapse: collapse; }
.wt-period-upcoming th, .wt-period-upcoming td {
	padding: 10px 12px; text-align: center; border-bottom: 1px solid #f0e0e8;
	font-size: .88rem;
}
.wt-period-upcoming th {
	background: #fce4ec; color: #e84393; font-weight: 600;
}
.wt-period-upcoming tr:hover td { background: #fef6fa; }

@media (max-width: 600px) {
	.wt-period-cal-grid { grid-template-columns: 1fr; }
	.wt-period-next-date { font-size: 1.3rem; }
}

/* ═══════════════════════════════════════════════════
   Clothing / Shoe Size Converter
   ═══════════════════════════════════════════════════ */
.wt-sizes-panel { display: none; }
.wt-sizes-panel.active { display: block; }
.wt-size-table { font-size: .88rem; }
.wt-size-table th { white-space: nowrap; }
.wt-size-table td { text-align: center; }
.wt-size-table tr:hover td { background: rgba(108,92,231,.06); }
.wt-size-tip {
	margin-top: 14px; padding: 12px 16px; background: #f0edff;
	border: 1px solid #d4ccfc; border-radius: 8px;
	font-size: .88rem; color: #5b4cdb; line-height: 1.7;
}
.wt-size-tip i { margin-left: 6px; color: #6c5ce7; }
.wt-info-table-wrap { overflow-x: auto; }

@media (max-width: 600px) {
	.wt-size-table { font-size: .78rem; }
	.wt-size-table th, .wt-size-table td { padding: 6px 4px; }
}

/* ═══════════════════════════════════════════════════
   Dark mode support
   ═══════════════════════════════════════════════════ */

.misk-dark-mode .wt-card,
.misk-dark-mode .wt-dec-card,
.misk-dark-mode .wt-dec-input,
.misk-dark-mode .wt-emoji-search,
.misk-dark-mode .wt-dec-copy,
.misk-dark-mode .wt-dec-tab,
.misk-dark-mode .wt-cat-btn,
.misk-dark-mode .wt-sb-btn,
.misk-dark-mode .wt-faq-item,
.misk-dark-mode .wt-feature,
.misk-dark-mode .wt-step,
.misk-dark-mode .wt-tool-detail,
.misk-dark-mode .wt-related-card,
.misk-dark-mode .wt-zakat-card,
.misk-dark-mode .wt-disc-result-card,
.misk-dark-mode .wt-disc-cmp-col,
.misk-dark-mode .wt-preg-fetal-card,
.misk-dark-mode .wt-preg-stage,
.misk-dark-mode .wt-period-month,
.misk-dark-mode .wt-size-tip {
	background: var(--misk-card-bg, #1e1e2f);
	border-color: var(--misk-border, #333);
	color: var(--misk-text, #eee);
}

.misk-dark-mode .wt-dec-card-header,
.misk-dark-mode .wt-sidebar-title,
.misk-dark-mode .wt-faq-item summary:hover {
	background: var(--misk-card-header-bg, #262640);
}

.misk-dark-mode .wt-rich-section p,
.misk-dark-mode .wt-step p,
.misk-dark-mode .wt-feature p,
.misk-dark-mode .wt-faq-item p,
.misk-dark-mode .wt-tool-detail p,
.misk-dark-mode .wt-related-card p,
.misk-dark-mode .wt-zakat-note {
	color: var(--misk-text-muted, #aaa);
}

.misk-dark-mode .wt-zakat-field label { color: var(--misk-text, #ddd); }
.misk-dark-mode .wt-zakat-field input,
.misk-dark-mode .wt-zakat-field select {
	background: var(--misk-card-bg, #1e1e2f);
	border-color: var(--misk-border, #444);
	color: var(--misk-text, #eee);
}
.misk-dark-mode .wt-zakat-above { background: #1a3a2a; border-color: #27ae60; color: #7bcea0; }
.misk-dark-mode .wt-zakat-below { background: #3a3520; border-color: #ffc107; color: #ffe066; }
.misk-dark-mode .wt-zakat-err { background: #3a1a1a; border-color: #e74c3c; color: #f5a0a0; }
.misk-dark-mode .wt-zakat-amount { color: #7bcea0; }
.misk-dark-mode .wt-info-table th { background: var(--misk-card-header-bg, #262640); color: var(--misk-text, #eee); border-color: var(--misk-border, #444); }
.misk-dark-mode .wt-info-table td { border-color: var(--misk-border, #333); }
.misk-dark-mode .wt-info-table tr:hover td { background: rgba(255,255,255,.04); }
.misk-dark-mode .wt-discount-preset { background: var(--misk-card-bg, #1e1e2f); border-color: var(--misk-border, #444); color: var(--misk-text-muted, #aaa); }
.misk-dark-mode .wt-disc-step-item { background: #2a1a1a; border-color: #e74c3c; }
.misk-dark-mode .wt-disc-stack-note { background: #3a3520; border-color: #ffc107; color: #ffe066; }
.misk-dark-mode .wt-disc-result-row { border-color: var(--misk-border, #333); }
.misk-dark-mode .wt-cmp-best { background: #1a3a2a; border-color: #27ae60; }

/* Dark — Pregnancy */
.misk-dark-mode .wt-preg-summary { background: linear-gradient(135deg, #2a1a2a, #251a30); border-color: #4a2a4a; }
.misk-dark-mode .wt-preg-stat { background: var(--misk-card-bg, #1e1e2f); border-color: var(--misk-border, #333); }
.misk-dark-mode .wt-preg-stat span { color: var(--misk-text-muted, #aaa); }
.misk-dark-mode .wt-preg-progress-bar { background: #333; }
.misk-dark-mode .wt-preg-meta { color: var(--misk-text-muted, #aaa); }
.misk-dark-mode .wt-preg-pastdue { background: #3a3520; border-color: #ffc107; color: #ffe066; }
.misk-dark-mode .wt-preg-fetal-card { background: var(--misk-card-bg, #1e1e2f); border-color: var(--misk-border, #333); }
.misk-dark-mode .wt-preg-fetal-card h4 { color: #f48fb1; }
.misk-dark-mode .wt-preg-fetal-stat { background: #251a30; border-color: #4a2a4a; }
.misk-dark-mode .wt-preg-fetal-stat small { color: var(--misk-text-muted, #aaa); }
.misk-dark-mode .wt-preg-fetal-milestone { background: #2a1a2a; color: var(--misk-text-muted, #ccc); }
.misk-dark-mode .wt-preg-timeline::before { background: #4a2a4a; }
.misk-dark-mode .wt-preg-tl-item { color: var(--misk-text-muted, #ccc); }
.misk-dark-mode .wt-preg-tl-item strong { color: var(--misk-text, #eee); }
.misk-dark-mode .wt-tl-past::before { background: #e91e8c; }
.misk-dark-mode .wt-preg-stage { background: var(--misk-card-bg, #1e1e2f); border-color: var(--misk-border, #333); }
.misk-dark-mode .wt-preg-stage p { color: var(--misk-text-muted, #aaa); }

/* Dark — Period / Ovulation */
.misk-dark-mode .wt-period-summary { background: linear-gradient(135deg, #2a1a22, #2a1a30); border-color: #4a2a3a; }
.misk-dark-mode .wt-period-countdown { color: var(--misk-text-muted, #aaa); }
.misk-dark-mode .wt-period-month { background: var(--misk-card-bg, #1e1e2f); border-color: var(--misk-border, #333); }
.misk-dark-mode .wt-period-month-title { color: #f48fb1; border-color: #4a2a3a; }
.misk-dark-mode .wt-period-day { color: var(--misk-text-muted, #ccc); }
.misk-dark-mode .wt-day-period { background: #5a2040; color: #f8bbd0; }
.misk-dark-mode .wt-day-fertile { background: #1a4a2a; color: #a5d6a7; }
.misk-dark-mode .wt-day-ovulation { background: #4a3a10; color: #fff176; border-color: #fbc02d; }
.misk-dark-mode .wt-period-legend { color: var(--misk-text-muted, #aaa); }
.misk-dark-mode .wt-period-upcoming th { background: #2a1a22; color: #f48fb1; }
.misk-dark-mode .wt-period-upcoming td { border-color: var(--misk-border, #333); }
.misk-dark-mode .wt-period-upcoming tr:hover td { background: rgba(255,255,255,.04); }

/* Dark — Clothing Sizes */
.misk-dark-mode .wt-size-tip { background: #1e1a30; border-color: #4a3a6a; color: #b8a0f0; }
.misk-dark-mode .wt-size-table tr:hover td { background: rgba(108,92,231,.1); }

/* ═══════════════════════════════════════════════════
   Unit Converter — swap button & form grid
   ═══════════════════════════════════════════════════ */
.wt-unit-form-grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 10px;
	align-items: end;
}
.wt-unit-swap-btn {
	min-width: 44px;
	padding: 10px;
	border-radius: 10px;
	border: none;
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	transition: transform .2s, opacity .2s;
}
.wt-unit-swap-btn:hover { opacity: .85; transform: rotate(180deg); }

@media (max-width: 600px) {
	.wt-unit-form-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.wt-unit-swap-btn {
		width: 100%;
		transform: rotate(90deg);
	}
	.wt-unit-swap-btn:hover { transform: rotate(270deg); }
}