/* ==========================================================================
   Katma 2027 — order-form.css
   The order form at /trgovina/. Loaded there and nowhere else.

   One long readable list rather than a grid of cards: a parish works down it
   the way they work down the paper order form, so the layout keeps each line
   on one row with the quantity box always in the same place on the right.
   ========================================================================== */

/* ==========================================================================
   Groups
   ========================================================================== */

.order-group + .order-group {
	margin-top: var(--space-2xl);
}

.order-group__title {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	padding-bottom: var(--space-2xs);
	border-bottom: 2px solid var(--katma-red);
	font-size: var(--text-lg);
}

.order-group__icon {
	display: inline-flex;
	color: var(--katma-red);
}

.order-group__icon svg {
	width: 24px;
	height: 24px;
}

/* ==========================================================================
   Rows
   ========================================================================== */

.order-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.order-row {
	display: grid;
	grid-template-columns: 104px minmax(0, 1fr) auto;
	align-items: start;
	gap: var(--space-sm) var(--space-md);
	/* Matches the space the thumbnail already has on the left, so the quantity
	   column is not pressed against the right edge. */
	padding: var(--space-md) var(--space-2xs);
	border-bottom: var(--border-hairline);
	transition: background-color var(--duration) var(--ease);
}

/* A line with a quantity on it should be findable at a glance when someone
   scrolls back up. The warm tint alone does that; a red rule down the edge
   turned a calm list into a striped one. */
.order-row.is-ordered {
	background-color: var(--color-bg-warm);
}

/* --- Media ---------------------------------------------------------------- */

.order-row__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3xs);
}

.order-row__thumb {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background-color: var(--katma-white);
	border: var(--border-hairline);
	border-radius: var(--radius-sm);
}

.order-row__thumb.is-zoomable {
	cursor: zoom-in;
}

.order-row__zoom {
	padding: 2px 4px;
	background: none;
	border: 0;
	border-radius: var(--radius-xs);
	font-family: var(--font-ui);
	/* A step under --text-xs: "Pogledaj sliku" broke onto a second line under
	   the thumbnail at 13px and the column has no room to spare. */
	font-size: 0.75rem;
	white-space: nowrap;
	color: var(--color-muted);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.order-row__zoom:hover {
	color: var(--color-accent);
}

/* --- Info ----------------------------------------------------------------- */

.order-row__title {
	font-family: var(--font-ui);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: var(--leading-snug);
	letter-spacing: 0;
	color: var(--color-heading);
}

.order-row__desc {
	margin-top: var(--space-3xs);
	max-width: 54ch;
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	color: var(--color-muted);
}

.order-row__price {
	margin-top: var(--space-2xs);
	font-weight: 700;
	color: var(--katma-red);
	font-variant-numeric: tabular-nums;
}

.order-row__unit {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-muted);
}

/* --- Quantity ------------------------------------------------------------- */

/* Label, field and line total read as one block, so they are centred on the
   field rather than ragged against the right edge. */
.order-row__order {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3xs);
	min-width: 8rem;
}

.order-row__label {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--color-muted);
}

/* Large and obvious: this is the one control on the page, and the reader is
   often an older user working quickly down a long list (brief §26). */
.order-row__qty {
	width: 8rem;
	min-height: 52px;
	padding-inline: var(--space-xs);
	background-color: var(--katma-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: var(--text-md);
	font-weight: 600;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.order-row__qty:focus-visible {
	border-color: var(--katma-red);
	outline-offset: 1px;
}

.order-row__sum {
	min-height: 1.2em;
	text-align: center;
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-heading);
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Total and submit
   ========================================================================== */

.order-total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: var(--space-lg);
	padding: var(--space-md);
	background-color: var(--color-bg-warm);
	border-radius: var(--radius-sm);
}

.order-total__label {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	color: var(--color-heading);
}

.order-total__value {
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--katma-red);
	font-variant-numeric: tabular-nums;
}

.order-total.is-empty .order-total__value {
	color: var(--color-muted);
}

.order-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm) var(--space-md);
	margin-top: var(--space-md);
}

.order-form__submit {
	min-width: 12rem;
}

.order-form__note {
	flex: 1 1 18rem;
	font-size: var(--text-sm);
	color: var(--color-muted);
}

/* ==========================================================================
   Narrow screens
   The thumbnail and text share the top row; the quantity gets a full-width
   row of its own so the box stays a large target.
   ========================================================================== */

@media (max-width: 640px) {
	/* The thumbnail earns more of the width on a phone — at 72px the artwork
	   was unreadable and "Pogledaj sliku" wrapped underneath it. */
	.order-row {
		grid-template-columns: 30% minmax(0, 1fr);
		gap: var(--space-2xs) var(--space-sm);
	}

	.order-row__order {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		gap: var(--space-2xs);
		/* Keeps "Količina" off the left edge, level with the thumbnail above. */
		padding-inline: var(--space-2xs);
	}

	.order-row__label {
		margin-right: auto;
	}

	.order-row__sum {
		min-width: 5rem;
		text-align: right;
	}

	.order-total {
		position: sticky;
		bottom: 0;
		z-index: 5;
		border: var(--border-hairline);
	}

	.order-form__submit {
		width: 100%;
	}
}