/* ========== Account page ========== */

/* Tema claro: força contraste em toda página de conta/admin para evitar texto camuflado */
.account-page,
.account-page * {
	color: var(--foreground) !important;
}

.account-page{
	padding: 120px 0 60px;
}

.account-layout{
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 18px;
	align-items: start;
	min-width: 0;
}

.account-layout > *{
	min-width: 0;
}

.account-sidebar{
	background: rgb(var(--card-rgb) / 0.30);
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	border-radius: 18px;
	padding: 16px;
	backdrop-filter: blur(10px);
}

.account-user{
	display:flex;
	gap: 12px;
	align-items:center;
	padding-bottom: 14px;
	border-bottom: 1px solid rgb(255 255 255 / 0.06);
	margin-bottom: 14px;
}

.account-avatar{
	width: 48px;
	height: 48px;
	border-radius: 999px;
	overflow: hidden;
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	background: rgb(var(--background-rgb) / 0.35);
}

.account-avatar img{
	width:100%;
	height:100%;
	object-fit: cover;
}

.account-user-meta strong{
	display:block;
	color: var(--foreground);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.1;
}

.account-edit-link{
	margin-top: 6px;
	display:inline-flex;
	gap: 8px;
	align-items:center;
	font-size: 12px;
	color: rgb(242 242 242 / 0.70);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.account-edit-link:hover{ color: var(--primary); }

.account-menu{
	display:flex;
	flex-direction: column;
	gap: 12px;
}

.account-menu-group{
	display:flex;
	flex-direction: column;
	gap: 8px;
}

.account-menu-title{
	display:flex;
	gap: 10px;
	align-items:center;
	font-weight: 800;
	color: var(--foreground);
	font-size: 13px;
}

.account-menu-title.muted{
	color: rgb(242 242 242 / 0.60);
}

.account-menu-item{
	text-align:left;
	display:flex;
	align-items:center;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: transparent;
	color: rgb(242 242 242 / 0.70);
	font-size: 13px;
	cursor:pointer;
}

.account-menu-item:hover{
	background: rgb(255 255 255 / 0.05);
	color: var(--foreground);
}

.account-menu-item.is-active{
	background: rgb(var(--primary-rgb) / 0.10);
	border-color: rgb(var(--primary-rgb) / 0.18);
	color: var(--foreground);
}

.account-menu-item.is-disabled{
	cursor: not-allowed;
	opacity: 0.55;
}

.account-content{
	background: rgb(var(--card-rgb) / 0.30);
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	border-radius: 18px;
	padding: 18px;
	min-height: 520px;
	backdrop-filter: blur(10px);
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
	box-sizing: border-box;
}

.panel-header{
	padding-bottom: 14px;
	border-bottom: 1px solid rgb(255 255 255 / 0.06);
	margin-bottom: 16px;
}

.panel-header-row{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap: 12px;
}

.panel-title{
	margin: 0;
	font-size: 22px;
	font-weight: 900;
	color: var(--foreground);
}

.panel-subtitle{
	margin: 6px 0 0;
	color: rgb(242 242 242 / 0.60);
}

.panel-body{
	padding-top: 8px;
	min-width: 0;
	max-width: 100%;
	overflow-x: hidden;
}

.account-panel{
	min-width: 0;
	max-width: 100%;
}

.profile-grid{
	display:grid;
	grid-template-columns: 1fr 280px;
	gap: 18px;
}

.form-grid{
	display:grid;
	gap: 14px;
}

.form-narrow{
	max-width: 520px;
}

.form-row{
	display:grid;
	gap: 8px;
}

.form-row-2{
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

label{
	color: rgb(242 242 242 / 0.75);
	font-size: 12px;
	font-weight: 600;
}


/* ===== Refinos de botões e selects do painel ===== */
.account-page .btn,
.account-page .small-btn,
.account-page .order-copy-btn,
.account-page .notification-remove,
.account-page .admin-icon-action,
.account-page .review-image-remove,
.account-page .account-logout,
.account-page .account-menu-title-btn{
	border-radius: 8px;
}

.account-page .input,
.account-page .filepick,
.account-page #adminProductColorPicker,
.account-page .textarea,
.account-page .account-search-input.input{
	border-radius: 8px;
}

.account-page select.input,
.account-page .admin-filter-select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	cursor: pointer;
	color-scheme: light;
}

.account-page select.input:hover,
.account-page .admin-filter-select:hover{
	border-color: rgb(var(--primary-rgb) / 0.28);
	background-color: #f5ede2;
}

.account-page select.input::-ms-expand,
.account-page .admin-filter-select::-ms-expand{
	display: none;
}

.account-page select.input option,
.account-page .admin-filter-select option{
	background: #ffffff;
	color: #171411;
}

.account-page select.input option:checked,
.account-page .admin-filter-select option:checked{
	background: #f5ede2;
	color: var(--primary);
}

.input{
	height: 44px;
	border-radius: 8px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: rgb(var(--background-rgb) / 0.26);
	color: var(--foreground);
	padding: 0 12px;
	outline: none;
}

.input:focus{
	border-color: rgb(var(--primary-rgb) / 0.55);
	box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.10);
}

/* File picker (custom) */
.filepick{
	position: relative;
	height: 44px;
	border-radius: 8px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: rgb(var(--background-rgb) / 0.26);
	display:flex;
	align-items:center;
	gap: 10px;
	padding: 0 10px;
}

.filepick:focus-within{
	border-color: rgb(var(--primary-rgb) / 0.55);
	box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.10);
}

.filepick-native{
	position:absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow:hidden;
	pointer-events:none;
}

.filepick-btn{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	height: 34px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid rgb(var(--primary-rgb) / 0.25);
	background: rgb(var(--primary-rgb) / 0.08);
	color: rgb(var(--primary-rgb) / 0.95);
	font-size: 12px;
	font-weight: 800;
	cursor:pointer;
	user-select:none;
	white-space:nowrap;
	transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.filepick-btn:hover{
	transform: translateY(-1px);
	border-color: rgb(var(--primary-rgb) / 0.45);
	background: rgb(var(--primary-rgb) / 0.12);
}

.filepick-text{
	flex: 1;
	min-width: 0;
	color: rgb(242 242 242 / 0.65);
	font-size: 12px;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.radio-group{
	display:flex;
	gap: 14px;
	flex-wrap: wrap;
}

.radio{
	display:flex;
	align-items:center;
	gap: 8px;
	color: rgb(242 242 242 / 0.70);
	font-size: 13px;
}

.radio input{ accent-color: var(--primary); }

.form-actions{
	padding-top: 8px;
}

.form-actions.right{
	display:flex;
	justify-content:flex-end;
	gap: 10px;
}

/* Fieldset "Onde aparecer" no modal de categoria — checkboxes
   verticais com legenda destacada. Reusável caso outros modais
   precisem de um bloco de toggles agrupados. */
.admin-category-visibility{
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 12px 14px 10px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.admin-category-visibility legend{
	padding: 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted-foreground, var(--foreground));
}
.admin-category-visibility .check-row{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	font-size: 14px;
}
.admin-category-visibility .check-row input[type="checkbox"]{
	accent-color: var(--primary);
	width: 16px;
	height: 16px;
	cursor: pointer;
}

.profile-avatar{
	display:flex;
	flex-direction: column;
	align-items:center;
	gap: 12px;
	padding: 10px;
	border: 1px dashed rgb(var(--primary-rgb) / 0.18);
	border-radius: 16px;
	background: rgb(var(--background-rgb) / 0.18);
}

.avatar-preview{
	width: 130px;
	height: 130px;
	border-radius: 999px;
	overflow:hidden;
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	background: rgb(var(--background-rgb) / 0.35);
}

.avatar-preview img{
	width:100%;
	height:100%;
	object-fit: cover;
}

.hint{
	margin: 0;
	font-size: 12px;
	color: rgb(242 242 242 / 0.55);
	text-align:center;
}

.list{
	display:flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	max-width: 100%;
}

.list-item{
	display:flex;
	justify-content: space-between;
	gap: 14px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid rgb(255 255 255 / 0.06);
	background: rgb(var(--background-rgb) / 0.18);
	min-width: 0;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
}

.list-left{
	display:flex;
	gap: 12px;
	align-items:center;
	min-width: 0;
	flex: 1 1 0;
	overflow: hidden;
}

.list-left > *:not(img):not(picture):not(.order-thumb){
	min-width: 0;
	flex: 1 1 0;
	overflow: hidden;
}

.badge-pill{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgb(var(--primary-rgb) / 0.12);
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	color: var(--foreground);
	font-size: 12px;
	font-weight: 700;
}

.list-title{
	margin: 0;
	color: var(--foreground);
	font-weight: 800;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.list-desc{
	margin: 6px 0 0;
	color: rgb(242 242 242 / 0.60);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-meta{
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	margin: 6px 0 0;
	min-width: 0;
}

.order-meta-item{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: #8c7865 !important;
	font-weight: 500;
	white-space: nowrap;
	flex-shrink: 0;
}

.order-meta-item .icon{
	color: #8c7865 !important;
	flex-shrink: 0;
}

.list-right{
	display:flex;
	align-items:center;
	gap: 12px;
	flex-wrap: wrap;
	justify-content:flex-end;
	flex-shrink: 0;
}

.link{
	background: none;
	border: none;
	color: rgb(242 242 242 / 0.70);
	cursor:pointer;
	padding: 0;
}

.link:hover{ color: var(--primary); }

.small-btn{
	height: 34px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid rgb(255 255 255 / 0.10);
	background: rgb(var(--background-rgb) / 0.22);
	color: var(--foreground);
	cursor:pointer;
}

.small-btn:hover{
	border-color: rgb(var(--primary-rgb) / 0.35);
}

.tag{
	display:inline-flex;
	align-items:center;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 800;
	border: 1px solid rgb(255 255 255 / 0.08);
	background: rgb(34 197 94 / 0.15);
	color: rgb(34 197 94 / 0.95);
}

/* Compras */
.panel-tools{ display:flex; align-items:center; justify-content:flex-end; }

.account-search{
	display:flex;
	align-items:center;
	gap: 10px;
	height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: rgb(var(--background-rgb) / 0.26);
	width: min(420px, 52vw);
}

.account-search:focus-within{
	border-color: rgb(var(--primary-rgb) / 0.55);
	box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.10);
}

.account-search .icon{ opacity: 0.75; }

.account-search-input{
	border: none;
	background: transparent;
	padding: 0;
	height: 100%;
	width: 100%;
	outline: none;
}

.order-item .list-left{ align-items:stretch; }

.order-item{ cursor:pointer; }
.order-item:focus-visible{
	outline: none;
	box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.10);
	border-color: rgb(var(--primary-rgb) / 0.35);
}

.order-item .list-right{
	flex-direction: column;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-self: stretch;
}

/* Admin/Compras: texto do card de pedido (o HTML usa .order-title/.order-sub/.order-status) */
.order-title{
	margin: 0;
	color: var(--foreground);
	font-weight: 900;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-sub{
	margin: 6px 0 0;
	color: rgb(242 242 242 / 0.62);
	font-size: 13px;
	display:flex;
	align-items:center;
	gap: 8px;
	flex-wrap: wrap;
}

.order-sub .dot{
	opacity: 0.55;
}

.order-status{
	margin: 0;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid rgb(255 255 255 / 0.12);
	background: rgb(255 255 255 / 0.06);
	color: rgb(242 242 242 / 0.92);
	font-size: 12px;
	font-weight: 900;
}

.order-total{
	color: rgb(242 242 242 / 0.92);
	font-weight: 900;
}

.order-thumb{
	position: relative;
	width: 86px;
	flex: 0 0 86px;
	align-self: stretch;
	height: auto;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.10);
	background: rgb(var(--background-rgb) / 0.22);
}

.order-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.order-thumb-count{
	position: absolute;
	right: 8px;
	bottom: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #c9a84c;
	color: #1a1a1a;
	font-size: 12px;
	font-weight: 900;
	box-shadow: 0 2px 6px rgb(201 168 76 / 0.35);
}


.order-status.is-progress{
	background: rgb(251 191 36 / 0.14);
	border-color: rgb(251 191 36 / 0.22);
}

.order-status.is-done{
	background: rgb(34 197 94 / 0.14);
	border-color: rgb(34 197 94 / 0.22);
}

.order-total{ text-align:right; }

.order-total-label{
	margin: 0;
	font-size: 12px;
	color: rgb(242 242 242 / 0.60);
}

.order-total-value{
	margin: 6px 0 0;
	font-size: 15px;
	font-weight: 900;
	color: var(--foreground);
}

.empty-state{
	padding: 18px;
	border-radius: 16px;
	border: 1px dashed rgb(255 255 255 / 0.10);
	background: rgb(var(--background-rgb) / 0.14);
	color: rgb(242 242 242 / 0.65);
}

/* Modal */
.account-modal{
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
}

.account-modal.is-open{ display:block; }

.account-modal-backdrop{
	position:absolute;
	inset:0;
	background: rgb(0 0 0 / 0.55);
}

.account-modal-dialog{
	position:absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(760px, 92vw);
	max-height: 84vh;
	overflow: auto;
	background: rgb(var(--card-rgb) / 0.96);
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	border-radius: 18px;
	padding: 16px;
	box-shadow: 0 20px 60px rgb(0 0 0 / 0.55);
}

/* Themed scrollbar */
.account-modal-dialog{
	scrollbar-width: thin;
	scrollbar-color: rgb(var(--primary-rgb) / 0.35) transparent;
}
.account-modal-dialog::-webkit-scrollbar{
	width: 10px;
}
.account-modal-dialog::-webkit-scrollbar-track{
	background: transparent;
}
.account-modal-dialog::-webkit-scrollbar-thumb{
	background: rgb(var(--primary-rgb) / 0.22);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}
.account-modal-dialog::-webkit-scrollbar-thumb:hover{
	background: rgb(var(--primary-rgb) / 0.32);
}

.textarea{
	scrollbar-width: thin;
	scrollbar-color: rgb(var(--primary-rgb) / 0.35) transparent;
}
.textarea::-webkit-scrollbar{
	width: 10px;
}
.textarea::-webkit-scrollbar-track{
	background: transparent;
}
.textarea::-webkit-scrollbar-thumb{
	background: rgb(var(--primary-rgb) / 0.22);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}
.textarea::-webkit-scrollbar-thumb:hover{
	background: rgb(var(--primary-rgb) / 0.32);
}


.account-modal-header{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid rgb(255 255 255 / 0.06);
	margin-bottom: 14px;
}

.account-modal-header h3{
	margin: 0;
	font-size: 18px;
	font-weight: 900;
	color: var(--foreground);
}

@media (min-width: 981px) and (max-width: 1399px) {
	.account-layout{ grid-template-columns: 220px 1fr; }
	.profile-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 980px){
	.account-layout{ grid-template-columns: 1fr; }
	.account-sidebar{ position: static; }
	.profile-grid{ grid-template-columns: 1fr; }
	.form-row-2{ grid-template-columns: 1fr; }
}

.order-details-header{ gap: 14px; }
.order-report-btn{ white-space: nowrap; }

.order-details-body{
	display:flex;
	flex-direction: column;
	gap: 16px;
}

.order-details-card{
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: rgb(var(--background-rgb) / 0.26);
	border-radius: 16px;
	padding: 16px;
}

.order-details-card-title{
	font-size: 13px;
	font-weight: 900;
	color: rgb(242 242 242 / 0.80);
	margin-bottom: 12px;
}

.order-details-grid{
	display:grid;
	grid-template-columns: 1.25fr 0.75fr;
	gap: 16px;
}

@media (max-width: 980px){
	.order-details-grid{ grid-template-columns: 1fr; }
	.order-report-btn{ padding: 10px 12px; }
}

.order-hero-title{
	margin: 0;
	font-size: 18px;
	font-weight: 900;
	/* Título sempre em uma linha só; se não couber ao lado do pill de
	   status, corta com ellipsis. Mais importante é preservar o status
	   visível à direita do que mostrar o título inteiro. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-hero-sub{
	margin: 6px 0 0;
	font-size: 13px;
	color: rgb(242 242 242 / 0.65);
}

.order-hero-top{
	display:flex;
	align-items:flex-start;
	justify-content: space-between;
	gap: 12px;
}

/* Primeiro filho do hero-top (wrapper do título+sub): flex:1 ocupa o
   espaço restante, min-width:0 habilita o ellipsis do título (sem isso
   itens flex têm min-width:auto e não encolhem abaixo do conteúdo). */
.order-hero-top > :first-child {
	flex: 1 1 auto;
	min-width: 0;
}

.order-hero-actions{
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap: 10px;
	/* Segura a coluna direita pro pill manter sua largura natural —
	   quem cede espaço é o título (via ellipsis), não o status. */
	flex-shrink: 0;
}

/* Bloco de CTAs abaixo do top (Realizar pagamento / Confirmar
   recebimento): ocupa 100% da largura do card, botões full-bleed pra
   virarem CTAs proeminentes em vez de pequenos botões empurrando o
   título pra ellipsis. Múltiplos botões ficam lado a lado com gap. */
.order-hero-cta{
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.order-hero-cta .order-action-btn{
	flex: 1 1 0;
	min-width: 0;
	width: 100%;
	justify-content: center;
}

/* Hero do pedido sempre em row no mobile: título à esquerda, pill de
   status à direita, alinhados ao topo. Se houver botão de ação
   (Realizar pagamento / Confirmar recebimento), ele vive dentro de
   .order-hero-actions (flex-column), ficando abaixo do pill no canto
   direito — sem empurrar o pill pra baixo do título. */

.order-hero-divider{
	margin: 14px 0;
	height: 1px;
	background: rgb(255 255 255 / 0.08);
}

.order-hero-block-title{
	font-size: 13px;
	font-weight: 900;
	margin: 0 0 6px;
}

.order-hero-block-desc{
	margin: 0;
	color: rgb(242 242 242 / 0.70);
	font-size: 13px;
}

.order-addr-name{
	margin: 0;
	font-weight: 900;
}

.order-addr-line{
	margin: 6px 0 0;
	color: rgb(242 242 242 / 0.70);
	font-size: 13px;
}

.order-details-items .order-item-qty{
	font-weight: 900;
	color: var(--foreground);
	font-size: 13px;
}

.order-timeline{
	display:flex;
	flex-direction: column;
	gap: 12px;
}

.order-timeline-step{
	display:flex;
	gap: 12px;
	align-items:flex-start;
}

.order-timeline-dot{
	width: 10px;
	height: 10px;
	border-radius: 999px;
	margin-top: 6px;
	background: rgb(255 255 255 / 0.25);
	border: 1px solid rgb(255 255 255 / 0.18);
	flex: 0 0 10px;
}

.order-timeline-step.is-done .order-timeline-dot{
	background: rgb(34 197 94 / 0.55);
	border-color: rgb(34 197 94 / 0.45);
}

.order-timeline-step.is-active .order-timeline-dot{
	background: rgb(251 191 36 / 0.65);
	border-color: rgb(251 191 36 / 0.45);
}

.order-timeline-title{
	font-weight: 900;
	margin: 0;
}

.order-timeline-date{
	margin: 6px 0 0;
	color: rgb(242 242 242 / 0.60);
	font-size: 13px;
}

.order-info{
	display:flex;
	flex-direction: column;
	gap: 10px;
}

.order-info-row{
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

.order-info-row:last-child{ border-bottom: none; }

.order-info-left{
	color: rgb(242 242 242 / 0.70);
	font-size: 13px;
}

.order-info-right{
	display:flex;
	align-items:center;
	gap: 10px;
	font-weight: 900;
}

.order-copy-btn{
	height: 30px;
	padding: 0 10px;
	border-radius: 10px;
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	background: rgb(var(--background-rgb) / 0.22);
	color: var(--foreground);
	font-weight: 900;
	cursor: pointer;
}


.order-details-items .cart-item{
	grid-template-columns: 72px 1fr;
}
.order-details-items .cart-item-name,
.order-details-items .cart-item-meta,
.order-details-items .cart-item-price,
.order-details-items .order-item-qty,
.order-details-items .cart-item-image{
	opacity: 1 !important;
	filter: none !important;
}
.order-details-items .cart-item-meta{
	color: rgb(242 242 242 / 0.72);
	letter-spacing: 0.04em;
}

.account-search-input.input,
.account-search-input.input:focus{
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

.account-search-input::-webkit-search-cancel-button{
	-webkit-appearance: none;
	height: 14px;
	width: 14px;
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%206%206%2018%27%2F%3E%3Cpath%20d%3D%27M6%206%2018%2018%27%2F%3E%3C%2Fsvg%3E") no-repeat center center;
	background-size: 14px 14px;
	cursor: pointer;
}

.account-search-input::-ms-clear{
	display:none;
}

.notifications-list{
	display:flex;
	flex-direction: column;
	gap: 10px;
}

.notification-item{
	display:flex;
	gap: 12px;
	align-items:flex-start;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: rgb(var(--background-rgb) / 0.22);
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.notification-item:hover{
	transform: translateY(-1px);
	border-color: rgb(var(--primary-rgb) / 0.28);
	background: rgb(var(--background-rgb) / 0.28);
}

.notification-item:focus-visible{
	outline: none;
	box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.12);
	border-color: rgb(var(--primary-rgb) / 0.40);
}

.notification-dot{
	width: 10px;
	height: 10px;
	border-radius: 999px;
	margin-top: 6px;
	background: rgb(255 255 255 / 0.25);
	border: 1px solid rgb(255 255 255 / 0.16);
	flex: 0 0 10px;
}

.notification-item.unread .notification-dot{
	background: rgb(251 191 36 / 0.75);
	border-color: rgb(251 191 36 / 0.45);
}

.notification-content{ min-width:0; flex:1; }

.notification-title{
	margin: 0;
	font-weight: 900;
	font-size: 14px;
	/* Título = 1 linha com ellipsis. Bloqueia a quebra que alongava o
	   card quando o título era longo ("Novo cupom disponível!" etc.). */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notification-text{
	margin: 6px 0 0;
	color: rgb(242 242 242 / 0.70);
	font-size: 13px;
	line-height: 1.35;
	/* Preview = no máximo 2 linhas com ellipsis. Mantém o card num
	   gabarito fixo e fecha o "buraco" embaixo da thumb (que é
	   dimensionada por JS pra acompanhar a altura do conteúdo). */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.notification-meta{
	margin: 8px 0 0;
	color: rgb(242 242 242 / 0.55);
	font-size: 12px;
	letter-spacing: 0.03em;
}
.badge-inline{
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background: var(--primary);
	color: #0b0b0b;
	font-size: 12px;
	font-weight: 900;
}

.account-menu-title-btn{
	width: 100%;
	text-align:left;
	border: 1px solid transparent;
	background: transparent;
	padding: 10px 10px;
	border-radius: 12px;
	cursor: pointer;
}

.account-menu-title-btn .badge-inline{
	margin-left: auto;
}

.account-menu-title-btn:hover{
	background: rgb(255 255 255 / 0.05);
}

.account-menu-title-btn.is-active{
	background: rgb(var(--primary-rgb) / 0.10);
	border-color: rgb(var(--primary-rgb) / 0.18);
}

.account-menu-title-btn:focus-visible{
	outline: none;
	box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.12);
	border-color: rgb(var(--primary-rgb) / 0.40);
}

.notification-thumb{
	position: relative;
	width: 56px;
	height: 56px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.10);
	background: rgb(var(--background-rgb) / 0.22);
	flex: 0 0 56px;
}
.notification-thumb.is-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	background: rgb(255 255 255 / 0.04);
}
.notification-thumb.is-icon .icon{
	width: 22px;
	height: 22px;
	opacity: 0.90;
}
.notification-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.notification-thumb-count{
	position: absolute;
	right: 6px;
	bottom: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	background: #c9a84c;
	color: #1a1a1a;
	font-size: 11px;
	font-weight: 900;
	box-shadow: 0 2px 6px rgb(201 168 76 / 0.35);
}




/* Notificações: thumb deve acompanhar a altura do conteúdo (sem estourar o card) */
.notification-item{
	align-items: flex-start;
}
.notification-thumb{
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
}


/* Notificações: ações */
.notification-actions{
	display:flex;
	align-items:flex-start;
	justify-content:flex-end;
	gap: 8px;
	margin-left: 8px;
	flex: 0 0 auto;
}

.notification-meta-row{
	display:flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items:center;
}
.notification-meta-pill{
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid rgb(255 255 255 / 0.12);
	background: rgb(0 0 0 / 0.30);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.2px;
	color: rgb(242 242 242 / 0.85);
}
.notification-meta-pill.is-seen{
	border-color: rgb(var(--primary-rgb) / 0.25);
	background: rgb(var(--primary-rgb) / 0.10);
	color: rgb(var(--primary-rgb) / 0.95);
}

.notification-remove{
	border: 1px solid rgb(255 255 255 / 0.10);
	background: rgb(0 0 0 / 0.18);
	color: rgb(242 242 242 / 0.70);
	width: 36px;
	height: 36px;
	border-radius: 999px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.notification-remove:hover{
	transform: translateY(-1px);
	color: var(--primary);
	border-color: rgb(var(--primary-rgb) / 0.30);
	background: rgb(var(--primary-rgb) / 0.08);
}

.notification-remove .icon{
	width: 18px;
	height: 18px;
}



.account-logout{
	margin-top: 10px;
	display:flex;
	align-items:center;
	gap: 10px;
	border: 1px solid rgb(255 255 255 / 0.10);
	background: rgb(0 0 0 / 0.18);
	color: rgb(242 242 242 / 0.70);
	border-radius: 12px;
	padding: 10px 12px;
	cursor:pointer;
	font-weight: 800;
	font-size: 13px;
	transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.account-logout:hover{
	transform: translateY(-1px);
	color: var(--primary);
	border-color: rgb(var(--primary-rgb) / 0.30);
	background: rgb(var(--primary-rgb) / 0.08);
}


.account-menu-logout{
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: transparent;
	color: rgb(242 242 242 / 0.70);
	font-size: 13px;
	cursor: pointer;
	width: 100%;
	display:flex;
	align-items:center;
}
.account-menu-logout:hover{
	background: rgb(255 255 255 / 0.05);
	color: var(--foreground);
}

.account-menu-support{
	justify-content: flex-start;
	gap: 10px;
	padding: 10px 10px;
	border-radius: 12px;
	border: 1px solid transparent;
	background: transparent;
	color: rgb(242 242 242 / 0.70);
	font-size: 13px;
	cursor: pointer;
	width: 100%;
	display:flex;
	align-items:center;
}
.account-menu-support:hover{
	background: rgb(255 255 255 / 0.05);
	color: var(--foreground);
}


/* Password toggle */
.pw-wrap{
	position: relative;
	width: 100%;
}
.pw-wrap .pw-input{
	width: 100%;
	padding-right: 40px;
}
.pw-toggle{
	position:absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	color: #8c7865;
	padding: 0;
	width: 24px;
	height: 24px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition: transform 160ms ease, color 160ms ease;
}
.pw-toggle:hover{
	transform: translateY(-50%) translateY(-1px);
	color: var(--primary);
}



/* =========================
   ADMINISTRAÇÃO
   ========================= */

.admin-orders-tools,
.admin-products-tools{
	display:flex;
	gap: 12px;
	align-items:center;
	flex-wrap: wrap;
}

.admin-filter-select{
	min-width: 170px;
}

.admin-hint{
	display:flex;
	gap: 10px;
	align-items:flex-start;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px dashed rgb(var(--primary-rgb) / 0.22);
	background: rgb(var(--background-rgb) / 0.18);
	color: rgb(242 242 242 / 0.78);
	margin-bottom: 14px;
}

.admin-hint .icon{
	margin-top: 2px;
	color: var(--primary);
}

.admin-table-wrap{
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	border-radius: 16px;
	overflow:auto;
	background: rgb(var(--background-rgb) / 0.10);
}

.admin-table{
	width: 100%;
	border-collapse: collapse;
	min-width: 720px;
}

.admin-table th{
	text-align:left;
	font-size: 12px;
	letter-spacing: .02em;
	color: rgb(242 242 242 / 0.7);
	padding: 12px 14px;
	border-bottom: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.22);
	position: sticky;
	top: 0;
	z-index: 1;
}

.admin-table td{
	padding: 12px 14px;
	border-bottom: 1px solid rgb(var(--primary-rgb) / 0.10);
	vertical-align: middle;
	color: rgb(242 242 242 / 0.86);
	font-size: 13px;
}

.admin-table tr:hover td{
	background: rgb(var(--background-rgb) / 0.22);
}

.admin-cell-muted{
	color: rgb(242 242 242 / 0.62);
	font-size: 12px;
}

.admin-pill{
	display:inline-flex;
	align-items:center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	background: rgb(var(--background-rgb) / 0.18);
	color: rgb(242 242 242 / 0.78);
}

.admin-pill--admin{
	border-color: rgb(16 185 129 / 0.45);
	background: rgb(16 185 129 / 0.10);
	color: rgb(167 243 208 / 0.95);
}

.admin-pill--user{
	border-color: rgb(var(--primary-rgb) / 0.22);
}

.admin-actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap: 10px;
	flex-wrap: wrap;
}

.admin-icon-action{
	border: none;
	background: transparent;
	color: rgb(242 242 242 / 0.68);
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition: transform 160ms ease, color 160ms ease, background 160ms ease;
}

.admin-icon-action:hover{
	transform: translateY(-1px);
	background: rgb(var(--background-rgb) / 0.22);
	color: var(--primary);
}

.admin-icon-action:disabled,
.admin-icon-action[aria-disabled="true"]{
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
	background: transparent;
	color: rgb(242 242 242 / 0.55);
}

.account-modal-dialog-lg{
	max-width: 900px;
	width: min(900px, calc(100vw - 32px));
}

.textarea{
	height:auto;
	min-height: 92px;
	padding: 10px 12px;
	resize: vertical;
}

.admin-images-preview{
	display:flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.admin-images-preview img{
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 12px;
	border: 1px solid rgb(var(--primary-rgb) / 0.16);
	background: rgb(var(--background-rgb) / 0.18);
}

.admin-images-preview-single img{
	width: 96px;
	height: 96px;
}

.admin-color-image-section{
	padding: 14px;
	border-radius: 18px;
	border: 1px solid rgb(255 255 255 / 0.08);
	background: rgb(var(--background-rgb) / 0.16);
}

.admin-color-image-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap: 12px;
	margin-bottom: 12px;
}

.admin-color-image-bindings{
	display:flex;
	flex-direction:column;
	gap: 12px;
}

.admin-color-image-row{
	display:grid;
	grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
	gap: 12px;
	align-items:flex-start;
	padding: 12px;
	border-radius: 16px;
	border: 1px solid rgb(255 255 255 / 0.08);
	background: rgb(255 255 255 / 0.02);
}

.admin-color-image-color{
	display:flex;
	align-items:center;
	gap: 10px;
	padding-top: 4px;
	min-width: 0;
}

.admin-color-image-label{
	font-size: 13px;
	font-weight: 700;
	color: var(--foreground);
}

.admin-color-image-options{
	display:flex;
	flex-wrap:wrap;
	gap: 10px;
}

.admin-color-image-option{
	position:relative;
	width: 78px;
	height: 92px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap: 6px;
	padding: 6px;
	border-radius: 16px;
	border: 1px solid rgb(255 255 255 / 0.10);
	background: rgb(var(--background-rgb) / 0.18);
	color: var(--foreground);
	cursor:pointer;
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.admin-color-image-option:hover{
	transform: translateY(-1px);
	border-color: rgb(var(--primary-rgb) / 0.32);
}

.admin-color-image-option.is-active{
	border-color: rgb(var(--primary-rgb) / 0.55);
	background: rgb(var(--primary-rgb) / 0.10);
	box-shadow: 0 12px 22px rgb(0 0 0 / 0.16);
}

.admin-color-image-option img{
	width: 100%;
	height: 56px;
	object-fit: cover;
	border-radius: 12px;
	display:block;
}

.admin-color-image-option span{
	font-size: 11px;
	font-weight: 700;
	line-height: 1.1;
	text-align:center;
}

.admin-color-image-option.is-empty{
	justify-content:center;
}

.admin-color-image-option.is-empty::before{
	content: "";
	width: 34px;
	height: 34px;
	border-radius: 999px;
	border: 1px dashed rgb(255 255 255 / 0.20);
	margin-bottom: 4px;
}

@media (max-width: 680px){
	.admin-color-image-row{
		grid-template-columns: 1fr;
	}
	.admin-color-image-option{
		width: 74px;
	}
}

.helper-text{
	margin: 0;
	color: var(--muted-foreground);
	font-size: 12px;
	line-height: 1.35;
}

.admin-confirm-text{
	color: var(--muted-foreground);
	line-height: 1.45;
	margin: 0;
}

.admin-order-controls .form-actions{
	margin-top: 6px;
}

.no-scroll{overflow:hidden;}


.account-menu-group + .account-menu-group{
	margin-top: 10px;
}


/* Admin visibility guard */
.admin-only{ display:none !important; }
/*
	Admin-only elements should restore their own natural display values.
	Previously this forced display:flex which broke layouts (e.g. cards became 2-column).
	Using display: revert keeps each component's intended display (block/flex/grid).
*/
html.is-admin .admin-only{ display: revert !important; }

/*
	Admin sidebar group must keep the account menu layout.
	Because .admin-only restores default display (revert), the admin menu group
	would fall back to block and its submenu buttons stop stretching to full width.
	Force the same flex column behavior used by other groups.
*/
html.is-admin .account-menu-group.admin-only{
	display:flex !important;
	flex-direction: column;
	gap: 8px;
}

/* Same fix for individual admin-only menu buttons (Assinatura, Configurações):
   .admin-only's `display: revert` knocks out the inline-flex inherited from
   .account-menu-title, leaving the icon and text on different baselines. */
html.is-admin .account-menu-title-btn.admin-only{
	display: flex !important;
	align-items: center;
	gap: 10px;
}

/* Notificações como sessão (não como item de submenu) */
.account-menu-section{
	padding: 0;
	border: none;
	background: transparent;
	display:flex;
	align-items:center;
	gap: 10px;
	font-weight: 800;
	color: var(--foreground);
	font-size: 13px;
}
.account-menu-section:hover{
	background: transparent;
	color: var(--foreground);
}
.account-menu-section.is-active{
	background: transparent;
	border-color: transparent;
}
.account-menu-section span:last-child{
	margin-left: auto;
}

/* Notificações como sessão (header clicável) */
.account-menu-section-btn{
	width: 100%;
	text-align:left;
	border: none;
	background: transparent;
	padding: 0;
	display:flex;
	align-items:center;
	gap: 10px;
	font-weight: 800;
	color: var(--foreground);
	font-size: 13px;
	cursor: pointer;
}
.account-menu-section-btn:hover{
	color: var(--foreground);
}
.account-menu-section-btn span:last-child{ margin-left:auto; }


/* =====================
	Avaliações de pedidos
===================== */

.order-reviews-list{
	display:flex;
	flex-direction: column;
	gap: 10px;
}

.order-review-item{
	display:flex;
		align-items:stretch;
	justify-content: space-between;
	gap: 14px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid rgb(255 255 255 / 0.08);
	background: rgb(var(--background-rgb) / 0.18);
}

.order-review-left{
	display:flex;
		align-items:stretch;
	gap: 12px;
	min-width: 0;
}

.order-review-thumb{
	position: relative;
	width: 86px;
	flex: 0 0 86px;
	align-self: stretch;
	height: auto;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.10);
	background: rgb(var(--background-rgb) / 0.22);
}

.order-review-thumb img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display:block;
}

.order-review-meta{
	min-width: 0;
}

.order-review-title{
	margin:0;
	font-weight: 900;
	color: var(--foreground);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-review-sub{
	margin: 6px 0 0;
	font-size: 12px;
	color: rgb(242 242 242 / 0.65);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-review-right{
	display:flex;
	align-items:center;
	gap: 10px;
	flex: 0 0 auto;
}

.order-review-stars{
	font-size: 13px;
	letter-spacing: 1px;
	color: rgb(var(--primary-rgb) / 0.95);
	font-weight: 900;
}

.review-stars-picker{
	display:flex;
	gap: 6px;
	align-items:center;
}

.review-star{
	width: 40px;
	height: 40px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius: 12px;
	border: 1px solid rgb(255 255 255 / 0.10);
	background: rgb(var(--background-rgb) / 0.12);
	color: rgb(242 242 242 / 0.50);
	font-size: 18px;
	font-weight: 900;
	cursor:pointer;
	transition: transform .12s ease, background .12s ease, border-color .12s ease, color .12s ease;
}

.review-star:hover{
	transform: translateY(-1px);
	border-color: rgb(var(--primary-rgb) / 0.35);
}

.review-star.is-on{
	color: rgb(var(--primary-rgb) / 0.95);
	background: rgb(var(--primary-rgb) / 0.10);
	border-color: rgb(var(--primary-rgb) / 0.35);
}

.review-images-grid{
	margin-top: 10px;
	display:grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

@media (max-width: 680px){
	.review-images-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.review-image-chip{
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.10);
	background: rgb(0 0 0 / 0.25);
	aspect-ratio: 1 / 1;
}

.review-image-chip img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display:block;
}

.review-image-remove{
	position:absolute;
	top: 8px;
	right: 8px;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	border: 1px solid rgb(255 255 255 / 0.12);
	background: rgb(0 0 0 / 0.55);
	color: rgb(242 242 242 / 0.92);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
}

.review-image-remove:hover{
	border-color: rgb(var(--primary-rgb) / 0.40);
}


.admin-chip-input{
	display:flex;
	gap: 10px;
	align-items:center;
}
.admin-chip-input .input{
	flex: 1;
	min-width: 180px;
}
.admin-chip-list{
	display:flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}

.admin-variant-stock-grid{
	display:grid;
	gap:10px;
	margin-top:10px;
}
.admin-variant-stock-row{
	display:grid;
	grid-template-columns: minmax(140px, 1fr) minmax(90px, 140px) minmax(120px, 180px);
	gap:10px;
	align-items:center;
	padding:10px 12px;
	background:#fff;
	border:1px solid rgb(var(--primary-rgb) / 0.18);
	border-radius:10px;
}
.admin-variant-stock-row.is-single{
	grid-template-columns: 1fr minmax(120px, 180px);
}
.admin-variant-stock-label{
	display:flex;
	align-items:center;
	gap:8px;
	min-width:0;
	font-size:13px;
	font-weight:600;
	color:#1a1a1a;
}
.admin-variant-stock-swatch{
	width:18px;
	height:18px;
	border-radius:50%;
	border:1px solid rgb(var(--primary-rgb) / 0.25);
	flex-shrink:0;
}
.admin-variant-stock-row .input{
	width:100%;
}
.admin-variant-stock-row .input[type="number"]{
	font-variant-numeric: tabular-nums;
}
.admin-variant-stock-row .field-sub{
	display:block;
	font-size:10px;
	color:#8c7865;
	margin-bottom:4px;
	text-transform:uppercase;
	letter-spacing:0.05em;
}
@media (max-width: 640px){
	.admin-variant-stock-row,
	.admin-variant-stock-row.is-single{
		grid-template-columns: 1fr;
	}
}
.admin-chip{
	display:inline-flex;
	align-items:center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 999px;
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	background: rgb(var(--background-rgb) / 0.22);
	color: var(--foreground);
	font-size: 12px;
	font-weight: 700;
}
.admin-chip-swatch{
	width: 12px;
	height: 12px;
	border-radius: 999px;
	border: 1px solid rgb(255 255 255 / 0.14);
	background: rgb(255 255 255 / 0.10);
}
.admin-chip-remove{
	width: 26px;
	height: 26px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius: 999px;
	border: 1px solid rgb(255 255 255 / 0.08);
	background: transparent;
	color: var(--muted-foreground);
	cursor: pointer;
	transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.admin-chip-remove:hover{
	background: rgb(var(--background-rgb) / 0.24);
	color: var(--primary);
	transform: translateY(-1px);
}
.admin-color-input{
	display:flex;
	gap: 10px;
	align-items:center;
	flex-wrap: wrap;
}
.admin-color-input .input{
	min-width: 180px;
	flex: 1;
}
.admin-color-hex{
	display:flex;
	align-items:center;
	gap: 8px;
}
#adminProductColorPicker{
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 8px;
	border: 1px solid rgb(var(--primary-rgb) / 0.24);
	background: rgb(var(--background-rgb) / 0.18);
	padding: 0;
	overflow: hidden;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
#adminProductColorPicker::-webkit-color-swatch-wrapper{
	padding: 0;
}
#adminProductColorPicker::-webkit-color-swatch{
	border: 0;
	border-radius: 7px;
}
#adminProductColorPicker::-moz-color-swatch{
	border: 0;
	border-radius: 7px;
}


/* ===== Account control refinement (V78) ===== */
.account-page .btn,
.account-page .small-btn,
.account-page .order-copy-btn,
.account-page .account-menu-title-btn,
.account-page .account-menu-section-btn,
.account-page .filepick-btn,
.account-page .review-star,
.account-page .icon-btn,
.account-page .pw-toggle,
.account-page .admin-chip,
.account-page .admin-chip-remove,
.account-page .admin-product-status-toggle,
.account-page .admin-product-status-knob,
.account-page .admin-filter-select,
.account-page .notification-remove,
.account-page .order-report-btn,
.account-page .order-action-btn,
.account-page .header-search-btn{
	border-radius: 8px !important;
}

.account-page .input,
.account-page .textarea,
.account-page select,
.account-page select.input,
.account-page .admin-filter-select{
	border-radius: 8px !important;
}

.account-page select,
.account-page select.input,
.account-page .admin-filter-select{
	padding-right: 42px !important;
	background-position: right 14px center !important;
}


.notifications-tools{
	gap: 12px;
	flex-wrap: wrap;
}

.notifications-mark-read-btn{
	white-space: nowrap;
	flex: 0 0 auto;
}

.notifications-mark-read-btn[hidden]{
	display: none !important;
}

.notifications-mark-read-btn:disabled{
	opacity: 0.55;
	cursor: not-allowed;
}


/* ========== Coupons ========== */
.coupon-panel-tools{
	gap: 12px;
	flex-wrap: wrap;
}

.coupon-stats{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.coupon-stat-card{
	padding: 16px;
	border-radius: 16px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: linear-gradient(180deg, rgb(var(--background-rgb) / 0.26), rgb(var(--background-rgb) / 0.18));
}

.coupon-stat-label{
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(242 242 242 / 0.56);
}

.coupon-stat-value{
	margin: 10px 0 0;
	font-size: 30px;
	font-weight: 900;
	line-height: 1;
	color: var(--foreground);
}

.coupon-stat-sub{
	margin: 8px 0 0;
	font-size: 13px;
	color: rgb(242 242 242 / 0.64);
}

.coupon-cards{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.coupon-card{
	position: relative;
	padding: 18px;
	border-radius: 18px;
	border: 1px solid rgb(var(--primary-rgb) / 0.16);
	background: linear-gradient(180deg, rgb(var(--background-rgb) / 0.34), rgb(var(--background-rgb) / 0.20));
	overflow: hidden;
}

.coupon-card::before{
	content: "";
	position: absolute;
	inset: auto -40px -40px auto;
	width: 140px;
	height: 140px;
	border-radius: 999px;
	background: radial-gradient(circle, rgb(var(--primary-rgb) / 0.18), transparent 70%);
	pointer-events: none;
}

.coupon-card.is-highlight{
	border-color: rgb(var(--primary-rgb) / 0.55);
	box-shadow: 0 0 0 4px rgb(var(--primary-rgb) / 0.10);
}

.coupon-card-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.coupon-card-code{
	display: inline-flex;
	align-items: center;
	height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgb(var(--background-rgb) / 0.36);
	border: 1px dashed rgb(var(--primary-rgb) / 0.24);
	color: var(--primary);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.coupon-card-title{
	margin: 10px 0 0;
	font-size: 18px;
	font-weight: 900;
	color: var(--foreground);
}

.coupon-card-value{
	flex-shrink: 0;
	font-size: 24px;
	font-weight: 900;
	color: var(--primary);
	text-align: right;
	line-height: 1.1;
}

.coupon-card-sub{
	margin: 12px 0 0;
	color: rgb(242 242 242 / 0.68);
	font-size: 13px;
	line-height: 1.45;
}

.coupon-meta-row,
.coupon-card-actions,
.coupon-detail-list{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.coupon-meta-row{
	margin-top: 14px;
}

.coupon-chip,
.coupon-status-pill{
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid rgb(255 255 255 / 0.08);
	background: rgb(var(--background-rgb) / 0.26);
	font-size: 12px;
	font-weight: 700;
	color: rgb(242 242 242 / 0.78);
}

.coupon-status-pill.is-available{
	border-color: rgb(16 185 129 / 0.40);
	background: rgb(16 185 129 / 0.12);
	color: rgb(167 243 208 / 0.98);
}

.coupon-status-pill.is-used{
	border-color: rgb(59 130 246 / 0.35);
	background: rgb(59 130 246 / 0.10);
	color: rgb(191 219 254 / 0.98);
}

.coupon-status-pill.is-expired,
.coupon-status-pill.is-inactive,
.coupon-status-pill.is-deleted{
	border-color: rgb(255 255 255 / 0.08);
	background: rgb(255 255 255 / 0.05);
	color: rgb(242 242 242 / 0.56);
}

.coupon-card-actions{
	margin-top: 16px;
}

.coupon-card .small-btn,
.coupon-card .link-btn,
.coupon-admin-action{
	height: 36px;
	padding: 0 14px;
	border-radius: 10px;
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	background: rgb(var(--background-rgb) / 0.18);
	color: var(--foreground);
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: transform 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

.coupon-card .small-btn:hover,
.coupon-card .link-btn:hover,
.coupon-admin-action:hover{
	transform: translateY(-1px);
	border-color: rgb(var(--primary-rgb) / 0.38);
	background: rgb(var(--primary-rgb) / 0.10);
}

.coupon-detail-list{
	margin-top: 14px;
}

.coupon-detail-item{
	min-width: 180px;
	flex: 1 1 180px;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgb(var(--primary-rgb) / 0.10);
	background: rgb(var(--background-rgb) / 0.18);
}

.coupon-detail-label{
	margin: 0;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(242 242 242 / 0.54);
}

.coupon-detail-value{
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 700;
	color: var(--foreground);
	line-height: 1.45;
}

.coupon-selector-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	max-height: 260px;
	overflow: auto;
	padding-right: 2px;
}

.coupon-selector-item{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.16);
	cursor: pointer;
}

.coupon-selector-item:hover{
	border-color: rgb(var(--primary-rgb) / 0.26);
	background: rgb(var(--background-rgb) / 0.22);
}

.coupon-selector-item input{
	margin-top: 2px;
}

.coupon-selector-main{
	min-width: 0;
}

.coupon-selector-title{
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	color: var(--foreground);
}

.coupon-selector-sub{
	margin: 6px 0 0;
	font-size: 12px;
	color: rgb(242 242 242 / 0.56);
	line-height: 1.4;
}

.coupon-form-section{
	padding: 16px;
	border-radius: 16px;
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.14);
}

.coupon-form-section + .coupon-form-section{
	margin-top: 2px;
}

.coupon-form-head{
	margin-bottom: 12px;
}

.coupon-form-title{
	margin: 0;
	font-size: 15px;
	font-weight: 900;
	color: var(--foreground);
}

.coupon-form-sub{
	margin: 6px 0 0;
	font-size: 12px;
	color: rgb(242 242 242 / 0.58);
	line-height: 1.45;
}

.coupon-check-card{
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 12px 14px;
	border-radius: 14px;
	border: 1px solid rgb(var(--primary-rgb) / 0.10);
	background: rgb(var(--background-rgb) / 0.18);
}

.coupon-empty{
	padding: 18px;
	border-radius: 16px;
	border: 1px dashed rgb(var(--primary-rgb) / 0.18);
	background: rgb(var(--background-rgb) / 0.14);
	color: rgb(242 242 242 / 0.62);
	font-size: 13px;
	line-height: 1.45;
}

/* Linha topo do card (código + validade). No desktop o expiry fica escondido
   porque a mesma informação já vive no coupon-detail-list abaixo. */
.coupon-card-topline{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.coupon-card-expiry{
	display: none;
}

@media (max-width: 1100px){
	.coupon-cards,
	.coupon-selector-grid{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 780px){
	.coupon-stats{
		grid-template-columns: 1fr;
	}

	.coupon-card-head{
		flex-direction: column;
	}

	/* Com a head virando column, align-items:flex-start do pai faria o
	   .coupon-card-main colapsar pra largura do conteúdo — o que impede
	   o space-between do topline de empurrar o expiry até a borda. */
	.coupon-card-main{
		align-self: stretch;
		width: 100%;
	}

	/* Mobile: validade migra pro topo à direita do código; lista de detalhes
	   some porque a "Aplicação" já é redundante com .coupon-card-sub e a
	   "Validade" passa a viver na topline. */
	.coupon-card-expiry{
		display: inline-flex;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #8a8a93;
		white-space: nowrap;
	}

	.coupon-detail-list{
		display: none;
	}
}

/* ===== Coupon builder refresh ===== */
#adminCouponModal .account-modal-dialog{
	max-width: 980px;
	width: min(980px, calc(100vw - 32px));
	max-height: min(88vh, 920px);
	padding: 18px;
}

.coupon-builder-form{
	gap: 18px;
}

.coupon-builder-intro{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 16px 18px;
	border-radius: 18px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: linear-gradient(180deg, rgb(var(--background-rgb) / 0.22), rgb(var(--background-rgb) / 0.12));
}

.coupon-builder-intro-eyebrow{
	margin: 0;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(var(--primary-rgb) / 0.92);
}

.coupon-builder-intro-title{
	margin: 8px 0 0;
	font-size: 18px;
	font-weight: 900;
	color: var(--foreground);
}

.coupon-builder-intro-text{
	max-width: 620px;
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.6;
	color: var(--muted-foreground);
}

.coupon-builder-overview{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	min-width: min(300px, 100%);
}

.coupon-overview-pill{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: rgb(var(--background-rgb) / 0.2);
	font-size: 12px;
	font-weight: 800;
	color: var(--foreground);
	white-space: nowrap;
}

.coupon-builder{
	display: grid;
	gap: 12px;
}

.coupon-builder-step{
	border-radius: 18px;
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.12);
	overflow: hidden;
	transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.coupon-builder-step.is-open{
	border-color: rgb(var(--primary-rgb) / 0.24);
	background: rgb(var(--background-rgb) / 0.16);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.02);
}

.coupon-builder-toggle{
	width: 100%;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 14px;
	padding: 18px;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.coupon-builder-step-index{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	border: 1px solid rgb(var(--primary-rgb) / 0.16);
	background: rgb(var(--background-rgb) / 0.24);
	font-size: 12px;
	font-weight: 900;
	color: rgb(var(--primary-rgb));
}

.coupon-builder-step-copy{
	min-width: 0;
	display: grid;
	gap: 4px;
}

.coupon-builder-step-title{
	display: block;
	font-size: 16px;
	font-weight: 900;
	color: var(--foreground);
}

.coupon-builder-step-summary{
	display: block;
	font-size: 12px;
	line-height: 1.55;
	color: var(--muted-foreground);
}

.coupon-builder-step-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: rgb(var(--background-rgb) / 0.2);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--foreground);
}

.coupon-builder-step-icon{
	color: var(--muted-foreground);
	transition: transform 0.2s ease;
}

.coupon-builder-step.is-open .coupon-builder-step-icon{
	transform: rotate(180deg);
}

.coupon-builder-panel{
	padding: 0 18px 18px;
}

.coupon-builder-panel[hidden]{
	display: none;
}

.coupon-builder-panel .coupon-form-section{
	padding: 18px;
	border-radius: 16px;
	border-color: rgb(var(--primary-rgb) / 0.1);
	background: rgb(var(--background-rgb) / 0.16);
}

.coupon-builder-identity-grid,
.coupon-builder-audience-grid{
	align-items: stretch;
}

.coupon-check-card--spotlight{
	justify-content: center;
}

.coupon-check-card--compact{
	justify-content: center;
}

.coupon-inline-help{
	margin: 8px 0 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--muted-foreground);
}

.coupon-benefit-toggle-row{
	display: grid;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgb(var(--primary-rgb) / 0.1);
	background: rgb(var(--background-rgb) / 0.18);
}

.coupon-apply-summary{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.coupon-apply-stat{
	display: grid;
	gap: 6px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid rgb(var(--primary-rgb) / 0.1);
	background: rgb(var(--background-rgb) / 0.18);
}

.coupon-apply-stat-label{
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted-foreground);
}

.coupon-apply-stat strong{
	font-size: 15px;
	font-weight: 900;
	color: var(--foreground);
}

.coupon-apply-stat small{
	font-size: 12px;
	line-height: 1.45;
	color: var(--muted-foreground);
}

.coupon-selector-tabs{
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 4px;
	border-radius: 999px;
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.16);
	margin-bottom: 16px;
}

.coupon-selector-tab{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--muted-foreground);
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
}

.coupon-selector-tab span{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgb(var(--background-rgb) / 0.28);
	font-size: 11px;
	font-weight: 900;
	color: inherit;
}

.coupon-selector-tab.is-active{
	background: rgb(var(--primary-rgb) / 0.16);
	color: var(--foreground);
}

.coupon-selector-panel{
	display: grid;
	gap: 12px;
}

.coupon-selector-panel[hidden]{
	display: none;
}

.coupon-selector-toolbar{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	background: rgb(var(--background-rgb) / 0.9);
	border-radius: 12px;
	padding: 10px;
}

.coupon-selector-counter{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: rgb(var(--background-rgb) / 0.18);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--foreground);
	white-space: nowrap;
}

.coupon-selector-grid{
	gap: 12px;
	max-height: 304px;
	padding-right: 4px;
}

.coupon-selector-grid--products,
.coupon-selector-grid--users{
	grid-template-columns: 1fr;
}

.coupon-selector-grid--categories{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coupon-selector-item{
	position: relative;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: center;
	gap: 14px;
	padding: 14px;
	border-radius: 16px;
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.16);
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.coupon-selector-item:hover{
	border-color: rgb(var(--primary-rgb) / 0.24);
	background: rgb(var(--background-rgb) / 0.22);
	transform: translateY(-1px);
}

.coupon-selector-item.is-selected{
	border-color: rgb(var(--primary-rgb) / 0.34);
	background: rgb(var(--primary-rgb) / 0.08);
}

.coupon-selector-item input{
	margin: 0;
	width: 18px;
	height: 18px;
	accent-color: rgb(var(--primary-rgb));
}

.coupon-selector-visual{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.26);
	flex: none;
}
.coupon-selector-visual img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.coupon-selector-visual-fallback{
	font-size: 13px;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(var(--primary-rgb));
}

.coupon-selector-main{
	min-width: 0;
	display: grid;
	gap: 7px;
}

.coupon-selector-title{
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	color: var(--foreground);
	line-height: 1.4;
}

.coupon-selector-sub{
	margin: 0;
	font-size: 12px;
	color: rgb(242 242 242 / 0.56);
	line-height: 1.5;
}

.coupon-selector-meta{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.coupon-selector-pill{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgb(var(--background-rgb) / 0.22);
	border: 1px solid rgb(var(--primary-rgb) / 0.1);
	font-size: 11px;
	font-weight: 800;
	color: rgb(242 242 242 / 0.78);
}

.coupon-selector-pill--blocked{
	background: rgb(255 107 107 / 0.12);
	border-color: rgb(255 107 107 / 0.2);
	color: rgb(255 196 196);
}

.coupon-selector-item--user .coupon-selector-visual{
	background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.22), rgb(var(--background-rgb) / 0.24));
}

.coupon-selector-item--category .coupon-selector-visual{
	width: 64px;
	height: 64px;
}

.coupon-selector-item--blocked .coupon-selector-title{
	padding-right: 12px;
}

.coupon-builder-actions{
	position: sticky;
	bottom: -18px;
	z-index: 2;
	padding: 14px 0 0;
	margin-top: -4px;
	border-top: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: linear-gradient(180deg, rgb(var(--card-rgb) / 0), rgb(var(--card-rgb) / 0.95) 18%);
	backdrop-filter: blur(8px);
}

@media (max-width: 980px){
	.coupon-builder-intro{
		flex-direction: column;
	}

	.coupon-builder-overview{
		justify-content: flex-start;
		min-width: 0;
	}

	.coupon-apply-summary,
	.coupon-selector-grid--categories{
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px){
	#adminCouponModal .account-modal-dialog{
		width: min(100vw - 16px, 980px);
		max-height: 90vh;
		padding: 14px;
	}

	.coupon-builder-toggle{
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.coupon-builder-step-badge{
		grid-column: 2 / 3;
		justify-self: flex-start;
	}

	.coupon-builder-step-icon{
		grid-column: 3 / 4;
		grid-row: 1 / span 2;
	}

	.coupon-selector-toolbar{
		flex-direction: column;
	}

	.coupon-builder-actions{
		position: static;
		background: transparent;
		backdrop-filter: none;
	}
}

/* ===== Coupon builder polish V90 ===== */
#adminCouponModal .account-modal-dialog{
	max-width: 1040px;
	width: min(1040px, calc(100vw - 32px));
	max-height: min(90vh, 960px);
	padding: 20px;
}

#adminCouponModal .account-modal-header{
	padding-bottom: 2px;
}

#adminCouponModal .coupon-builder-form{
	gap: 20px;
}

#adminCouponModal .coupon-builder-intro{
	padding: 18px 20px;
	border-radius: 20px;
}

#adminCouponModal .coupon-builder-step{
	border-radius: 20px;
}

#adminCouponModal .coupon-builder-toggle{
	padding: 20px;
	gap: 16px;
}

#adminCouponModal .coupon-builder-panel{
	padding: 0 20px 20px;
}

#adminCouponModal .coupon-builder-panel .coupon-form-section{
	display: grid;
	gap: 18px;
	padding: 22px;
	border-radius: 18px;
	background: linear-gradient(180deg, rgb(var(--background-rgb) / 0.2), rgb(var(--background-rgb) / 0.14));
}

#adminCouponModal .coupon-form-head{
	margin-bottom: 0;
	display: grid;
	gap: 6px;
}

#adminCouponModal .coupon-form-title{
	font-size: 18px;
}

#adminCouponModal .coupon-form-sub{
	max-width: 760px;
	font-size: 13px;
	line-height: 1.6;
}

#adminCouponModal .coupon-fields-grid{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}

#adminCouponModal .coupon-field,
#adminCouponModal .coupon-info-card,
#adminCouponModal .coupon-toggle-card{
	min-width: 0;
}

#adminCouponModal .coupon-field{
	display: grid;
	gap: 10px;
	padding: 16px;
	border-radius: 18px;
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.14);
	align-content: start;
}

#adminCouponModal .coupon-field-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

#adminCouponModal .coupon-field-head label{
	margin: 0;
	font-size: 12px;
	font-weight: 800;
	color: var(--foreground);
}

#adminCouponModal .coupon-inline-btn{
	min-height: 34px;
	padding: 0 14px;
	white-space: nowrap;
	color: var(--foreground);
}

#adminCouponModal .coupon-field .input,
#adminCouponModal .coupon-field select.input{
	width: 100%;
	min-height: 48px;
}

#adminCouponModal .coupon-field-tip{
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: var(--muted-foreground);
}

/* Fallback geral de contraste no modal */
#adminCouponModal,
#adminCouponModal * {
	color: var(--foreground) !important;
}

#adminCouponModal .coupon-builder-intro-eyebrow,
#adminCouponModal .coupon-builder-step-badge,
#adminCouponModal .coupon-selector-tab.is-active,
#adminCouponModal .coupon-selector-counter,
#adminCouponModal .coupon-selector-pill{
	color: var(--foreground) !important;
}

#adminCouponModal .coupon-builder-step-summary,
#adminCouponModal .coupon-selector-tab,
#adminCouponModal .coupon-selector-sub,
#adminCouponModal .coupon-apply-stat-label,
#adminCouponModal .coupon-apply-stat small{
	color: var(--muted-foreground) !important;
}

#adminCouponModal .coupon-info-card{
	display: grid;
	align-content: center;
	gap: 8px;
	padding: 18px;
	border-radius: 18px;
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.08), rgb(var(--background-rgb) / 0.16));
}

#adminCouponModal .coupon-info-card-eyebrow{
	margin: 0;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb(var(--primary-rgb) / 0.92);
}

#adminCouponModal .coupon-info-card-title{
	margin: 0;
	font-size: 16px;
	font-weight: 900;
	color: var(--foreground);
}

#adminCouponModal .coupon-info-card-text{
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: rgb(242 242 242 / 0.64);
}

#adminCouponModal .coupon-inline-preview{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	background: rgb(var(--primary-rgb) / 0.1);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.04em;
	color: rgb(var(--primary-rgb));
	white-space: nowrap;
}

#adminCouponModal .coupon-input-shell{
	position: relative;
}

#adminCouponModal .coupon-input-shell .input{
	padding-right: 56px;
}

#adminCouponModal .coupon-input-suffix{
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgb(var(--background-rgb) / 0.4);
	border: 1px solid rgb(var(--primary-rgb) / 0.14);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.04em;
	color: rgb(242 242 242 / 0.8);
	pointer-events: none;
}

#adminCouponModal .coupon-toggle-card{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 18px;
	border-radius: 18px;
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.16);
}

#adminCouponModal .coupon-toggle-card-copy{
	display: grid;
	gap: 6px;
}

#adminCouponModal .coupon-toggle-card-title{
	margin: 0;
	font-size: 14px;
	font-weight: 900;
	color: var(--foreground);
}

#adminCouponModal .coupon-toggle-card-text{
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: rgb(242 242 242 / 0.58);
	max-width: 620px;
}

#adminCouponModal .coupon-toggle-card-check{
	flex: none;
	padding: 10px 14px;
	border-radius: 14px;
	border: 1px solid rgb(var(--primary-rgb) / 0.12);
	background: rgb(var(--background-rgb) / 0.18);
}

#adminCouponModal .coupon-apply-summary{
	gap: 14px;
	margin-bottom: 18px;
}

#adminCouponModal .coupon-apply-stat{
	padding: 16px;
	border-radius: 18px;
}

#adminCouponModal .coupon-selector-tabs{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
	padding: 4px;
	border-radius: 18px;
	overflow: hidden;
	width: min(360px, 100%);
	margin-bottom: 18px;
}

#adminCouponModal .coupon-selector-tab{
	justify-content: space-between;
	width: 100%;
	min-height: 46px;
	padding: 0 16px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 900;
}

#adminCouponModal .coupon-selector-tab span{
	min-width: 26px;
	height: 26px;
	padding: 0 8px;
}

#adminCouponModal .coupon-selector-toolbar{
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

#adminCouponModal .coupon-selector-counter{
	min-height: 36px;
	padding: 0 14px;
	border-radius: 14px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: none;
}

#adminCouponModal .coupon-selector-grid{
	gap: 14px;
	max-height: 332px;
	padding-right: 2px;
	scrollbar-gutter: stable;
}

#adminCouponModal .coupon-selector-grid--products,
#adminCouponModal .coupon-selector-grid--users{
	grid-template-columns: 1fr;
}

#adminCouponModal .coupon-selector-grid--categories{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

#adminCouponModal .coupon-selector-item{
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 16px;
	border-radius: 18px;
}

#adminCouponModal .coupon-selector-visual{
	width: 68px;
	height: 68px;
	border-radius: 18px;
}

#adminCouponModal .coupon-selector-item--user .coupon-selector-visual,
#adminCouponModal .coupon-selector-visual--user{
	width: 56px;
	height: 56px;
	border-radius: 999px;
	background: rgb(var(--background-rgb) / 0.32);
}

#adminCouponModal .coupon-selector-item--user .coupon-selector-visual img,
#adminCouponModal .coupon-selector-visual--user img{
	object-fit: cover;
}

#adminCouponModal .coupon-selector-main{
	gap: 8px;
}

#adminCouponModal .coupon-selector-title{
	font-size: 14px;
}

#adminCouponModal .coupon-selector-sub{
	font-size: 12px;
	line-height: 1.55;
}

#adminCouponModal .coupon-selector-meta{
	gap: 10px;
}

#adminCouponModal .coupon-selector-pill{
	padding: 6px 10px;
}

@media (max-width: 980px){
	#adminCouponModal .coupon-fields-grid,
	#adminCouponModal .coupon-apply-summary,
	#adminCouponModal .coupon-selector-grid--categories{
		grid-template-columns: 1fr;
	}

	#adminCouponModal .coupon-toggle-card{
		flex-direction: column;
		align-items: flex-start;
	}

	#adminCouponModal .coupon-toggle-card-check{
		width: 100%;
		justify-content: flex-start;
	}
}

@media (max-width: 760px){
	#adminCouponModal .account-modal-dialog{
		width: min(100vw - 16px, 1040px);
		padding: 14px;
	}

	#adminCouponModal .coupon-builder-intro,
	#adminCouponModal .coupon-builder-toggle,
	#adminCouponModal .coupon-builder-panel,
	#adminCouponModal .coupon-builder-panel .coupon-form-section{
		padding-left: 14px;
		padding-right: 14px;
	}

	#adminCouponModal .coupon-builder-panel{
		padding-bottom: 14px;
	}

	#adminCouponModal .coupon-builder-panel .coupon-form-section{
		padding-top: 16px;
		padding-bottom: 16px;
	}

	#adminCouponModal .coupon-selector-tabs{
		width: 100%;
	}

	#adminCouponModal .coupon-selector-tab{
		padding: 0 12px;
	}

	#adminCouponModal .coupon-selector-grid{
		max-height: 292px;
	}
}


#adminCouponModal input[type="datetime-local"]::-webkit-calendar-picker-indicator{
	filter: invert(1) brightness(100%);
	opacity: 1;
	cursor: pointer;
}

#adminCouponModal input[type="datetime-local"]::-webkit-clear-button,
#adminCouponModal input[type="datetime-local"]::-webkit-inner-spin-button{
	filter: invert(1) brightness(100%);
}

#adminCouponExpiresAt::-webkit-calendar-picker-indicator{
	filter: invert(1) brightness(1.2);
	opacity: 1;
	cursor: pointer;
}
#adminCouponExpiresAt::-moz-calendar-picker-indicator{
	filter: invert(1) brightness(1.2);
	opacity: 1;
}


/* ===== Coupon UX V93 ===== */
.coupon-cards--single{
	grid-template-columns: 1fr;
}

.coupon-card-main{
	min-width: 0;
	display: grid;
	gap: 8px;
}

.coupon-card{
	display: grid;
	gap: 14px;
}

.coupon-card-head{
	align-items: flex-start;
}

.coupon-card-code{
	min-height: 36px;
	padding: 0 14px;
	font-size: 13px;
	letter-spacing: 0.08em;
}

.coupon-card-value{
	font-size: 22px;
	line-height: 1;
}

.coupon-card-sub{
	margin: 0;
	max-width: 520px;
}

.coupon-card-actions{
	margin-top: 0;
}

#adminCouponModal .coupon-fields-grid--benefit{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

#adminCouponModal .coupon-selector-tabs{
	gap: 0;
	padding: 3px;
	border-radius: 16px;
}

#adminCouponModal .coupon-selector-tab{
	border-radius: 13px;
}

#adminCouponModal .coupon-toggle-card{
	padding: 16px 18px;
}

#adminCouponModal .coupon-toggle-card-copy{
	gap: 0;
}

#adminCouponModal .coupon-toggle-card-title{
	font-size: 13px;
}

#adminCouponModal .coupon-toggle-card-text{
	display: none;
}

#adminCouponModal .coupon-field-head{
	align-items: flex-start;
}

#adminCouponModal .coupon-field-head label{
	line-height: 1.4;
}

#adminCouponModal .coupon-field-tip{
	max-width: 560px;
}

#adminCouponModal #adminCouponExpiresAt{
	color-scheme: light;
}

@media (max-width: 980px){
	#adminCouponModal .coupon-fields-grid--benefit{
		grid-template-columns: 1fr;
	}
}


/* ===== Coupon card ticket effect ===== */
.coupon-card{
	padding: 20px;
	background:
		radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgb(var(--primary-rgb) / 0.16) 0%, transparent 56%),
		linear-gradient(180deg, rgb(var(--background-rgb) / 0.34), rgb(var(--background-rgb) / 0.20));
	background-repeat: no-repeat;
	overflow: visible;
}

.coupon-card::before,
.coupon-card::after{
	content: "";
	position: absolute;
	top: 50%;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	background: var(--background);
	transform: translateY(-50%);
	pointer-events: none;
	z-index: 1;
	box-shadow: inset 0 0 0 999px var(--background);
}

.coupon-card::before{
	left: -15px;
}

.coupon-card::after{
	right: -15px;
}

.coupon-card > *{
	position: relative;
	z-index: 2;
}

@media (max-width: 720px){
	.coupon-card::before,
	.coupon-card::after{
		width: 24px;
		height: 24px;
	}

	.coupon-card::before{
		left: -12px;
	}

	.coupon-card::after{
		right: -12px;
	}
}


/* ===== Warm account refresh V106 ===== */
.account-page {
	background:
		radial-gradient(760px 420px at 10% 0%, rgb(var(--primary-rgb) / 0.12), transparent 62%),
		linear-gradient(180deg, rgb(255 248 234 / 0.04), transparent 28%);
}

.account-sidebar,
.account-content,
.account-modal-dialog,
.admin-table-wrap,
.coupon-card,
#adminCouponModal .coupon-builder-intro,
#adminCouponModal .coupon-builder-toggle,
#adminCouponModal .coupon-builder-panel,
#adminCouponModal .coupon-builder-panel .coupon-form-section,
#adminCouponModal .coupon-field,
#adminCouponModal .coupon-toggle-card,
#adminCouponModal .coupon-selector-item,
#adminCouponModal .coupon-selector-toolbar,
#adminCouponModal .coupon-selector-counter,
#adminCouponModal .coupon-selector-tabs {
	background: linear-gradient(180deg, rgb(255 248 234 / 0.08), rgb(255 248 234 / 0.03)), rgb(var(--card-rgb) / 0.54);
	border-color: rgb(var(--primary-rgb) / 0.16);
	box-shadow: 0 22px 50px rgb(9 5 2 / 0.16);
}

.account-user,
.panel-header {
	border-bottom-color: rgb(255 248 234 / 0.08);
}

.account-menu-item {
	background: rgb(255 248 234 / 0.03);
	border-color: transparent;
}

.account-menu-item:hover {
	background: rgb(255 248 234 / 0.07);
}

.account-menu-item.is-active {
	background: linear-gradient(180deg, rgb(var(--primary-rgb) / 0.18), rgb(var(--primary-rgb) / 0.08));
	border-color: rgb(var(--primary-rgb) / 0.20);
	color: var(--foreground);
}

.account-page .input,
.account-page .textarea,
.account-page .filepick {
	background: linear-gradient(180deg, rgb(255 248 234 / 0.08), rgb(255 248 234 / 0.03)), rgb(var(--background-rgb) / 0.46);
	border-color: rgb(var(--primary-rgb) / 0.16);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}

.account-page select,
.account-page .admin-filter-select {
	background-color: rgb(var(--background-rgb) / 0.46);
	border-color: rgb(var(--primary-rgb) / 0.16);
}

.admin-table th {
	background: rgb(255 248 234 / 0.04);
}


/* ===== Editorial account refresh V107 ===== */
.account-page {
	background: transparent;
}

.account-sidebar,
.account-content,
.account-modal-dialog,
.admin-table-wrap,
.coupon-card,
#adminCouponModal .coupon-builder-intro,
#adminCouponModal .coupon-builder-toggle,
#adminCouponModal .coupon-builder-panel,
#adminCouponModal .coupon-builder-panel .coupon-form-section,
#adminCouponModal .coupon-field,
#adminCouponModal .coupon-toggle-card,
#adminCouponModal .coupon-selector-item,
#adminCouponModal .coupon-selector-toolbar,
#adminCouponModal .coupon-selector-counter,
#adminCouponModal .coupon-selector-tabs,
.order-card,
.notification-item,
.address-card,
.payment-card {
	background: rgb(243 233 220 / 0.88);
	border-color: rgb(var(--primary-rgb) / 0.14);
	box-shadow: 0 16px 36px rgb(60 36 9 / 0.10);
}

.account-user,
.panel-header,
.account-menu-group {
	border-bottom-color: rgb(var(--primary-rgb) / 0.10);
}

.account-page,
.account-page h1,
.account-page h2,
.account-page h3,
.account-page h4,
.account-page .panel-title,
.account-page .account-menu-title,
.account-page .account-user-name,
.account-page .admin-table,
.account-page .coupon-title {
	color: var(--foreground);
}

.account-page .account-user-meta,
.account-page .panel-subtitle,
.account-page .account-menu-item-sub,
.account-page .notification-text,
.account-page .coupon-subtitle,
.account-page .order-meta,
.account-page .empty-state-text,
.account-page .helper-text,
.account-page .admin-table td {
	color: #655241;
}

.account-menu-item {
	background: rgb(246 238 229 / 0.52);
}

.account-menu-item:hover {
	background: rgb(234 216 187 / 0.70);
}

.account-menu-item.is-active {
	background: rgb(var(--primary-rgb) / 0.16);
	color: var(--foreground);
}

.account-page .input,
.account-page .textarea,
.account-page .filepick {
	background: rgb(246 238 229 / 0.76);
	border-color: rgb(var(--primary-rgb) / 0.14);
	color: var(--foreground);
}

.account-page select,
.account-page .admin-filter-select {
	background-color: rgb(246 238 229 / 0.76);
	border-color: rgb(var(--primary-rgb) / 0.14);
	color: var(--foreground);
}

.admin-table th {
	background: rgb(232 219 201 / 0.92);
	color: var(--foreground);
}


/* ===== B&W editorial blend refresh V109 ===== */
.account-sidebar,
.account-content,
.account-modal-dialog,
.admin-table-wrap,
.coupon-card,
#adminCouponModal .coupon-builder-intro,
#adminCouponModal .coupon-builder-toggle,
#adminCouponModal .coupon-builder-panel,
#adminCouponModal .coupon-builder-panel .coupon-form-section,
#adminCouponModal .coupon-field,
#adminCouponModal .coupon-toggle-card,
#adminCouponModal .coupon-selector-item,
#adminCouponModal .coupon-selector-toolbar,
#adminCouponModal .coupon-selector-counter,
#adminCouponModal .coupon-selector-tabs,
.order-card,
.notification-item,
.address-card,
.payment-card {
	background: #ffffff;
	border-color: #e7ddcf;
	box-shadow: 0 14px 34px rgb(20 15 10 / 0.06);
}

.account-page .account-user-meta,
.account-page .panel-subtitle,
.account-page .account-menu-item-sub,
.account-page .notification-text,
.account-page .coupon-subtitle,
.account-page .order-meta,
.account-page .empty-state-text,
.account-page .helper-text,
.account-page .admin-table td { color: #6f5c4b; }

.account-menu-item { background: #ffffff; }
.account-menu-item:hover { background: #f7f0e6; }
.account-menu-item.is-active {
	background: rgb(var(--primary-rgb) / 0.14);
	color: #171411;
}

.account-page .input,
.account-page .textarea,
.account-page .filepick {
	background: #fbf8f3;
	border-color: #e4d8c8;
	color: #171411;
}

.account-page select,
.account-page .admin-filter-select {
	background-color: #fbf8f3;
	border-color: #e4d8c8;
	color: #171411;
}

.admin-table th {
	background: #f5ede2;
	color: #171411;
}


/* ===== V110 refinements: stronger contrast on account ===== */
.account-sidebar,
.account-content {
	background: #ffffff;
	border-color: #e1d4c3;
	box-shadow: 0 16px 34px rgb(20 15 10 / 0.08);
}

.account-user {
	border-bottom: 1px solid rgb(23 18 14 / 0.08);
}

/* Separator above the Support button — visually splits Notifications from
 * the secondary actions (Support / Logout). Matches the hairline used under
 * the user card at the top of the sidebar. */
.account-menu-divider-top {
	position: relative;
	margin-top: 10px;
	padding-top: 14px;
}
.account-menu-divider-top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 4px;
	right: 4px;
	height: 1px;
	background: rgb(23 18 14 / 0.08);
	pointer-events: none;
}

.account-edit-link,
.panel-subtitle,
.account-page .hint,
.account-page .helper-text {
	color: #7a6756;
}

.account-edit-link:hover {
	color: var(--primary);
}

.account-menu-title,
.account-menu-title-btn,
.account-menu-section-btn,
.account-menu-logout,
.account-menu-support,
.account-user-meta strong,
label {
	color: #201811;
}

.account-menu-item,
.account-menu-logout,
.account-menu-support {
	background: transparent;
	color: #68574a;
}

.account-menu-item:hover,
.account-menu-logout:hover,
.account-menu-support:hover,
.account-menu-section-btn:hover {
	background: #f7f1e8;
	color: #201811;
}

.account-menu-item.is-active,
.account-menu-section-btn.is-active {
	background: rgb(var(--primary-rgb) / 0.14);
	border-color: rgb(var(--primary-rgb) / 0.24);
	color: #201811;
}

.profile-avatar {
	background: #fcf8f2;
	border-color: #eadfce;
}

.profile-avatar .hint {
	color: #8c7865;
}

/* ===== Contraste de conta V110 ===== */
.account-sidebar,
.account-content,
.account-modal-dialog,
.admin-table-wrap,
.coupon-card,
#adminCouponModal .coupon-builder-intro,
#adminCouponModal .coupon-builder-toggle,
#adminCouponModal .coupon-builder-panel,
#adminCouponModal .coupon-builder-panel .coupon-form-section,
#adminCouponModal .coupon-field,
#adminCouponModal .coupon-toggle-card,
#adminCouponModal .coupon-selector-item,
#adminCouponModal .coupon-selector-toolbar,
#adminCouponModal .coupon-selector-counter,
#adminCouponModal .coupon-selector-tabs,
.order-card,
.notification-item,
.address-card,
.payment-card {
	background: #fffdfa !important;
	border-color: #e2d2bd !important;
	box-shadow: 0 16px 34px rgb(25 18 10 / 0.07) !important;
}

.account-user,
.panel-header,
.account-menu-group {
	border-bottom-color: #eee1d1 !important;
}

.account-page .panel-subtitle,
.account-page .account-user-meta,
.account-page .account-menu-item-sub,
.account-page .notification-text,
.account-page .coupon-subtitle,
.account-page .order-meta,
.account-page .empty-state-text,
.account-page .helper-text,
.account-page .admin-table td,
.account-page .hint,
.account-page .radio {
	color: #6b5745 !important;
}

.account-menu-item {
	background: #faf5ee !important;
	border: 1px solid transparent !important;
	color: #171411 !important;
}

.account-menu-item:hover {
	background: #f5ecdf !important;
	border-color: #e7d7c1 !important;
}

.account-menu-item.is-active {
	background: rgb(var(--primary-rgb) / 0.16) !important;
	border-color: rgb(var(--primary-rgb) / 0.28) !important;
	color: #171411 !important;
}

.account-page .input,
.account-page .textarea,
.account-page .filepick {
	background: #ffffff !important;
	border-color: #dbc7aa !important;
	color: #171411 !important;
}

.account-page select,
.account-page .admin-filter-select {
	background-color: #ffffff !important;
	border-color: #dbc7aa !important;
	color: #171411 !important;
}

.profile-avatar {
	background: #fbf5ee !important;
	border-color: #e4d4c0 !important;
}

.avatar-preview {
	background: #f2e9dd !important;
	border-color: #dcc7aa !important;
}


/* ===== Account contrast tune V110 ===== */
.account-page {
	background: transparent;
}

.account-sidebar,
.account-content,
.account-modal-dialog,
.admin-table-wrap,
.coupon-card,
.order-card,
.notification-item,
.address-card,
.payment-card {
	background: #ffffff;
	border-color: #e4d8c8;
	box-shadow: 0 14px 34px rgb(20 15 10 / 0.05);
}

.account-menu-item,
.account-menu-title-btn {
	color: #55463a;
}

.account-menu-item:hover,
.account-menu-title-btn:hover {
	background: #f7f0e6;
	color: #171411;
}

.account-menu-item.is-active,
.account-menu-title-btn.is-active {
	background: rgb(var(--primary-rgb) / 0.14);
	border-color: rgb(var(--primary-rgb) / 0.22);
	color: #171411;
}

.account-page label,
.account-page .radio,
.account-page .filepick-text,
.account-page .notification-meta,
.account-page .helper-text,
.account-page .order-meta,
.account-page .panel-subtitle,
.account-page .account-user-meta,
.account-edit-link {
	color: #756453;
}

.account-page .panel-title,
.account-page .account-user-name,
.account-page .account-menu-title,
.account-page .account-menu-section-btn,
.account-page .account-menu-title-btn span,
.account-page .badge-inline,
.account-page .panel-header h1,
.account-page .panel-header h2,
.account-page .panel-header h3 {
	color: #171411;
}

.account-page .input,
.account-page .textarea,
.account-page .filepick {
	background: #fbf8f3;
	border-color: #dccfbe;
	color: #171411;
}

.account-page select,
.account-page .admin-filter-select {
	background-color: #fbf8f3;
	border-color: #dccfbe;
	color: #171411;
}

.account-page .input::placeholder,
.account-page .textarea::placeholder {
	color: #a28f7c;
}

.profile-avatar {
	background: #faf7f2;
	border-color: #e4d8c8;
}

.avatar-preview {
	background: #f3eadf;
	border-color: #e4d8c8;
}

.account-menu-section-btn,
.account-menu-title-btn {
	border-radius: 12px;
}

/* ===== Header spacing sync V112 ===== */
.account-page {
	padding-top: calc(var(--header-height) + var(--value-strip-h, 0px) + 20px);
}


/* ===== V110 fix: remaining dark-theme remnants ===== */

/* --- List items (cards & addresses) --- */
.list-item {
	border: 1px solid #e4d8c8;
	background: #ffffff;
}

.list-desc {
	color: #756453;
}

.link {
	color: #756453;
}

.link:hover {
	color: var(--primary);
}

.small-btn {
	border: 1px solid #dccfbe;
	background: #fbf8f3;
	color: #171411;
}

.small-btn:hover {
	border-color: rgb(var(--primary-rgb) / 0.35);
	background: rgb(var(--primary-rgb) / 0.08);
}

/* --- Empty state --- */
.empty-state {
	border: 1px dashed #dccfbe;
	background: #fbf8f3;
	color: #756453;
}

/* --- Dividers & borders --- */
.panel-header {
	border-bottom-color: #eee1d1;
}

.account-modal-header {
	border-bottom-color: #eee1d1;
}

.order-hero-divider {
	background: #eee1d1;
}

.order-info-row {
	border-bottom-color: #eee1d1;
}

/* --- Order elements --- */
.order-sub {
	color: #756453;
}

.order-status {
	border: 1px solid #e4d8c8;
	background: #fbf8f3;
	color: #171411;
}

.order-total,
.order-total-label {
	color: #756453;
}

.order-total-value {
	color: #171411;
}

.order-thumb {
	border-color: #e4d8c8;
	background: #f3eadf;
}

.order-details-card {
	background: #ffffff;
	border-color: #e4d8c8;
}

.order-details-card-title {
	color: #171411;
}

.order-hero-sub {
	color: #756453;
}

.order-hero-block-desc {
	color: #756453;
}

.order-addr-line {
	color: #756453;
}

.order-timeline-date {
	color: #756453;
}

.order-info-left {
	color: #756453;
}

.order-details-items .cart-item-meta {
	color: #756453;
}

.order-copy-btn {
	background: #fbf8f3;
	border-color: #dccfbe;
}

/* --- Timeline & notification dots --- */
.order-timeline-dot {
	background: #e4d8c8;
	border-color: #dccfbe;
}

.notification-dot {
	background: #e4d8c8;
	border-color: #dccfbe;
}

/* --- Password toggle --- */
.pw-toggle {
	color: #756453;
}

/* --- Muted menu title --- */
.account-menu-title.muted {
	color: #756453;
}

/* --- Tag / pill --- */
.tag {
	border-color: rgb(34 197 94 / 0.22);
}

/* --- Account search --- */
.account-search {
	background: #ffffff;
	border-color: #dccfbe;
}

.account-search-input::-webkit-search-cancel-button {
	background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23756453%27%20stroke-width%3D%273%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%206%206%2018%27%2F%3E%3Cpath%20d%3D%27M6%206%2018%2018%27%2F%3E%3C%2Fsvg%3E") no-repeat center center;
	background-size: 14px 14px;
}

/* --- Coupon empty --- */
.coupon-empty {
	border-color: #dccfbe;
	background: #fbf8f3;
	color: #756453;
}

/* --- Select styling (global — covers .account-page + modals + checkout) --- */
select.input,
.account-page select.input,
.account-page select,
.admin-filter-select,
.account-page .admin-filter-select,
.checkout-page select.input {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	color-scheme: light !important;
	background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23756453' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 14px center / 16px !important;
	border: 1px solid #dbc7aa !important;
	color: #171411 !important;
	padding-right: 42px !important;
	cursor: pointer !important;
}

select.input:hover,
.account-page select.input:hover,
.admin-filter-select:hover,
.account-page .admin-filter-select:hover {
	border-color: rgb(var(--primary-rgb) / 0.40) !important;
	background-color: #faf7f2 !important;
}

select.input:focus,
.account-page select.input:focus,
.admin-filter-select:focus,
.account-page .admin-filter-select:focus {
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.12) !important;
	outline: none !important;
}

select.input option,
.admin-filter-select option {
	background: #ffffff;
	color: #171411;
}

select.input option:checked,
.admin-filter-select option:checked {
	background: #f5ede2;
	color: var(--primary);
}


/* ===== V127 conta sem header fixo ===== */
body.page-account-static-header .site-header {
	position: relative !important;
	inset: auto !important;
	top: 0 !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
	z-index: 20;
}

body.page-account-static-header .account-page {
	padding-top: 24px !important;
}

/* Mobile: strip também precisa ser estático (header scrolla com a página) */
@media (max-width: 1023.98px) {
	body.page-account-static-header .hp-value-strip {
		position: static !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		z-index: auto !important;
		box-shadow: none !important;
	}

	/* Fundo cinza neutro (#f4f4f4, mesma cor do footer) — serve de canvas
	   pra destacar os inputs e cards brancos como elementos principais. */
	body.page-account-static-header {
		background: #f4f4f4 !important;
	}
	body.page-account-static-header .account-page {
		background: #f4f4f4 !important;
	}

	/* Gap entre o form (botão Salvar) e o cartão do avatar.
	   Fundo/borda seguem o padrão original do .profile-avatar. */
	body.page-account-static-header .profile-avatar {
		margin-top: 20px;
	}
}

/* --- Notification remove button V110 --- */
.notification-remove {
	border: 1px solid rgb(var(--primary-rgb) / 0.30);
	background: rgb(var(--primary-rgb) / 0.08);
	color: var(--primary);
}

.notification-remove:hover {
	border-color: rgb(var(--primary-rgb) / 0.50);
	background: rgb(var(--primary-rgb) / 0.18);
	color: var(--primary);
}

/* --- Admin table elements V110 --- */
.admin-cell-muted {
	color: #8c7865;
}

.admin-pill {
	background: #fbf8f3;
	border-color: rgb(var(--primary-rgb) / 0.25);
	color: #5a4838;
}

.admin-pill--admin {
	border-color: rgb(16 185 129 / 0.40);
	background: rgb(16 185 129 / 0.10);
	color: #0f7a52;
}

.admin-pill--user {
	border-color: #e4d8c8;
	background: #fbf8f3;
	color: #756453;
}

.admin-icon-action {
	border: 1px solid #e4d8c8;
	background: #fbf8f3;
	color: #756453;
}

.admin-icon-action:hover {
	border-color: rgb(var(--primary-rgb) / 0.40);
	background: rgb(var(--primary-rgb) / 0.10);
	color: var(--primary);
}

.admin-icon-action:disabled,
.admin-icon-action[aria-disabled="true"] {
	border-color: #eee1d1;
	background: #fbf8f3;
	color: #c4b5a3;
}

/* --- Review modal text & controls V110 --- */
.account-modal-dialog .helper-text {
	color: #5a4838 !important;
}

.account-modal-dialog .filepick-text {
	color: #5a4838 !important;
}

.account-modal-dialog .filepick {
	background: #ffffff !important;
	border-color: #dccfbe !important;
}

/* --- Review modal elements V110 --- */
.review-star {
	border-color: #e4d8c8;
	background: #fbf8f3;
	color: #d0c1ae;
}

.review-star:hover {
	border-color: rgb(var(--primary-rgb) / 0.45);
	background: rgb(var(--primary-rgb) / 0.06);
}

.review-image-chip {
	border-color: #e4d8c8;
	background: #f3eadf;
}

.review-image-remove {
	border-color: rgb(255 255 255 / 0.50);
	background: rgb(0 0 0 / 0.55);
	color: #ffffff;
}

/* --- Modal header border & close button --- */
.account-modal-header {
	border-bottom-color: #eee1d1;
}

.account-modal-dialog .icon-btn {
	border: 1px solid #e4d8c8;
	background: #fbf8f3;
	color: #756453;
}

.account-modal-dialog .icon-btn:hover {
	border-color: rgb(var(--primary-rgb) / 0.35);
	background: rgb(var(--primary-rgb) / 0.08);
	color: var(--primary);
}


/* ===== Light-theme contrast fix — remaining dark-theme remnants ===== */

.notification-meta-pill {
	border-color: #e4d8c8;
	background: #fbf8f3;
	color: #5a4838;
}

.account-logout {
	border-color: #e4d8c8;
	background: #fbf8f3;
	color: #171411;
}

.account-logout:hover {
	border-color: rgb(var(--primary-rgb) / 0.35);
	background: rgb(var(--primary-rgb) / 0.08);
	color: var(--primary);
}

.admin-hint {
	border-color: #e4d8c8;
	background: #fbf8f3;
	color: #5a4838;
}

.order-review-sub {
	color: #756453;
}

.filepick-text {
	color: #756453;
}

.coupon-stat-label {
	color: #8c7865;
}

.coupon-stat-sub {
	color: #756453;
}

.coupon-card-sub {
	color: #756453;
}

.coupon-chip,
.coupon-status-pill {
	border-color: #e4d8c8;
	background: #fbf8f3;
	color: #5a4838;
}

.coupon-status-pill.is-expired,
.coupon-status-pill.is-inactive,
.coupon-status-pill.is-deleted {
	border-color: #e4d8c8;
	background: #f5f0ea;
	color: #8c7865;
}

.coupon-detail-label {
	color: #8c7865;
}

.coupon-selector-sub {
	color: #756453;
}

.coupon-form-sub {
	color: #756453;
}

.coupon-selector-pill {
	border-color: #e4d8c8;
	background: #fbf8f3;
	color: #5a4838;
}

#adminCouponModal .coupon-info-card-text {
	color: #756453;
}

#adminCouponModal .coupon-input-suffix {
	background: #f3eadf;
	border-color: #e4d8c8;
	color: #5a4838;
}

#adminCouponModal .coupon-toggle-card-text {
	color: #756453;
}

/* --- Date picker invert fix (light theme) --- */
#adminCouponModal input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#adminCouponModal input[type="datetime-local"]::-webkit-clear-button,
#adminCouponModal input[type="datetime-local"]::-webkit-inner-spin-button {
    filter: none !important;
}

/* --- Account modal shadow (light theme) --- */
.account-modal-dialog {
    box-shadow: 0 20px 60px rgb(20 15 10 / 0.18) !important;
}

/* --- Notification thumb/icon highlight (light theme) --- */
.notification-thumb {
    border: 1px solid #e4d8c8;
    background: #f5ede2;
}

.notification-thumb.is-icon {
    background: #f5ede2;
    border-color: #e4d8c8;
    color: #3d2e1e;
}

.notification-thumb.is-icon .icon {
    opacity: 1;
    color: #3d2e1e;
}


/* ===== Coupon card redesign (ticket style) =====
 * Visual goal: feel like a real paper ticket with a perforated tear line
 * and "bite marks" (half-circle cutouts) on the sides — not just another
 * box that blends into the page.
 *
 * Structure: `head` block (golden gradient) holds code+value+sub. A dashed
 * perforation separates it from the `body` (chips + details + actions).
 * The two half-circles sit on the page-bg color so they subtract from the
 * card silhouette, giving the torn-stub look.
 */
.coupon-card {
    position: relative;
    background: #ffffff !important;
    border: 1px solid #e7ddcf !important;
    border-radius: 14px !important;
    padding: 0 !important;
    /* overflow hidden so the bite pseudo-elements (positioned half outside
     * the card edge) get clipped, leaving just the visible half — a clean
     * half-moon "bite" into the card silhouette. box-shadow paints outside
     * the border-box and isn't affected by this. */
    overflow: hidden !important;
    box-shadow:
        0 1px 3px rgb(20 15 10 / 0.04),
        0 6px 20px rgb(20 15 10 / 0.06) !important;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.coupon-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 2px 6px rgb(20 15 10 / 0.06),
        0 14px 34px rgb(20 15 10 / 0.12) !important;
}

.coupon-card.is-highlight {
    border-color: var(--primary) !important;
    box-shadow:
        0 0 0 3px rgb(var(--primary-rgb) / 0.14),
        0 10px 28px rgb(20 15 10 / 0.10) !important;
}

/* Kill any legacy accent pseudo-element from older rules */
.coupon-card::before,
.coupon-card::after {
    content: none !important;
}

/* === HEAD — clean boutique gift-card style ===
 * Stopped chasing fancy gradients. The head is now a clean off-white
 * surface with a thin gold accent stripe at the very top edge — reads
 * like a premium gift card / airline ticket. The hero is the black code
 * pill with gold border: high contrast, scannable, memorable. */
.coupon-card-head {
    position: relative;
    padding: 18px 24px 14px;
    background: #ffffff;
    border: 0;
    border-radius: 14px 14px 0 0;
    gap: 10px;
    /* Gold accent strip across the top, plus a hairline at the bottom
     * to cleanly separate from the perforation below. */
    box-shadow:
        inset 0 3px 0 var(--primary),
        inset 0 -1px 0 rgb(0 0 0 / 0.06);
}

.coupon-card-code {
    display: inline-flex;
    align-items: center;
    height: 36px;
    padding: 0 18px;
    border-radius: 8px;
    /* Gold pill + dark text — the globally recognizable "discount code"
     * pattern (Shopee, Amazon, Uber vouchers). The page has a hard
     * `.account-page * { color: var(--foreground) !important }` rule
     * that kills any custom text color; a dark foreground on gold is
     * exactly what we want anyway, so this works WITH the cascade. */
    background: var(--primary) !important;
    border: 0 !important;
    font-family: "JetBrains Mono", "SFMono-Regular", "Consolas", "Courier New", monospace;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 0.35),
        0 2px 6px rgb(158 113 41 / 0.25);
}

.coupon-card-value {
    font-size: 28px;
    font-weight: 900;
    color: #1a1a1a;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.02em;
    text-shadow: none;
}

.coupon-card-sub {
    /* margin-top zerado: o gap do .coupon-card-main (grid) já garante o
       respiro entre topline e o subtítulo. Margem + gap somavam. */
    margin: 0;
    color: #6f5c4b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
}

/* === PERFORATION SEPARATOR ===
 * The first child after the head gets a dashed top border (the tear line)
 * plus two half-circle bite marks that overhang into the card edge.
 * We target `.coupon-meta-row` because it always follows the head in the
 * current HTML, and use absolutely positioned pseudo-elements matching
 * the page background so the silhouette gets "eaten". */
.coupon-card > .coupon-meta-row {
    position: relative;
    padding: 14px 22px 0;
    margin-top: 0;
    /* Dotted perforation line (slightly offset down to leave room for bites) */
    background-image: radial-gradient(circle, #d8caae 0 1.8px, transparent 2px);
    background-size: 9px 2px;
    background-repeat: repeat-x;
    background-position: center 6px;
    padding-top: 14px;
}

.coupon-card > .coupon-meta-row::before,
.coupon-card > .coupon-meta-row::after {
    content: "" !important;
    position: absolute;
    top: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    /* Match the account panel background color so the half-moon that
     * overlaps the card looks like a true bite. */
    background: #fbf8f3;
    border: 1px solid #e7ddcf;
    box-shadow: none;
    z-index: 3;
}
.coupon-card > .coupon-meta-row::before {
    left: -11px;
}
.coupon-card > .coupon-meta-row::after {
    right: -11px;
}

/* === BODY === */
.coupon-meta-row {
    /* Rule above already positions this; keep flex gap for chips */
    gap: 8px;
    flex-wrap: wrap;
}

.coupon-chip,
.coupon-status-pill {
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid #e4d8c8;
    background: #faf7f2;
    color: #5a4838;
    display: inline-flex;
    align-items: center;
    letter-spacing: 0.02em;
}

.coupon-status-pill.is-available {
    border-color: rgb(16 185 129 / 0.30);
    background: rgb(16 185 129 / 0.08);
    color: #0f7a52;
}

.coupon-status-pill.is-used {
    border-color: rgb(59 130 246 / 0.25);
    background: rgb(59 130 246 / 0.08);
    color: #1d4ed8;
}

.coupon-status-pill.is-expired,
.coupon-status-pill.is-inactive,
.coupon-status-pill.is-deleted {
    border-color: #e4d8c8;
    background: #f5f0ea;
    color: #8c7865;
}

.coupon-detail-list {
    padding: 0 22px;
    margin-top: 10px;
}

.coupon-detail-item {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px dashed #e7ddcf;
    background: #fdfaf5;
}

.coupon-detail-label {
    color: #8c7865;
}

.coupon-card-actions {
    padding: 0 22px 14px;
    margin-top: 12px;
}

.coupon-card .small-btn {
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1.5px solid var(--primary);
    background: rgb(var(--primary-rgb) / 0.08);
    color: #2a1f14;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.coupon-card .small-btn:hover {
    background: var(--primary);
    color: #ffffff;
    transform: translateY(-1px);
}


/* ===== Credit card visual ===== */
.cc-card {
    position: relative;
    border-radius: 16px;
    padding: 22px 24px 14px;
    min-height: 190px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px rgb(0 0 0 / 0.22);
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.cc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 40px rgb(0 0 0 / 0.30);
}

/* Subtle shine overlay */
.cc-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background:
        radial-gradient(ellipse at 25% -10%, rgb(255 255 255 / 0.22), transparent 55%),
        radial-gradient(ellipse at 85% 110%, rgb(255 255 255 / 0.08), transparent 45%);
    pointer-events: none;
    z-index: 0;
}

.cc-card > * {
    position: relative;
    z-index: 1;
}

.cc-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cc-card,
.cc-card * {
    color: rgb(230 220 200) !important;
}

.cc-brand {
    font-size: 18px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.95) !important;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.20);
}

.cc-default-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: 6px;
    background: rgb(230 215 185 / 0.20);
    border: 1px solid rgb(230 215 185 / 0.30);
    color: rgb(230 220 200) !important;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cc-chip {
    margin: 16px 0 14px;
    width: 40px;
    height: 30px;
}

.cc-number {
    margin: 0;
    font-family: "Montserrat", monospace, system-ui;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgb(230 220 200) !important;
    text-shadow: 0 1px 3px rgb(0 0 0 / 0.20);
}

.cc-bottom {
    margin-top: auto;
    padding-top: 10px;
}

.cc-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgb(215 200 180) !important;
    text-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
}

.cc-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / 0.12);
}

.cc-action-btn {
    height: 30px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid rgb(215 200 180 / 0.25);
    background: rgb(215 200 180 / 0.12);
    color: rgb(225 215 195) !important;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease;
}

.cc-action-btn:hover {
    background: rgb(215 200 180 / 0.22);
    border-color: rgb(215 200 180 / 0.40);
}

.cc-action-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.cc-action-btn--danger {
    border-color: rgb(248 180 170 / 0.30);
    background: rgb(248 180 170 / 0.10);
    color: rgb(248 195 185) !important;
}

.cc-action-btn--danger:hover {
    background: rgb(248 180 170 / 0.22);
    border-color: rgb(248 180 170 / 0.45);
}

/* Grid layout for cards */
#cardsList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

@media (max-width: 640px) {
    .cc-card {
        min-height: 170px;
        padding: 18px 20px 12px;
    }

    .cc-number {
        font-size: 16px;
    }

    #cardsList {
        grid-template-columns: 1fr;
    }
}


/* ===== Address card redesign ===== */
#addressesList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.addr-card {
    background: #ffffff;
    border: 1px solid #e7ddcf;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgb(20 15 10 / 0.05);
    transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    position: relative;
}

/* Swipe drawer (hidden por padrão — só aparece em mobile via media query) */
.addr-swipe-actions {
    display: none;
}

.addr-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgb(20 15 10 / 0.09);
}

.addr-card.is-default {
    border-color: rgb(var(--primary-rgb) / 0.40);
}

/* Top row: icon + name + tag */
.addr-card-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
    background: linear-gradient(135deg, #faf5ee 0%, #f5ecdf 100%);
    border-bottom: 1px solid #eee1d1;
}

.addr-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgb(var(--primary-rgb) / 0.10);
    border: 1px solid rgb(var(--primary-rgb) / 0.18);
    color: var(--primary);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

.addr-head {
    flex: 1;
    min-width: 0;
}

.addr-name {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #171411;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.addr-phone {
    margin: 3px 0 0;
    font-size: 13px;
    color: #8c7865;
}

.addr-default-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 8px;
    background: rgb(16 185 129 / 0.10);
    border: 1px solid rgb(16 185 129 / 0.32);
    color: #047857;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Body: address lines with icons */
.addr-body {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.addr-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #5a4838;
    line-height: 1.4;
}

.addr-row-icon {
    color: #b5a18c;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Actions footer */
.addr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 20px 16px;
    border-top: 1px solid #f0e8dd;
    padding-top: 14px;
    margin-top: 2px;
}

.addr-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid #e4d8c8;
    background: #faf7f2;
    color: #5a4838;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.addr-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgb(var(--primary-rgb) / 0.35);
    background: rgb(var(--primary-rgb) / 0.06);
    color: var(--primary);
}

.addr-action-btn:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

.addr-action-btn--danger {
    border-color: rgb(220 180 170 / 0.50);
    color: #b44a3e;
}

.addr-action-btn--danger:hover {
    border-color: rgb(239 68 68 / 0.40);
    background: rgb(239 68 68 / 0.06);
    color: #dc2626;
}

@media (max-width: 640px) {
    #addressesList {
        grid-template-columns: 1fr;
    }

    .addr-card-top {
        padding: 14px 16px 12px;
    }

    .addr-body {
        padding: 12px 16px;
    }

    .addr-actions {
        padding: 12px 16px 14px;
    }
}

/* ===== Admin Order Controls (status + label) ===== */
.admin-controls-wrap {
	margin-top: 20px;
	background: #ffffff;
	border: 1px solid #e7ddcf;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.admin-controls-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	background: #fbf8f3;
	border-bottom: 1px solid #ece2d2;
	color: #2d2419 !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.admin-controls-header .icon {
	color: #8c7865 !important;
}

.admin-controls-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	position: relative;
}

/* Centered vertical divider between blocks (shorter than full height) */
.admin-controls-grid::before {
	content: "";
	position: absolute;
	top: 24px;
	bottom: 24px;
	left: 50%;
	width: 1px;
	background: #ece2d2;
	transform: translateX(-50%);
	pointer-events: none;
}

.admin-control-block {
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: #fbf8f3;
}

.admin-control-block-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #2d2419 !important;
	margin: 0;
}

.admin-control-block-title .icon {
	color: #8c7865 !important;
}

.admin-control-tag {
	margin-left: auto;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(140, 120, 101, 0.15);
	color: #8c7865 !important;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.admin-control-block-body {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.admin-input {
	flex: 1;
	padding: 10px 14px !important;
	font-size: 14px !important;
	border-radius: 10px !important;
	border: 1px solid #e4d8c8 !important;
	background: #fff !important;
	color: #2d2419 !important;
	min-width: 0;
}

.admin-input:focus {
	border-color: #8c7865 !important;
	outline: none;
}

.admin-control-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	white-space: nowrap;
	flex-shrink: 0;
}

.admin-control-helper {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-size: 12px;
	color: #8c7865 !important;
	font-style: italic;
}

.admin-control-helper .icon {
	color: #8c7865 !important;
	flex-shrink: 0;
}

.admin-label-status {
	padding: 12px 14px;
	border-radius: 10px;
	background: #fff;
	border: 1px dashed #e4d8c8;
	font-size: 13px;
	color: #6f5c4b !important;
	line-height: 1.5;
}

.admin-label-status strong {
	color: #2d2419 !important;
	font-weight: 700;
}

.admin-label-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.admin-label-actions .admin-control-btn {
	flex: 1;
	min-width: 140px;
}

/* Disabled state for buttons (works for both <a> and <button>) */
.admin-control-btn.is-disabled,
.admin-control-btn:disabled {
	opacity: 0.5 !important;
	cursor: not-allowed !important;
	pointer-events: none;
	background: #d4c5b0 !important;
	color: #6f5c4b !important;
	border-color: #d4c5b0 !important;
	box-shadow: none !important;
	transform: none !important;
}

.admin-control-btn.is-disabled .icon,
.admin-control-btn:disabled .icon {
	color: #6f5c4b !important;
}

/* ===== Menu item badge (counter for unread orders/coupons) ===== */
.account-menu-item {
	position: relative;
}

.menu-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	margin-left: 8px;
	border-radius: 999px;
	background: #c9a84c;
	color: #1a1a1a !important;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
	box-shadow: 0 2px 6px rgba(201, 168, 76, 0.35);
	animation: badgePop 0.3s ease;
}

@keyframes badgePop {
	0% { transform: scale(0); opacity: 0; }
	70% { transform: scale(1.2); }
	100% { transform: scale(1); opacity: 1; }
}

/* ===== Confirm Delivery Card ===== */
.confirm-delivery-card {
	background: linear-gradient(135deg, #fef8e4 0%, #fbf1c7 100%);
	border: 1px solid #e6d08a;
	border-radius: 14px;
	padding: 20px 24px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: 0 2px 8px rgba(201, 168, 76, 0.15);
}

.confirm-delivery-icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #c9a84c;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a !important;
}

.confirm-delivery-icon .icon {
	color: #1a1a1a !important;
}

.confirm-delivery-content {
	flex: 1;
	min-width: 0;
}

.confirm-delivery-title {
	margin: 0 0 4px;
	font-size: 16px;
	font-weight: 700;
	color: #2d2419 !important;
}

.confirm-delivery-text {
	margin: 0;
	font-size: 13px;
	color: #6f5c4b !important;
	line-height: 1.5;
}

.confirm-delivery-card .btn {
	flex-shrink: 0;
	padding: 10px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
}

@media (max-width: 640px) {
	.confirm-delivery-card {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
	.confirm-delivery-card .btn {
		width: 100%;
	}
}

@media (max-width: 768px) {
	.admin-controls-grid {
		grid-template-columns: 1fr;
	}
	/* Replace vertical divider with horizontal one between stacked blocks */
	.admin-controls-grid::before {
		top: auto;
		bottom: auto;
		left: 24px;
		right: 24px;
		width: auto;
		height: 1px;
		top: 50%;
		transform: translateY(-50%);
	}
	.admin-control-block-body {
		flex-wrap: wrap;
	}
	.admin-control-btn {
		width: 100%;
	}
}


/* ==============================================================
 * PRODUCT BUILDER — visual polish over the coupon-builder base.
 * Scoped to .product-builder-form / .product-builder so the coupon
 * modal stays unchanged.
 * ============================================================== */

#adminProductModal .account-modal-dialog {
	max-width: 1040px;
	width: min(1040px, calc(100vw - 32px));
	max-height: min(92vh, 980px);
	padding: 20px;
	display: flex;
	flex-direction: column;
}

#adminProductModal .account-modal-header {
	padding-bottom: 4px;
}

.product-builder-form {
	gap: 18px;
	overflow-y: auto;
	/* Prevent the sticky footer's negative horizontal margin from triggering
	 * a phantom horizontal scrollbar at the bottom of the modal. */
	overflow-x: hidden;
	padding-right: 4px;
	min-width: 0;
}

/* Adjacent form-rows inside a section need breathing room — the base
 * `.form-row` is a grid without vertical margins, so we add it here
 * scoped to the product builder. */
.product-builder .coupon-form-section .form-row + .form-row {
	margin-top: 16px;
}

/* Size guide lock state: when "Usar guia padrão da categoria" is checked,
 * the whole table becomes read-only — inputs can't be clicked and the
 * surface dims. The JS toggles `.is-locked` on the wrap div. */
#adminSizeGuideWrap.is-locked {
	opacity: 0.55;
	pointer-events: none;
	position: relative;
}

#adminSizeGuideWrap.is-locked::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 14px;
	background: rgb(var(--background-rgb) / 0.15);
	pointer-events: none;
}

/* Controls row below the guide: checkbox on the left, "set as default"
 * button on the right. The button is hidden when the category default
 * is in use (JS toggles visibility based on the checkbox). */
.sg-default-controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.sg-default-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Upload-image label-as-button: `<label class="btn">` uses the shared `.btn`
 * styles (inline-flex + gap), but the default line-height of a <label>
 * combined with the 24px Lucide SVG nudges the icon above the text. Force
 * line-height:1 and `display:block` on the icon so everything sits on the
 * same baseline. */
.product-builder .admin-upload-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.product-builder .admin-upload-row .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: 1;
}

.product-builder .admin-upload-row .btn .icon {
	display: block;
	flex-shrink: 0;
}

.sg-default-btn[hidden] {
	display: none;
}

/* ── Hero strip at the top: thumbnail + title + live stat pills ── */

.product-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 18px 20px;
	border-radius: 20px;
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	background:
		radial-gradient(1200px 200px at 0% 0%, rgb(var(--primary-rgb) / 0.10), transparent 60%),
		linear-gradient(180deg, rgb(var(--background-rgb) / 0.28), rgb(var(--background-rgb) / 0.14));
	box-shadow: 0 12px 34px rgb(0 0 0 / 0.08);
}

.product-hero-thumb {
	width: 72px;
	height: 72px;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.18), rgb(var(--primary-rgb) / 0.06));
	border: 1px solid rgb(var(--primary-rgb) / 0.3);
	color: rgb(var(--primary-rgb));
	flex-shrink: 0;
	overflow: hidden;
}

.product-hero-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-hero-copy {
	min-width: 0;
}

.product-hero-eyebrow {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgb(var(--primary-rgb));
}

.product-hero-title {
	margin: 0;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.2;
	color: var(--foreground);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-hero-sub {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--muted-foreground);
}

.product-hero-stats {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 220px;
}

.product-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgb(var(--primary-rgb) / 0.22);
	background: rgb(var(--card-rgb) / 0.72);
	font-size: 12px;
	font-weight: 800;
	color: var(--foreground);
	white-space: nowrap;
}

.product-hero-pill .icon {
	color: rgb(var(--primary-rgb));
	flex-shrink: 0;
}

/* ── Step cards polished ── */

.product-builder {
	gap: 14px;
}

.product-builder .coupon-builder-step {
	border-radius: 20px;
	background: rgb(var(--card-rgb) / 0.55);
	border-color: rgb(var(--border-rgb, 0 0 0) / 0.08);
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.product-builder .coupon-builder-step:hover:not(.is-open) {
	border-color: rgb(var(--primary-rgb) / 0.25);
	transform: translateY(-1px);
}

.product-builder .coupon-builder-step.is-open {
	border-color: rgb(var(--primary-rgb) / 0.38);
	background: rgb(var(--card-rgb) / 0.85);
	box-shadow: 0 14px 34px rgb(0 0 0 / 0.10);
}

.product-builder .coupon-builder-toggle {
	padding: 18px 22px;
	gap: 16px;
}

/* Replace the numeric index box with an icon tile */
.product-step-index {
	width: 46px !important;
	height: 46px !important;
	border-radius: 14px !important;
	background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.18), rgb(var(--primary-rgb) / 0.08)) !important;
	border-color: rgb(var(--primary-rgb) / 0.32) !important;
	color: rgb(var(--primary-rgb)) !important;
}

.product-builder .coupon-builder-step.is-open .product-step-index {
	background: linear-gradient(135deg, rgb(var(--primary-rgb) / 0.28), rgb(var(--primary-rgb) / 0.14)) !important;
	border-color: rgb(var(--primary-rgb) / 0.55) !important;
	box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.12);
}

.product-builder .coupon-builder-step-title {
	font-size: 17px;
}

.product-builder .coupon-builder-step-summary {
	font-size: 13px;
}

.product-builder .coupon-builder-step-badge {
	font-size: 10px;
	letter-spacing: 0.08em;
	padding: 0 10px;
	min-height: 28px;
	border-color: rgb(var(--primary-rgb) / 0.24);
	background: rgb(var(--primary-rgb) / 0.08);
	color: rgb(var(--primary-rgb));
}

/* Inside-panel section cards */
.product-builder .coupon-form-section {
	padding: 20px;
	border-radius: 18px;
	border-color: rgb(var(--primary-rgb) / 0.1);
	background: rgb(var(--card-rgb) / 0.92);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
}

.product-builder .coupon-form-section + .coupon-form-section {
	margin-top: 14px;
}

.product-builder .coupon-form-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 800;
	color: var(--foreground);
}

.product-builder .coupon-form-title .icon {
	color: rgb(var(--primary-rgb));
}

/* ── Inputs inside the product builder ── */

.product-builder .input,
.product-builder .textarea,
.product-builder select.input {
	border-radius: 12px;
	border-color: rgb(var(--primary-rgb) / 0.14);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-builder .input:focus,
.product-builder .textarea:focus,
.product-builder select.input:focus {
	border-color: rgb(var(--primary-rgb) / 0.55);
	box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.12);
	outline: none;
}

.product-builder .helper-text {
	font-size: 12px;
	color: var(--muted-foreground);
	margin-top: 6px;
}

.product-builder label {
	font-size: 13px;
	font-weight: 700;
	color: var(--foreground);
	margin-bottom: 6px;
	display: inline-block;
}

/* ── Image grid with hover delete ── */

.product-builder .admin-images-preview {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.product-builder .admin-images-preview .admin-image-tile {
	position: relative;
	aspect-ratio: 1;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	background: rgb(var(--background-rgb) / 0.18);
}

.product-builder .admin-images-preview .admin-image-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.product-builder .admin-image-tile-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	border: 0;
	background: rgb(20 15 10 / 0.78);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.product-builder .admin-image-tile:hover .admin-image-tile-remove,
.product-builder .admin-image-tile:focus-within .admin-image-tile-remove {
	opacity: 1;
}

.product-builder .admin-image-tile-remove:hover {
	transform: scale(1.08);
	background: rgb(220 38 38 / 0.9);
}

/* ── Chip inputs polish ── */

.product-builder .admin-chip-input,
.product-builder .admin-color-input {
	gap: 10px;
}

.product-builder .admin-chip-list {
	margin-top: 12px;
	gap: 8px;
}

.product-builder .admin-chip {
	padding: 6px 10px 6px 10px;
	border-radius: 999px;
	background: rgb(var(--primary-rgb) / 0.08);
	border: 1px solid rgb(var(--primary-rgb) / 0.22);
	color: var(--foreground);
	font-weight: 700;
	font-size: 13px;
}

.product-builder .admin-chip-swatch {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 1.5px solid rgb(255 255 255 / 0.9);
	box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12);
}

.product-builder .admin-chip-remove {
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.08);
	border: 0;
	color: var(--foreground);
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

.product-builder .admin-chip-remove:hover {
	background: rgb(220 38 38 / 0.85);
	color: #fff;
}

/* ── Size guide table polish ── */

.product-builder #adminSizeGuideWrap {
	padding: 14px;
	border-radius: 14px;
	border: 1px dashed rgb(var(--primary-rgb) / 0.22);
	background: rgb(var(--background-rgb) / 0.12);
}

.product-builder .admin-sg-headers span,
.product-builder .admin-sg-headers .input {
	font-size: 12px;
}

/* ── Sticky footer ── */

.product-builder-actions {
	position: sticky;
	bottom: -20px;
	margin: 14px -20px -20px;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: linear-gradient(180deg, rgb(var(--card-rgb) / 0), rgb(var(--card-rgb) / 0.96) 22%);
	backdrop-filter: blur(10px);
	border-top: 1px solid rgb(var(--primary-rgb) / 0.1);
	z-index: 2;
}

.product-builder-actions-hint {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--muted-foreground);
	min-width: 0;
}

.product-builder-actions-hint .icon {
	flex-shrink: 0;
	color: rgb(var(--primary-rgb));
}

.product-builder-actions-btns {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.product-builder-actions-btns .btn {
	gap: 8px;
}

/* ── Responsive ── */

@media (max-width: 900px) {
	.product-hero {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto;
	}
	.product-hero-stats {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		min-width: 0;
	}
}

@media (max-width: 640px) {
	.product-builder-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.product-builder-actions-btns {
		width: 100%;
	}
	.product-builder-actions-btns .btn {
		flex: 1;
		justify-content: center;
	}
	.product-hero-pill {
		flex: 1 0 auto;
	}
}

/* ============================================================
   Disponibilizar Cupom — solid, high-contrast controls
   ------------------------------------------------------------
   Modal is rendered outside <main class="account-page">, so the
   `.account-page .input` polish layer never lands on it. These
   rules give the inputs, select and the users-toolbar a clearly
   defined edge + focus state so they stop blending into the
   cream background.
   ============================================================ */

#adminCouponModal .input,
#adminCouponModal select.input,
#adminCouponModal input[type="search"],
#adminCouponModal input[type="text"],
#adminCouponModal input[type="number"],
#adminCouponModal input[type="datetime-local"],
#adminCouponModal textarea.input {
	background: #ffffff !important;
	border: 1px solid #c9b493 !important;
	color: #171411 !important;
	box-shadow:
		0 1px 0 rgb(0 0 0 / 0.02) inset,
		0 1px 2px rgb(30 20 10 / 0.04) !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

#adminCouponModal .input::placeholder,
#adminCouponModal input[type="search"]::placeholder,
#adminCouponModal input[type="text"]::placeholder,
#adminCouponModal textarea.input::placeholder {
	color: #9a8872 !important;
	opacity: 1;
}

#adminCouponModal .input:hover,
#adminCouponModal select.input:hover,
#adminCouponModal input[type="search"]:hover,
#adminCouponModal input[type="text"]:hover,
#adminCouponModal input[type="number"]:hover,
#adminCouponModal input[type="datetime-local"]:hover,
#adminCouponModal textarea.input:hover {
	border-color: #a88c62 !important;
	background: #fffdfa !important;
}

#adminCouponModal .input:focus,
#adminCouponModal .input:focus-visible,
#adminCouponModal select.input:focus,
#adminCouponModal select.input:focus-visible,
#adminCouponModal input[type="search"]:focus,
#adminCouponModal input[type="search"]:focus-visible,
#adminCouponModal input[type="text"]:focus,
#adminCouponModal input[type="text"]:focus-visible,
#adminCouponModal input[type="number"]:focus,
#adminCouponModal input[type="number"]:focus-visible,
#adminCouponModal input[type="datetime-local"]:focus,
#adminCouponModal input[type="datetime-local"]:focus-visible,
#adminCouponModal textarea.input:focus,
#adminCouponModal textarea.input:focus-visible {
	outline: none !important;
	border-color: rgb(var(--primary-rgb)) !important;
	background: #ffffff !important;
	box-shadow:
		0 0 0 3px rgb(var(--primary-rgb) / 0.18),
		0 1px 2px rgb(30 20 10 / 0.04) !important;
}

/* The users-toolbar header ("Usuários específicos" + "N selecionados")
   was reading as pure shadow. Give it a solid panel look so the eye
   parses it as a grouping, not a hairline. */
#adminCouponModal .coupon-selector-toolbar {
	background: #fbf6ec !important;
	border: 1px solid #e0cfb5 !important;
	padding: 14px 16px !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgb(30 20 10 / 0.03) !important;
}

#adminCouponModal .coupon-selector-toolbar label {
	display: block;
	font-weight: 700;
	color: #171411 !important;
	margin-bottom: 2px;
}

#adminCouponModal .coupon-selector-counter {
	background: #ffffff !important;
	border: 1px solid #d7c2a2 !important;
	color: #5f4a32 !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}

/* Arrow on the Distribuição select so it reads as a dropdown, not a
   flat text box. Safari/Chrome hide the native arrow on appearance:none. */
#adminCouponModal select.input {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235f4a32' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 14px 14px !important;
	padding-right: 40px !important;
}

/* =====================================================================
   ========== RESPONSIVE — CONTA (account) =============================
   ===================================================================== */

/* Admin stays hidden <1024px (reinforced by styles.css).
   Here we focus on the common-user experience on tablet/mobile. */

@media (max-width: 1023.98px) {
	/* Sidebar vai para o drawer — esconde aqui. Content ocupa 100% */
	.account-sidebar {
		display: none !important;
	}
	.account-layout {
		grid-template-columns: 1fr !important;
		gap: 0;
		padding: 0 !important;
	}
	.account-main {
		min-width: 0;
		width: 100%;
	}
	.profile-grid {
		grid-template-columns: 1fr;
	}
	.form-row-2 {
		grid-template-columns: 1fr;
	}
	.order-details-grid {
		grid-template-columns: 1fr;
	}
	/* Usa 100% da largura — sem container apertado */
	body.page-account main,
	body.page-account .container {
		max-width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Tira toda a "card chrome" do content — layout flat, full-bleed.
	   Especificidade body.page-account-static-header vence a regra V110
	   (.account-content { background: #fffdfa !important }) que criava um
	   "buraco" claro entre o conteúdo e o footer. */
	body.page-account-static-header .account-content,
	body.page-account-static-header .account-layout,
	body.page-account-static-header .account-panel,
	body.page-account-static-header .account-main,
	body.page-account-static-header main {
		background: transparent !important;
		background-color: transparent !important;
		border: 0 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		backdrop-filter: none !important;
	}

	body.page-account-static-header .account-content {
		padding: 0 !important;
		min-height: auto !important;
	}

	body.page-account-static-header .account-panel {
		padding: 0 !important;
	}

	/* Preenche o restante da viewport (descontando banner fixo, header e
	   value strip que já ocupam espaço acima). Sem esse desconto, o main
	   em 100dvh somado aos elementos acima criava scroll mesmo com só
	   1 cartão na tela. */
	body.page-account-static-header main.account-page {
		min-height: calc(
			100vh
			- var(--header-banner-h, 0px)
			- var(--header-height, 0px)
			- var(--value-strip-h, 0px)
		);
		min-height: calc(
			100dvh
			- var(--header-banner-h, 0px)
			- var(--header-height, 0px)
			- var(--value-strip-h, 0px)
		);
	}

	/* Header do panel — respiro lateral de 20px */
	.panel-header {
		padding: 16px 20px 12px !important;
		margin-bottom: 10px;
		border-bottom: 1px solid rgb(0 0 0 / 0.06);
	}

	.panel-title {
		font-size: 20px !important;
	}

	.panel-subtitle {
		font-size: 13px;
	}

	/* Body do panel: 20px horizontal, 16px bottom — simetria visual com o
	   padding-top do panel-header (16px). Total top (24 page + 16 header)
	   = total bottom (16 body + 24 page). */
	.panel-body,
	.panel-body.profile-grid {
		display: block;
		grid-template-columns: 1fr;
		padding: 0 20px 16px !important;
		gap: 0;
	}

	/* Exceção: o body dos detalhes do pedido precisa preservar o flex
	   column + gap:16px pra separar os cards (hero, itens, histórico,
	   info, reviews). A regra acima colapsava tudo em blocos grudados. */
	.panel-body.order-details-body {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	/* Espaço abaixo do último painel espelha o padding-top (24px) da
	   .account-page — simetria com o gap header → título */
	body.page-account-static-header .account-page {
		padding-bottom: 24px !important;
	}

	/* Form full-bleed, inputs 100% width, font-size 16px anti-zoom iOS */
	.form-grid {
		gap: 12px;
	}
	.form-row {
		gap: 6px;
	}
	.form-row label {
		font-size: 13px;
		padding-left: 2px;
	}
	.form-row input.input,
	.form-row select.input,
	.form-row textarea.input,
	.form-row .input {
		width: 100% !important;
		font-size: 16px !important;
		min-height: 48px;
		padding: 0 14px;
	}
	.form-actions {
		padding-top: 4px;
	}
	.form-actions .btn {
		width: 100%;
		min-height: 48px;
	}

	/* Lista de pedidos / cartões / endereços — cards flat, 20px lateral
	   + 16px inferior (simetria com panel-header top no painel de form).
	   .order-reviews-list é a lista da aba "A avaliar" — tem classe
	   própria e ficava fora desse seletor, por isso o conteúdo dela
	   encostava na borda do viewport. */
	.list,
	.cards-grid,
	.addresses-list,
	.coupons-list,
	.order-reviews-list {
		gap: 8px !important;
		padding: 0 20px 16px !important;
	}

	/* ==========================================================
	   Endereços — redesign mobile (swipe-to-reveal, edge-to-edge)
	   Paleta harmônica com o tema: branco + primary gold + tons
	   quentes warm-brown. Sem contrastes de azul/vermelho puros.
	   ========================================================== */

	/* Lista: edge-to-edge, pequeno gap entre cartões p/ separá-los como cards */
	#addressesList,
	.addresses-list {
		padding: 0 0 16px !important;
		gap: 10px !important;
		border-top: 0;
	}

	/* Card: full-width mas com identidade — gradient warm + shadow + accent gold */
	#addressesList .addr-card,
	.addresses-list .addr-card {
		border-radius: 0 !important;
		border: 0 !important;
		box-shadow: none !important;
		overflow: hidden;
		position: relative;
		background: transparent;
	}

	#addressesList .addr-card:hover,
	.addresses-list .addr-card:hover {
		transform: none;
		box-shadow: none;
	}

	/* Camada que desliza — fundo branco limpo, linha gold no topo preserva
	   a identidade, sombra neutra em vez de warm-brown */
	.addr-card-content {
		position: relative;
		z-index: 2;
		background:
			linear-gradient(180deg, #ffffff 0%, #f7f7f9 100%);
		transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
		will-change: transform;
		touch-action: pan-y;
		padding: 18px 20px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		box-shadow:
			0 1px 0 0 rgb(255 255 255 / 0.8) inset,
			0 6px 16px -4px rgb(15 23 42 / 0.08),
			0 2px 4px -1px rgb(15 23 42 / 0.04);
	}

	/* Linha gold no topo — identidade visual do card */
	.addr-card-content::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 2px;
		background: linear-gradient(
			90deg,
			transparent 0%,
			rgb(var(--primary-rgb) / 0.45) 30%,
			rgb(var(--primary-rgb) / 0.65) 50%,
			rgb(var(--primary-rgb) / 0.45) 70%,
			transparent 100%
		);
		z-index: 3;
	}

	/* Destaque do endereço padrão: fundo branco com sussurro dourado no
	   pé, barra gold à esquerda e glow gold fazem toda a identidade */
	#addressesList .addr-card.is-default .addr-card-content,
	.addresses-list .addr-card.is-default .addr-card-content {
		background:
			linear-gradient(180deg, #ffffff 0%, #fffdf5 100%);
		box-shadow:
			inset 4px 0 0 var(--primary),
			0 1px 0 0 rgb(255 255 255 / 0.8) inset,
			0 8px 20px -4px rgb(var(--primary-rgb) / 0.18),
			0 2px 4px -1px rgb(15 23 42 / 0.05);
		padding-left: 24px;
	}

	#addressesList .addr-card.is-default .addr-card-content::before,
	.addresses-list .addr-card.is-default .addr-card-content::before {
		background: linear-gradient(
			90deg,
			var(--primary) 0%,
			rgb(var(--primary-rgb) / 0.8) 100%
		);
		height: 3px;
	}

	.addr-card.is-open .addr-card-content {
		box-shadow:
			-10px 0 20px rgb(15 23 42 / 0.10),
			0 1px 0 0 rgb(255 255 255 / 0.8) inset;
	}

	/* Remove o gradient/divisor do header — tudo flat branco */
	.addr-card-content .addr-card-top {
		background: transparent !important;
		border-bottom: 0 !important;
		padding: 0 !important;
		gap: 12px;
	}

	.addr-card-content .addr-body {
		padding: 0 !important;
		gap: 6px;
	}

	/* Ícone principal: círculo gold gradient, com glow sutil */
	.addr-card-content .addr-icon {
		width: 42px;
		height: 42px;
		border-radius: 999px;
		background: linear-gradient(
			135deg,
			rgb(var(--primary-rgb) / 0.18) 0%,
			rgb(var(--primary-rgb) / 0.08) 100%
		);
		border: 1px solid rgb(var(--primary-rgb) / 0.22);
		color: var(--primary);
		box-shadow: 0 2px 6px -1px rgb(var(--primary-rgb) / 0.20);
	}
	.addr-card-content .addr-icon .icon {
		width: 18px;
		height: 18px;
	}

	#addressesList .addr-card.is-default .addr-card-content .addr-icon,
	.addresses-list .addr-card.is-default .addr-card-content .addr-icon {
		background: linear-gradient(
			135deg,
			var(--primary) 0%,
			rgb(var(--primary-rgb) / 0.85) 100%
		);
		border-color: var(--primary);
		color: var(--primary-foreground);
		box-shadow: 0 4px 10px -2px rgb(var(--primary-rgb) / 0.40);
	}

	/* Nome + telefone melhor hierarquia */
	.addr-card-content .addr-name {
		font-size: 15px;
		font-weight: 700;
		color: #1a1612;
		letter-spacing: -0.005em;
	}
	.addr-card-content .addr-phone {
		font-size: 12.5px;
		color: #8a8a93;
		font-weight: 500;
	}

	/* Tag "Padrão" — verde suave (mesma gramática do "Disponível" do cupom).
	   Semanticamente é "este está ativo", e o verde comunica isso melhor
	   que um segundo gold em cima do gold do card. */
	.addr-card-content .addr-default-tag {
		height: 22px;
		padding: 0 9px;
		font-size: 10px;
		letter-spacing: 0.06em;
		border-radius: 999px;
		background: rgb(16 185 129 / 0.10);
		border: 1px solid rgb(16 185 129 / 0.32);
		color: #047857;
	}

	/* Linhas de endereço: slate neutro pra respirar sobre o branco */
	.addr-card-content .addr-row {
		font-size: 13px;
		color: #4f4b57;
		line-height: 1.4;
	}
	.addr-card-content .addr-row-icon {
		color: rgb(var(--primary-rgb) / 0.55);
		width: 14px;
		height: 14px;
	}

	/* Esconde as actions antigas inline — gaveta assume o papel */
	.addr-card .addr-actions {
		display: none !important;
	}

	/* =========== Gaveta de ações ===========
	   Painel neutro off-white, mais escuro que o card branco pra dar a
	   sensação de profundidade (o card "sai por cima"). Sombra interna
	   na borda esquerda reforça o "gaveta saindo de trás". Cor gold
	   aparece só no hairline superior como eco do tema. */
	.addr-swipe-actions {
		display: flex !important;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 196px;
		z-index: 1;
		background: linear-gradient(180deg, #f3f3f6 0%, #e9e9ee 100%);
		box-shadow:
			inset 10px 0 14px -10px rgb(15 23 42 / 0.14),
			inset 0 1px 0 rgb(var(--primary-rgb) / 0.18);
	}

	.addr-swipe-btn {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 7px;
		border: 0;
		background: transparent;
		padding: 0 6px;
		font-size: 10.5px;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: #3f3b48;
		cursor: pointer;
		position: relative;
		transition: background-color 180ms ease;
	}

	/* Divisor hairline dourado entre botões — barra contínua com
	   separação sutil, sem fragmentar em chips. */
	.addr-swipe-btn + .addr-swipe-btn::before {
		content: "";
		position: absolute;
		left: 0;
		top: 26%;
		bottom: 26%;
		width: 1px;
		background: rgb(var(--primary-rgb) / 0.22);
	}

	.addr-swipe-btn .icon {
		width: 22px;
		height: 22px;
	}

	/* Diferenciação semântica via cor de ícone + label (não via fundo) */
	.addr-swipe-btn--edit { color: #3f3b48; }
	.addr-swipe-btn--edit .icon { color: #3f3b48; }

	/* Tornar padrão = ação positiva → verde (ecoa o tag "Padrão") */
	.addr-swipe-btn--default { color: #047857; }
	.addr-swipe-btn--default .icon { color: #059669; }

	.addr-swipe-btn--delete { color: #a8413f; }
	.addr-swipe-btn--delete .icon { color: #a8413f; }

	.addr-swipe-btn--default:disabled {
		opacity: 0.40;
		cursor: not-allowed;
	}

	.addr-swipe-btn:active {
		background-color: rgb(var(--primary-rgb) / 0.10);
	}

	/* Indicador discreto "puxe" na borda direita */
	.addr-card-content::after {
		content: "";
		position: absolute;
		right: 10px;
		top: 50%;
		width: 3px;
		height: 20px;
		border-radius: 3px;
		background: rgb(23 18 14 / 0.10);
		transform: translateY(-50%);
		pointer-events: none;
		transition: opacity 180ms ease;
	}

	.addr-card.is-open .addr-card-content::after {
		opacity: 0;
	}
	.list-item,
	.order-item,
	.payment-card-item,
	.address-card,
	.coupon-card {
		border-radius: 12px !important;
	}

	/* Tabs (ex: compras_*) — scroll horizontal edge-to-edge */
	.account-tabs,
	.tabs {
		margin: 0 !important;
		padding: 0 20px !important;
	}

	/* Hero de perfil (avatar + nome) quando existe na main */
	.account-hero {
		margin: 0 20px 12px !important;
		border-radius: 14px !important;
	}
}

@media (max-width: 767.98px) {
	/* Header da página "Detalhes do pedido": sem seta de voltar (o
	   usuário tem o back nativo do mobile) e sem o prefixo "Pedido "
	   antes do ID — no subtítulo mostra só "#83D04D18" direto. Todos
	   os elementos empilham alinhados à esquerda (título, id, botão). */
	#orderDetailsBackBtn {
		display: none;
	}

	#orderDetailsSubtitle .subtitle-prefix {
		display: none;
	}

	.order-details-header {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Título + ID do pedido lado a lado na mesma linha, baselines
	   alinhados. flex-wrap garante que se o viewport for apertado, o
	   ID cai pra uma segunda linha em vez de sair pela direita. */
	.order-details-header > div:has(.panel-subtitle) {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 8px;
	}

	.order-details-header .panel-subtitle {
		margin: 0;
	}

	.order-details-header .order-report-btn {
		align-self: flex-start;
	}

	/* Header de painel com campo de busca: empilha em coluna (título,
	   subtítulo, input — cada um em sua linha). O :has() limita a regra
	   aos painéis que têm um .account-search no lado direito; painéis
	   cujo lado direito é um botão compacto (ex.: "+ Inserir" em
	   Endereços) continuam em row pra não afastar o CTA. */
	.panel-header-row:has(.account-search) {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.panel-header-row:has(.account-search) .panel-tools {
		justify-content: stretch;
		width: 100%;
	}

	.panel-header-row:has(.account-search) .account-search {
		width: 100%;
		max-width: none;
	}

	/* Reembolsos (cliente): título → subtítulo → botão Política, cada um em
	   uma linha. Botão alinhado à esquerda, sem esticar (largura natural). */
	.account-panel[data-panel="compras_reembolsos"] .panel-header-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.account-panel[data-panel="compras_reembolsos"] .panel-header-row .panel-tools {
		justify-content: flex-start;
		width: auto;
	}
	.account-panel[data-panel="compras_reembolsos"] .panel-header-row .panel-tools .btn {
		white-space: normal;
	}

	.account-layout {
		gap: 8px;
	}
	.account-menu-group {
		gap: 6px;
	}
	.account-menu-btn,
	.account-menu-section {
		min-height: 44px;
		font-size: 13px;
	}
	.account-hero {
		padding: 14px 16px !important;
	}
	.account-hero-title {
		font-size: 20px;
	}
	.account-card,
	.order-details-card {
		padding: 14px;
		border-radius: 14px;
	}
	.order-details-grid {
		gap: 12px;
	}
	.form-grid {
		gap: 10px;
	}
	.form-row input.input,
	.form-row select.input,
	.form-row textarea.input {
		width: 100%;
		font-size: 16px;
	}
	/* Modals become (near) fullscreen on mobile */
	.account-modal-dialog {
		width: calc(100vw - 24px);
		max-width: 100%;
		max-height: calc(100dvh - 48px);
		max-height: calc(100vh - 48px);
		border-radius: 16px;
		padding: 16px;
	}
	.account-modal-header h3 {
		font-size: 17px;
	}
	/* Pedidos list item reorganization */
	.list-item,
	.order-item {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.order-item-actions,
	.list-item-actions {
		justify-self: stretch;
	}

	/* ── Card de pedido achatado ──
	   Sem "Pedido " antes do # pra sobrar espaço lateral pro número.
	   Status nunca quebra em duas linhas (flex-shrink:0 + nowrap) —
	   se apertar demais, o número do pedido é que trunca com reticência.
	   Ícones de calendário/pacote somem; data e nº de itens ficam na
	   mesma linha separados por uma bolinha. */
	.order-item .list-title-prefix {
		display: none;
	}

	.order-item .order-meta-item .icon {
		display: none;
	}

	.order-item .order-meta {
		gap: 0;
		flex-wrap: nowrap;
	}

	.order-item .order-meta-item + .order-meta-item::before {
		content: "•";
		margin: 0 6px;
		opacity: 0.45;
	}

	.order-item .order-status {
		white-space: nowrap;
		flex-shrink: 0;
	}

	/* min-width permite que o título trunque (ellipsis) quando o status
	   precisar de espaço, sem deixar o número sumir completamente. */
	.order-item .list-title {
		min-width: 0;
	}

	/* Card de "A avaliar": status "Aguardando avaliação" + botão "Avaliar"
	   juntos não cabem ao lado do bloco esquerdo em telas estreitas. Em
	   vez de empurrar o botão pra fora do card (overflow), deixamos o
	   card quebrar em duas linhas e colocamos status + botão em row no
	   rodapé, formando uma barra de ação coerente. */
	.order-item[data-review-pending="1"] {
		flex-wrap: wrap;
	}

	.order-item[data-review-pending="1"] .list-right {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: 10px;
	}
	/* Address/pay select cards */
	.selector-card {
		padding: 12px;
	}
	/* Review grid gets fewer columns */
	.review-images-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 575.98px) {
	.account-hero-title {
		font-size: 18px;
	}
	.account-card-title {
		font-size: 16px;
	}
	.account-modal-dialog {
		width: 100vw;
		height: 100dvh;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
		padding: 18px 14px 0;
		background: #f4f4f4 !important;
		overflow-x: hidden;
		/* Flex column: header no topo, form scrollável no meio, actions grudadas embaixo */
		display: flex;
		flex-direction: column;
	}

	/* Cor dos inputs do modal: borda gold mais visível no fundo branco */
	.account-modal-dialog .input {
		background: #ffffff;
		border-color: rgb(var(--primary-rgb) / 0.30);
	}
	.account-modal-backdrop {
		padding: 0;
	}

	/* Header + título não encolhem */
	.account-modal-dialog .account-modal-header {
		flex-shrink: 0;
	}

	/* Form ocupa o espaço disponível e rola internamente.
	   Flex-column (sobrescreve o display:grid do .form-grid) pra
	   permitir `margin-top: auto` na form-actions empurrando-a pro
	   bottom sem usar space-between. */
	.account-modal-dialog > form {
		flex: 1 1 auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 16px;
		display: flex !important;
		flex-direction: column;
	}

	/* Botões Cancelar/Salvar grudados no bottom do modal fullscreen.
	   Sem margin negativa lateral — evita overflow horizontal que
	   criava scroll na viewport. Fundo match com o modal (#f4f4f4). */
	.account-modal-dialog .form-actions {
		margin-top: auto;
		position: sticky;
		bottom: 0;
		padding: 10px 0;
		background: #f4f4f4;
		border-top: 1px solid rgb(23 18 14 / 0.08);
		box-shadow: 0 -6px 12px -6px rgb(23 18 14 / 0.10);
		z-index: 2;
		display: flex !important;
		gap: 10px;
		align-items: center;
	}

	/* Cancelar | Salvar: altura fixa 42px, sem overflow, flush no bar */
	.account-modal-dialog .form-actions .btn {
		flex: 1 1 0;
		height: 42px;
		min-height: 42px;
		padding: 0 16px;
		font-size: 14px;
		line-height: 1;
		border-width: 1.5px;
	}

	/* Modal com campos compactos — inputs 42px, label colado no input */
	.account-modal-dialog .form-grid,
	.account-modal-dialog > form.form-grid {
		gap: 25px;
		/* Força rows no topo. Sem isso, o grid com altura definida
		   (vinda do flex: 1 1 auto no <form>) usa align-content: normal
		   que, segundo a spec, se comporta como STRETCH — distribuindo
		   espaço extra entre as rows e criando os "gaps falsos". */
		align-content: start;
	}
	.account-modal-dialog .form-row {
		gap: 4px;
		align-content: start;
	}
	/* .form-row-2 (Validade+CVV) vira 1 coluna no mobile — o gap interno
	   passa a ser vertical e precisa bater com o form-grid pra
	   uniformidade visual entre todos os campos. Precisa vir DEPOIS da
	   regra .form-row porque o elemento tem as duas classes (mesma
	   especificidade, ordem define quem vence). */
	.account-modal-dialog .form-row.form-row-2 {
		gap: 25px;
	}
	.account-modal-dialog .form-row label {
		font-size: 12px;
		font-weight: 700;
	}
	.account-modal-dialog .form-row input.input,
	.account-modal-dialog .form-row select.input,
	.account-modal-dialog .form-row textarea.input,
	.account-modal-dialog .form-row .input {
		min-height: 42px !important;
	}
	.review-images-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.tabs {
		overflow-x: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		flex-wrap: nowrap !important;
	}
	.tabs::-webkit-scrollbar {
		display: none;
	}
	.tab-btn {
		flex: 0 0 auto;
		white-space: nowrap;
		font-size: 12px;
		min-height: 40px;
	}
}

/* ── Onda 5 / Reembolsos ──
   Cards na lista, modal de solicitação, badges de status. Mantém a paleta
   da loja (creme + dourado + preto) e segue o padrão visual dos cards de
   pedido pra coerência entre as abas. */

.ws-refund-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 20px;
	border: 1px solid #e7ddcf;
	border-radius: 14px;
	background: #fff;
	transition: box-shadow 180ms ease, border-color 180ms ease;
}
.ws-refund-card.is-highlighted {
	box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.32);
	border-color: #c9a84c;
}
.ws-refund-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: nowrap;     /* status nunca pula pra nova linha */
	min-width: 0;
}
/* Coluna esquerda do head (ID + meta) — pode encolher livremente
 * pra ceder espaço pro status à direita. min-width:0 destrava a
 * regra default de flex item que é "min-content". */
.ws-refund-head > div:first-child {
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}
.ws-refund-id {
	font-size: 16px;
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: 0.02em;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}
.ws-refund-meta {
	display: flex;
	gap: 6px;
	margin-top: 4px;
	font-size: 12px;
	color: #8c7865;
	flex-wrap: wrap;
}
.ws-refund-type,
.ws-refund-path {
	padding: 3px 10px;
	border-radius: 999px;
	background: #f5f1eb;
	color: #6f5c4b;
	font-weight: 600;
}
.ws-refund-status {
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	letter-spacing: 0.02em;
	white-space: nowrap !important;   /* nunca quebrar — texto do status é regra de negócio */
	flex: 0 0 auto;                   /* mantém largura natural, não encolhe */
	word-break: keep-all;
	overflow-wrap: normal;
}
.ws-refund-status.is-pending {
	background: #fff5d8;
	color: #7a5a00;
}
.ws-refund-status.is-approved,
.ws-refund-status.is-received {
	background: #e0e9ff;
	color: #1a3990;
}
.ws-refund-status.is-refunded {
	background: #d8f0db;
	color: #1f5f2c;
}
.ws-refund-status.is-rejected {
	background: #fadddd;
	color: #8a1f1f;
}
.ws-refund-reason {
	margin: 0;
	font-size: 14px;
	color: #4a3d30;
	line-height: 1.55;
	white-space: pre-wrap;
	word-break: break-word;
}
.ws-refund-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 8px;
}
.ws-refund-images a {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid #e7ddcf;
}
.ws-refund-images img {
	display: block;
	width: 100%;
	height: 120px;
	object-fit: cover;
	transition: transform 200ms ease;
}
.ws-refund-images a:hover img {
	transform: scale(1.05);
}
.ws-refund-note {
	padding: 10px 14px;
	background: #fbf7ee;
	border-left: 3px solid #c9a84c;
	border-radius: 4px;
	font-size: 13px;
	color: #4a3d30;
	line-height: 1.55;
}
.ws-refund-label-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 12px 14px;
	background: #fbf7ee;
	border: 1px solid #e7ddcf;
	border-radius: 10px;
	font-size: 13px;
	color: #4a3d30;
}
.ws-refund-label-row small {
	flex-basis: 100%;
	color: #8c7865;
}
.ws-refund-foot {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 12px;
	color: #8c7865;
	flex-wrap: wrap;
}
.ws-refund-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	border-top: 1px solid #f0ece4;
	margin-top: 4px;
	padding-top: 12px;
}

/* Modal de solicitação */
.ws-refund-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(26, 26, 26, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 16px;
	animation: ws-refund-overlay-in 160ms ease-out;
}
@keyframes ws-refund-overlay-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
.ws-refund-modal {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 28px;
	max-width: 520px;
	width: 100%;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	animation: ws-refund-modal-in 200ms ease-out;
}
@keyframes ws-refund-modal-in {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.ws-refund-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
	border: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #8c7865;
	transition: background-color 120ms ease;
}
.ws-refund-modal-close:hover {
	background: #f5f1eb;
}
.ws-refund-modal-title {
	margin: 0 0 6px;
	font-size: 22px;
	font-weight: 800;
	color: #1a1a1a;
}
.ws-refund-modal-hint {
	margin: 0 0 18px;
	font-size: 13px;
	color: #8c7865;
	line-height: 1.55;
}
.ws-refund-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.ws-refund-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ws-refund-field > span {
	font-size: 13px;
	font-weight: 700;
	color: #1a1a1a;
}
.ws-refund-required {
	font-weight: 600;
	color: #c9a84c;
	font-size: 11px;
}
.ws-refund-field select,
.ws-refund-field textarea,
.ws-refund-field input[type="file"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #d5cdc0;
	border-radius: 10px;
	font-family: inherit;
	font-size: 14px;
	background: #fff;
	color: #1a1a1a;
}
.ws-refund-field textarea {
	resize: vertical;
	min-height: 96px;
	line-height: 1.55;
}
.ws-refund-field select:focus,
.ws-refund-field textarea:focus,
.ws-refund-field input[type="file"]:focus {
	outline: 2px solid #c9a84c;
	outline-offset: 1px;
}
.ws-refund-counter {
	font-size: 11px;
	color: #a09585;
	text-align: right;
}
.ws-refund-modal-actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding-top: 8px;
}

@media (max-width: 480px) {
	.ws-refund-modal {
		padding: 22px 18px;
		border-radius: 14px;
	}
	.ws-refund-modal-actions {
		flex-direction: column;
	}
	.ws-refund-modal-actions .btn {
		width: 100%;
	}
	.ws-refund-images img {
		height: 96px;
	}
}

/* ── Onda 5.5: stepper + seleção de itens no modal ── */
.ws-refund-stepper {
	display: flex;
	gap: 10px;
	margin-bottom: 16px;
	font-size: 12px;
	font-weight: 700;
	color: #8c7865;
}
.ws-refund-step {
	flex: 1;
	padding: 8px 12px;
	background: #f5f1eb;
	border-radius: 8px;
	text-align: center;
	letter-spacing: 0.04em;
}
.ws-refund-step.is-active {
	background: #1a1a1a;
	color: #c9a84c;
}
.ws-refund-step-title {
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 700;
	color: #1a1a1a;
}
.ws-refund-step-hint {
	margin: 0 0 14px;
	font-size: 12px;
	color: #8c7865;
	line-height: 1.5;
}
.ws-refund-items-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}
.ws-refund-item-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid #e7ddcf;
	border-radius: 10px;
	background: #fff;
	transition: border-color 150ms ease, background 150ms ease;
}
.ws-refund-item-row:has(input[type="checkbox"]:checked) {
	border-color: #c9a84c;
	background: #fbf7ee;
}
.ws-refund-item-check {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	cursor: pointer;
	min-width: 0;
}
.ws-refund-item-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #c9a84c;
	flex-shrink: 0;
}
.ws-refund-item-check span {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	font-weight: 600;
	color: #1a1a1a;
	min-width: 0;
}
.ws-refund-item-check small {
	font-size: 11px;
	font-weight: 500;
	color: #8c7865;
	margin-top: 2px;
}
.ws-refund-item-qty {
	flex-shrink: 0;
}
.ws-refund-item-qty label {
	font-size: 11px;
	color: #8c7865;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ws-refund-item-qty input[type="number"] {
	width: 56px;
	padding: 6px 8px;
	border: 1px solid #d5cdc0;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	color: #1a1a1a;
}
.ws-refund-item-qty input[type="number"]:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ── Pill de status do reembolso na lista de pedidos ── */
.order-pills {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-end;
}
.ws-refund-pill {
	font-size: 11px !important;
	padding: 4px 10px !important;
	white-space: nowrap;
	flex-shrink: 0;
}
.ws-refund-pill.is-pending { background: #fff5d8; color: #7a5a00; }
.ws-refund-pill.is-approved,
.ws-refund-pill.is-received { background: #e0e9ff; color: #1a3990; }
.ws-refund-pill.is-refunded { background: #d8f0db; color: #1f5f2c; }
.ws-refund-pill.is-rejected { background: #fadddd; color: #8a1f1f; }
.ws-refund-pill.is-cancelled { background: #ece5d9; color: #6f5c4b; }
.ws-refund-status.is-cancelled { background: #ece5d9; color: #6f5c4b; }

/* Onda 5.6: linha de ações no card de detalhe (cancelar, aprovar, rejeitar...). */
.ws-refund-actions-row {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed #e7ddcf;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.ws-refund-actions-row .btn {
	flex: 0 0 auto;
}
.ws-refund-actions-row .btn-danger {
	background: transparent;
	color: #8a1f1f;
	border: 1px solid #f3c4c4;
}
.ws-refund-actions-row .btn-danger:hover {
	background: #fadddd;
}
.ws-refund-actions-row small {
	font-size: 11px;
	color: #8c7865;
}

/* ── Card de reembolso dentro do detalhe do pedido ── */
.ws-refund-card-detail .order-details-card-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.ws-refund-detail-meta {
	display: flex;
	gap: 6px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}
.ws-refund-tag {
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	background: #f5f1eb;
	color: #6f5c4b;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ws-refund-tag.is-partial {
	background: #ffeed1;
	color: #7a5a00;
}
.ws-refund-tag.is-full {
	background: #e0e9ff;
	color: #1a3990;
}
.ws-refund-tag.is-auto {
	background: #1a1a1a;
	color: #c9a84c;
}

/* Timeline dentro do detalhe */
.ws-refund-timeline {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 12px 0 18px;
	padding: 14px 4px;
	background: #fbf7ee;
	border-radius: 12px;
}
.ws-refund-tl-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	min-width: 60px;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
}
.ws-refund-tl-step.is-pending { color: #c4b9ab; }
.ws-refund-tl-step.is-current { color: #1a1a1a; }
.ws-refund-tl-step.is-done { color: #4ea858; }
.ws-refund-tl-dot {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	border: 2px solid currentColor;
	background: #fff;
}
.ws-refund-tl-step.is-current .ws-refund-tl-dot {
	background: #c9a84c;
	color: #1a1a1a;
	border-color: #c9a84c;
	box-shadow: 0 0 0 4px rgba(201, 168, 76, 0.18);
}
.ws-refund-tl-step.is-done .ws-refund-tl-dot {
	background: #4ea858;
	color: #fff;
	border-color: #4ea858;
}
.ws-refund-tl-line {
	flex: 1;
	height: 2px;
	background: #e7ddcf;
	min-width: 12px;
}

/* Detail blocks */
.ws-refund-detail-block {
	margin-bottom: 16px;
}
.ws-refund-detail-label {
	font-size: 11px;
	font-weight: 700;
	color: #8c7865;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 6px;
	display: block;
}
.ws-refund-items-detail {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	color: #4a3d30;
	line-height: 1.6;
}
.ws-refund-items-detail li {
	margin-bottom: 4px;
}

.ws-refund-countdown {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: linear-gradient(135deg, rgba(201, 168, 76, 0.10), rgba(201, 168, 76, 0.02));
	border: 1px solid rgba(201, 168, 76, 0.35);
	border-radius: 10px;
	font-size: 13px;
	color: #6f5c4b;
	margin-bottom: 16px;
}
.ws-refund-countdown strong {
	color: #1a1a1a;
}

.ws-refund-amount-card {
	background: linear-gradient(135deg, #fbf6ec 0%, #f3eadf 100%);
	color: #1a1a1a;
	padding: 16px 20px;
	border-radius: 12px;
	border: 1px solid #e4d8c8;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 16px 0;
}
.ws-refund-amount-card span {
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8c7865;
	font-weight: 600;
}
.ws-refund-amount-card strong {
	font-size: 24px;
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: -0.01em;
}
.ws-refund-amount-card small {
	font-size: 11px;
	color: #8c7865;
}

.ws-refund-dates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #f0ece4;
}
.ws-refund-dates strong {
	display: block;
	font-size: 13px;
	color: #1a1a1a;
	font-weight: 700;
}
.ws-refund-dates .ws-refund-detail-label {
	margin-bottom: 2px;
}

@media (max-width: 480px) {
	.ws-refund-item-row {
		flex-wrap: wrap;
	}
	.ws-refund-item-qty {
		width: 100%;
	}
	.ws-refund-stepper {
		font-size: 11px;
	}
	.ws-refund-tl-step {
		min-width: 48px;
	}
	.ws-refund-amount-card strong {
		font-size: 20px;
	}
}

/* ── Admin: Configurações da loja ── */

.settings-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 880px;
}

.settings-section {
	border: 1px solid rgb(var(--primary-rgb) / 0.18);
	border-radius: 16px;
	padding: 18px 20px 20px;
	background:
		radial-gradient(900px 160px at 0% 0%, rgb(var(--primary-rgb) / 0.06), transparent 60%),
		linear-gradient(180deg, rgb(var(--background-rgb) / 0.18), rgb(var(--background-rgb) / 0.05));
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.settings-section legend {
	padding: 0 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb(var(--primary-rgb));
}

.settings-logo-row {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 6px;
}

.settings-logo-preview {
	width: 120px;
	height: 120px;
	border-radius: 18px;
	border: 1px dashed rgb(var(--primary-rgb) / 0.4);
	background: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
	padding: 10px;
}

.settings-logo-preview img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.settings-logo-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 200px;
}

.settings-logo-actions .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: 1;
}

.settings-banners-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}

.settings-banner-tile {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	border: 2px solid rgb(var(--primary-rgb) / 0.55);
	background: #1a1a1a;
	aspect-ratio: 16 / 7;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	box-shadow: 0 4px 14px rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.04);
	transition: transform 120ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.settings-banner-tile:hover {
	transform: translateY(-2px);
	border-color: rgb(var(--primary-rgb));
	box-shadow: 0 10px 24px rgb(0 0 0 / 0.22), 0 0 0 1px rgb(var(--primary-rgb) / 0.35);
}

.settings-banner-tile.is-dragging {
	opacity: 0.5;
	cursor: grabbing;
}

.settings-banner-tile.is-drop-target {
	box-shadow: 0 0 0 3px rgb(var(--primary-rgb)), 0 12px 28px rgb(0 0 0 / 0.28);
}

.settings-banner-tile img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.settings-banner-tile .settings-banner-order {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgb(var(--primary-rgb));
	color: #1a1a1a;
	font-size: 13px;
	font-weight: 900;
	padding: 5px 12px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	border: 2px solid #1a1a1a;
	box-shadow: 0 3px 10px rgb(0 0 0 / 0.45);
	line-height: 1;
	min-width: 32px;
	text-align: center;
}

.settings-banner-tile .settings-banner-remove {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #d14343;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.5);
	transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
	font-size: 14px;
	line-height: 1;
	font-weight: 700;
	padding: 0;
}

.settings-banner-tile .settings-banner-remove .icon{
	width: 12px;
	height: 12px;
	stroke-width: 3;
}

.settings-banner-tile .settings-banner-remove:hover {
	background: #b22a2a;
	transform: scale(1.1);
}

.settings-banner-tile .settings-banner-remove:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.55), 0 3px 12px rgb(0 0 0 / 0.5);
}

.settings-banners-actions {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* Wraps an input/textarea with the inline reset-default icon button. */
.settings-input-row {
	display: flex;
	align-items: stretch;
	gap: 8px;
	width: 100%;
}

.settings-input-row > .input,
.settings-input-row > .textarea {
	flex: 1 1 auto;
	min-width: 0;
}

.settings-reset-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	min-height: 38px;
	border-radius: 10px;
	border: 1px solid rgb(var(--primary-rgb) / 0.30);
	background: transparent;
	color: rgb(var(--primary-rgb));
	cursor: pointer;
	padding: 0;
	transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
	align-self: flex-start;
}

.settings-reset-btn:hover {
	background: rgb(var(--primary-rgb) / 0.10);
	border-color: rgb(var(--primary-rgb) / 0.55);
}

.settings-reset-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgb(var(--primary-rgb) / 0.18);
}

.settings-reset-btn .icon {
	pointer-events: none;
}

/* When inline-row wraps a textarea, the button should anchor to top so
 * it doesn't stretch with multi-line text. */
.settings-input-row:has(textarea) .settings-reset-btn {
	min-height: 38px;
}

.settings-titles-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.settings-title-row {
	display: grid;
	grid-template-columns: minmax(180px, 220px) 1fr;
	gap: 12px;
	align-items: center;
}

.settings-title-row label {
	font-size: 13px;
	color: var(--muted-foreground);
	font-weight: 500;
}

.settings-title-row label small {
	display: block;
	font-size: 11px;
	color: var(--muted-foreground);
	opacity: 0.7;
	font-weight: 400;
	margin-top: 2px;
}

@media (max-width: 600px) {
	.settings-title-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

.settings-banners-empty {
	grid-column: 1 / -1;
	padding: 32px 16px;
	border-radius: 14px;
	border: 1px dashed rgb(var(--primary-rgb) / 0.3);
	text-align: center;
	color: var(--muted-foreground);
	font-size: 13px;
}

@media (max-width: 600px) {
	.settings-logo-row {
		flex-direction: column;
		align-items: flex-start;
	}
	.settings-logo-actions {
		width: 100%;
	}
}

/* ────────────────────────────────────────────────────────────────────
   Assinatura (admin SaaS billing) — desktop-only via .admin-only above
   ──────────────────────────────────────────────────────────────────── */

.subscription-section { padding: 22px 22px 18px; margin-bottom: 22px; }
.subscription-section:last-of-type { margin-bottom: 0; }

.subscription-plan-card {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 22px;
	background: linear-gradient(135deg, #fff 0%, #faf5ec 100%);
	border: 1px solid #e7ddcf;
	border-radius: 16px;
}

.subscription-plan-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.subscription-tier-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: #d2a24e;
	color: #1a1a1a;
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.04em;
	border-radius: 999px;
	text-transform: uppercase;
}
.subscription-tier-badge.tier-growth,
.subscription-tier-badge.tier-scale { background: #d2a24e; color: #1a1a1a; }

.subscription-status-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 999px;
	border: 1px solid transparent;
}
.subscription-status-chip.is-active    { background: #e9f7ea; color: #1f6f30; border-color: #c0e3c5; }
.subscription-status-chip.is-past_due  { background: #fdecec; color: #a83232; border-color: #f1c0c0; }
.subscription-status-chip.is-suspended { background: #1a1a1a; color: #d14343; border-color: #4a1a1a; }
.subscription-status-chip.is-canceled  { background: #f0eee9; color: #6f5c4b; border-color: #d8cdba; }
.subscription-status-chip.is-none      { background: #f5f1eb; color: #8c7865; border-color: #e7ddcf; }
.subscription-status-chip.is-pending   { background: #fff6dc; color: #806014; border-color: #ecd998; }
.subscription-status-chip.is-paid      { background: #e9f7ea; color: #1f6f30; border-color: #c0e3c5; }
.subscription-status-chip.is-failed    { background: #fdecec; color: #a83232; border-color: #f1c0c0; }
.subscription-status-chip.is-expired   { background: #f0eee9; color: #6f5c4b; border-color: #d8cdba; }

.subscription-price-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding: 12px 0;
	border-bottom: 1px dashed #e7ddcf;
}
.subscription-price-main { display: flex; flex-direction: column; gap: 4px; }
.subscription-price-side {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 2px;
	text-align: right;
}
.subscription-price-label {
	font-size: 11px;
	color: #8c7865;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.subscription-price-usd {
	font-size: 38px;
	font-weight: 900;
	color: #1a1a1a;
	letter-spacing: -0.01em;
	line-height: 1;
}
.subscription-price-brl {
	font-size: 18px;
	font-weight: 700;
	color: #6f5c4b;
}
.subscription-rate-note {
	font-size: 11px;
	color: #a3937f;
}
.subscription-rate-note.is-stale { color: #a83232; }

.subscription-usage { display: flex; flex-direction: column; gap: 8px; }
.subscription-usage-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: #6f5c4b;
}
.subscription-usage-percent { font-weight: 700; color: #1a1a1a; }
.subscription-progress-bar {
	width: 100%;
	height: 10px;
	background: #f0eee9;
	border-radius: 999px;
	overflow: hidden;
}
.subscription-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #c9a84c, #e1c25c);
	transition: width 0.3s ease, background 0.2s ease;
}
.subscription-progress-fill.is-warning { background: linear-gradient(90deg, #d99820, #e8a830); }
.subscription-progress-fill.is-danger  { background: linear-gradient(90deg, #d14343, #e85555); }

.subscription-tiers-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin-top: 4px;
}
.subscription-tier-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px;
	border: 1px solid #e7ddcf;
	border-radius: 12px;
	background: #ffffff;
	cursor: pointer;
	transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s, background 0.2s;
	user-select: none;
	position: relative;
}
.subscription-tier-card:hover {
	border-color: #c9a84c;
	transform: translateY(-1px);
}
.subscription-tier-card.is-active {
	border-color: #c9a84c;
	box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.18);
}
.subscription-tier-card.is-active::after {
	content: "Plano atual";
	position: absolute;
	top: -8px;
	right: 10px;
	background: #c9a84c;
	color: #1a1a1a;
	font-size: 10px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.subscription-tier-card.is-selected {
	border-color: #1f6f30;
	background: #effaf0;
	box-shadow: 0 0 0 2px rgba(31, 111, 48, 0.18);
}
.subscription-tier-card.is-selected::after {
	content: "Selecionado";
	position: absolute;
	top: -8px;
	right: 10px;
	background: #1f6f30;
	color: #ffffff;
	font-size: 10px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.subscription-tier-card.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.subscription-tier-card.is-disabled:hover {
	border-color: #e7ddcf;
	transform: none;
}
.subscription-tier-card:focus-visible {
	outline: 2px solid #c9a84c;
	outline-offset: 2px;
}
.subscription-tier-name {
	font-size: 12px;
	font-weight: 800;
	color: #1a1a1a;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.subscription-tier-price {
	font-size: 16px;
	font-weight: 700;
	color: #c9a84c;
}
.subscription-tier-cap {
	font-size: 11px;
	color: #8c7865;
}

.subscription-method-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.subscription-method-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px;
	background: #ffffff;
	border: 1px solid #e7ddcf;
	border-radius: 14px;
}
.subscription-method-head {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #1a1a1a;
}
.subscription-method-desc {
	margin: 0;
	font-size: 12.5px;
	color: #6f5c4b;
	line-height: 1.5;
}
.subscription-method-status {
	display: inline-flex;
	align-self: flex-start;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	border: 1px solid #e7ddcf;
	background: #f5f1eb;
	color: #8c7865;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.subscription-method-status.is-active  { background: #e9f7ea; color: #1f6f30; border-color: #c0e3c5; }
.subscription-method-status.is-pending { background: #fff6dc; color: #806014; border-color: #ecd998; }
.subscription-method-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

/* PIX modal body */
.subscription-pix-modal-body { padding: 18px 22px 22px; }
.subscription-pix-amount {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding: 12px 16px;
	background: #1a1a1a;
	border-radius: 12px;
	margin-bottom: 14px;
}
.subscription-pix-amount-label { color: #c4b9ab; font-size: 12px; }
.subscription-pix-amount-value { color: #c9a84c; font-size: 22px; font-weight: 900; }
.subscription-pix-qr-wrap { text-align: center; }
.subscription-pix-qr-wrap img {
	width: 220px;
	height: 220px;
	border-radius: 12px;
	border: 1px solid #e7ddcf;
	background: #fff;
}
.subscription-pix-copy { margin-top: 14px; }
.subscription-pix-copy label {
	font-size: 11px;
	font-weight: 700;
	color: #8c7865;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.subscription-pix-copy-row {
	display: flex;
	gap: 8px;
	margin-top: 6px;
	align-items: stretch;
}
.subscription-pix-copy-row textarea {
	flex: 1;
	resize: none;
	padding: 8px 10px;
	border: 1px solid #e7ddcf;
	border-radius: 8px;
	font-family: "Courier New", monospace;
	font-size: 11.5px;
	color: #1a1a1a;
	background: #faf5ec;
}
.subscription-pix-copy-row .btn { white-space: nowrap; }

/* In-panel banner */
.billing-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	background: #fff6dc;
	color: #806014;
	border: 1px solid #ecd998;
	border-radius: 12px;
	font-size: 13px;
	margin-bottom: 16px;
}
.billing-banner.is-usage_100,
.billing-banner.is-invoice_overdue,
.billing-banner.is-service_blocked {
	background: #fdecec; color: #a83232; border-color: #f1c0c0;
}

/* Global banner — fixed at the top of every admin view */
.billing-global-banner {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px;
	background: #fff6dc;
	color: #806014;
	border-bottom: 1px solid #ecd998;
	font-size: 13px;
	font-weight: 600;
}
.billing-global-banner.is-warning { background: #fff6dc; color: #806014; border-bottom-color: #ecd998; }
.billing-global-banner.is-danger  { background: #fdecec; color: #a83232; border-bottom-color: #f1c0c0; }
.billing-global-banner.is-blocked { background: #1a1a1a; color: #ffd680; border-bottom-color: #4a1a1a; }
.billing-global-banner-text { flex: 1; }
.billing-global-banner-link {
	color: inherit;
	text-decoration: underline;
	font-weight: 700;
	white-space: nowrap;
}

/* Service-suspended overlay (non-admin frontend) */
.service-suspended-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: linear-gradient(135deg, #1a1a1a 0%, #2a2418 100%);
	color: #c9a84c;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	text-align: center;
}
.service-suspended-overlay h1 {
	font-size: 28px;
	font-weight: 900;
	margin: 0 0 12px;
	letter-spacing: 0.02em;
}
.service-suspended-overlay p {
	font-size: 15px;
	color: #c4b9ab;
	max-width: 440px;
	line-height: 1.6;
	margin: 0;
}
.service-suspended-overlay .brand {
	font-size: 12px;
	letter-spacing: 0.2em;
	color: #6f5c4b;
	text-transform: uppercase;
	margin-top: 28px;
}

/* Registration locked card (login.html) */
.registration-locked-card {
	margin: 12px 0;
	padding: 14px 16px;
	border-radius: 12px;
	background: #fdecec;
	color: #7a2424;
	border: 1px solid #f1c0c0;
	font-size: 13px;
	line-height: 1.55;
}
.registration-locked-card strong { display: block; margin-bottom: 4px; color: #5a1a1a; }
.registration-locked-card a {
	display: inline-block;
	margin-top: 6px;
	color: #1a1a1a;
	background: #c9a84c;
	padding: 6px 12px;
	border-radius: 8px;
	font-weight: 700;
	text-decoration: none;
}

/* Mobile: panel is admin-only so already hidden, but the global banner
   leaks across pages — collapse it to a compact strip on small screens. */
@media (max-width: 680px) {
	.billing-global-banner { font-size: 12px; padding: 8px 12px; }
	.billing-global-banner-link { font-size: 11px; }
}

/* Banner inline na conta para usuário comum quando o sistema está
   suspenso. Não substitui o overlay full-screen — só serve como aviso
   suave enquanto o user navega pela área da conta. */
.suspended-user-banner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 auto 18px;
	padding: 14px 18px;
	border-radius: 12px;
	background: #fff6dc;
	border: 1px solid #ecd998;
	color: #5a4318;
	font-size: 13.5px;
	max-width: 1140px;
}
.suspended-user-banner > i {
	flex-shrink: 0;
	color: #b07b1f;
	margin-top: 2px;
}
.suspended-user-banner > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.5;
}
.suspended-user-banner strong { color: #4a3712; }
.suspended-user-banner span { color: #6c5325; }
@media (max-width: 680px) {
	.suspended-user-banner { font-size: 12.5px; padding: 12px 14px; }
}

/* ────────────────────────────────────────────────────────────────────
   Pagination — single shared component for every list in the app.
   Hidden automatically when total <= page_size.
   ──────────────────────────────────────────────────────────────────── */
.pagination {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 4px 4px;
	margin-top: 4px;
	font-size: 13px;
	color: var(--foreground, #1a1a1a);
}
.pagination[hidden] { display: none; }
.pagination-counter { color: rgb(112 95 75 / 0.85); }
.pagination-counter strong { color: var(--foreground, #1a1a1a); font-weight: 700; }
.pagination-nav {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.pagination-page {
	font-size: 12.5px;
	color: rgb(112 95 75 / 0.85);
	padding: 0 6px;
}
.pagination-page strong { color: var(--foreground, #1a1a1a); font-weight: 700; }
.pagination-prev[disabled],
.pagination-next[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}
@media (max-width: 680px) {
	.pagination {
		flex-direction: column;
		align-items: stretch;
	}
	.pagination-counter {
		text-align: center;
	}
	.pagination-nav {
		justify-content: space-between;
	}
	.pagination-prev, .pagination-next {
		flex: 1 1 0;
		min-height: 44px;
	}
	.pagination-page {
		flex: 1 1 100%;
		text-align: center;
		order: -1;
	}
}

/* Admin mobile guard — full-screen overlay shown when an admin tab is
   active on a viewport <= 680px. Mirrors the service-suspended overlay
   visual treatment so users recognize the "blocked" pattern. */
.admin-mobile-guard {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: linear-gradient(135deg, #1a1a1a 0%, #2a2418 100%);
	color: #c9a84c;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.admin-mobile-guard[hidden] { display: none; }
body.admin-mobile-blocked { overflow: hidden; }
.admin-mobile-guard-card {
	max-width: 360px;
	width: 100%;
	text-align: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(201, 168, 76, 0.25);
	border-radius: 18px;
	padding: 28px 22px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.admin-mobile-guard-icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: rgba(201, 168, 76, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
}
.admin-mobile-guard-icon .icon {
	width: 32px;
	height: 32px;
	color: #d2a24e;
}
.admin-mobile-guard h1 {
	font-size: 20px;
	font-weight: 900;
	margin: 0 0 10px;
	letter-spacing: 0.01em;
	color: #f4e6c1;
}
.admin-mobile-guard p {
	font-size: 14px;
	color: #c4b9ab;
	line-height: 1.55;
	margin: 0 0 18px;
}
.admin-mobile-guard-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 16px;
}
.admin-mobile-guard-actions .btn { width: 100%; }
.admin-mobile-guard-actions .btn-gold {
	background: #d2a24e;
	color: #1a1a1a;
	border: none;
}
.admin-mobile-guard-actions .btn-outline-gold {
	background: transparent;
	color: #d2a24e;
	border: 1px solid rgba(210, 162, 78, 0.5);
}
.admin-mobile-guard-brand {
	font-size: 11px;
	letter-spacing: 0.2em;
	color: #6f5c4b;
	text-transform: uppercase;
	margin: 12px 0 0 !important;
}

/* ── Panel header — split em 2 linhas ──────────────────────────────────
 * Pattern preferido pra headers com título + subtítulo longo + botão de
 * ação no canto. Linha 1: título à esquerda + botão à direita (justify
 * space-between). Linha 2: subtítulo full-width abaixo. Evita o subtítulo
 * competir com o botão por largura — que faz o botão quebrar em
 * viewports comuns ou comprimir a copy. Memória `panel-header-split-rows`.
 */
.panel-header-stack {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.panel-header-stack .panel-header-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.panel-header-stack .panel-subtitle {
	margin: 0;
}

/* ── Aba Cartões: banner pagamento cartão inativo ──
 * Aparece quando /payment-availability.card === false. Convida o cliente a
 * cadastrar cartão mesmo assim — fica salvo, pronto pra usar assim que
 * reativar. Tom amigável (info), não warning, porque a ação ainda é útil. */
.cards-inactive-banner {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 16px 18px;
	border-radius: 14px;
	border: 1px solid rgb(var(--primary-rgb) / 0.32);
	background: linear-gradient(180deg, rgb(var(--primary-rgb) / 0.10), rgb(var(--background-rgb) / 0.20));
	color: rgb(245 239 230 / 0.92);
}
.cards-inactive-icon {
	flex-shrink: 0;
	color: var(--primary);
	margin-top: 2px;
}
.cards-inactive-body {
	flex: 1;
}
.cards-inactive-title {
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 700;
	color: rgb(248 244 230 / 0.96);
}
.cards-inactive-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgb(232 226 213 / 0.86);
}
.cards-inactive-text strong {
	color: var(--primary);
}

/* ── Admin → Pagamento ─────────────────────────────────────────────────── */

.admin-hint.is-success {
	border-style: solid;
	border-color: rgb(70 160 90 / 0.45);
	background: rgb(70 160 90 / 0.10);
	color: rgb(220 240 220 / 0.92);
}
.admin-hint.is-success .icon { color: #6dd28e; }

.admin-hint.is-warning {
	border-style: solid;
	border-color: rgb(201 168 76 / 0.55);
	background: rgb(201 168 76 / 0.12);
	color: rgb(244 232 196 / 0.95);
}
.admin-hint.is-warning .icon { color: var(--primary); }

/* Estado loading dos botões de ação (Salvar e validar) */
.btn.is-loading {
	opacity: 0.7;
	cursor: progress;
	pointer-events: none;
}
.btn.is-loading::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-left: 8px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: btn-spin 0.7s linear infinite;
	vertical-align: middle;
}
@keyframes btn-spin {
	to { transform: rotate(360deg); }
}

/* Badge "!" no menu admin → pagamento (config pendente) */
#adminPaymentsMenuBadge {
	background: var(--primary);
	color: #1a1a1a;
	font-weight: 700;
}