/* Vikingo WooCommerce frontend stílusok. */

/* Plusz/mínusz mennyiségi gombok.
   A keret a konténeren van: ha a téma is keretezi a .quantity-t, a kettő
   összeolvad, nem duplázódik. A gombok flat stílusúak, az input kitölti
   a rendelkezésre álló helyet. A témák input-keretét és háttérét erős
   szelektorral és !important-tal kapcsoljuk ki, mert oda a legtöbb téma
   nagy specificitású szabályt céloz. */
.quantity:has(.vk-qty-button) {
	display: inline-flex;
	align-items: stretch;
	/* A témák gyakran fix szélességet adnak a .quantity-nek; az overflow:hidden
	   miatt ilyenkor a plusz gomb levágódna, ezért a szélességet a tartalomhoz
	   igazítjuk. */
	width: auto !important;
	min-width: max-content !important;
	max-width: none !important;
	height: 2.6em;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quantity:has(.vk-qty-button):focus-within {
	border-color: rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* A gomb-állapotok !important-tal, mert a témák a globális button:hover /
   button:focus szabályaikkal (gyakran élénk háttérszínnel) átszínezik. */
.quantity button.vk-qty-button {
	flex: 0 0 auto;
	width: 2.4em !important;
	min-width: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: rgba(0, 0, 0, 0.55) !important;
	box-shadow: none !important;
	font-size: 1em !important;
	font-weight: 400;
	line-height: 1 !important;
	text-transform: none;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.quantity button.vk-qty-button:hover,
.quantity button.vk-qty-button:focus {
	background: rgba(0, 0, 0, 0.05) !important;
	color: rgba(0, 0, 0, 0.85) !important;
	outline: none;
}

.quantity button.vk-qty-button:active {
	background: rgba(0, 0, 0, 0.1) !important;
	color: rgba(0, 0, 0, 0.85) !important;
}

.quantity button.vk-qty-button:focus-visible {
	outline: 2px solid rgba(0, 0, 0, 0.4);
	outline-offset: -2px;
}

.woocommerce .quantity:has(.vk-qty-button) input.qty,
.quantity:has(.vk-qty-button) input.qty {
	flex: 1 1 auto;
	width: 2.8em;
	min-width: 2.4em;
	min-height: 0;
	/* A témák fix magasságot adnak az inputnak, ezért nem nyújtjuk, hanem
	   függőlegesen középre igazítjuk, így a szám mindig középen ül. */
	height: auto;
	align-self: center;
	margin: 0;
	padding: 0 0.2em !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none !important;
	text-align: center !important;
	font-weight: 600;
	-moz-appearance: textfield;
	appearance: textfield;
}

.woocommerce .quantity:has(.vk-qty-button) input.qty:focus,
.quantity:has(.vk-qty-button) input.qty:focus {
	outline: none;
	box-shadow: none !important;
}

/* A böngésző saját fel-le nyilai feleslegesek a gombjaink mellett. */
.quantity:has(.vk-qty-button) input.qty::-webkit-outer-spin-button,
.quantity:has(.vk-qty-button) input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Település-választó az irányítószám alapján */
.vk-city-picker {
	margin-top: 6px;
	padding: 8px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.vk-city-picker__label {
	display: block;
	margin-bottom: 4px;
	font-size: 0.85em;
	opacity: 0.75;
}

.vk-city-picker__option {
	display: inline-block;
	margin: 2px 4px 2px 0;
	padding: 4px 10px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background: #f7f7f7;
	cursor: pointer;
	font-size: 0.95em;
}

.vk-city-picker__option:hover {
	background: #ececec;
}

/* Ingyenes szállítás értesítés elrendezése: szöveg és gomb egy sorban,
   folyamatjelző alattuk teljes szélességben. A flex kikapcsolja a témák
   float-alapú gombpozícionálását is. */
.vk-fsn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	width: 100%;
}

.vk-fsn__text {
	flex: 1 1 14em;
}

.woocommerce-info a.button.vk-fsn__button,
a.button.vk-fsn__button {
	flex: 0 0 auto;
	float: none;
	margin: 0;
	white-space: nowrap;
}

/* Kupon sor a kosárban: a Beváltás gomb kövesse a mező magasságát – az
   Elementor kit a mezőknek 12px paddingot ad, amitől a mező magasabb lenne
   a gombnál. A flex-es kupon-sorban a gomb burkolója amúgy is nyúlik, a
   gomb a 100%-kal ezt tölti ki. */
.woocommerce-cart .coupon .button {
	height: 100%;
}

/* Ingyenes szállítás folyamatjelző sáv */
.vk-fsn-progress {
	display: block;
	flex: 1 1 100%;
	height: 8px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.12);
	overflow: hidden;
}

/* Ha az értesítés a konténer nélkül, régi szűrővel épül, maradjon meg a térköz. */
.vk-fsn-progress:not(.vk-fsn .vk-fsn-progress) {
	margin-top: 8px;
}

.vk-fsn-progress__fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	/* A szín a webhelyből jön: a beállított hangsúlyszín, ennek híján az
	   Elementor globális elsődleges szín, majd a mért linkszín (thankyou.js),
	   végső tartalék egy semleges sötét. */
	background: var(--vk-accent, var(--e-global-color-primary, var(--vk-typ-site-accent, #21242a)));
	transition: width 0.4s ease;
}

/* Jelölőnégyzetek és választógombok: nagyobb, egységes vezérlők a webhely
   színével. A natív input marad (felolvasó- és billentyűzet-barát), csak a
   kirajzolást vesszük át. A szín: Elementor globális elsődleges szín, ennek
   híján a mért linkszín, végül semleges sötét. */
.woocommerce input[type='checkbox'],
.woocommerce input[type='radio'],
.woocommerce-page input[type='checkbox'],
.woocommerce-page input[type='radio'] {
	--vk-ctl-accent: var(--vk-accent, var(--e-global-color-primary, var(--vk-typ-site-accent, #21242a)));
	font-size: inherit !important;
	appearance: none;
	-webkit-appearance: none;
	/* Az !important-ok a témák és az Elementor Pro szabályait ütik. A
	   display kritikus: appearance:none + display:inline mellett a Chrome
	   eldobja a width/height-et, és pár pixeles csík marad a négyzetből. */
	display: inline-block !important;
	/* rem-ben, hogy a vezérlő mindenhol ugyanakkora legyen, akkor is, ha a
	   környezete (pl. a fizetési doboz) más betűméretet használ. */
	width: 1.2rem !important;
	height: 1.2rem !important;
	min-width: 1.2rem !important;
	margin: 0 0.5em 0 0;
	padding: 0 !important;
	/* Az !important az Elementor kit input-szabályát (1px keret, 6px rádiusz)
	   üti el, ami erősebb szelektorú a miénknél. */
	border: 2px solid rgba(0, 0, 0, 0.45) !important;
	background: #fff center / contain no-repeat;
	cursor: pointer;
	vertical-align: middle;
	transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce input[type='radio'],
.woocommerce-page input[type='radio'] {
	border-radius: 50% !important;
}

.woocommerce input[type='checkbox'],
.woocommerce-page input[type='checkbox'] {
	border-radius: 4px !important;
}

.woocommerce input[type='checkbox']:hover,
.woocommerce input[type='radio']:hover,
.woocommerce-page input[type='checkbox']:hover,
.woocommerce-page input[type='radio']:hover {
	border-color: rgba(0, 0, 0, 0.75) !important;
}

/* Fókusz-gyűrű billentyűzetes navigációhoz (gyengénlátóknak is jól látható). */
.woocommerce input[type='checkbox']:focus-visible,
.woocommerce input[type='radio']:focus-visible,
.woocommerce-page input[type='checkbox']:focus-visible,
.woocommerce-page input[type='radio']:focus-visible {
	outline: 3px solid var(--vk-ctl-accent);
	outline-offset: 2px;
}

.woocommerce input[type='radio']:checked,
.woocommerce-page input[type='radio']:checked {
	border-color: var(--vk-ctl-accent) !important;
	/* Belső pötty: a sugarak aránya adja a méretet, minden felbontáson éles. */
	background-image: radial-gradient(circle, var(--vk-ctl-accent) 0 42%, transparent 48%);
}

.woocommerce input[type='checkbox']:checked,
.woocommerce-page input[type='checkbox']:checked {
	border-color: var(--vk-ctl-accent) !important;
	background-color: var(--vk-ctl-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7 10 17l-6-5'/%3E%3C/svg%3E");
	background-size: 78%;
}

/* Minden jelölőnégyzetes címke igazítása (feltétel-elfogadás, „Másik címre
   kéred a szállítást?", fiók-létrehozás, „Emlékezz rám"): a négyzet a bal
   szélen, az első szövegsor közepére igazítva, a szöveg – a kötelező-csillaggal
   együtt – folyamatosan folyik mellette, tördelésnél sem csúszik a négyzet
   alá. Flex helyett abszolút pozíció: flexnél a Woo által a címkébe tett
   csillag (abbr.required) külön flex-elemmé válna, és a jobb szélre szakadna. */
.elementor-widget-woocommerce-checkout .woocommerce-form__label-for-checkbox,
.woocommerce .woocommerce-form__label-for-checkbox,
.woocommerce-page .woocommerce-form__label-for-checkbox {
	position: relative;
	display: block !important;
	/* Négyzet (1.2rem, border-box) + 0.5em köz – így a szöveg bal éle a
	   fizetési módok címkéivel is egybeesik. */
	padding-left: calc(1.2rem + 0.5em);
	/* A WooCommerce törzs-CSS (.woocommerce form .form-row label) 2-es
	   sormagasságot ad nagyobb specificitással – az ütné el a négyzetet a
	   szöveg közepétől. */
	line-height: 1.5 !important;
}

.elementor-widget-woocommerce-checkout .woocommerce-form__label-for-checkbox input[type='checkbox'],
.woocommerce .woocommerce-form__label-for-checkbox input[type='checkbox'],
.woocommerce-page .woocommerce-form__label-for-checkbox input[type='checkbox'] {
	position: absolute;
	left: 0;
	/* A négyzet az első szövegsor közepére kerül: (1.5em sormagasság − 1.2rem
	   négyzet, border-box) / 2, plusz 1px optikai korrekció a tipikus
	   betűtípusok kissé lejjebb ülő szövegtörzséhez. */
	top: calc((1.5em - 1.2rem) / 2 + 1px);
	margin: 0 !important;
}

/* A feltétel-elfogadó mondat kicsit kisebb betűvel: apróbetűs jogi szöveg,
   és így tipikus oszlopszélességnél egy sorban kifér. Csak a szövegre és a
   csillagra vonatkozik – a négyzet a címke betűméretéből skálázódik, így
   ugyanakkora marad, mint a fizetési módok választógombjai. */
.woocommerce .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox .woocommerce-terms-and-conditions-checkbox-text,
.woocommerce .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox abbr.required {
	font-size: 0.95em;
}

/* Érvénytelen állapot (pl. a feltétel-négyzet pipája hiányzik): a WooCommerce
   rikító, szögletes piros outline-ja helyett a vezérlő kerete vált hibaszínre,
   halvány ragyogással – ugyanaz a formanyelv, mint a pipált állapotnál. */
.woocommerce form .form-row.woocommerce-invalid input[type='checkbox'],
.woocommerce form .form-row.woocommerce-invalid input[type='radio'],
.woocommerce .woocommerce-terms-and-conditions-wrapper .woocommerce-invalid #terms {
	outline: 0 !important;
	outline-offset: 0 !important;
	/* Az !important nélkül az alap-keret !important-os színe nyomná el. */
	border-color: #b32d2e !important;
	box-shadow: 0 0 0 3px rgba(179, 45, 46, 0.18);
}

/* Billentyűzetes fókusznál az érvénytelen vezérlőn is látszódjon a
   fókusz-gyűrű (a fenti outline: 0 e nélkül elnyomná). */
.woocommerce form .form-row.woocommerce-invalid input[type='checkbox']:focus-visible,
.woocommerce form .form-row.woocommerce-invalid input[type='radio']:focus-visible,
.woocommerce .woocommerce-terms-and-conditions-wrapper .woocommerce-invalid #terms:focus-visible {
	outline: 3px solid var(--vk-ctl-accent) !important;
	outline-offset: 2px !important;
}

/* Fizetési módok: a választógomb és a cím egy vonalban, függőlegesen
   középre igazítva, a feltétel-sorral közös bal élen. */
.woocommerce ul.wc_payment_methods,
.elementor-widget-woocommerce-checkout ul.wc_payment_methods {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* A #payment-es szelektor-változatok a WooCommerce törzs-CSS id-specificitású
   (#payment ul.payment_methods li { margin: 0 }) szabályait ütik el. */
.woocommerce ul.wc_payment_methods li.wc_payment_method,
.woocommerce #payment ul.payment_methods li.wc_payment_method {
	/* Flex: a gomb és a címke közti HTML-szóköz nem számít bele a közbe, így
	   a címke bal éle pontosan a feltétel-sor szövegével esik egybe. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Kényelmes függőleges ritmus a fizetési módok között – szorosan egymásra
	   ültetve nehéz eltalálni és vizuálisan is zsúfolt. */
	margin: 0 0 0.85em;
	padding: 0;
	line-height: 1.5;
}

.woocommerce ul.wc_payment_methods li.wc_payment_method:last-child,
.woocommerce #payment ul.payment_methods li.wc_payment_method:last-child {
	margin-bottom: 0;
}

/* A kiválasztott mód leírás-doboza a flex-sorban saját, teljes szélességű
   sort kap, levegővel a saját címkéje és a következő fizetési mód felé is. */
.woocommerce ul.wc_payment_methods li.wc_payment_method div.payment_box,
.woocommerce #payment ul.payment_methods li.wc_payment_method div.payment_box {
	flex-basis: 100%;
	margin: 0.7em 0 0.2em;
}

/* A #payment-es szelektor a WooCommerce törzs-CSS 1em-es margóját üti el –
   a köz így egyezik a feltétel-sor négyzete és szövege közti 0.5em-mel. */
.woocommerce ul.wc_payment_methods li.wc_payment_method > input[type='radio'],
.woocommerce #payment ul.payment_methods li.wc_payment_method > input[type='radio'] {
	flex: 0 0 auto;
	margin: 0 0.5em 0 0;
}

.woocommerce ul.wc_payment_methods li.wc_payment_method > label {
	flex: 1;
	margin: 0;
	cursor: pointer;
}

/* A „Másik címre kéred a szállítást?" sor: az Elementor pénztár-widget csak
   felső margót ad neki (13px), az alsó a sablonon múlik, ezért a fölötte és
   alatta lévő köz eltér. A szekciók közti 24px-es ritmust kapja: fölötte a
   számlázási kártya alsó margója adja ugyanezt. */
.elementor-widget-woocommerce-checkout-page .woocommerce h3#ship-to-different-address,
.woocommerce-checkout h3#ship-to-different-address {
	margin: 0 0 24px;
}

/* Rendelés- és kosár-összesítő: a szállítási mód címkéjét az Elementor
   pénztár- és kosár-widget a fizetési módok választógomb-színével (szürke)
   írja ki, pedig itt a táblázat tartalmához tartozik – a szekciócím színét
   kapja helyette. */
.elementor-widget-woocommerce-checkout-page .woocommerce table.woocommerce-checkout-review-order-table #shipping_method li label,
.woocommerce table.woocommerce-checkout-review-order-table #shipping_method li label,
.elementor-widget-woocommerce-cart .woocommerce .cart_totals #shipping_method li label,
.woocommerce .cart_totals #shipping_method li label {
	color: var(--sections-title-color, inherit);
}

/* Az adótartalom-megjegyzés a végösszeg mögött zsúfolt és zavaró – saját,
   apróbetűs, halvány sorba kerül a végösszeg alá. */
.woocommerce .order-total small.includes_tax {
	display: block;
	margin-top: 0.3em;
	font-size: 0.82em;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.55);
}

/* A fizetési mód leírás-doboza és a feltétel-sor közti ritmus, plusz
   nagyobb levegő a Megrendelés gomb előtt. */
.woocommerce .woocommerce-terms-and-conditions-wrapper {
	margin: 0.9em 0 0;
}

/* A WooCommerce törzs-CSS a form-row-knak 3px paddingot ad – a feltétel-sor
   négyzetét ez tolná el a fizetési módok választógombjainak bal élétől. */
.woocommerce .woocommerce-terms-and-conditions-wrapper .form-row {
	padding-left: 0;
	padding-right: 0;
}

.woocommerce #payment .form-row.place-order,
.woocommerce .form-row.place-order {
	margin-top: 1.1em;
}

/* A feltétel-sor a WooCommerce-ben ugyanebben a .place-order sorban ül, ezért
   a gomb előtti levegőt magán a gombon kell adni, nem a soron. */
.woocommerce button#place_order {
	margin-top: 1.3em;
}

/* Tárcás fizetésnél (Apple Pay, Google Pay) a fizetési átjáró kiüresíti a
   Megrendelés gombot, és a saját gombját teszi a helyére ugyanebbe a sorba –
   így a gombon adott levegő elveszne. Miért rem: a tárcás gomb saját
   betűmérete kisebb, em-ben szűkebb rés jönne ki, mint a Megrendelés gombnál. */
.woocommerce .form-row.place-order > div[class*='checkout-button'] {
	margin-top: 1.3rem;
}

/* Jelszó-erősség jelző: a WooCommerce rikító, teli hátterű sávja helyett
   vékony, négyfokozatú csík a mező alatt, visszafogott címkével. */
.woocommerce-password-strength {
	position: relative;
	margin: 0.6em 0 0.2em;
	padding: 14px 0 0 !important;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
	font-size: 0.85em;
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce-password-strength::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.1);
}

.woocommerce-password-strength::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 6px;
	border-radius: 3px;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.woocommerce-password-strength.short { color: #a8332a; }
.woocommerce-password-strength.short::after { width: 25%; background: #cd534a; }

.woocommerce-password-strength.bad { color: #8a5f0a; }
.woocommerce-password-strength.bad::after { width: 50%; background: #e0a03d; }

.woocommerce-password-strength.good { color: #56760a; }
.woocommerce-password-strength.good::after { width: 75%; background: #9bc153; }

.woocommerce-password-strength.strong { color: #1e6b2d; }
.woocommerce-password-strength.strong::after { width: 100%; background: #4caf62; }

.woocommerce-password-hint {
	display: block;
	margin-top: 0.4em;
	font-size: 0.82em;
	font-style: normal;
	line-height: 1.5;
	color: rgba(0, 0, 0, 0.55);
}

/* E-mail elgépelés-javaslat a pénztárban */
.vk-email-hint {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	padding: 8px 10px;
	border: 1px solid #e0c56e;
	border-radius: 4px;
	background: #fff8e1;
	font-size: 0.9em;
	line-height: 1.4;
}

.vk-email-hint__apply {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	cursor: pointer;
}

.vk-email-hint__close {
	margin-left: auto;
	padding: 0 4px;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.2em;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
}

.vk-email-hint__close:hover {
	opacity: 1;
}

/* Ország/település lenyíló (SelectWoo/Select2) rendberakása.
   A lenyíló panel a body alá kerül, ezért nem szűkíthető .woocommerce alá;
   a --default témaosztályt célozzuk, amit a WooCommerce használ. */
/* Az Elementor Pro kosár/pénztár widget saját, később töltődő szabályait is
   felül kell írni, ezért szerepelnek a widget-prefixes változatok. */
/* Miért flex és nulla függőleges padding: az Elementor kit és a select2 saját
   paddingja összeadódott, a lenyíló magasabb lett a szomszédos inputoknál.
   A magasságot egyedül a min-height adja, a szöveg flex-szel középre kerül. */
.elementor-widget-woocommerce-cart .select2-container--default .select2-selection.select2-selection--single,
.elementor-widget-woocommerce-checkout .select2-container--default .select2-selection.select2-selection--single,
.woocommerce .select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 2.8em;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	background-color: #fff;
}

.elementor-widget-woocommerce-cart .select2-container--default .select2-selection.select2-selection--single .select2-selection__rendered,
.elementor-widget-woocommerce-checkout .select2-container--default .select2-selection.select2-selection--single .select2-selection__rendered,
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
	flex: 1 1 auto;
	min-width: 0;
	line-height: 1.5;
	padding-top: 0;
	padding-bottom: 0;
	color: inherit;
	background: transparent;
}

.elementor-widget-woocommerce-cart .select2-container--default .select2-selection.select2-selection--single .select2-selection__arrow,
.elementor-widget-woocommerce-checkout .select2-container--default .select2-selection.select2-selection--single .select2-selection__arrow,
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	top: 0;
	right: 6px;
}

.elementor-widget-woocommerce-cart .select2-container--default.select2-container--open .select2-selection.select2-selection--single,
.elementor-widget-woocommerce-checkout .select2-container--default.select2-container--open .select2-selection.select2-selection--single,
.woocommerce .select2-container--default.select2-container--open .select2-selection--single,
.woocommerce .select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
	border-color: rgba(0, 0, 0, 0.4);
}

.select2-container--default .select2-dropdown {
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
	overflow: hidden;
	z-index: 100000;
}

.select2-container--default .select2-dropdown--below {
	margin-top: 4px;
}

.select2-container--default .select2-dropdown--above {
	margin-top: -4px;
}

.select2-container--default .select2-search--dropdown {
	padding: 8px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	padding: 7px 10px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 6px;
	background: #fff;
	outline: none;
	box-shadow: none;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.select2-container--default .select2-results__options {
	padding: 4px;
	max-height: 16em;
}

.select2-container--default .select2-results__option {
	padding: 8px 10px;
	border-radius: 6px;
	line-height: 1.4;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable,
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: rgba(0, 0, 0, 0.06);
	color: inherit;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected='true'] {
	background: rgba(0, 0, 0, 0.1);
	color: inherit;
	font-weight: 600;
}