/* ============================================================
   ZawajCo — Global Design System
   Premium Arabic RTL Islamic Marriage Platform
   v2.0 — Full Rebuild
   ============================================================ */

/* 1. CSS CUSTOM PROPERTIES */
:root {
  --zawaj-primary:      #C2185B;
  --zawaj-primary-soft: #E91E8C;
  --zawaj-primary-pale: #FCE4EC;
  --zawaj-secondary:    #7B1FA2;
  --zawaj-rose:         #FF4081;
  --zawaj-plum:         #4A148C;
  --zawaj-success:      #00897B;
  --zawaj-warning:      #F57F17;
  --zawaj-error:        #C62828;
  --grad-primary:       linear-gradient(135deg, #E91E8C 0%, #C2185B 50%, #7B1FA2 100%);
  --grad-rose-plum:     linear-gradient(135deg, #FF4081 0%, #C2185B 45%, #6A1B9A 100%);
  --grad-soft:          linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 50%, #E1BEE7 100%);
  --grad-hero:          linear-gradient(160deg, #FFF0F5 0%, #FDF2FF 40%, #F8F0FF 100%);
  --surface-bg:         #FAFAFA;
  --surface-card:       #FFFFFF;
  --surface-border:     rgba(0,0,0,.07);
  --surface-hover:      rgba(194,24,91,.04);
  --surface-overlay:    rgba(255,255,255,.95);
  --surface-glass:      rgba(255,255,255,.82);
  --text-primary:       #1A0A12;
  --text-secondary:     #5C4560;
  --text-muted:         #9B7FA6;
  --text-on-primary:    #FFFFFF;
  --shadow-xs:          0 1px 4px rgba(0,0,0,.06);
  --shadow-sm:          0 4px 16px rgba(0,0,0,.08);
  --shadow-md:          0 8px 32px rgba(0,0,0,.10);
  --shadow-lg:          0 16px 56px rgba(0,0,0,.12);
  --shadow-pink:        0 16px 48px -12px rgba(194,24,91,.35);
  --shadow-glow:        0 0 0 4px rgba(194,24,91,.12);
  --space-xs:   .5rem;
  --space-sm:   .75rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2.5rem;
  --space-2xl:  4rem;
  --space-3xl:  6rem;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill:999px;
  --transition-fast:    .15s cubic-bezier(.4,0,.2,1);
  --transition-base:    .25s cubic-bezier(.22,1,.36,1);
  --transition-slow:    .4s cubic-bezier(.22,1,.36,1);
  --navbar-height:      68px;
  --section-pad:        clamp(3.5rem, 7vw, 6rem);
}

[data-theme="dark"] {
  --surface-bg:         #0E0811;
  --surface-card:       #180E1C;
  --surface-border:     rgba(255,255,255,.08);
  --surface-hover:      rgba(194,24,91,.08);
  --surface-overlay:    rgba(14,8,17,.96);
  --surface-glass:      rgba(24,14,28,.88);
  --text-primary:       #F9EEF4;
  --text-secondary:     #C49DB8;
  --text-muted:         #7A5A70;
  --shadow-xs:          0 1px 4px rgba(0,0,0,.3);
  --shadow-sm:          0 4px 16px rgba(0,0,0,.35);
  --shadow-md:          0 8px 32px rgba(0,0,0,.4);
  --shadow-lg:          0 16px 56px rgba(0,0,0,.5);
  --shadow-glow:        0 0 0 4px rgba(194,24,91,.18);
  --grad-hero:          linear-gradient(160deg, #120B17 0%, #0E0811 40%, #120A1A 100%);
  --zawaj-primary-pale: rgba(194,24,91,.12);
}

/* 2. RESET & BASE */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem; font-weight: 400; line-height: 1.7;
  color: var(--text-primary); background: var(--surface-bg);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s, color .3s; overflow-x: hidden;
}
::selection { background: rgba(194,24,91,.18); color: var(--zawaj-primary); }

/* 3. SKIP LINK */
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  padding: .6rem 1.2rem; background: var(--zawaj-primary); color: #fff;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-weight: 700; text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* 4. PAGE LOADER */
.page-loader {
  position: fixed; inset: 0; z-index: 9000; background: var(--surface-bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .4s, visibility .4s;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring {
  width: 44px; height: 44px;
  border: 3px solid var(--surface-border); border-top-color: var(--zawaj-primary);
  border-radius: 50%; animation: loaderSpin .7s linear infinite;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }

/* 5. NAVBAR */
.zawaj-navbar {
  position: fixed; top: 0; inset-inline: 0; z-index: 1030;
  height: var(--navbar-height);
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: background var(--transition-base), backdrop-filter var(--transition-base),
              box-shadow var(--transition-base), transform var(--transition-base);
}
.zawaj-navbar .container { height: 100%; display: flex; align-items: center; }
.zawaj-navbar.scrolled {
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 1px 0 var(--surface-border), var(--shadow-xs);
}
.navbar-brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; transition: opacity var(--transition-fast);
}
.navbar-brand:hover { opacity: .85; }
.brand-icon {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 2px 8px rgba(194,24,91,.28));
  transition: transform var(--transition-base);
  flex-shrink: 0;
}
.navbar-brand:hover .brand-icon { transform: rotate(15deg) scale(1.05); }
.brand-name {
  font-size: 1.28rem; font-weight: 900; letter-spacing: -.01em; line-height: 1;
  background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zawaj-navbar .nav-link {
  padding: .45rem .8rem; font-size: .88rem; font-weight: 700;
  color: var(--text-secondary); border-radius: var(--radius-sm);
  text-decoration: none; transition: color var(--transition-fast), background var(--transition-fast);
  position: relative;
}
.zawaj-navbar .nav-link::after {
  content: ''; position: absolute; bottom: 0; inset-inline: .8rem; height: 2px;
  border-radius: 1px; background: var(--grad-primary);
  transform: scaleX(0); transition: transform var(--transition-base); transform-origin: center;
}
.zawaj-navbar .nav-link:hover { color: var(--zawaj-primary); background: var(--surface-hover); }
.zawaj-navbar .nav-link.active { color: var(--zawaj-primary); font-weight: 800; }
.zawaj-navbar .nav-link.active::after { transform: scaleX(1); }
/* ── New Navbar Buttons — Rectangular Premium ── */
.btn-nav-login {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .55rem 1.15rem;
  font-size: .86rem;
  font-weight: 800;
  font-family: 'Cairo', sans-serif;
  color: var(--zawaj-primary);
  background: transparent;
  border: 1.5px solid rgba(194,24,91,.3);
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--transition-base);
  letter-spacing: .01em;
}
.btn-nav-login i { font-size: .9rem; opacity: .8; }
.btn-nav-login:hover {
  background: rgba(194,24,91,.06);
  border-color: var(--zawaj-primary);
  color: var(--zawaj-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(194,24,91,.18);
}
[data-theme="dark"] .btn-nav-login {
  border-color: rgba(194,24,91,.35);
  color: #F48FB1;
}
[data-theme="dark"] .btn-nav-login:hover {
  background: rgba(194,24,91,.1);
  border-color: #F48FB1;
  color: #F48FB1;
}

.btn-nav-register {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  padding: .55rem 1.25rem;
  font-size: .86rem;
  font-weight: 800;
  font-family: 'Cairo', sans-serif;
  color: #fff;
  background: linear-gradient(135deg, #E91E8C 0%, #C2185B 55%, #8E24AA 100%);
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 4px 14px -4px rgba(194,24,91,.45),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  letter-spacing: .01em;
}
.btn-nav-register i { font-size: .85rem; }
.btn-nav-register::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,.22) 50%,
    transparent 70%
  );
  transform: translateX(-180%);
  transition: transform .65s ease;
}
.btn-nav-register:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow:
    0 10px 28px -6px rgba(194,24,91,.55),
    inset 0 1px 0 rgba(255,255,255,.15);
}
.btn-nav-register:hover::before { transform: translateX(180%); }
.btn-nav-register:active { transform: translateY(0); }

/* keep old classes for backward compatibility (other pages) */
.btn-navbar-login { display: none; }
.btn-navbar-register { display: none; }
.btn-theme-toggle {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--surface-border); background: var(--surface-card);
  color: var(--text-secondary); display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: .95rem;
  transition: all var(--transition-base); padding: 0; text-decoration: none;
}
.btn-theme-toggle:hover {
  border-color: rgba(194,24,91,.3); background: var(--surface-hover);
  color: var(--zawaj-primary); transform: scale(1.05);
}

/* 6. FOOTER */
.zawaj-footer {
  background:
    radial-gradient(ellipse 80% 50% at 20% -20%, rgba(194,24,91,.06), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 110%, rgba(123,31,162,.05), transparent 55%),
    var(--surface-card);
  border-top: 1px solid var(--surface-border);
  padding: var(--space-3xl) 0 var(--space-xl); margin-top: auto;
}
.footer-brand {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.2rem; font-weight: 900; margin-bottom: 1rem;
  background: var(--grad-primary); -webkit-background-clip: text; background-clip: text;
  color: transparent; width: fit-content;
}
.footer-tagline { font-size: .9rem; color: var(--text-muted); line-height: 1.85; max-width: 300px; margin-bottom: 1.5rem; }
.social-links { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.social-link {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--surface-border); background: var(--surface-bg);
  color: var(--text-muted); display: inline-flex; align-items: center;
  justify-content: center; font-size: 1rem; text-decoration: none; transition: all var(--transition-base);
}
.social-link:hover {
  background: var(--grad-primary); border-color: transparent; color: #fff;
  transform: translateY(-2px) scale(1.05); box-shadow: var(--shadow-pink);
}
.app-badges { display: flex; gap: .65rem; flex-wrap: wrap; }
.app-badge {
  display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1rem;
  border-radius: var(--radius-md); border: 1.5px solid var(--surface-border);
  background: var(--surface-bg); color: var(--text-primary); text-decoration: none;
  font-size: .82rem; font-weight: 700; transition: all var(--transition-base);
}
.app-badge:hover {
  background: var(--surface-card); border-color: rgba(194,24,91,.2);
  color: var(--text-primary); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.footer-heading {
  font-size: .78rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.footer-links a {
  font-size: .88rem; font-weight: 600; color: var(--text-secondary); text-decoration: none;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: all var(--transition-fast); padding: .15rem 0;
}
.footer-links a:hover { color: var(--zawaj-primary); transform: translateX(-3px); }
[dir="ltr"] .footer-links a:hover { transform: translateX(3px); }
.footer-divider { border: none; border-top: 1px solid var(--surface-border); margin: var(--space-xl) 0 var(--space-lg); }
.footer-bottom { font-size: .83rem; color: var(--text-muted); font-weight: 600; }

/* 7. BACK TO TOP */
.back-to-top {
  position: fixed; bottom: 2rem; inset-inline-end: 1.5rem; z-index: 999;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-primary); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  box-shadow: var(--shadow-pink); opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition-base), visibility var(--transition-base), transform var(--transition-base);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -8px rgba(194,24,91,.55); }

/* 8. REVEAL ANIMATIONS */
[data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1);
}
[data-reveal].in-view { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal="scale"] { transform: scale(.95); }
[data-reveal="scale"].in-view { transform: scale(1); }
[data-delay="1"] { transition-delay: .05s; }
[data-delay="2"] { transition-delay: .1s;  }
[data-delay="3"] { transition-delay: .15s; }
[data-delay="4"] { transition-delay: .2s;  }
[data-delay="5"] { transition-delay: .25s; }
[data-delay="6"] { transition-delay: .3s;  }

/* 9. UTILITY CLASSES */
.section-spacing { padding-block: var(--section-pad); }
.text-gradient { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-badge {
  display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .9rem;
  border-radius: var(--radius-pill); background: rgba(194,24,91,.07);
  border: 1px solid rgba(194,24,91,.14); font-size: .78rem; font-weight: 800;
  color: var(--zawaj-primary); letter-spacing: .02em;
}
.section-title {
  font-size: clamp(1.75rem, 3.5vw, 2.6rem); font-weight: 900; line-height: 1.25;
  letter-spacing: -.02em; color: var(--text-primary); margin: .75rem 0; text-wrap: balance;
}
.section-subtitle {
  font-size: 1.02rem; color: var(--text-secondary); line-height: 1.85;
  max-width: 540px; margin: 0 auto;
}
.lux-card-form {
  background: var(--surface-card); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl); padding: 2rem; box-shadow: var(--shadow-md);
}

/* 10. RESPONSIVE */
@media (min-width: 1400px) { .container { max-width: 1260px; } }
@media (max-width: 767.98px) { :root { --section-pad: clamp(2.5rem, 6vw, 3.5rem); } }