/**
 * GameBox greeting-card picker.
 *
 * Scoped to .gbsgc-* classes plus the .pewc-item wrappers this plugin marks
 * itself, so nothing here can leak into the rest of the WoodMart product page.
 */

/* The original PEWC radio list and language dropdown stay in the DOM - they
   still hold the value and still feed PEWC's price calculation - but the
   customer interacts with the thumbnails instead. Hidden with clip rather than
   display:none so the inputs remain focusable for assistive tech and so PEWC's
   own validation can still focus them if a required field is missed.

   .pewc-item-field-wrapper is the element PEWC actually wraps its inputs in;
   the field's visible <label> sits outside it, so the "Card Language" and
   "Card Design" headings survive while only the raw inputs are taken out of
   view. Our own controls are appended to .pewc-item, one level up, so they are
   unaffected by this. */
.gbsgc-hosted .pewc-item-field-wrapper {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Step A: language ------------------------------------------------- */
.gbsgc-langs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 6px 0 4px;
}

.gbsgc-lang {
	padding: 7px 16px;
	border: 1px solid #d5d5d5;
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	line-height: 1.2;
	color: #333;
	cursor: pointer;
	transition: border-color .15s, background-color .15s, color .15s;
}

.gbsgc-lang:hover {
	border-color: #999;
}

/* Same yellow as the selected tile, so "chosen" means one colour everywhere in
   the picker. Text stays near-black: white on this yellow fails contrast. */
.gbsgc-lang.is-active {
	background: #f3a41b !important;
	border-color: #f3a41b !important;
	color: #1a1a1a !important;
	font-weight: 600;
}

/* ---- Step B: design grid ---------------------------------------------- */
.gbsgc-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin: 8px 0 12px;
}

@media (min-width: 480px) {
	.gbsgc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
	.gbsgc-grid { grid-template-columns: repeat(5, 1fr); }
}

/* The grid lays out CELLS now, not tiles. Each cell holds the tile button plus
   the quick-view button as siblings - the eye cannot be nested inside the tile,
   because a <button> inside a <button> is invalid and the clicks collide. */
.gbsgc-cell {
	position: relative;
	display: block;
}

.gbsgc-cell .gbsgc-tile {
	width: 100%;
}

/* The quick-view control. Sits over the top-right corner of the thumbnail, the
   same place WPC puts it on the gift box, so the two pickers feel like one
   system. Forced sizing for the usual reason: WoodMart styles every button in
   the product summary and would otherwise give this one full-width padding. */
.gbsgc-qv {
	position: absolute !important;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 26px !important;
	height: 26px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 1px solid rgba(0, 0, 0, .15) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, .92) !important;
	font-size: 13px !important;
	line-height: 1 !important;
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
	opacity: .85;
	transition: opacity .15s, background-color .15s;
}

.gbsgc-qv:hover,
.gbsgc-qv:focus-visible {
	opacity: 1;
	background: #fff !important;
	border-color: #f3a41b !important;
}

/* ---- Quick-view modal --------------------------------------------------- */
.gbsgc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;          /* above WoodMart's own sticky header and overlays */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, .55);
}

.gbsgc-modal[hidden] {
	display: none;
}

/* Stop the page behind the modal scrolling under the customer's finger. */
body.gbsgc-modal-open {
	overflow: hidden;
}

.gbsgc-modal__box {
	position: relative;
	width: min(560px, 100%);
	max-height: 90vh;
	overflow-y: auto;
	padding: 20px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
	text-align: left;
}

.gbsgc-modal__close {
	position: absolute !important;
	top: 8px;
	right: 8px;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: #444 !important;
	font-size: 22px !important;
	line-height: 1 !important;
	cursor: pointer;
}

.gbsgc-modal__close:hover {
	background: #f2f2f2 !important;
}

.gbsgc-modal__title {
	margin: 0 32px 12px 0;
	font-size: 18px;
	line-height: 1.3;
}

/* Two faces side by side on a normal screen, stacked on a phone - the whole
   point is comparing front and back, so they must never be squeezed. */
.gbsgc-modal__figures {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

@media (min-width: 480px) {
	.gbsgc-modal__figures { grid-template-columns: 1fr 1fr; }
}

.gbsgc-modal__fig {
	margin: 0;
}

.gbsgc-modal__fig[hidden] {
	display: none;
}

.gbsgc-modal__fig img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 148 / 210;
	object-fit: contain;
	background: #f4f4f4;
	border: 1px solid #e3e3e3;
	border-radius: 6px;
}

.gbsgc-modal__fig figcaption {
	margin-top: 5px;
	font-size: 12px;
	color: #666;
	text-align: center;
}

.gbsgc-modal__meta {
	margin: 14px 0 0;
	font-size: 13px;
	color: #555;
}

.gbsgc-modal__note {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: #555;
}

.gbsgc-modal__choose {
	display: block !important;
	width: 100% !important;
	margin-top: 16px;
	padding: 10px 14px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: #f3a41b !important;
	color: #1a1a1a !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer;
}

.gbsgc-modal__choose:hover {
	background: #e0940f !important;
}

/* The tile is a <button>, so WoodMart's theme button styling applies to it and
   outranks a plain class selector. Its 5px/20px padding was eating 40px of a
   107px tile and squeezing the thumbnail down to 67px wide, so the padding has
   to be forced. Block rather than flex for the same reason: as a column flex
   item the image could shrink on the main axis and drag its width down with it
   via aspect-ratio. */
.gbsgc-tile {
	display: block !important;
	padding: 6px !important;
	border: 2px solid #e3e3e3;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s, box-shadow .15s;
}

.gbsgc-tile:hover {
	border-color: #b0b0b0;
}

/* !important is load-bearing here, not laziness: WoodMart ships sizing rules
   for images inside the product summary that outrank a plain class selector,
   and they were pinning the thumbnail to 67px wide inside a ~98px tile. The
   width and height have to win outright for the grid to look even. */
.gbsgc-tile img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	min-height: 0 !important;
	/* The cards are A5, so reserve the right box before the image loads and the
	   grid does not jump as thumbnails arrive. */
	aspect-ratio: 148 / 210;
	object-fit: cover;
	border-radius: 4px;
	background: #f4f4f4;
}

/* Selected state is brand yellow, not a dark border.
   A 2px near-black border on a white tile reads as "this one has an outline"
   rather than "this one is chosen" - at a glance across ten tiles it was easy
   to miss which card was picked. Yellow plus a wider ring and a tinted
   background carries the selection on three cues at once, so it survives being
   scanned quickly on a phone. */
/* !important again for the WoodMart reason documented above: the theme styles
   every <button> from --btn-bgcolor / --btn-brd-color, and without forcing it
   the yellow came through washed out (measured rgb(240,174,60) against a
   declared rgb(243,164,27), and the tint blended to rgb(248,243,235)). Forced,
   it renders as the exact brand yellow. */
.gbsgc-tile.is-selected {
	border-color: #f3a41b !important;
	background: #fff9ef !important;
	box-shadow: 0 0 0 3px rgba(243, 164, 27, .35) !important;
}

/* Hover must not out-shout the actual selection. */
.gbsgc-tile.is-selected:hover {
	border-color: #f3a41b !important;
}

/* Same story as the tile: the theme's button rules reach the caption too, so
   the block layout and full width both have to be forced or the caption ends
   up beside the thumbnail one character wide. */
.gbsgc-caption {
	display: block !important;
	width: 100%;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.25;
	color: #444;
	/* Occasion names vary a lot in length ("Danke" against "Alles Gute zum
	   Geburtstag"), so let them wrap rather than stretching the grid. */
	overflow-wrap: anywhere;
}

/* The card price, under the motif name.

   Forced to block and full width for the same reason the caption is: this sits
   inside a <button>, and WoodMart's button rules reach in and lay the children
   out inline, which put the price beside the name one character wide. The
   colour is the same amber used for the selected state, so price reads as part
   of the picker rather than as stray theme text. */
.gbsgc-price {
	display: block !important;
	width: 100%;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.2;
	font-weight: 600;
	color: #8a5a00;
}

/* WooCommerce wraps prices in its own spans; neutralise any theme sizing that
   would otherwise make the amount a different size to the label around it. */
.gbsgc-price .woocommerce-Price-amount {
	font-size: inherit !important;
	color: inherit !important;
}

.gbsgc-hint-price {
	font-weight: 600;
	color: #8a5a00;
}

.gbsgc-tile.is-selected .gbsgc-caption {
	font-weight: 700;
	color: #8a5a00;
}

.gbsgc-clear {
	padding: 5px 12px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	background: #fff;
	font-size: 13px;
	color: #555;
	cursor: pointer;
}

.gbsgc-clear:hover {
	border-color: #999;
	color: #222;
}

.gbsgc-clear[hidden] {
	display: none;
}

/* ---- Step C: message --------------------------------------------------- */
.gbsgc-hint {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #777;
}

.gbsgc-lock {
	margin: 4px 0 0;
	font-size: 13px;
	color: #a1670c;
}

.gbsgc-lock[hidden] {
	display: none;
}

/* Dim rather than hide the message step while it is unavailable, so the
   customer can see the option exists and understands it unlocks once a design
   is chosen. */
.gbsgc-message.is-locked {
	opacity: .55;
}

.gbsgc-message textarea[disabled] {
	background: #f6f6f6;
	cursor: not-allowed;
}

/* Arabic is right-to-left; without this the message reads from the wrong edge
   and the customer cannot tell what they typed. */
.gbsgc-message textarea[dir="rtl"] {
	text-align: right;
}