/* Registration - the form is a box with the individual / legal entity tabs as its header (Registration.index.js).
   Loaded by registration/index.blade.php and profile_data/index.blade.php (same type tabs / fields and phone country
   select, ProfileData.index.js) */

/* postone-responsive-fix.css sets ".container { max-width: 100% !important }" below 768px for every page - on this page
   it squeezes the form while there's free space on the sides. Undone for this page only: two classes beat the global
   rule's specificity, both are !important */
@media (max-width: 767px) {
	.registration-page.container {
		width: 100%;
		max-width: none !important;
	}
}
.registration-box {
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 20px;
}
.registration-type-tabs {
	display: flex;
	border-bottom: 1px solid #ccc;
}
/* Before a choice both tabs are black - once a type is chosen (.has-type on the box) the chosen one stays black on yellow,
   the other one turns grey */
.registration-type-tab {
	flex: 1;
	margin: 0;
	padding: 12px;
	text-align: center;
	font-weight: bold;
	background: #f5f5f5;
	color: black;
	cursor: pointer;
}
.registration-type-tab + .registration-type-tab {
	border-left: 1px solid #ccc;
}
.registration-box.has-type .registration-type-tab {
	color: #777;
}
.registration-box.has-type .registration-type-tab.active {
	background: #e8ca00;
	color: black;
}
.registration-type-tab input {
	display: none;
}
.registration-box-body {
	padding: 20px 15px 5px;
}
/* the form below the tabs shows once a type is chosen (Registration.index.js) */
.registration-box-body.is-collapsed {
	display: none;
}
.registration-choose-type {
	margin: 0;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #ccc;
}
/* "Изберете" is only shown until a type is chosen */
.registration-box.has-type .registration-choose-type {
	display: none;
}

/* Both type groups share one grid cell, so the box always has the height of the taller one - switching the tab doesn't
   move the rest of the form. The inactive one keeps its space (visibility, not display), its inputs are disabled */
.registration-type-fields {
	display: grid;
}
.registration-type-fields > div {
	grid-area: 1 / 1;
	min-width: 0;
}
.registration-type-fields > .is-hidden {
	visibility: hidden;
}

/* Phone - [country code select | number] on one line, like create_shipment. The code box stretches to the input's
   height (flex stretch), whatever height .form-control has */
.registration-phone {
	display: flex;
	align-items: stretch;
	gap: 5px;
}
/* "#phone_country_id + .select2-container" is the code box itself - the open list's wrapper is a .select2-container in the
   same row too (dropdownParent), a broader selector squeezes the list to 90px as well */
.registration-phone > #phone_country_id + .select2-container {
	flex: 0 0 90px;
	width: 90px !important;
}
.registration-phone > #phone_country_id + .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
	height: 100%;
}
.registration-phone > #phone_country_id + .select2-container .select2-selection--single .select2-selection__arrow {
	height: 100%;
}
.registration-phone #phone {
	flex: 1;
	min-width: 0;
}
/* the open list is wider than the code box - it opens over the row (it's absolutely positioned by select2), one country
   per line */
.registration-phone-dropdown {
	/* !important - with dropdownAutoWidth select2 writes the code box's width as an inline min-width */
	min-width: 280px !important;
}
.registration-phone-dropdown .select2-results__option {
	white-space: nowrap;
}