/* ============================================================
   Terms, Privacy Policy, Reward Terms

   Two scopes, one set of text rules:
     .legal-v2      the page   - front/legal_v2.blade.php
     .legal-docs-v2 the dialog - front/_partials/legal_docs_v2.blade.php
   Loaded by front/layouts/app.blade.php when CommonHelper::LEGAL_V2 is on.

   The body is whatever the admin pasted, carrying inline styles from Word and
   from web pages: Times New Roman, 12px, justified. !important is the only way
   past an inline style. Those sizes are not a guide to headings - the Terms
   body sets 18px on every line - so they are flattened to one size. Bold stays.
   ============================================================ */
.legal-v2,
.legal-docs-v2{
  --brand:#ffcc2a;
  --ink:#1a1a1a;
  --ink-2:#3f4550;
  --muted:#6b7280;
  --line:#e6e8ec;
  --line-2:#f0f1f4;
  --bg:#f4f5f7;
  --blue:#1c4f9c;

  font-family:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.legal-v2 *,
.legal-docs-v2 *{box-sizing:border-box}

/* ------------------------------------------------------------
   The page
   ------------------------------------------------------------ */
.legal-v2{background:#fff;padding:150px 0 70px}
.legal-v2 .lgl-wrap{position:relative;max-width:1100px;margin:0 auto;padding:0 20px}

/* the four faint drawings the old page had, in the same corners */
.legal-v2 .lgl-art{position:absolute;z-index:0;pointer-events:none;opacity:.5}
.legal-v2 .lgl-art img{width:100%;height:auto}
.legal-v2 .lgl-art-1{left:0;top:20px;width:120px}
.legal-v2 .lgl-art-2{right:0;top:0;width:140px}
.legal-v2 .lgl-art-3{left:-10px;top:430px;width:140px}
.legal-v2 .lgl-art-4{right:-10px;top:470px;width:140px}

.legal-v2 .lgl-head{position:relative;z-index:1;text-align:center;padding:0 0 30px}
.legal-v2 .lgl-head h1{margin:0;font-size:30px;line-height:1.25;font-weight:800;color:var(--ink)}
.legal-v2 .lgl-head h1::after{content:"";display:block;width:56px;height:3px;border-radius:2px;background:var(--brand);margin:14px auto 0}

/* ------------------------------------------------------------
   The dialog — the same document, opened from a link
   ------------------------------------------------------------ */
.legal-docs-v2 .modal-back{position:fixed;inset:0;background:rgba(16,24,40,.45);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;z-index:1080;overflow-y:auto}
.legal-docs-v2 .modal-back.on{display:flex}
.legal-docs-v2 .modal-card{background:#fff;border-radius:12px;box-shadow:0 12px 40px rgba(16,24,40,.22);width:100%;max-width:820px;margin:auto}
.legal-docs-v2 .modal-hd{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--line-2)}
.legal-docs-v2 .modal-hd h3{margin:0;font-size:15px;font-weight:700;color:var(--ink)}
.legal-docs-v2 .modal-x{margin-left:auto;border:0;background:none;color:var(--muted);width:30px;height:30px;border-radius:7px;display:grid;place-items:center;font-size:21px;line-height:1;flex:none;cursor:pointer}
.legal-docs-v2 .modal-x:hover{background:var(--bg);color:var(--ink)}
.legal-docs-v2 .lgl-doc{max-height:70vh;overflow-y:auto;padding:20px 26px 6px;font-size:14px}
.legal-docs-v2 .lgl-doc [style*="font-size"]{font-size:14px !important}

/* ------------------------------------------------------------
   The document itself, the same on the page and in the dialog
   ------------------------------------------------------------ */
.legal-v2 .lgl-doc{position:relative;z-index:1;max-width:780px;margin:0 auto;font-size:15px}
.legal-v2 .lgl-doc [style*="font-size"]{font-size:15px !important}

.legal-v2 .lgl-doc,
.legal-docs-v2 .lgl-doc{line-height:1.75;color:var(--ink-2);overflow-wrap:break-word}
.legal-v2 .lgl-doc *,
.legal-docs-v2 .lgl-doc *{font-family:inherit !important;line-height:inherit !important;text-align:left !important;background-color:transparent !important}
.legal-v2 .lgl-doc [style*="color"],
.legal-docs-v2 .lgl-doc [style*="color"]{color:inherit !important}
.legal-v2 .lgl-doc p,.legal-v2 .lgl-doc div,
.legal-docs-v2 .lgl-doc p,.legal-docs-v2 .lgl-doc div{margin:0 0 16px !important}
.legal-v2 .lgl-doc div > div,
.legal-docs-v2 .lgl-doc div > div{margin:0 !important}
.legal-v2 .lgl-doc b,.legal-v2 .lgl-doc strong,
.legal-docs-v2 .lgl-doc b,.legal-docs-v2 .lgl-doc strong{font-weight:700;color:var(--ink) !important}
.legal-v2 .lgl-doc ul,.legal-v2 .lgl-doc ol,
.legal-docs-v2 .lgl-doc ul,.legal-docs-v2 .lgl-doc ol{padding-left:22px;margin:0 0 16px}
.legal-v2 .lgl-doc li,
.legal-docs-v2 .lgl-doc li{margin-bottom:6px}
.legal-v2 .lgl-doc a,
.legal-docs-v2 .lgl-doc a{color:var(--blue);text-decoration:underline}
.legal-v2 .lgl-doc sub,.legal-v2 .lgl-doc sup,
.legal-docs-v2 .lgl-doc sub,.legal-docs-v2 .lgl-doc sup{vertical-align:baseline;font-size:inherit}

/* pasted tables, the reward tiers among them: the panel's table look */
.legal-v2 .lgl-doc table,
.legal-docs-v2 .lgl-doc table{width:auto !important;min-width:min(100%,420px);border-collapse:separate !important;border-spacing:0;border:1px solid var(--line) !important;border-radius:10px;overflow:hidden;margin:6px 0 22px}
.legal-v2 .lgl-doc th,.legal-v2 .lgl-doc td,
.legal-docs-v2 .lgl-doc th,.legal-docs-v2 .lgl-doc td{padding:11px 18px !important;border:0 !important;border-top:1px solid var(--line-2) !important;font-size:14px !important;vertical-align:middle}
.legal-v2 .lgl-doc thead th,
.legal-docs-v2 .lgl-doc thead th{border-top:0 !important;background-color:#f7f8fa !important;font-size:12.5px !important;font-weight:700;color:var(--ink) !important}
.legal-v2 .lgl-doc tbody tr:hover td,
.legal-docs-v2 .lgl-doc tbody tr:hover td{background-color:#fffbea !important}
.legal-v2 .lgl-doc td:last-child,
.legal-docs-v2 .lgl-doc td:last-child{font-weight:600;color:var(--ink) !important}

/* ------------------------------------------------------------
   Narrow screens
   ------------------------------------------------------------ */
@media (max-width:991px){
  .legal-v2{padding:132px 0 50px}
  .legal-v2 .lgl-art{display:none}
}
@media (max-width:575px){
  .legal-v2{padding:122px 0 40px}
  .legal-v2 .lgl-head h1{font-size:23px}
  .legal-v2 .lgl-doc{font-size:14.5px}
  .legal-v2 .lgl-doc table,
  .legal-docs-v2 .lgl-doc table{width:100% !important;min-width:0}
  .legal-docs-v2 .modal-back{padding:20px 12px}
  .legal-docs-v2 .lgl-doc{padding:16px 18px 4px}
}