/**
 * Saroj GiveWP Campaign Enhancer - Frontend styles.
 *
 * Dynamic values (colors, sizes) are injected as CSS custom properties on
 * :root by Shortcode::print_dynamic_css() -- see includes/class-shortcode.php.
 * Every var() below carries its own fallback value as the second argument
 * instead of redeclaring the custom properties on .sgce-grid-wrapper. A
 * local redeclaration on the wrapper itself would always win over the
 * settings-driven :root value (since it is the more specific match for
 * that exact element), which would silently make every admin color/size
 * setting a no-op -- so fallbacks live only inside var() here.
 */

.sgce-grid-wrapper {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--sgce-font-family, inherit);
}

.sgce-grid-wrapper * {
	box-sizing: border-box;
}

.sgce-grid {
	display: grid;
	grid-template-columns: repeat(var(--sgce-columns-desktop, 2), 1fr);
	gap: var(--sgce-gap, 24px);
	align-items: stretch;
}

@media (max-width: 1024px) {
	.sgce-grid {
		grid-template-columns: repeat(var(--sgce-columns-tablet, 2), 1fr);
	}
}

@media (max-width: 600px) {
	.sgce-grid {
		grid-template-columns: repeat(var(--sgce-columns-mobile, 1), 1fr);
	}
}

.sgce-grid-empty {
	padding: 32px;
	text-align: center;
	color: #666;
	font-family: var(--sgce-font-family, inherit);
}

/* ---------- Card ---------- */

.sgce-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: var(--sgce-border-width, 1px) solid var(--sgce-border-color, #e2e2e2);
	border-radius: var(--sgce-radius, 12px);
	overflow: hidden;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	will-change: transform;
}

.sgce-shadow-none .sgce-card {
	box-shadow: none;
}

.sgce-shadow-small .sgce-card {
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sgce-shadow-medium .sgce-card {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.sgce-shadow-large .sgce-card {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Hover animations - class applied on .sgce-grid-wrapper via inline "hover_animation" setting rendered by Shortcode::render(). */
.sgce-hover-lift .sgce-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.sgce-hover-shadow .sgce-card:hover {
	box-shadow: 0 16px 32px rgba(0, 0, 0, 0.16);
}

.sgce-hover-zoom .sgce-card:hover .sgce-card-img {
	transform: scale(1.06);
}

.sgce-card-image {
	position: relative;
	width: 100%;
	height: var(--sgce-image-height, 220px);
	overflow: hidden;
	background: #f2f2f2;
}

.sgce-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}

.sgce-card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 20px;
	gap: 12px;
}

.sgce-card-title {
	margin: 0;
	font-size: var(--sgce-title-size, 20px);
	line-height: 1.3;
	font-weight: 700;
}

.sgce-card-title a {
	color: inherit;
	text-decoration: none;
}

.sgce-card-title a:hover {
	text-decoration: underline;
}

.sgce-card-description {
	margin: 0;
	font-size: var(--sgce-body-size, 15px);
	line-height: 1.5;
	color: #555;
	flex-grow: 1;
}

.sgce-card-progress-section {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.sgce-progress-bar {
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: var(--sgce-goal-bg, #eeeeee);
	overflow: hidden;
}

.sgce-progress-bar-fill {
	height: 100%;
	width: 0;
	background: var(--sgce-progress-color, #e36f1e);
	border-radius: 999px;
	transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.sgce-progress-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 6px;
	font-size: calc(var(--sgce-body-size, 15px) - 2px);
	color: #444;
}

.sgce-raised strong {
	color: #111;
	font-size: var(--sgce-body-size, 15px);
}

.sgce-percentage {
	font-weight: 700;
	color: var(--sgce-progress-color, #e36f1e);
}

.sgce-donor-count {
	font-size: calc(var(--sgce-body-size, 15px) - 2px);
	color: #777;
}

.sgce-card-cta {
	margin-top: auto;
	padding-top: 4px;
}

/*
 * The primary Donate button is rendered by GiveWP core itself via the
 * [give_form display_style="button"] shortcode (see
 * GiveWP::render_donate_button() in PHP) so that its click/modal
 * behavior is guaranteed to match GiveWP's own implementation. We style
 * it here by targeting GiveWP's own ".give-btn" class rather than
 * re-implementing the button, so the visual result still matches the
 * colors configured in Dashboard -> Saroj Campaign Enhancer.
 *
 * GiveWP core and/or the active theme (e.g. BeTheme) ship their own
 * default styling for ".give-btn" / generic button elements, which can
 * beat a plugin stylesheet in the cascade regardless of correct CSS
 * variable values, since specificity/load-order isn't something this
 * plugin can fully control on every site. The selector chain here is
 * intentionally verbose (".sgce-grid .sgce-card .sgce-card-cta .give-btn")
 * to raise specificity, and the color/shape-related properties use
 * !important as a deliberate, scoped override -- limited to exactly the
 * properties admins configure in the settings screen, not applied
 * blanket-style to the whole button.
 *
 * ".sgce-donate-btn" below is a fallback used only when no donation form
 * could be resolved and the card links to the campaign permalink instead.
 */
.sgce-grid .sgce-card .sgce-card-cta .give-btn,
.sgce-card-cta .give-btn,
.sgce-donate-btn,
button.sgce-donate-btn {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px 18px;
	background: var(--sgce-button-color, #e36f1e) !important;
	color: var(--sgce-button-text-color, #ffffff) !important;
	border: none !important;
	border-radius: var(--sgce-button-radius, 6px) !important;
	font-size: var(--sgce-body-size, 15px);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.sgce-grid .sgce-card .sgce-card-cta .give-btn:hover,
.sgce-card-cta .give-btn:hover,
.sgce-donate-btn:hover,
button.sgce-donate-btn:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
	color: var(--sgce-button-text-color, #ffffff) !important;
}

/* GiveWP sometimes wraps its button-display form in a container div;
   make sure that wrapper doesn't add unwanted margins inside the card. */
.sgce-card-cta form,
.sgce-card-cta .give-form-wrap,
.sgce-card-cta .give-btn-wrap {
	margin: 0;
	width: 100%;
}

/* ---------- Collapsible donate form (used when GiveWP renders a full
   onpage form instead of a compact button -- see
   GiveWP::render_donate_button() in PHP) ---------- */

.sgce-donate-collapse {
	width: 100%;
}

.sgce-donate-trigger {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px 18px;
	color: var(--sgce-button-text-color, #ffffff) !important;
	border: none;
	border-radius: var(--sgce-button-radius, 6px);
	font-size: var(--sgce-body-size, 15px);
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.2s ease;
}

.sgce-donate-trigger:hover {
	filter: brightness(0.92);
	transform: translateY(-1px);
}

.sgce-donate-form-wrap {
	margin-top: 16px;
}

.sgce-donate-form-wrap[hidden] {
	display: none;
}

/* ---------- Load more ---------- */

.sgce-load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

.sgce-load-more-btn {
	padding: 12px 28px;
	background: transparent;
	border: 2px solid var(--sgce-button-color, #e36f1e);
	color: var(--sgce-button-color, #e36f1e);
	border-radius: var(--sgce-button-radius, 6px);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.sgce-load-more-btn:hover {
	background: var(--sgce-button-color, #e36f1e);
	color: var(--sgce-button-text-color, #ffffff);
}

.sgce-load-more-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

.sgce-error {
	padding: 12px;
	background: #fff3f3;
	border: 1px solid #f5c2c2;
	color: #a94442;
	border-radius: 6px;
}