/* Extracted from page-tenant-portal.php so it is cached once instead of being re-sent
   inside the HTML on every page view. Enqueued by
   lumoria_enqueue_template_styles() in functions.php. */

  .lum-portal, .lum-portal * { box-sizing: border-box; }
  .lum-portal { --portal-mint:#44bda1; --portal-dark:#04272f; --portal-peach:#f7ebe4; --portal-line:rgba(4,39,47,.14); min-height:75vh; padding:clamp(50px,7vw,96px) 0; color:var(--portal-dark); background:radial-gradient(circle at 8% 3%,rgba(68,189,161,.1),transparent 24rem),#fbfaf8; font-family:var(--font-primary); }
  .lum-portal-shell { width:min(1220px,calc(100% - 40px)); margin:0 auto; }
  .lum-portal-auth-wrap { width:100%; max-width:1120px; margin-inline:auto; }
  .lum-portal-authbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 0 18px; }
  .lum-portal-authbar .lum-portal-back { margin:0; }
  .lum-portal .lum-lang-switch { display:inline-flex; align-items:center; gap:2px; padding:4px; border:1px solid var(--portal-line); border-radius:999px; background:#fff; box-shadow:0 8px 22px rgba(4,39,47,.07); }
  .lum-portal .lum-lang-switch a,.lum-portal .lum-lang-switch span { display:inline-flex; min-width:40px; min-height:32px; align-items:center; justify-content:center; padding:0 12px; border-radius:999px; font-size:var(--text-xs); font-weight:var(--fw-bold); line-height:1; text-decoration:none; }
  .lum-portal .lum-lang-switch a { color:var(--portal-dark); }
  .lum-portal .lum-lang-switch a:hover,.lum-portal .lum-lang-switch a:focus-visible { background:#f2f4f7; }
  .lum-portal .lum-lang-switch .is-current { color:#fff; background:#209b80; }
  .lum-portal-back { display:inline-flex; align-items:center; gap:9px; min-height:42px; margin:0 0 18px; padding:8px 16px; border:1px solid var(--portal-line); border-radius:999px; color:var(--portal-dark); background:#fff; box-shadow:0 8px 22px rgba(4,39,47,.07); font-size:var(--text-sm); font-weight:var(--fw-semibold); line-height:1; text-decoration:none; transition:color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
  .lum-portal-back:hover,.lum-portal-back:focus-visible { border-color:var(--portal-mint); color:var(--portal-dark); box-shadow:0 10px 26px rgba(4,39,47,.11); transform:translateX(-2px); }
  .lum-portal-back i { color:#209b80; font-size:13px; }
  .lum-portal[dir="rtl"] .lum-portal-back i { transform:rotate(180deg); }
  .lum-portal[dir="rtl"] .lum-portal-back:hover,.lum-portal[dir="rtl"] .lum-portal-back:focus-visible { transform:translateX(2px); }
  .lum-portal-top { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:38px; }
  .lum-portal-brand { display:flex; align-items:center; gap:18px; }
  .lum-portal-brand-icon,.lum-portal-card-icon { display:grid; place-items:center; flex:0 0 auto; border-radius:50%; color:#209b80; background:var(--portal-peach); }
  .lum-portal-brand-icon { width:64px; height:64px; font-size:25px; }
  .lum-portal-brand h1 { margin:0 0 4px; font-family:var(--font-display); font-size:clamp(26px,3vw,38px); line-height:1.15; }
  .lum-portal-brand p { margin:0; color:rgba(4,39,47,.68); }
  .lum-portal-logout { display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:10px 22px; border:1px solid var(--portal-line); border-radius:999px; color:var(--portal-dark); background:#fff; box-shadow:0 3px 10px rgba(4,39,47,.07); text-decoration:none; }
  .lum-portal-notice { margin:0 0 24px; padding:15px 18px; border:1px solid var(--portal-line); border-radius:14px; background:#fff; }
  .lum-portal-notice.success { border-color:rgba(68,189,161,.45); background:rgba(68,189,161,.08); }
  .lum-portal-notice.error { border-color:rgba(186,62,62,.3); background:#fff2f2; color:#8a2424; }
  .lum-portal-auth { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(410px,.95fr); width:100%; min-height:610px; overflow:hidden; border:1px solid rgba(4,39,47,.1); border-radius:30px; background:#fff; box-shadow:0 28px 75px rgba(4,39,47,.12); }
  .lum-portal-intro { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:center; padding:clamp(46px,6vw,76px); overflow:hidden; color:#fff; background:linear-gradient(145deg,#04272f 0%,#083b43 62%,#0c514e 100%); }
  .lum-portal-intro::before,.lum-portal-intro::after { position:absolute; z-index:-1; content:""; border-radius:50%; pointer-events:none; }
  .lum-portal-intro::before { inline-size:340px; block-size:340px; inset-block-start:-150px; inset-inline-end:-140px; border:1px solid rgba(255,255,255,.13); box-shadow:0 0 0 48px rgba(255,255,255,.035),0 0 0 96px rgba(255,255,255,.025); }
  .lum-portal-intro::after { inline-size:230px; block-size:230px; inset-block-end:-155px; inset-inline-start:-80px; background:rgba(68,189,161,.16); }
  .lum-portal-auth-brand { display:flex; align-items:center; gap:14px; align-self:flex-start; margin-block-end:auto; color:#fff; text-decoration:none; }
  .lum-portal-auth-mark { display:grid; inline-size:48px; block-size:48px; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:14px; background:rgba(255,255,255,.1); font-size:var(--text-lg); font-weight:var(--fw-bold); letter-spacing:-.03em; }
  .lum-portal-auth-mark.has-logo { background:#1D1235; }
  .lum-portal-auth-mark.has-logo img { display:block; inline-size:64%; block-size:64%; object-fit:contain; }
  .lum-portal-auth-brand strong,.lum-portal-auth-brand small { display:block; }
  .lum-portal-auth-brand strong { font-size:var(--text-lg); font-weight:var(--fw-bold); }
  .lum-portal-auth-brand small { margin-block-start:2px; color:rgba(255,255,255,.65); font-size:var(--text-xs); }
  .lum-portal-intro-copy { margin-block:clamp(52px,8vw,84px) 42px; }
  .lum-portal-intro .lum-portal-kicker { display:inline-flex; align-items:center; gap:8px; margin-block-end:20px; padding:8px 14px; border:1px solid rgba(127,225,199,.32); border-radius:999px; color:#a8ead9; background:rgba(68,189,161,.09); font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase; }
  .lum-portal-intro .lum-portal-kicker::before { inline-size:7px; block-size:7px; border-radius:50%; background:#6dd7ba; content:""; box-shadow:0 0 0 4px rgba(109,215,186,.12); }
  .lum-portal-intro h1 { max-width:520px; margin:0 0 18px; color:#fff; font-family:var(--font-primary); font-size:clamp(var(--text-4xl),4.4vw,var(--text-6xl)); font-weight:var(--fw-heading); line-height:1.04; letter-spacing:-.04em; }
  .lum-portal-intro p { max-width:520px; margin:0; color:rgba(255,255,255,.72); font-size:var(--text-base); line-height:1.75; }
  .lum-portal-benefits { display:grid; gap:13px; margin:0; padding:0; list-style:none; }
  .lum-portal-benefits li { display:flex; align-items:center; gap:12px; color:rgba(255,255,255,.84); font-size:var(--text-sm); }
  .lum-portal-benefits i { display:grid; inline-size:30px; block-size:30px; flex:0 0 auto; place-items:center; border-radius:9px; color:#8fe2cc; background:rgba(255,255,255,.09); font-size:var(--text-xs); }
  .lum-portal-authbox { display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,5vw,62px); background:linear-gradient(180deg,#fff,#fdfcfb); }
  .lum-portal-auth-head { margin-block-end:30px; }
  .lum-portal-auth-head-icon { display:grid; inline-size:52px; block-size:52px; margin-block-end:22px; place-items:center; border-radius:16px; color:#127761; background:rgba(68,189,161,.13); font-size:var(--text-xl); }
  .lum-portal-auth-head h2 { margin:0 0 8px; color:var(--portal-dark); font-family:var(--font-primary); font-size:var(--text-3xl); font-weight:var(--fw-heading); letter-spacing:-.025em; }
  .lum-portal-auth-head p { margin:0; color:rgba(4,39,47,.62); font-size:var(--text-sm); line-height:1.65; }
  .lum-portal-form { display:block; padding:0; }
  .lum-portal-field { display:block; margin-bottom:17px; }
  .lum-portal-field span { display:block; margin-block-end:8px; font-size:var(--text-sm); font-weight:var(--fw-semibold); }
  .lum-portal-field input,.lum-portal-field select,.lum-portal-field textarea { width:100%; min-height:52px; padding-block:12px; padding-inline:15px; border:1px solid var(--portal-line); border-radius:12px; color:var(--portal-dark); background:#fff; font:inherit; outline:0; }
  .lum-portal-field textarea { min-height:130px; resize:vertical; }
  /* Password field with its reveal button. The button sits inside the input's
     padding, and the input gains room on that side so long passwords never run
     under it. Logical properties keep it on the correct side in RTL. */
  .lum-portal-pass { position:relative; display:block; }
  .lum-portal-pass input { padding-inline-end:48px; }
  .lum-portal-pass-toggle { position:absolute; inset-block-start:0; inset-block-end:0; inset-inline-end:6px; display:inline-flex; align-items:center; justify-content:center; width:38px; padding:0; border:0; background:none; color:var(--portal-muted,#6b7a78); font-size:15px; line-height:1; cursor:pointer; border-radius:10px; }
  .lum-portal-pass-toggle:hover { color:var(--portal-dark); }
  .lum-portal-pass-toggle:focus-visible { outline:2px solid var(--portal-mint); outline-offset:-2px; }
  .lum-portal-field input:focus,.lum-portal-field select:focus,.lum-portal-field textarea:focus { border-color:var(--portal-mint); box-shadow:0 0 0 3px rgba(68,189,161,.13); }
  .lum-portal-check { display:flex; align-items:center; gap:9px; margin:0 0 20px; color:rgba(4,39,47,.72); font-size:var(--text-sm); }
  .lum-portal-check input { accent-color:var(--portal-mint); }
  .lum-portal-submit,.lum-portal-raise { display:inline-flex; width:100%; min-height:52px; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px; color:#fff; background:var(--portal-dark); box-shadow:0 5px 14px rgba(4,39,47,.16); font:inherit; font-weight:var(--fw-semibold); cursor:pointer; transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease; }
  .lum-portal-submit:hover,.lum-portal-raise:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(4,39,47,.14); }
  .lum-portal-access-help { display:flex; align-items:center; gap:13px; margin-block-start:25px; padding:15px; border:1px solid rgba(4,39,47,.09); border-radius:14px; background:#f4f7f5; }
  .lum-portal-access-help i { display:grid; inline-size:36px; block-size:36px; flex:0 0 auto; place-items:center; border-radius:50%; color:#127761; background:#fff; }
  .lum-portal-access-help p { margin:0; color:rgba(4,39,47,.66); font-size:var(--text-xs); line-height:1.55; }
  .lum-portal-access-help a { display:inline-block; margin-block-start:2px; color:var(--portal-dark); font-weight:var(--fw-bold); text-underline-offset:3px; }
  .lum-portal-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:44px; }
  .lum-portal-card { display:flex; min-height:330px; flex-direction:column; padding:32px; border:1px solid var(--portal-line); border-radius:24px; background:#fff; box-shadow:0 14px 34px rgba(4,39,47,.07); }
  .lum-portal-card-icon { width:60px; height:60px; margin-bottom:25px; font-size:23px; }
  .lum-portal-card h2 { margin:0 0 13px; font-size:20px; }
  .lum-portal-card p { margin:0 0 26px; color:rgba(4,39,47,.66); line-height:1.7; }
  .lum-portal-card .lum-portal-raise { margin-top:auto; }
  .lum-portal-section-title { display:flex; align-items:center; gap:12px; margin:0 0 20px; font-size:24px; }
  .lum-portal-section-title i { color:var(--portal-mint); }
  .lum-portal-request-form { margin:0 0 44px; padding:28px; border:1px solid var(--portal-line); border-radius:22px; background:#fff; box-shadow:0 12px 32px rgba(4,39,47,.06); }
  .lum-portal-request-grid { display:grid; grid-template-columns:.65fr 1.35fr; gap:18px; }
  .lum-portal-table-wrap { overflow:auto; border:1px solid var(--portal-line); border-radius:22px; background:#fff; }
  .lum-portal-table { width:100%; border-collapse:collapse; min-width:760px; }
  .lum-portal-table th { padding:17px 20px; color:#168e74; background:var(--portal-peach); font-size:12px; letter-spacing:.07em; text-align:start; text-transform:uppercase; }
  .lum-portal-table td { padding:17px 20px; border-top:1px solid var(--portal-line); color:rgba(4,39,47,.7); }
  .lum-portal-table td:first-child { color:var(--portal-dark); font-weight:650; }
  .lum-portal-status { display:inline-block; padding:6px 14px; border-radius:999px; color:var(--portal-dark); background:var(--portal-peach); font-size:12px; font-weight:650; white-space:nowrap; }
  .lum-portal-status.scheduled,.lum-portal-status.in_progress { background:rgba(68,189,161,.26); }
  .lum-portal-status.completed { background:#edf2ef; }
  .lum-portal-empty { padding:30px!important; text-align:center; }
  .lum-portal-urgent-note { margin:20px 0 0; color:rgba(4,39,47,.64); font-size:13px; }
  .lum-portal-urgent-note i { margin-inline-end:8px; color:var(--portal-mint); }
  .lum-portal-urgent-note a { color:inherit; font-weight:650; }
  .lum-portal-pending { max-width:680px; margin:30px auto; padding:50px; border:1px solid var(--portal-line); border-radius:28px; background:#fff; text-align:center; box-shadow:0 20px 50px rgba(4,39,47,.08); }
  .lum-portal-pending i { display:grid; width:74px; height:74px; margin:0 auto 24px; place-items:center; border-radius:50%; color:#209b80; background:var(--portal-peach); font-size:28px; }
  .lum-portal-pending h1 { margin:0 0 12px; font-size:30px; }
  .lum-portal-pending p { color:rgba(4,39,47,.68); line-height:1.7; }
  @media(max-width:900px){.lum-portal-auth-wrap{max-width:680px}.lum-portal-auth{grid-template-columns:1fr}.lum-portal-intro{min-height:520px}.lum-portal-intro-copy{margin-block:54px 38px}.lum-portal-cards{grid-template-columns:1fr}.lum-portal-card{min-height:0}.lum-portal-request-grid{grid-template-columns:1fr}}
  @media(max-width:600px){.lum-portal-shell{width:min(100% - 28px,1220px)}.lum-portal{padding:28px 0 48px}.lum-portal-top{align-items:flex-start}.lum-portal-brand-icon{width:52px;height:52px}.lum-portal-brand p{font-size:var(--text-sm)}.lum-portal-logout{width:46px;padding:0;justify-content:center}.lum-portal-logout span{display:none}.lum-portal-auth{min-height:0;border-radius:22px}.lum-portal-intro{min-height:470px;padding:32px 25px}.lum-portal-intro-copy{margin-block:48px 34px}.lum-portal-intro h1{font-size:var(--text-4xl)}.lum-portal-authbox{padding:34px 25px}.lum-portal-auth-head h2{font-size:var(--text-2xl)}.lum-portal-card{padding:25px}.lum-portal-request-form{padding:22px}}
/* ---- Pay Rent: BenefitPay QR and bank details (inc/portal/payment.php) ----
   The same block renders full on the Pay Rent view and compact in the
   dashboard rail, so it carries its own card surface rather than relying on
   .lum-pt-card, which is only defined on the dashboard. */
  .lum-pay-page-head { margin-block-end: 24px; }
  .lum-pay-page-head h1 { margin: 0 0 8px; font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl)); font-weight: var(--fw-bold); letter-spacing: -.03em; }
  .lum-pay-page-head p { max-width: 62ch; margin: 0; color: var(--portal-muted); line-height: 1.6; }

  .lum-pay { padding: 26px 28px; border: 1px solid var(--portal-border); border-radius: 16px; background: var(--portal-card); box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 26px rgba(15,23,42,.045); }
  .lum-pay.is-compact { padding: 22px; }
  .lum-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 18px; }
  .lum-pay-head h2 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: var(--text-lg); font-weight: var(--fw-bold); }
  .lum-pay-head h2 i { color: #98a2b3; font-size: var(--text-sm); }
  .lum-pay-head a { color: #175cd3; font-size: var(--text-xs); font-weight: var(--fw-semibold); }

  .lum-pay-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
  .lum-pay.is-compact .lum-pay-body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lum-pay-qr { margin: 0; text-align: center; }
  .lum-pay-qr-code, .lum-pay-qr img { display: block; width: 100%; max-width: 240px; margin-inline: auto; aspect-ratio: 1; border: 1px solid var(--portal-border); border-radius: 14px; background: #fff; overflow: hidden; }
  .lum-pay-qr img { height: auto; object-fit: contain; }
  .lum-pay-qr-code svg { display: block; width: 100%; height: 100%; }
  .lum-pay.is-compact .lum-pay-qr-code, .lum-pay.is-compact .lum-pay-qr img { max-width: 168px; }
  .lum-pay-qr figcaption { margin-block-start: 12px; }
  .lum-pay-save { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--portal-border); border-radius: 999px; color: var(--portal-navy); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
  .lum-pay-save:hover { border-color: var(--portal-navy); }
  .lum-pay-save[hidden] { display: none; }

  .lum-pay-steps { margin: 0 0 20px; padding-inline-start: 1.3em; color: var(--portal-text); font-size: var(--text-sm); line-height: 1.6; }
  .lum-pay-steps li + li { margin-block-start: 6px; }
  [dir="rtl"] .lum-pay-steps { list-style-type: arabic-indic; }
  .lum-pay-ref { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--portal-tint); }
  .lum-pay-ref-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
  .lum-pay-ref-row strong { overflow-wrap: anywhere; font-size: var(--text-sm); }
  .lum-pay-ref small { color: var(--portal-muted); font-size: var(--text-xs); line-height: 1.5; }

  .lum-pay-subhead { display: flex; align-items: center; gap: 9px; margin: 26px 0 4px; padding-block-start: 22px; border-block-start: 1px solid var(--portal-border); font-size: var(--text-base); font-weight: var(--fw-bold); }
  .lum-pay-subhead i { color: #98a2b3; font-size: var(--text-sm); }
  .lum-pay-rows { margin: 0; }
  .lum-pay.is-compact .lum-pay-rows { margin-block-start: 14px; }
  .lum-pay-rows > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-block-start: 1px solid var(--portal-border); }
  .lum-pay-rows > div:first-child { border-block-start: 0; }
  .lum-pay-rows dt { flex: 0 0 auto; color: #8b93a3; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; }
  .lum-pay-rows dd { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; margin: 0; font-size: var(--text-sm); font-weight: var(--fw-semibold); text-align: end; }
  .lum-pay-rows dd > span { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  /* The dashboard rail is ~300px wide: stack label over value there so the
     IBAN keeps its groups on one line instead of breaking mid-number. */
  .lum-pay.is-compact .lum-pay-rows > div { flex-direction: column; align-items: stretch; gap: 6px; }
  .lum-pay.is-compact .lum-pay-rows dd { justify-content: space-between; text-align: start; }
  .lum-pay.is-compact .lum-pay-rows dd > span { overflow-wrap: normal; white-space: nowrap; }

  .lum-pay-copy { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--portal-border); border-radius: 999px; color: #475467; background: #fff; font-size: var(--text-xs); font-weight: var(--fw-semibold); cursor: pointer; }
  .lum-pay-copy:hover { border-color: var(--portal-navy); color: var(--portal-navy); }
  .lum-pay-copy:focus-visible { outline: 3px solid rgba(97,114,199,.3); outline-offset: 2px; }
  .lum-pay-copy.is-done { border-color: #12b76a; color: #067647; }

  .lum-pay-note { margin: 18px 0 0; color: var(--portal-text); font-size: var(--text-sm); line-height: 1.6; }
  .lum-pay-confirm { display: flex; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; background: #f8f9fb; color: var(--portal-muted); font-size: var(--text-xs); line-height: 1.6; }
  .lum-pay-confirm i { margin-block-start: 3px; color: #98a2b3; }

  @media (max-width: 720px) {
    .lum-pay { padding: 20px; }
    .lum-pay-body { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .lum-pay-rows > div { flex-wrap: wrap; }
    .lum-pay-rows dd { width: 100%; justify-content: space-between; text-align: start; }
  }