/* حاسبة الشحن — بريد يو اس  |  واجهة v2 */

.bs-wrap {
	--bs-brand: #14375e;
	--bs-brand-soft: #eef3f9;
	--bs-accent: #d4a017;
	--bs-ink: #14181d;
	--bs-mute: #6b7480;
	--bs-line: #e4e8ed;
	--bs-bg: #fff;
	--bs-soft: #f8fafc;
	--bs-ok: #0a7c42;
	--bs-err: #c0342f;
	--bs-r: 14px;
	--bs-shadow: 0 1px 2px rgba(20,24,29,.05), 0 8px 24px -12px rgba(20,24,29,.18);

	font-family: inherit;
	color: var(--bs-ink);
	max-width: 1080px;
	margin-inline: auto;
	line-height: 1.55;
}
.bs-wrap *, .bs-wrap *::before, .bs-wrap *::after { box-sizing: border-box; }

/* ---------- تخطيط: نموذج + لوحة سعر ملاصقة ---------- */
.bs-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .bs-layout { grid-template-columns: 1fr; } }

/* ---------- البطاقات ---------- */
.bs-card {
	background: var(--bs-bg);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-r);
	padding: 1.25rem 1.35rem;
	margin-bottom: 1rem;
	box-shadow: var(--bs-shadow);
}
.bs-card.is-locked { opacity: .55; pointer-events: none; filter: grayscale(.35); }

.bs-h {
	display: flex; align-items: center; gap: .65rem;
	margin: 0 0 1rem; font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em;
}
.bs-step {
	display: grid; place-items: center; flex: none;
	width: 1.75rem; height: 1.75rem; border-radius: 9px;
	background: var(--bs-brand); color: #fff; font-size: .82rem; font-weight: 800;
}
.bs-h-note { margin-inline-start: auto; font-size: .78rem; font-weight: 500; color: var(--bs-mute); }
.bs-sub {
	margin: 1.25rem 0 .65rem; font-size: .8rem; font-weight: 700;
	color: var(--bs-mute); text-transform: uppercase; letter-spacing: .04em;
}

/* ---------- الحقول ---------- */
.bs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.bs-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bs-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) {
	.bs-grid, .bs-grid-3 { grid-template-columns: 1fr; }
	.bs-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

.bs-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .55rem; min-width: 0; }
.bs-field > span { font-size: .8rem; color: var(--bs-mute); font-weight: 600; }
.bs-req { color: var(--bs-err); }

.bs-field input, .bs-field select, .bs-field textarea {
	width: 100%; min-width: 0; padding: .7rem .85rem;
	border: 1.5px solid var(--bs-line); border-radius: 10px;
	background: #fff; font-family: inherit; font-size: 16px; line-height: 1.5;
	color: var(--bs-ink); min-height: 46px;
	transition: border-color .15s, box-shadow .15s;
	text-overflow: ellipsis;
}
/* القائمة المنسدلة: سهم مخصص مع مساحة كافية، وإلا قُصّ النص في RTL */
.bs-field select {
	appearance: none; -webkit-appearance: none; -moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7480' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left .85rem center;
	background-size: 11px 7px;
	padding-inline-start: 2.3rem;
}
.bs-field select option { font-size: 15px; }
.bs-field input:hover, .bs-field select:hover, .bs-field textarea:hover { border-color: #cbd3dc; }
.bs-field input:focus, .bs-field select:focus, .bs-field textarea:focus {
	outline: none; border-color: var(--bs-brand); box-shadow: 0 0 0 3px rgba(20,55,94,.12);
}
.bs-field input:disabled { background: var(--bs-soft); color: var(--bs-mute); }
.bs-invalid { border-color: var(--bs-err) !important; box-shadow: 0 0 0 3px rgba(192,52,47,.1) !important; }

/* ---------- صفوف مكرّرة: صناديق وأصناف ---------- */
.bs-row {
	position: relative;
	border: 1.5px solid var(--bs-line); border-radius: 12px;
	padding: .95rem 1rem .35rem; margin-bottom: .7rem; background: var(--bs-soft);
	transition: border-color .15s;
}
.bs-row:hover { border-color: #d5dce4; }
.bs-row-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; }
.bs-row-n {
	font-size: .74rem; font-weight: 800; color: var(--bs-brand);
	background: var(--bs-brand-soft); padding: .18rem .55rem; border-radius: 6px;
}
.bs-remove {
	margin-inline-start: auto; border: 0; background: transparent; color: var(--bs-mute);
	font-size: 1.15rem; line-height: 1; cursor: pointer; padding: .15rem .35rem; border-radius: 6px;
}
.bs-remove:hover { background: #fdeceb; color: var(--bs-err); }
.bs-row-calc {
	margin: .15rem 0 .7rem; font-size: .76rem; color: var(--bs-mute);
	font-variant-numeric: tabular-nums;
}

.bs-add {
	display: inline-flex; align-items: center; gap: .4rem;
	border: 1.5px dashed #c3cdd8; background: #fff; color: var(--bs-brand);
	font: inherit; font-weight: 700; font-size: .88rem;
	padding: .6rem 1.05rem; border-radius: 10px; cursor: pointer; transition: .15s;
}
.bs-add:hover { border-color: var(--bs-brand); background: var(--bs-brand-soft); }

/* ---------- الوزن المحتسب ---------- */
.bs-weight-note {
	margin-top: .9rem; padding: .8rem 1rem; border-radius: 10px;
	background: var(--bs-brand-soft); border: 1px solid #d8e3ef; font-size: .9rem;
}
.bs-weight-note b { font-variant-numeric: tabular-nums; }
.bs-weight-hint { display: block; margin-top: .3rem; font-size: .76rem; color: var(--bs-mute); }

/* ---------- الخيارات ---------- */
.bs-check {
	display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .85rem;
	border: 1.5px solid var(--bs-line); border-radius: 10px; margin-bottom: .55rem;
	font-size: .92rem; cursor: pointer; transition: .15s;
}
.bs-check:hover { border-color: #cbd3dc; background: var(--bs-soft); }
.bs-check input { width: 1.05rem; height: 1.05rem; margin-top: .15rem; accent-color: var(--bs-brand); flex: none; }
.bs-check-t { display: flex; flex-direction: column; gap: .1rem; }
.bs-check-d { font-size: .78rem; color: var(--bs-mute); }
.bs-check-p { margin-inline-start: auto; font-weight: 700; white-space: nowrap; }

/* ---------- رفع الصور ---------- */
.bs-drop {
	border: 1.5px dashed #c3cdd8; border-radius: 12px; padding: 1.4rem 1rem;
	text-align: center; cursor: pointer; background: var(--bs-soft); transition: .15s;
}
.bs-drop:hover, .bs-drop.is-over { border-color: var(--bs-brand); background: var(--bs-brand-soft); }
.bs-drop-t { font-weight: 700; font-size: .92rem; }
.bs-drop-d { font-size: .78rem; color: var(--bs-mute); margin-top: .2rem; }
.bs-thumbs { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .75rem; }
.bs-thumb { position: relative; width: 78px; height: 78px; border-radius: 10px; overflow: hidden; border: 1px solid var(--bs-line); }
.bs-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-thumb button {
	position: absolute; inset-block-start: 3px; inset-inline-end: 3px;
	width: 20px; height: 20px; border: 0; border-radius: 50%;
	background: rgba(20,24,29,.72); color: #fff; font-size: .8rem; line-height: 1; cursor: pointer;
}
.bs-thumb.is-busy { opacity: .5; }

/* ---------- لوحة الأسعار ---------- */
.bs-panel { position: sticky; top: 1.25rem; }
@media (max-width: 900px) { .bs-panel { position: static; } }

.bs-price {
	display: flex; align-items: center; gap: .75rem;
	border: 2px solid var(--bs-line); border-radius: 12px;
	padding: .9rem 1rem; margin-bottom: .6rem; cursor: pointer;
	background: #fff; transition: border-color .15s, background .15s, transform .1s;
}
.bs-price:hover { border-color: #c3cdd8; }
.bs-price.is-on { border-color: var(--bs-brand); background: var(--bs-brand-soft); }
.bs-price input { position: absolute; opacity: 0; pointer-events: none; }
.bs-price-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.bs-price-label { font-weight: 700; font-size: .9rem; }
.bs-price-eta { font-size: .76rem; color: var(--bs-mute); }
.bs-price-x { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.bs-x { font-size: .7rem; color: var(--bs-mute); background: var(--bs-soft); border: 1px solid var(--bs-line); border-radius: 5px; padding: .05rem .35rem; }
.bs-price-amt { font-size: 1.15rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bs-price-amt small { display: block; font-size: .68rem; font-weight: 600; color: var(--bs-mute); text-align: start; }

.bs-badge {
	position: absolute; inset-block-start: -9px; inset-inline-start: 12px;
	background: var(--bs-ok); color: #fff; font-size: .66rem; font-weight: 800;
	padding: .12rem .45rem; border-radius: 5px; letter-spacing: .02em;
}
.bs-price { position: relative; }

.bs-skeleton { height: 66px; border-radius: 12px; margin-bottom: .6rem;
	background: linear-gradient(90deg, #f1f4f7 25%, #e7ebf0 37%, #f1f4f7 63%);
	background-size: 400% 100%; animation: bs-sk 1.3s ease-in-out infinite; }
@keyframes bs-sk { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }

.bs-hint { color: var(--bs-mute); font-size: .88rem; margin: 0; text-align: center; padding: 1.1rem .5rem; }
.bs-note { color: var(--bs-mute); font-size: .84rem; margin: 0 0 .7rem; }
.bs-estimated, .bs-liquids-warn {
	margin: .7rem 0 0; padding: .65rem .85rem; font-size: .82rem; border-radius: 9px;
	background: #fff8e6; border: 1px solid #f0dfae;
}
.bs-liquids-warn { background: #fdeceb; border-color: #f2c9c7; color: var(--bs-err); }

/* ---------- الأزرار ---------- */
.bs-btn { font: inherit; font-weight: 700; border-radius: 11px; cursor: pointer; border: 1.5px solid transparent; transition: .15s; }
.bs-submit {
	display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
	background: var(--bs-ok); color: #fff; font-size: 1rem; padding: .95rem 1rem;
	box-shadow: 0 6px 18px -8px rgba(10,124,66,.6);
}
.bs-submit:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.bs-submit:disabled { opacity: .55; cursor: progress; transform: none; }
.bs-submit-total { font-variant-numeric: tabular-nums; }

.bs-error {
	margin: .7rem 0; padding: .75rem .95rem; border-radius: 10px;
	background: #fdeceb; border: 1px solid #f2c9c7; color: var(--bs-err); font-size: .88rem;
}

.bs-account {
	display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--bs-mute);
	padding: .55rem .8rem; background: var(--bs-soft); border: 1px solid var(--bs-line);
	border-radius: 9px; margin-bottom: .9rem;
}
.bs-account a { color: var(--bs-brand); font-weight: 700; }

.bs-total-row {
	display: flex; justify-content: space-between; align-items: baseline;
	padding: .7rem 0; margin-top: .3rem; border-top: 1.5px dashed var(--bs-line);
	font-weight: 800; font-size: 1.05rem;
}
.bs-total-row span:last-child { font-variant-numeric: tabular-nums; }

.bs-terms, .bs-sla {
	margin: .65rem 0 0; font-size: .74rem; line-height: 1.55; color: var(--bs-mute); text-align: center;
}
.bs-terms a { color: var(--bs-brand); font-weight: 700; }
.bs-sla { margin-top: .35rem; }


/* ======================= الجوال ======================= */
.bs-head { margin-bottom: 1.1rem; }
.bs-title { margin: 0 0 .2rem; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; }
.bs-title-d { margin: 0; color: var(--bs-mute); font-size: .92rem; }

.bs-warn-note {
	margin: .6rem 0 0; padding: .7rem .9rem; font-size: .8rem; line-height: 1.6;
	background: #fff8e6; border: 1px solid #f0dfae; border-radius: 9px; color: #6b5a1e;
}

/* شريط سفلي ثابت — جوال فقط */
.bs-bar {
	position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 9998;
	display: none; align-items: center; gap: .75rem;
	padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
	background: #fff; border-block-start: 1px solid var(--bs-line);
	box-shadow: 0 -6px 20px -10px rgba(20,24,29,.35);
}
.bs-bar-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bs-bar-svc { font-size: .74rem; color: var(--bs-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-bar-amt { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.bs-bar-btn {
	background: var(--bs-ok); color: #fff; font-size: .95rem; padding: .8rem 1.35rem;
	white-space: nowrap; flex: none;
}

@media (max-width: 900px) {
	.bs-wrap { --bs-r: 12px; }
	.bs-layout { gap: 0; }
	.bs-card { padding: 1rem 1.05rem; }
	/* لوحة الأسعار تظهر مباشرة بعد الصناديق لا في آخر الصفحة */
	.bs-main { display: contents; }
	.bs-layout { display: flex; flex-direction: column; }
	.bs-account { order: 1; }
	.bs-main > section:nth-of-type(1) { order: 2; }
	.bs-main > section:nth-of-type(2) { order: 3; }
	.bs-panel { order: 4; }
	.bs-main > section:nth-of-type(3) { order: 5; }
	.bs-main > section:nth-of-type(4) { order: 6; }

	.bs-bar[data-on="1"] { display: flex; }
	body.bs-has-bar { padding-block-end: 78px; }
	/* زر الدفع الكبير يبقى، لكن الشريط هو المختصر */
}

@media (max-width: 560px) {
	.bs-grid, .bs-grid-3 { grid-template-columns: 1fr; gap: .5rem; }
	.bs-grid-4 { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
	.bs-title { font-size: 1.3rem; }
	.bs-h { font-size: 1rem; }
	.bs-h-note { display: none; }
	.bs-row { padding: .8rem .8rem .3rem; }
	.bs-price { padding: .8rem .85rem; gap: .6rem; }
	.bs-price-amt { font-size: 1.05rem; }
	.bs-check { padding: .8rem; }
	.bs-check-p { font-size: .9rem; }
	.bs-thumb { width: 68px; height: 68px; }
	.bs-drop { padding: 1.1rem .8rem; }
	.bs-field { margin-bottom: .35rem; }
	/* أهداف لمس أكبر */
	.bs-remove { font-size: 1.4rem; padding: .35rem .5rem; }
	.bs-add { width: 100%; justify-content: center; padding: .75rem 1rem; }
}

/* لا تسمح لأي عنصر بتجاوز عرض الشاشة */
.bs-wrap, .bs-card, .bs-row, .bs-price { max-width: 100%; }
.bs-wrap input, .bs-wrap select, .bs-wrap textarea { max-width: 100%; }


/* القالب قد يفرض ألوانه على الأزرار — نرفع التخصيص لنحافظ على هوية الحاسبة */
.bs-wrap .bs-form button.bs-submit,
.bs-wrap .bs-form button.bs-bar-btn {
	background: var(--bs-ok);
	background-image: none;
	color: #fff;
	border: 0;
	text-shadow: none;
}
.bs-wrap .bs-form button.bs-submit:hover,
.bs-wrap .bs-form button.bs-bar-btn:hover { background: #0c8f4c; color: #fff; }
.bs-wrap .bs-form button.bs-add {
	background: #fff; background-image: none; color: var(--bs-brand);
	border: 1.5px dashed #c3cdd8; text-shadow: none;
}


/* تنبيه الصناديق الناقصة */
.bs-incomplete {
	margin: .75rem 0 0; padding: .7rem .9rem; font-size: .84rem; line-height: 1.6;
	background: #fff4e5; border: 1px solid #f0d5a8; border-radius: 9px; color: #7a5a12; font-weight: 600;
}
/* الأسعار أثناء التحديث تبقى ظاهرة لكن باهتة */
.bs-prices.is-loading { opacity: .45; transition: opacity .15s; pointer-events: none; }