/*
 * Lonja – Pedidos del día: the ONE front-end stylesheet (loaded only while "Mostrar textos públicos" is on).
 * It inherits the site's fonts: body text uses whatever the theme uses (Karla), titles use the heading font (Oswald), through
 * Elementor's global variables when they exist. Colours: text #0F121A, accents #6AC0E9 and #43A5D3. Readable on a phone:
 * 16px text, 1.5 line height and no text smaller than 14px. Dark text on the light blue keeps the contrast above 7:1.
 */

/*
 * Contrast rule: a block that brings its OWN light background (the rules box, the thank-you block, the badges) also sets its OWN dark
 * text, with !important because themes style headings and links with higher specificity (white headings on the dark shop made
 * "Condiciones de pedido" unreadable). A line that sits directly on the theme (unit suffix, "Precio por kilo", the cart reservation
 * note) takes the colour of the text around it, so it is readable on the dark shop and on a light one.
 */

.lonja-rules,
.lonja-thankyou {
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: #0f121a !important;
}

.lonja-unit-line,
.lonja-loop,
.lonja-horario {
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}

.lonja-rules h3,
.lonja-thankyou h2,
.lonja-thankyou h3 {
	font-family: var(--e-global-typography-primary-font-family, "Oswald"), sans-serif;
	color: #0f121a !important;
	font-size: 1.15em;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .02em;
	margin: 0 0 .5em;
}

.lonja-rules { margin: 0 0 1em; padding: .75em 1em; background: #eaf6fc; border-left: 4px solid #6ac0e9; border-radius: 4px; }
.lonja-rules p, .lonja-rules ul, .lonja-rules ol { margin: 0; }
.lonja-rules ul, .lonja-rules ol { padding-left: 1.25em; }
.lonja-rules li, .lonja-rules p { margin: .25em 0; color: #0f121a !important; }
.lonja-rules a, .lonja-rules a:visited, .lonja-rules a:hover { color: #0f121a !important; text-decoration: underline; text-decoration-color: #43a5d3; text-underline-offset: 2px; }
.lonja-rules--banner { padding: .5em 1em; }
.lonja-rules--banner p { font-weight: 600; }
.woocommerce-checkout .lonja-rules--full { max-height: 26em; overflow: auto; }

.lonja-unit,
.lonja-unit-long { font-weight: 600; color: inherit; }
.lonja-unit { margin-left: .15em; }
.lonja-unit-line { margin: .25em 0 .75em; font-weight: 600; }
.lonja-unit-note { font-size: 14px; color: inherit; opacity: .85; }
/* In the shop loop the line sits inside the product link (link colour) over a busy photo background: a small dark pill reads on any theme. */
.lonja-loop .lonja-unit-note { opacity: 1; padding: .1em .65em; border-radius: 999px; background: rgba(15, 18, 26, .78); color: #fff !important; }

/* Stock badges: the product page (WooCommerce stock line), the shop loop and the cart. */
.lonja-badge {
	display: inline-block;
	padding: .15em .75em;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	border: 2px solid #43a5d3;
	color: #0f121a !important; /* WooCommerce's p.stock colours (green) lost the contrast on the light blue */
	background: #fff;
}
.lonja-badge--in_stock { background: #6ac0e9; border-color: #6ac0e9; }
.lonja-badge--reservable { background: #fff; border-color: #43a5d3; }
.lonja-badge--sold_out { background: #e5e7eb; border-color: #c4c8ce; color: #374151 !important; }
p.stock.lonja-badge { margin: 0 0 1em; }
.lonja-loop { margin: .25em 0 .5em; display: flex; flex-wrap: wrap; gap: .25em .6em; align-items: center; }
.backorder_notification.lonja-backorder { margin: .25em 0 0; font-size: 14px; color: inherit; }

.lonja-horario--lista { margin: 0; padding-left: 1.25em; }

/* Thank-you block. */
.lonja-thankyou { margin: 1.5em 0; padding: 1em 1.25em; border: 2px solid #6ac0e9; border-radius: 6px; background: #fff; }
.lonja-thankyou p, .lonja-thankyou li { color: #0f121a !important; }
.lonja-thankyou--waiting { border-color: #43a5d3; }
.lonja-thankyou ul { margin: 0 0 1em; padding-left: 1.25em; }
.lonja-thankyou .lonja-cancel-link { display: inline-block; margin-top: .25em; padding: .6em 1.2em; background: #0f121a; color: #fff !important; border-radius: 4px; text-decoration: none; font-weight: 700; }
.lonja-thankyou .lonja-cancel-link:focus-visible { outline: 3px solid #6ac0e9; outline-offset: 2px; }

/* Customer cancel page: a phone has no side margin of its own, and the theme's heading size does not fit "Cancelar tu pedido #1824". */
.lonja-cancel h2 { font-size: clamp(1.7rem, 6vw, 2.6rem); line-height: 1.15; margin: 0 0 .5em; overflow-wrap: anywhere; }
.lonja-cancel h3 { font-size: 1.4rem; line-height: 1.2; margin: 1em 0 .25em; }
.lonja-cancel__wait { display: inline-block; margin-top: .25em; }
@media (max-width: 600px) {
	.lonja-cancel .lonja-cancel__confirm { display: block; width: 100%; box-sizing: border-box; }
}

/* Checkout acceptance fallback. */
.lonja-accept label { display: flex; gap: .5em; align-items: flex-start; font-size: 16px; }
.lonja-accept input[type="checkbox"] { margin-top: .3em; width: 20px; height: 20px; }

@media (max-width: 600px) {
	.woocommerce-checkout .lonja-rules--full { max-height: 16em; }
	.lonja-thankyou .lonja-cancel-link { display: block; text-align: center; }
}

/* The pickup guide "¿Cuándo recojo mi pedido?" (banner second line, compact and full rules) and the pickup row of the cart and checkout totals. */
.lonja-rules--banner p + p { margin-top: .1em; font-weight: 400; font-size: 15px; }
.lonja-pickup-guide { margin: 0 0 .75em; padding-bottom: .5em; border-bottom: 1px solid #b9dff2; }
.lonja-pickup-guide__question { margin-top: .6em; font-weight: 700; }
.lonja-pickup-guide__list { margin: 0; }
.lonja-pickup-row th, .lonja-pickup-row td { vertical-align: top; }
.lonja-pickup-row td { font-weight: 700; } /* 700, not 600: the cart widget loads Roboto 400 and 700 only, and 600 was synthesised in a different face */