/* Vikingo WooCommerce – ikonok a pénztár mezőiben.
   Tiszta CSS: mező-azonosítónként SVG ikon a mező bal szélén.

   FONTOS: az ikon NEM az input background-image-e, hanem a mezőt körülvevő
   .woocommerce-input-wrapper ::before pszeudo-eleme. A böngésző automatikus
   kitöltése (Chrome/Safari autofill) ugyanis a saját UA-hátterét ráerőlteti a
   kitöltött inputra, és az !important author-stílust is felülütve eltünteti a
   background-image-et – ezért tűntek el korábban az ikonok autofill után. A
   pszeudo-elem az inputon kívül van, így az autofill nem nyúl hozzá.

   Nem nyúl a HTML-hez, ezért a klasszikus pénztárral és az Elementor Pro
   pénztár-widgettel is működik. Az !important-ok az Elementor kit
   input-paddingját ütik el. A szín visszafogott szürke, hogy a placeholder
   mellett se legyen zajos. */

/* A behúzás az inputon marad, hogy a szöveg ne fusson az ikon alá. */
.woocommerce #billing_email_field input,
.woocommerce #billing_first_name_field input,
.woocommerce #billing_last_name_field input,
.woocommerce #shipping_first_name_field input,
.woocommerce #shipping_last_name_field input,
.woocommerce #billing_company_field input,
.woocommerce #shipping_company_field input,
.woocommerce #billing_tax_number_field input,
.woocommerce #billing_postcode_field input,
.woocommerce #shipping_postcode_field input,
.woocommerce #billing_city_field input,
.woocommerce #shipping_city_field input,
.woocommerce #billing_address_1_field input,
.woocommerce #billing_address_2_field input,
.woocommerce #shipping_address_1_field input,
.woocommerce #shipping_address_2_field input,
.woocommerce #billing_phone_field input,
.woocommerce #account_password_field input,
.woocommerce input#coupon_code,
.woocommerce #order_comments_field textarea {
	padding-left: 2.55em !important;
}

/* A wrapper viszonyítási alap a ::before abszolút pozíciójához. */
.woocommerce #billing_email_field .woocommerce-input-wrapper,
.woocommerce #billing_first_name_field .woocommerce-input-wrapper,
.woocommerce #billing_last_name_field .woocommerce-input-wrapper,
.woocommerce #shipping_first_name_field .woocommerce-input-wrapper,
.woocommerce #shipping_last_name_field .woocommerce-input-wrapper,
.woocommerce #billing_company_field .woocommerce-input-wrapper,
.woocommerce #shipping_company_field .woocommerce-input-wrapper,
.woocommerce #billing_tax_number_field .woocommerce-input-wrapper,
.woocommerce #billing_postcode_field .woocommerce-input-wrapper,
.woocommerce #shipping_postcode_field .woocommerce-input-wrapper,
.woocommerce #billing_city_field .woocommerce-input-wrapper,
.woocommerce #shipping_city_field .woocommerce-input-wrapper,
.woocommerce #billing_address_1_field .woocommerce-input-wrapper,
.woocommerce #billing_address_2_field .woocommerce-input-wrapper,
.woocommerce #shipping_address_1_field .woocommerce-input-wrapper,
.woocommerce #shipping_address_2_field .woocommerce-input-wrapper,
.woocommerce #billing_phone_field .woocommerce-input-wrapper,
.woocommerce #account_password_field .woocommerce-input-wrapper,
.woocommerce #order_comments_field .woocommerce-input-wrapper {
	position: relative;
}

/* Közös ikon-alap: bal szélre igazított, függőlegesen középre. */
.woocommerce #billing_email_field .woocommerce-input-wrapper::before,
.woocommerce #billing_first_name_field .woocommerce-input-wrapper::before,
.woocommerce #billing_last_name_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_first_name_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_last_name_field .woocommerce-input-wrapper::before,
.woocommerce #billing_company_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_company_field .woocommerce-input-wrapper::before,
.woocommerce #billing_tax_number_field .woocommerce-input-wrapper::before,
.woocommerce #billing_postcode_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_postcode_field .woocommerce-input-wrapper::before,
.woocommerce #billing_city_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_city_field .woocommerce-input-wrapper::before,
.woocommerce #billing_address_1_field .woocommerce-input-wrapper::before,
.woocommerce #billing_address_2_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_address_1_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_address_2_field .woocommerce-input-wrapper::before,
.woocommerce #billing_phone_field .woocommerce-input-wrapper::before,
.woocommerce #account_password_field .woocommerce-input-wrapper::before,
.woocommerce #order_comments_field .woocommerce-input-wrapper::before {
	content: "";
	position: absolute;
	left: 0.85em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.1em;
	height: 1.1em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1.1em 1.1em;
	pointer-events: none;
}

/* Többsoros mezőnél az ikon az első sorhoz áll, nem középre. */
.woocommerce #order_comments_field .woocommerce-input-wrapper::before {
	top: 0.95em;
	transform: none;
}

.woocommerce #billing_email_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/%3E%3Cpolyline points='22,6 12,13 2,6'/%3E%3C/svg%3E");
}

.woocommerce #billing_first_name_field .woocommerce-input-wrapper::before,
.woocommerce #billing_last_name_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_first_name_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_last_name_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

.woocommerce #billing_company_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_company_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
}

.woocommerce #billing_tax_number_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='4' y1='9' x2='20' y2='9'/%3E%3Cline x1='4' y1='15' x2='20' y2='15'/%3E%3Cline x1='10' y1='3' x2='8' y2='21'/%3E%3Cline x1='16' y1='3' x2='14' y2='21'/%3E%3C/svg%3E");
}

.woocommerce #billing_postcode_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_postcode_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.woocommerce #billing_city_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_city_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18'/%3E%3Cpath d='M2 22h20'/%3E%3Cpath d='M10 6h.01M14 6h.01M10 10h.01M14 10h.01M10 14h.01M14 14h.01M10 18h.01M14 18h.01'/%3E%3C/svg%3E");
}

.woocommerce #billing_address_1_field .woocommerce-input-wrapper::before,
.woocommerce #billing_address_2_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_address_1_field .woocommerce-input-wrapper::before,
.woocommerce #shipping_address_2_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E");
}

.woocommerce #billing_phone_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

.woocommerce #account_password_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

.woocommerce #order_comments_field .woocommerce-input-wrapper::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* A kuponmező nincs .woocommerce-input-wrapper-ben, és nem érinti az autofill,
   ezért marad a háttérikonos megoldás. */
.woocommerce input#coupon_code {
	background-repeat: no-repeat !important;
	background-position: 0.85em center !important;
	background-size: 1.1em 1.1em !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.83z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E") !important;
}

/* Ország lenyíló: select2-nél a lenyíló doboza kapja az ikont, natív selectnél
   maga a mező. A select/select2 nem autofill-célpont, ezért itt marad a
   háttérikon. Az ikon nélküli lenyíló szövege balra lógott a többi, ikonos
   mezőhöz képest, ezért a behúzás is ugyanaz a 2.55em, mint az inputoknál. */
.woocommerce #billing_country_field .select2-selection--single,
.woocommerce #shipping_country_field .select2-selection--single,
.woocommerce select#billing_country,
.woocommerce select#shipping_country {
	background-repeat: no-repeat !important;
	background-position: 0.85em center !important;
	background-size: 1.1em 1.1em !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='2' y1='12' x2='22' y2='12'/%3E%3Cpath d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/%3E%3C/svg%3E") !important;
}

.woocommerce #billing_country_field .select2-selection--single .select2-selection__rendered,
.woocommerce #shipping_country_field .select2-selection--single .select2-selection__rendered,
.woocommerce select#billing_country,
.woocommerce select#shipping_country {
	padding-left: 2.55em !important;
}