/* ================================================================
   NEWORDER — Apple HIG 2026 · Liquid Glass additions
   ================================================================ */

/* ================================================================
   10. NEWORDER PAGE — Apple HIG 2026 additions
   يُضاف في نهاية unified-design-system.css
   ================================================================ */

/* ── HIG Alerts (تحل محل .alert البسيطة في هذه الصفحة) ───────── */
.hig-alert {
  border-radius:   16px;
  padding:         14px 16px;
  margin-bottom:   12px;
  display:         flex;
  align-items:     flex-start;
  gap:             12px;
  font-size:       13px;
  line-height:     1.6;
  border:          0.5px solid transparent;
}
.hig-alert-success {
  background: rgba(1, 183, 128, 0.09);
  border-color: rgba(1, 183, 128, 0.22);
}
.hig-alert-danger {
  background: rgba(255, 59, 48, 0.07);
  border-color: rgba(255, 59, 48, 0.18);
}
.hig-alert-icon {
  width:            28px;
  height:           28px;
  border-radius:    50%;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  font-size:        12px;
}
.hig-alert-success .hig-alert-icon { background: rgba(1, 183, 128, 0.14); color: #0a7c4e; }
.hig-alert-danger  .hig-alert-icon { background: rgba(255, 59, 48, 0.12); color: #c0392b; }
.hig-alert-body  { flex: 1; color: var(--ink-primary); }
.hig-alert-close {
  background: none;
  border:     none;
  color:      var(--ink-tertiary);
  font-size:  14px;
  cursor:     pointer;
  padding:    0;
  flex-shrink: 0;
  margin-top: 1px;
  transition: color var(--dur-fast);
}
.hig-alert-close:hover { color: var(--ink-primary); }

.success-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  background:     rgba(1, 183, 128, 0.12);
  color:          #0a7c4e;
  font-size:      11px;
  font-weight:    700;
  padding:        3px 10px;
  border-radius:  var(--bs-border-radius-pill);
  letter-spacing: 0.02em;
  margin-bottom:  4px;
}
[data-bs-theme="dark"] .success-pill { color: #34c759; background: rgba(52, 199, 89, 0.15); }

/* ── Network Filter ───────────────────────────────────────────── */
.hig-filter-wrap {
  background:              var(--glass-bg);
  backdrop-filter:         var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:                  0.5px solid var(--glass-border);
  border-radius:           20px;
  padding:                 14px 16px;
  box-shadow:              var(--shadow-sm);
}
.hig-filter-row {
  display:     flex;
  gap:         8px;
  flex-wrap:   wrap;
  align-items: center;
}

.net-btn {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            5px;
  padding:        10px 11px;
  min-width:      60px;
  border-radius:  16px;
  border:         0.5px solid rgba(255, 255, 255, 0.7);
  background:     rgba(255, 255, 255, 0.35);
  cursor:         pointer;
  font-family:    var(--hig-font);
  position:       relative;
  transition:
    background-color var(--dur-base) var(--ease-spring),
    transform        var(--dur-fast) var(--ease-spring),
    box-shadow       var(--dur-base) var(--ease-smooth);
}
.net-btn:hover {
  background: rgba(255, 255, 255, 0.65);
  transform:  translateY(-2px) scale(1.04);
  box-shadow: var(--shadow-md);
}
.net-btn:active { transform: scale(0.95); }
.net-btn.active {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow-md), 0 1px 0 rgba(255, 255, 255, 1) inset;
  border-color: rgba(255, 255, 255, 0.92);
}
[data-bs-theme="dark"] .net-btn {
  background:   rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .net-btn:hover  { background: rgba(255, 255, 255, 0.13); }
[data-bs-theme="dark"] .net-btn.active { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.2); }

.net-ic {
  width:            34px;
  height:           34px;
  border-radius:    11px;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        15px;
  color:            #fff;
  flex-shrink:      0;
}
.net-lbl {
  font-size:      10px;
  font-weight:    500;
  color:          var(--ink-secondary);
  white-space:    nowrap;
  letter-spacing: -0.01em;
}
.net-btn.active .net-lbl { color: var(--ink-primary); font-weight: 600; }

.net-dot {
  position:     absolute;
  top:          7px;
  right:        7px;
  width:        6px;
  height:       6px;
  border-radius: 50%;
  background:   var(--bs-primary);
  opacity:      0;
  transition:   opacity var(--dur-fast);
  box-shadow:   0 0 4px rgba(var(--bs-primary-rgb), 0.5);
}
.net-btn.active .net-dot { opacity: 1; }
html[dir="rtl"] .net-dot { right: auto; left: 7px; }

/* Platform brand colors — read-only, لا تعتمد على theme */
.ic-all { background: linear-gradient(135deg, #007aff, #5856d6); }
.ic-ig  { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.ic-fb  { background: #1877f2; }
.ic-tt  { background: #010101; }
.ic-yt  { background: #ff0000; }
.ic-tw  { background: #000000; }
.ic-rd  { background: #ff4500; }
.ic-li  { background: #0077b5; }
.ic-tg  { background: #229ed9; }
.ic-pt  { background: #e60023; }
.ic-sc  { background: #fffc00; }
.ic-sp  { background: #1db954; }

/* ── Form Card (يرث glass من المتغيرات الموجودة) ─────────────── */
.hig-form-card {
  background:              var(--glass-bg);
  backdrop-filter:         var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:                  0.5px solid var(--glass-border);
  border-radius:           24px;
  overflow:                hidden;
  box-shadow:              var(--shadow-md);
}
.hig-fc-header {
  padding:       14px 18px 12px;
  border-bottom: 0.5px solid var(--glass-border);
}
.hig-fc-body { padding: 20px 18px; }

/* ── Segmented Tabs (بديل nav-pills لهذه الصفحة فقط) ─────────── */
.hig-seg-tabs {
  display:       flex;
  gap:           3px;
  background:    rgba(0, 0, 0, 0.07);
  border-radius: 13px;
  padding:       3px;
}
[data-bs-theme="dark"] .hig-seg-tabs { background: rgba(255, 255, 255, 0.08); }

.hig-seg-tab {
  flex:            1;
  padding:         7px 8px;
  border-radius:   11px;
  border:          none;
  background:      transparent;
  font-size:       12.5px;
  font-weight:     500;
  color:           var(--ink-secondary);
  cursor:          pointer;
  font-family:     var(--hig-font);
  letter-spacing:  -0.01em;
  white-space:     nowrap;
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             5px;
  min-height:      auto;
  transition:
    background-color var(--dur-base) var(--ease-smooth),
    color            var(--dur-base) var(--ease-smooth),
    box-shadow       var(--dur-base) var(--ease-smooth);
}
.hig-seg-tab i { font-size: 11px; }
.hig-seg-tab.active {
  background: rgba(255, 255, 255, 0.88);
  color:      var(--ink-primary);
  font-weight: 600;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1), 0 0.5px 0 rgba(255, 255, 255, 0.9) inset;
}
[data-bs-theme="dark"] .hig-seg-tab.active {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ── Form Fields (يكمل فوق .form-control الموجود) ────────────── */
.hig-fg { margin-bottom: 14px; }

.hig-flabel {
  font-size:      11px;
  font-weight:    600;
  color:          var(--ink-tertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom:  6px;
  display:        flex;
  align-items:    center;
  gap:            5px;
}
.hig-flabel i { font-size: 10px; color: var(--bs-primary); width: 12px; text-align: center; }

/* .hig-fi = form-control بتصميم glass */
.hig-fi {
  width:       100%;
  height:      44px;
  background:  rgba(255, 255, 255, 0.5);
  border:      0.5px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding:     0 14px;
  font-size:   14px;
  color:       var(--ink-primary);
  font-family: var(--hig-font);
  outline:     none;
  appearance:  none;
  -webkit-appearance: none;
  transition:
    background-color var(--dur-base) var(--ease-smooth),
    border-color     var(--dur-base) var(--ease-smooth),
    box-shadow       var(--dur-base) var(--ease-smooth);
}
.hig-fi:focus {
  background:  rgba(255, 255, 255, 0.82);
  border-color: rgba(var(--bs-primary-rgb), 0.45);
  box-shadow:  0 0 0 3px rgba(var(--bs-primary-rgb), 0.13);
}
.hig-fi[readonly] {
  background: rgba(0, 0, 0, 0.025);
  color:      var(--ink-secondary);
  cursor:     default;
}
[data-bs-theme="dark"] .hig-fi {
  background:   rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.1);
  color:        var(--ink-primary);
}
[data-bs-theme="dark"] .hig-fi:focus {
  background: rgba(255, 255, 255, 0.12);
}

/* Input with icon prefix */
.hig-fi-icon { position: relative; }
.hig-fi-icon > i {
  position:        absolute;
  inset-inline-start: 13px;
  top:             50%;
  transform:       translateY(-50%);
  color:           var(--ink-tertiary);
  font-size:       12px;
  pointer-events:  none;
  z-index:         1;
}
.hig-fi-icon .hig-fi { padding-inline-start: 36px; }

/* Select wrapper */
.hig-sel-wrap { position: relative; }
.hig-sel-wrap::after {
  content:         "\f078";
  font-family:     "Font Awesome 6 Free";
  font-weight:     900;
  position:        absolute;
  inset-inline-end: 13px;
  top:             50%;
  transform:       translateY(-50%);
  color:           var(--ink-tertiary);
  font-size:       10px;
  pointer-events:  none;
}
.hig-sel-wrap .hig-fi { padding-inline-end: 32px; }

/* ── Charge Display ───────────────────────────────────────────── */
.hig-charge-glass {
  background:   rgba(var(--bs-primary-rgb), 0.06);
  border:       0.5px solid rgba(var(--bs-primary-rgb), 0.18);
  border-radius: 14px;
  padding:      14px 16px;
  display:      flex;
  align-items:  center;
  justify-content: space-between;
}
.hig-charge-lbl {
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--ink-tertiary);
  margin-bottom:  4px;
}
.hig-charge-num {
  font-size:      24px;
  font-weight:    700;
  color:          var(--ink-primary);
  letter-spacing: -0.04em;
  line-height:    1;
}
.hig-charge-auto {
  font-size: 10px;
  color:     var(--ink-tertiary);
  margin-top: 2px;
}

/* ── Terms (يكمل فوق .form-check الموجود) ────────────────────── */
.hig-terms-row {
  display:      flex;
  align-items:  flex-start;
  gap:          10px;
  padding:      10px 14px;
  background:   rgba(0, 0, 0, 0.025);
  border-radius: 12px;
  border:       0.5px solid var(--glass-border);
}
[data-bs-theme="dark"] .hig-terms-row { background: rgba(255, 255, 255, 0.03); }

/* .hig-cb يرث منطق form-check-input لكن بشكل glass */
.hig-cb {
  width:         18px;
  height:        18px;
  border-radius: 5px;
  border:        1.5px solid var(--ink-tertiary);
  background:    rgba(255, 255, 255, 0.6);
  cursor:        pointer;
  flex-shrink:   0;
  margin-top:    1px;
  appearance:    none;
  -webkit-appearance: none;
  transition:    background-color var(--dur-fast), border-color var(--dur-fast);
}
.hig-cb:checked {
  background-color: #007aff;
  border-color:     #007aff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 11' width='13' height='11' fill='none'%3e%3cpath d='M11.0426 1.02893C11.3258 0.695792 11.8254 0.655283 12.1585 0.938451C12.4917 1.22162 12.5322 1.72124 12.249 2.05437L5.51985 9.97104C5.23224 10.3094 4.72261 10.3451 4.3907 10.05L0.828197 6.88335C0.50141 6.59288 0.471975 6.09249 0.762452 5.7657C1.05293 5.43891 1.55332 5.40948 1.88011 5.69995L4.83765 8.32889L11.0426 1.02893Z' fill='%23ffffff'/%3e%3c/svg%3e");
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     10px;
}
.hig-terms-txt { font-size: 12.5px; color: var(--ink-secondary); line-height: 1.55; }
.hig-terms-txt a { color: var(--bs-primary); text-decoration: none; font-weight: 500; }
.hig-terms-txt a:hover { text-decoration: underline; }

/* ── Submit Button (يكمل فوق .btn-primary الموجود) ───────────── */
.hig-submit {
  width:         100%;
  height:        50px;
  border-radius: 14px;
  border:        none;
  background:    linear-gradient(180deg, #2eb5ff 0%, var(--bs-primary) 100%);
  color:         #fff;
  font-size:     15px;
  font-weight:   600;
  letter-spacing: -0.01em;
  cursor:        pointer;
  font-family:   var(--hig-font);
  display:       flex;
  align-items:   center;
  justify-content: center;
  gap:           8px;
  margin-top:    16px;
  box-shadow:    0 4px 18px rgba(var(--bs-primary-rgb), 0.32),
                 0 1px 0 rgba(255, 255, 255, 0.22) inset;
  transition:
    transform    var(--dur-base) var(--ease-spring),
    box-shadow   var(--dur-base) var(--ease-smooth);
}
.hig-submit:hover {
  transform:  translateY(-1px) scale(1.01);
  box-shadow: 0 8px 28px rgba(var(--bs-primary-rgb), 0.38),
              0 1px 0 rgba(255, 255, 255, 0.22) inset;
}
.hig-submit:active { transform: scale(0.97); }

/* ── Empty State ──────────────────────────────────────────────── */
.hig-empty-state {
  text-align: center;
  padding:    48px 24px;
  color:      var(--ink-tertiary);
}
.hig-empty-state i {
  font-size:    30px;
  margin-bottom: 12px;
  display:      block;
  opacity:      0.45;
}
.hig-empty-state p { font-size: 13px; line-height: 1.55; }

/* ── Right Column ─────────────────────────────────────────────── */
.hig-search-orders {
  background:              var(--glass-bg);
  backdrop-filter:         var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:                  0.5px solid var(--glass-border);
  border-radius:           16px;
  padding:                 11px 14px;
  display:                 flex;
  align-items:             center;
  gap:                     10px;
  box-shadow:              var(--shadow-sm);
}
.hig-search-orders > i { color: var(--ink-tertiary); font-size: 13px; flex-shrink: 0; }
.hig-search-orders input {
  flex:        1;
  background:  none;
  border:      none;
  outline:     none;
  font-size:   13.5px;
  color:       var(--ink-primary);
  font-family: var(--hig-font);
}
.hig-search-orders input::placeholder { color: var(--ink-tertiary); }

.hig-go-btn {
  width:            30px;
  height:           30px;
  border-radius:    9px;
  background:       rgba(var(--bs-primary-rgb), 0.1);
  border:           none;
  color:            var(--bs-primary);
  font-size:        12px;
  cursor:           pointer;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  flex-shrink:      0;
  text-decoration:  none;
  transition:       background-color var(--dur-fast);
}
.hig-go-btn:hover  { background: rgba(var(--bs-primary-rgb), 0.18); color: var(--bs-primary); }

.hig-placeholder-card {
  background:              var(--glass-bg);
  backdrop-filter:         var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:                  0.5px solid var(--glass-border);
  border-radius:           20px;
  padding:                 32px 20px;
  text-align:              center;
  box-shadow:              var(--shadow-sm);
}
.hig-placeholder-card i {
  font-size:    26px;
  color:        var(--ink-tertiary);
  opacity:      0.4;
  margin-bottom: 10px;
  display:      block;
}
.hig-placeholder-card p { font-size: 12.5px; color: var(--ink-tertiary); line-height: 1.5; }

.hig-info-card {
  background:              var(--glass-bg);
  backdrop-filter:         var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:                  0.5px solid var(--glass-border);
  border-radius:           20px;
  overflow:                hidden;
  box-shadow:              var(--shadow-sm);
}
.hig-ic-header {
  padding:       13px 16px;
  border-bottom: 0.5px solid var(--glass-border);
  display:       flex;
  align-items:   center;
  gap:           8px;
}
.hig-ic-header > i { color: var(--bs-primary); font-size: 13px; }
.hig-ic-title {
  font-size:      13px;
  font-weight:    600;
  color:          var(--ink-primary);
  letter-spacing: -0.02em;
}
.hig-ic-row {
  padding:         11px 16px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  border-bottom:   0.5px solid rgba(0, 0, 0, 0.04);
}
[data-bs-theme="dark"] .hig-ic-row { border-bottom-color: rgba(255, 255, 255, 0.05); }
.hig-ic-key {
  font-size:   12.5px;
  color:       var(--ink-secondary);
  display:     flex;
  align-items: center;
  gap:         7px;
  flex-shrink: 0;
}
.hig-ic-key i { font-size: 11px; color: var(--bs-primary); width: 13px; text-align: center; }
.hig-ic-val {
  font-size:   12.5px;
  font-weight: 600;
  color:       var(--ink-primary);
  text-align:  right;
}

.hig-pill-rate {
  background:     rgba(var(--bs-primary-rgb), 0.1);
  color:          var(--pill-orders-ink);
  font-size:      11px;
  font-weight:    700;
  padding:        3px 10px;
  border-radius:  var(--bs-border-radius-pill);
  letter-spacing: 0.01em;
}
.hig-pill-ok {
  background:    var(--pill-balance-bg);
  color:         var(--pill-balance-ink);
  font-size:     11px;
  font-weight:   700;
  padding:       3px 10px;
  border-radius: var(--bs-border-radius-pill);
}
.hig-pill-no {
  background:    rgba(142, 142, 147, 0.1);
  color:         var(--ink-secondary);
  font-size:     11px;
  font-weight:   700;
  padding:       3px 10px;
  border-radius: var(--bs-border-radius-pill);
}

.hig-desc-area {
  padding:    13px 16px;
  border-top: 0.5px solid var(--glass-border);
}
.hig-desc-lbl {
  font-size:      10px;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color:          var(--ink-tertiary);
  margin-bottom:  6px;
}
.hig-desc-txt { font-size: 12.5px; color: var(--ink-secondary); line-height: 1.65; }

/* ── Bottom Note Card ─────────────────────────────────────────── */
.hig-note-card {
  background:              var(--glass-bg);
  backdrop-filter:         var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:                  0.5px solid var(--glass-border);
  border-radius:           16px;
  padding:                 13px 16px;
  display:                 flex;
  align-items:             flex-start;
  gap:                     10px;
  box-shadow:              var(--shadow-sm);
  font-size:               12.5px;
  color:                   var(--ink-secondary);
  line-height:             1.6;
}
.hig-note-card > i { color: var(--bs-primary); font-size: 13px; margin-top: 1px; flex-shrink: 0; }
.hig-note-card a { color: var(--bs-primary); text-decoration: none; font-weight: 500; }
.hig-note-card a:hover { text-decoration: underline; }

/* ── Responsive neworder ──────────────────────────────────────── */
@media (max-width: 991.98px) {
  .hig-filter-row  { gap: 6px; }
  .net-btn         { min-width: 52px; padding: 8px 9px; }
  .net-ic          { width: 30px; height: 30px; font-size: 13px; }
  .net-lbl         { font-size: 9px; }
  .hig-seg-tab     { font-size: 11.5px; padding: 6px 6px; }
  .hig-charge-num  { font-size: 20px; }
}

@media (max-width: 600px) {
  .hig-filter-wrap { border-radius: 16px; padding: 10px 12px; }
  .net-btn         { min-width: 48px; padding: 7px 8px; }
  .net-lbl         { display: none; }
  .hig-form-card   { border-radius: 18px; }
  .hig-fc-body     { padding: 16px 14px; }
}