/**
 * Ataa — GiveWP Form Overrides
 *
 * These styles integrate GiveWP's output with the Ataa design system.
 * Strategy: Override visual styles without touching GiveWP's JS logic.
 *
 * Scoped under #give-form-wrap and .give-form to minimise specificity wars.
 *
 * @package Ataa
 */

/* ════════════════════════════════════════════
   FORM CONTAINER
════════════════════════════════════════════ */
#give-form-wrap,
.give-embed-form {
	background:    var(--ataa-surface);
	border:        1px solid var(--ataa-border);
	border-radius: var(--ataa-r);
	overflow:      hidden;
}

/* Remove GiveWP default box-shadow */
.give-form-wrap {
	box-shadow: none !important;
}

/* ════════════════════════════════════════════
   DONATION LEVELS (preset amount buttons)
════════════════════════════════════════════ */
.give-donation-levels-wrap ul {
	display:        flex;
	flex-wrap:      wrap;
	gap:            var(--ataa-space-2);
	list-style:     none;
	padding:        0;
	margin:         0;
}

.give-donation-levels-wrap li {
	flex: 1 0 calc(33% - var(--ataa-space-2));
	min-width: 70px;
}

.give-donation-levels-wrap .give-btn,
.give-donation-levels-wrap li a {
	display:       block;
	width:         100%;
	padding:       0.65rem 0.5rem;
	text-align:    center;
	border:        2px solid var(--ataa-border) !important;
	border-radius: var(--ataa-rb) !important;
	background:    var(--ataa-surface) !important;
	color:         var(--ataa-text) !important;
	font-family:   var(--ataa-font-body);
	font-weight:   700;
	font-size:     var(--ataa-text-base);
	cursor:        pointer;
	transition:    var(--ataa-transition);
}

.give-donation-levels-wrap .give-btn:hover,
.give-donation-levels-wrap li a:hover,
.give-donation-levels-wrap .give-btn.give-default-level,
.give-donation-levels-wrap li.give-default-level a {
	border-color: var(--ataa-gold) !important;
	background:   var(--ataa-gold-pale) !important;
	color:        var(--ataa-text) !important;
}

/* ════════════════════════════════════════════
   DONATION AMOUNT INPUT
════════════════════════════════════════════ */
.give-donation-amount {
	display:     flex;
	align-items: center;
	gap:         var(--ataa-space-2);
}

.give-currency-symbol {
	font-weight:  700;
	color:        var(--ataa-gold);
	font-size:    var(--ataa-text-xl);
}

#give-amount,
.give-text-input {
	width:         100% !important;
	padding:       0.85rem 1.1rem !important;
	border:        2px solid var(--ataa-border) !important;
	border-radius: var(--ataa-rb) !important;
	background:    var(--ataa-surface) !important;
	color:         var(--ataa-text) !important;
	font-family:   var(--ataa-font-body) !important;
	font-size:     var(--ataa-text-base) !important;
	transition:    border-color var(--ataa-transition) !important;
}

#give-amount:focus,
.give-text-input:focus {
	border-color: var(--ataa-gold) !important;
	outline:      none !important;
	box-shadow:   0 0 0 3px oklch(from var(--ataa-gold) l c h / 0.2) !important;
}

/* ════════════════════════════════════════════
   SUBMIT BUTTON
════════════════════════════════════════════ */
#give-purchase-button,
.give-submit {
	display:       block !important;
	width:         100% !important;
	padding:       1.1rem !important;
	background:    var(--ataa-btn-bg) !important;
	color:         var(--ataa-btn-text) !important;
	border:        none !important;
	border-radius: var(--ataa-rb) !important;
	font-family:   var(--ataa-font-body) !important;
	font-weight:   700 !important;
	font-size:     var(--ataa-text-lg) !important;
	cursor:        pointer !important;
	transition:    var(--ataa-transition) !important;
	text-align:    center !important;
}

#give-purchase-button:hover,
.give-submit:hover {
	filter:    brightness(1.09) !important;
	transform: translateY(-1px) !important;
	box-shadow: var(--ataa-shadow-md) !important;
}

/* ════════════════════════════════════════════
   PROGRESS GOAL BAR
════════════════════════════════════════════ */
.give-goal-progress {
	margin-block: var(--ataa-space-6);
}

.give-progress-bar {
	height:        10px !important;
	background:    var(--ataa-border) !important;
	border-radius: var(--ataa-rpill) !important;
	overflow:      hidden !important;
}

.give-progress-bar span {
	background:    var(--ataa-progress) !important;
	border-radius: var(--ataa-rpill) !important;
	transition:    width 1.2s ease !important;
}

.give-goal-text {
	font-family:  var(--ataa-font-body);
	color:        var(--ataa-muted);
	font-size:    var(--ataa-text-sm);
	margin-top:   var(--ataa-space-2);
}

/* ════════════════════════════════════════════
   DONOR FORM FIELDS (personal info)
════════════════════════════════════════════ */
.give-form .form-row label {
	font-family:  var(--ataa-font-body);
	font-weight:  700;
	font-size:    var(--ataa-text-sm);
	color:        var(--ataa-text);
}

.give-form .form-row input[type="text"],
.give-form .form-row input[type="email"],
.give-form .form-row input[type="tel"] {
	width:         100% !important;
	padding:       0.85rem 1.1rem !important;
	border:        2px solid var(--ataa-border) !important;
	border-radius: var(--ataa-rb) !important;
	background:    var(--ataa-surface) !important;
	color:         var(--ataa-text) !important;
	font-family:   var(--ataa-font-body) !important;
}

/* ════════════════════════════════════════════
   RECURRING DONATION TOGGLE
════════════════════════════════════════════ */
.give-recurring-donors-choice label {
	font-family: var(--ataa-font-body);
	color:       var(--ataa-text);
}

/* ════════════════════════════════════════════
   SUCCESS / THANK YOU PAGE
════════════════════════════════════════════ */
.give-receipt-container {
	background:    var(--ataa-surface);
	border:        1px solid var(--ataa-border);
	border-radius: var(--ataa-r);
	padding:       var(--ataa-space-8);
}

.give-receipt-container h3 {
	color: var(--ataa-primary);
}

/* ════════════════════════════════════════════
   RTL corrections for GiveWP
════════════════════════════════════════════ */
[dir="rtl"] .give-form fieldset,
[dir="rtl"] .give-form .give-label-above label {
	text-align: right;
}

[dir="rtl"] .give-currency-symbol {
	margin-left:  var(--ataa-space-2);
	margin-right: 0;
}

[dir="rtl"] #give-amount {
	text-align: right;
}