/* ==========================================================================
   DD Load More — Estilos do botão e estados de loading
   border-radius: 0 em todos os elementos (exceto spinner — ver nota abaixo)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variáveis CSS — sobrescreva no tema filho para white-label
   -------------------------------------------------------------------------- */
:root {
	--dd-lm-button-bg:        #111111;
	--dd-lm-button-bg-hover:  #000000;
	--dd-lm-button-text:      #ffffff;
	--dd-lm-button-padding:   14px 36px;
	--dd-lm-font-size:        14px;
	--dd-lm-muted-color:      #777777;
	--dd-lm-error-color:      #c0392b;
	--dd-lm-error-bg:         rgba(192, 57, 43, 0.07);
	--dd-lm-error-border:     rgba(192, 57, 43, 0.28);
	--dd-lm-transition:       0.2s ease;
}

/* --------------------------------------------------------------------------
   Wrapper
   width: 100% garante que o wrapper ocupe toda a largura do container pai
   (necessário porque alguns temas não esticam elementos filhos automaticamente).
   -------------------------------------------------------------------------- */
.dd-lm-wrapper {
	display:         flex;
	flex-direction:  column;
	align-items:     center;
	gap:             16px;
	width:           100%;
	box-sizing:      border-box;
	margin-top:      40px;
	margin-bottom:   20px;
	padding:         0 16px;
	border-radius:   0;
}

/* --------------------------------------------------------------------------
   Botão principal
   -------------------------------------------------------------------------- */
.dd-lm-button {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	gap:              10px;
	background:       var(--dd-lm-button-bg);
	color:            var(--dd-lm-button-text);
	border:           1px solid transparent;
	border-radius:    0;
	padding:          var(--dd-lm-button-padding);
	font-size:        var(--dd-lm-font-size);
	font-weight:      600;
	text-transform:   uppercase;
	letter-spacing:   0.08em;
	line-height:      1;
	cursor:           pointer;
	transition:       background-color var(--dd-lm-transition),
	                  transform        var(--dd-lm-transition),
	                  opacity          var(--dd-lm-transition);
	-webkit-appearance: none;
	appearance:       none;
}

.dd-lm-button:hover:not(:disabled) {
	background:  var(--dd-lm-button-bg-hover);
	transform:   translateY(-1px);
}

.dd-lm-button:active:not(:disabled) {
	transform: translateY(0);
}

.dd-lm-button:disabled {
	opacity:        0.6;
	cursor:         not-allowed;
	transform:      none;
}

.dd-lm-button:focus-visible {
	outline:        2px solid var(--dd-lm-button-bg);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Spinner
   Nota: border-radius: 50% é necessário para renderizar o círculo de loading.
   É a única exceção intencional à regra border-radius: 0 deste projeto.
   -------------------------------------------------------------------------- */
.dd-lm-button__spinner {
	width:         15px;
	height:        15px;
	border:        2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation:     dd-lm-spin 0.65s linear infinite;
	flex-shrink:   0;
}

@keyframes dd-lm-spin {
	to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Mensagem de fim de resultados
   -------------------------------------------------------------------------- */
.dd-lm-end-message {
	margin:       0;
	padding:      6px 0;
	color:        var(--dd-lm-muted-color);
	font-style:   italic;
	font-size:    var(--dd-lm-font-size);
	text-align:   center;
	border-radius: 0;
}

/* --------------------------------------------------------------------------
   Mensagem de erro (injetada pelo JS)
   -------------------------------------------------------------------------- */
.dd-lm-error-message {
	margin:         0;
	padding:        10px 16px;
	color:          var(--dd-lm-error-color);
	background:     var(--dd-lm-error-bg);
	border:         1px solid var(--dd-lm-error-border);
	border-radius:  0;
	font-size:      var(--dd-lm-font-size);
	text-align:     center;
}

/* --------------------------------------------------------------------------
   Estado do botão durante carregamento (aria-busy)
   O JS também altera o atributo hidden do spinner — ambos são complementares.
   -------------------------------------------------------------------------- */
.dd-lm-button[aria-busy="true"] {
	cursor: wait;
}

/* --------------------------------------------------------------------------
   Responsividade
   -------------------------------------------------------------------------- */

/* Tablet (768 px — ponto onde Shoptimizer colapsa para 2 colunas) */
@media screen and (max-width: 768px) {
	.dd-lm-wrapper {
		margin-top: 32px;
		padding:    0 12px;
	}

	.dd-lm-button {
		min-width: 220px;
	}
}

/* Mobile (480 px — botão ocupa largura total para fácil toque) */
@media screen and (max-width: 480px) {
	.dd-lm-wrapper {
		margin-top: 24px;
		padding:    0 8px;
	}

	.dd-lm-button {
		width:     100%;
		min-width: unset;
		padding:   16px 20px;
	}

	.dd-lm-error-message {
		width: 100%;
	}
}