/* Kargarin Modernizer UI Kit
   Design tokens + reusable components for the CI3 storefront */

html[data-theme="dark"] {
  color-scheme: dark;
  --kg-ink: #f4f4f5;
  --kg-muted: #b4b0c4;
  --kg-line: rgba(255, 255, 255, 0.12);
  --kg-paper: #121018;
  --kg-card: #1c1828;
  --kg-primary-50: #2a2444;
  --kg-accent-50: #3a2a12;
  --kg-danger-50: #3a1518;
  --kg-success-50: #143018;
  --kg-info-50: #152436;
  --kg-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  --kg-focus: #ff9800;
}

:root {
  --kg-font: Vazirmatn, IRANYekan, Tahoma, sans-serif;
  --kg-primary: #2a224e;
  --kg-primary-soft: #3a3166;
  --kg-primary-50: #eeebf7;
  --kg-accent: #ff9800;
  --kg-accent-dark: #e65100;
  --kg-accent-ink: #9a4d00;
  --kg-accent-50: #fff3e0;
  --kg-ink: #1f1b33;
  --kg-muted: #6b6780;
  --kg-line: rgba(42, 34, 78, 0.12);
  --kg-paper: #f6f4fb;
  --kg-card: #ffffff;
  --kg-danger: #d32f2f;
  --kg-danger-50: #fdecea;
  --kg-success: #2e7d32;
  --kg-success-50: #e8f5e9;
  --kg-info: #1565c0;
  --kg-info-50: #e3f2fd;
  --kg-warn: #c9a227;
  --kg-shadow: 0 10px 30px rgba(42, 34, 78, 0.1);
  --kg-shadow-lg: 0 18px 40px rgba(42, 34, 78, 0.16);
  --kg-radius: 16px;
  --kg-radius-sm: 10px;
  --kg-radius-pill: 999px;
  --kg-space-1: 4px;
  --kg-space-2: 8px;
  --kg-space-3: 12px;
  --kg-space-4: 16px;
  --kg-space-5: 24px;
  --kg-space-6: 32px;
  --kg-space-7: 48px;
  --kg-control-h: 48px;
  --kg-z-nav: 220;
  --kg-z-modal: 1050;
  --kg-z-toast: 5000;
  --kg-ease: 0.2s ease;
}

/* ---------- layout ---------- */
.kg-page {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--kg-space-5) var(--kg-space-4) var(--kg-space-7);
}

.kg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--kg-space-4);
}

.kg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kg-space-3);
}

.kg-spacer {
  flex: 1 1 auto;
}

/* ---------- type ---------- */
.kg-h1, .kg-h2, .kg-h3 {
  color: var(--kg-primary);
  font-family: var(--kg-font);
  line-height: 1.7;
  margin: 0 0 var(--kg-space-3);
}
.kg-h1 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 700; }
.kg-h2 { font-size: 1.2rem; font-weight: 700; }
.kg-h3 { font-size: 1.05rem; font-weight: 700; }
.kg-muted { color: var(--kg-muted); }
.kg-lead { color: var(--kg-muted); line-height: 1.9; font-size: 1.05rem; }

/* ---------- buttons ---------- */
.kg-btn,
.btn,
.submit-request,
.modal-save-btn,
.price-search,
.price-sent,
.btn-order,
.desc_btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--kg-control-h);
  padding: 10px 18px;
  border-radius: var(--kg-radius-sm);
  border: 1.5px solid transparent;
  font-family: var(--kg-font);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform var(--kg-ease), box-shadow var(--kg-ease), background var(--kg-ease), color var(--kg-ease);
  user-select: none;
}

.kg-btn:hover,
.btn:hover,
.submit-request:hover,
.modal-save-btn:hover {
  transform: translateY(-1px);
  text-decoration: none !important;
}

.kg-btn:disabled,
.btn:disabled,
.kg-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.kg-btn-link {
  background: none;
  border: 0;
  padding: 8px 4px;
  min-height: 44px;
  min-width: 44px;
  color: var(--kg-info);
  font-weight: 700;
  font-family: var(--kg-font);
  font-size: 14px;
  cursor: pointer;
  text-align: right;
}

.kg-btn-link[disabled],
.kg-btn-link[aria-disabled="true"] {
  color: var(--kg-muted);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .kg-btn:hover,
  .btn:hover,
  .submit-request:hover,
  .modal-save-btn:hover {
    transform: none;
  }
}

.kg-btn-accent,
.btn-warning,
.price-search,
.price-sent,
.kg-search-btn {
  background: var(--kg-accent) !important;
  color: var(--kg-primary) !important;
  border-color: var(--kg-accent) !important;
  box-shadow: 0 8px 16px rgba(255, 152, 0, 0.28);
}
.kg-btn-accent:hover,
.btn-warning:hover,
.price-search:hover {
  background: #ffa726 !important;
  color: var(--kg-primary) !important;
}

.kg-btn-primary,
.submit-request,
.modal-save-btn,
.accept-btn {
  background: var(--kg-primary) !important;
  color: #fff !important;
  border-color: var(--kg-primary) !important;
  box-shadow: 0 8px 18px rgba(42, 34, 78, 0.18);
}
.kg-btn-primary:hover,
.submit-request:hover,
.modal-save-btn:hover {
  background: var(--kg-accent) !important;
  border-color: var(--kg-accent) !important;
  color: var(--kg-primary) !important;
}

.kg-btn-success,
.btn-success,
.btn-order {
  background: var(--kg-success) !important;
  color: #fff !important;
  border-color: var(--kg-success) !important;
}

.kg-btn-outline,
.btn-outline-warning,
.btn-outline-success,
.btn-description-outline {
  background: transparent !important;
  color: var(--kg-primary) !important;
  border-color: var(--kg-line) !important;
  box-shadow: none;
}
.btn-outline-warning {
  color: var(--kg-accent-dark) !important;
  border-color: var(--kg-accent) !important;
}

.kg-btn-ghost {
  background: transparent !important;
  color: var(--kg-muted) !important;
  border-color: transparent !important;
  box-shadow: none;
  min-height: 40px;
}

.kg-btn-sm,
.btn-sm {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 13px;
}

.kg-btn-lg { min-height: 56px; padding: 14px 22px; font-size: 16px; }
.kg-btn-block { width: 100%; }
.kg-btn-pill { border-radius: var(--kg-radius-pill) !important; }

.kg-icon-btn {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--kg-line);
  background: var(--kg-card);
  color: var(--kg-primary);
}

/* ---------- fields ---------- */
.kg-label,
legend.scheduler-border {
  display: block;
  color: var(--kg-primary);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  text-align: right;
  direction: rtl;
}

.kg-input,
.kg-select,
.kg-textarea,
.form-control,
.price-input,
select.price-input {
  width: 100%;
  min-height: var(--kg-control-h);
  border: 1px solid var(--kg-line) !important;
  border-radius: var(--kg-radius-sm) !important;
  background: var(--kg-card) !important;
  color: var(--kg-ink);
  padding: 10px 14px;
  font-family: var(--kg-font);
  font-size: 15px;
  box-shadow: none !important;
  direction: rtl;
  text-align: right;
  transition: border-color var(--kg-ease), box-shadow var(--kg-ease);
}

.kg-textarea,
textarea.form-control { min-height: 88px; resize: vertical; }

.kg-input:focus,
.form-control:focus,
.price-input:focus {
  border-color: var(--kg-accent) !important;
  box-shadow: 0 0 0 4px rgba(255, 152, 0, 0.16) !important;
  outline: 0;
}

fieldset.scheduler-border {
  border: 1px solid var(--kg-line) !important;
  border-radius: var(--kg-radius-sm) !important;
  background: var(--kg-card);
}

/* ---------- badges / chips ---------- */
.kg-badge,
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--kg-radius-pill);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.kg-badge-accent,
.badge-warning { background: var(--kg-accent-50); color: var(--kg-accent-dark); }
.kg-badge-success,
.badge-success { background: var(--kg-success) !important; color: #fff !important; }
.kg-badge-danger,
.badge-danger { background: var(--kg-danger); color: #fff; }
.kg-badge-info,
.badge-info { background: var(--kg-info); color: #fff; }
.kg-badge-muted { background: var(--kg-primary-50); color: var(--kg-primary); }

.kg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--kg-card);
  border: 1px solid var(--kg-line);
  border-radius: var(--kg-radius-pill);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--kg-muted);
}

/* ---------- cards ---------- */
.kg-card,
.card-custom,
.kg-auth-card,
.kg-profile-head {
  background: var(--kg-card);
  border: 1px solid var(--kg-line);
  border-radius: var(--kg-radius);
  box-shadow: var(--kg-shadow);
}

.kg-card-pad { padding: var(--kg-space-5); }
.kg-card-title { font-weight: 800; color: var(--kg-primary); margin-bottom: var(--kg-space-3); }

/* ---------- toolbar / filters ---------- */
.kg-toolbar {
  background: var(--kg-card);
  border: 1px solid var(--kg-line);
  border-radius: var(--kg-radius);
  box-shadow: var(--kg-shadow);
  padding: var(--kg-space-4);
  margin-bottom: var(--kg-space-5);
}

/* ---------- alerts / toast ---------- */
.kg-alert,
#netSlinger.alert {
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: var(--kg-shadow-lg);
}

.kg-alert-success,
.alert-success { background: var(--kg-success-50); color: var(--kg-success); }
.kg-alert-danger,
.alert-danger { background: var(--kg-danger-50); color: var(--kg-danger); }
.kg-alert-info,
.alert-info { background: var(--kg-info-50); color: var(--kg-info); }

/* ---------- table ---------- */
.kg-table,
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.kg-table thead th,
.table thead th {
  background: var(--kg-primary-50) !important;
  color: var(--kg-primary);
  font-weight: 800;
  border: 0 !important;
  padding: 12px;
}

.kg-table td,
.table td {
  padding: 12px;
  border-top: 1px solid var(--kg-line) !important;
  vertical-align: middle;
}

.kg-table-wrap {
  background: var(--kg-card);
  border-radius: var(--kg-radius);
  box-shadow: var(--kg-shadow);
  padding: var(--kg-space-5);
  overflow: auto;
}

/* ---------- empty / skeleton ---------- */
.kg-empty {
  text-align: center;
  background: var(--kg-card);
  border: 1px dashed var(--kg-line);
  border-radius: var(--kg-radius);
  padding: 42px 18px;
  color: var(--kg-muted);
}

.kg-skel {
  background: linear-gradient(90deg, #eee 25%, #f7f7f7 50%, #eee 75%);
  background-size: 200% 100%;
  animation: kg-skel 1.2s infinite;
  border-radius: 8px;
  min-height: 14px;
}
@keyframes kg-skel {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---------- crumbs / steps ---------- */
.kg-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--kg-muted);
  margin-bottom: var(--kg-space-4);
}
.kg-crumbs a { color: var(--kg-primary) !important; }
.kg-crumbs span::before { content: " / "; color: #c5c1d4; }

.kg-steps {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 var(--kg-space-4);
}
.kg-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--kg-muted);
  font-size: 13px;
}
.kg-steps li.is-active { color: var(--kg-primary); font-weight: 800; }
.kg-steps li i {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--kg-primary-50);
  display: inline-flex; align-items: center; justify-content: center;
  font-style: normal; font-size: 12px; font-weight: 800;
}
.kg-steps li.is-active i { background: var(--kg-accent); color: #fff; }

/* ---------- avatar / divider ---------- */
.kg-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--kg-accent-50); color: var(--kg-accent-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
}

.kg-hr {
  border: 0;
  border-top: 1px solid var(--kg-line);
  margin: var(--kg-space-5) 0;
}

/* ---------- modal polish ---------- */
.modal-content {
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--kg-shadow-lg);
}
.modal-header { border: 0; }
.circle-dot { background: var(--kg-accent) !important; }

/* ---------- share control ---------- */
.kg-share,
#shareBtn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--kg-info) !important;
  cursor: pointer;
  font-size: 11px;
  min-width: 60px;
}

.kg-filter {
  flex: 1 1 220px;
  min-width: 0;
  position: relative;
}

.kg-turnstile {
  margin: 12px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 68px;
}

.kg-field-error {
  color: var(--kg-danger);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  margin: 4px 0 0;
  width: 100%;
}

.kg-error-summary {
  background: var(--kg-danger-50);
  color: var(--kg-danger);
  border-radius: var(--kg-radius-sm);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  width: 100%;
}

.kg-input[aria-invalid="true"],
.form-control[aria-invalid="true"] {
  border-color: var(--kg-danger) !important;
  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.16);
}

@media (max-width: 765px) {
  .kg-page { padding: 16px 12px 80px; }
  .kg-toolbar .kg-row { flex-direction: column; align-items: stretch; }
  .kg-filter { flex: 1 1 auto; width: 100%; }
}