/* Lista de Presentes — frontend */

/* Botão adicionar à lista: mesmo template do add-to-cart (inline-flex, ícone à esquerda) */
.cagr-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	white-space: normal;
	text-align: center;
}

/* Single product: botão DENTRO do form.cart, ao lado direito do "Adicionar ao
   carrinho". Visual idêntico ao add-to-cart — o tema estiliza o
   .single_add_to_cart_button com as vars --btn-accented-*; replicamos aqui.
   (NÃO usamos a classe do tema no botão: o JS do WoodMart faz
   $form.find('.single_add_to_cart_button') e o loading/added vazaria p/ 2 botões.) */
form.cart .cagr-add-btn-single {
	flex: 0 0 auto;   /* vence form.cart > * { flex: 1 1 100% } do tema */
	margin-top: 0;
	white-space: nowrap;
}
.cagr-add-btn-single.button {
	border-radius: var(--btn-accented-brd-radius);
	color: var(--btn-accented-color);
	box-shadow: var(--btn-accented-box-shadow);
	background-color: var(--btn-accented-bgcolor);
	text-transform: var(--btn-accented-transform, var(--btn-transform, uppercase));
	font-weight: var(--btn-accented-font-weight, var(--btn-font-weight, 600));
	font-family: var(--btn-accented-font-family, var(--btn-font-family, inherit));
}
.cagr-add-btn-single.button:hover,
.cagr-add-btn-single.button:focus {
	color: var(--btn-accented-color-hover);
	box-shadow: var(--btn-accented-box-shadow-hover);
	background-color: var(--btn-accented-bgcolor-hover);
}

/* Botão da lista na sticky bar do WoodMart (produtos variáveis/agrupados:
   a sticky não tem form de variações, então é um link dourado p/ o produto) */
.cagr-sticky-btn.button {
	background-color: var(--btn-accented-bgcolor, #c5a059);
	color: var(--btn-accented-color, #fff);
	border-radius: var(--btn-accented-brd-radius, 5px);
	white-space: nowrap;
	/* respiro após o botão de compra do tema (a sticky não tem gap flex) */
	margin-inline-start: 10px;
}
.cagr-sticky-btn.button:hover,
.cagr-sticky-btn.button:focus {
	background-color: var(--btn-accented-bgcolor-hover, #ceb95c);
	color: var(--btn-accented-color, #fff);
}
@media (max-width: 600px) {
	.cagr-sticky-btn .cagr-btn-text {
		display: none;
	}
}
.cagr-add-btn .cagr-btn-icon,
.cagr-buy-btn .cagr-btn-icon,
.cagr-view-btn svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}
.cagr-add-btn-loop {
	margin: 10px 0 0;
	width: auto;
}

/* Estado "já na lista": fundo verde + check */
.cagr-add-btn.cagr-added,
.cagr-add-btn[disabled].cagr-added {
	background: #e8f5e9;
	color: #2e7d32;
	border-color: #a5d6a7;
	opacity: 1;
	cursor: not-allowed;
}
.cagr-add-btn.cagr-added:hover,
.cagr-add-btn[disabled].cagr-added:hover {
	background: #e8f5e9;
	color: #2e7d32;
	border-color: #a5d6a7;
}

.cagr-no-list {
	font-size: 0.9em;
	opacity: 0.85;
}

/* CTA "criar lista" no endpoint sem lista */
.cagr-no-list-cta {
	text-align: center;
	padding: 40px 24px;
	background: #fafafa;
	border: 1px dashed #e3e3e3;
	border-radius: 8px;
}
.cagr-no-list-cta h3 {
	margin: 0 0 8px;
	font-size: 1.2em;
	font-weight: 600;
}
.cagr-no-list-cta p {
	margin: 0 auto 20px;
	max-width: 460px;
	color: #888;
}
.cagr-no-list-cta .button {
	background-color: var(--btn-accented-bgcolor, #c5a059);
	color: var(--btn-accented-color, #fff);
	border-radius: var(--btn-accented-brd-radius, 5px);
}

/* Deletar lista (configurações) */
.cagr-delete-divider {
	margin: 2em 0 1.5em;
}
.cagr-delete-list-btn.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #fdf3f3;
	color: #b71c1c;
	border: 1px solid #f2c6c6;
}
.cagr-delete-list-btn.button:hover,
.cagr-delete-list-btn.button:focus {
	background: #b71c1c;
	color: #fff;
	border-color: #b71c1c;
}
.cagr-address-note {
	font-size: 0.9em;
	opacity: 0.85;
}

/* Esconde o wrapper do header builder quando o shortcode não renderiza nada
   (visitante sem login ou usuário sem lista criada) */
.wd-header-text:has(.cagr-gift-empty),
.wd-header-html:has(.cagr-gift-empty) {
	display: none;
}

/* Ícone de presente no cabeçalho (estilo wishlist do WoodMart: wd-tools-custom-icon
   + wd-design-2 → badge igual ao do carrinho, com a cor primária do tema) */
.cagr-header-gift .wd-custom-icon {
	display: flex;
	align-items: center;
	--wd-tools-icon-width: 20px;
}
.cagr-header-gift .wd-custom-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}
@media (max-width: 1024px) {
	.cagr-header-gift .wd-custom-icon svg {
		width: 22px;
		height: 22px;
	}
}

/* Botão "Dar de presente": mesmo estilo do add-to-cart (cor acentuada do tema).
   Seletores com .button para vencer o :is(button...) do tema por especificidade. */
.cagr-buy-btn.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--btn-accented-bgcolor, #c5a059);
	color: var(--btn-accented-color, #fff);
	border-radius: var(--btn-accented-brd-radius, 5px);
}
.cagr-buy-btn.button:hover,
.cagr-buy-btn.button:focus {
	background-color: var(--btn-accented-bgcolor-hover, #ceb95c);
	color: var(--btn-accented-color, #fff);
}
.cagr-buy-btn .cagr-btn-text {
	white-space: normal;
}

/* ===== Estado vazio da lista (ícone cinza claro + botão loja) ===== */
.cagr-empty {
	text-align: center;
	padding: 56px 24px;
	background: #fafafa;
	border: 1px dashed #e3e3e3;
	border-radius: 8px;
}
.cagr-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: #f2f2f2;
}
.cagr-empty-icon svg {
	width: 44px;
	height: 44px;
	stroke: #c9c9c9;
}
.cagr-empty h3 {
	margin: 0 0 8px;
	font-size: 1.25em;
	font-weight: 600;
}
.cagr-empty p {
	margin: 0 auto 22px;
	max-width: 440px;
	color: #888;
}
.cagr-empty .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background-color: var(--btn-accented-bgcolor, #c5a059);
	color: var(--btn-accented-color, #fff);
	border-radius: var(--btn-accented-brd-radius, 5px);
}
.cagr-empty .button:hover,
.cagr-empty .button:focus {
	background-color: var(--btn-accented-bgcolor-hover, #ceb95c);
	color: var(--btn-accented-color, #fff);
}

/* ===== Lista expirada (data do evento já passou) ===== */
.cagr-expired {
	text-align: center;
	padding: 48px 24px;
	background: #fafafa;
	border: 1px dashed #e3e3e3;
	border-radius: 8px;
}
.cagr-expired-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: #f2f2f2;
}
.cagr-expired-icon svg {
	width: 40px;
	height: 40px;
	stroke: #c9c9c9;
}
.cagr-expired h3 {
	margin: 0 0 8px;
	font-size: 1.25em;
	font-weight: 600;
}
.cagr-expired p {
	margin: 0 auto 10px;
	max-width: 460px;
	color: #888;
}
.cagr-expired-cta.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	background-color: var(--btn-accented-bgcolor, #c5a059);
	color: var(--btn-accented-color, #fff);
	border-radius: var(--btn-accented-brd-radius, 5px);
}
.cagr-expired-cta.button:hover,
.cagr-expired-cta.button:focus {
	background-color: var(--btn-accented-bgcolor-hover, #ceb95c);
	color: var(--btn-accented-color, #fff);
}
.cagr-expired-owner {
	background: #fdf9f0;
	border-color: #e8d9b8;
}
.cagr-expired-account {
	margin-bottom: 18px;
}

/* ===== Busca de listas de presentes ===== */
.cagr-search-form {
	display: flex;
	gap: 8px;
	max-width: 620px;
	margin: 0 auto 8px;
}
.cagr-search-form input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 11px 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1em;
}
.cagr-search-hint,
.cagr-search-empty {
	color: #888;
	text-align: center;
}
.cagr-search-hint {
	max-width: 520px;
	margin: 0 auto;
}
.cagr-search-count {
	font-weight: 600;
	margin: 20px 0 14px;
}
.cagr-search-results {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.cagr-search-item {
	display: flex;
	align-items: center;
	gap: 18px;
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 8px;
	padding: 14px;
	transition: box-shadow 0.2s;
}
.cagr-search-item:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.cagr-search-thumb {
	flex: 0 0 180px;
	width: 180px;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: #f2f2f2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cagr-search-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.cagr-search-thumb-fallback svg {
	width: 40px;
	height: 40px;
	stroke: #c9c9c9;
}
.cagr-search-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.cagr-search-title {
	margin: 0;
	font-size: 1.05em;
	font-weight: 600;
}
.cagr-search-title a {
	color: #333;
	text-decoration: none;
}
.cagr-search-title a:hover {
	color: #b06f3c;
}
.cagr-search-owner {
	margin: 0;
	color: #666;
}
.cagr-search-date {
	margin: 0;
	font-size: 0.9em;
	color: #888;
}
.cagr-search-btn.button {
	flex: 0 0 auto;
	align-self: center;
	margin-left: auto;
	background-color: var(--btn-accented-bgcolor, #c5a059);
	color: var(--btn-accented-color, #fff);
	border-radius: var(--btn-accented-brd-radius, 5px);
}
.cagr-search-btn.button:hover,
.cagr-search-btn.button:focus {
	background-color: var(--btn-accented-bgcolor-hover, #ceb95c);
	color: var(--btn-accented-color, #fff);
}
@media (max-width: 600px) {
	.cagr-search-form {
		flex-direction: column;
	}
	.cagr-search-item {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}
	.cagr-search-thumb {
		flex: 0 0 auto;
		width: 100%;
		aspect-ratio: 4 / 3;
	}
	.cagr-search-btn {
		margin-left: 0;
		width: 100%;
	}
}

/* Gate de senha da lista pública */
.cagr-lock {
	max-width: 420px;
	margin: 1.5em 0;
	padding: 1.5em;
	background: #faf6f1;
	border: 1px solid #e8dccb;
	border-radius: 6px;
}
.cagr-lock h3 {
	margin-top: 0;
}
.cagr-lock .woocommerce-error {
	margin: 0 0 1em;
}

/* ===== Hero full-width (estilo página WoodMart) ===== */
.cagr-hero {
	position: relative;
	/* Compensa o padding-block:40px do .wd-content-layout do tema, colando o
	   hero no header. Usamos margin (não top) para não deslocar o fluxo e
	   criar um buraco entre o hero e a toolbar abaixo. */
	margin-top: -40px;
	/* Respiro de 40px entre o hero e a toolbar (o padding-top do tema foi
	   consumido pelo margin-top acima; o respiro visual fica aqui). */
	margin-bottom: 40px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 300px;
	padding: 60px 24px;
	background-color: #333;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: #fff;
}
.cagr-hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}
.cagr-hero.has-cover .cagr-hero-overlay {
	background: rgba(0, 0, 0, 0.55);
}
.cagr-hero-content {
	position: relative;
	z-index: 1;
	max-width: 900px;
	margin: 0 auto;
}
.cagr-hero-title {
	margin: 0 0 8px;
	font-size: 2.4em;
	font-weight: 600;
	color: #fff;
	text-transform: none;
}
.cagr-hero-owner {
	margin: 0 0 6px;
	font-size: 1.15em;
	opacity: 0.95;
}
.cagr-hero-event {
	margin: 0 0 10px;
	font-size: 1em;
	opacity: 0.9;
}
.cagr-hero-type {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.cagr-hero-message {
	display: inline-block;
	margin-top: 8px;
	padding: 10px 18px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 4px;
	font-size: 0.95em;
	line-height: 1.5;
}

/* ===== Lista de presentes em grade / lista ===== */
.cagr-shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}
.cagr-shop-toolbar .cagr-note {
	margin: 0;
	flex: 1 1 auto;
}
.cagr-view-toggle {
	display: inline-flex;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	overflow: hidden;
}
.cagr-view-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 38px;
	background: #f7f7f7;
	border: none;
	border-right: 1px solid #e0e0e0;
	color: #777;
	cursor: pointer;
	padding: 0;
	transition: background 0.15s, color 0.15s;
}
.cagr-view-btn:last-child {
	border-right: none;
}
.cagr-view-btn:hover {
	color: #333;
}
.cagr-view-btn.active {
	background: #b06f3c;
	color: #fff;
}

/* Grade (padrão) */
.cagr-products {
	margin: 0 -10px;
}
.cagr-products.cagr-view-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 20px;
	padding: 0 10px;
}
.cagr-product-card {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.2s;
}
.cagr-product-card:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.cagr-card-thumb {
	display: block;
	overflow: hidden;
}
.cagr-card-thumb img {
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: center center;
	transition: transform 0.3s;
}
.cagr-product-card:hover .cagr-card-thumb img {
	transform: scale(1.04);
}
.cagr-card-body {
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 6px;
}
.cagr-card-title {
	margin: 0;
	font-size: 1em;
	font-weight: 500;
	line-height: 1.3;
}
.cagr-card-title a {
	color: #333;
	text-decoration: none;
}
.cagr-card-title a:hover {
	color: #b06f3c;
}
/* Variação escolhida do item (ex.: "Color: Blue") */
.cagr-item-variation {
	display: inline-block;
	font-size: 0.85em;
	color: #888;
	line-height: 1.4;
}
.cagr-card-price {
	color: #b06f3c;
	font-weight: 600;
}
.cagr-card-qty {
	font-size: 0.9em;
	color: #666;
}
.cagr-qty-received {
	color: #2e7d32;
}
.cagr-card-action {
	margin-top: auto;
	padding-top: 8px;
}
.cagr-card-action .cagr-buy-btn,
.cagr-card-action .cagr-remove-btn {
	width: 100%;
}

/* Ferramentas do dono da lista (editar + compartilhar) */
.cagr-owner-tools {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}
.cagr-owner-tools .cagr-edit-btn.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	white-space: nowrap;
	background-color: var(--btn-accented-bgcolor, #c5a059);
	color: var(--btn-accented-color, #fff);
	border-radius: var(--btn-accented-brd-radius, 5px);
}
.cagr-owner-tools .cagr-edit-btn.button:hover,
.cagr-owner-tools .cagr-edit-btn.button:focus {
	background-color: var(--btn-accented-bgcolor-hover, #ceb95c);
	color: var(--btn-accented-color, #fff);
}
.cagr-owner-tools .cagr-edit-btn .cagr-btn-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}
/* Botão "Copiar link": mesmo estilo dos botões do site (accented). */
.cagr-copy-btn.button {
	background-color: var(--btn-accented-bgcolor, #c5a059);
	color: var(--btn-accented-color, #fff);
	border-radius: var(--btn-accented-brd-radius, 5px);
}
.cagr-copy-btn.button:hover,
.cagr-copy-btn.button:focus {
	background-color: var(--btn-accented-bgcolor-hover, #ceb95c);
	color: var(--btn-accented-color, #fff);
}
.cagr-share-box {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 1 1 340px;
	max-width: 560px;
}
.cagr-share-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	font-size: 0.85em;
	background: #fafafa;
	color: #666;
}

/* Botão Remover (dono da lista): vermelho suave, igual aos demais em largura */
.cagr-remove-btn.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #fdf3f3;
	color: #b71c1c;
	border: 1px solid #f2c6c6;
}
.cagr-remove-btn.button:hover,
.cagr-remove-btn.button:focus {
	background: #b71c1c;
	color: #fff;
	border-color: #b71c1c;
}
.cagr-remove-btn .cagr-btn-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

/* Esgotado */
.cagr-sold-out .cagr-card-thumb,
.cagr-sold-out .cagr-card-price {
	opacity: 0.55;
}
.cagr-badge-done {
	display: inline-block;
	background: #eceff1;
	color: #607d8b;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 0.82em;
	font-weight: 600;
}

/* Lista (visualização alternativa) */
.cagr-products.cagr-view-list {
	display: block;
}
.cagr-products.cagr-view-list .cagr-product-card {
	flex-direction: row;
	align-items: center;
	margin-bottom: 14px;
	padding: 14px;
	gap: 18px;
}
.cagr-products.cagr-view-list .cagr-card-thumb {
	flex: 0 0 110px;
}
.cagr-products.cagr-view-list .cagr-card-thumb img {
	width: 110px;
	height: 110px;
	object-fit: cover;
	object-position: center center;
	border-radius: 4px;
}
.cagr-products.cagr-view-list .cagr-card-body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding: 0;
}
.cagr-products.cagr-view-list .cagr-card-title {
	flex: 1 1 200px;
}
.cagr-products.cagr-view-list .cagr-card-price {
	min-width: 90px;
}
.cagr-products.cagr-view-list .cagr-card-qty {
	min-width: 130px;
}
.cagr-products.cagr-view-list .cagr-card-action {
	margin-top: 0;
	padding-top: 0;
	margin-left: auto;
}
.cagr-products.cagr-view-list .cagr-card-action .cagr-buy-btn,
.cagr-products.cagr-view-list .cagr-card-action .cagr-remove-btn {
	width: auto;
}

/* ===== Foto de capa: seletor no form (Minha Conta) ===== */
.cagr-cover-field .cagr-cover-preview {
	display: block;
	max-width: 320px;
	margin-bottom: 8px;
}
.cagr-cover-field .cagr-cover-preview img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
	object-position: center center;
	border-radius: 4px;
	border: 1px solid #e0e0e0;
}
.cagr-cover-field .cagr-cover-actions {
	display: inline-flex;
	gap: 8px;
	margin: 4px 0;
}
.cagr-cover-field em {
	font-size: 0.9em;
}

/* Formulário Minha Conta */
.cagr-form hr {
	margin: 1.5em 0;
}
.cagr-form h4 {
	margin-bottom: 0.25em;
}
.cagr-form em {
	font-size: 0.9em;
}
.cagr-share {
	background: #f1f1f1;
	padding: 12px;
	border-radius: 4px;
	margin: 1em 0;
	word-break: break-all;
}
.cagr-own-items {
	margin-top: 1.5em;
}

/* Checkout: campos readonly vindos da lista */
.cagr-readonly input,
input.cagr-readonly {
	background: #f7f7f7 !important;
	color: #333 !important;
	cursor: not-allowed;
}

/* Responsivo */
@media (max-width: 768px) {
	.cagr-hero {
		min-height: 220px;
		padding: 40px 16px;
	}
	.cagr-hero-title {
		font-size: 1.7em;
	}
	.cagr-products.cagr-view-list .cagr-product-card {
		flex-direction: column;
		align-items: flex-start;
	}
	.cagr-products.cagr-view-list .cagr-card-action {
		margin-left: 0;
		width: 100%;
	}
	.cagr-products.cagr-view-list .cagr-card-action .cagr-buy-btn,
	.cagr-products.cagr-view-list .cagr-card-action .cagr-remove-btn {
		width: 100%;
	}
}