/* =========================================================================
   PEWC — personaliseerimisväljad tootelehel
   =========================================================================

   NB: siin muudetakse ainult VÄLJANÄGEMIST. Plugina templated jäävad
   puutumata, funktsionaalsus ja väljade loogika ei muutu. Nii ei teki
   plugina uuendustel hooldusvõlga.

   Klassid tulevad Product Extras for WooCommerce plugina enda markupist.
   ========================================================================= */

.pewc-product-extra-groups-wrap {
	margin: var(--wp--preset--spacing--40) 0;
}


/* -------------------------------------------------------------------------
   Väljagrupp — kaardina, mitte lahtise vormirullina
   ---------------------------------------------------------------------- */

.pewc-group-wrap {
	background: var(--wp--preset--color--base-soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--30);
}

.pewc-group-heading-wrapper {
	margin-bottom: var(--wp--preset--spacing--30);
}

.pewc-group-heading {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

.pewc-product-extra-groups {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.pewc-item { margin: 0; }


/* -------------------------------------------------------------------------
   Väljasilt
   ---------------------------------------------------------------------- */

.pewc-field-label {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9375rem;
	font-weight: 600;
	margin: 0 0 0.4rem;
	color: var(--wp--preset--color--contrast);
}

.pewc-field-label .required {
	color: var(--wp--preset--color--primary);
	font-weight: 400;
}

.pewc-description {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-soft);
	margin: 0.25rem 0 0.5rem;
	line-height: 1.5;
}

.pewc-field-price,
.pewc-checkbox-price {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-soft);
	font-weight: 400;
}


/* -------------------------------------------------------------------------
   Sisestusväljad
   ---------------------------------------------------------------------- */

.pewc-form-field,
.pewc-item input[type="text"],
.pewc-item input[type="number"],
.pewc-item input[type="email"],
.pewc-item textarea,
.pewc-item select {
	width: 100%;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.7rem 0.8rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.pewc-item textarea { min-height: 6.5rem; resize: vertical; }

.pewc-form-field:focus,
.pewc-item input:focus,
.pewc-item textarea:focus,
.pewc-item select:focus {
	outline: 0;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgb(67 132 150 / 15%);
}

.pewc-form-field::placeholder { color: var(--wp--preset--color--contrast-soft); opacity: 0.7; }


/* -------------------------------------------------------------------------
   Raadionupud ja märkeruudud — tekstivalikud
   ---------------------------------------------------------------------- */

.pewc-radio-wrapper,
.pewc-checkbox-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.pewc-radio-form-label,
.pewc-checkbox-form-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.55rem 0.9rem;
	cursor: pointer;
	font-size: 0.9375rem;
	transition: border-color 160ms ease, background 160ms ease;
}

.pewc-radio-form-label:hover,
.pewc-checkbox-form-label:hover {
	border-color: var(--wp--preset--color--primary);
}

.pewc-radio-form-field:checked + .pewc-radio-form-label,
.pewc-radio-form-label:has(input:checked),
.pewc-checkbox-form-label:has(input:checked) {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--secondary);
}


/* -------------------------------------------------------------------------
   Pildivalikud — värvid, materjalid, kirjastiilid
   ---------------------------------------------------------------------- */

/*
 * Pildivalikute PAIGUTUS jääb PEWC enda hooleks — plugin arvestab siin
 * grupi veergude seadega (`pewc-columns-N`) ja teeb seda õigesti.
 * Meie muudame ainult seda, kuidas üksik valik välja näeb.
 */

.pewc-radio-image-wrapper,
.pewc-checkbox-image-wrapper {
	position: relative;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0.4rem;
	background: var(--wp--preset--color--base);
	cursor: pointer;
	transition: border-color 160ms ease, transform 160ms ease;
}

.pewc-radio-image-wrapper:hover,
.pewc-checkbox-image-wrapper:hover {
	border-color: var(--wp--preset--color--secondary-deep);
	transform: translateY(-1px);
}

/* Silt on kogu kaardi klikitav pind */
.pewc-radio-image-wrapper > label,
.pewc-checkbox-image-wrapper > label {
	display: block;
	width: 100%;
	margin: 0;
	cursor: pointer;
}

.pewc-radio-image-wrapper img,
.pewc-checkbox-image-wrapper img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 4px;
}

.pewc-radio-image-wrapper:has(input:checked),
.pewc-checkbox-image-wrapper:has(input:checked) {
	border-color: var(--wp--preset--color--primary);
}

.pewc-radio-image-desc,
.pewc-radio-option-text {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	line-height: 1.35;
	text-align: center;
	color: var(--wp--preset--color--contrast-soft);
}

.pewc-radio-image-wrapper:has(input:checked) .pewc-radio-image-desc,
.pewc-radio-image-wrapper:has(input:checked) .pewc-radio-option-text {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
}

/* Tekstipõhine swatch (nt kirjastiili näidis) */
.pewc-text-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	padding: 0.5rem 0.75rem;
	border: 2px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
}

/* Värvinäidis */
.pewc-hex {
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	border: 1px solid rgb(0 0 0 / 12%);
}


/* -------------------------------------------------------------------------
   Vihjenupp
   ---------------------------------------------------------------------- */

.pewc-tooltip-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15rem;
	height: 1.15rem;
	margin-left: 0.35rem;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
	font-size: 0.75rem;
	line-height: 1;
	cursor: pointer;
	vertical-align: middle;
}


/* -------------------------------------------------------------------------
   Sammud, tabid, akordion — PEWC enda paigutusrežiimid
   ---------------------------------------------------------------------- */

.pewc-tabs-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-bottom: var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.pewc-tab {
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	background: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.pewc-tab.active,
.pewc-tab.pewc-tab-active {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.pewc-step-buttons {
	display: flex;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--30);
}

.pewc-next-step-button,
.pewc-prev-step-button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 4px;
	padding: 0.7em 1.4em;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	cursor: pointer;
}

.pewc-prev-step-button {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--contrast);
}


/* -------------------------------------------------------------------------
   Hinna kokkuvõte
   ---------------------------------------------------------------------- */

.pewc-total-field,
.pewc-grand-total {
	background: var(--wp--preset--color--secondary);
	border-radius: 6px;
	padding: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.pewc-grand-total .pewc-main-price,
.pewc-grand-total .amount {
	font-size: 1.25rem;
	color: var(--wp--preset--color--contrast);
}


/* -------------------------------------------------------------------------
   Peidetud väljad — tingimuslik loogika
   ---------------------------------------------------------------------- */

.pewc-hidden-field { display: none; }


/* =========================================================================
   Ülekirjutused
   =========================================================================

   PEWC väljastab osa stiile kahest kohast, mis tavalist kaskaadi võidavad:

   1. Inline <style> plokk lehe sees, mis genereeritakse plugina admini
      kujundusseadetest (pealkirja suurus, swatch'ide äärise värv jne).
      See asub dokumendis meie failist hiljem.
   2. `style.css` reeglid suurema spetsiifilisusega, nt
      `.pewc-radio-images-wrapper:not(.pewc-component-wrapper)`.

   Võte: klassinime kordamine (`.x.x`). See tõstab spetsiifilisust ilma
   struktuuri kohta eeldusi tegemata. `.rz-product` ankrut siin kasutada ei
   saa, sest `.pewc-preset-style` asub DOM-is sellest kõrgemal.

   TAGAJÄRG: nende omaduste puhul ei mõju enam PEWC admini kujundusseaded —
   allikas on see fail. Kui tahad mõnda neist plugina alt juhtida, kustuta
   vastav reegel siit.
   ========================================================================= */

.rz-product .pewc-group-heading-wrapper .pewc-group-heading {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

/* Swatch'ide ääris — PEWC inline: `.pewc-preset-style .pewc-radio-image-wrapper` */
.pewc-radio-image-wrapper.pewc-radio-image-wrapper.pewc-radio-image-wrapper,
.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper {
	border-color: var(--wp--preset--color--border);
}

.pewc-radio-image-wrapper.pewc-radio-image-wrapper.pewc-radio-image-wrapper:hover,
.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper:hover {
	border-color: var(--wp--preset--color--secondary-deep);
}

.pewc-radio-image-wrapper.pewc-radio-image-wrapper.pewc-radio-image-wrapper:has(input:checked),
.pewc-radio-image-wrapper.pewc-radio-image-wrapper.pewc-radio-image-wrapper.checked,
.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper:has(input:checked),
.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.pewc-checkbox-image-wrapper.checked {
	border-color: var(--wp--preset--color--primary);
}

/* Sisestusväljad — PEWC inline: `.pewc-style-simple .pewc-item input[type="text"]` */
.pewc-item input.pewc-form-field.pewc-form-field,
.pewc-item textarea.pewc-form-field.pewc-form-field,
.pewc-item select.pewc-form-field.pewc-form-field {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	padding: 0.7rem 0.8rem;
}

/* Teksti-raadionupud ja märkeruudud */
.pewc-radio-form-label.pewc-radio-form-label.pewc-radio-form-label,
.pewc-checkbox-form-label.pewc-checkbox-form-label.pewc-checkbox-form-label {
	border-color: var(--wp--preset--color--border);
	border-radius: 4px;
}

.pewc-radio-form-label.pewc-radio-form-label.pewc-radio-form-label:hover,
.pewc-checkbox-form-label.pewc-checkbox-form-label.pewc-checkbox-form-label:hover {
	border-color: var(--wp--preset--color--primary);
}

.pewc-item input.pewc-form-field.pewc-form-field:focus,
.pewc-item textarea.pewc-form-field.pewc-form-field:focus,
.pewc-item select.pewc-form-field.pewc-form-field:focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgb(67 132 150 / 15%);
}



/* -------------------------------------------------------------------------
   Mobiil
   ---------------------------------------------------------------------- */

@media (max-width: 600px) {

	.pewc-group-wrap { padding: var(--wp--preset--spacing--30); }

	/* Sõrmesõbralik puutepind */
	.pewc-radio-form-label,
	.pewc-checkbox-form-label { padding: 0.7rem 1rem; }
}