/* ==========================================================================
	Nova Poshta — вибір способу доставки
	Монохромна, стримана палітра: один темний акцент замість кольорових
	заливок, білі поверхні, м'які тіні. Колір лишається лише там, де
	несе функцію (помилка, фокус), а не як декор.
========================================================================== */
:root{
	--np-ink: #1B222C;
	--np-ink-2: #2B323C;
	--np-ink-soft: #5B6472;
	--np-ink-faint: #99A1AC;
	--np-line: #E5E8ED;
	--np-line-strong: #D3D8E0;
	--np-surface: #FFFFFF;
	--np-page: #F7F8FA;
	--np-danger: #C0392B;
	--np-focus-ring: rgba(27, 34, 44, 0.16);
	
	--np-radius-lg: 10px;
	--np-radius-md: 10px;
	--np-radius-sm: 10px;
	
	--np-field-h: 46px; /* єдина мінімальна висота полів, у т.ч. select на iOS */
	
	--np-shadow-sm: 0 1px 2px rgba(20, 26, 33, 0.06);
	--np-shadow-md: 0 10px 28px rgba(20, 26, 33, 0.10);
	--np-shadow-lg: 0 28px 64px rgba(20, 26, 33, 0.22);
	
	--np-font: 'Gotham Pro', 'Myriad', Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*{ box-sizing: border-box; }

/* Навмисно НЕ на body (щоб не протікало на решту сайту поза кошиком/
віджетом) - лише всередині модалки кошика й самого блоку "Доставка". */
.jqcart-checkout,
.np-shipping{
	font-family: var(--np-font);
	color: var(--np-ink);
}

/* ==========================================================================
	Обгортка й заголовок
========================================================================== */
.np-shipping{
	max-width: 560px;
	width: 100%;
}
.np-shipping-title{
	font-size: clamp(18px, 3vw, 21px);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
	text-align:left;
}
.np-shipping-hint{
	color: var(--np-ink-soft);
	font-size: 13.5px;
	line-height: 1.5;
	margin: 0 0 22px;
	text-align:left;
}

/* ==========================================================================
	Загальне поле (місто, адреса кур'єра)
========================================================================== */
.np-field{
	position: relative;
	margin-bottom: 18px;
}
.np-field > label{
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
	font-size: 13.5px;
	color: var(--np-ink);
}
/* input.np-plain-input (не просто .np-plain-input) - навмисно з
	тегом: у style.css є сайтове правило
	input[type=text],input[type=tel],textarea,select{...} з такою ж
	специфічністю (0,1,1), і без цього кваліфікатора воно б програвало
і поля виглядали б як звичайні інпути сайту, а не як поле НП. */
input.np-plain-input,
select.np-plain-input,
textarea.np-plain-input,
.jqcart-checkout select{
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--np-line);
	border-radius: var(--np-radius-sm);
	font-size: 14.5px;
	font-family: inherit;
	color: var(--np-ink) !important; /* сайтове правило задає колір з !important */
	background-color: var(--np-surface);
	transition: border-color .15s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
	height: auto;
	margin-bottom: 0;
}
input.np-plain-input,
select.np-plain-input,
.jqcart-checkout select{
	min-height: var(--np-field-h);
}

/* SELECT. На iOS Safari нативний вигляд (menulist / appearance:auto)
	ігнорує padding і height, через що select виходить нижчим за інші
	поля. Тому прибираємо нативний вигляд і малюємо стрілку фоном. */
select.np-plain-input,
.jqcart-checkout select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	cursor: pointer;
	line-height: 1.3;
	text-align: left;
	text-overflow: ellipsis;
	padding-right: 38px;
	background-color: var(--np-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2399A1AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	background-size: 16px 16px;
}
select.np-plain-input::-ms-expand,
.jqcart-checkout select::-ms-expand{ display: none; }

.np-plain-input::placeholder{ color: var(--np-ink-faint); }
.np-plain-input:focus,
.jqcart-checkout select:focus{
	outline: none;
	border-color: var(--np-ink);
	box-shadow: 0 0 0 3px var(--np-focus-ring);
}
.np-plain-input:disabled{
	background-color: var(--np-page);
	color: var(--np-ink-faint);
	cursor: not-allowed;
}

.np-search-wrap{ position: relative; }
.np-search-wrap .np-plain-input{ padding-left: 40px; }
.np-search-icon{
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	color: var(--np-ink-faint);
	pointer-events: none;
}

.np-row-2{ display: flex; gap: 12px; flex-wrap: wrap; }
.np-row-2 .np-field{ flex: 1 1 140px; margin-bottom: 0; }

/* ==========================================================================
	Випадаючий список (автокомпліт) - спільний для міста й складів.
	position:fixed уникає обрізання батьківськими контейнерами, у тому
	числі карткою способу доставки; координати виставляє JS.
========================================================================== */
.np-dropdown{
	display: none;
	position: fixed;
	z-index: 1200;
	background: var(--np-surface);
	border: 1px solid var(--np-line);
	border-radius: var(--np-radius-sm);
	max-height: 280px;
	overflow-y: auto;
	box-shadow: var(--np-shadow-md);
}
.np-dropdown.open{ display: block; }
.np-item{
	padding: 10px 14px;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.4;
	border-bottom: 1px solid #F2F4F7;
}
.np-item:last-child{ border-bottom: none; }
.np-item:hover,
.np-item.active{
	background: var(--np-page);
}
.np-item.np-loading,
.np-item.np-empty,
.np-item.np-error{
	color: var(--np-ink-faint);
	cursor: default;
}
.np-item.np-loading:hover,
.np-item.np-empty:hover,
.np-item.np-error:hover{ background: transparent; }
.np-item.np-error{ color: var(--np-danger); }
.np-item.np-hint{
	color: var(--np-ink-faint);
	cursor: default;
	font-size: 12px;
	font-style: italic;
	background: #FAFBFC;
	border-bottom: 1px solid var(--np-line);
}
.np-item.np-hint:hover{ background: #FAFBFC; }

/* ==========================================================================
	Картки способів доставки
========================================================================== */
.np-methods{
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 22px;
	transition: opacity .2s ease;
}
.np-methods.is-locked{
	opacity: .45;
}
.np-methods.is-locked .np-method{
	cursor: not-allowed;
}
.np-methods.is-locked .np-method:hover{
	border-color: var(--np-line);
}
.np-methods-hint{
	margin: -10px 0 14px;
	font-size: 12.5px;
	color: var(--np-ink-faint);
	font-style: italic;
	cursor: pointer;
}

.np-method{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	border: 1.5px solid var(--np-line);
	border-radius: var(--np-radius-lg);
	background: var(--np-surface);
	box-shadow: var(--np-shadow-sm);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.np-method:hover{ border-color: var(--np-line-strong); }
.np-method:has(input:checked){
	border-color: var(--np-ink);
	box-shadow: var(--np-shadow-md);
}

.np-method input[type="radio"]{
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.np-radio-dot{
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	border: 1.5px solid var(--np-line-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color .15s ease;
}
.np-radio-dot::after{
	content: '';
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--np-ink);
	transform: scale(0);
	transition: transform .15s cubic-bezier(.4,0,.2,1);
}
.np-method input:checked + .np-radio-dot{ border-color: var(--np-ink); }
.np-method input:checked + .np-radio-dot::after{ transform: scale(1); }
.np-method input:focus-visible + .np-radio-dot{
	outline: 2px solid var(--np-ink);
	outline-offset: 2px;
}

.np-method-icon{
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	color: var(--np-ink-faint);
	transition: color .15s ease;
}
.np-method-icon{  display: none;}
.np-method:has(input:checked) .np-method-icon{ color: var(--np-ink); }

.np-method-body{
	flex: 1;
	min-width: 0;
}
.np-method-head{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
.np-method-title{
	font-weight: 600;
	font-size: 15px;
	color: var(--np-ink);
}
.np-method-badge{
	font-size: 12.5px;
	color: var(--np-ink-faint);
	white-space: nowrap;
}
.np-method-subtitle{
	display: block;
	margin-top: 3px;
	font-size: 13px;
	color: var(--np-ink-soft);
}

/* Панель деталей обраного способу. display:none/block (не max-height +
	overflow:hidden) — саме overflow:hidden на попередній версії обрізав
випадаючий список складу, що виходив за межі картки. */
.np-method-detail{ display: none; }
.np-method:has(input:checked) .np-method-detail{
	display: block;
	margin-top: 14px;
	animation: npDetailIn .18s ease;
}
@keyframes npDetailIn{
	from{ opacity: 0; transform: translateY(-4px); }
	to{ opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
	Поле складу (відділення / поштомат) - виглядає як select із шевроном
========================================================================== */
.np-warehouse-field{ margin-bottom: 0; }
.np-warehouse-row{
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: stretch;
}
.np-select-wrap{
	position: relative;
	/* flex-basis 0% замість "200px": у стовпчиковому напрямку (мобільний
		layout нижче) те саме значення трактувалось би як ВИСОТА, а не
		ширина, і розтягувало поле на 200px по вертикалі. min-width дає
		той самий "не менше 200px завширшки" ефект на десктопі без цього
	побічного ефекту. */
	flex: 1 1 0%;
	min-width:100%;
	max-width:100%;
}
input.np-select-input{ padding-right: 38px; cursor: pointer; }
.np-select-chevron{
	position: absolute;
	right: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: var(--np-ink-faint);
	pointer-events: none;
	transition: transform .15s ease;
}
.np-select-wrap:focus-within .np-select-chevron{ transform: translateY(-50%) rotate(180deg); }

.np-map-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 0 18px;
	border: 1.5px solid var(--np-ink);
	border-radius: var(--np-radius-sm);
	background: var(--np-surface);
	color: var(--np-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
	max-width: 100%;
}
.np-map-btn svg{ width: 17px; height: 17px; flex-shrink: 0; }
.np-map-btn:hover:not(:disabled){ background: var(--np-ink); color: #fff; }
.np-map-btn:disabled{
	border-color: var(--np-line);
	color: var(--np-ink-faint);
	cursor: not-allowed;
}

/* Розклад роботи обраного відділення */
.np-schedule{
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed var(--np-line);
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.np-schedule-row{
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
}
.np-schedule-row span:first-child{ color: var(--np-ink-soft); }
.np-schedule-row span:last-child{ color: var(--np-ink); font-variant-numeric: tabular-nums; }

/* ==========================================================================
	Поля кур'єра
========================================================================== */
#np-courier-fields{ padding-top: 2px; }

/* ==========================================================================
	Кнопка "Продовжити"
========================================================================== */
.np-submit{
	width: 100%;
	min-height: 48px;
	padding: 14px;
	background: var(--np-ink);
	color: #fff;
	border: none;
	border-radius: var(--np-radius-sm);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .15s ease;
}
.np-submit:hover{ background: var(--np-ink-2); }

/* ==========================================================================
	Модальне вікно карти - той самий стриманий стиль
========================================================================== */
.np-modal{
	position: fixed;
	inset: 0;
	background: rgba(20, 26, 33, 0.55);
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.np-modal[hidden]{ display: none; }
.np-modal-box{
	background: #fff;
	border-radius: var(--np-radius-lg);
	width: 100%;
	max-width: 740px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: var(--np-shadow-lg);
}
.np-modal-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--np-line);
	font-weight: 600;
	font-size: 15px;
}
.np-modal-close{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	color: var(--np-ink-soft);
	line-height: 1;
	border-radius: 50%;
	transition: background-color .15s ease, color .15s ease;
}
.np-modal-close:hover{ background: var(--np-page); color: var(--np-ink); }
.np-map-status{
	padding: 10px 20px;
	font-size: 13px;
	color: var(--np-ink-soft);
	border-bottom: 1px solid #F2F4F7;
}
#np-map-container{
	width: 100%;
	height: 60vh;
	min-height: 320px;
}

/* Перестилюємо стандартний вигляд Leaflet-попапу під загальну мову дизайну */
.leaflet-popup-content-wrapper{
	border-radius: var(--np-radius-md);
	box-shadow: var(--np-shadow-md);
	padding: 2px;
}
.leaflet-popup-content{ margin: 12px 14px; }
.leaflet-popup-tip{ box-shadow: var(--np-shadow-sm); }

.np-marker-popup{
	font-family: var(--np-font);
	font-size: 13px;
	min-width: 200px;
}
.np-marker-popup .np-marker-title{ font-weight: 700; margin-bottom: 2px; color: var(--np-ink); }
.np-marker-popup .np-marker-address{ color: var(--np-ink-soft); margin-bottom: 2px; }
.np-marker-popup .np-schedule{ margin-top: 8px; padding-top: 8px; }
.np-marker-popup .np-schedule-row{ font-size: 12.5px; }
.np-marker-popup button{
	margin-top: 10px;
	width: 100%;
	min-height: 38px;
	padding: 8px 12px;
	background: var(--np-ink);
	color: #fff;
	border: none;
	border-radius: var(--np-radius-sm);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	font-family: inherit;
	transition: background-color .15s ease;
}
.np-marker-popup button:hover{ background: var(--np-ink-2); }

/* ==========================================================================
	Реакція на рух/доступність
========================================================================== */
@media (prefers-reduced-motion: reduce){
	.np-method,
	.np-method-detail,
	.np-radio-dot,
	.np-radio-dot::after,
	.np-select-chevron,
	.np-methods{
		transition: none !important;
		animation: none !important;
	}
}

/* ==========================================================================
	Адаптивність
========================================================================== */
@media (max-width: 640px){
	.np-modal{ padding: 0; }
	.np-modal-box{
		max-width: none;
		width: 100%;
		height: 100%;
		max-height: none;
		border-radius: 0;
	}
	#np-map-container{ height: auto; flex: 1; min-height: 0; }
	.np-map-btn{font-size:12px;padding:12px; }
	.np-method-icon{  display: none;}
	/* 16px - щоб iOS Safari не зумив сторінку при фокусі на полі */
	input.np-plain-input,
	select.np-plain-input,
	textarea.np-plain-input,
	.jqcart-checkout select{font-size:16px}
	.np-select-wrap{min-width:100%;max-width: 100%;}
	.np-marker-popup{min-width:100%;max-width: 100%;}
}

@media (max-width: 480px){
	.np-warehouse-row{ flex-direction: column; }
	.np-map-btn{padding:12px; }
	.np-method{ padding: 14px; gap: 11px; }
	.np-method-title{ font-size: 14px; }
}

@media (max-width: 360px){
	.np-method-icon{ width: 19px; height: 19px; }
	.np-radio-dot{ width: 18px; height: 18px; }
}