@import url('https://fonts.googleapis.com/css2?family=Aref+Ruqaa:wght@400;700&family=Tajawal:wght@400;500;600;700;800&display=swap');

:root {
  --ra3i-green: #284239;
  --ra3i-orange: #D87F56;
  --ra3i-sage: #AEC2B0;
  --ra3i-sage-light: #C9D6CA;
  --ra3i-cream: #F7F4EC;
  --primary-color: #284239;
  --primary-color-darker: #1D312A;
  --primary-color-lighter: #46645A;
  --primary-color-soft: rgba(40, 66, 57, .12);
}

html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: 'Tajawal', Tahoma, Arial, sans-serif !important;
}

.btn-primary,
.badge-primary,
.bg-primary,
.sidebar-left .nav-item.active > a,
.vertical-sidebar-wrapper .nav-link.router-link-active,
.layout-sidebar-large .sidebar-left .navigation-left .nav-item.active .nav-item-hold {
  background-color: var(--ra3i-green) !important;
  border-color: var(--ra3i-green) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #1D312A !important;
  border-color: #1D312A !important;
}

.text-primary,
a.text-primary,
.nav-tabs .nav-link.active,
.page-item.active .page-link {
  color: var(--ra3i-green) !important;
}

.page-item.active .page-link,
.custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--ra3i-green) !important;
  border-color: var(--ra3i-green) !important;
}

.auth-page {
  background: var(--ra3i-cream) !important;
}

.auth-hero,
.mode-pin .auth-hero,
.mode-code .auth-hero,
.mode-nfc .auth-hero {
  background: var(--ra3i-green) !important;
  isolation: isolate;
}

.auth-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/images/ra3i-pattern-light.png') center bottom / cover no-repeat;
  opacity: .13;
}

.auth-hero .hero-bg-pattern,
.auth-hero .hero-shape {
  display: none !important;
}

.auth-hero .hero-title {
  font-family: 'Aref Ruqaa', 'Tajawal', serif !important;
  font-weight: 700 !important;
}

.hero-badge,
.hero-feature-icon {
  background: rgba(201, 214, 202, .18) !important;
  border-color: rgba(201, 214, 202, .35) !important;
}

.hero-badge-dot {
  background: var(--ra3i-orange) !important;
}

.auth-panel,
.mode-pin .auth-panel,
.mode-code .auth-panel,
.mode-nfc .auth-panel {
  background: var(--ra3i-cream) !important;
}

.auth-card {
  border: 1px solid rgba(40, 66, 57, .12) !important;
  box-shadow: 0 24px 65px rgba(40, 66, 57, .12) !important;
}

.auth-logo img {
  max-height: 108px !important;
  width: auto !important;
}

.auth-card-title {
  color: var(--ra3i-green) !important;
}

.auth-btn,
.quick-login-icon,
.login-mode-badge {
  background: var(--ra3i-green) !important;
  border-color: var(--ra3i-green) !important;
}

.form-input:focus {
  border-color: var(--ra3i-green) !important;
  box-shadow: 0 0 0 4px rgba(40, 66, 57, .10) !important;
}

.login-mode-badge,
.auth-form a,
.forgot-link {
  color: var(--ra3i-green) !important;
}

.login-mode-badge {
  color: #fff !important;
}

.loading_wrap {
  background: var(--ra3i-cream) !important;
}

.loading_wrap .loader_logo img {
  width: 108px !important;
  max-height: 108px !important;
  object-fit: contain;
}

.loader_branding strong {
  color: var(--ra3i-green) !important;
  font-family: 'Aref Ruqaa', 'Tajawal', serif !important;
}

.loader_branding span,
.loader_branding small {
  color: #5C746B !important;
}

.loading span {
  background: var(--ra3i-orange) !important;
}

.pws-head {
  background: var(--ra3i-green) !important;
}

.pws,
.pws-title,
.pws-toggle-card,
.pws-choice {
  --purple: var(--ra3i-green) !important;
  --purple2: var(--ra3i-orange) !important;
}

.pos-product-card img,
.product-card img {
  object-fit: cover;
}

.pos-codecanyon .arm-action.active,
.pos-codecanyon .arm-category-chip.active,
.pos-codecanyon .arm-sidebar__item.active,
.pos-codecanyon .arm-sidebar__sub.active,
.pos-codecanyon .arm-topstrip__search.active,
.pos-codecanyon .pos-shell-pagination button[style*="#6f53d9"] {
  background: var(--ra3i-green) !important;
  border-color: var(--ra3i-green) !important;
  color: #fff !important;
}

.pos-codecanyon .pos-shell-card-footer > div,
.pos-codecanyon .pos-shell-add-btn,
.pos-codecanyon .pos-context-actions button svg,
.pos-codecanyon .pos-smart-search-icon,
.pos-codecanyon .arm-action.active svg {
  color: var(--ra3i-green) !important;
}

.pos-codecanyon .pos-shell-add-btn,
.pos-codecanyon .pos-smart-search-icon {
  background: rgba(40, 66, 57, .10) !important;
}

.pos-codecanyon .pos-shell-product-card:hover,
.pos-codecanyon .pos-shell-product-card:focus {
  border-color: var(--ra3i-sage) !important;
  box-shadow: 0 10px 24px rgba(40, 66, 57, .10) !important;
}

.pos-codecanyon .pos-shell-search-input:focus {
  border-color: var(--ra3i-green) !important;
  box-shadow: 0 0 0 3px rgba(40, 66, 57, .10) !important;
}

/* Cafe POS: replace the inherited purple accent with the approved flat brand palette. */
html body .pos-codecanyon.pos-arm-mode .arm-action.active:not(.arm-action--fav):not(.arm-action--hot):not(.arm-action--offer),
html body .pos-codecanyon.pos-arm-mode .arm-category-chip.active {
  background: var(--ra3i-green) !important;
  border-color: var(--ra3i-green) !important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(40, 66, 57, .16) !important;
}

html body .pos-codecanyon.pos-arm-mode .arm-sidebar__item.active,
html body .pos-codecanyon.pos-arm-mode .arm-sidebar__sub.active {
  background: rgba(174, 194, 176, .28) !important;
  border-color: var(--ra3i-green) !important;
  color: var(--ra3i-green) !important;
}

html body .pos-codecanyon.pos-arm-mode .arm-sidebar-edge-toggle,
html body .pos-codecanyon.pos-arm-mode .arm-topstrip__search.active {
  background: #f3f7f4 !important;
  border-color: var(--ra3i-sage) !important;
  color: var(--ra3i-green) !important;
  box-shadow: 0 3px 12px rgba(40, 66, 57, .10) !important;
}

html body .pos-codecanyon.pos-arm-mode .arm-quick-pill,
html body .pos-codecanyon.pos-arm-mode .pos-arm-meta-pill {
  background: #f1f5f2 !important;
  color: var(--ra3i-green) !important;
}

html body .pos-codecanyon.pos-arm-mode .arm-quick-pill__price,
html body .pos-codecanyon.pos-arm-mode .arm-offer-pill__price,
html body .pos-codecanyon.pos-arm-mode .pos-arm-size-hint,
html body .pos-codecanyon.pos-arm-mode .pos-shell-card-footer > div:first-child {
  color: var(--ra3i-green) !important;
}

html body .pos-codecanyon.pos-arm-mode .pos-shell-add-btn {
  background: rgba(174, 194, 176, .30) !important;
  color: var(--ra3i-green) !important;
}

html body .pos-codecanyon.pos-arm-mode .pos-shell-product-card:hover {
  border-color: var(--ra3i-sage) !important;
  box-shadow: 0 10px 28px rgba(40, 66, 57, .14) !important;
}

html body .pos-codecanyon .pos-shell-pagination button[style*="background: rgb(111, 83, 217)"] {
  background: var(--ra3i-green) !important;
  border-color: var(--ra3i-green) !important;
}

html body .pos-codecanyon .currency-amount,
html body .pos-codecanyon .currency-mark,
html body .pos-codecanyon [style*="color: rgb(111, 83, 217)"] {
  color: var(--ra3i-green) !important;
}

html body .pos-codecanyon button[style*="background: rgb(111, 83, 217)"],
html body .pos-codecanyon button.dropdown-toggle > [style*="linear-gradient"] {
  background: var(--ra3i-green) !important;
  border-color: var(--ra3i-green) !important;
  color: #fff !important;
}

/* Customer QR menu */
html body .qr-app {
  --brand: var(--ra3i-green) !important;
  --brand-dk: #1D312A !important;
  font-family: 'Tajawal', Tahoma, Arial, sans-serif !important;
}

html body .qr-app .topbar-badge,
html body .qr-app .hero-avatar {
  background: #fff url('/images/ra3i-logo.png') center / 82% auto no-repeat !important;
  color: transparent !important;
  border: 1px solid rgba(40, 66, 57, .12) !important;
}

html body .qr-app .qr-hero {
  background-color: var(--ra3i-cream) !important;
  background-image: url('/images/ra3i-pattern-light.png') !important;
  background-position: center bottom !important;
  background-size: cover !important;
}

html body .qr-app .hero-name,
html body .qr-app .topbar-name {
  color: var(--ra3i-green) !important;
}

html body .qr-app .cat-all,
html body .qr-app .btn-brand,
html body .qr-app .add-btn,
html body .qr-app .btn-submit {
  background: var(--ra3i-green) !important;
  border-color: var(--ra3i-green) !important;
}

@media (max-width: 767px) {
  .auth-panel {
    background: var(--ra3i-cream) url('/images/ra3i-pattern-light.png') center bottom / 100% auto no-repeat !important;
  }

  .auth-card {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, .96) !important;
  }

  .auth-logo img {
    max-height: 82px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}