/* Add custom CSS styles below */ 
/* ================================
   Hesabi | حسابي — Brand UI (Fintech / SaaS)
   Source: Hesabi Brand Identity Guide
   ================================ */

/* 0) (Optional) Fonts — if your platform allows @import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;600;700;800&family=Noto+Kufi+Arabic:wght@400;600;700;800&display=swap');

/* 1) Brand Tokens */
:root{
  /* Brand palette (from guide) */
  --brand: #0A7B5A;          /* Deep Emerald Green */
  --brand-2: #065C42;        /* Dark Emerald */
  --gold: #C5A55A;           /* Gold accent */
  --gold-2: #D4B96E;         /* Light Gold */
  --silver: #8C9AA3;         /* Silver Gray */
  --dark: #0F1A17;           /* Dark background */
  --white: #FFFFFF;

  /* UI neutrals (aligned to clean SaaS look) */
  --bg: #F7FAFA;
  --surface: #FFFFFF;
  --text: #0F172A;
  --muted: #64748B;
  --border: #E6EEF0;

  --shadow: 0 10px 30px rgba(2, 8, 23, .06);
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1140px;
}

/* 2) Global */
html, body{
  background: var(--bg) !important;
  color: var(--text) !important;

  /* Arabic + English typography per brand guide */
  font-family: "Noto Kufi Arabic","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif !important;
  letter-spacing: 0 !important;
}

/* Force RTL where needed */
body, .rtl, [dir="rtl"]{
  direction: rtl !important;
}

a{
  color: var(--brand) !important;
  text-decoration: none !important;
}
a:hover{ color: var(--brand-2) !important; }

/* 3) Layout: centered + whitespace */
.container, .site-container, .page-container, main{
  max-width: var(--container) !important;
  margin: 0 auto !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

header, .header{
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}

/* 4) Cards / Surfaces */
.card, .product-card, .category-card, .box, .panel{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}

/* 5) Typography hierarchy (SaaS feel) */
h1,h2,h3{
  font-weight: 800 !important;
  color: var(--text) !important;
}
h1{ font-size: clamp(28px, 3vw, 44px) !important; line-height: 1.2 !important; }
h2{ font-size: clamp(20px, 2.2vw, 28px) !important; }

p, .muted, small{
  color: var(--silver) !important; /* Brand Silver for secondary text */
  line-height: 1.8 !important;
}

/* 6) Buttons */
button, .btn, .button, [type="button"], [type="submit"]{
  border-radius: 12px !important;
  font-weight: 700 !important;
  transition: .18s ease !important;
}

/* Primary = Emerald */
.btn-primary, .button-primary, .primary{
  background: var(--brand) !important;
  border: 1px solid var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 10px 18px rgba(10,123,90,.18) !important;
}
.btn-primary:hover, .button-primary:hover, .primary:hover{
  background: var(--brand-2) !important;
  border-color: var(--brand-2) !important;
}

/* Accent / highlight = Gold (for growth-arrow vibe) */
.btn-gold, .button-gold, .accent-gold{
  background: var(--gold) !important;
  border: 1px solid var(--gold) !important;
  color: var(--dark) !important;
}
.btn-gold:hover, .button-gold:hover, .accent-gold:hover{
  background: var(--gold-2) !important;
  border-color: var(--gold-2) !important;
}

/* Secondary */
.btn-secondary, .button-secondary, .secondary{
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.btn-secondary:hover, .button-secondary:hover, .secondary:hover{
  border-color: rgba(10,123,90,.35) !important;
}

/* 7) Inputs */
input, textarea, select{
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  outline: none !important;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(10,123,90,.55) !important;
  box-shadow: 0 0 0 4px rgba(10,123,90,.10) !important;
}

/* 8) Hero — centered minimal like the attached 401 style */
.hero, .homepage-hero, .banner, .main-hero{
  background: transparent !important;
  padding: 70px 0 40px !important;
  text-align: center !important;
}
.hero *{
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 9) Product grid clean library style */
.products-grid, .product-list, .grid{
  gap: 18px !important;
}
.product-card img{
  border-radius: var(--radius-sm) !important;
}

/* 10) Reduce clutter (best-effort generic selectors) */
.marquee, .ticker, .flash-sale, .countdown, .slider, .carousel, .promo-banner{
  display: none !important;
}

/* 11) Footer */
footer, .footer{
  border-top: 1px solid var(--border) !important;
  background: transparent !important;
  padding: 28px 0 !important;
  color: var(--silver) !important;
}

/* 12) Optional Dark Mode (if your platform uses [data-theme="dark"] or .dark) */
[data-theme="dark"], .dark{
  --bg: #0F1A17;
  --surface: #0B1411;
  --text: #EAF2EF;
  --border: rgba(140,154,163,.18);
  --silver: #B5C0C7;
  background: var(--bg) !important;
  color: var(--text) !important;
}