/*
 * Laxen Product Configurator – configurator.css
 *
 * PEWC-selektorer vi förlitar oss på (uppdatera om plugin:et ändrar markup):
 *   .pewc-product-extra-groups-wrap  – yttre container
 *   .pewc-group-wrap                 – en fält-grupp
 *   .pewc-group-heading-wrapper      – gruppens H3 (döljs)
 *   .pewc-item                       – ett fält (LI)
 *   .pewc-item-field-wrapper         – div runt label + input
 *   .pewc-field-label                – H4 med fältnamn
 *   .pewc-field-label-text           – span med texten
 *   .pewc-checkbox-group-wrapper     – UL med radio-options
 *   .pewc-radio-form-label           – label runt varje radio
 *   .pewc-radio-form-field           – input[type=radio]
 *   .pewc-radio-option-text          – span med option-text
 *   .pewc-separator                  – " + " mellan namn och pris
 *   .pewc-option-cost-label          – prisspan
 *   .pewc-number-field               – number input (Höjd, Längd)
 *   .pewc-description                – p under number-fält
 *   .pewc-select-wrapper             – div runt select
 *   .pewc-form-field (select)        – dropdown
 *   .pewc-radio-images-wrapper       – flex-container för swatches
 *   .pewc-radio-image-wrapper        – ett swatch-alternativ
 *   .pewc-radio-image-wrapper.checked – vald swatch
 *   .pewc-hex > span                 – färgcirkel med inline background
 *   .pewc-radio-image-desc           – färgnamn
 *   .pewc-hidden-field               – conditional-dolda fält
 *   #pewc-grand-total                – grand total belopp
 *   #pewc-grand-total-label          – grand total label
 *   #pewc-per-product-total          – per-product total (döljs)
 *   #pewc-per-product-label
 *   #pewc-options-total              – options total (döljs)
 *   #pewc-options-total-label
 */

/* ══════════════════════════════════════════════
   RESET / WRAPPER
   ══════════════════════════════════════════════ */

.pewc-product-extra-groups-wrap {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}

/* Dölj grupprubriker – vi använder fältlabels istället */
.pewc-group-heading-wrapper {
	display: none !important;
}

.pewc-product-extra-groups {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: .75rem !important;
}

/* Alla fält: full bredd */
.pewc-item {
	grid-column: 1 / -1 !important;
}

/* Höjd + Längd: halv bredd (använder klasser satta i PEWC-adminpanelen) */
.pewc-item.hojd,
.pewc-item.langd {
	grid-column: span 1 !important;
}

/* ══════════════════════════════════════════════
   FÄLT-KORT (.pewc-item)
   ══════════════════════════════════════════════ */

.pewc-item {
	background: #F5F0E8;
	border-radius: .75rem;
	padding: 1.25rem !important;
	margin: 0 !important;
	list-style: none !important;
	box-sizing: border-box;
}

/* Conditional hide med smooth animation */
.pewc-item.pewc-hidden-field {
	opacity: 0 !important;
	max-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
	transition: opacity 250ms ease, max-height 250ms ease,
	            padding 250ms ease, margin 250ms ease !important;
}

.pewc-item:not(.pewc-hidden-field) {
	opacity: 1;
	max-height: 37.5rem;
	overflow: visible;
	transition: opacity 250ms ease, max-height 250ms ease,
	            padding 250ms ease, margin 250ms ease;
}

.pewc-item-field-wrapper {
	margin: 0 !important;
	padding: 0 !important;
}

/* ══════════════════════════════════════════════
   LABELS (H4)
   ══════════════════════════════════════════════ */

.pewc-field-label {
	font-family: 'Urbanist', sans-serif !important;
	font-size: .875rem !important;
	font-weight: 600 !important;
	color: #001111 !important;
	margin: 0 0 .75rem !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: .25rem !important;
}

.pewc-field-label .required {
	color: #5A5856 !important;
	font-weight: 400 !important;
}

/* ══════════════════════════════════════════════
   RADIO-KNAPPAR (Storleksval, Fast storlek)
   ══════════════════════════════════════════════ */

.pewc-checkbox-group-wrapper {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: .375rem !important;
}

/* Dölj native radio */
.pewc-radio-form-field {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}

.pewc-radio-form-label {
	display: flex !important;
	align-items: center !important;
	gap: .625rem !important;
	width: 100% !important;
	padding: .625rem .875rem !important;
	border-radius: 62.4375rem !important;
	cursor: pointer !important;
	background: transparent !important;
	border: .0938rem solid transparent !important;
	box-sizing: border-box !important;
	transition: background 150ms ease, border-color 150ms ease !important;
	font-family: 'Urbanist', sans-serif !important;
	font-size: .9375rem !important;
	color: #001111 !important;
	user-select: none !important;
}

.pewc-radio-form-label:hover {
	background: rgba(0, 61, 68, 0.06) !important;
}

/* Custom radio-cirkel via ::before */
.pewc-radio-form-label::before {
	content: '' !important;
	flex-shrink: 0 !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	border-radius: 50% !important;
	border: .125rem solid #001111 !important;
	background: transparent !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
	transition: border-color 150ms ease, background 150ms ease,
	            box-shadow 150ms ease !important;
}

/* Vald state – fyll cirkeln och visa vit prick */
.pewc-radio-form-field:checked + .pewc-radio-form-label::before,
.pewc-checkbox-group-wrapper li.checked .pewc-radio-form-label::before {
	background: #003D44 !important;
	border-color: #003D44 !important;
	box-shadow: inset 0 0 0 .25rem #FFFEFC !important;
}

/* Vald state – etikett */
.pewc-radio-form-field:checked + .pewc-radio-form-label,
.pewc-checkbox-group-wrapper li.checked .pewc-radio-form-label {
	border-color: #003D44 !important;
	background: rgba(0, 61, 68, 0.04) !important;
}

/* Pris: push till höger */
.pewc-radio-form-label {
	justify-content: flex-start !important;
}

.pewc-radio-option-text {
	flex: 1 !important;
}

.pewc-separator {
	color: #5A5856 !important;
}

.pewc-option-cost-label {
	margin-left: auto !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}

.pewc-preset-style .pewc-checkbox-form-label input:checked ~ span.pewc-theme-element,
.pewc-preset-style .pewc-radio-form-label input:checked ~ span.pewc-theme-element,
.pewc-preset-style .pewc-item-field-wrapper input:checked ~ span.pewc-theme-element,
.pewc-preset-style .pewc-item-checkbox input:checked ~ span.pewc-theme-element,
.pewc-preset-style .pewc-checkbox-wrapper input:checked ~ span.pewc-theme-element,
.pewc-preset-style .pewc-radio-wrapper input:checked ~ span.pewc-theme-element {
	background: #00646F !important;
}
.pewc-theme-element {
	content: "";
    position: absolute;
    top: auto!important;
    left: 1.0625rem!important;
    height: .875rem!important;
    width: .875rem!important;
	background: none!important;
    cursor: pointer;
}
.pewc-preset-style .pewc-radio-form-label span.pewc-theme-element:after {
	display: none!important;
}


/* ══════════════════════════════════════════════
   NUMBER INPUTS (Höjd, Längd)
   ══════════════════════════════════════════════ */


.pewc-number-field {
	width: 100% !important;
	border-radius: 62.4375rem !important;
	padding: .75rem 1.25rem !important;
	border: .0938rem solid #E5DFD3 !important;
	background: #fff !important;
	font-family: 'Urbanist', sans-serif !important;
	font-size: .9375rem !important;
	color: #001111 !important;
	box-sizing: border-box !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
	outline: none !important;
	transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

.pewc-number-field::-webkit-inner-spin-button,
.pewc-number-field::-webkit-outer-spin-button {
	-webkit-appearance: none !important;
	margin: 0 !important;
}

.pewc-number-field:focus {
	border-color: #003D44 !important;
	box-shadow: 0 0 0 .1875rem rgba(0, 61, 68, 0.15) !important;
}

.pewc-description {
	font-family: 'Urbanist', sans-serif !important;
	font-size: .75rem !important;
	color: #5A5856 !important;
	margin: .5rem 0 0 !important;
	padding: 0 !important;
}

/* Felmeddelande (injiceras av JS) */
.laxen-field-error {
	font-family: 'Urbanist', sans-serif;
	font-size: .75rem;
	color: #DE3131;
	margin: .375rem 0 0;
	display: none;
}

.laxen-field-error.is-visible {
	display: block;
}

/* ══════════════════════════════════════════════
   DROPDOWNS (Tjocklek, Maskstorlek, Kantsöm, Blylina)
   ══════════════════════════════════════════════ */

.pewc-select-wrapper {
	position: relative !important;
	border: none !important;
}

select.pewc-form-field {
	width: 100% !important;
	border-radius: 62.4375rem !important;
	padding: .75rem 3rem .75rem 1.25rem !important;
	border: .0938rem solid #E5DFD3 !important;
	background: #fff !important;
	font-family: 'Urbanist', sans-serif !important;
	font-size: .9375rem !important;
	color: #001111 !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	outline: none !important;
	transition: border-color 150ms ease, box-shadow 150ms ease !important;
	/* Custom chevron via base64 SVG */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23001111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 1rem !important;
}

select.pewc-form-field:focus {
	border-color: #003D44 !important;
	box-shadow: 0 0 0 .1875rem rgba(0, 61, 68, 0.15) !important;
}

/* ══════════════════════════════════════════════
   FÄRG-SWATCHES (image_swatch)
   ══════════════════════════════════════════════ */

/* Dölj inbyggd radio-input */
.pewc-radio-images-wrapper .pewc-radio-form-field {
	display: none !important;
}

/* Dölj placeholder-bilder */
.pewc-radio-image-wrapper img.woocommerce-placeholder,
.pewc-radio-image-wrapper img {
	display: none !important;
}

.pewc-radio-images-wrapper {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	-webkit-justify-content: flex-start!important;
    justify-content: flex-start!important;
}

.pewc-radio-image-wrapper {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	cursor: pointer !important;
	list-style: none !important;
}

/* Färgcirkel */
.pewc-hex {
	border: none !important;
}
.pewc-hex > span {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	border-radius: 50% !important;
	border: 0rem solid #FFFEFC !important;
	box-shadow: 0 0 0 .0938rem rgba(0, 0, 0, 0.18) !important;
	box-sizing: border-box !important;
	transition: transform 150ms ease, box-shadow 150ms ease !important;
}

/* Vit färg: extra synlig border */
.pewc-hex > span[style*="background: #fff"],
.pewc-hex > span[style*="background: #ffffff"],
.pewc-hex > span[style*="background: rgb(255, 255, 255)"],
.pewc-hex > span[style*="background:#fff"],
.pewc-hex > span[style*="background:#ffffff"] {
	box-shadow: 0 0 0 .0938rem #D5D2CF !important;
}

/* Hover */
.pewc-radio-image-wrapper:hover .pewc-hex > span {
	transform: scale(1.08) !important;
}

/* Vald state */
.pewc-radio-image-wrapper.checked .pewc-hex > span {
	border-color: #FFFEFC !important;
	box-shadow: 0 0 0 .1563rem #003D44 !important;
}

/* Färgnamn */
.pewc-radio-image-desc {
	/* font-family: 'Urbanist', sans-serif !important;
	font-size: .75rem !important;
	color: #5A5856 !important;
	text-align: center !important;
	margin-top: .375rem !important;
	line-height: 1.2 !important; */
	display: none!important;
}

/* ══════════════════════════════════════════════
   TOOLTIP-TRIGGER & MODAL
   ══════════════════════════════════════════════ */

.laxen-tooltip__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: #003D44;
	padding: .25rem;
	line-height: 1;
	flex-shrink: 0;
	vertical-align: middle;
}

.laxen-tooltip__trigger:focus-visible {
	outline: .125rem solid #003D44;
	border-radius: .25rem;
}

.laxen-tooltip__trigger svg {
	display: block;
}

/* Wrapper runt varje trigger */
.laxen-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* ── Modal backdrop ── */
.laxen-modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.laxen-modal-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

body.laxen-modal-open {
	overflow: hidden;
}

/* ── Modal-ruta ── */
.laxen-modal {
	position: relative;
	background: #fff;
	border-radius: 1rem;
	padding: 1.5rem;
	max-width: 26rem;
	width: 100%;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.2);
	transform: translateY(.5rem);
	transition: transform 200ms ease;
}

.laxen-modal-backdrop.is-open .laxen-modal {
	transform: translateY(0);
}

/* ── Stäng-knapp ── */
.laxen-modal__close {
	position: absolute;
	top: .75rem;
	right: .75rem;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1.5rem;
	line-height: 1;
	color: #666;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: .25rem;
}

.laxen-modal__close:hover {
	background: #f0f0f0;
	color: #000;
}

.laxen-modal__close:focus-visible {
	outline: .125rem solid #003D44;
}

/* ── Bild ── */
.laxen-modal__img {
	width: 100%;
	max-height: 10rem;
	object-fit: cover;
	border-radius: .5rem;
	margin-bottom: 1rem;
	display: block;
}

.laxen-modal__img[hidden] {
	display: none;
}

/* ── Rubrik ── */
.laxen-modal__title {
	font-family: 'Urbanist', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: #001111;
	margin: 0 0 .75rem;
	padding-right: 2rem;
}

/* ── Brödtext ── */
.laxen-modal__text {
	font-family: 'Urbanist', sans-serif;
	font-size: .875rem;
	color: #444;
	line-height: 1.5;
	margin: 0;
	white-space: pre-line;
}

/* ══════════════════════════════════════════════
   DROPDOWN-FÄLT – ingen kortstil, inline-layout
   (Tjocklek, Maskstorlek, Kantsöm, Blylina)
   Selektorn :has() kräver Chrome 105+/Safari 15.4+/Firefox 121+
   ══════════════════════════════════════════════ */

.pewc-item:has(.pewc-select-wrapper) {
	background: transparent !important;
	padding: .5rem 0 !important;
	border-radius: 0 !important;
}

.pewc-item:has(.pewc-select-wrapper) .pewc-item-field-wrapper {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: .75rem !important;
	flex-wrap: nowrap !important;
}

.pewc-item:has(.pewc-select-wrapper) .pewc-field-label {
	margin-bottom: 0 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	font-size: 1rem !important;
	letter-spacing: 0.03em !important;
}

.pewc-item:has(.pewc-select-wrapper) .pewc-select-wrapper {
	width: auto !important;
	flex-shrink: 0 !important;
}

.pewc-item:has(.pewc-select-wrapper) select.pewc-form-field {
	width: auto !important;
	min-width: 5rem !important;
	padding: .25rem 2.25rem .25rem .75rem !important;
	background-position: right .625rem center !important;
}

/* Fast storlek: kortstil trots select – undantag från inline-regeln ovan */
.pewc-item.fast-storlek {
	background: #F5F0E8 !important;
	padding: 1.25rem !important;
	border-radius: .75rem !important;
}

.pewc-item.fast-storlek .pewc-item-field-wrapper {
	display: block !important;
}

.pewc-item.fast-storlek .pewc-field-label {
	font-size: .875rem !important;
	letter-spacing: normal !important;
	white-space: normal !important;
	margin-bottom: .75rem !important;
}

.pewc-item.fast-storlek .pewc-select-wrapper {
	width: 100% !important;
	background: none!important;
}

.pewc-item.fast-storlek select.pewc-form-field {
	width: 100% !important;
	min-width: unset !important;
	/* padding: .75rem 3rem .75rem 1.25rem !important; */
	background-position: right 1rem center !important;
}

/* ══════════════════════════════════════════════
   FÄRG-FÄLT – ingen kortstil, valt färgnamn visas
   ══════════════════════════════════════════════ */

.pewc-item:has(.pewc-radio-images-wrapper) {
	background: transparent !important;
	padding: .5rem 0 !important;
	border-radius: 0 !important;
}

/* Dynamiskt valt färgnamn (injiceras av JS) */
.laxen-selected-color {
	font-family: 'Urbanist', sans-serif;
	font-size: 1rem;
	font-weight: 400;
	color: #5A5856;
}

/* ══════════════════════════════════════════════
   GRAND TOTAL / TOTALSUMMERING
   ══════════════════════════════════════════════ */

/* Dölj per-product och options-rader */
#pewc-per-product-total,
#pewc-per-product-label,
#pewc-options-total,
#pewc-options-total-label {
	display: none !important;
}

.pewc-total-field-wrapper {
	/* margin-top: .5rem !important;
	padding-top: 1rem !important;
	border-top: .0625rem solid rgba(0, 17, 17, 0.12) !important;
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important; */
	display: none !important;
}

#pewc-grand-total-label {
	font-family: 'Urbanist', sans-serif !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	color: #001111 !important;
}

#pewc-grand-total {
	font-family: 'Doumbar', Georgia, serif !important;
	font-size: 1.875rem !important;
	font-weight: 700 !important;
	color: #003D44 !important;
	line-height: 1 !important;
}

/* ══════════════════════════════════════════════
   RESPONSIVT
   ══════════════════════════════════════════════ */

@media (max-width: 48rem) {
	/* Höjd + Längd stackas vertikalt på mobil */
	.pewc-item.hojd,
	.pewc-item.langd {
		grid-column: 1 / -1 !important;
	}

	select.pewc-form-field {
		font-size: 1rem !important; /* Förhindrar iOS-zoom */
	}

	.pewc-radio-images-wrapper {
		gap: .75rem !important;
	}
}