/* ============================================================
   domain.ps client-area brand layer (loads last, over Twenty-One)
   Matches the marketing site: navy #020296, IBM Plex Sans Arabic,
   indigo accent, dark navy mastheads/footers, rounded CTAs, RTL.
   v1 — refine against the live render.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --dps-navy: #020296;
  --dps-navy-600: #2424b8;
  --dps-accent: #4f46e5;
  --dps-accent-soft: #8b87ff;
  --dps-glow: #4cc9f0;
  --dps-ink: #15154d;
  --dps-ink-soft: #71718e;
  --dps-surface: #fafaff;
  --dps-line: #e7e7f5;
  --dps-hero: linear-gradient(160deg, #060633 0%, #10104e 55%, #1b1899 100%);
}

/* ---- Typography & base ---- */
body {
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--dps-ink);
  background-color: var(--dps-surface);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5 { font-weight: 700; color: var(--dps-ink); }
a { color: var(--dps-navy); }
a:hover, a:focus { color: var(--dps-accent); }

/* ---- Buttons (match marketing site: indigo primary, pill radius) ---- */
.btn { font-weight: 600; border-radius: 9999px; }
.btn-primary {
  background-color: var(--dps-accent);
  border-color: var(--dps-accent);
  box-shadow: 0 6px 18px rgba(79, 70, 229, .35);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--dps-navy-600) !important;
  border-color: var(--dps-navy-600) !important;
}
.btn-outline-primary { color: var(--dps-navy); border-color: var(--dps-navy); }
.btn-outline-primary:hover { background-color: var(--dps-navy); border-color: var(--dps-navy); }
.btn-secondary { border-radius: 9999px; }
.text-primary { color: var(--dps-navy) !important; }
.bg-primary { background-color: var(--dps-navy) !important; }
.badge-primary { background-color: var(--dps-navy); }

/* ---- Top navbar ---- */
.navbar { background-color: #fff; box-shadow: 0 1px 0 var(--dps-line); }
.navbar-brand img, .navbar .logo img { max-height: 40px; width: auto; }
.navbar-nav .nav-link { color: var(--dps-ink-soft); font-weight: 500; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--dps-navy); }

/* ---- Mastheads / hero areas → dark navy gradient (like the marketing hero) ---- */
.masthead, .primary-masthead, .home-banner, .page-header-tall,
header.masthead, .jumbotron {
  background: var(--dps-hero) !important;
  color: #fff;
}
.masthead h1, .masthead h2, .masthead p,
.primary-masthead h1, .primary-masthead p { color: #fff; }

/* domain-search box on the order hero */
.domain-checker, .search-domain, .jumbotron .form-control { border-radius: 10px; }

/* ---- Cards / panels ---- */
.card, .panel {
  border-radius: 12px;
  border: 1px solid var(--dps-line);
  box-shadow: 0 8px 24px rgba(2, 2, 150, .06);
}
.card-header, .panel-heading { background-color: #fff; border-bottom: 1px solid var(--dps-line); font-weight: 600; }

/* ---- Forms ---- */
.form-control { border-radius: 8px; }
.form-control:focus {
  border-color: var(--dps-accent);
  box-shadow: 0 0 0 .15rem rgba(79, 70, 229, .18);
}

/* ---- Sidebar (client area) ---- */
.sidebar .list-group-item.active,
.list-group-item.active { background-color: var(--dps-navy); border-color: var(--dps-navy); }
.sidebar .list-group-item a:hover { color: var(--dps-navy); }

/* ---- Alerts / progress ---- */
.alert-info { border-color: var(--dps-accent-soft); }
.progress-bar { background-color: var(--dps-accent); }

/* ---- Footer ---- */
footer, .footer, #footer {
  background-color: #060633;
  color: #cfcfe8;
}
footer a, .footer a, #footer a { color: #cfcfe8; }
footer a:hover, .footer a:hover { color: #fff; }

/* ---- RTL polish (Arabic is the primary experience) ---- */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .text-left { text-align: right !important; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .navbar-nav { padding-right: 0; }