/* ==========================================================================
   Skarbonka — Frontend donation form styles
   All rules scoped under .skarbonka-form to prevent theme conflicts.
   Mobile-first. Three layout modifiers: --stacked | --inline | --card
   ========================================================================== */

/* ---- CSS custom properties (override in theme for easy re-theming) ---- */
:root {
	--skarbonka-primary:       #10b981;
	--skarbonka-primary-hover: #059669;
	--skarbonka-primary-light: #ecfdf5;
	--skarbonka-primary-ring:  rgba(16,185,129,.35);
	--skarbonka-text:          #064e3b;
	--skarbonka-text-muted:    #6b7280;
	--skarbonka-border:        #d1fae5;
	--skarbonka-border-input:  #d1d5db;
	--skarbonka-error:         #dc2626;
	--skarbonka-error-bg:      #fef2f2;
	--skarbonka-radius:        8px;
	--skarbonka-radius-sm:     4px;
	--skarbonka-shadow:        0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
	--skarbonka-shadow-card:   0 10px 25px -5px rgba(0,0,0,.1), 0 4px 10px -5px rgba(0,0,0,.06);
	--skarbonka-font:          inherit;
	--skarbonka-transition:    .18s ease;
}

/* ==========================================================================
   Base — shared by all three layouts
   ========================================================================== */

.skarbonka-form {
	box-sizing: border-box;
	font-family: var(--skarbonka-font);
	max-width: 600px;
}

.skarbonka-form *,
.skarbonka-form *::before,
.skarbonka-form *::after {
	box-sizing: inherit;
}

/* ---- Typography ---- */

.skarbonka-form-title {
	color: var(--skarbonka-text);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 .5rem;
}

.skarbonka-form-description {
	color: var(--skarbonka-text-muted);
	font-size: .95rem;
	margin: 0 0 1.25rem;
}

.skarbonka-form-info {
	background: #000000ab;
	border-radius: 24px;
	color: var(--skarbonka-primary-light);
	font-size: .875rem;
	line-height: 1.5;
	margin: 0 0 1.25rem;
	padding: 1.25rem 1.5rem;
	white-space: pre-line;
}

.skarbonka-field-label {
	color: var(--skarbonka-text);
	display: block;
	font-size: .875rem;
	font-weight: 600;
	margin-bottom: .375rem;
}

.skarbonka-field-hint,
.skarbonka-optional {
	color: var(--skarbonka-text-muted);
	font-size: .8rem;
	font-weight: 400;
}

.skarbonka-required {
	color: var(--skarbonka-error);
	margin-left: 2px;
}

/* Screen-reader only utility. */
.skarbonka-sr-only {
	border: 0;
	clip: rect(0,0,0,0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* ---- Form fields ---- */

.skarbonka-field {
	margin-bottom: 1rem;
}

.skarbonka-input,
.skarbonka-textarea {
	background: #fff;
	border: 1.5px solid var(--skarbonka-border-input);
	border-radius: var(--skarbonka-radius-sm);
	color: var(--skarbonka-text);
	display: block;
	font-family: inherit;
	font-size: .95rem;
	padding: .6rem .75rem;
	transition: border-color var(--skarbonka-transition), box-shadow var(--skarbonka-transition);
	width: 100%;
}

.skarbonka-input:focus,
.skarbonka-textarea:focus {
	border-color: var(--skarbonka-primary);
	box-shadow: 0 0 0 3px var(--skarbonka-primary-ring);
	outline: none;
}

.skarbonka-input[aria-invalid="true"],
.skarbonka-textarea[aria-invalid="true"] {
	border-color: var(--skarbonka-error);
	box-shadow: 0 0 0 3px rgba(220,38,38,.2);
}

.skarbonka-textarea {
	min-height: 80px;
	resize: vertical;
}

/* ---- Checkbox ---- */

.skarbonka-field--checkbox {
	margin-bottom: .75rem;
}

.skarbonka-checkbox-label {
	align-items: center;
	color: var(--skarbonka-text-muted);
	cursor: pointer;
	display: flex;
	font-size: .875rem;
	gap: .5rem;
}

.skarbonka-checkbox-label input[type="checkbox"] {
	accent-color: var(--skarbonka-primary);
	flex-shrink: 0;
	height: 1rem;
	width: 1rem;
}

/* ---- Amount buttons ---- */

.skarbonka-amount-section {
	margin-bottom: 1.25rem;
}

.skarbonka-amount-grid {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: .75rem;
}

@media (min-width: 480px) {
	.skarbonka-amount-grid {
		grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
	}
}

.skarbonka-amount-btn {
	background: #fff;
	border: 2px solid var(--skarbonka-primary);
	border-radius: 100px;
	color: var(--skarbonka-primary);
	cursor: pointer;
	font-family: inherit;
	font-size: .9rem;
	font-weight: 600;
	padding: .5rem .75rem;
	transition: background var(--skarbonka-transition), color var(--skarbonka-transition), transform var(--skarbonka-transition), box-shadow var(--skarbonka-transition);
}

.skarbonka-amount-btn:hover {
	background: var(--skarbonka-primary-light);
}

.skarbonka-amount-btn:focus-visible {
	box-shadow: 0 0 0 3px var(--skarbonka-primary-ring);
	outline: none;
}

.skarbonka-amount-btn.is-selected,
.skarbonka-amount-btn[aria-pressed="true"] {
	background: var(--skarbonka-primary);
	color: #fff;
	transform: scale(1.03);
}

.skarbonka-amount-btn--custom {
	border-style: dashed;
}

/* ---- Custom amount input ---- */

.skarbonka-custom-amount-wrap {
	margin-top: .5rem;
}

.skarbonka-currency-input-wrap {
	align-items: center;
	background: #fff;
	border: 1.5px solid var(--skarbonka-border-input);
	border-radius: var(--skarbonka-radius-sm);
	display: flex;
	transition: border-color var(--skarbonka-transition), box-shadow var(--skarbonka-transition);
}

.skarbonka-currency-input-wrap:focus-within {
	border-color: var(--skarbonka-primary);
	box-shadow: 0 0 0 3px var(--skarbonka-primary-ring);
}

.skarbonka-currency-symbol {
	color: var(--skarbonka-text-muted);
	font-size: 1rem;
	font-weight: 600;
	padding: 0 .5rem 0 .75rem;
	user-select: none;
}

.skarbonka-custom-input {
	background: transparent;
	border: none;
	flex: 1;
	font-family: inherit;
	font-size: 1rem;
	min-width: 0;
	outline: none;
	padding: .6rem .75rem .6rem 0;
}

/* Remove spinners from number input. */
.skarbonka-custom-input::-webkit-outer-spin-button,
.skarbonka-custom-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}
.skarbonka-custom-input[type=number] {
	-moz-appearance: textfield;
}

/* ---- Submit button ---- */

.skarbonka-submit-section {
	margin-top: 1.25rem;
}

.skarbonka-submit-btn {
	background: var(--skarbonka-primary);
	border: none;
	border-radius: var(--skarbonka-radius);
	color: #fff;
	cursor: pointer;
	display: block;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	padding: .8rem 1.5rem;
	position: relative;
	transition: background var(--skarbonka-transition), opacity var(--skarbonka-transition), transform var(--skarbonka-transition);
	width: 100%;
}

.skarbonka-submit-btn:hover:not(:disabled) {
	background: var(--skarbonka-primary-hover);
	transform: translateY(-1px);
}

.skarbonka-submit-btn:focus-visible {
	box-shadow: 0 0 0 3px var(--skarbonka-primary-ring);
	outline: none;
}

.skarbonka-submit-btn:disabled {
	cursor: not-allowed;
	opacity: .65;
}

/* Loading spinner via CSS — pseudo-element on the button. */
.skarbonka-submit-btn.is-loading {
	color: transparent;
}

.skarbonka-submit-btn.is-loading::after {
	animation: skarbonka-spin .7s linear infinite;
	border: 2.5px solid rgba(255,255,255,.4);
	border-top-color: #fff;
	border-radius: 50%;
	content: '';
	height: 18px;
	left: 50%;
	margin: -9px 0 0 -9px;
	position: absolute;
	top: 50%;
	width: 18px;
}

@keyframes skarbonka-spin {
	to { transform: rotate(360deg); }
}

/* ---- Secure badge ---- */

.skarbonka-secure-badge {
	align-items: center;
	color: var(--skarbonka-text-muted);
	display: flex;
	font-size: .8rem;
	gap: .3rem;
	justify-content: center;
	margin: .6rem 0 0;
}

.skarbonka-lock-icon {
	flex-shrink: 0;
	opacity: .6;
}

/* ---- Error message ---- */

.skarbonka-form-error {
	background: var(--skarbonka-error-bg);
	border: 1px solid var(--skarbonka-error);
	border-radius: var(--skarbonka-radius-sm);
	color: var(--skarbonka-error);
	font-size: .875rem;
	margin-top: .75rem;
	padding: .65rem .875rem;
}

/* ---- Progress bar (inside form) ---- */

.skarbonka-goal-progress {
	margin-bottom: 1.25rem;
}

.skarbonka-progress-track {
	background: var(--skarbonka-border);
	border-radius: 100px;
	height: 10px;
	overflow: hidden;
}

.skarbonka-progress-fill {
	background: linear-gradient(90deg, var(--skarbonka-primary), var(--skarbonka-primary-hover));
	border-radius: 100px;
	height: 100%;
	transform-origin: left center;
	transition: transform .6s cubic-bezier(.4,0,.2,1);
}

.skarbonka-progress--complete .skarbonka-progress-fill {
	background: linear-gradient(90deg, #f59e0b, #d97706);
}

.skarbonka-goal-meta {
	color: var(--skarbonka-text-muted);
	font-size: .82rem;
	margin: .4rem 0 0;
}

/* ==========================================================================
   Layout: Stacked (default — narrow single column)
   ========================================================================== */

.skarbonka-form--stacked {
	width: 100%;
}

.skarbonka-form--stacked .skarbonka-form-header {
	margin-bottom: 1.25rem;
}

/* ==========================================================================
   Layout: Inline (compact — for sidebars)
   ========================================================================== */

.skarbonka-form--inline {
	width: 100%;
}

.skarbonka-form--inline .skarbonka-amount-row {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem;
	margin-bottom: .75rem;
}

.skarbonka-form--inline .skarbonka-amount-btn {
	border-radius: 100px;
	font-size: .82rem;
	padding: .35rem .7rem;
}

.skarbonka-form--inline .skarbonka-inline-donor-row {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-bottom: .75rem;
}

@media (min-width: 480px) {
	.skarbonka-form--inline .skarbonka-inline-donor-row {
		align-items: flex-end;
		flex-direction: row;
	}

	.skarbonka-form--inline .skarbonka-inline-donor-row .skarbonka-field {
		flex: 1;
		margin-bottom: 0;
	}
}

/* ==========================================================================
   Layout: Card (boxed, two-column desktop)
   ========================================================================== */

.skarbonka-form--card {
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--skarbonka-shadow-card);
	overflow: hidden;
	width: 100%;
}

.skarbonka-form--card .skarbonka-card-header {
	background: linear-gradient(135deg, var(--skarbonka-primary), var(--skarbonka-primary-hover));
	padding: 1.5rem 1.75rem;
}

.skarbonka-form--card .skarbonka-card-header .skarbonka-form-title {
	color: #fff;
	margin-bottom: .25rem;
}

.skarbonka-form--card .skarbonka-card-header .skarbonka-form-description {
	color: rgba(255,255,255,.85);
	margin-bottom: 0;
}

.skarbonka-form--card .skarbonka-goal-progress--card {
	background: var(--skarbonka-primary-light);
	border-bottom: 1px solid var(--skarbonka-border);
	padding: .875rem 1.75rem;
	margin: 0;
}

.skarbonka-form--card .skarbonka-card-grid {
	display: grid;
	grid-template-columns: 1fr;
}

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

.skarbonka-form--card .skarbonka-card-col {
	padding: 1.5rem 1.75rem;
}

.skarbonka-form--card .skarbonka-card-col--amounts {
	background: var(--skarbonka-primary-light);
	border-right: 1px solid var(--skarbonka-border);
}

@media (max-width: 599px) {
	.skarbonka-form--card .skarbonka-card-col--amounts {
		border-right: none;
		border-bottom: 1px solid var(--skarbonka-border);
	}
}

/* --------------------------------------------------------------------- *
 * Recurring frequency toggle (Pro feature)
 * Renders inside the skarbonka_form_fields action — appears in all
 * 3 layouts (card, stacked, inline) but with layout-specific framing.
 * --------------------------------------------------------------------- */

.skarbonka-frequency-toggle-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	padding: 0.875rem 0;
}

.skarbonka-frequency-toggle-wrap label {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
	font-size: 0.95rem;
	color: var(--skarbonka-text, #1a1a1a);
	user-select: none;
}

.skarbonka-frequency-toggle-wrap input[type="radio"] {
	margin: 0;
	cursor: pointer;
}

/* Card layout: the frequency row spans the full grid width
   so it doesn't collide with the 2-column grid. */
.skarbonka-form--card .skarbonka-card-frequency-row {
	padding: 1rem 1.75rem;
	border-bottom: 1px solid var(--skarbonka-border);
	background: var(--skarbonka-surface, transparent);
}

.skarbonka-form--card .skarbonka-card-frequency-row .skarbonka-frequency-toggle-wrap {
	padding: 0;
}

/* Stacked / Inline layouts: small vertical breathing room.
   No special wrappers, so we just style the toggle directly. */
.skarbonka-form--stacked .skarbonka-frequency-toggle-wrap {
	margin: 0.5rem 0 1rem;
	padding: 0.75rem 0;
	border-top: 1px solid var(--skarbonka-border);
	border-bottom: 1px solid var(--skarbonka-border);
}

.skarbonka-form--inline .skarbonka-frequency-toggle-wrap {
	margin: 0.5rem 0;
	font-size: 0.875rem;
}

.skarbonka-form--card .skarbonka-amount-grid {
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 600px) {
	.skarbonka-form--card .skarbonka-amount-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.skarbonka-form--card .skarbonka-amount-btn {
	background: #fff;
}

.skarbonka-form--card .skarbonka-amount-btn.is-selected {
	background: var(--skarbonka-primary);
}

.skarbonka-form--card .skarbonka-amount-btn .skarbonka-amount-symbol {
	font-size: .75rem;
	vertical-align: super;
}

.skarbonka-form--card .skarbonka-amount-btn .skarbonka-amount-value {
	font-size: 1.1rem;
}

/* ==========================================================================
   Widgets: Recent donors list
   ========================================================================== */

.skarbonka-recent-donors {
	list-style: none;
	margin: 0;
	padding: 0;
}

.skarbonka-donor-item {
	align-items: flex-start;
	display: flex;
	gap: .75rem;
	padding: .6rem 0;
	border-bottom: 1px solid #f3f4f6;
}

.skarbonka-donor-item:last-child {
	border-bottom: none;
}

.skarbonka-donor-avatar {
	align-items: center;
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex-shrink: 0;
	font-size: .8rem;
	font-weight: 700;
	height: 36px;
	justify-content: center;
	width: 36px;
}

.skarbonka-donor-details {
	display: flex;
	flex-direction: column;
	font-size: .875rem;
	gap: .15rem;
	min-width: 0;
}

.skarbonka-donor-name {
	color: #111827;
	font-weight: 600;
}

.skarbonka-donor-amount {
	color: var(--skarbonka-primary-hover);
	font-weight: 600;
}

.skarbonka-donor-date {
	color: var(--skarbonka-text-muted);
	font-size: .8rem;
}

.skarbonka-donor-message {
	color: #4b5563;
	font-style: italic;
	font-size: .83rem;
}

.skarbonka-no-donors {
	color: var(--skarbonka-text-muted);
	font-size: .9rem;
}

/* ==========================================================================
   Widgets: Progress bar (standalone)
   ========================================================================== */

.skarbonka-progress-widget {
	margin: 0;
}

.skarbonka-progress-meta {
	color: var(--skarbonka-text-muted);
	font-size: .85rem;
	margin: .4rem 0 0;
}

.skarbonka-progress-pct {
	color: var(--skarbonka-text-muted);
}

/* ==========================================================================
   Widgets: Total raised / donation count inline tags
   ========================================================================== */

.skarbonka-total-raised,
.skarbonka-donation-count {
	font-weight: 700;
}

/* ==========================================================================
   Thank-you / cancellation page (rendered by ThankYouPage.php)
   ========================================================================== */

.skarbonka-return-page {
	align-items: center;
	display: flex;
	justify-content: center;
	min-height: 60vh;
	padding: 2rem 1rem;
}

.skarbonka-return-card {
	background: #000000ab;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 24px;
	box-shadow: 0 10px 25px -5px rgba(0,0,0,.35);
	max-width: 520px;
	padding: 3rem 2.5rem;
	text-align: center;
	width: 100%;
}

.skarbonka-return-icon {
	border-radius: 50%;
	display: inline-flex;
	margin-bottom: 1.25rem;
	padding: .875rem;
}

.skarbonka-return-icon--success { background: #ecfdf5; color: #059669; }
.skarbonka-return-icon--cancel  { background: #fef2f2; color: #dc2626; }

.skarbonka-return-title {
	font-size: 1.75rem;
	font-weight: 700;
	margin: 0 0 .75rem;
}

.skarbonka-return-message {
	color: var(--skarbonka-primary-light);
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0 0 .75rem;
}

.skarbonka-return-meta {
	color: rgba(236,253,245,.7);
	font-size: .9rem;
	margin: 0 0 .75rem;
}

.skarbonka-return-quote {
	background: rgba(255,255,255,.06);
	border-left: 3px solid #10b981;
	border-radius: 0 4px 4px 0;
	color: var(--skarbonka-primary-light);
	font-style: italic;
	margin: 1rem 0;
	padding: .75rem 1rem;
	text-align: left;
}

.skarbonka-return-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-top: 1.5rem;
}

.skarbonka-btn {
	border-radius: 8px;
	display: inline-block;
	font-size: .95rem;
	font-weight: 600;
	padding: .7rem 1.5rem;
	text-decoration: none;
	transition: background .15s, transform .15s;
}

.skarbonka-btn--primary              { background: #10b981; color: #fff; }
.skarbonka-btn--primary:hover        { background: #059669; color: #fff; transform: translateY(-1px); }
.skarbonka-btn--secondary            { background: #f1f5f9; color: #374151; }
.skarbonka-btn--secondary:hover      { background: #e2e8f0; }