/* ==========================================================================
   WC Registo de Animais — Folha de estilos
   Segue os estilos nativos do WooCommerce / tema Storefront
   ========================================================================== */

/* Wrapper principal */
.wra-wrapper {
	max-width: 100%;
}

.wra-title {
	margin-bottom: .35em;
}

.wra-intro {
	color: #767676;
	margin-bottom: 1.5em;
}

/* --------------------------------------------------------------------------
   Repeater — cartão de animal
   -------------------------------------------------------------------------- */

.wra-row {
	background: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	margin-bottom: 1.25em;
	overflow: hidden;
	transition: box-shadow .15s ease;
}

.wra-row:hover {
	box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

/* Cabeçalho da linha */
.wra-row-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #f7f7f7;
	border-bottom: 1px solid #e0e0e0;
	padding: .6em 1em;
}

.wra-row-label {
	font-weight: 600;
	font-size: .9em;
	color: #333;
}

.wra-row-num {
	color: #999;
	font-weight: 400;
	margin-left: .25em;
}

/* Botão remover */
.wra-remove-btn {
	background: none;
	border: none;
	color: #c0392b;
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
	padding: 0 .25em;
	transition: opacity .15s;
}

.wra-remove-btn:hover {
	opacity: .7;
}

/* Campos dentro da linha */
.wra-row-fields {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) );
	gap: 1em;
	padding: 1.1em 1em 1.2em;
}

.wra-field {
	display: flex;
	flex-direction: column;
	gap: .35em;
}

.wra-field label {
	font-size: .85em;
	font-weight: 600;
	color: #444;
	margin: 0;
}

.wra-field input[type="text"],
.wra-field input[type="number"],
.wra-field select {
	width: 100%;
	padding: .55em .75em;
	border: 1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	font-size: .95em;
	color: #333;
	transition: border-color .15s;
	box-sizing: border-box;
}

.wra-field input[type="text"]:focus,
.wra-field input[type="number"]:focus,
.wra-field select:focus {
	border-color: #96588a; /* cor accent WooCommerce/Storefront */
	outline: none;
	box-shadow: 0 0 0 2px rgba(150,88,138,.15);
}

/* Campo "Especifique" — animação de reveal */
.wra-outro-field {
	overflow: hidden;
	transition: max-height .2s ease, opacity .2s ease;
}

/* --------------------------------------------------------------------------
   Botão "Adicionar Animal"
   -------------------------------------------------------------------------- */

.wra-add-btn {
	margin-top: .25em;
	background: transparent !important;
	border: 2px dashed #64dd17 !important;
	color: #333333 !important;
	padding: .6em 1.4em !important;
	font-size: .9em !important;
	border-radius: 0px !important;
	transition: background .15s, color .15s !important;
}

.wra-add-btn:hover {
	background: #64dd17 !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Linha de guardar
   -------------------------------------------------------------------------- */

.wra-submit-row {
	margin-top: 1.5em;
	padding-top: 1.25em;
	border-top: 1px solid #e0e0e0;
}

/* --------------------------------------------------------------------------
   Responsive — ecrãs pequenos: campos em coluna única
   -------------------------------------------------------------------------- */

@media ( max-width: 600px ) {
	.wra-row-fields {
		grid-template-columns: 1fr;
	}
}