/* ============ Liban House — Unit M18 client portal ============ */
:root {
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-rtl: 'Cairo', var(--font);
  --r-lg: 22px; --r-md: 16px; --r-sm: 10px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.18);
  --shadow-2: 0 24px 60px rgba(0,0,0,.28);
  --accent: #c9a227; --accent-2: #e6c65c;
  --ok: #2ecc71; --warn: #f1c40f; --danger: #e74c3c;
  --maxw: 1180px;
}
html[data-theme="dark"] {
  --bg: #0b0e14; --bg-2: #10141d; --card: #151a26; --card-2: #1a2030;
  --text: #eef1f7; --muted: #98a1b3; --line: #232a3a;
  --orb1: rgba(201,162,39,.16); --orb2: rgba(64,120,255,.12); --orb3: rgba(46,204,113,.08);
  --glass: rgba(21,26,38,.72);
}
html[data-theme="light"] {
  --bg: #f6f4ef; --bg-2: #fbfaf7; --card: #ffffff; --card-2: #f3f0e8;
  --text: #171b26; --muted: #5c6373; --line: #e2ddd2;
  --orb1: rgba(201,162,39,.20); --orb2: rgba(64,120,255,.10); --orb3: rgba(46,204,113,.10);
  --glass: rgba(255,255,255,.78);
  --shadow-1: 0 10px 30px rgba(60,50,20,.10); --shadow-2: 0 24px 60px rgba(60,50,20,.16);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
html[dir="rtl"] body { font-family: var(--font-rtl); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; }
::selection { background: var(--accent); color: #14100a; }

/* ---- animated background orbs ---- */
.orbs { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .9; }
.orb.o1 { width: 520px; height: 520px; background: var(--orb1); top: -140px; inset-inline-start: -120px; animation: drift1 26s ease-in-out infinite alternate; }
.orb.o2 { width: 460px; height: 460px; background: var(--orb2); bottom: -160px; inset-inline-end: -100px; animation: drift2 32s ease-in-out infinite alternate; }
.orb.o3 { width: 380px; height: 380px; background: var(--orb3); top: 40%; inset-inline-start: 46%; animation: drift1 40s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(60px,40px,0) scale(1.12); } }
@keyframes drift2 { from { transform: translate3d(0,0,0) scale(1.06); } to { transform: translate3d(-50px,-30px,0) scale(.94); } }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); background: var(--glass); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #17120a; background: linear-gradient(135deg, var(--accent-2), var(--accent)); box-shadow: var(--shadow-1); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 15px; }
.brand-text small { color: var(--muted); font-size: 11px; }
.unit-badge { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--accent); border: 1px solid var(--accent); }
.links { display: flex; gap: 6px; margin-inline-start: auto; }
.links a { padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); transition: .2s; }
.links a:hover, .links a.on { color: var(--text); background: var(--card-2); }
.nav-tools { display: flex; align-items: center; gap: 8px; margin-inline-start: 8px; }
.lang-switch { display: flex; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.lang-switch button { border: 0; background: transparent; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; transition: .2s; }
.lang-switch button.on { background: var(--accent); color: #17120a; }
.icon-btn { width: 36px; height: 36px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; transition: .2s; font-size: 15px; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="dark"] .ic-sun { display: block; } html[data-theme="dark"] .ic-moon { display: none; }
html[data-theme="light"] .ic-sun { display: none; } html[data-theme="light"] .ic-moon { display: block; }
.menu-btn { display: none; }

/* ---- hero ---- */
.hero { max-width: var(--maxw); margin: 0 auto; padding: 64px 20px 40px; display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 26%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 8%, transparent); } }
.hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; margin: 14px 0 16px; font-weight: 800; letter-spacing: -.02em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lead { color: var(--muted); font-size: 16.5px; max-width: 56ch; }
.hero-cta { display: flex; gap: 12px; margin: 26px 0 30px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; transition: .22s; }
.btn-primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #17120a; box-shadow: var(--shadow-1); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.hero-stats { display: flex; gap: 26px; flex-wrap: wrap; }
.hstat { display: flex; flex-direction: column; }
.hstat strong { font-size: 22px; font-weight: 800; color: var(--text); }
.hstat span { color: var(--muted); font-size: 12.5px; }
.hero-visual { position: relative; }
.frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--line); background: var(--card); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.f-main { aspect-ratio: 4/3.4; animation: floaty 9s ease-in-out infinite; }
.f-a { position: absolute; width: 42%; aspect-ratio: 1; inset-inline-start: -8%; bottom: -6%; animation: floaty 11s ease-in-out infinite reverse; }
.f-b { position: absolute; width: 34%; aspect-ratio: 3/4; inset-inline-end: -6%; top: -6%; animation: floaty 13s ease-in-out infinite; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.hero-glow { position: absolute; inset: 8% 6%; z-index: -1; background: radial-gradient(closest-side, var(--orb1), transparent 70%); filter: blur(30px); }

/* ---- sections ---- */
.section { max-width: var(--maxw); margin: 0 auto; padding: 54px 20px; }
.sec-head { margin-bottom: 26px; }
.sec-head h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 8px; font-weight: 800; letter-spacing: -.01em; }
.sec-head p { color: var(--muted); margin: 0; }

/* overview cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; transition: .22s; }
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow-1); }
.card .ico { font-size: 20px; }
.card h3 { margin: 10px 0 4px; font-size: 13px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.card .val { font-size: 20px; font-weight: 800; }
.card .sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }

/* gallery */
.video-wrap { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #000; margin-bottom: 20px; position: relative; }
.video-wrap video { width: 100%; aspect-ratio: 16/9; display: block; background: #000; }
.video-note { position: absolute; inset: 0; display: grid; place-items: center; color: #d9d2c2; background: var(--card-2); margin: 0; padding: 20px; text-align: center; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.g-card { position: relative; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); cursor: pointer; aspect-ratio: 4/3; background: var(--card); }
.g-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.g-card:hover img { transform: scale(1.06); }
.g-card .g-label { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font-weight: 700; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; }
.g-card .g-count { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.25); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(4,6,10,.92); backdrop-filter: blur(8px); display: grid; place-items: center; }
.lightbox figure { margin: 0; max-width: min(1080px, 88vw); }
.lightbox img { max-height: 80vh; border-radius: var(--r-md); box-shadow: var(--shadow-2); margin: 0 auto; }
.lightbox figcaption { color: #e8e2d4; text-align: center; margin-top: 12px; font-weight: 600; }
.lb-close, .lb-nav { position: fixed; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font-size: 20px; cursor: pointer; }
.lb-close { top: 18px; inset-inline-end: 18px; }
.lb-prev { inset-inline-start: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { inset-inline-end: 18px; top: 50%; transform: translateY(-50%); }

/* ---- payments ---- */
.pay-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.cur-toggle { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.cur-toggle button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; }
.cur-toggle button.on { background: var(--accent); color: #17120a; }
.rate-info { color: var(--muted); font-size: 12.5px; }
.pay-actions { display: flex; gap: 8px; margin-inline-start: auto; flex-wrap: wrap; }
.pay-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.pstat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px; }
.pstat .lbl { color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pstat .v { font-size: 21px; font-weight: 800; margin-top: 6px; }
.pstat .v small { font-size: 12px; color: var(--muted); font-weight: 600; }
.pstat .bar { height: 7px; border-radius: 999px; background: var(--card-2); margin-top: 10px; overflow: hidden; }
.pstat .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.pay-groups { display: flex; flex-direction: column; gap: 12px; }
.pay-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pg-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: transparent; border: 0; cursor: pointer; text-align: start; }
.pg-head:hover { background: var(--card-2); }
.pg-chev { transition: transform .25s; color: var(--muted); }
.pay-group.open .pg-chev { transform: rotate(90deg); }
html[dir="rtl"] .pg-chev { transform: rotate(180deg); } html[dir="rtl"] .pay-group.open .pg-chev { transform: rotate(90deg); }
.pg-year { font-weight: 800; font-size: 16px; }
.pg-meta { color: var(--muted); font-size: 12.5px; margin-inline-start: auto; display: flex; gap: 14px; flex-wrap: wrap; }
.pg-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.pay-group.open .pg-body { max-height: 2600px; }
.pg-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pg-table th { text-align: start; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card-2); position: sticky; top: 0; }
.pg-table td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pg-table tr:last-child td { border-bottom: 0; }
.pg-table tr.due-next td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.pg-table tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
html[dir="rtl"] .pg-table tr.overdue td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
.amt { font-weight: 700; }
.amt small { display: block; color: var(--muted); font-weight: 600; font-size: 11px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.pill.paid { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.pill.unpaid { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.pill.over { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.pay-toggle { width: 34px; height: 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--card-2); position: relative; cursor: not-allowed; opacity: .55; }
.pay-toggle i { position: absolute; top: 2px; inset-inline-start: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: .2s; }
body.owner .pay-toggle { cursor: pointer; opacity: 1; }
.pay-toggle.on { background: color-mix(in srgb, var(--ok) 30%, transparent); border-color: var(--ok); }
.pay-toggle.on i { background: var(--ok); transform: translateX(14px); }
html[dir="rtl"] .pay-toggle.on i { transform: translateX(-14px); }
.pay-note { color: var(--muted); font-size: 12.5px; margin-top: 14px; }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--line); padding: 22px 20px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; color: var(--muted); font-size: 13px; }

/* ---- reveal ---- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- chat ---- */
.chat-fab-wrap { position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 60; }
.chat-fab { width: 58px; height: 58px; border-radius: 50%; border: 0; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #17120a; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-2); position: relative; }
.fab-ping { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); animation: ping 2.6s infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
.chat-panel { position: fixed; inset-inline-end: 22px; bottom: 92px; z-index: 70; width: min(400px, calc(100vw - 32px)); height: min(600px, calc(100vh - 120px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-2); display: flex; flex-direction: column; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--card-2); }
.chat-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-2), var(--accent)); font-size: 18px; }
.chat-head-txt { display: flex; flex-direction: column; line-height: 1.2; }
.chat-head-txt strong { font-size: 14px; }
.chat-head-txt small { color: var(--muted); font-size: 11px; }
.chat-head-tools { margin-inline-start: auto; display: flex; gap: 6px; }
.chat-tools { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.chip { border: 1px solid var(--line); background: var(--card-2); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; white-space: nowrap; }
.chip:hover { color: var(--accent); border-color: var(--accent); }
.chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #17120a; border-end-end-radius: 4px; }
.msg.ai { align-self: flex-start; background: var(--card-2); border: 1px solid var(--line); border-end-start-radius: 4px; }
.msg.ai img { border-radius: 10px; margin-top: 6px; max-height: 180px; }
.msg.typing { display: inline-flex; gap: 4px; }
.msg.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; }
.msg.typing i:nth-child(2) { animation-delay: .2s; } .msg.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
.chat-calc { border-top: 1px solid var(--line); background: var(--card-2); padding: 10px; }
.calc-display { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.calc-display output { font-size: 20px; font-weight: 800; text-align: end; min-height: 26px; }
.calc-display input { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 8px 10px; color: var(--text); font-family: inherit; font-size: 13px; }
.calc-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.calc-keys button { border: 1px solid var(--line); background: var(--card); border-radius: 9px; padding: 8px 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.calc-keys button:hover { border-color: var(--accent); color: var(--accent); }
.fx-row { display: flex; gap: 8px; align-items: center; }
.fx-row input, .fx-row select { border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 8px; color: var(--text); font-family: inherit; }
.fx-row strong { margin-inline-start: auto; font-size: 15px; }
#fxNote { color: var(--muted); display: block; margin-top: 6px; }
.chat-foot { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: var(--card-2); }
.chat-foot textarea { flex: 1; resize: none; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 10px 12px; color: var(--text); font-family: inherit; font-size: 13.5px; max-height: 110px; }
.chat-send { width: 42px; border-radius: 12px; border: 0; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #17120a; font-size: 15px; cursor: pointer; }

/* ---- responsive ---- */
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; padding-top: 40px; }
  .hero-visual { order: -1; }
  .links { display: none; position: absolute; top: 62px; inset-inline: 12px; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; box-shadow: var(--shadow-2); }
  .links.open { display: flex; }
  .menu-btn { display: grid; }
  .pay-actions { margin-inline-start: 0; }
}