/* =========================================
   دار المحبرة — نافذة الشحن وملخصه في السلة
   ========================================= */

.ship-form [hidden],
.ship-status[hidden],
.combo__list[hidden],
.ship-summary[hidden],
.ship-note[hidden] { display: none !important; }

.shipping-modal { max-inline-size: 520px; }

/* ----- حالة التحميل / الخطأ ----- */
.ship-status {
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}
.ship-status[data-kind="error"] .ship-status__text { color: #b83232; }

/* ----- الفورم ----- */
.ship-form {
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ship-field { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; }

.ship-field > label,
.ship-fieldset > legend {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ink-soft);
  padding: 0;
}

.field-required-note {
  color: rgba(192, 57, 43, 0.68);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.field-optional-note {
  color: rgba(107, 128, 101, 0.8);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.field-label-separator {
  color: var(--color-ink-muted);
  font-weight: var(--weight-regular);
}

.ship-fieldset { border: 0; margin: 0; padding: 0; }
.ship-fieldset > legend { margin-block-end: var(--space-2); }

.ship-input {
  inline-size: 100%;
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  background-color: var(--color-white);
  border: 1px solid rgba(143, 162, 138, 0.55);
  border-radius: var(--radius-md);
  font-size: var(--text-base);   /* 16px يمنع تكبير iOS عند التركيز */
  line-height: var(--leading-normal);
  color: var(--color-ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.ship-input::placeholder { color: var(--color-ink-muted); opacity: 0.8; }
.ship-input:focus { border-color: var(--color-sage); outline: none; box-shadow: 0 0 0 3px rgba(143, 162, 138, 0.25); }
.ship-input[aria-invalid="true"] { border-color: #b83232; box-shadow: 0 0 0 3px rgba(184, 50, 50, 0.12); }
textarea.ship-input { resize: vertical; min-block-size: 5.5rem; }

.ship-hint { font-size: var(--text-xs); color: var(--color-ink-muted); line-height: var(--leading-normal); }

.ship-error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: rgba(184, 50, 50, 0.08);
  border: 1px solid rgba(184, 50, 50, 0.3);
  color: #8f2727;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ship-actions { padding-block-start: var(--space-2); }

/* ----- Combobox: القائمة تتمدد داخل التدفق (لا تُقصّ داخل النافذة على الجوال) ----- */
.combo { position: relative; }
.combo__list {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: var(--space-1);
  max-block-size: 14rem;
  overflow-y: auto;
  background-color: var(--color-white);
  border: 1px solid rgba(143, 162, 138, 0.55);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overscroll-behavior: contain;
}
.combo__option,
.combo__empty {
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-tight);
}
.combo__option { cursor: pointer; color: var(--color-ink); }
.combo__option.is-active,
.combo__option:hover { background-color: var(--color-sage-light); color: var(--color-sage-darker); }
.combo__empty { color: var(--color-ink-muted); }

/* ----- الشركات (راديو) ----- */
.ship-carriers { display: flex; flex-direction: column; gap: var(--space-2); }

.ship-carrier {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(143, 162, 138, 0.45);
  border-radius: var(--radius-md);
  background-color: var(--color-white);
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.ship-carrier:hover { border-color: var(--color-sage); }
.ship-carrier.is-selected {
  border-color: var(--color-sage);
  background-color: rgba(199, 211, 192, 0.35);
  box-shadow: 0 0 0 1px var(--color-sage);
}
.ship-carrier input[type="radio"] {
  accent-color: var(--color-sage-dark);
  inline-size: 18px;
  block-size: 18px;
  flex-shrink: 0;
}
.ship-carrier__name { font-weight: var(--weight-semibold); font-size: var(--text-base); color: var(--color-ink); }
.ship-carrier__price {
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  color: var(--color-sage-dark);
  direction: ltr;
}

.ship-eta {
  margin-block-start: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-gold-light);
  color: var(--color-gold-dark);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
}

.ship-note {
  margin-block-start: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

/* ----- ملخص الشحن داخل السلة ----- */
.ship-summary {
  inline-size: 100%;
  margin-block-start: 0;
}
.ship-summary__actions {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  inline-size: 100%;
}
.ship-summary__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;                         /* عرض متساوٍ للزرين */
  min-inline-size: 0;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-sage-dark);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-sage-dark);
  background-color: transparent;
  cursor: pointer;
  text-decoration: none;
  text-underline-offset: 0;
}
.ship-summary__action svg { width: 14px; height: 14px; flex-shrink: 0; }
.ship-summary__action:hover { background-color: var(--color-sage-light); }
.ship-summary__action--delete {
  border-color: var(--color-danger, #c0392b);
  color: var(--color-danger, #c0392b);
}
.ship-summary__action--delete:hover { background-color: rgba(192, 57, 41, 0.08); }

@media (min-width: 640px) {
  .ship-form { padding: var(--space-6) var(--space-8) var(--space-8); }
}