/* ============================================================
   Urgent Rishta — premium design layer over Bootstrap 5.3
   Signature: deep-rose-to-plum gradient used sparingly on primary
   actions, the profile hero, and the boost rail. Everything else
   stays calm: warm paper surfaces, hairline borders, soft shadows,
   Fraunces display serif paired with Plus Jakarta Sans.
   ============================================================ */
:root {
  /* Luxury palette (matches the landing page) — soft pink & white, no dark */
  --rose: #FF2D55; --rose-deep: #E01E45; --plum: #FF6B8A; --gold: #F5B301;
  --paper: #FFFFFF; --canvas: #FFF8FA; --ink: #111827; --muted: #6B7280;
  --line: #F1F5F9; --blush: #FFF1F4;
  --grad: linear-gradient(135deg, #FF2D55 0%, #FF6B8A 100%);
  --grad-soft: linear-gradient(135deg, #FFF1F4 0%, #FFE8EF 100%);
  --sh-1: 0 1px 2px rgba(17,24,39,.03), 0 2px 8px rgba(17,24,39,.04);
  --sh-2: 0 4px 12px rgba(17,24,39,.05), 0 12px 32px -12px rgba(255,45,85,.14);
  --sh-3: 0 8px 24px rgba(17,24,39,.06), 0 24px 56px -20px rgba(255,45,85,.20);
  --radius: 20px; --radius-sm: 14px;
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}
/* Back-compat aliases for any inline styles referencing the old names */
:root { --ur-primary: var(--rose); --ur-primary-dark: var(--rose-deep);
  --ur-gold: var(--gold); --ur-pink-bg: var(--blush); --ur-line: var(--line);
  --ur-ink: var(--ink); --ur-muted: var(--muted); --ur-radius: var(--radius);
  --ur-pink-soft: var(--blush); --pink: var(--rose); --pink-light: var(--plum); }
body { background: var(--canvas); color: var(--ink); font-family: var(--bs-body-font-family); -webkit-font-smoothing: antialiased; }
h1,h2,h3,h4,h5,.display-font { font-family: "Fraunces", Georgia, serif; font-optical-sizing: auto; letter-spacing: -.01em; color: var(--ink); }
.text-muted-2 { color: var(--muted) !important; }

.ur-brand { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.4rem; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .4rem; }
.ur-brand .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--grad); display: inline-flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--sh-1); }
.ur-brand .u { color: var(--rose); } .ur-brand .r { color: var(--ink); }

.ur-navbar { background: rgba(255,252,251,.85); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); padding: .55rem 0; z-index: 1030; }
.ur-navbar .nav-link { color: var(--ink); font-weight: 600; font-size: .93rem; padding: .4rem .85rem; border-radius: 8px; position: relative; transition: color .15s, background .15s; }
.ur-navbar .nav-link:hover { background: var(--blush); }
.ur-navbar .nav-link.active { color: var(--rose); }
.ur-navbar .nav-link.active::after { content: ""; position: absolute; left: .85rem; right: .85rem; bottom: -.5rem; height: 2.5px; background: var(--grad); border-radius: 3px; }

.btn-ur { background: var(--grad); color: #fff; font-weight: 600; border: 0; border-radius: 11px; padding: .55rem 1.25rem; box-shadow: 0 6px 16px -6px rgba(226,40,111,.5); transition: transform .14s, box-shadow .14s, filter .14s; }
.btn-ur:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(226,40,111,.6); }
.btn-ur:active { transform: translateY(0); filter: brightness(.97); }
.btn-ur:disabled { opacity: .55; box-shadow: none; transform: none; }
.btn-ur-soft { background: var(--blush); color: var(--rose-deep); font-weight: 600; border: 0; border-radius: 11px; padding: .55rem 1.25rem; transition: background .14s; }
.btn-ur-soft:hover { background: #FBE0EA; color: var(--rose-deep); }
.btn-ur-outline { background: transparent; color: var(--rose); font-weight: 600; border: 1.5px solid var(--rose); border-radius: 11px; padding: .5rem 1.2rem; transition: background .14s, color .14s; }
.btn-ur-outline:hover { background: var(--rose); color: #fff; }

.ur-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--sh-1); transition: box-shadow .2s, transform .2s; }
.ur-card-hover:hover { box-shadow: var(--sh-2); transform: translateY(-3px); }
.ur-card-pad { padding: 1.4rem; }

.ur-sidebar { position: sticky; top: 5.2rem; }
.ur-sidebar .nav-link { color: var(--ink); font-weight: 600; border-radius: 11px; padding: .62rem .8rem; margin-bottom: .12rem; display: flex; align-items: center; gap: .7rem; font-size: .92rem; transition: background .14s, color .14s; }
.ur-sidebar .nav-link i { font-size: 1.15rem; width: 1.4rem; text-align: center; opacity: .85; }
.ur-sidebar .nav-link .badge { margin-left: auto; }
.ur-sidebar .nav-link:hover { background: var(--blush); }
.ur-sidebar .nav-link.active { background: var(--blush); color: var(--rose-deep); }
.ur-sidebar .nav-link.active i { opacity: 1; color: var(--rose); }

.ur-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--grad); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; flex: none; font-family: "Fraunces", serif; }
.ur-avatar.ring { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--blush); }

.ur-match { text-align: center; }
.ur-match .ur-avatar { width: 66px; height: 66px; margin: 0 auto .45rem; transition: transform .18s; }
.ur-match a:hover .ur-avatar { transform: scale(1.06); }
.ur-match .name { font-size: .83rem; font-weight: 600; }

.ur-stat { position: relative; overflow: hidden; }
.ur-stat .ic { width: 42px; height: 42px; border-radius: 12px; background: var(--grad-soft); color: var(--rose); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: .75rem; }
.ur-stat .num { font-family: "Fraunces", serif; font-size: 2rem; font-weight: 600; line-height: 1; }
.ur-stat .lbl { color: var(--muted); font-size: .82rem; font-weight: 600; }
.ur-trend-up { color: #15884b; font-size: .8rem; font-weight: 700; }

.ur-boost { background: var(--grad-soft); border: 1px solid #FBDDE8; border-radius: var(--radius); }
.ur-boost-dark { background: var(--grad); color: #fff; border-radius: var(--radius); box-shadow: var(--sh-2); position: relative; overflow: hidden; }
.ur-boost-dark::after { content: "\F586"; font-family: "bootstrap-icons"; position: absolute; right: -8px; bottom: -18px; font-size: 6rem; opacity: .16; }

.ur-sec-title { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.15rem; }
.ur-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose); display: inline-flex; align-items: center; gap: .4rem; }
.ur-link { color: var(--rose); font-weight: 600; font-size: .85rem; text-decoration: none; }
.ur-link:hover { color: var(--rose-deep); }
.ur-verified { color: var(--gold); }

.form-control, .form-select { border-color: var(--line); border-radius: 10px; padding: .55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(226,40,111,.12); }
.form-label { font-weight: 600; font-size: .82rem; color: var(--ink); }

.ur-skel { background: linear-gradient(90deg, #f1e8ec, #faf3f6, #f1e8ec); background-size: 200% 100%; animation: urshimmer 1.2s infinite; border-radius: 10px; }
@keyframes urshimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }

.ur-rise { opacity: 0; transform: translateY(10px); animation: urrise .5s ease forwards; }
.ur-rise-2 { animation-delay: .08s; } .ur-rise-3 { animation-delay: .16s; }
@keyframes urrise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .ur-rise, .ur-rise-2, .ur-rise-3 { animation: none; opacity: 1; transform: none; }
  .btn-ur, .ur-card, .ur-match .ur-avatar { transition: none; }
}

/* ============================================================
   LUXURY COMPONENT LAYER — unifies app pages with the landing.
   Brings index.php's polished components into the shared theme so
   every page that loads theme.css gets the same premium look.
   ============================================================ */

/* Wider premium container + generous rhythm */
.container-lux { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
html { scroll-behavior: smooth; }

/* Luxury pill buttons (available everywhere now) */
.btn-lux {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 52px; padding: 0 1.75rem; border-radius: 999px; border: 0; cursor: pointer;
  font-weight: 700; font-size: 1rem; background: var(--grad); color: #fff;
  box-shadow: 0 18px 36px -12px rgba(255,45,85,.45); transition: transform .16s, box-shadow .16s;
}
.btn-lux:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 24px 46px -14px rgba(255,45,85,.5); }
.btn-lux-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 52px; padding: 0 1.75rem; border-radius: 999px; cursor: pointer;
  font-weight: 700; font-size: 1rem; background: var(--paper); color: var(--rose);
  border: 1.5px solid #FFD3DD; transition: border-color .16s, transform .16s;
}
.btn-lux-ghost:hover { color: var(--rose); border-color: var(--rose); transform: translateY(-2px); }
.btn-sm-lux { height: 42px; padding: 0 1.2rem; font-size: .9rem; }

/* Section rhythm + eyebrow (matches landing) */
.sec { padding: 4rem 0; }
.sec-bg { background: var(--canvas); }
.sec-white { background: var(--paper); }
.sec-pink { background: #FFF5F7; }
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }

/* Elevate the existing shared components to the luxury feel */
.btn-ur { border-radius: 999px !important; box-shadow: 0 16px 32px -12px rgba(255,45,85,.45); }
.ur-card { border-radius: var(--radius); box-shadow: var(--sh-2); }
.ur-navbar {
  background: rgba(255,248,250,.82); backdrop-filter: saturate(180%) blur(14px);
}
.ur-navbar .ur-brand .mark, .lux-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--grad);
  display: grid; place-items: center; color: #fff;
}

/* Softer, rounder inputs across app pages */
.form-control, .form-select { border-radius: 12px; }

/* ============================================================
   LUXURY UPGRADE v2 — make the existing app components actually
   FEEL like the landing page: roomier cards, deeper radius, more
   air, wider container, serif section titles. CSS-only, no markup
   changes, so nothing in the pages or JS is touched.
   ============================================================ */

/* Roomier page canvas — Bootstrap .container gets the lux width + padding */
.container { max-width: 1200px !important; padding-left: 28px; padding-right: 28px; }
.container-xl { max-width: 1240px !important; }

/* Cards: bigger radius, more padding, softer luxury shadow */
.ur-card { border-radius: 24px !important; box-shadow: 0 10px 40px rgba(17,24,39,.05) !important; border: 1px solid var(--line); }
.ur-card-hover:hover, .ur-card:hover { box-shadow: 0 20px 60px rgba(17,24,39,.08) !important; }
.ur-card-pad { padding: 1.9rem !important; }

/* Buttons: taller, rounder, richer shadow */
.btn-ur { border-radius: 999px !important; padding: .6rem 1.5rem !important; box-shadow: 0 16px 32px -12px rgba(255,45,85,.45) !important; font-weight: 700; }
.btn-ur-soft, .btn-ur-outline { border-radius: 999px !important; padding: .55rem 1.4rem !important; }
.btn-sm { border-radius: 999px !important; }

/* Section + card titles use the serif for that editorial, expensive feel */
.ur-sec-title, .ur-section-title { font-family: "Fraunces", serif !important; font-weight: 600 !important; font-size: 1.2rem !important; }

/* Sidebar: airier, pill items, soft card */
.ur-sidebar { border-radius: 24px; }
.ur-sidebar .nav-link { border-radius: 12px; padding: .7rem .9rem; font-size: .94rem; }
.ur-sidebar .nav-link.active { background: var(--grad-soft); box-shadow: inset 0 0 0 1px #FBDDE8; }

/* Stat cards: luxury icon tiles + serif numerals */
.ur-stat .ic { width: 48px; height: 48px; border-radius: 14px; font-size: 1.4rem; }
.ur-stat .num { font-family: "Fraunces", serif; font-size: 2.1rem; }

/* Boost rails match the landing's soft gradient panels */
.ur-boost, .ur-boost-dark { border-radius: 24px; }

/* Avatars a touch larger + ring */
.ur-avatar.ring { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--blush); }

/* More vertical rhythm on the page body */
body { letter-spacing: -.005em; }
h1,h2,h3,h4,h5 { letter-spacing: -.02em; }

/* Navbar: taller, more premium */
.ur-navbar { padding: .7rem 0; }
.ur-navbar .container { max-width: 1240px !important; }

/* Inputs: taller, softer — matches the login/edit forms */
.form-control, .form-select { min-height: 46px; border-radius: 12px; border-color: var(--line); }
.form-control:focus, .form-select:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(255,45,85,.1); }

/* ============================================================
   NOTIFICATIONS — shared bell, dropdown panel and nav badges.
   Lives in theme.css so every page that loads the shared nav
   gets the same behaviour and look.
   ============================================================ */
.ur-bell{
  width:40px;height:40px;border-radius:50%;display:inline-grid;place-items:center;
  color:var(--ink);background:var(--paper);border:1px solid var(--line);font-size:1.05rem;
  transition:border-color .15s,color .15s;
}
.ur-bell:hover{border-color:var(--rose);color:var(--rose)}
.ur-belldot{
  position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;
  background:var(--rose);box-shadow:0 0 0 2px var(--paper);
}
.ur-navbadge{
  display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
  margin-left:.35rem;border-radius:9px;background:var(--rose);color:#fff;
  font-size:.68rem;font-weight:700;vertical-align:middle;
}
.ur-notif-menu{
  width:min(360px,92vw);padding:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;
}
.ur-notif-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1rem .6rem;border-bottom:1px solid var(--line);
}
.ur-notif-head span{font-family:"Fraunces",serif;font-weight:600;font-size:1rem}
.ur-notif-clear{
  border:0;background:transparent;color:var(--rose);font-weight:700;font-size:.76rem;cursor:pointer;padding:.2rem .3rem;
}
.ur-notif-list{max-height:min(420px,60vh);overflow-y:auto;overscroll-behavior:contain;padding:.35rem}
.ur-notif-item{
  display:flex;gap:.7rem;align-items:flex-start;padding:.6rem .65rem;border-radius:12px;
  text-decoration:none;color:var(--ink);transition:background .12s;
}
.ur-notif-item:hover{background:var(--canvas);color:var(--ink)}
.ur-notif-item.unseen{background:var(--blush)}
.ur-notif-item.unseen:hover{background:#FBD5E2}
.ur-notif-ic{
  width:32px;height:32px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--blush);color:var(--rose);font-size:.85rem;
}
.ur-notif-item.unseen .ur-notif-ic{background:var(--rose);color:#fff}
.ur-notif-tx{font-size:.86rem;line-height:1.45;display:block}
.ur-notif-tx time{display:block;font-size:.7rem;color:var(--muted);margin-top:.15rem}
.ur-notif-empty{text-align:center;padding:1.8rem 1rem;color:var(--muted);font-size:.85rem}
.ur-notif-all{
  display:block;text-align:center;padding:.7rem;border-top:1px solid var(--line);
  font-size:.8rem;font-weight:700;color:var(--rose);text-decoration:none;
}
.ur-notif-all:hover{background:var(--canvas);color:var(--rose-deep)}