:root {
  --bawart-gold: #c99b20;
  --bawart-gold-deep: #ad8115;
  --bawart-black: #090909;
  --bawart-deep: #0d0d0d;
  --bawart-dark: #111111;
  --bawart-surface: #171717;
  --bawart-cream: #f5efe1;
  --bawart-white: #ffffff;
  --bawart-muted: #bdbdbd;
  --bawart-border: rgba(201, 155, 32, 0.45);
  --bawart-content: 1260px;
  --bawart-radius: 2px;
}

html[dir="rtl"],
body.rtl {
  --e-global-typography-primary-font-family: "Tajawal", sans-serif;
  --e-global-typography-text-font-family: "Tajawal", sans-serif;
}

.bawart-shell,
.bawart-shell * {
  box-sizing: border-box;
}

.bawart-shell {
  direction: rtl;
  font-family: "Tajawal", sans-serif;
}

.bawart-container {
  width: min(100% - 48px, var(--bawart-content));
  margin-inline: auto;
}

.bawart-gold-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--bawart-gold), transparent);
}

.bawart-card {
  border: 1px solid var(--bawart-border);
  border-radius: var(--bawart-radius);
  background: var(--bawart-surface);
}

.bawart-focus :focus-visible,
.bawart-shell :focus-visible {
  outline: 2px solid var(--bawart-gold);
  outline-offset: 4px;
}

.bawart-button-primary {
  background: var(--bawart-gold);
  color: var(--bawart-black);
  border: 1px solid var(--bawart-gold);
  border-radius: var(--bawart-radius);
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.bawart-button-primary:hover {
  background: var(--bawart-gold-deep);
  color: var(--bawart-white);
  transform: translateY(-2px);
}

.bawart-button-outline {
  background: transparent;
  color: var(--bawart-white);
  border: 1px solid var(--bawart-gold);
  border-radius: var(--bawart-radius);
  transition: background-color 180ms ease, color 180ms ease;
}

.bawart-button-outline:hover {
  background: var(--bawart-gold);
  color: var(--bawart-black);
}

.bawart-shell input,
.bawart-shell textarea,
.bawart-shell select {
  min-height: 52px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--bawart-radius);
  background: var(--bawart-dark);
  color: var(--bawart-white);
  font: inherit;
}

.bawart-shell input:focus,
.bawart-shell textarea:focus,
.bawart-shell select:focus {
  border-color: var(--bawart-gold);
  box-shadow: 0 0 0 1px var(--bawart-gold);
}

@media (max-width: 767px) {
  .bawart-container {
    width: min(100% - 32px, var(--bawart-content));
  }
}

@media (prefers-reduced-motion: reduce) {
  .bawart-button-primary,
  .bawart-button-outline {
    transition: none;
  }
}