/* EcoPerks Gift Card Redeem — styled to match the OceanWP site theme.
 * Tokens mirror the theme: primary #13aff0 (hover #0b7cac), text #4a4a4a,
 * headings #333, borders #f1f1f1/#e9e9e9/#ddd, uppercase theme buttons. */
:root {
	--epsar-primary: #81D742;
	--epsar-primary-dark: #6AB036;
	--epsar-text: #4a4a4a;
	--epsar-heading: #333;
	--epsar-border: #e9e9e9;
	--epsar-border-light: #f1f1f1;
	--epsar-input-border: #ddd;
	--epsar-muted: #929292;
}

.epsar-gc { margin: 1.5rem 0; color: var(--epsar-text); }

.epsar-gc-balance {
	font-size: 14px;
	margin-bottom: 1rem;
	padding: .7rem 1rem;
	background: #f8f8f8;
	border-left: 3px solid var(--epsar-primary);
	border-radius: 2px;
}
.epsar-gc-balance strong { color: var(--epsar-heading); }
.epsar-gc-balance--guest a { color: var(--epsar-primary); font-weight: 600; }
.epsar-gc-balance--guest a:hover { color: var(--epsar-primary-dark); }

/* Filter bar */
.epsar-gc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: .9rem 1.1rem;
	align-items: flex-end;
	margin-bottom: 1.25rem;
	padding: 1rem;
	background: #f8f8f8;
	border: 1px solid var(--epsar-border);
	border-radius: 3px;
}
.epsar-gc-filter { display: flex; flex-direction: column; gap: .3rem; }
.epsar-gc-filter label {
	font-size: 12px;
	font-weight: 600;
	color: var(--epsar-heading);
	letter-spacing: .02em;
	text-transform: uppercase;
}
.epsar-gc-filter input[type=search],
.epsar-gc-filter select {
	min-height: 40px;
	padding: 6px 12px;
	border: 1px solid var(--epsar-input-border);
	border-radius: 3px;
	background: #fff;
	min-width: 175px;
	font-size: 14px;
	color: var(--epsar-heading);
	transition: all 0.3s ease;
}
.epsar-gc-filter input[type=search]:focus,
.epsar-gc-filter select:focus { border-color: #bbb; outline: 0; }
.epsar-gc-filter--check { flex-direction: row; align-items: center; }
.epsar-gc-filter--check label {
	display: inline-flex; align-items: center; gap: .4rem;
	font-weight: 600; color: var(--epsar-heading);
}
.epsar-gc-noresults { color: var(--epsar-muted); font-style: italic; margin: .5rem 0 1rem; }

/* Card country availability */
.epsar-gc-card-countries {
	font-size: 12px;
	color: #777;
	background: #f5f5f5;
	border-radius: 2px;
	padding: .25rem .5rem;
	margin-top: .1rem;
}

/* Catalogue grid */
.epsar-gc-grid {
	display: grid;
	grid-template-columns: repeat(var(--epsar-gc-cols, 3), 1fr);
	gap: 1.25rem;
}
@media (max-width: 900px) { .epsar-gc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .epsar-gc-grid { grid-template-columns: 1fr; } }

.epsar-gc-card {
	border: 1px solid var(--epsar-border);
	border-top: 3px solid var(--epsar-primary);
	border-radius: 3px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	transition: box-shadow .3s ease, transform .3s ease;
}
.epsar-gc-card:hover { box-shadow: 0 2px 7px rgba(0,0,0,.1); transform: translateY(-2px); }

.epsar-gc-card-media {
	height: 120px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .75rem;
	border-bottom: 1px solid var(--epsar-border-light);
}
.epsar-gc-card-media img { max-height: 100px; max-width: 90%; object-fit: contain; }
.epsar-gc-card-placeholder { color: var(--epsar-heading); font-weight: 600; font-size: 18px; text-align: center; }

.epsar-gc-card-body { padding: 1rem; display: flex; flex-direction: column; gap: .45rem; flex: 1; }
.epsar-gc-card-title { margin: 0; font-size: 17px; font-weight: 600; color: var(--epsar-heading); }
.epsar-gc-card-value { font-size: 20px; font-weight: 600; color: var(--epsar-heading); }
.epsar-gc-card-desc { font-size: 13px; color: #666; }
.epsar-gc-card-cost {
	margin-top: auto;
	font-weight: 600;
	color: var(--epsar-primary);
}

/* Buttons — mirror the theme .button (uppercase, letter-spaced) */
.epsar-gc-btn {
	display: inline-block;
	font-family: inherit;
	background-color: var(--epsar-primary);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	line-height: 1;
	padding: 14px 20px;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s ease;
}
.epsar-gc-btn:hover { background-color: var(--epsar-primary-dark); color: #fff; }
.epsar-gc-btn--disabled,
.epsar-gc-btn:disabled {
	background-color: #e5e5e5; color: #999; cursor: not-allowed; opacity: 1;
}
.epsar-gc-btn--disabled:hover { background-color: #e5e5e5; color: #999; }
/* Secondary / ghost — deliberately NOT the primary colour */
.epsar-gc-btn--ghost {
	background-color: transparent;
	color: var(--epsar-text);
	border: 1px solid var(--epsar-input-border);
}
.epsar-gc-btn--ghost:hover { background-color: #f8f8f8; color: var(--epsar-heading); }
.epsar-gc-btn--login { background-color: var(--epsar-primary); color: #fff; }
.epsar-gc-btn--login:hover { background-color: var(--epsar-primary-dark); color: #fff; }

.epsar-gc-login-prompt { padding: 1.25rem; background: #f8f8f8; border-radius: 3px; }
.epsar-gc-empty { color: var(--epsar-muted); }

/* Modal */
.epsar-gc-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 1rem;
}
.epsar-gc-modal[hidden] { display: none; }
.epsar-gc-modal-box {
	background: #fff;
	border-radius: 3px;
	max-width: 440px;
	width: 100%;
	padding: 1.5rem;
	position: relative;
	box-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.epsar-gc-modal-box h3 { margin-top: 0; color: var(--epsar-heading); font-weight: 600; }
.epsar-gc-modal-close {
	position: absolute; top: .5rem; right: .75rem;
	background: none; border: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--epsar-muted);
}
.epsar-gc-modal-close:hover { color: var(--epsar-heading); }
.epsar-gc-modal-summary { color: #555; }
.epsar-gc-field { margin: .9rem 0; }
.epsar-gc-field label { display: block; font-weight: 600; margin-bottom: .3rem; color: var(--epsar-heading); }
.epsar-gc-field input[type=text],
.epsar-gc-field input[type=email],
.epsar-gc-field textarea {
	width: 100%;
	min-height: 40px;
	padding: 6px 12px;
	border: 1px solid var(--epsar-input-border);
	border-radius: 3px;
	box-sizing: border-box;
	font-size: 14px;
	transition: all 0.3s ease;
}
.epsar-gc-field input:focus,
.epsar-gc-field textarea:focus { border-color: #bbb; outline: 0; }
.epsar-gc-delivery-options label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 400; margin-right: 1rem; }
.epsar-gc-modal-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.epsar-gc-modal-msg { min-height: 1.2rem; font-size: 13px; }
.epsar-gc-modal-msg.is-error { color: #b94a48; }
.epsar-gc-modal-msg.is-success { color: var(--epsar-primary-dark); font-weight: 600; }

/* History table — mirror theme table conventions */
.epsar-gc-history { margin-top: 2rem; }
.epsar-gc-history-title { color: var(--epsar-heading); font-weight: 600; }
.epsar-gc-history-table { width: 100%; border-collapse: collapse; }
.epsar-gc-history-table th,
.epsar-gc-history-table td {
	text-align: left; padding: 10px; border-bottom: 1px solid var(--epsar-border); font-size: 14px;
}
.epsar-gc-history-table th {
	border-bottom: 2px solid var(--epsar-primary);
	color: var(--epsar-heading);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .02em;
}
.epsar-gc-code {
	background: #f1f9ea;
	border: 1px dashed var(--epsar-primary);
	border-radius: 2px;
	padding: .1rem .35rem;
	font-family: monospace;
	font-size: 13px;
}

/* Status badges (shared) */
.epsar-gc-status {
	display: inline-block; padding: .15rem .55rem; border-radius: 2px; font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .02em;
}
.epsar-gc-status--pending   { background: #fff3cd; color: #7a5c00; }
.epsar-gc-status--approved  { background: #e2f4fd; color: #0b6a92; }
.epsar-gc-status--fulfilled { background: #e6f4d7; color: #4a6b1e; }
.epsar-gc-status--rejected,
.epsar-gc-status--cancelled { background: #f8d7da; color: #842029; }