/* =========================================================
   DW Gift Card — Frontend Styles
   ========================================================= */

/* ---- Valor livre — price slot replacement ----
   Uses <span> elements so the markup stays valid when WooCommerce wraps the
   price in a <p class="price"> (classic single-product template). */

.price:has(.dwgc-price-box),
.wc-block-components-product-price:has(.dwgc-price-box) {
	all: revert;
	display: block;
	margin: 0 0 20px;
}

/* Extra class on <p class="price"> via woocommerce_product_price_class — no :has() needed. */
p.price.dwgc-price-slot {
	display: block !important;
	box-sizing: border-box;
	margin: 0 0 20px !important;
	padding: 0 !important;
	max-width: 100%;
	font-size: initial !important;
	font-weight: inherit !important;
	line-height: normal !important;
	color: inherit !important;
}

p.price.dwgc-price-slot > .dwgc-price-box {
	max-width: 100%;
}

.dwgc-price-box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 0 20px;
	padding: 16px 20px;
	background: linear-gradient(135deg, #fff8ec 0%, #fff 100%);
	border: 1px solid #E6D39A;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(201, 168, 76, 0.08);
	font-size: initial;
	font-weight: initial;
	color: inherit;
}

.dwgc-price-box__label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #8a7850;
	margin: 0;
}

.dwgc-price-box__label .required {
	color: #c00;
	margin-left: 3px;
}

.dwgc-price-box__input-wrap {
	display: flex;
	align-items: stretch;
	background: #fff;
	border: 2px solid #C9A84C;
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.dwgc-price-box__input-wrap:focus-within {
	border-color: #b08e34;
	box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.18);
}

.dwgc-price-box__currency {
	display: flex;
	align-items: center;
	padding: 0 14px;
	background: #C9A84C;
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 1px;
}

.dwgc-price-box__input {
	flex: 1;
	min-width: 0;
	width: 100%;
	padding: 10px 16px;
	border: none;
	background: transparent;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: #1a1a2e;
	font-family: inherit;
}

.dwgc-price-box__input:focus {
	outline: none;
	box-shadow: none;
}

.dwgc-price-box__input::-webkit-outer-spin-button,
.dwgc-price-box__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dwgc-price-box__input[type="number"] {
	-moz-appearance: textfield;
	appearance: textfield;
}

.dwgc-price-box__input.dwgc-error {
	color: #c00;
}

.dwgc-price-box:has(.dwgc-error) .dwgc-price-box__input-wrap {
	border-color: #c00;
	animation: dwgc-shake 0.3s ease;
}

.dwgc-price-box__hint {
	display: block;
	font-size: 13px;
	color: #8a7850;
}

.dwgc-price-box__hint .woocommerce-Price-amount {
	font-weight: 700;
	color: #5a4010;
}

@media (max-width: 520px) {
	.dwgc-price-box {
		padding: 14px 16px;
	}

	.dwgc-price-box__currency {
		padding: 0 10px;
		font-size: 18px;
	}

	.dwgc-price-box__input {
		font-size: 24px;
		padding: 8px 12px;
	}
}

/* ---- Fields on Product Page ---- */

.dwgc-fields {
	margin: 20px 0;
	padding: 20px 0;
	border-top: 1px solid #e5e5e5;
}

.dwgc-field {
	margin-bottom: 16px;
}

.dwgc-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	font-size: 14px;
	color: #333;
}

.dwgc-field label .required {
	color: #c00;
	margin-left: 3px;
}

.dwgc-input,
.dwgc-textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	transition: border-color 0.2s, box-shadow 0.2s;
	background: #fff;
	color: #333;
}

.dwgc-input:focus,
.dwgc-textarea:focus {
	outline: none;
	border-color: #C9A84C;
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.dwgc-input.dwgc-error,
.dwgc-textarea.dwgc-error {
	border-color: #c00;
	animation: dwgc-shake 0.3s ease;
}

@keyframes dwgc-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-6px); }
	75% { transform: translateX(6px); }
}

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

/* ---- Phone field with fixed +55 prefix ---- */

.dwgc-phone-wrapper {
	display: flex;
	align-items: stretch;
	border: 1px solid #ccc;
	border-radius: 4px;
	overflow: hidden;
	transition: border-color 0.2s, box-shadow 0.2s;
	background: #fff;
}

.dwgc-phone-wrapper:focus-within {
	border-color: #C9A84C;
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.dwgc-phone-prefix {
	display: flex;
	align-items: center;
	padding: 0 10px;
	background: #f5f5f5;
	border-right: 1px solid #ddd;
	font-size: 13px;
	font-weight: 600;
	color: #444;
	white-space: nowrap;
	user-select: none;
	cursor: default;
}

.dwgc-input--phone {
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex: 1;
}

.dwgc-input--phone:focus {
	outline: none;
	box-shadow: none !important;
}

/* Error state on the wrapper */
.dwgc-input--phone.dwgc-error {
	border: none !important;
}

.dwgc-phone-wrapper:has( .dwgc-input--phone.dwgc-error ) {
	border-color: #c00;
	animation: dwgc-shake 0.3s ease;
}

/* ---- Hint text ---- */

.dwgc-hint {
	display: block;
	font-size: 12px;
	color: #777;
	margin-top: 4px;
}

.dwgc-char-count {
	display: block;
	font-size: 12px;
	color: #777;
	margin-top: 4px;
	text-align: right;
}

.dwgc-char-count.dwgc-limit-near {
	color: #e68a00;
}

.dwgc-char-count.dwgc-limit-reached {
	color: #c00;
	font-weight: bold;
}

/* ---- Design Cards ---- */

.dwgc-designs {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.dwgc-design-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 110px;
	height: 80px;
	border: 3px solid transparent;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
	padding: 8px;
	text-align: center;
}

.dwgc-design-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

.dwgc-design-card--active {
	box-shadow: 0 0 0 3px rgba(0,0,0,.25);
	transform: translateY(-2px);
}

.dwgc-design-radio {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.dwgc-design-preview {
	font-size: 24px;
	display: block;
	margin-bottom: 4px;
}

.dwgc-design-label {
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* ---- Error Messages ---- */

.dwgc-field-error {
	display: block;
	color: #c00;
	font-size: 12px;
	margin-top: 4px;
}

/* ---- Checkout: Redeem Section ---- */

.dwgc-redeem-section {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 16px;
}

.dwgc-redeem-section h4 {
	margin: 0 0 12px;
	font-size: 15px;
	color: #333;
}

.dwgc-redeem-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 500;
	color: #333;
	cursor: pointer;
}

.dwgc-redeem-toggle input[type="checkbox"] {
	margin: 0;
}

.dwgc-redeem-body {
	display: none;
	margin-top: 14px;
}

.dwgc-redeem-body.is-open {
	display: block;
}

.dwgc-redeem-form {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
	max-width: 100%;
}

.dwgc-redeem-form input[type="text"] {
	flex: 1;
	display: block;
	width: 100%;
	min-width: 0;
	max-width: none;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.dwgc-redeem-form .button,
#dwgc_apply_btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

.dwgc-redeem-form input[type="text"]:focus {
	outline: none;
	border-color: #C9A84C;
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

#dwgc-redeem-notice {
	margin-top: 10px;
	font-size: 13px;
}

#dwgc-redeem-notice.dwgc-notice--success {
	color: #2e7d32;
}

#dwgc-redeem-notice.dwgc-notice--error {
	color: #c00;
}

.dwgc-applied-codes {
	list-style: none;
	padding: 0;
	margin: 12px 0 0;
	width: 100%;
}

.dwgc-applied-codes li {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 6px 0;
	border-bottom: 1px dashed #e0e0e0;
}

.dwgc-applied-codes li:last-child {
	border-bottom: none;
}

.dwgc-code-badge {
	flex: 1 1 auto;
	min-width: 0;
	font-family: monospace;
	font-size: 14px;
	font-weight: bold;
	background: #f0ebe0;
	border: 1px solid #C9A84C;
	color: #5a4010;
	padding: 3px 10px;
	border-radius: 3px;
	letter-spacing: 1px;
}

.woocommerce-checkout-review-order-table .dwgc-redeem-row th,
.shop_table .dwgc-redeem-row th,
.dwgc-redeem-row th {
	width: 100% !important;
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.dwgc-remove-code {
	background: none;
	border: none;
	color: #c00;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0 4px;
}

/* ---- Public Card View ---- */

.dwgc-public-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
}

.dwgc-public-card {
	max-width: 480px;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(0,0,0,.18);
}

/* Classic design */
.dwgc-public-card--classic {
	background: #F5F0E8;
	border: 4px solid #C9A84C;
}

.dwgc-public-card--classic .dwgc-public-header {
	background: #1a1a2e;
	padding: 28px 32px;
	text-align: center;
}

.dwgc-public-card--classic .dwgc-public-shop-name,
.dwgc-public-card--classic .dwgc-public-gift-label {
	color: #C9A84C;
	margin: 0;
}

.dwgc-public-card--classic .dwgc-public-shop-name {
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
}

.dwgc-public-card--classic .dwgc-public-gift-label {
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-top: 6px;
}

.dwgc-public-body {
	padding: 24px 32px;
	text-align: center;
}

.dwgc-public-to-label,
.dwgc-public-from-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #8a7850;
	margin: 0 0 4px;
}

.dwgc-public-recipient {
	font-size: 28px;
	margin: 0 0 16px;
	color: #3a2e1c;
}

.dwgc-public-amount {
	font-size: 52px;
	font-weight: bold;
	color: #C9A84C;
	margin: 0 0 16px;
	line-height: 1;
}

.dwgc-public-sender {
	font-size: 18px;
	font-style: italic;
	color: #5a4030;
	margin: 0 0 16px;
}

.dwgc-public-message {
	border-left: 3px solid #C9A84C;
	background: #ece7d8;
	padding: 12px 16px;
	margin: 0 0 16px;
	border-radius: 0 4px 4px 0;
	text-align: left;
	font-style: italic;
	color: #5a4a30;
	font-size: 14px;
	line-height: 1.6;
}

.dwgc-public-code-wrap {
	background: #1a1a2e;
	border-radius: 8px;
	padding: 16px;
	margin: 0 0 16px;
}

.dwgc-public-code-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #C9A84C;
	margin: 0 0 8px;
}

.dwgc-public-code {
	font-family: monospace;
	font-size: 22px;
	font-weight: bold;
	color: #C9A84C;
	letter-spacing: 4px;
	display: block;
}

.dwgc-public-expiry {
	font-size: 12px;
	color: #aaa;
	margin: 8px 0 0;
}

.dwgc-public-balance {
	font-size: 14px;
	color: #555;
}

.dwgc-public-status {
	font-size: 14px;
	font-weight: bold;
	padding: 8px 16px;
	border-radius: 4px;
	display: inline-block;
}

.dwgc-status--used {
	background: #f0f0f0;
	color: #666;
}

.dwgc-status--expired {
	background: #fff0f0;
	color: #c00;
}

.dwgc-public-actions {
	display: flex;
	gap: 10px;
	padding: 0 32px 28px;
	justify-content: center;
}

/* ---- Buttons ---- */

.dwgc-btn {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: bold;
	cursor: pointer;
	border: none;
	text-decoration: none;
	transition: opacity 0.15s, transform 0.1s;
}

.dwgc-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.dwgc-btn--primary {
	background: #C9A84C;
	color: #fff;
}

.dwgc-btn--secondary {
	background: #f0ebe0;
	color: #5a4010;
	border: 1px solid #C9A84C;
}

/* ---- Logo on public page ---- */

.dwgc-public-logo {
	max-width: 160px;
	max-height: 60px;
	display: block;
	margin: 0 auto 8px;
}

/* ---- Design Preview (Product Page) ---- */

.dwgc-design-preview-box {
	margin-top: 16px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0,0,0,.12);
	transition: opacity 0.3s;
}

.dwgc-design-preview-box--classic { background: #F5F0E8; border: 3px solid #C9A84C; }
.dwgc-design-preview-box--birthday { background: #fafaff; border: 3px solid #6C3FC5; }
.dwgc-design-preview-box--minimal { background: #fff; border: 3px solid #111; }

.dwgc-preview-header {
	padding: 14px 20px;
	text-align: center;
}
.dwgc-preview-header--classic { background: #1a1a2e; }
.dwgc-preview-header--birthday { background: linear-gradient(135deg,#6C3FC5,#FF6B6B); }
.dwgc-preview-header--minimal { background: #111; }

.dwgc-preview-shop-name {
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 2px;
}
.dwgc-design-preview-box--classic .dwgc-preview-shop-name,
.dwgc-design-preview-box--birthday .dwgc-preview-shop-name,
.dwgc-design-preview-box--minimal .dwgc-preview-shop-name { color: #fff; }

.dwgc-preview-body { padding: 16px 20px; }

.dwgc-preview-to { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; margin: 0 0 3px; }
.dwgc-design-preview-box--classic .dwgc-preview-to { color: #8a7850; }
.dwgc-design-preview-box--birthday .dwgc-preview-to { color: #9B59B6; }
.dwgc-design-preview-box--minimal .dwgc-preview-to { color: #999; }

.dwgc-preview-recipient { font-size: 20px; font-weight: bold; margin: 0 0 8px; }
.dwgc-design-preview-box--classic .dwgc-preview-recipient { color: #3a2e1c; }
.dwgc-design-preview-box--birthday .dwgc-preview-recipient { color: #2c2c54; }
.dwgc-design-preview-box--minimal .dwgc-preview-recipient { color: #111; }

.dwgc-preview-amount { font-size: 32px; font-weight: bold; margin: 0 0 8px; line-height: 1; }
.dwgc-design-preview-box--classic .dwgc-preview-amount { color: #C9A84C; }
.dwgc-design-preview-box--birthday .dwgc-preview-amount { color: #FF6B6B; }
.dwgc-design-preview-box--minimal .dwgc-preview-amount { color: #111; }

.dwgc-preview-code-block {
	border-radius: 6px;
	padding: 8px 14px;
	font-family: monospace;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 2px;
	display: inline-block;
	margin-top: 8px;
}
.dwgc-design-preview-box--classic .dwgc-preview-code-block { background: #1a1a2e; color: #C9A84C; }
.dwgc-design-preview-box--birthday .dwgc-preview-code-block { background: #6C3FC5; color: #fff; }
.dwgc-design-preview-box--minimal .dwgc-preview-code-block { background: #111; color: #fff; }

/* ---- Public Card: Envelope Opening Animation ---- */

@keyframes dwgc-envelope-open {
	0%   { transform: translateY(40px) scale(0.92); opacity: 0; }
	60%  { transform: translateY(-8px) scale(1.02); opacity: 1; }
	100% { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes dwgc-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.dwgc-public-wrapper {
	animation: dwgc-fade-in 0.4s ease;
}

.dwgc-public-card {
	animation: dwgc-envelope-open 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	.dwgc-public-wrapper,
	.dwgc-public-card {
		animation: none;
	}
}

/* ---- PDF Download Button ---- */

.dwgc-pdf-download {
	margin-top: 8px;
}

/* ---- Admin: KPI Report Grid ---- */

.dwgc-kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	margin: 20px 0 32px;
}

.dwgc-kpi {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px;
	text-align: center;
}

.dwgc-kpi--highlight {
	background: #f0ebe0;
	border-color: #C9A84C;
}

.dwgc-kpi__value {
	display: block;
	font-size: 26px;
	font-weight: bold;
	color: #1a1a2e;
	line-height: 1.1;
}

.dwgc-kpi__label {
	display: block;
	font-size: 12px;
	color: #777;
	margin-top: 6px;
}

/* ---- Card status badges (public view) ---- */

.dwgc-public-status {
	margin: 16px 0 0;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.dwgc-status--used {
	background: #e8f5e9;
	color: #2e7d32;
}

.dwgc-status--expired {
	background: #fff3e0;
	color: #e65100;
}

.dwgc-status--no-balance {
	background: #fce4ec;
	color: #c62828;
}

.dwgc-status--cancelled {
	background: #f5f5f5;
	color: #616161;
}

/* ---- Responsive ---- */

@media (max-width: 520px) {
	.dwgc-designs {
		gap: 8px;
	}

	.dwgc-design-card {
		width: 90px;
		height: 70px;
	}

	.dwgc-redeem-form {
		flex-direction: column;
	}

	.dwgc-public-amount {
		font-size: 40px;
	}

	.dwgc-public-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.dwgc-btn {
		text-align: center;
	}
}