/*
 * The Copy Shop — el aspecto del pedido de impresión.
 *
 * Paso 6 del LEEME: el diseño, al final y con el tema.
 *
 * **Cada color y cada tipografía se piden con valor de respaldo**, así:
 *
 *     color: var(--gyc-tinta, #14171f);
 *
 * Con GY Canvas puesto, el formulario sale con la identidad del proyecto —el
 * naranja de The Copy Shop, Helvetica— sin que aquí haya ni un color de marca
 * escrito. Sin el tema, o con otro, sigue viéndose como algo acabado en vez de
 * como un formulario en bruto.
 *
 * Eso es lo primero que pide el LEEME: esto es un plugin, y tiene que
 * sobrevivir a un cambio de tema. Un diseño que dé por hecho el tema es un
 * diseño que se rompe el día que se rediseñe la web, que es justo el día en que
 * los pedidos tienen que seguir entrando.
 *
 * Los precios no se pintan aquí ni en ningún otro sitio que no sea la tarifa:
 * en este fichero no hay una sola cifra de euros, como en el guion.
 */

/* --------------------------------------------------------- los selectores --- */

.copy-shop-opciones {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

/*
 * El archivo ocupa la fila entera: es el campo del que depende todo lo demás
 * —sin él no hay páginas y sin páginas no hay precio—, y ponerlo del tamaño de
 * un desplegable lo esconde entre los otros seis.
 */
.copy-shop-campo:first-child {
	grid-column: 1 / -1;
}

.copy-shop-campo {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin: 0;
}

.copy-shop-campo label {
	font-family: var(--gyc-titulos, inherit);
	font-size: var(--gyc-t-menudo, .875rem);
	font-weight: 600;
	color: var(--gyc-tinta, #14171f);
}

.copy-shop-campo select,
.copy-shop-campo input[type="number"],
.copy-shop-campo input[type="file"] {
	width: 100%;
	padding: .6rem .75rem;
	background: var(--gyc-papel, #fff);
	border: 1px solid var(--gyc-linea, #e3e5ea);
	border-radius: var(--gyc-radio-corto, 6px);
	font-family: inherit;
	font-size: 1rem;
	color: inherit;
}

.copy-shop-campo select:focus,
.copy-shop-campo input:focus {
	border-color: var(--gyc-marca, #1d4ed8);
	outline: 2px solid var(--gyc-marca, #1d4ed8);
	outline-offset: 1px;
}

/* La letra pequeña del campo: el tamaño máximo y lo que se hace con el archivo. */
.copy-shop-campo .description {
	font-size: var(--gyc-t-mini, .78rem);
	color: var(--gyc-apoyo, #7b828e);
	line-height: 1.4;
}

/* ------------------------------------------------------------ el resultado --- */

.copy-shop-resultado {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin: 0 0 1rem;
	padding: 1rem 1.15rem;
	background: var(--gyc-papel-hondo, #f6f7f9);
	border-radius: var(--gyc-radio, 10px);
	min-height: 3.5rem;   /* el hueco existe antes de que llegue el precio */
}

.copy-shop-estado {
	font-size: var(--gyc-t-menudo, .875rem);
	color: var(--gyc-tinta-suave, #4d5460);
}

/*
 * Que se note cuál de las tres cosas está diciendo.
 *
 * El ámbar del «ojo» va escrito y no sale de un token porque no es un color de
 * marca: es un estado, como el verde y el rojo, y el tema no tiene token para
 * «atención». Usar el acento de la marca sería peor: en The Copy Shop el acento
 * es un gris oscuro, y un aviso en gris no avisa de nada.
 */
.copy-shop-estado--bien { color: var(--gyc-bien, #157347); }
.copy-shop-estado--ojo  { color: #b45309; }
.copy-shop-estado--mal  { color: var(--gyc-mal, #b02a37); }

/*
 * El precio, grande. Es lo que el cliente ha venido a ver, y lo que hace que
 * mover un selector tenga sentido: si no se distingue del resto, el cálculo en
 * vivo no sirve de nada.
 */
.copy-shop-precio {
	margin-left: auto;
	font-family: var(--gyc-titulos, inherit);
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: var(--gyc-tracking-titulo, -.02em);
	color: var(--gyc-tinta, #14171f);
	font-variant-numeric: tabular-nums;   /* que no baile al cambiar de cifra */
}

/* En la ficha, antes de subir nada. */
.copy-shop-sin-precio {
	font-size: var(--gyc-t-menudo, .875rem);
	color: var(--gyc-apoyo, #7b828e);
}

/* ---------------------------------------------------------- los dos avisos --- */

/* Los tomos: informa, no alarma. */
.copy-shop-tomos {
	margin: 0 0 1rem;
	padding-left: .9rem;
	border-left: 3px solid var(--gyc-marca-linea, #c7d2fe);
	font-size: var(--gyc-t-menudo, .875rem);
	color: var(--gyc-tinta-suave, #4d5460);
}

/*
 * El desvío a la tienda. Se dibuja como una nota, no como un error: no es que
 * el cliente haya hecho nada mal, es que eso se hace antes en el mostrador. Un
 * recuadro rojo diría lo contrario de lo que dice el texto.
 */
.copy-shop-aviso-minimo {
	margin: 0 0 1.25rem;
	padding: 1rem 1.15rem;
	background: var(--gyc-marca-tenue, #f5f7ff);
	border: 1px solid var(--gyc-marca-linea, #c7d2fe);
	border-radius: var(--gyc-radio, 10px);
}

.copy-shop-aviso-minimo p { margin: 0; }
.copy-shop-aviso-minimo p + p { margin-top: .5rem; }

.copy-shop-minimo__tienda {
	font-size: var(--gyc-t-menudo, .875rem);
	color: var(--gyc-tinta-suave, #4d5460);
}

.copy-shop-aviso-minimo a {
	color: var(--gyc-enlace, var(--gyc-marca, #1d4ed8));
}

/* ------------------------------------------------------------- el botón --- */

/*
 * El botón de WooCommerce, con la marca del sitio.
 *
 * De serie sale morado, que es el color de WooCommerce y de nadie más: en una
 * página naranja canta como un error de maquetación. Se le pasan los tokens del
 * tema, con respaldo, para que en cada proyecto salga de su color sin tocar
 * nada.
 *
 * Esta hoja sólo se carga en la ficha de este producto, así que no se le toca
 * el botón a ningún otro sitio de la tienda.
 *
 * **El selector es largo a propósito, y no lleva !important.** WooCommerce pinta
 * este botón con
 *
 *     .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt
 *
 * y eso pesa más que un `.single_add_to_cart_button` a secas, así que la regla
 * corta no ganaba. Lo que hace falta es igualarle el peso —`:where()` no suma—,
 * no gritar con !important: un !important aquí obligaría a otro !important el
 * día que alguien quiera cambiar este botón desde el tema hijo.
 */
.woocommerce button.single_add_to_cart_button.button,
.woocommerce button.single_add_to_cart_button.button.alt,
button.single_add_to_cart_button.button.alt {
	background: var(--gyc-marca, #1d4ed8);
	color: var(--gyc-sobre-marca, #fff);
	border: 0;
	border-radius: var(--gyc-radio-corto, 6px);
	padding: .8rem 1.5rem;
	font-family: var(--gyc-titulos, inherit);
	font-size: 1rem;
	font-weight: 600;
	transition: background .18s ease;
}

.woocommerce button.single_add_to_cart_button.button:hover,
.woocommerce button.single_add_to_cart_button.button.alt:hover,
.woocommerce button.single_add_to_cart_button.button:focus,
.woocommerce button.single_add_to_cart_button.button.alt:focus {
	background: var(--gyc-marca-oscura, #1e40af);
	color: var(--gyc-sobre-marca, #fff);
}

/*
 * Apagado tiene que parecerlo. WooCommerce lo deja igual que el encendido, y un
 * botón que no responde y no lo aparenta se pulsa tres veces —y quien lo pulsa
 * cree que la web está rota, no que su pedido no llega al mínimo—.
 */
.woocommerce button.single_add_to_cart_button.button[disabled],
.woocommerce button.single_add_to_cart_button.button.alt[disabled],
.woocommerce button.single_add_to_cart_button.button[disabled]:hover,
.woocommerce button.single_add_to_cart_button.button.alt[disabled]:hover {
	background: var(--gyc-apoyo, #7b828e);
	opacity: .55;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------ móvil --- */

@media (max-width: 600px) {
	.copy-shop-opciones { grid-template-columns: 1fr; }

	.copy-shop-resultado {
		flex-direction: column;
		align-items: flex-start;
	}
	.copy-shop-precio { margin-left: 0; }
}