/* ==========================================================
   United Office Furniture - Professional Theme Override
   For EasyOrders (upload via Upload Assets, then link in Header Code)
   Edit the colors below to match your brand.
   ========================================================== */

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

:root {
  --uo-primary: #14213d;      /* main dark navy */
  --uo-primary-hover: #0c1529;
  --uo-accent: #c9a24b;       /* warm gold accent */
  --uo-accent-hover: #b08c3c;
  --uo-bg: #f7f7f5;
  --uo-surface: #ffffff;
  --uo-text: #1f2430;
  --uo-muted: #6b7280;
  --uo-border: #e5e7eb;
  --uo-radius: 12px;
  --uo-shadow: 0 2px 12px rgba(20, 33, 61, 0.08);
  --uo-shadow-hover: 0 10px 28px rgba(20, 33, 61, 0.16);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif !important;
  background-color: var(--uo-bg);
  color: var(--uo-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 800;
  color: var(--uo-primary);
  line-height: 1.4;
}

::selection { background: var(--uo-accent); color: #fff; }

a { transition: color .2s ease, opacity .2s ease; }

/* ---------- Header ---------- */
header, nav {
  background-color: var(--uo-surface);
  box-shadow: 0 1px 0 var(--uo-border), 0 4px 16px rgba(20, 33, 61, 0.05);
}

header a:hover { color: var(--uo-accent); }

/* ---------- Buttons ---------- */
button[type="submit"],
a[class*="btn"],
button[class*="btn"],
button[class*="primary"] {
  background-color: var(--uo-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--uo-radius) !important;
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
  box-shadow: var(--uo-shadow);
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

button[type="submit"]:hover,
a[class*="btn"]:hover,
button[class*="btn"]:hover,
button[class*="primary"]:hover {
  background-color: var(--uo-accent) !important;
  transform: translateY(-2px);
  box-shadow: var(--uo-shadow-hover);
}

button:active { transform: scale(.98); }

/* ---------- Product cards & images ---------- */
[class*="product"] img,
a[href*="/products/"] img {
  border-radius: var(--uo-radius);
  transition: transform .4s ease;
}

[class*="product"]:hover img,
a[href*="/products/"]:hover img {
  transform: scale(1.04);
}

[class*="card"],
[class*="product-item"] {
  background: var(--uo-surface);
  border-radius: var(--uo-radius);
  overflow: hidden;
  box-shadow: var(--uo-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

[class*="card"]:hover,
[class*="product-item"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--uo-shadow-hover);
}

/* ---------- Forms (checkout) ---------- */
input, select, textarea {
  font-family: 'Cairo', sans-serif !important;
  border: 1.5px solid var(--uo-border) !important;
  border-radius: 10px !important;
  background: var(--uo-surface);
  padding: 10px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--uo-accent) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.25) !important;
}

/* ---------- Footer ---------- */
footer {
  background-color: var(--uo-primary);
  color: #d1d5db;
}

footer a { color: #fff; }
footer a:hover { color: var(--uo-accent); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--uo-bg); }
::-webkit-scrollbar-thumb { background: #c4c8d0; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--uo-accent); }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  body { font-size: 15px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  button[type="submit"] { width: 100%; padding-block: 14px; }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}