/* V13.1: reliable Arabic shaping without a third-party font request. */
@font-face {
  font-family: "Finro Arabic";
  src: url("../assets/noto-sans-arabic.woff") format("woff");
  font-style: normal; font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;
}
:root {
  --font: "Finro Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}
body { font-size: 16px; }
.address-field-value { font-family: "Finro Arabic", var(--mono); }
.field-label, .field-hint, .shipping-category-hint, .shipping-rate-info,
.shipping-category-choice small, .dimensions-toggle-copy small, .calc-hint,
.quote small { font-size: 14px; }
/* V13: consistent mobile selectors, country flags and explicit optional tools. */
/* Keep a dialog's title and close control visible while long forms scroll. */
.modal-card {
  display: flex; flex-direction: column; overflow: hidden;
  max-height: calc(100vh - 36px); max-height: calc(100dvh - 36px);
}
.modal-head, .modal-actions { flex-shrink: 0; }
.modal-head .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
.modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
html { scroll-padding-top: 84px; }
.photos-picker-field .photo-thumb-del {
  top: 0; left: 0; width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  background: transparent; isolation: isolate;
}
.photos-picker-field .photo-thumb-del::before {
  content: ''; position: absolute; inset: 8px; z-index: -1;
  border-radius: 50%; background: #30363c;
}
.photos-picker-field .photo-thumb-del:hover::before { background: #9e2727; }
.fw-select { position: relative; width: 100%; min-width: 0; }
.fw-native-select {
  position: absolute !important; width: 1px !important; height: 1px !important;
  min-width: 1px !important; min-height: 1px !important; max-width: 1px !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; opacity: 0;
  clip-path: inset(50%); pointer-events: none;
}
.fw-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 52px; padding: 12px 16px;
  border: 1px solid #89939e; border-radius: 10px; background: #fff; color: #242a32;
  font: inherit; font-size: 16px; line-height: 1.5; text-align: start; cursor: pointer;
  transition: border-color .15s, background-color .15s; box-shadow: none;
}
.fw-select-trigger:hover:not(:disabled) { border-color: #62788f; background: #fcfdff; }
.fw-select-trigger:focus-visible { outline: 2px solid #2783de; outline-offset: 3px; }
.fw-select-trigger[aria-expanded="true"] { border-color: #2783de; background: #f7fbff; }
.fw-select-trigger[aria-invalid="true"] { border-color: #ba3934; outline-color: #ba3934; }
.fw-select-trigger:disabled { background: #f3f4f6; color: #6b727b; cursor: not-allowed; }
.fw-select-value, .fw-select-option-label { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.fw-select-text { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.fw-select-chevron { display: inline-flex; flex: 0 0 18px; transform: rotate(-90deg); color: #5d6b7d; }
.fw-select-trigger[aria-expanded="true"] .fw-select-chevron { transform: rotate(90deg); }
.fw-select--filter { width: auto; min-width: 160px; max-width: 300px; }
.fw-select--filter .fw-select-trigger { min-height: 44px; padding: 8px 12px; }
.fw-select-popup {
  position: fixed; z-index: 100005; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #89939e; border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 8px 24px rgba(20,40,64,.10);
  padding: 6px; overflow: hidden; font: inherit; color: #242a32;
}
.fw-select-list { position: relative; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.fw-select-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 12px; border-radius: 8px; font-size: 16px; line-height: 1.5;
  text-align: start; cursor: pointer; margin: 2px 0;
}
.fw-select-option.is-selected { font-weight: 650; color: #155d9d; background: #eef6fd; }
.fw-select-option.is-active, .fw-select-option:hover:not([aria-disabled="true"]) { background: #e5f2fc; color: #144f83; }
.fw-select-option[aria-disabled="true"] { cursor: not-allowed; color: #767c85; background: #f7f8fa; }
.fw-select-option > svg, .fw-select-check-space { flex: 0 0 18px; width: 18px; }
.fw-select-search-wrap { display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px; border-bottom: 1px solid #e7eaf0; margin-bottom: 4px; }
.fw-select-search-wrap > svg { flex: 0 0 18px; color: #65758a; }
.fw-select-search { width: 100%; min-width: 0; min-height: 44px; border: 0; border-radius: 6px; font: inherit; font-size: 16px; padding: 8px; background: #f6f8fb; color: #242a32; }
.fw-select-search:focus-visible { outline: 2px solid #2783de; outline-offset: 0; }
.fw-select-empty { padding: 16px; color: #626d7a; font-size: 14px; }
.fw-select-flag, .warehouse-flag {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-variant: normal; text-transform: none; letter-spacing: 0; line-height: 1;
}
.fw-select-flag { display: inline-block; flex: 0 0 28px; font-size: 24px; }
.address-accordion-icon.warehouse-flag { font-size: 32px; border-radius: 12px; background: #f3f6fa; }
.country-chip { border-radius: 8px; padding: 6px 9px; background: #f2f6fa; color: #285277; letter-spacing: .02em; }
.stat-icon.warehouse-flag { font-size: 24px; }
.address-code-locked input[readonly] { background: #f2f6fa; color: #315372; border-color: #d6e2ed; cursor: default; }
.address-code-locked .field-label::after { content: " · ثابت"; color: #446988; font-size: 14px; font-weight: 400; }
.address-code-suffix .field-hint, .address-code-locked .field-hint { color: #526c82; }
.dimensions-toggle { padding: 0 !important; border: 1px solid #6789a8 !important; border-radius: 12px; overflow: hidden; background: #fff; margin: 8px 0; }
.dimensions-toggle > summary {
  display: flex !important; align-items: center; gap: 12px; list-style: none; cursor: pointer;
  padding: 16px !important; min-height: 76px; background: #f4f9fd; color: #245475;
  border: 0 !important;
}
.dimensions-toggle > summary::-webkit-details-marker { display: none; }
.dimensions-toggle > summary::marker { content: ""; }
.dimensions-toggle > summary:focus-visible { outline: 2px solid #2783de; outline-offset: -3px; }
.dimensions-toggle-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 8px; background: #e5f2fc; }
.dimensions-toggle-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.dimensions-toggle-copy strong { font-size: 16px; line-height: 1.5; }
.dimensions-toggle-copy small { font-size: 14px; line-height: 1.5; color: #4d667b; }
.dimensions-toggle-action { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; font-size: 26px; font-weight: 400; }
.dimensions-minus, .dimensions-toggle[open] .dimensions-plus { display: none; }
.dimensions-toggle[open] .dimensions-minus { display: inline; }
.dimensions-toggle[open] > summary { border-bottom: 1px solid #dbe6ef !important; }
.dimensions-toggle .dims-grid { padding: 16px; gap: 16px; margin: 0; }
.dimensions-toggle > small { display: block; margin: 0 16px 16px; font-size: 14px; line-height: 1.7; color: #66717e; }
.unknown-create-form .photos-picker-field { grid-column: 1 / -1; }
.unknown-photo-admin { margin: 16px 0; padding-top: 16px; border-top: 1px solid #e5e8ed; }
.unknown-photo-admin > h3 { margin-bottom: 12px; font-size: 16px; }
.unknown-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.unknown-photo-tile { position: relative; min-width: 0; border: 1px solid #e0e5eb; border-radius: 10px; overflow: hidden; background: #f7f8fa; }
.unknown-photo-open { display: block; border: 0; padding: 0; width: 100%; cursor: zoom-in; background: transparent; }
.unknown-photo-open img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.unknown-photo-remove { position: absolute; top: 4px; left: 4px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #dce1e8; border-radius: 8px; background: #fff; color: #ab3535; cursor: pointer; }
.unknown-photo-open:focus-visible, .unknown-photo-remove:focus-visible { outline: 2px solid #2783de; outline-offset: -3px; }
.unknown-gallery-cover { position: relative; }
.unknown-photo-count { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 4px; background: #fff; color: #31506c; border: 1px solid #d8e2ec; border-radius: 8px; padding: 6px 10px; font-size: 14px; }
.unknown-photo-viewer { display: grid; gap: 24px; }
.unknown-photo-viewer figure { margin: 0; min-width: 0; }
.unknown-photo-viewer img { width: 100%; height: auto; max-height: 68vh; object-fit: contain; border-radius: 8px; background: #f7f8fa; }
.unknown-photo-viewer figcaption { text-align: center; font-size: 14px; color: #67717e; margin-top: 8px; }
.email-notification-panel { margin-top: 24px; padding: 20px; border: 1px solid #dce4ed; border-radius: 12px; background: #fbfcfe; }
.email-notification-panel h3 { margin: 0 0 8px; font-size: 18px; }
.email-notification-panel p, .email-notification-panel small { font-size: 14px; line-height: 1.7; }
.email-notification-panel .btn { margin-top: 12px; }
.email-notification-history { list-style: none; padding: 0; margin: 16px 0 0; border-top: 1px solid #e0e6ed; }
.email-notification-history li { padding: 12px 0; border-bottom: 1px solid #e0e6ed; font-size: 14px; }
.email-notification-history strong { display: block; }
@media (max-width: 600px) {
  .filters > .fw-select { min-width: 0; max-width: none; width: 100%; flex: 1 1 100%; }
  .fw-select-popup { border-radius: 12px; }
  .email-notification-panel { padding: 16px; }
}
@media (max-width: 480px) { .dimensions-toggle .dims-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fw-select-trigger { transition: none; } }