/* styles.css
   MeriZindgi.com — Full theme (mobile-first, performant, premium maroon/gold)
   Use with existing HTML & PHP. Optimize images and lazy-load avatars.
*/

/* =========================
   VARIABLES / BASE
   ========================= */
:root{
  --maroon: #7B1E2D;
  --maroon-700: #5D1721;
  --gold: #D4AF37;
  --gold-600: #b98f2b;
  --bg: #FBF7F3;
  --muted: #6b6b6b;
  --card-bg: #ffffff;
  --glass: rgba(255,255,255,0.88);
  --radius: 14px;
  --radius-sm: 10px;
  --focus: 3px solid rgba(123,30,45,0.12);
  --max-width: 1200px;
  --container-pad: 18px;
  --base-font: 16px;
  --transition-fast: 160ms;
  --shadow-subtle: 0 6px 18px rgba(0,0,0,0.06);
}

/* system fonts for speed on low-end devices */
html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: var(--base-font);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  background: var(--bg);
  color: #222;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.35;
}

*,
*::before,
*::after { box-sizing: border-box; }

img, picture, video { max-width: 100%; height: auto; display: block; }

/* anchors */
a { color: inherit; text-decoration: none; }

/* =========================
   UTILITIES
   ========================= */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.row { display: grid; gap: 16px; grid-template-columns: 1fr; }

/* spacing helpers */
.mt-8 { margin-top: 8px; }
.mb-8 { margin-bottom: 8px; }
.text-center { text-align: center; }

/* accessibility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================
   HEADER / NAV
   ========================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.92));
  border-bottom: 1px solid rgba(0,0,0,0.04);
  backdrop-filter: blur(4px);
}

.site-header .container { display:flex; align-items:center; gap:14px; padding: 12px var(--container-pad); }
.brand { display:flex; align-items:center; gap:12px; }
.brand__logo {
  width:54px; height:54px; border-radius:12px;
  display:flex; align-items:center; justify-content:center; color:var(--bg);
  font-weight:900; background: linear-gradient(135deg,var(--maroon),var(--maroon-700));
  box-shadow: 0 6px 18px rgba(123,30,45,0.12);
}
.brand__name { font-weight:900; color:var(--maroon-700); font-size:1.05rem; }

/* nav */
.nav { margin-left:auto; display:flex; gap:8px; align-items:center; }
.nav a { padding:8px 10px; border-radius:10px; font-weight:700; color:var(--maroon-700); font-size:0.95rem; }
.nav a.cta { background: linear-gradient(90deg,var(--maroon),var(--maroon-700)); color: #fff; padding:8px 14px; }

/* mobile hamburger */
.hamburger { display:block; background:transparent; border:0; padding:8px; margin-left:8px; }
@media(min-width:880px){ .hamburger { display:none; } }

/* mobile menu (simple) */
.mobile-menu { display:none; padding:12px; background:var(--card-bg); border-top:1px solid rgba(0,0,0,0.04); }
.mobile-menu a { display:block; padding:8px 0; }

/* =========================
   HERO / LAUNCH BANNER
   ========================= */
.hero-wrap { padding: 28px 0 40px; }
.hero {
  display:grid; grid-template-columns: 1fr; gap:18px; align-items:center;
}
@media(min-width:980px){
  .hero { grid-template-columns: 1fr 420px; gap:28px; align-items:start; }
}

/* left rail */
.launch-pill {
  display:inline-flex; gap:10px; align-items:center;
  background: linear-gradient(90deg, rgba(212,175,55,0.12), rgba(212,175,55,0.06));
  color: var(--maroon-700);
  padding:8px 12px; border-radius:999px; font-weight:800; font-size:0.95rem;
}
.launch-pill .dot { width:10px; height:10px; border-radius:50%; background:var(--gold); }

.hero-title {
  font-size:1.6rem; font-weight:900; color:var(--maroon-700); margin:6px 0; letter-spacing:-0.6px;
}
@media(min-width:880px){ .hero-title { font-size:2.25rem; } }

.hero-sub { color:var(--muted); font-size:1rem; max-width:56ch; }

/* CTA buttons */
.hero-cta { display:flex; gap:12px; margin-top:8px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; border:0;
  transition: transform var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
.btn:active { transform: scale(0.995); }
.btn.primary { background: linear-gradient(90deg,var(--maroon),var(--maroon-700)); color:#fff; box-shadow: 0 10px 30px rgba(123,30,45,0.12); }
.btn.ghost { background: transparent; border:1px solid rgba(123,30,45,0.08); color:var(--maroon-700); }

/* tagline accent */
.tagline { display:block; font-weight:800; color:var(--maroon-700); margin-top:6px; }

/* right visual */
.hero-visual {
  width:100%; max-width:420px; margin:0 auto; border-radius:18px; padding:14px;
  background: linear-gradient(180deg,#fff,#fbf7f3); border:1px solid rgba(0,0,0,0.04); box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.visual-inner { display:flex; gap:12px; align-items:center; justify-content:center; }

/* phone mockup (low-cost visual for performance) */
.mockphone {
  width:180px; border-radius:18px; background:linear-gradient(180deg,#fff,#fefbf8);
  padding:10px; border:1px solid rgba(0,0,0,0.04); box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.mockphone .screen { background: linear-gradient(180deg,#fff,#fbf7f3); border-radius:12px; min-height:360px; padding:12px; display:flex; flex-direction:column; gap:8px; }

/* couple photo */
.couple-photo { width:130px; height:130px; border-radius:14px; overflow:hidden; background:#eee; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,0.06); }
.couple-photo img { width:100%; height:100%; object-fit:cover; }

/* =========================
   BACKGROUND GEOMETRIC SHAPES
   ========================= */
.bg-shapes { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.bg-shape { position: absolute; opacity: 0.06; filter: blur(0.2px); }

/* top-left maroon rounded rectangle */
.bg-shape-1 { width:360px; height:360px; background:var(--maroon); border-radius:40px; top:6%; left:-6%; transform:rotate(22deg); }
/* gold circle accent */
.bg-shape-2 { width:200px; height:200px; background:var(--gold); border-radius:50%; bottom:12%; right:-6%; }
/* right small maroon */
.bg-shape-3 { width:140px; height:140px; background:var(--maroon-700); border-radius:18px; top:58%; right:8%; transform:rotate(-16deg); }

@media (max-width:768px){ .bg-shape, .bg-shape-1, .bg-shape-2, .bg-shape-3 { display:none; } }

/* =========================
   LOGIN CARD (style only — HTML/pHP preserved)
   ========================= */
.login-container { max-width:520px; margin:0 auto; padding:28px 0; }
@media (max-width:480px) { .login-container { padding:20px 0; } }

.login-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 36px 30px;
  border: 1px solid rgba(123,30,45,0.06);
  box-shadow: 0 14px 40px rgba(123,30,45,0.10);
  position: relative;
}

/* brand block */
.login-header { text-align:center; margin-bottom:18px; }
.brand-logo { width:84px; height:84px; margin:0 auto 14px; background: linear-gradient(135deg,var(--maroon),var(--maroon-700)); border-radius:16px; color:var(--bg); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:1.8rem; box-shadow:0 10px 28px rgba(123,30,45,0.14); }
.brand-name { font-size:2rem; font-weight:900; color:var(--maroon-700); margin-bottom:6px; letter-spacing:-0.7px; }
.login-header h1 { font-size:2.1rem; font-weight:900; color:var(--maroon-700); margin-bottom:6px; }
.login-header p { color:var(--muted); font-size:1.05rem; }

/* alerts */
.alert { padding:12px 14px; border-radius:var(--radius-sm); margin-bottom:18px; font-size:0.95rem; }
.alert-error { background: rgba(239,68,68,0.08); color:#b02a37; border:1px solid rgba(239,68,68,0.12); font-weight:700; }

/* form */
.form { display:flex; flex-direction:column; gap:12px; }
.form-group { margin-bottom:6px; }
.form-group label { display:block; margin-bottom:8px; font-weight:700; color:var(--maroon-700); }
.input {
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid rgba(0,0,0,0.08); background:#fff; font-size:1rem; outline:none;
}
.input:focus { box-shadow: var(--focus); border-color: var(--maroon-700); }

/* login button */
.btn-login { display:block; width:100%; padding:12px 14px; border-radius:12px; font-weight:900; font-size:1rem; border:0; cursor:pointer; }
.btn-login.primary { background: linear-gradient(90deg,var(--maroon),var(--maroon-700)); color:#fff; box-shadow: 0 10px 28px rgba(123,30,45,0.12); }

/* divider */
.divider { text-align:center; margin:18px 0; color:var(--muted); font-size:0.95rem; position:relative; }
.divider::before, .divider::after { content:''; position:absolute; top:50%; width:40%; height:1px; background: rgba(0,0,0,0.06); }
.divider::before { left:0 } .divider::after { right:0 }

/* trust badges */
.trust-section { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding-top:8px; border-top:1px solid rgba(123,30,45,0.06); margin-top:12px; }
.trust-badge {
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px;
  background: linear-gradient(90deg, rgba(212,175,55,0.18), rgba(212,175,55,0.06));
  color: var(--maroon-700); font-weight:800; font-size:0.95rem; border:1px solid rgba(212,175,55,0.18);
}
.trust-badge .icon { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background: linear-gradient(135deg,var(--gold),var(--gold-600)); color:#fff; font-weight:900; font-size:11px; box-shadow:0 2px 6px rgba(212,175,55,0.18); }

/* small footer links */
.footer-links { text-align:center; margin-top:14px; font-size:0.92rem; }
.footer-links a { color:var(--maroon-700); font-weight:700; }

/* =========================
   PROFILE GRID / CARDS
   ========================= */
.profile-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:12px; }
@media(min-width:640px){ .profile-grid { grid-template-columns: repeat(3,1fr); } }
@media(min-width:1100px){ .profile-grid { grid-template-columns: repeat(4,1fr); } }

.card {
  background: var(--card-bg); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:10px;
  border: 1px solid rgba(0,0,0,0.04); box-shadow: var(--shadow-subtle);
}
.card__img { width:100%; aspect-ratio: 4/5; border-radius:10px; overflow:hidden; background:#f3f3f3; }
.card__title { font-weight:800; color:var(--maroon-700); font-size:0.98rem; }
.card__meta { color:var(--muted); font-size:0.9rem; }

/* card actions */
.card__actions { display:flex; gap:8px; margin-top:auto; }
.icon-btn { flex:1; padding:10px; border-radius:10px; font-weight:700; border:1px solid rgba(123,30,45,0.06); background:transparent; }

/* recommended highlight */
.card.recommended { border: 1px solid rgba(212,175,55,0.14); }

/* =========================
   PROFILE DETAIL / SIDEBAR
   ========================= */
.profile-side { background:var(--card-bg); padding:16px; border-radius:var(--radius); border:1px solid rgba(0,0,0,0.04); box-shadow:var(--shadow-subtle); }
.profile-side .avatar { width:120px; height:120px; border-radius:14px; overflow:hidden; background:#f2f2f2; margin-bottom:10px; }
.info-row { display:flex; justify-content:space-between; gap:8px; align-items:center; }
.info-row b { color:var(--maroon-700); }

/* =========================
   SEARCH & FILTERS
   ========================= */
.search-bar { display:flex; gap:8px; align-items:center; }
.search-bar .input { flex:1; }

/* filters */
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* =========================
   FOOTER
   ========================= */
.site-footer { margin-top:36px; padding:26px 0; color:var(--muted); border-top:1px solid rgba(0,0,0,0.03); font-size:0.92rem; background:transparent; }
.site-footer .container { display:flex; flex-direction:column; gap:12px; align-items:center; }

/* =========================
   ADMIN / DASHBOARD WIDGETS (simple cards)
   ========================= */
.widget { background:var(--card-bg); padding:12px; border-radius:12px; border:1px solid rgba(0,0,0,0.04); box-shadow:var(--shadow-subtle); }
.widget h3 { margin:0 0 8px; color:var(--maroon-700); font-weight:800; }

/* =========================
   RESPONSIVE / PERFORMANCE TWEAKS
   ========================= */
@media (max-width:420px) {
  :root { --radius: 12px; --radius-sm:8px; }
  .hero-title { font-size:1.25rem; }
  .mockphone { width:150px; }
  .couple-photo { width:110px; height:110px; }
  .login-card { padding:18px; }
  .brand__logo { width:72px; height:72px; }
}

/* avoid heavy shadows / CPU cost on small devices */
@media (max-width:360px) {
  .site-header { position:relative; }
  .login-card, .hero-visual { box-shadow: 0 6px 14px rgba(0,0,0,0.06); }
}

/* prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}

/* =========================
   PRINT
   ========================= */
@media print { .site-header, .site-footer, .btn, .hamburger { display:none !important; } body { background: #fff !important; } }

/* =========================
   PERFORMANCE NOTES (developer)
   - Use system fonts (already set). Avoid webfont loads if possible.
   - Serve images as WEBP/JPEG optimized (~80-150KB for hero/couple).
   - Use lazy loading for images: <img loading="lazy" ...>.
   - Defer/async non-critical JS (menu toggle is tiny).
   - Combine/minify CSS for production; keep critical CSS inlined if you need faster first paint.
   - Avoid expensive CSS (backdrop-filter, heavy blurs) on low-end devices.
   ========================= */