/* Camping Pod option cards - loaded only on the four Camping Pod products (inc/campingpod.php).
   Everything is scoped to body.jm-pod, which only jm-campingpod.js sets. */

.jm-pod .jm-pod-hidden { display: none !important; }

/* checkbox fields: one card per <li> in a grid - fixed-size columns, so a lone card or a large
   icon file (bed-double.png is 1254 px) cannot widen the column and push the page sideways */
.jm-pod .cpf-type-checkbox ul.tmcp-ul-wrap {
	/* 3 per row at every width, like the select cards (.jm-cards) next to them */
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 10px;
}
.jm-pod .cpf-type-checkbox ul.tmcp-ul-wrap > li { min-width: 0; }
.jm-pod .jm-card { min-width: 0; }
/* long Danish words ("håndklædetørrer") wrap instead of being cut on a phone */
.jm-pod .jm-card-name { overflow-wrap: anywhere; hyphens: auto; }

/* one row per field (owner, 16 Oct). The shared script keeps 3 size tiles + "+N", and one of the
   3 is the hidden "Vælg" card - so the row is 2 sizes + "+N": 3 columns at every width (the shared
   CSS would give 4 on desktop, leaving a gap, and 2 on a phone, wrapping to a second row) */
.jm-pod .jm-cards.jm-cards-size { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 767px) {
	.jm-pod .jm-cards.jm-cards-size { gap: 6px; }
	.jm-pod .jm-cards.jm-cards-size .jm-card { padding-left: 4px; padding-right: 4px; }
	.jm-pod .jm-cards.jm-cards-size .jm-card-name { font-size: 13px; }
	.jm-pod .jm-cards.jm-cards-size .jm-card-price { font-size: 11px; }
}

/* checkbox choices (Dobbeltseng, Varmekonvektor, skabe ...) wear the same card as every other
   choice: picture on top, name and price centred under it, all cards in a row equally tall. The
   shared layout is a row (42 px icon | squeezed text), which made them uneven (owner, 16 Oct).
   The tick box moves to the top-right corner so it takes no room. */
.jm-pod .cpf-type-checkbox ul.tmcp-ul-wrap > li { display: flex; }
.jm-pod .jm-card.jm-card-cb {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	padding: 8px 6px 10px;
}
.jm-pod .jm-card.jm-card-cb img { width: 100%; height: auto; max-width: none; margin: 0; }
.jm-pod .jm-card.jm-card-cb .jm-card-cb-body { width: 100%; min-width: 0; text-align: center; }
.jm-pod .jm-card.jm-card-cb .jm-card-name { margin-top: 8px; font-size: 13px; font-weight: 500; line-height: 1.3; }
.jm-pod .jm-card.jm-card-cb .jm-card-price { font-size: 12px; }
/* no round tick circle on the pods (owner, 16 Oct): a chosen card shows by its frame, like a select card */
.jm-pod .jm-card.jm-card-cb .jm-card-check { display: none !important; }
.jm-pod .jm-card.jm-card-cb.jm-pod-text { justify-content: center; }
/* the "+N" tile in a checkbox list fills its cell like a card */
.jm-pod li.jm-pod-more-li > .jm-card { flex: 1 1 auto; width: 100%; }

/* icons as large as the card allows, never cropped or stretched */
.jm-pod .jm-card img {
	max-width: 100%;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: #fff;
}

/* On a computer the shared swatch tile is 1/7 of the column, so it shrinks with the window
   (74 px on a full screen, 54 px in a narrower window - the owner saw the pods smaller than the
   hot tubs, 16 Oct). The pods keep the full-screen hot-tub size at every desktop width; how many
   fit in the row is counted in jm-campingpod.js (one row + "+N"). Phones keep the shared 5 per row. */
@media (min-width: 768px) {
	.jm-pod .jm-cards-swatch .jm-card { width: 74px; }
}

/* paint and roof colours as the shop's swatch tiles (jm-campingpod.js adds .jm-cards-swatch):
   the photo fills the square like on the hot tubs, not "contain" as on the option icons */
.jm-pod .jm-cards-swatch .jm-card img {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	object-fit: cover;
	background: none;
}
/* "Transparent" has no swatch picture: its name stays readable inside the tile */
.jm-pod .jm-cards-swatch .jm-card.jm-pod-text { padding: 2px; min-height: 0; }
.jm-pod .jm-cards-swatch .jm-card.jm-pod-text .jm-card-name {
	display: block;
	margin: 0;
	font-size: 11px;
	line-height: 1.15;
	text-align: center;
	overflow-wrap: anywhere;
}

/* a choice without an icon: compact text card, no grey "–" box */
.jm-pod .jm-card.jm-pod-text { justify-content: center; min-height: 0; padding-top: 12px; padding-bottom: 12px; }
.jm-pod .jm-card.jm-pod-text .jm-card-noimg { display: none; }

/* "Mere info" under a card, and its text under the field's cards */
.jm-pod .jm-pod-more {
	display: inline-block;
	margin-top: 4px;
	font-size: 12px;
	text-decoration: underline;
	color: inherit;
	opacity: .75;
}
.jm-pod .jm-pod-more:hover { opacity: 1; }
.jm-pod .jm-pod-info {
	margin: 8px 0 4px;
	padding: 10px 12px;
	border: 1px solid #e4e2da;
	border-radius: 8px;
	background: #fafaf7;
	font-size: 13px;
	line-height: 1.5;
}
.jm-pod .jm-pod-info p { margin: 4px 0 0; }

/* "Køkken og bad": one block - heading, then the cards of all its fields in one grid, 3 per row
   like every other field (jm-campingpod.js wraps the sections in .jm-kb-grid). Every wrapper between
   the grid and the cards gives up its own box (display: contents), so the cards become the grid's
   items. No !important on display: a section or field TM EPO hides keeps its inline display:none. */
.jm-pod .jm-pod-group-head { margin: 18px 0 8px; }
.jm-pod .jm-kb-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 12px;
}
.jm-pod .jm-kb-grid .cpf-section,
.jm-pod .jm-kb-grid .tc-section-inner-wrap,
.jm-pod .jm-kb-grid .tc-row,
.jm-pod .jm-kb-grid .tc-cell,
.jm-pod .jm-kb-grid .cpf-element,
.jm-pod .jm-kb-grid .tc-element-inner-wrap,
.jm-pod .jm-kb-grid .tmcp-ul-wrap,
.jm-pod .jm-kb-grid .tmcp-field-wrap,
.jm-pod .jm-kb-grid .jm-cards {
	display: contents;
}
/* the lists inside a field have stronger display rules (style.css, and the checkbox grid above);
   TM EPO's size logic never hides these inner elements, so !important is safe here */
.jm-pod .jm-pod-kb .jm-kb-grid ul.tmcp-ul-wrap.tmcp-elements,
.jm-pod .jm-kb-grid ul.tmcp-ul-wrap > li.tmcp-field-wrap,
.jm-pod .jm-kb-grid .tc-element-inner-wrap,
.jm-pod .jm-kb-grid .jm-enhanced .jm-cards {
	display: contents !important;
}
/* the fields' own labels ("mini groups") go; the block heading names them all */
.jm-pod .jm-kb-grid .tm-epo-element-label,
.jm-pod .jm-kb-grid .tc-epo-label,
.jm-pod .jm-kb-grid .tm-section-label,
.jm-pod .jm-kb-grid .tm-element-description {
	display: none !important;
}
/* "Mere info" text of a block card: under the whole block */
.jm-pod .jm-pod-kb > .jm-pod-info { margin-top: 0; }

/* a required choice still open when the customer tries to buy */
.jm-pod .jm-pod-req {
	margin: 0 0 10px;
	padding: 10px 12px;
	border: 1px solid #c0392b;
	border-radius: 8px;
	background: #fdf1ef;
	color: #8e2a1e;
	font-size: 14px;
	line-height: 1.4;
}
.jm-pod .cpf-element.jm-pod-missing .tm-epo-element-label,
.jm-pod .cpf-element.jm-pod-missing .tc-epo-label { color: #c0392b; }
.jm-pod .cpf-element.jm-pod-missing .jm-card:not(.jm-card-more) { border-color: #e2a59c; }