:root {
  --primary: #0f5f55;
  --primary-dark: #0a403a;
  --secondary: #c69c4e;
  --background: #f7f5ef;
  --surface: #ffffff;
  --text: #1f2933;
  --muted: #667085;
  --border: #e5e1d8;
  --success: #157347;
  --shadow: 0 18px 45px rgba(15, 95, 85, 0.12);
  --radius: 18px;
}
*{box-sizing:border-box;margin:0;padding:0} body{font-family:Arial,Helvetica,sans-serif;background:var(--background);color:var(--text);line-height:1.6} a{color:inherit;text-decoration:none} img{max-width:100%;display:block}.container{width:min(1120px,92%);margin:0 auto}
header{background:rgba(255,255,255,.94);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;backdrop-filter:blur(12px)}.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}.logo{font-size:1.45rem;font-weight:800;color:var(--primary-dark);display:flex;align-items:center;gap:10px}.logo-mark{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--secondary));display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800}nav ul{display:flex;align-items:center;gap:22px;list-style:none;color:var(--muted);font-weight:600}.nav-actions{display:flex;gap:10px;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;padding:12px 20px;font-weight:700;cursor:pointer;transition:.2s ease;white-space:nowrap}.btn-primary{background:var(--primary);color:#fff;box-shadow:0 10px 24px rgba(15,95,85,.22)}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.btn-outline{border:1px solid var(--border);color:var(--primary-dark);background:#fff}
.hero{padding:42px 0 64px}.hero-banner{background:#eee;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)}.hero-banner img{width:100%;height:auto;object-fit:contain;object-position:top center}.hero-overlay{position:static;background:transparent;display:block;padding:0}.hero-copy{max-width:760px;margin:0 auto 26px;text-align:center}.badge{display:inline-flex;padding:8px 14px;border-radius:999px;background:#edf7f4;color:var(--primary-dark);font-weight:700;margin-bottom:18px;font-size:.92rem}h1{font-size:clamp(2.3rem,5vw,4.5rem);line-height:1.08;letter-spacing:-.04em;color:#10231f;margin-bottom:22px}.hero p,.lead{font-size:1.15rem;color:#3f4c4a;max-width:700px;margin-bottom:30px}.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.privacy-message{background:#fff;border:1px solid var(--border);border-left:7px solid var(--primary);border-radius:24px;padding:28px;margin-top:-38px;position:relative;z-index:2;box-shadow:var(--shadow);text-align:center}.privacy-message h2{color:var(--primary-dark);font-size:clamp(1.6rem,3vw,2.3rem);margin-bottom:10px}.privacy-message p{color:var(--muted);font-size:1.08rem;max-width:900px;margin:0 auto 18px}.privacy-points{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px;text-align:left}.privacy-point{background:#f8fbfa;border:1px solid #dbece6;border-radius:16px;padding:16px}.privacy-point strong{display:block;color:var(--primary-dark);margin-bottom:4px}.privacy-point span{color:var(--muted);font-size:.95rem}
section{padding:68px 0}.page-header{padding:70px 0;background:linear-gradient(135deg,#edf7f4,#fff6df);border-bottom:1px solid var(--border)}.page-header h1{max-width:850px}.section-title{text-align:center;max-width:760px;margin:0 auto 42px}.section-title h2{font-size:clamp(1.9rem,4vw,3rem);color:#10231f;margin-bottom:12px;letter-spacing:-.03em}.section-title p{color:var(--muted)}.card,.step,.profile-card,.form-card,.pricing-card,.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 10px 28px rgba(16,35,31,.06)}.steps,.profiles,.login-panel,.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps.four{grid-template-columns:repeat(4,1fr)}.step-number{width:42px;height:42px;border-radius:50%;background:#edf7f4;color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:16px}.card h3,.step h3,.profile-card h3,.form-card h3,.pricing-card h3,.login-card h3{margin-bottom:8px;color:#10231f}.card p,.step p,.profile-card p,.pricing-card p,.login-card p{color:var(--muted)}
.category-tabs{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:30px}.category-tab{background:#fff;border:1px solid var(--border);color:var(--primary-dark);padding:11px 18px;border-radius:999px;font-weight:800}.category-tab.active{background:var(--primary);color:#fff}.profile-avatar{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,#edf7f4,#fff6df);display:flex;align-items:center;justify-content:center;color:var(--primary-dark);font-size:1.7rem;font-weight:900;border:1px solid var(--border)}.profile-number{font-size:.85rem;color:var(--muted);font-weight:800}.profile-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.status{font-size:.78rem;background:#fff6df;color:#765719;padding:6px 10px;border-radius:999px;font-weight:700}.profile-meta{display:grid;gap:8px;margin:16px 0 22px;color:var(--muted);font-size:.95rem}.profile-meta strong{color:var(--text)}
.forms-grid,.pricing,.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}form{display:grid;gap:14px}label{font-weight:700;color:#263238;font-size:.94rem}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:13px 14px;font:inherit;color:var(--text);background:#fff}textarea{min-height:120px;resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.price{font-size:3rem;font-weight:900;color:var(--primary-dark);margin:8px 0}.price span{font-size:1rem;color:var(--muted);font-weight:600}.check-list{list-style:none;display:grid;gap:12px;color:var(--muted)}.check-list li::before{content:"✓";color:var(--success);font-weight:800;margin-right:10px}.page-image{border-radius:28px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);min-height:420px}.page-image img{width:100%;height:100%;object-fit:cover}
footer{padding:34px 0;border-top:1px solid var(--border);background:#10231f;color:rgba(255,255,255,.78);text-align:center}footer strong{color:#fff}
@media(max-width:900px){.steps,.steps.four,.profiles,.login-panel,.feature-grid,.privacy-points{grid-template-columns:repeat(2,1fr)}.forms-grid,.pricing,.split-grid{grid-template-columns:1fr}nav ul{display:none}.hero-copy{text-align:left}}
@media(max-width:620px){.nav{flex-direction:column;align-items:flex-start;padding:16px 0}.nav-actions,.hero-actions{width:100%}.btn{width:100%}.steps,.steps.four,.profiles,.login-panel,.feature-grid,.privacy-points,.form-row{grid-template-columns:1fr}.privacy-message{margin-top:20px;text-align:left}}


/* ===== Scalable Profile Directory ===== */
.directory-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

.filter-panel {
  position: sticky;
  top: 96px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 10px 28px rgba(16, 35, 31, 0.06);
}

.filter-panel h3 {
  color: #10231f;
  margin-bottom: 14px;
}

.filter-group {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
}

.search-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  margin-bottom: 18px;
}

.directory-summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  color: var(--muted);
  font-weight: 700;
}

.profile-list {
  display: grid;
  gap: 14px;
}

.profile-row {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 18px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 8px 22px rgba(16, 35, 31, 0.05);
}

.profile-initial {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: linear-gradient(135deg, #edf7f4, #fff6df);
  color: var(--primary-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  font-weight: 900;
  line-height: 1.1;
}

.profile-initial .letter {
  font-size: 1.5rem;
}

.profile-initial .number {
  font-size: 0.72rem;
  color: var(--muted);
}

.profile-row h3 {
  margin-bottom: 6px;
  color: #10231f;
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.profile-tag {
  background: #edf7f4;
  color: var(--primary-dark);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}

.profile-small {
  color: var(--muted);
  font-size: 0.95rem;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  flex-wrap: wrap;
}

.page-button {
  border: 1px solid var(--border);
  background: white;
  color: var(--primary-dark);
  border-radius: 10px;
  padding: 9px 13px;
  font-weight: 800;
  cursor: pointer;
}

.page-button.active,
.page-button:hover {
  background: var(--primary);
  color: white;
}

.scalability-note {
  margin-top: 26px;
  background: #fff6df;
  border: 1px solid #ead6a3;
  border-radius: var(--radius);
  padding: 20px;
  color: #5f4715;
}

@media (max-width: 900px) {
  .directory-layout {
    grid-template-columns: 1fr;
  }

  .filter-panel {
    position: static;
  }

  .profile-row {
    grid-template-columns: 60px 1fr;
  }

  .profile-row .btn {
    grid-column: 1 / -1;
    width: 100%;
  }

  .search-bar {
    grid-template-columns: 1fr;
  }
}


/* ===== English / Arabic Language Support ===== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: white;
  border-radius: 999px;
  padding: 6px;
}

.lang-switch button {
  border: 0;
  background: transparent;
  color: var(--primary-dark);
  font-weight: 800;
  border-radius: 999px;
  padding: 8px 11px;
  cursor: pointer;
}

.lang-switch button.active {
  background: var(--primary);
  color: white;
}

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .nav,
html[dir="rtl"] .nav-actions,
html[dir="rtl"] nav ul,
html[dir="rtl"] .hero-actions,
html[dir="rtl"] .directory-summary,
html[dir="rtl"] .profile-tags {
  flex-direction: row-reverse;
}

html[dir="rtl"] .check-list li::before {
  margin-right: 0;
  margin-left: 10px;
}

html[dir="rtl"] .profile-row {
  direction: rtl;
}

html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  text-align: right;
}

html[dir="rtl"] .section-title {
  text-align: center;
}

.geo-language-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 10px;
}

@media (max-width: 620px) {
  .lang-switch {
    width: 100%;
    justify-content: center;
  }
}

/* ===== Privacy Policy Page ===== */
.legal-page {
  display: grid;
  gap: 22px;
}

.legal-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 10px 28px rgba(16, 35, 31, 0.06);
}

.legal-card h2 {
  color: #10231f;
  margin-bottom: 12px;
}

.legal-card h3 {
  color: var(--primary-dark);
  margin: 18px 0 8px;
}

.legal-card p,
.legal-card li {
  color: var(--muted);
  margin-bottom: 10px;
}

.legal-card ul {
  padding-left: 22px;
}

html[dir="rtl"] .legal-card ul {
  padding-left: 0;
  padding-right: 22px;
}

.footer-links {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.footer-links a {
  color: white;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== PHP Form Alerts ===== */
.form-alert {
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 18px;
  font-weight: 700;
}

.form-alert.success {
  background: #edf7f4;
  color: var(--primary-dark);
  border: 1px solid #cfe8df;
}

.form-alert.error {
  background: #fff0f0;
  color: #8a1f1f;
  border: 1px solid #f0c7c7;
}

.hidden-field {
  display: none !important;
}

/* ===== Auth Pages ===== */
.auth-links {
  margin-top: 16px;
  color: var(--muted);
}

.auth-links a {
  color: var(--primary-dark);
  font-weight: 800;
  text-decoration: underline;
}

.small-note {
  color: var(--muted);
  font-size: .92rem;
}

/* ===== Admin Tables ===== */
.admin-table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(16, 35, 31, 0.06);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 900px;
}

.admin-table th,
.admin-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  background: #edf7f4;
  color: var(--primary-dark);
  font-weight: 900;
}

.admin-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-actions form {
  display: inline;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.admin-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 10px 28px rgba(16, 35, 31, 0.06);
}

.admin-stat strong {
  display: block;
  font-size: 2rem;
  color: var(--primary-dark);
}

.status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 10px;
  background: #fff6df;
  color: #765719;
  font-size: .82rem;
  font-weight: 800;
}

@media (max-width: 900px) {
  .admin-stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .admin-stat-grid {
    grid-template-columns: 1fr;
  }
}


/* ===== Cloudflare Turnstile ===== */
.turnstile-box {
  background: #edf7f4;
  border: 1px solid #cfe8df;
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
}

html[dir="rtl"] .turnstile-box {
  justify-content: flex-end;
}

/* ===== Full bilingual support ===== */
.lang-switch{display:inline-flex;gap:6px;align-items:center}
.lang-button{border:1px solid var(--border);background:white;color:var(--primary-dark);border-radius:999px;padding:8px 12px;font-weight:800;cursor:pointer}
.lang-button.active{background:var(--primary);color:white}
html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .nav,html[dir="rtl"] .nav-actions,html[dir="rtl"] nav ul,html[dir="rtl"] .hero-actions,html[dir="rtl"] .directory-summary,html[dir="rtl"] .profile-tags,html[dir="rtl"] .footer-links,html[dir="rtl"] .admin-actions{flex-direction:row-reverse}
html[dir="rtl"] input,html[dir="rtl"] select,html[dir="rtl"] textarea{text-align:right}
html[dir="rtl"] .check-list li::before{margin-right:0;margin-left:10px}
html[dir="rtl"] .admin-table th,html[dir="rtl"] .admin-table td{text-align:right}
@media(max-width:620px){.lang-switch{width:100%;justify-content:center}}

/* ===== Amanah expressive logo update ===== */
.nav {
  flex-wrap: nowrap;
}

.logo {
  white-space: nowrap;
  flex-shrink: 0;
}

.logo-mark {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: transparent;
  background-image: url("../assets/amanah-header-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: transparent;
  box-shadow: none;
}

nav ul {
  flex-wrap: nowrap;
}

nav ul li,
.nav-actions,
.nav-actions a,
.lang-switch {
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .nav {
    overflow-x: auto;
    padding-bottom: 4px;
  }

  nav ul {
    gap: 14px;
  }

  .btn {
    padding: 10px 15px;
  }
}

/* ===== Logged-in user header state ===== */
.logged-user {
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 999px;
  background: #edf7f4;
  color: var(--primary-dark);
  font-weight: 800;
  white-space: nowrap;
  border: 1px solid #cfe8df;
}
.logged-user:hover {
  background: #dff1ec;
}

/* Header no-wrap final fix */
.nav, .nav-actions, nav ul {
  flex-wrap: nowrap;
}
.logo, nav ul li, .nav-actions a, .lang-switch {
  white-space: nowrap;
}

/* Final header login state */
.nav, .nav-actions, nav ul {
  flex-wrap: nowrap;
}
.logo, nav ul li, .nav-actions a, .lang-switch {
  white-space: nowrap;
}

/* Final robust session header */
.nav, .nav-actions, nav ul {
  flex-wrap: nowrap;
}
.logo, nav ul li, .nav-actions a, .lang-switch {
  white-space: nowrap;
}

/* Reliable login-state header */
.nav, .nav-actions, nav ul {
  flex-wrap: nowrap;
}
.logo, nav ul li, .nav-actions a, .lang-switch {
  white-space: nowrap;
}