/* Desistimiento / devolución para invitados (guest_rma.php)
   Estilo Maquillalia: Work Sans, negro/morado, SIN bordes redondeados,
   inputs con línea inferior y label flotante, botones planos en mayúsculas. */

.grmaWrap { padding: 30px 0 70px; }

.grmaCard {
	width: 100%; background: #fff;
	font-family: var(--default-fonts); color: var(--primary-color);
}

/* Título de página a ancho completo (mismo tratamiento que .ccTitle del área de cuenta) */
.grmaPageTitle {
	border-bottom: 1px solid #bbb; font-size: 22px; line-height: 1.2; color: #000;
	margin: 0 0 22px; padding: 0 0 8px; font-weight: 700; text-transform: uppercase;
}

.grmaHeading {
	margin: 0 0 10px; font-size: 32px; line-height: 1.1; font-weight: 700;
	text-transform: uppercase; color: var(--primary-color);
}
.grmaIntro { margin: 0 0 30px; color: #555; font-size: 16px; line-height: 1.45; }
.grmaPageIntro { margin: 0 0 28px; color: #555; font-size: 15px; line-height: 1.6; }
.grmaProductsHint { margin: 0 0 12px; color: #888; font-size: 13px; font-style: italic; }

.grmaErr, .grmaOk {
	display: flex; align-items: flex-start; gap: 8px; margin: 0 0 22px;
	padding: 12px 16px; font-size: 14px; line-height: 1.5;
}
.grmaErr { background: #fbeef0; border-left: 3px solid var(--secondary-color); color: #9b2d3b; }
.grmaOk  { background: #f2faf4; border-left: 3px solid #3a9d5d; color: #246b3a; }

.grmaForm { text-align: left; }

/* Paso de acceso en 2 columnas (form + "¿Tienes cuenta?"), apiladas en móvil.
   Ambas columnas a la misma altura (stretch) y botones alineados abajo
   (margin-top:auto), para un layout "cuadrado" como el de login.php. */
.grmaCols { display: flex; gap: 50px; align-items: flex-start; }
.grmaColMain { flex: 1 1 60%; min-width: 0; }
.grmaColSide {
	flex: 0 0 34%; padding-left: 50px; border-left: 1px solid #e0e0e0;
}
.grmaSideTitle { font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--primary-color); margin: 0 0 12px; }
.grmaSideText { font-size: 14px; color: #555; line-height: 1.5; margin: 0 0 18px; }
.grmaBtnFull { width: 100%; }
@media only screen and (max-width: 720px) {
	.grmaCols { flex-direction: column; gap: 30px; }
	.grmaColMain { flex: 0 0 auto; }
	.grmaColMain .grmaForm { display: block; }
	.grmaColMain .grmaForm .grmaSubmit { margin-top: 10px; }
	.grmaColSide { flex-basis: auto; width: 100%; padding-left: 0; border-left: 0; border-top: 1px solid #e0e0e0; padding-top: 28px; }
	.grmaColSide .grmaBtnFull { margin-top: 18px; }
}

/* Botón con flecha a la derecha */
.grmaSubmitArrow { display: flex; align-items: center; justify-content: center; gap: 10px; }

/* Dos campos en fila en escritorio, apilados en móvil */
.grmaFields2 { display: flex; gap: 26px; flex-wrap: wrap; }
.grmaFields2 .grmaFloat { flex: 1 1 240px; }

/* Campo con label FLOTANTE sobre input de LÍNEA INFERIOR.
   El padding-top del contenedor deja hueco para el label flotado (arriba). */
.grmaFloat { position: relative; padding-top: 22px; margin: 0 0 24px; }
.grmaFloat input {
	width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid var(--primary-color);
	background: transparent; padding: 6px 0 12px; font-size: 16px;
	font-family: var(--default-fonts); color: var(--primary-color);
	-moz-appearance: textfield; transition: border-color .15s;
}
.grmaFloat input:focus { outline: none; border-bottom-color: var(--secondary-color); }
.grmaFloat label {
	position: absolute; left: 0; top: 28px; color: #9b9a9a; font-size: 16px;
	pointer-events: none; transition: top .15s, font-size .15s, color .15s;
}
.grmaFloat input:focus + label,
.grmaFloat input:not(:placeholder-shown) + label {
	top: 0; font-size: 12px; color: var(--secondary-color); font-weight: 500;
}

.grmaSubmit {
	display: block; width: 100%; height: 56px; border: 0; cursor: pointer;
	background: var(--primary-color); color: #fff; font-family: var(--default-fonts);
	font-size: 18px; text-transform: uppercase; letter-spacing: .5px; text-align: center;
	text-decoration: none; line-height: 56px; margin: 10px 0 0; transition: background .15s;
}
.grmaSubmit:hover { background: var(--secondary-color); color: #fff; }

.grmaBtnSec {
	display: inline-flex; align-items: center; justify-content: center; height: 56px;
	padding: 0 26px; background: #fff; color: var(--primary-color);
	border: 1px solid var(--primary-color); font-family: var(--default-fonts);
	font-size: 16px; text-transform: uppercase; text-decoration: none; cursor: pointer;
	transition: all .15s;
}
.grmaBtnSec:hover { background: var(--primary-color); color: #fff; }

/* "¿Tienes cuenta? Inicia sesión": bloque centrado, separado por una línea */
.grmaLoginSmall {
	display: block; text-align: center; margin: 22px 0 0; padding-top: 18px;
	border-top: 1px solid #e0e0e0; font-size: 14px; color: #777;
	text-decoration: none; font-family: var(--default-fonts);
}
.grmaLoginSmall:hover { color: var(--secondary-color); }
.grmaLoginSmall i { color: var(--secondary-color); margin-right: 4px; }

.grmaConditions { margin: 12px 0 0; text-align: right; font-size: 14px; }
.grmaConditions a { color: var(--secondary-color); text-decoration: none; }
.grmaConditions a:hover { text-decoration: underline; }

.grmaLegal {
	margin: 26px 0 0; border-top: 1px solid #e0e0e0; padding-top: 18px;
	font-size: 12px; color: #777; line-height: 1.7; text-align: justify;
}

.grmaConfirmNote {
	margin: 22px 0 0; padding: 13px 16px; background: #f7ecf8;
	border-left: 3px solid var(--secondary-color); font-size: 13px;
	line-height: 1.55; color: var(--primary-color);
}

/* Checkbox de aceptación obligatorio (segunda confirmación), estilo plano */
.grmaAccept {
	display: flex; align-items: flex-start; gap: 11px; margin: 24px 0 0;
	font-size: 14px; line-height: 1.55; color: var(--primary-color); cursor: pointer;
}
.grmaAccept input[type="checkbox"] {
	flex: 0 0 auto; width: 20px; height: 20px; margin: 1px 0 0;
	accent-color: var(--secondary-color); cursor: pointer;
}

/* --- Paso 2: selección de productos --- */
.grmaOrderHead {
	margin: 0 0 22px; padding: 0 0 16px; border-bottom: 1px solid #e0e0e0; text-align: left;
}
.grmaOrderTitle { font-size: 17px; font-weight: 700; color: var(--primary-color); margin: 0 0 7px; }
.grmaOrderMeta { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; font-size: 14px; color: #555; }
.grmaOrderMeta strong { color: var(--primary-color); }
.grmaOrderHead .LabelStatus { display: inline-block; color: #333; padding: 2px 11px; border-radius: 3px; font-size: 12px; font-weight: 600; background: #ffc197; }

table.grmaProducts { width: 100%; border-collapse: collapse; margin: 0 0 6px; }
table.grmaProducts thead th {
	text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--primary-color);
	color: var(--primary-color); font-weight: 600; font-size: 12px;
	text-transform: uppercase; letter-spacing: .3px;
}
table.grmaProducts tbody td { padding: 12px 8px; border-bottom: 1px solid #eee; font-size: 14px; color: var(--primary-color); vertical-align: middle; }
table.grmaProducts th.c { text-align: center; }
table.grmaProducts td.c { text-align: center; }
table.grmaProducts td.r { text-align: right; white-space: nowrap; }
table.grmaProducts tbody tr { cursor: pointer; transition: background .12s; }
table.grmaProducts tbody tr:hover { background: #fafafa; }
table.grmaProducts tbody tr.selected { background: #faf2fb; }
.grmaProducts select { height: 42px; width: 66px; border: 1px solid #c9c9c9; padding: 0 6px; font-family: var(--default-fonts); font-size: 15px; background: #fff; cursor: pointer; }
.grmaProducts input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: var(--secondary-color); }

/* Miniatura + nombre */
.grmaProdCell { display: flex; align-items: center; gap: 12px; }
.grmaThumb { flex: 0 0 auto; line-height: 0; }
.grmaThumb img { width: 48px; height: 60px; object-fit: contain; border: 1px solid #eee; background: #fff; }
.grmaProdName { display: block; }
.grmaAttr { display: block; color: #888; font-size: 12px; font-style: italic; }

.grmaMotivo { margin: 18px 0 0; }
.grmaMotivo textarea {
	width: 100%; min-height: 100px; box-sizing: border-box; border: 1px solid #c9c9c9;
	padding: 12px; font-size: 15px; font-family: var(--default-fonts); resize: vertical;
}
.grmaMotivo textarea:focus { outline: none; border-color: var(--secondary-color); }

.grmaActions { margin-top: 26px; display: flex; justify-content: flex-end; gap: 12px; }
.grmaActions .grmaSubmit { width: auto; height: 52px; line-height: 52px; padding: 0 40px; font-size: 17px; margin: 0; }
.grmaActions .grmaBackBtn { height: 52px; line-height: 52px; padding: 0 30px; font-size: 16px; }

@media only screen and (max-width: 600px) {
	.grmaHeading { font-size: 24px; }
	.grmaActions { flex-direction: column-reverse; }
	.grmaActions .grmaSubmit, .grmaActions .grmaBackBtn { width: 100%; }
	.grmaThumb img { width: 40px; height: 50px; }
}