/* نظام تصميم موحد للموقع: ألوان، كروت، حقول، أزرار ورسائل. */
:root {
  --site-bg: #f5f8fc;
  --site-surface: #ffffff;
  --site-surface-alt: #eef5fb;
  --site-text: #172b44;
  --site-muted: #64748b;
  --site-border: #d8e5f0;
  --site-primary: #1677b9;
  --site-success: #087a57;
  --site-danger: #b42345;
  --site-radius: 14px;
}

body { background: var(--site-bg); color: var(--site-text); }
.site-surface, .card:not(.cart-card) { border-color: var(--site-border); border-radius: var(--site-radius); }
.btn { border-radius: 10px; font-weight: 700; }
.form-control, .form-select { border-color: var(--site-border); border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: #38bdf8; box-shadow: 0 0 0 .2rem rgba(56,189,248,.16); }
.alert { border-radius: 12px; border-width: 1px; }

body.dark-theme {
  --site-bg: #080f1d;
  --site-surface: #111d30;
  --site-surface-alt: #0b1525;
  --site-text: #e7eef9;
  --site-muted: #aebed3;
  --site-border: #2a405f;
}
body.dark-theme .card:not(.cart-card),
body.dark-theme .modal-content,
body.dark-theme .dropdown-menu { background: var(--site-surface); color: var(--site-text); border-color: var(--site-border); }
body.dark-theme .text-muted { color: var(--site-muted) !important; }
body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme .input-group-text { background: var(--site-surface-alt); color: var(--site-text); border-color: #36516f; }
body.dark-theme .form-control::placeholder { color: #8295ae; }
body.dark-theme .dropdown-item { color: #dbeafe; }
body.dark-theme .dropdown-item:hover { background: #1b3150; color: #fff; }
body.dark-theme .alert-success { background: #123f31; color: #b9f4d4; border-color: #287a56; }
body.dark-theme .alert-danger { background: #4b1c2a; color: #ffc1cd; border-color: #873045; }

/* تحميل موحد لأي زر يقوم بإرسال نموذج. */
.site-button-loading { position: relative; pointer-events: none; opacity: .72; }
.site-button-loading::after { content: ''; width: 15px; height: 15px; margin-inline-start: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; display: inline-block; vertical-align: -2px; animation: site-spin .65s linear infinite; }
@keyframes site-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* Mobile-first polish shared across the whole site. */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { min-width: 0; overflow-x: hidden; }
  img, video, iframe, canvas { max-width: 100%; }
  .container, .container-fluid { width: 100%; max-width: 100%; padding-inline: 12px; }
  main, .main-content, .content-wrapper { min-width: 0; }

  h1 { font-size: clamp(1.35rem, 7vw, 1.8rem); }
  h2 { font-size: clamp(1.18rem, 6vw, 1.5rem); }
  h3 { font-size: clamp(1.04rem, 5vw, 1.28rem); }

  .card, .site-surface { border-radius: 13px; }
  .card-body { padding: .9rem; }
  .btn { min-height: 40px; padding: .5rem .72rem; font-size: .82rem; }
  .form-control, .form-select { min-height: 43px; font-size: 16px; }
  textarea.form-control { min-height: 104px; }

  .d-flex.gap-2, .d-flex.gap-3, .action-buttons, .button-group { flex-wrap: wrap; }
  .btn-group { flex-wrap: wrap; gap: .35rem; }
  .btn-group > .btn { border-radius: 9px !important; }

  .table-responsive { width: 100%; -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .table { min-width: 650px; font-size: .78rem; }
  .table th, .table td { padding: .62rem .55rem !important; white-space: nowrap; }

  .modal-dialog { width: calc(100% - 22px); max-width: 520px; margin: 11px auto; }
  .modal-content { max-height: calc(100vh - 22px); overflow: auto; border-radius: 16px; }
  .modal-header, .modal-body, .modal-footer { padding: .9rem; }

  .pagination { gap: .28rem; }
  .pagination .page-link { min-width: 34px; padding: .42rem .52rem; text-align: center; }
  .dropdown-menu { max-width: calc(100vw - 24px); }
  .alert { padding: .78rem .9rem; font-size: .84rem; }
}

@media (max-width: 480px) {
  .container, .container-fluid { padding-inline: 9px; }
  .card-body { padding: .78rem; }
  .btn { min-height: 38px; font-size: .76rem; }
  .modal-dialog { width: calc(100% - 14px); margin: 7px auto; }
  .table { font-size: .73rem; }
}