/* PAAU Zakat Calculator
   Deliberately reuses PAAU Donations' own design tokens rather than
   inventing a parallel palette: var(--e-global-color-primary, #FF6A00) for
   the brand orange (this is the correct Elementor Global Colors slot on the
   live site — see donation-form.css's own correction note on why it's
   "-primary" and not "-accent"), var(--e-global-color-text, #231F20) for
   dark text, and the same typography variables. Every color/background/
   border/display/flex declaration carries !important per this project's
   standing Hello Elementor override requirement. */

.paau-zakat-calculator {
	max-width: 1400px;
	margin: 0 auto;
	font-family: var(--e-global-typography-text-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Calibri, Roboto, sans-serif) !important;
}

.paau-zakat-admin-warning {
	max-width: 700px;
	margin: 0 auto;
	padding: 20px 24px;
	background: #fff4e8 !important;
	border: 1.5px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 12px;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-zakat-admin-warning ul {
	margin: 10px 0;
	padding-left: 20px;
}

.paau-zakat-rates-unavailable {
	margin-bottom: 16px;
	padding: 14px 18px;
	background: #ffe6e6 !important;
	border: 1.5px solid #D93025 !important;
	border-radius: 10px;
	color: #D93025 !important;
	font-weight: 600;
	text-align: center;
}

.paau-zakat-grid {
	display: grid !important;
	grid-template-columns: 2fr 1fr;
	gap: 30px;
}

.paau-zakat-calculator-col {
	background: #ffffff !important;
	border: 1px solid #ececec !important;
	border-top: 4px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 18px;
	box-shadow: 0 2px 4px rgba(35, 31, 32, 0.04), 0 14px 34px rgba(35, 31, 32, 0.09);
	padding: 30px;
}

/* Tabs (Cash & Property / Gold & Silver / Investment & Business / Debts) —
   same pill-group pattern as PAAU Donations' own
   .paau-donation-type-switch: a tinted track with a solid selected pill,
   rather than underline-style tabs, so it reads as "choosing a section" and
   matches the site's existing selector convention. */
.paau-zakat-tabs {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	padding: 6px;
	margin-bottom: 24px;
	background: #FFF4E8 !important;
	border-radius: 14px;
}

.paau-zakat-tab {
	flex: 1 1 auto !important;
	min-width: 120px;
	padding: 10px 14px;
	background: transparent !important;
	border: none !important;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 700;
	color: #a85d1f !important;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.paau-zakat-tab.is-active {
	background: #ffffff !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
	box-shadow: 0 1px 3px rgba(35, 31, 32, 0.12);
}

.paau-zakat-tab:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(239, 124, 0, 0.35);
}

.paau-zakat-tab-nav {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid #ececec !important;
}

.paau-zakat-tab-prev,
.paau-zakat-tab-next {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	padding: 10px 18px;
	background: transparent !important;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	color: var(--e-global-color-text, #231F20) !important;
	cursor: pointer;
	flex-shrink: 0 !important;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.paau-zakat-tab-prev:hover:not(:disabled),
.paau-zakat-tab-next:hover:not(:disabled) {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	background: #FFF4E8 !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-zakat-tab-prev:disabled,
.paau-zakat-tab-next:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Text link, not a button — deliberately smaller and de-emphasised since it
   clears every field with no confirmation step. Sits under the calculation
   table in the results sidebar, not among the tab prev/next controls. */
.paau-zakat-reset {
	display: block !important;
	width: fit-content;
	margin: 0 auto 18px;
	padding: 0;
	background: transparent !important;
	border: none !important;
	color: #9a9a9a !important;
	font-size: 12px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

.paau-zakat-reset:hover {
	color: #D93025 !important;
}

/* Section note (e.g. "Your primary residence is NOT zakatable") — same
   visual weight as a tooltip bubble but always visible, not hover-only,
   since it's a clarification worth seeing without hunting for it. */
.paau-zakat-section-note {
	margin: -8px 0 16px;
	padding: 8px 12px;
	background: #fafafa !important;
	border-left: 3px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 4px;
	font-size: 12.5px;
	font-weight: 600;
	color: #6b6b6b !important;
}

/* Field-level tooltips — CSS-only (:hover/:focus-within), no JS. */
.paau-zakat-label-row {
	display: flex !important;
	align-items: center !important;
	gap: 6px;
	margin-bottom: 6px;
}

.paau-zakat-label-row label {
	margin-bottom: 0 !important;
}

.paau-zakat-tooltip {
	position: relative;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 15px;
	height: 15px;
	color: #b3b3b3 !important;
	cursor: help;
	flex-shrink: 0 !important;
}

.paau-zakat-tooltip svg {
	display: block !important;
	width: 15px;
	height: 15px;
}

.paau-zakat-tooltip:hover,
.paau-zakat-tooltip:focus-visible {
	color: var(--e-global-color-primary, #FF6A00) !important;
	outline: none;
}

.paau-zakat-tooltip-bubble {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%) translateY(4px);
	width: 220px;
	padding: 10px 12px;
	background: var(--e-global-color-text, #231F20) !important;
	color: #ffffff !important;
	border-radius: 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.paau-zakat-tooltip-bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent !important;
	border-top-color: var(--e-global-color-text, #231F20) !important;
}

.paau-zakat-tooltip:hover .paau-zakat-tooltip-bubble,
.paau-zakat-tooltip:focus-visible .paau-zakat-tooltip-bubble {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/* "Give on behalf of someone" — full width to match the Add to Cart button
   below it, rather than PAAU Donations' default content-width chip (this
   widget is the only field on the page, so there's nothing for it to sit
   inline next to). */
.paau-zakat-calculator .paau-dedication {
	width: 100% !important;
	margin-bottom: 16px;
}

.paau-zakat-calculator .paau-dedication-chip {
	width: 100% !important;
	justify-content: center !important;
}

.paau-zakat-calculator .paau-dedication-input-wrap {
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Trust line under the Add to Cart button */
.paau-zakat-trust-line {
	display: flex !important;
	align-items: flex-start !important;
	gap: 8px;
	margin-top: 16px;
	color: #6b6b6b !important;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
}

.paau-zakat-trust-line svg {
	display: block !important;
	width: 18px;
	height: 18px;
	flex-shrink: 0 !important;
	color: var(--e-global-color-primary, #FF6A00) !important;
	margin-top: 1px;
}

.paau-zakat-results-col {
	position: relative;
}

.paau-zakat-results-sticky {
	position: sticky;
	top: 20px;
	background: #ffffff !important;
	border: 1px solid #ececec !important;
	border-top: 4px solid var(--e-global-color-primary, #FF6A00) !important;
	border-radius: 18px;
	box-shadow: 0 2px 4px rgba(35, 31, 32, 0.04), 0 14px 34px rgba(35, 31, 32, 0.09);
	padding: 25px;
}

.paau-zakat-results-sticky h3,
.paau-zakat-section h3 {
	margin-top: 0;
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 1.5px solid #ececec !important;
	font-size: 19px;
	font-weight: 700;
	font-family: var(--e-global-typography-primary-font-family, inherit) !important;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-zakat-nisab-selector {
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1.5px solid #ececec !important;
}

.paau-zakat-nisab-selector label {
	display: block !important;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--e-global-color-text, #231F20) !important;
	font-size: 14px;
}

.paau-zakat-updated {
	display: block !important;
	margin-top: 6px;
	color: #9a9a9a !important;
	font-size: 12px;
}

.paau-zakat-section {
	margin-bottom: 28px;
}

.paau-zakat-section:last-child {
	margin-bottom: 0;
}

.paau-zakat-row {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 15px;
	margin-bottom: 15px;
}

.paau-zakat-field-group {
	margin-bottom: 15px;
}

.paau-zakat-field-group label {
	display: block !important;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--e-global-color-text, #231F20) !important;
	font-size: 13px;
}

/* Bordered field with a visible $ / g prefix — same pattern as PAAU
   Donations' own .paau-amount-custom-field, applied consistently here so
   these read as real fields to type into rather than bare inline inputs. */
.paau-zakat-money-field {
	display: flex !important;
	align-items: center !important;
	gap: 4px;
	padding: 10px 14px;
	background: #fafafa !important;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 10px;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.paau-zakat-money-field:focus-within {
	border-color: var(--e-global-color-primary, #FF6A00) !important;
	background: #ffffff !important;
}

.paau-zakat-prefix {
	font-size: 15px;
	font-weight: 700;
	color: #9a9a9a !important;
	flex-shrink: 0 !important;
}

.paau-zakat-input {
	flex: 1 !important;
	border: none !important;
	outline: none;
	font-size: 15px;
	font-weight: 600;
	color: var(--e-global-color-text, #231F20) !important;
	background: transparent !important;
	min-width: 0;
	width: 100%;
}

.paau-zakat-input-cluster {
	display: grid !important;
	grid-template-columns: 1fr auto auto;
	gap: 10px;
	align-items: center !important;
}

.paau-zakat-select {
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--e-global-color-text, #231F20) !important;
	background: #fafafa !important;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 10px;
	min-width: 88px;
	transition: border-color 0.15s ease;
}

.paau-zakat-select:focus {
	outline: none;
	border-color: var(--e-global-color-primary, #FF6A00) !important;
}

.paau-zakat-summary {
	background: #fafafa !important;
	border: 1.5px solid #e2e2e2 !important;
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 18px;
}

.paau-zakat-summary-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 10px 0;
	border-bottom: 1px solid #ececec !important;
}

.paau-zakat-summary-row:last-child {
	border-bottom: none !important;
}

.paau-zakat-summary-row span {
	font-size: 14px;
	color: #6b6b6b !important;
}

.paau-zakat-summary-row strong {
	font-size: 16px;
	color: var(--e-global-color-text, #231F20) !important;
}

.paau-zakat-zakatable {
	background: #FFF4E8 !important;
	margin: 10px -8px !important;
	padding: 12px 10px !important;
	border-radius: 10px;
	border-bottom: none !important;
}

.paau-zakat-zakatable strong {
	color: var(--e-global-color-primary, #FF6A00) !important;
	font-size: 18px;
}

.paau-zakat-owed-row {
	padding-top: 14px !important;
}

.paau-zakat-owed-row strong {
	color: var(--e-global-color-primary, #FF6A00) !important;
	font-size: 22px;
}

.paau-zakat-nisab-status.above-nisab .paau-zakat-nisab-status-text {
	color: #2F9E5C !important;
}

.paau-zakat-nisab-status.below-nisab .paau-zakat-nisab-status-text {
	color: #9a9a9a !important;
}

/* Full-width primary CTA — visually matches PAAU Donations'
   .paau-donation-submit solid-fill treatment, but keeps the
   .paau-donation-add-to-cart class (required for donation-form.js's
   delegated click handler) rather than duplicating that class's own ghost-
   button styling and fighting it with overrides. */
.paau-zakat-add-to-cart {
	width: 100% !important;
	flex: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px;
	background: var(--e-global-color-primary, #FF6A00) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 14px rgba(239, 124, 0, 0.32);
	transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.paau-zakat-add-to-cart svg {
	display: block !important;
	width: 18px;
	height: 18px;
	flex-shrink: 0 !important;
}

.paau-zakat-add-to-cart:hover:not(:disabled) {
	background: #E85F00 !important;
	transform: translateY(-1px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 20px rgba(239, 124, 0, 0.42);
}

.paau-zakat-add-to-cart:disabled {
	opacity: 0.55;
	cursor: default;
	box-shadow: none !important;
	transform: none !important;
}

.paau-zakat-add-to-cart.is-added {
	background: var(--e-global-color-primary, #FF6A00) !important;
}

/* Responsive */
@media (max-width: 1024px) {
	.paau-zakat-grid {
		grid-template-columns: 1fr;
	}
	.paau-zakat-results-sticky {
		position: static;
	}
}

@media (max-width: 768px) {
	.paau-zakat-row,
	.paau-zakat-input-cluster {
		grid-template-columns: 1fr;
	}
	.paau-zakat-select {
		width: 100%;
	}
	.paau-zakat-summary-row {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 4px;
	}
	.paau-zakat-tab {
		min-width: 45%;
	}
	.paau-zakat-tooltip-bubble {
		width: 180px;
	}
}