/* ============================================================
   HERO FORM REDESIGN (2026-05-30)
   Визуальный стиль концепта (/form-calc-v2.html), наложенный на
   СУЩЕСТВУЮЩУЮ форму #mainForm. Разметка/id/name НЕ менялись —
   form.js, Google autocomplete, select2 стран и submit на чекаут
   работают как прежде. Только визуал.
   Префикс `#mainForm` + !important — перебивает refresh.css,
   hero-premium.css и inline-стили формы в home.twig.
   ============================================================ */

:root {
	--fr-red: #F01A26;
	--fr-red-dark: #c11018;
	--fr-red-soft: #fef0f1;
	--fr-ink: #0f1115;
	--fr-ink-2: #1a1d22;
	--fr-muted: #6a7280;
	--fr-muted-2: #9aa1ad;
	--fr-line: #e8ebf0;
	--fr-field: linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
	--fr-field-hover: linear-gradient(180deg, #ffffff 0%, #eaeff5 100%);
	--fr-raise: 0 1px 0 rgba(15,17,21,.04), 0 2px 5px -1px rgba(15,17,21,.06), inset 0 1px 0 rgba(255,255,255,.85);
	--fr-raise-h: 0 1px 0 rgba(15,17,21,.05), 0 4px 10px -2px rgba(15,17,21,.10), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ===== Лейблы секций ===== */
#mainForm .section-labels .label-text {
	font-size: 11px !important;
	font-weight: 800 !important;
	color: var(--fr-ink-2) !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}
#mainForm .section-labels .label-text::before {
	content: "" !important;
	width: 3px; height: 11px;
	background: var(--fr-red);
	border-radius: 2px;
	flex-shrink: 0;
}
#mainForm .section-labels .label-text.label-postal::before { display: none !important; }

/* ===== Выпуклые поля: merged input group (флаг + адрес) ===== */
#mainForm .merged-input-group,
#mainForm .postal-container {
	background: var(--fr-field) !important;
	border: 1px solid rgba(15,17,21,.10) !important;
	border-radius: 12px !important;
	box-shadow: var(--fr-raise) !important;
	transition: border-color .2s, box-shadow .2s, background .2s !important;
	overflow: hidden !important;
}
#mainForm .merged-input-group:hover,
#mainForm .postal-container:hover {
	border-color: rgba(15,17,21,.14) !important;
	background: var(--fr-field-hover) !important;
	box-shadow: var(--fr-raise-h) !important;
}
#mainForm .merged-input-group:focus-within,
#mainForm .postal-container:focus-within {
	border-color: var(--fr-red) !important;
	background: linear-gradient(180deg, #fff 0%, #fff5f5 100%) !important;
	box-shadow: 0 0 0 4px rgba(240,26,38,.12), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* флаг-триггер — «вдавленная» секция слева */
#mainForm .custom-select-wrapper.country-wrapper .flag-trigger,
#mainForm .flag-trigger {
	background: linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(15,17,21,.03) 100%) !important;
	border: none !important;
	border-right: 1px solid rgba(15,17,21,.06) !important;
	padding: 0 10px !important;
}
#mainForm .vertical-divider { display: none !important; }

/* инпуты адреса/индекса — прозрачные внутри выпуклого поля */
#mainForm .address-segment input,
#mainForm #autocomplete-from,
#mainForm #autocomplete-to,
#mainForm .postal-container input,
#mainForm .standard-input {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	font-size: 14.5px !important;
	font-weight: 500 !important;
	color: var(--fr-ink) !important;
	padding: 14px 12px !important;
}
#mainForm .postal-container input,
#mainForm .standard-input {
	text-align: center !important;
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums !important;
}
#mainForm .address-segment input::placeholder { color: var(--fr-muted-2) !important; font-weight: 400 !important; }

/* ===== Parcel type select ===== */
#mainForm .parcel-type-section > label {
	font-size: 11px !important;
	font-weight: 800 !important;
	color: var(--fr-ink-2) !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}
#mainForm .parcel-type-section > label::before {
	content: "" !important;
	width: 3px; height: 11px;
	background: var(--fr-red);
	border-radius: 2px;
}
#mainForm #wrapper-parcel-type .custom-select-trigger,
#mainForm .type-trigger {
	background: var(--fr-field) !important;
	border: 1px solid rgba(15,17,21,.10) !important;
	border-radius: 12px !important;
	box-shadow: var(--fr-raise) !important;
	padding: 13px 14px !important;
	transition: border-color .2s, box-shadow .2s, background .2s !important;
}
#mainForm #wrapper-parcel-type .custom-select-trigger:hover,
#mainForm .type-trigger:hover {
	border-color: rgba(15,17,21,.14) !important;
	background: var(--fr-field-hover) !important;
	box-shadow: var(--fr-raise-h) !important;
}
#mainForm #wrapper-parcel-type.open .custom-select-trigger,
#mainForm #wrapper-parcel-type .custom-select-trigger:focus-within {
	border-color: var(--fr-red) !important;
	background: linear-gradient(180deg, #fff 0%, #fff5f5 100%) !important;
	box-shadow: 0 0 0 4px rgba(240,26,38,.12) !important;
}
#mainForm .current-type-content {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--fr-ink) !important;
}
#mainForm .current-type-content.placeholder-style,
#mainForm .placeholder-style { color: var(--fr-muted-2) !important; font-weight: 600 !important; }

/* dropdown опций типа — overlay стиль концепта */
#mainForm #wrapper-parcel-type .custom-options {
	background: #fff !important;
	border: 1.5px solid rgba(15,17,21,.12) !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 12px -2px rgba(15,17,21,.08), 0 24px 48px -20px rgba(15,17,21,.20) !important;
	padding: 8px !important;
	margin-top: 6px !important;
}
#mainForm #wrapper-parcel-type .custom-option {
	border-radius: 9px !important;
	padding: 10px 12px !important;
	font-weight: 600 !important;
	transition: background .15s !important;
}
#mainForm #wrapper-parcel-type .custom-option:hover,
#mainForm #wrapper-parcel-type .custom-option.selected {
	background: var(--fr-red-soft) !important;
	color: var(--fr-red) !important;
}

/* ===== Dimensions / parcel cards ===== */
#mainForm .dimensions-section > label {
	font-size: 11px !important;
	font-weight: 800 !important;
	color: var(--fr-ink-2) !important;
	letter-spacing: .1em !important;
	text-transform: uppercase !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}
#mainForm .dimensions-section > label::before {
	content: "" !important;
	width: 3px; height: 11px;
	background: var(--fr-red);
	border-radius: 2px;
}
#mainForm .parcel-card {
	background: var(--fr-field) !important;
	border: 1px solid rgba(15,17,21,.10) !important;
	border-radius: 12px !important;
	box-shadow: var(--fr-raise) !important;
	padding: 14px !important;
	margin-bottom: 10px !important;
}
#mainForm .parcel-card .item-index {
	display: inline-flex !important;
	align-items: center !important; justify-content: center !important;
	min-width: 22px; height: 22px;
	font-size: 11px !important; font-weight: 800 !important;
	background: var(--fr-red) !important; color: #fff !important;
	border-radius: 50% !important;
	padding: 0 6px !important;
}
/* dim inputs — выпуклые ячейки */
#mainForm .dim-input-wrapper {
	background: #fff !important;
	border: 1px solid rgba(15,17,21,.10) !important;
	border-radius: 9px !important;
	box-shadow: var(--fr-raise) !important;
	transition: border-color .2s, box-shadow .2s !important;
}
#mainForm .dim-input-wrapper:focus-within {
	border-color: var(--fr-red) !important;
	box-shadow: 0 0 0 3px rgba(240,26,38,.12) !important;
}
#mainForm .dim-input-wrapper input {
	background: transparent !important;
	border: none !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	color: var(--fr-ink) !important;
	text-align: center !important;
}
#mainForm .dim-label {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	color: var(--fr-muted) !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
}
#mainForm .dim-unit { font-size: 10.5px !important; font-weight: 700 !important; color: var(--fr-muted-2) !important; }

/* ===== Кнопки ===== */
#mainForm #addItemButton,
#mainForm .btn-secondary {
	background: #fff !important;
	border: 1.5px dashed rgba(240,26,38,.40) !important;
	border-radius: 12px !important;
	color: var(--fr-red) !important;
	font-weight: 700 !important;
	transition: background .2s, border-color .2s, transform .15s !important;
}
#mainForm #addItemButton:hover,
#mainForm .btn-secondary:hover {
	background: var(--fr-red-soft) !important;
	border-color: var(--fr-red) !important;
	transform: translateY(-1px) !important;
}
#mainForm #addItemButton .plus-sign { font-weight: 800 !important; }

#mainForm .buttons-area .btn-primary,
#mainForm button[type="submit"].btn-primary {
	background: linear-gradient(135deg, #ff3b41 0%, var(--fr-red) 60%, var(--fr-red-dark) 100%) !important;
	border: none !important;
	border-radius: 14px !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 800 !important;
	letter-spacing: .02em !important;
	padding: 15px 22px !important;
	box-shadow: 0 6px 16px -4px rgba(240,26,38,.40), 0 1px 0 rgba(255,255,255,.20) inset !important;
	transition: transform .15s, box-shadow .2s, filter .2s !important;
}
#mainForm .buttons-area .btn-primary:hover,
#mainForm button[type="submit"].btn-primary:hover {
	transform: translateY(-1px) !important;
	box-shadow: 0 10px 22px -4px rgba(240,26,38,.50), 0 1px 0 rgba(255,255,255,.20) inset !important;
}
#mainForm .buttons-area .btn-primary:active { transform: translateY(0) !important; filter: brightness(.96) !important; }
#mainForm .btn-primary .search-icon { filter: brightness(0) invert(1) !important; }

/* кнопка удаления parcel — круглая в углу */
#mainForm .parcel-card .btn-remove {
	background: rgba(15,17,21,.04) !important;
	border: 1px solid var(--fr-line) !important;
	color: var(--fr-muted) !important;
	border-radius: 50% !important;
	width: 24px !important; height: 24px !important;
	transition: color .15s, background .15s, border-color .15s !important;
}
#mainForm .parcel-card .btn-remove:hover {
	color: var(--fr-red) !important;
	background: var(--fr-red-soft) !important;
	border-color: rgba(240,26,38,.30) !important;
}

/* ===== Карточка формы целиком ===== */
.new-form-wrapper {
	border-radius: 20px !important;
}

/* ============================================================
   Envelope-picker (Documents) — концепт-стиль
   ============================================================ */
.concept-env-block { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.concept-env-block .ce-head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.concept-env-block .ce-title {
	font-size: 11px; font-weight: 800; color: var(--fr-ink-2);
	letter-spacing: .1em; text-transform: uppercase;
}
.concept-env-block .ce-thickness {
	display: inline-flex; align-items: center; gap: 5px;
	font-size: 11px; font-weight: 600; color: var(--fr-muted);
	padding: 4px 9px; background: #fafbfc; border: 1px solid var(--fr-line); border-radius: 99px; white-space: nowrap;
}
.concept-env-block .ce-thickness i { color: var(--fr-red); font-size: 12px; }
.concept-env-block .ce-list { display: flex; flex-direction: column; gap: 10px; }

.concept-env-block .ce-item {
	position: relative;
	display: grid; grid-template-columns: 64px minmax(0,1fr) auto;
	grid-template-rows: auto auto; align-items: start; column-gap: 14px; row-gap: 4px;
	padding: 12px 14px;
	background: var(--fr-field); border: 1.5px solid rgba(15,17,21,.10);
	border-radius: 12px; box-shadow: var(--fr-raise);
	transition: border-color .2s, background .2s, box-shadow .2s;
}
.concept-env-block .ce-item.on { border-color: var(--fr-red); background: linear-gradient(180deg,#fff7f7 0%,#ffeff1 100%); }
.concept-env-block .ce-ico { grid-column: 1; grid-row: 1 / 3; align-self: center; display: flex; align-items: center; justify-content: center; color: #1a1d22; }
.concept-env-block .ce-item.on .ce-ico { color: var(--fr-red); }
.concept-env-block .ce-info { grid-column: 2; grid-row: 1; min-width: 0; }
.concept-env-block .ce-counter { grid-column: 3; grid-row: 1; align-self: start; display: inline-flex; align-items: center; gap: 6px; }
.concept-env-block .ce-desc { grid-column: 2 / 4; grid-row: 2; font-size: 11.5px; color: var(--fr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.concept-env-block .ce-name { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; white-space: nowrap; font-size: 15px; font-weight: 800; color: var(--fr-ink); }
.concept-env-block .ce-sub { font-size: 12.5px; font-weight: 600; color: var(--fr-muted); }
.concept-env-block .ce-badge { font-size: 9px; font-weight: 800; color: #fff; background: linear-gradient(135deg,#ff3b41,var(--fr-red) 60%,var(--fr-red-dark)); padding: 3px 7px; border-radius: 99px; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.concept-env-block .ce-size { font-size: 13px; font-weight: 700; color: var(--fr-ink); font-variant-numeric: tabular-nums; margin-top: 3px; }
.concept-env-block .ce-btn {
	width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
	background: #fff; border: 1.5px solid rgba(15,17,21,.14); border-radius: 8px;
	color: var(--fr-red); font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1;
	transition: background .15s, border-color .15s, transform .12s;
}
.concept-env-block .ce-btn:hover { background: var(--fr-red-soft); border-color: rgba(240,26,38,.30); }
.concept-env-block .ce-btn:active { transform: scale(.92); }
.concept-env-block .ce-minus { color: var(--fr-muted); }
.concept-env-block .ce-val { min-width: 24px; text-align: center; font-size: 16px; font-weight: 800; color: var(--fr-ink); font-variant-numeric: tabular-nums; }
.concept-env-block .ce-item.on .ce-val { color: var(--fr-red); }

.concept-env-block .ce-customdims { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: nowrap; }
.concept-env-block .ce-dim {
	width: 70px; padding: 7px 8px; text-align: center; font-weight: 700; font-size: 13.5px;
	background: #fff; border: 1.5px solid rgba(15,17,21,.14); border-radius: 8px; color: var(--fr-ink);
	-moz-appearance: textfield;
}
.concept-env-block .ce-dim::-webkit-outer-spin-button, .concept-env-block .ce-dim::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.concept-env-block .ce-mm { font-size: 10.5px; font-weight: 700; color: var(--fr-muted-2); }
.concept-env-block .ce-remove {
	position: absolute; top: 8px; right: 10px; width: 24px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(15,17,21,.04); border: 1px solid var(--fr-line); color: var(--fr-muted);
	border-radius: 50%; font-size: 14px; cursor: pointer; z-index: 3; line-height: 1;
}
.concept-env-block .ce-remove:hover { color: var(--fr-red); background: var(--fr-red-soft); border-color: rgba(240,26,38,.30); }
.concept-env-block .ce-addcustom {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 12px 16px; background: #fff; border: 1.5px dashed rgba(240,26,38,.40);
	border-radius: 12px; color: var(--fr-red); font-weight: 800; font-size: 14px; cursor: pointer;
	transition: background .2s, border-color .2s, transform .15s;
}
.concept-env-block .ce-addcustom:hover { background: var(--fr-red-soft); border-color: var(--fr-red); transform: translateY(-1px); }
.concept-env-block .ce-plus.ce-plus { }
.concept-env-block .ce-addcustom .ce-plus { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: var(--fr-red); color: #fff; border-radius: 8px; font-size: 18px; }

/* ============================================================
   2026-05-30: обёртка концепт-формы — убираем двойную карточку
   .new-form-wrapper рисует свою карточку; внутри неё .form-card
   концепта = своя карточка → двойная рамка. Делаем обёртку прозрачной.
   ============================================================ */
.new-form-wrapper:has(#psrCF) {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	backdrop-filter: none !important;
}
.new-form-wrapper:has(#psrCF)::before,
.new-form-wrapper:has(#psrCF)::after { display: none !important; }

/* форма-обёртка поверх соседних hero-элементов (чтобы dropdown'ы не перекрывались) */
.new-form-wrapper:has(#psrCF) { position: relative !important; z-index: 300 !important; }