/* ============================================================
   RentAll4U — pure CSS, no framework. All icons inlined as
   data URIs (no network requests, nothing expires).
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --red:#e2252a;--red-panel:#cb332b;--ink:#353635;--ink2:#363736;
  --hair:#ededed;--cardline:#f1f1f1;--text:#1a1a1a;--muted:#666;--grey-icon:#606161;
  --light:#f8f9fb;
  --r-card:15px;--r-pill:22px;--r-cat:22px;

  /* ---- inlined brand + icon assets ---- */
  --logo:url("data:image/svg+xml,%3Csvg%20width%3D%22226%22%20height%3D%2255%22%20viewBox%3D%220%200%20226%2055%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M0.00999999%2013.64L23.66%200L47.3%2013.65V40.95L23.67%2027.3L35.85%2020.26L23.67%2013.22L11.48%2020.26L0.00999999%2013.64Z%22%20fill%3D%22%23E2272A%22%2F%3E%20%3Cpath%20d%3D%22M0.00999999%2013.64L0%2040.96L23.65%2054.62L47.3%2040.95L23.67%2027.3L23.66%2041.38L11.47%2034.34L11.48%2020.26L0.00999999%2013.64Z%22%20fill%3D%22%23BB2028%22%2F%3E%20%3Cpath%20d%3D%22M23.67%2027.3L47.3%2013.65V40.95L23.67%2027.3Z%22%20fill%3D%22%23E86359%22%2F%3E%20%3Cpath%20d%3D%22M23.67%2027.3L23.66%2054.61L47.3%2040.95L23.67%2027.3Z%22%20fill%3D%22%23E2272A%22%2F%3E%20%3Cpath%20d%3D%22M223.95%2036.36C224.53%2035.47%20224.93%2034.43%20225.16%2033.23C225.42%2031.97%20225.55%2030.38%20225.55%2028.44V13.7H215.78V28.52C215.78%2030.2%20215.57%2031.38%20215.14%2032.04C214.74%2032.71%20214.04%2033.04%20213.04%2033.04C212.04%2033.04%20211.36%2032.72%20210.94%2032.07C210.54%2031.4%20210.33%2030.22%20210.33%2028.51V13.69H200.56V28.36H198.66V13.69H187.92L177.71%2028.36V35.47H189.33V40.86H198.66V35.47H201.59V35.34C201.74%2035.7%20201.92%2036.04%20202.11%2036.34C203.21%2038.04%20204.7%2039.35%20206.57%2040.24C208.48%2041.15%20210.64%2041.6%20213.03%2041.6C215.42%2041.6%20217.57%2041.15%20219.47%2040.24C221.35%2039.35%20222.84%2038.05%20223.93%2036.34M190.06%2028.38H186.19L188.39%2025.04C188.91%2024.25%20189.31%2023.61%20189.57%2023.12C189.76%2022.78%20189.99%2022.29%20190.26%2021.66C190.19%2022.04%20190.15%2022.46%20190.11%2022.92C190.08%2023.4%20190.06%2024%20190.06%2024.71V28.38ZM130.03%2021.69V15.35H120.7V21.69H118.04V24.38C117.77%2023.85%20117.43%2023.37%20117.02%2022.94C115.82%2021.7%20114.19%2021.09%20112.15%2021.09C110.89%2021.09%20109.8%2021.36%20108.86%2021.89C107.9%2022.41%20107.01%2023.23%20106.19%2024.35V21.69H97.14V26.44C97.03%2026.26%2096.92%2026.08%2096.8%2025.9C95.69%2024.33%2094.32%2023.13%2092.7%2022.31C91.09%2021.49%2089.25%2021.08%2087.18%2021.08C85.62%2021.08%2084.22%2021.3%2083%2021.75C81.73%2022.18%2080.57%2022.84%2079.52%2023.73C78.95%2024.21%2078.44%2024.74%2078%2025.32C78.21%2024.58%2078.31%2023.76%2078.31%2022.86C78.31%2019.91%2077.37%2017.64%2075.49%2016.06C73.62%2014.49%2070.89%2013.7%2067.31%2013.7H55.02V40.88H64.61V31.91L69.36%2040.88H80.31L77.82%2037.08C78.3%2037.75%2078.87%2038.38%2079.52%2038.97C80.57%2039.83%2081.73%2040.49%2083%2040.94C84.31%2041.4%2085.7%2041.63%2087.18%2041.63C89.84%2041.63%2092.09%2041.06%2093.95%2039.93C95.31%2039.1%2096.38%2038.01%2097.15%2036.65V40.9H106.49V31.21C106.49%2030.36%20106.63%2029.73%20106.92%2029.34C107.22%2028.91%20107.63%2028.7%20108.17%2028.7C108.66%2028.7%20109.01%2028.88%20109.2%2029.24C109.39%2029.6%20109.5%2030.26%20109.5%2031.21V40.9H118.83V28.79H120.72V40.9H128.51L130.05%2036.61V28.79H132.84L135.38%2021.71H130.05M64.61%2020.71H66.13C67.08%2020.71%2067.8%2020.95%2068.28%2021.41C68.77%2021.87%2069.02%2022.53%2069.02%2023.39C69.02%2024.25%2068.77%2024.88%2068.28%2025.34C67.75%2025.79%2067.03%2026.01%2066.13%2026.01H64.61V20.7M85.97%2027.02C86.34%2026.64%2086.82%2026.45%2087.4%2026.45C88.09%2026.45%2088.6%2026.63%2088.92%2026.99C89.26%2027.35%2089.44%2027.91%2089.48%2028.66L85.27%2028.64C85.37%2027.93%2085.6%2027.39%2085.97%2027.02ZM75.94%2031.35C75.94%2032.8%2076.25%2034.19%2076.87%2035.5C77%2035.77%2077.14%2036.03%2077.3%2036.29L73.05%2029.83C74.46%2029.63%2075.61%2029.04%2076.51%2028.08C76.13%2029.15%2075.94%2030.24%2075.94%2031.36M85.72%2035.31C85.37%2034.85%2085.2%2034.12%2085.2%2033.13V32.83L97.15%2032.81V35.06L89.22%2034.54C89.05%2035.03%2088.79%2035.4%2088.47%2035.64C88.14%2035.9%2087.77%2036.03%2087.34%2036.03C86.63%2036.03%2086.09%2035.79%2085.73%2035.31H85.72Z%22%20fill%3D%22%23363736%22%2F%3E%20%3Cpath%20d%3D%22M176.57%2013.63H167.73V40.89H176.57V13.63ZM166.49%2013.63H157.65V35.74L149.95%2013.71H139.11L129.41%2040.89H139.87L141.18%2035.51H147.54L148.05%2037.48H148.07L148.96%2040.89H166.5V13.63M144.44%2021.95L144.46%2022.18C144.52%2022.89%20144.6%2023.61%20144.72%2024.33C144.82%2024.85%20144.97%2025.51%20145.16%2026.3L145.85%2029.05H142.85L143.16%2027.94C143.58%2026.38%20143.86%2025.18%20144%2024.33L144.28%2021.95H144.44Z%22%20fill%3D%22%23E1282A%22%2F%3E%20%3C%2Fsvg%3E");
  --ic-search:url("data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M14.95%2014.32L13.08%2012.37L11.21%2010.42C11.69%209.85%2012.06%209.2%2012.32%208.51C12.58%207.82%2012.7%207.09%2012.7%206.34C12.7%204.59%2011.99%203%2010.84%201.85C9.69%200.7%208.1%200%206.35%200C4.6%200%203.01%200.71%201.87%201.86C0.72%203.01%200%204.6%200%206.35C0%208.1%200.71%209.69%201.86%2010.84C3.01%2011.99%204.6%2012.7%206.35%2012.7C7.01%2012.7%207.65%2012.6%208.26%2012.41C8.87%2012.22%209.45%2011.93%209.99%2011.55L11.88%2013.51L13.77%2015.47C13.85%2015.55%2013.94%2015.62%2014.04%2015.66C14.14%2015.7%2014.25%2015.73%2014.36%2015.73C14.47%2015.73%2014.57%2015.71%2014.67%2015.67C14.77%2015.63%2014.86%2015.57%2014.93%2015.5C15.1%2015.34%2015.18%2015.13%2015.18%2014.92C15.18%2014.71%2015.11%2014.49%2014.95%2014.33V14.32ZM6.35%2011.04C5.06%2011.04%203.88%2010.51%203.03%209.66C2.18%208.81%201.65%207.64%201.65%206.34C1.65%205.04%202.18%203.87%203.03%203.02C3.88%202.17%205.05%201.64%206.35%201.64C7.65%201.64%208.82%202.17%209.67%203.02C10.52%203.87%2011.05%205.04%2011.05%206.34C11.05%207.64%2010.52%208.81%209.67%209.66C8.82%2010.51%207.65%2011.04%206.35%2011.04Z%22%20fill%3D%22%23212120%22%2F%3E%20%3C%2Fsvg%3E");
  --ic-heart:url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%3E%20%3Crect%20width%3D%2229%22%20height%3D%2229%22%20rx%3D%2214.5%22%20fill%3D%22black%22%20fill-opacity%3D%220.1%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D%22M17.1309%208.5C19.2352%208.5%2020.9998%2010.3309%2021%2012.6455C21%2013.2065%2020.9105%2013.7884%2020.7188%2014.4277C20.6319%2014.717%2020.4447%2015.1483%2020.4141%2015.2188C19.6107%2016.9815%2018.1258%2018.4493%2016.7842%2019.501C15.5411%2020.4753%2014.4575%2021.0623%2014.25%2021.1719C14.042%2021.062%2012.9591%2020.4753%2011.7168%2019.502C10.3752%2018.4508%208.8901%2016.9842%208.08789%2015.2236L8.08301%2015.2129L8.07812%2015.2031L7.98145%2014.9863C7.8866%2014.7526%207.80016%2014.4847%207.78223%2014.4287C7.59453%2013.8324%207.5%2013.2325%207.5%2012.6455C7.50019%2010.3309%209.26487%208.5001%2011.3691%208.5C12.2988%208.5%2013.2052%208.86435%2013.9092%209.51953L14.25%209.83691L14.5908%209.51953C15.2943%208.86434%2016.201%208.5%2017.1309%208.5Z%22%20stroke%3D%22white%22%2F%3E%20%3C%2Fsvg%3E");
  --ic-heart-hover:url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%3E%20%3Crect%20width%3D%2229%22%20height%3D%2229%22%20rx%3D%2214.5%22%20fill%3D%22black%22%20fill-opacity%3D%220.1%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20d%3D%22M17.1309%208.5C19.2352%208.5%2020.9998%2010.3309%2021%2012.6455C21%2013.2065%2020.9105%2013.7884%2020.7188%2014.4277C20.6319%2014.717%2020.4447%2015.1483%2020.4141%2015.2188C19.6107%2016.9815%2018.1258%2018.4493%2016.7842%2019.501C15.5411%2020.4753%2014.4575%2021.0623%2014.25%2021.1719C14.042%2021.062%2012.9591%2020.4753%2011.7168%2019.502C10.3752%2018.4508%208.8901%2016.9842%208.08789%2015.2236L8.08301%2015.2129L8.07812%2015.2031L7.98145%2014.9863C7.8866%2014.7526%207.80016%2014.4847%207.78223%2014.4287C7.59453%2013.8324%207.5%2013.2325%207.5%2012.6455C7.50019%2010.3309%209.26487%208.5001%2011.3691%208.5C12.2988%208.5%2013.2052%208.86435%2013.9092%209.51953L14.25%209.83691L14.5908%209.51953C15.2943%208.86434%2016.201%208.5%2017.1309%208.5Z%22%20fill%3D%22white%22%20stroke%3D%22white%22%2F%3E%20%3C%2Fsvg%3E");
  --ic-heart-clicked:url("data:image/svg+xml,%3Csvg%20width%3D%2229%22%20height%3D%2229%22%20viewBox%3D%220%200%2029%2029%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%3E%20%3Crect%20width%3D%2229%22%20height%3D%2229%22%20rx%3D%2214.5%22%20fill%3D%22black%22%20fill-opacity%3D%220.1%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M14.2502%2021.7368L14.0517%2021.6343C13.8598%2021.5354%209.33408%2019.1638%207.63312%2015.4306C7.48423%2015.1399%207.32301%2014.6355%207.30488%2014.5788C7.10273%2013.9366%207%2013.2865%207%2012.6459C7%2010.0843%208.96025%208%2011.3693%208C12.4306%208%2013.4574%208.41566%2014.2502%209.15363C15.0426%208.41566%2016.0697%208%2017.1309%208C19.54%208%2021.5%2010.0843%2021.5%2012.6459C21.5%2013.2621%2021.4013%2013.8924%2021.1974%2014.5718C21.0955%2014.9115%2020.8786%2015.4048%2020.8694%2015.426C19.166%2019.1638%2014.6405%2021.5354%2014.4486%2021.6343L14.2502%2021.7368Z%22%20fill%3D%22%23E2252A%22%2F%3E%20%3C%2Fsvg%3E");
  --ic-down:url("data:image/svg+xml,%3Csvg%20width%3D%2210%22%20height%3D%226%22%20viewBox%3D%220%200%2010%206%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5.5275%205.52L9.5725%201.475C9.9125%201.135%209.9125%200.595%209.5725%200.255C9.2325%20-0.085%208.6825%20-0.085%208.3425%200.255L4.9175%203.68L1.4775%200.255C1.1375%20-0.085%200.5875%20-0.085%200.2475%200.255C-0.0825%200.595%20-0.0825%201.135%200.2475%201.475L4.2975%205.525C4.6375%205.865%205.1875%205.865%205.5275%205.515V5.52Z%22%20fill%3D%22%23606161%22%2F%3E%20%3C%2Fsvg%3E");
  --ic-loc:url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M0%206.28L6.96%206.56L7.29%2013.41L13.74%200L0%206.28Z%22%20fill%3D%22%23616262%22%2F%3E%20%3C%2Fsvg%3E");
  /* Same compass glyph, red fill — swapped in via .loc-pill.loc-set once a
     location has actually been set/saved (see setCentre()/restoreSavedLocation()
     in map-engine.js), so the icon itself signals "location set", not just the
     (desktop-only) red location text next to it. */
  --ic-loc-red:url("data:image/svg+xml,%3Csvg%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cpath%20d%3D%22M0%206.28L6.96%206.56L7.29%2013.41L13.74%200L0%206.28Z%22%20fill%3D%22%23e2252a%22%2F%3E%20%3C%2Fsvg%3E");
  --ic-arrow:url("data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%2218%22%20viewBox%3D%220%200%2011%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M1.56499%2018C1.19499%2018%200.829991%2017.855%200.554991%2017.57C0.0199906%2017.015%200.0399906%2016.13%200.599991%2015.595L7.41499%209.075L0.599991%202.555C0.0449906%202.025%200.0249906%201.14%200.554991%200.585002C1.08999%200.025002%201.96999%200.010002%202.52999%200.540002L10.4%208.07C10.675%208.335%2010.83%208.695%2010.83%209.08C10.83%209.465%2010.675%209.825%2010.4%2010.09L2.52999%2017.62C2.25999%2017.88%201.91499%2018.005%201.56499%2018.005V18Z%22%20fill%3D%22white%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
  --ic-shuffle:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2023.23%2019.79%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M7.3%2C4.88C5.31%2C3.27%2C2.92%2C2.43%2C0%2C2.32v3.61c3.29.16%2C5.06%2C1.46%2C6.49%2C3.23.31-.43.61-.89.92-1.37.38-.57.76-1.16%2C1.17-1.72-.39-.42-.81-.82-1.28-1.2Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M16.35%2C13.64c-2.04-.04-3.11-1.06-4.43-2.96-.01.02-.03.04-.04.07-.64.97-1.32%2C2.01-2.17%2C3.01.46.59.97%2C1.14%2C1.55%2C1.63%2C1.45%2C1.22%2C3.12%2C1.84%2C5.1%2C1.86v2.54l6.87-4.65-6.87-4.65v3.15Z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M23.23%2C4.65L16.36%2C0v2.54c-1.98.03-3.65.64-5.1%2C1.86-.81.68-1.48%2C1.5-2.09%2C2.35-.36.5-.7%2C1.02-1.03%2C1.53-.37.56-.72%2C1.1-1.1%2C1.62-1.54%2C2.13-3.32%2C3.78-7.04%2C3.96v3.61c2.92-.11%2C5.31-.95%2C7.3-2.56.71-.57%2C1.32-1.21%2C1.86-1.87.76-.92%2C1.4-1.88%2C1.98-2.78.08-.13.16-.25.24-.37%2C1.59-2.4%2C2.66-3.7%2C4.96-3.74v3.15l6.87-4.65Z%22%2F%3E%3C%2Fsvg%3E");
  --ic-burger:url("data:image/svg+xml,%3Csvg%20width%3D%2256%22%20height%3D%2242%22%20viewBox%3D%220%200%2056%2042%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2255%22%20height%3D%2241%22%20rx%3D%224.5%22%20fill%3D%22white%22%2F%3E%20%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2255%22%20height%3D%2241%22%20rx%3D%224.5%22%20stroke%3D%22%23EDEDED%22%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%222%22%20transform%3D%22translate%2818%2020%29%22%20fill%3D%22%23E2252A%22%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%222%22%20transform%3D%22translate%2818%2015%29%22%20fill%3D%22%23E2252A%22%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%222%22%20transform%3D%22translate%2818%2025%29%22%20fill%3D%22%23E2252A%22%2F%3E%20%3C%2Fsvg%3E");
  --ic-burger-hover:url("data:image/svg+xml,%3Csvg%20width%3D%2256%22%20height%3D%2242%22%20viewBox%3D%220%200%2056%2042%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2255%22%20height%3D%2241%22%20rx%3D%224.5%22%20fill%3D%22white%22%2F%3E%20%3Crect%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%2255%22%20height%3D%2241%22%20rx%3D%224.5%22%20stroke%3D%22%23EDEDED%22%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%222%22%20transform%3D%22translate%2818%2020%29%22%20fill%3D%22black%22%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%222%22%20transform%3D%22translate%2818%2015%29%22%20fill%3D%22black%22%2F%3E%20%3Crect%20width%3D%2220%22%20height%3D%222%22%20transform%3D%22translate%2818%2025%29%22%20fill%3D%22black%22%2F%3E%20%3C%2Fsvg%3E");
}
/* 26 Aug 2026: overflow-x:clip (longhand) has a long-standing Safari/WebKit
   bug where it also incorrectly clips the Y-axis when overflow-y isn't
   set explicitly (still open as of Safari 18.3) — this was very likely
   what knocked Lenis's smooth-scroll sync out on mobile once this rule
   started reaching phones (see [[rentall4u-smooth-scroll]]). Writing it
   as the two-value shorthand instead sidesteps that specific WebKit bug
   while keeping the exact same X-only clipping behaviour everywhere else. */
body{font-family:'Inter',sans-serif;color:var(--text);background:#fff;font-size:14px;min-height:100vh;overflow:clip visible}
/* Site-wide smooth scroll (Lenis) — 29 Jul 2026. Recommended baseline
   classes from lenis.dev; Lenis toggles these on <html> itself. Wraps
   native scroll (not a hijacked/transform fake), so this is the only CSS
   it needs — everything else (sticky header, map, modals) is untouched. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}
.wrap{max-width:1440px;margin:0 auto}
button{font-family:inherit;cursor:pointer}

/* ---------- HEADER ---------- */
#hd{position:sticky;top:0;z-index:100;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.04)}
/* The header lives inside .wrap (max-width:1440px) but its grey line + shadow
   should span the full browser width. Only matters when the viewport is wider
   than the wrap — below that the header already reaches the edges. Break it out
   to the viewport, keep rows full-width (so the divider spans edge to edge) and
   centre their CONTENT to 1440px via side padding. */
@media(min-width:1441px){
  .wrap>#hd{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  #hd>.hd-top,#hd>.hd-search-mobile,#hd>.hd-bot{padding-left:calc((100vw - 1440px)/2 + 24px);padding-right:calc((100vw - 1440px)/2 + 24px)}
}
.hd-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 24px}
.logo{width:200px;height:48px;background:var(--logo) left center/contain no-repeat;flex-shrink:0;border:none;background-color:transparent}
.hd-search{display:flex;align-items:center;gap:8px;flex:1;max-width:460px}
.search-box{position:relative;flex:1}
.search-box input{width:100%;height:36px;border:1px solid var(--hair);border-radius:var(--r-pill);padding:0 14px 0 38px;font-size:14px;outline:none;font-family:inherit}
.search-box input:focus{border-color:#bbb}
.search-box::after{content:"";position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;background:var(--ic-search) center/contain no-repeat;pointer-events:none}
/* live search results dropdown */
.search-results{position:absolute;top:calc(100% + 8px);left:0;width:max(420px,100%);max-width:min(560px,92vw);background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:0 12px 34px rgba(0,0,0,.16);padding:6px;z-index:140;max-height:min(70vh,460px);overflow-y:auto;display:none}
.search-results.open{display:block}
.sr-item{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:none;border-radius:10px;padding:8px 10px;cursor:pointer}
.sr-item:hover,.sr-item.on{background:var(--light)}
.sr-thumb{width:46px;height:46px;border-radius:9px;flex-shrink:0;overflow:hidden;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:22px}
.sr-thumb img{width:100%;height:100%;object-fit:cover}
.sr-body{flex:1 1 auto;min-width:0;overflow:hidden}
.sr-name{display:block;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-meta{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-price{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;flex:0 0 auto;padding-left:8px;text-align:right}
.sr-all{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;border-top:1px solid var(--hair);margin-top:4px;padding:11px 12px 8px;font-size:13px;font-weight:600;color:var(--red);cursor:pointer}
.sr-all:hover{background:var(--light);border-radius:0 0 10px 10px}
.sr-empty{padding:18px 14px;font-size:13px;color:var(--muted);text-align:center}
.sr-head{padding:8px 12px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.pill-select{height:36px;display:flex;align-items:center;gap:8px;border:1px solid var(--hair);border-radius:var(--r-pill);padding:0 14px;font-size:14px;background:#fff;white-space:nowrap;color:var(--text)}
.pill-select::after{content:"";width:10px;height:6px;background:var(--ic-down) center/contain no-repeat;transition:transform .15s}
/* dropdown menu */
.dd{position:relative}
.dd.open .pill-select::after{transform:rotate(180deg)}
.dd-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;background:#fff;border:1px solid var(--hair);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.13);padding:6px;z-index:130;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s}
.dd.open .dd-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:none;border-radius:9px;padding:9px 12px;font-size:14px;color:var(--text);white-space:nowrap}
.dd-item:hover{background:var(--light)}
.dd-item.sel{color:var(--red);font-weight:600}
.dd-item .ci{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.hd-nav{display:flex;align-items:center;gap:8px;flex-shrink:0}
.btn-signin{height:42px;background:var(--red);color:#fff;border:none;border-radius:5px;padding:0 18px;font-size:14px;font-weight:600;letter-spacing:.5px}
.btn-signin:hover{background:#c51f24}
.btn-burger{width:56px;height:42px;border:none;background:var(--ic-burger) center/contain no-repeat}
.btn-burger:hover{background-image:var(--ic-burger-hover)}
.hd-icon-btn{display:none;width:46px;height:42px;border:1px solid var(--hair);border-radius:6px;background:#fff center/20px no-repeat}
.hd-icon-btn.search-toggle{background-image:var(--ic-search)}
/* Support-chat header button (4 Aug 2026) — uses the supplied chatbot_icon.svg
   inlined as a data-URI, same pattern as the other .hd-icon-btn icons above. */
/* display:block (not the .hd-icon-btn default none) — unlike search-toggle/the
   old profile-btn, this one is meant to show on desktop/laptop too, sitting
   next to SIGN IN (or the name button) and the burger, alongside the full
   search bar. The max-width:768px block below only adds mobile-specific
   ordering/placement on top of this, it doesn't control visibility. */
.hd-icon-btn.chat-btn{display:block;background-size:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 64'%3E%3Cpath fill='%23ce3a35' d='M60.13,34.79c-18.7,4.1-23.69,9.09-27.79,27.79-.34,1.54-2.53,1.54-2.87,0-4.1-18.7-9.09-23.69-27.79-27.79-1.54-.34-1.54-2.53,0-2.87,18.7-4.1,23.69-9.09,27.79-27.79.34-1.54,2.53-1.54,2.87,0,4.1,18.7,9.09,23.69,27.79,27.79,1.54.34,1.54,2.53,0,2.87Z'/%3E%3Cpath fill='%23ce3a35' d='M61.45,10.47c-5.8,1.27-7.35,2.82-8.62,8.62-.1.48-.78.48-.89,0-1.27-5.8-2.82-7.35-8.62-8.62-.48-.1-.48-.78,0-.89,5.8-1.27,7.35-2.82,8.62-8.62.1-.48.78-.48.89,0,1.27,5.8,2.82,7.35,8.62,8.62.48.1.48.78,0,.89Z'/%3E%3C/svg%3E")}
.hd-icon-btn:hover{background-color:var(--light)}
.hd-search-mobile{display:none;gap:8px;padding:0 16px 10px}
.hd-bot{display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid var(--hair);padding:8px 24px}
.loc-pill{height:34px;display:flex;align-items:center;gap:8px;border:1px solid var(--hair);border-radius:var(--r-pill);padding:0 14px;font-size:13px;background:#fff;color:var(--text)}
.loc-pill::before{content:"";width:14px;height:14px;background:var(--ic-loc) center/contain no-repeat;flex-shrink:0}
.loc-pill.loc-set::before{background:var(--ic-loc-red) center/contain no-repeat}
.loc-pill b{color:var(--red);font-weight:600}
.view-ctrls{display:flex;align-items:center;gap:8px}
.view-btn{height:34px;border:1px solid var(--hair);border-radius:var(--r-pill);padding:0 17px;font-size:13px;background:#fff;color:var(--text)}
.view-btn.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- SECTION HEADERS ---------- */
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 12px}
.sec-title{font-size:26px;font-weight:500;letter-spacing:-.9px;line-height:1.15}
.sec-title b{color:var(--red);font-weight:500}
.cta-pill{display:inline-flex;align-items:center;gap:10px;background:#fff;border:none;border-radius:30px;padding:6px 6px 6px 20px;font-size:15px;box-shadow:0 4px 20px rgba(0,0,0,.05);white-space:nowrap;color:var(--ink);-webkit-text-fill-color:var(--ink);font-family:inherit;cursor:pointer}
.cta-pill .arrow{width:38px;height:38px;border-radius:50%;background:var(--red) var(--ic-arrow) center/11px 18px no-repeat;flex-shrink:0}
.cta-pill.on-dark .arrow{background-color:var(--ink)}
/* Shuffle/randomise button — sits beside the "Picked for you" rail's CTA
   (see sec-head-right below), re-mixing which of the wider scored pool is
   currently shown without a network round trip. Matches the CTA button's
   own presentation: an outer white circle + soft shadow (exactly .cta-pill's
   recipe, just round instead of pill-shaped since there's no label to make
   room for) around an inner dark icon circle sized like .cta-pill .arrow. */
.shuffle-btn{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:none;border-radius:50%;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,.05);cursor:pointer;flex-shrink:0;transition:box-shadow .15s}
.shuffle-btn:hover{box-shadow:0 6px 24px rgba(0,0,0,.1)}
.shuffle-ic{display:block;width:38px;height:38px;border-radius:50%;background:var(--ink) var(--ic-shuffle) center/22px 19px no-repeat;transition:transform .4s ease}
.shuffle-ic.spin{transform:rotate(360deg)}
.cta-pill:hover{box-shadow:0 6px 24px rgba(0,0,0,.1)}
/* CTA now lives inside .sec-head (next to the title) rather than below the
   rail, so it needs to hold its own width in that flex row. */
.sec-head .cta-sec{flex-shrink:0}
/* "All listings" section header pairs the listing count with the CTA. */
.sec-head-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
/* flexible section: title + CTA on one row (desktop), CTA full-width below cards (mobile) */
.sblk{display:flex;flex-wrap:wrap;align-items:center;padding:20px 24px 8px;column-gap:16px}
.sblk>.sec-head{flex:1 1 auto;order:1;padding:0}
.sblk>.cta-sec{flex:0 0 auto;order:2}
.sblk>.rail-wrap{flex:0 0 100%;order:3;padding:12px 0 0;min-width:0}
.sblk>.cats-grid{flex:0 0 100%;order:3;margin-top:12px}
.sec-cta-below{padding-top:4px}
/* "Picked for you" sits FIRST on the homepage (ahead of New/Popular), so it
   only gets one side of the usual inter-rail gap (12px bottom + 20px top
   between two rails) against the header above it, rather than both — making
   its title look tighter than every other rail's. This extra top/bottom
   brings it back in line, scoped to this rail only via its anchor id — this
   is the "additional padding" specifically around this one title (24 Jul:
   reduced by 12px each side, from 30/22 to 18/10, per Liam's request —
   other rails' spacing is untouched, since they never had this rule). */
#forYouSection .sec-head{padding-top:18px;padding-bottom:10px}

/* ---------- LISTINGS ---------- */
.rail-wrap{padding:0 24px 8px;position:relative}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.map-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:4px}
@media(max-width:1100px){.map-grid{grid-template-columns:repeat(3,1fr)}}
/* iPad portrait (and similar mid-width tablets): 4 cards across is too squashed —
   titles wrap to 3 lines and prices crowd. Drop to 3 across. Above 768px we're
   still in the desktop grid/rail layout (the mobile scroll-rail starts at 768px),
   so this range needs its own rule. Capped at 900px so iPad *landscape* (1024px+)
   keeps its comfortable 4 across. */
@media(min-width:769px) and (max-width:900px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid-rail .card{flex:0 0 var(--rail-card-w, calc((100% - 32px)/3))}
}
/* Backup rule for the SAME iPad-portrait case above, using (pointer:coarse)+
   orientation:portrait instead of a plain width query so it also catches an
   iPad running Safari's "Request Desktop Website" mode (which can render the
   page at a wider virtual viewport than the device's real CSS width). Capped
   at 1112px so a touch-enabled desktop/laptop in a normal wide window isn't
   affected, and scoped to portrait only so iPad landscape is untouched. */
@media(pointer:coarse) and (orientation:portrait) and (min-width:769px) and (max-width:1112px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid-rail .card{flex:0 0 var(--rail-card-w, calc((100% - 32px)/3))}
}
/* NOTE: .coll-grid's 3-across override for both ranges above lives further
   down, right after .coll-grid's own base rule (search this file for
   "coll-grid 3-across tablet fix") — it CANNOT live here. .coll-grid's base
   definition (repeat(4,1fr)) is declared later in this file (~line 724), and
   with equal selector specificity the LAST rule in source order wins
   whenever both a media-scoped rule and an unconditional rule match — so an
   override placed here, before the base rule, gets silently cancelled out by
   it. This exact bug shipped once (2 Aug 2026): search results/collection
   pages never showed 3-across at any width, jumping straight from mobile's
   2-across to desktop's 4-across. */
/* Rail prev/next arrows — desktop/laptop (pointer:fine) only. Sit half-over
   the rail's own left/right padding so they read as "outside" the card row,
   matching the reference screenshot. Hidden entirely on touch devices
   (phones/tablets) via (pointer:coarse), since those already scroll/swipe
   the rail natively — see railNavInit() in home.js for the click + visibility
   behaviour (Prev starts hidden, appears once Next is clicked or the rail is
   scrolled). */
.rail-arrow{position:absolute;top:calc(50% - 27.5px);z-index:3;width:55px;height:55px;border-radius:50%;background:#ffffff;border:1px solid #ededed;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.rail-arrow:hover{background:var(--light)}
.rail-prev{left:-31px}
.rail-next{right:-31px}
@media(pointer:coarse),(max-width:768px){.rail-arrow{display:none!important}}
.rail{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;scroll-snap-type:x mandatory;cursor:grab;min-width:0;max-width:100%;scrollbar-width:thin;scrollbar-color:#ebebeb transparent}
.rail.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rail::-webkit-scrollbar{height:8px}
.rail::-webkit-scrollbar-thumb{background:#ebebeb;border-radius:4px}
.rail::-webkit-scrollbar-thumb:hover{background:#ebebeb}
.rail::-webkit-scrollbar-track{background:transparent}
.card{background:#fff;border:1px solid var(--cardline);border-radius:var(--r-card);overflow:hidden;position:relative;cursor:pointer;transition:box-shadow .15s;display:flex;flex-direction:column}
.card:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.rail .card{flex:0 0 260px;scroll-snap-align:start}
.grid-rail .card{flex:0 0 var(--rail-card-w, calc((100% - 48px)/4))}
.card-img{position:relative;height:195px;background:#e9e9e9;overflow:hidden;flex-shrink:0;background-image:linear-gradient(100deg,#e9e9e9 30%,#f3f3f3 50%,#e9e9e9 70%);background-size:200% 100%;animation:cardShim 1.3s linear infinite}
.card-img.ld{animation:none;background:#e9e9e9}
.card-img img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .35s ease}
.card-img.ld img{opacity:1}
@keyframes cardShim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.card-loader{grid-column:1/-1;display:flex;justify-content:center;padding:18px 0}
.card-loader .spin{width:26px;height:26px;border-radius:50%;border:3px solid #e2e2e2;border-top-color:var(--red);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Small inline variant of the same spinner, for a subtle "this is loading"
   cue right beside a label/dropdown rather than a full-size loader block
   (see Sub-Category in Add/Edit Listing). Self-contained — unlike .spin
   above, which only has styling inside .card-loader. */
.spin-sm{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid #e2e2e2;border-top-color:var(--red);animation:spin .8s linear infinite;vertical-align:middle;margin-left:6px}
.card-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:46px;background:linear-gradient(135deg,#f2f2f2,#e2e2e2)}
/* Frosted glass on the card overlays: a light 5% white wash plus a blur, rather
   than a dark tint. The heart's SVG paints its own 10% black circle, so we punch
   that out with a light background — the blur does the legibility work. */
.fav{position:absolute;top:10px;left:10px;width:29px;height:29px;border:none;
  background:var(--ic-heart) center/contain no-repeat;
  background-color:rgba(255,255,255,.05);border-radius:50%;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fav:hover{background-image:var(--ic-heart-hover)}
.fav.on{background-image:var(--ic-heart-clicked)}
.fav.on:hover{background-image:var(--ic-heart-clicked)}
.badge{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.05);color:#fff;
  font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* Demo Listing tag (13 Aug 2026) — card badge sits bottom-right of the
   thumb, right-aligned with the condition badge above it (both use the
   same right:10px). Moved here from top-left on 13 Aug per feedback. */
.demo-badge{position:absolute;bottom:10px;right:10px;background:#cf3a35;color:#fff;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;
  letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.demo-badge-dt{display:inline-block;background:#cf3a35;color:#fff;
  font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;
  letter-spacing:.02em;margin-bottom:8px}
/* Site password gate overlay (gate.js, 13 Aug 2026). Locked state hides the
   real page content behind the overlay — the content is still technically in
   the DOM (and any of its own fetches will just 401 against the server-side
   gate), but visually/interactively nothing behind the overlay is reachable. */
html.ra4u-gate-locked body{overflow:hidden}
html.ra4u-gate-locked body>*:not(#ra4uGate){visibility:hidden}
#ra4uGate{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;
  justify-content:center;background:#0f1115;padding:20px}
.ra4u-gate-box{width:100%;max-width:360px;background:#181b21;border-radius:16px;
  padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,.5);text-align:center}
.ra4u-gate-logo{font-size:20px;font-weight:800;color:#fff;margin-bottom:6px}
.ra4u-gate-sub{font-size:13px;color:#9aa0ac;margin:0 0 20px}
#ra4uGateForm{display:flex;flex-direction:column;gap:10px}
#ra4uGateForm input{width:100%;padding:11px 14px;border-radius:10px;border:1px solid #2c313b;
  background:#0f1115;color:#fff;font-size:14px;box-sizing:border-box}
#ra4uGateForm input:focus{outline:none;border-color:#cf3a35}
#ra4uGateForm button{margin-top:4px;padding:11px 14px;border-radius:10px;border:none;
  background:#cf3a35;color:#fff;font-size:14px;font-weight:700;cursor:pointer}
#ra4uGateForm button:disabled{opacity:.6;cursor:default}
.ra4u-gate-err{margin-top:12px;font-size:12px;color:#f0857f;min-height:14px}
.card-body{padding:13px;display:flex;flex-direction:column;flex:1}
.card-r1{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.card-name{font-size:14px;font-weight:600;line-height:1.25}
.card-rate{display:flex;align-items:center;gap:3px;font-size:12px;font-weight:600;flex-shrink:0}
.card-rate svg{width:11px;height:11px;fill:#f5a623}
.card-meta{font-size:12px;font-weight:600;color:var(--text);margin-bottom:8px;opacity:.85}
.card-price-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px;margin-top:auto}
.card-price{font-size:12px}
.card-price b{font-size:14px;font-weight:700}
.avail{font-size:12px;border:1px solid var(--hair);border-radius:20px;padding:2px 10px;white-space:nowrap;flex-shrink:0}
.avail.pre{border-color:#c98a1e;color:#8a5a00;background:#fff6e6}
.rent-btn{width:100%;height:40px;background:var(--red);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;flex-shrink:0}
.rent-btn:hover{background:#c51f24}
.empty-fav{color:var(--muted);font-size:14px;padding:10px 0}
.view-more{display:flex;align-items:center;gap:8px;margin:8px auto 22px;background:none;border:none;color:var(--muted);font-size:14px}
.view-more::before{content:"";width:14px;height:14px;background:var(--ic-down) center/contain no-repeat}

/* ---------- MESSAGING PANELS ---------- */
.panel{background:var(--red-panel);display:flex;flex-direction:column;align-items:center;text-align:center;gap:25px;padding:41px 24px;margin-top:25px}
.panel-c{max-width:420px;display:flex;flex-direction:column;gap:14px}
.panel p.big{font-size:26px;font-weight:500;color:#fff;letter-spacing:-.5px;line-height:1.2}
.panel p.sub{font-size:21px;font-weight:500;color:#fff;margin-top:4px}
/* default look for admin-edited (CMS) promo panel copy — plain <p>/<h2> etc.
   from the rich text editor, styled to match the original hand-coded panels */
.panel-c p{margin:0;font-size:26px;font-weight:500;color:#fff;letter-spacing:-.5px;line-height:1.2}
.panel-c h2,.panel-c h3{margin:0;color:#fff;font-weight:700;line-height:1.2}
.panel-c a{color:#fff;text-decoration:underline}
/* image/embed promo panel — full-bleed clickable banner, no text padding */
/* image/embed promo panel — banner shown at its NATURAL size, centred.
   max-width keeps it responsive (scales DOWN on screens narrower than the
   image) but never scales it UP past its real dimensions. Background defaults
   to transparent so a centred banner sits cleanly on the page; a bg_color set
   in the CMS still shows as a coloured band behind/around it. */
.panel.embed-panel{padding:0 20px;background:transparent;display:flex;justify-content:center;align-items:center}
/* --- Set Location: Places autocomplete dropdown --- */
.loc-ac-menu{position:absolute;left:0;right:0;top:100%;z-index:30;background:#fff;border:1px solid var(--hair);
  border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);margin-top:4px;max-height:260px;overflow-y:auto;display:none}
.loc-ac-menu.show{display:block}
.loc-ac-item{display:flex;align-items:center;gap:8px;padding:10px 12px;font-size:14px;cursor:pointer}
.loc-ac-item:hover,.loc-ac-item.active{background:var(--light)}
.loc-ac-ic{opacity:.6;flex:0 0 auto}
/* the location input's field-group needs position:relative so the menu anchors */
#locModal .fg{position:relative}
/* --- "Use my current location": confirm-on-map bar --- */
.loc-confirm-bar{position:fixed;left:50%;bottom:22px;transform:translate(-50%,140%);z-index:1200;
  display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--hair);
  border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.18);padding:12px 16px;max-width:calc(100vw - 24px);
  transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.loc-confirm-bar.show{transform:translate(-50%,0)}
.lcb-txt{display:flex;align-items:center;gap:10px;font-size:14px;min-width:0}
.lcb-ic{font-size:20px;flex:0 0 auto}
.lcb-txt>span{display:flex;flex-direction:column;min-width:0}
.lcb-sub{color:var(--muted);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.lcb-actions{display:flex;gap:8px;flex:0 0 auto}
.lcb-btn{height:38px;padding:0 16px;border-radius:9px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;border:1px solid var(--hair);background:#fff}
.lcb-cancel{color:var(--muted)}
.lcb-ok{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:520px){
  .loc-confirm-bar{left:12px;right:12px;transform:translateY(140%);flex-direction:column;align-items:stretch;gap:10px}
  .loc-confirm-bar.show{transform:translateY(0)}
  .lcb-actions{justify-content:stretch}
  .lcb-btn{flex:1}
  .lcb-sub{max-width:none}
}
.panel.embed-panel a{display:inline-block;max-width:100%;line-height:0}
.panel.embed-panel img{display:block;max-width:100%;height:auto}
/* HTML5 leaderboard banner (Admin → Banner ads) — same slot as an image embed panel */
.panel.banner-panel{padding:0;overflow:hidden}
.panel.banner-panel iframe{max-width:100%}
/* Mobile leaderboard (320x50) override, when a promo panel has one set —
   defaults to the desktop 970x250 leaderboard above 768px (this site's
   mobile breakpoint elsewhere), switches to the mobile creative below it.
   Panels without a mobile creative only ever render the desktop <iframe>
   with no wrapping <span>, so this rule has nothing to do there. */
.panel.banner-panel .bp-mobile{display:none}
@media(max-width:768px){
  .panel.banner-panel .bp-desktop{display:none}
  .panel.banner-panel .bp-mobile{display:block}
}
/* HTML5 MPU ad card, spliced into a rail alongside real listing cards (Admin → Banner ads) */
/* HTML5 MPU ad card, spliced into a rail alongside real listing cards (Admin → Banner ads).
   box-sizing + overflow:hidden keep the card at exactly the slot's declared
   width/height (set inline per-card) even if the creative's own content is a
   different native size — the iframe (scrolling="no", 100%/100%) fills that
   box and clips rather than scrolling internally. */
.card.ad-card{cursor:default;background:#f4f4f4;display:flex;align-items:center;justify-content:center;overflow:hidden;box-sizing:border-box;flex-shrink:0;border-radius:0}
.card.ad-card iframe{max-width:100%;max-height:100%}

/* ---------- CATEGORIES ---------- */
.cats{padding:24px}
.cats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.cat{background:#fff;border-radius:var(--r-cat);box-shadow:0 4px 10px rgba(0,0,0,.05);overflow:hidden;transition:box-shadow .15s}
.cat:hover{box-shadow:0 6px 20px rgba(0,0,0,.1)}
.cat-head{background:var(--red);display:flex;align-items:center;gap:10px;padding:15px;cursor:pointer}
.cat-ic{width:50px;height:50px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0}
.cat-name{font-size:22px;font-weight:500;color:#fff;letter-spacing:-.7px}
.cat-body{padding:10px 15px}
.cat-body p{font-size:14px;line-height:30px;cursor:pointer;display:inline-block;width:100%}
.cat-body p:hover{color:var(--red)}

/* ---------- MAP VIEW ---------- */
#map-view{display:none}
.count-pill{display:inline-flex;align-items:center;gap:12px;background:#fff;border:none;border-radius:30px;padding:8px 8px 8px 18px;font-size:14px;box-shadow:0 4px 20px rgba(0,0,0,.05);white-space:nowrap}
.count-pill .loc-btn{width:34px;height:34px;border-radius:50%;background:#8a8d8d var(--ic-arrow) center/10px 16px no-repeat;flex-shrink:0;transform:rotate(-45deg)}
.count-pill:hover{box-shadow:0 6px 24px rgba(0,0,0,.1)}
.map-split{display:flex;gap:16px;padding:0 24px 8px;align-items:stretch}
.map-count-m{display:none;text-align:center;font-size:15px;color:var(--text);padding:14px 0 4px;width:100%}
.show-all-m{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--red);font-size:14px;font-weight:600;padding:0 0 6px;font-family:inherit}
.side-group-h{font-weight:700;font-size:15px;color:var(--ink);padding:2px 2px 6px}
.map-more{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;background:#fff;border:1px solid var(--hair);border-radius:30px;padding:13px;font-size:14px;color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.05);margin-top:2px;font-family:inherit}
.map-more:hover{box-shadow:0 4px 16px rgba(0,0,0,.08)}
.map-more::before,.map-more::after{content:"";width:13px;height:13px;background:var(--ic-down) center/contain no-repeat}
.map-stage{position:relative;flex:1;height:640px;border-radius:14px;overflow:hidden;background:#e5ece2}
/* Laptop screens: the fixed 640px desktop height (tuned for larger monitors)
   pushed the map + side-cards panel below the fold on typical laptop viewport
   heights once the header/title above it is accounted for. Shrunk with a vh
   value (not another fixed px) so it adapts across the range of laptop
   physical resolutions (1366x768 through 1440x900+) rather than assuming one,
   clamped so it's neither too cramped nor as tall as the desktop default.
   Same 769–1600px width range as the footer-tagline laptop fix above.
   (.map-side's matching override sits further below, right after ITS OWN
   base rule — not here — because its base rule comes later in this file
   and would otherwise win the cascade and silently cancel this.) */
@media(min-width:769px) and (max-width:1600px){
  .map-stage{height:calc(56vh + 60px);min-height:480px;max-height:640px}
}
#gmap{position:absolute;inset:0}
#mapFallback{position:absolute;inset:0;background:#e5ece2;display:none}
#mapFallback.show{display:block}
#leafletMap{position:absolute;inset:0;z-index:1}
.leaflet-popup-content{margin:0!important;width:236px!important}
.leaflet-popup-content-wrapper{padding:0!important;border-radius:14px!important;overflow:hidden}
.leaflet-popup-content .card{border:none;border-radius:14px}
.fallback-note{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.9);border-radius:8px;padding:6px 12px;font-size:12px;color:var(--muted)}
.map-side{width:300px;flex-shrink:0;height:640px;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding-right:4px;scrollbar-width:thin}
@media(min-width:769px) and (max-width:1600px){
  .map-side{height:calc(56vh + 60px);min-height:480px;max-height:640px}
}
.map-side .card{flex-shrink:0}
.map-expand{position:absolute;top:14px;right:14px;z-index:5;width:38px;height:38px;border-radius:50%;background:#fff;border:none;box-shadow:0 2px 8px rgba(0,0,0,.18);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23353635' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.map-chips{position:absolute;top:14px;left:14px;right:64px;z-index:5;display:none;gap:8px;flex-wrap:wrap}
.chip{background:#fff;border:1px solid var(--hair);border-radius:20px;padding:7px 14px;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.1);white-space:nowrap}
.chip.active{background:var(--red);color:#fff;border-color:var(--red)}
.map-split.expanded .map-side{display:none}
.map-split.expanded .map-stage{height:560px}
.map-split.expanded .map-chips{display:flex}
.map-split.expanded .map-expand{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23353635' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 14h6v6M20 10h-6V4M14 10l7-7M3 21l7-7'/%3E%3C/svg%3E")}
/* Map key/legend — small, subtle overlay explaining the pin colours; the user
   can dismiss it (closeMapLegend() in map-engine.js persists that choice via
   localStorage, same pattern as the saved-location feature, so it doesn't
   reappear every visit once closed). */
.map-legend{position:absolute;bottom:14px;left:14px;z-index:5;background:rgba(255,255,255,.94);border-radius:10px;padding:10px 30px 10px 12px;box-shadow:0 2px 8px rgba(0,0,0,.15);font-size:12px;color:var(--muted);max-width:200px}
.map-legend-row{display:flex;align-items:center;gap:7px;white-space:nowrap}
.map-legend-row+.map-legend-row{margin-top:5px}
.map-legend-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;border:1px solid rgba(0,0,0,.08)}
.map-legend-dot-red{background:#E2252A}
.map-legend-dot-grey{background:#4B5563}
.map-legend-dot-dred{background:#BB2028}
.map-legend-x{position:absolute;top:4px;right:6px;width:20px;height:20px;border:none;background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0}
.map-legend-x:hover{color:var(--text)}
.map-legend.hidden{display:none}
/* fallback pins */
.pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer}
.pin span{display:block;background:var(--red);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:20px;box-shadow:0 2px 8px rgba(0,0,0,.2);position:relative}
.pin span::after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--red)}
/* google infowindow card */
.gm-style .gm-style-iw-c{padding:0!important;border-radius:14px!important;box-shadow:0 6px 24px rgba(0,0,0,.2)!important}
.gm-style .gm-style-iw-d{overflow:hidden!important}
/* hide the default header + close button (we close on map-background click instead).
   headerDisabled:true handles current Maps; these are a fallback for older versions. */
.gm-style .gm-style-iw-chr{display:none!important}
.gm-style .gm-style-iw button.gm-ui-hover-effect{display:none!important}
.iw{width:240px}
.iw .card{border:none;border-radius:14px}
/* expanded-map bottom sheet (mobile) */
.map-sheet{display:none}
.sheet-handle{width:42px;height:5px;border-radius:3px;background:#cfcfcf;margin:0 auto 12px}
.scard{display:flex;gap:14px;cursor:pointer}
.scard-img{position:relative;width:118px;flex-shrink:0;border-radius:12px;overflow:hidden;background:#eee}
.scard-img .ph{height:100%;min-height:160px;display:flex;align-items:center;justify-content:center;font-size:48px;background:linear-gradient(135deg,#f2f2f2,#e2e2e2)}
.scard-img .fav{position:absolute;top:8px;left:8px}
.scard-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.scard-title{font-size:20px;font-weight:700;line-height:1.15}
.scard-meta{font-size:14px;color:var(--muted)}
.scard-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.scard-tags .srate{font-weight:700;font-size:14px}
.scard-tags .tag{border:1px solid var(--hair);border-radius:14px;padding:2px 10px;font-size:12px}
.scard-price{font-size:15px}.scard-price b{font-size:17px;font-weight:700}
.scard .rent-btn{margin-top:8px;height:48px;font-size:16px}

/* ---------- DRAWER ---------- */
.ovl{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;opacity:0;pointer-events:none;transition:opacity .2s}
.ovl.open{opacity:1;pointer-events:all}
.drawer{position:fixed;top:0;right:0;bottom:0;width:288px;background:#fff;z-index:201;transform:translateX(100%);transition:transform .25s;box-shadow:-4px 0 24px rgba(0,0,0,.12);display:flex;flex-direction:column}
.drawer.open{transform:translateX(0)}
.drawer-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--hair)}
.drawer-h h3{font-size:15px;font-weight:600}
.x{background:none;border:none;font-size:24px;color:var(--muted);line-height:1}
.drawer-u{display:flex;align-items:center;gap:12px;padding:20px;border-bottom:1px solid var(--hair)}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.drawer-u .n{font-weight:600}
.drawer-u .e{font-size:12px;color:var(--muted)}
.drawer-nav{padding:12px 0;flex:1}
.drawer-nav a{display:flex;align-items:center;gap:10px;padding:11px 20px;font-size:14px;color:var(--text);text-decoration:none;position:relative}
.drawer-nav a:hover{background:var(--light)}
.drawer-nav svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;flex-shrink:0}
.drawer-nav a.cta-add{background:var(--red);color:#fff;border-radius:8px;margin:10px 20px 0;padding:11px 16px;font-weight:600}
.drawer-nav a.cta-add:hover{background:var(--red-panel)}
.drawer-nav a.cta-add svg{stroke:#fff}
.signout{margin:0 20px 20px;height:42px;border:1px solid var(--hair);border-radius:8px;background:none;color:var(--muted);font-size:13px}

/* ---------- MODALS ---------- */
.modal-ovl{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-ovl.open{opacity:1;pointer-events:all}
.modal{background:#fff;border-radius:16px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto}
.modal-h{position:sticky;top:0;background:#fff;display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--hair)}
.modal-h h2{font-size:17px;font-weight:700}
.modal-b{padding:20px}
.m-img{width:100%;height:220px;border-radius:10px;overflow:hidden;margin-bottom:16px;background:#eee}
.m-img img{width:100%;height:100%;object-fit:cover}
.m-img .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:60px;background:linear-gradient(135deg,#f2f2f2,#e2e2e2)}
.m-tr{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.m-title{font-size:20px;font-weight:700}
.m-rate{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;white-space:nowrap}
.m-meta{font-size:13px;color:var(--muted);margin-bottom:12px}
.m-price{font-size:22px;font-weight:700}
.m-price span{font-size:15px;font-weight:400}
.m-sub{font-size:12px;color:var(--muted);margin:4px 0 16px}
.m-desc{font-size:13px;color:var(--muted);line-height:1.6;border-bottom:1px solid var(--hair);padding-bottom:16px;margin-bottom:16px}
.m-st{font-size:14px;font-weight:600;margin-bottom:10px}
.dates{display:flex;gap:10px;margin-bottom:16px}
.dates input{flex:1;height:42px;border:1px solid var(--hair);border-radius:8px;padding:0 12px;font-size:13px;font-family:inherit;outline:none}
.dates input:focus{border-color:var(--red)}
.owner{display:flex;align-items:center;gap:10px;background:var(--light);border-radius:10px;padding:12px;margin-bottom:16px}
.owner .oa{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.owner .on{font-weight:600;font-size:13px}
.owner .om{font-size:11px;color:var(--muted)}
.reviews{margin-bottom:16px}
.rev{padding:10px 0;border-bottom:1px solid var(--hair)}
.rev:last-child{border-bottom:none}
.rev-h{display:flex;justify-content:space-between;margin-bottom:4px}
.rev-a{font-size:12px;font-weight:600}
.rev-s{font-size:11px;color:#f5a623}
.rev-t{font-size:12px;color:var(--muted);line-height:1.5}
.m-rent{width:100%;height:50px;background:var(--red);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;letter-spacing:.3px}
.m-rent:hover{background:#c51f24}
.tabs{display:flex;border-bottom:1px solid var(--hair);margin-bottom:20px}
.tab{flex:1;height:46px;border:none;background:none;font-size:14px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent}
.tab.active{color:var(--red);border-bottom-color:var(--red)}
.fg{margin-bottom:14px}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.fg-optional{text-transform:none;font-weight:400;letter-spacing:0}
.fg input,.fg select,.fg textarea{width:100%;border:1px solid var(--hair);border-radius:8px;padding:10px 12px;font-size:13px;font-family:inherit;outline:none}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--red)}
.fg textarea{resize:vertical;min-height:80px}
.chk-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:-4px 0 14px;cursor:pointer}
.chk-row input{width:auto;margin:0}
.share-grid{display:flex;justify-content:space-between;gap:6px}
.share-opt{display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:none;font-size:11px;color:var(--muted);cursor:pointer;flex:1;padding:0}
.share-opt:hover .share-ic{background:#ececee}
.share-ic{width:44px;height:44px;border-radius:50%;background:#f2f2f4;display:flex;align-items:center;justify-content:center;font-size:19px}
/* profile page — NOTE: .pf-wrap must NOT have a max-height/overflow here.
   This exact rule has been reintroduced by stale-base-file collisions 4
   times now (17 Jul, 25 Jul, 28 Jul, 30 Jul) — it's a leftover from when
   Profile was a popup modal, and it's what produces the "embedded iframe"
   scrollbar look once the page's content (esp. the Rental location map)
   is taller than 70vh. Profile is a real page now (23 Jul) and should
   scroll with the page like My Listings/Add a Listing/Booking Requests. */
.pf-sec{font-size:13px;font-weight:700;color:var(--text);margin:18px 0 10px;padding-top:14px;border-top:1px solid var(--hair)}
.pf-row{display:flex;gap:12px}
.pf-row .fg{flex:1}
.pf-hint{display:block;font-size:11px;color:var(--muted);margin-top:4px;text-transform:none;letter-spacing:0;font-weight:400}
.pf-linkbtn{background:none;border:none;padding:0;margin:0;font:inherit;font-size:11px;color:var(--red);text-decoration:underline;cursor:pointer}
.pf-linkbtn:disabled{opacity:.6;cursor:default}
.pf-badge{display:inline-block;margin-left:8px;background:#e8f7ee;color:#1a8a4a;font-size:10px;font-weight:700;padding:2px 7px;border-radius:999px;vertical-align:middle}
/* identity section */
.pf-id{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;border:1px solid var(--hair);border-radius:12px}
.pf-id-ok{background:#f3fbf6;border-color:#cdeedd}
.pf-id-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px;flex:0 0 auto}
.pf-id-badge.ok{background:#e8f7ee;color:#1a8a4a}
.pf-id-badge.no{background:#fdecec;color:#c0322b}
.pf-id-badge.wait{background:#fff4e5;color:#9a6700}
.pf-id-text{font-size:13px;color:var(--muted);flex:1 1 160px}
/* Messages page — conversation list */
.pf-msg-list{max-width:640px;border:1px solid var(--hair);border-radius:12px;overflow:hidden}
.pf-msg-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-bottom:1px solid var(--hair);cursor:pointer;position:relative}
.pf-msg-row:last-child{border-bottom:none}
.pf-msg-row:hover{background:var(--light)}
.pf-msg-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--red);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pf-msg-body{flex:1;min-width:0}
.pf-msg-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.pf-msg-name{font-size:13.5px;font-weight:700}
.pf-msg-row.unread .pf-msg-name{color:var(--text)}
.pf-msg-when{font-size:11px;color:var(--muted);flex:0 0 auto}
.pf-msg-listing{font-size:12px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-msg-preview{font-size:12.5px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-msg-row.unread .pf-msg-preview{color:var(--text);font-weight:600}
.pf-msg-dot{position:absolute;top:14px;right:14px;width:8px;height:8px;border-radius:50%;background:var(--red)}
/* email preference centre (profile) */
.pr-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--hair)}
.pr-row:last-of-type{border-bottom:none}
.pr-txt b{display:block;font-size:13.5px;margin-bottom:2px}
.pr-txt span{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.pr-locked{opacity:.75}
.pr-note{font-size:12px;color:var(--muted);background:var(--light);border-radius:9px;padding:10px 12px;margin-top:10px;line-height:1.5}
.pr-warn{font-size:12px;color:#b23b3b;background:#fdeeee;border:1px solid #f5c6c6;border-radius:9px;padding:10px 12px;margin-top:10px;line-height:1.5}
.btn-id{background:var(--red);color:#fff;border:none;border-radius:7px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;flex:0 0 auto}
.btn-id:hover{background:#c51f24}.btn-id:disabled{opacity:.6;cursor:default}
.fg input:disabled{background:#f6f6f7;color:var(--muted);cursor:not-allowed}
.pf-actions{display:flex;align-items:center;gap:14px;margin-top:8px;padding-top:6px}
.btn-primary{background:var(--red);color:#fff;border:none;border-radius:7px;padding:11px 22px;font-size:14px;font-weight:600;cursor:pointer}
.btn-primary:hover{background:#c51f24}.btn-primary:disabled{opacity:.6;cursor:default}
.pf-msg{font-size:13px}.pf-msg.ok{color:#1a8a4a}.pf-msg.err{color:var(--red)}
@media(max-width:480px){.pf-row{flex-direction:column;gap:0}}
.submit{width:100%;height:46px;background:var(--red);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:700;margin-top:8px}
/* 4-tab list-an-item modal */
.modal.lg{max-width:640px}
/* 5-step list-an-item wizard nav — redesigned 21 Aug 2026 to a
   numbered-circle pill with a checkmark/complete state, matching
   mockups ra4u_cms002a_add-a-listing_*.png. Replaces the earlier
   (21 Aug, same day) icon-box version above — see [[rentall4u-listing-edit]].
   Three states: todo (grey, upcoming), on (red, current), done
   (grey pill, checkmark, completed). */
.add-steps-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.add-steps-head h3{margin:0 0 2px;font-size:17px;font-weight:700;color:var(--text)}
.add-steps-head p{margin:0;font-size:13px;color:var(--muted)}
.add-tabs{display:flex;gap:8px;flex-wrap:wrap}
.add-tab{background:#fff;border:1px solid var(--hair);border-radius:999px;padding:5px 14px 5px 5px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);transition:.15s;white-space:nowrap}
.add-tab .tn{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0;background:#eef0f2;color:var(--muted)}
.add-tab.todo{border-color:var(--hair);color:var(--muted)}
.add-tab.on{border-color:var(--red);color:var(--text)}
.add-tab.on .tn{background:var(--red);color:#fff}
.add-tab.done{border-color:transparent;background:#eef0f2;color:var(--text)}
.add-tab.done .tn{background:transparent;color:var(--text);font-size:14px}
/* Mobile (24 Aug 2026): the numbered step pills stop wrapping onto a 2nd
   row (which pushed the panel below down and read awkwardly) and become a
   single horizontally-scrolling rail instead, scrollbar hidden. The active
   step is scrolled flush to the rail's left edge on every render — see
   addScrollActiveTabIntoView() in add-listing.js, called from
   renderAddShell(). */
@media(max-width:768px){
  .add-tabs{flex-wrap:nowrap;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
  .add-tabs::-webkit-scrollbar{display:none}
  .add-tab{flex-shrink:0}
}
/* Edit-Listing icon-tab bar (23 Aug 2026) — used instead of the numbered/
   checkmark .add-tab nav above, only when editing an existing listing (see
   add-listing.js's renderAddShell()/addIconTabsHtml()). Reuses the SVG icons
   already defined in ADD_TABS (built 21 Aug, left unused by the numbered nav
   until now) plus two new ones for Revenue/Promote. */
.add-icon-tabs-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.add-icon-tab{background:#fff;border:1px solid var(--hair);border-radius:10px;padding:8px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);transition:.15s;white-space:nowrap}
.add-icon-tab svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.add-icon-tab.on{border-color:var(--red);color:var(--red)}
.add-icon-tab.on svg{stroke:var(--red)}
.add-icon-tab-gap{width:1px;align-self:stretch;background:var(--hair);margin:0 4px}
.add-icon-cta{background:var(--red);border-color:var(--red);color:#fff}
.add-icon-cta svg{fill:#fff;stroke:none}
.add-icon-cta.on{background:var(--red-panel);border-color:var(--red-panel);color:#fff}
/* Mobile dropdown variant of the icon-tab bar (24 Aug 2026) — hidden on
   desktop; @media block below swaps it in for .aitr-desktop under 768px.
   Built from the same .dd/.pill-select/.dd-menu/.dd-item classes as the
   header's category dropdown (see search-box/pill-select rules near the
   top of this file), so it inherits the pill shape, chevron and open/close
   animation for free — only the icon sizing below is new. */
.aitr-mobile{display:none}
.aitr-mobile .dd-cur{display:flex;align-items:center;gap:8px}
.aitr-mobile .ci svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.aitr-mobile .dd-item.sel .ci svg{stroke:var(--red)}
.add-mobile-promote{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:10px;background:var(--red);border:none;border-radius:var(--r-pill);color:#fff;font-size:14px;font-weight:700;cursor:pointer}
.add-mobile-promote:hover{background:#c51f24}
.add-mobile-promote.on{background:var(--red-panel)}
.add-mobile-promote svg{width:18px;height:18px}
@media (max-width:768px){
  .add-icon-tab{padding:6px 10px;font-size:12px}
  .add-icon-tab svg{width:16px;height:16px}
  .aitr-desktop{display:none}
  .aitr-mobile{display:block;margin-bottom:20px}
  .aitr-mobile .dd{width:100%}
  .aitr-mobile .pill-select{width:100%;height:46px;justify-content:space-between}
  .aitr-mobile .dd-menu{width:100%;min-width:0}
}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.fg-row .fg{margin-bottom:0}
.req{color:var(--red)}
.add-toggle{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--hair);border-radius:12px;padding:14px;cursor:pointer;margin-top:4px}

.add-toggle input{width:18px;height:18px;margin-top:1px;accent-color:var(--red);flex-shrink:0}
.add-toggle .tt{font-size:13.5px;font-weight:700}
.add-toggle .ts{font-size:12.5px;color:var(--muted);margin-top:2px}
.fulfil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.bmode-grid{grid-template-columns:repeat(2,1fr)}
.fulfil{border:1px solid var(--hair);border-radius:12px;padding:16px 10px;text-align:center;cursor:pointer;position:relative;transition:.15s}
.fulfil .fi{font-size:24px}
.fulfil .fn{font-size:13.5px;font-weight:700;margin-top:8px}
.fulfil .fd{font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35}
.fulfil.on{border-color:var(--red);background:#fff5f5}
.fulfil.on:after{content:"✓";position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;background:var(--red);color:#fff;font-size:12px;line-height:20px}
.fulfil.on .fd{visibility:hidden}
/* Fulfillment options — 29 Jul 2026. Independent toggles (not mutually
   exclusive like .fulfil-grid's booking-type cards above), since an owner
   can offer any combination of collection/free delivery/paid delivery. */
.ff-toggle-list{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.ff-toggle{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--hair);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s}
.ff-toggle:hover{border-color:#d8d8d8;background:var(--light)}
.ff-toggle.on:hover{background:#fff5f5}
.ff-toggle input{width:18px;height:18px;margin-top:2px;accent-color:var(--red);flex-shrink:0}
.ff-toggle .fi{font-size:22px;flex-shrink:0;margin-top:1px;display:flex}
.ff-toggle .fi svg{width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ff-toggle.on .fi svg{stroke:var(--red)}
.ff-toggle-txt{display:flex;flex-direction:column;gap:3px}
/* .fg label's default uppercase/muted styling is meant for plain form-field
   labels, not these toggle cards — the .ff-toggle .fn/.fd text is already
   proper sentence case in the markup itself, so explicitly opt back out of
   the inherited transform here (higher specificity than ".fg label" wins). */
.ff-toggle .fn{font-size:14px;font-weight:700;color:var(--text);text-transform:none;letter-spacing:0}
.ff-toggle .fd{font-size:12.5px;color:var(--muted);margin-top:0;line-height:1.45;text-transform:none;letter-spacing:0;font-weight:400}
.ff-toggle.on{border-color:var(--red);background:#fff5f5}
.ff-radius-fg{margin:-2px 0 -2px 38px}
/* Lead time / booking-gap day inputs — 5 Aug 2026, reuses .ff-radius-fg's
   indent (aligns under the toggle text) for the same nested-under-toggle look. */
.lt-hint{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.35}
.ff-radius-row{display:flex;align-items:center;gap:8px;max-width:220px}
.ff-radius-row input{flex:1}
.ff-radius-unit{font-size:13px;font-weight:700;color:var(--muted);flex-shrink:0}
#addMap{height:280px;border-radius:12px;overflow:hidden;border:1px solid var(--hair);background:#e9e9e9}
#pfLocMap{height:280px;border-radius:12px;overflow:hidden;border:1px solid var(--hair);background:#e9e9e9}
.map-hint{font-size:12.5px;color:var(--muted);margin-top:8px}
.cal-legend{display:flex;align-items:center;gap:16px;font-size:12.5px;color:var(--muted);margin-bottom:14px}
.cal-legend .lg-dot{display:inline-block;width:13px;height:13px;border-radius:4px;vertical-align:-2px;margin-right:6px}
.cal-count{margin-left:auto;font-weight:600;color:var(--text)}
.cal-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:10px}
.cal-nav b{font-size:15px}
.cal-nav button{width:32px;height:32px;border-radius:50%;border:1px solid var(--hair);background:#fff;cursor:pointer;font-size:16px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{text-align:center;font-size:11px;font-weight:600;color:var(--muted);padding-bottom:2px}
.cal-day{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;background:#eafaf0;color:#1c7a44;transition:.1s}
/* 28 Aug 2026: Liam asked for the Availability calendar's date boxes to be
   60px shorter. Scoped to >=769px (matches the site's existing mobile
   breakpoint) rather than changed globally — on mobile these boxes are
   already much narrower than desktop, and swapping the square aspect-ratio
   for a flat height there would make them too tall/narrow-looking instead
   of shorter. Desktop cells were ~131px square (7 equal columns, 6px gaps);
   131-60=71px. */
@media(min-width:769px){.cal-day{aspect-ratio:auto;height:71px}}
.cal-day.off{background:#fdecec;color:#c0392b}
.cal-day.past{background:#f4f4f4;color:#bdbdbd;cursor:not-allowed}
.cal-day.empty{background:transparent;cursor:default}
.cal-tools{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.cal-tools button{border:1px solid var(--hair);background:#fff;border-radius:22px;padding:8px 14px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.cal-tools .ok{color:#1c7a44}.cal-tools .no{color:#c0392b}
.add-foot{display:flex;gap:12px;margin-top:22px}
.add-foot button{height:50px;border-radius:10px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;flex:1}
.add-back{background:#fff;border:1px solid var(--hair);color:var(--text);flex:0 0 130px!important}
.add-next{background:var(--red);color:#fff;border:none}
.img-drop{border:2px dashed var(--hair);border-radius:12px;padding:34px 16px;text-align:center;cursor:pointer;color:var(--muted);transition:border-color .15s,background .15s}
.img-drop:hover{border-color:var(--red);color:var(--text)}
.img-drop.drag-over{border-color:var(--red);background:#fdeaea;color:var(--text)}
.img-drop.img-drop-disabled{cursor:default;opacity:.6}
.img-drop.img-drop-disabled:hover{border-color:var(--hair);color:var(--muted)}
.img-drop .di{font-size:30px}
.img-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.img-thumb-cover{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.65);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:2px 7px;border-radius:20px;text-transform:uppercase}
.img-thumb-makecover{position:absolute;bottom:4px;left:4px;background:rgba(255,255,255,.92);color:var(--text);font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;border:none;cursor:pointer}
.img-thumb-makecover:hover{background:#fff;color:var(--red)}
.img-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#eee}
.img-thumb img{width:100%;height:100%;object-fit:cover}
.img-thumb .rm{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;font-size:13px;line-height:22px}
.vid-thumb{position:relative;border-radius:12px;overflow:hidden;background:#000;margin-top:4px}
.vid-thumb video,.vid-thumb img{width:100%;max-height:240px;display:block;background:#000;object-fit:cover}
.vid-thumb .rm{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;border:none;cursor:pointer;font-size:15px;line-height:26px;z-index:2}
.vid-yt-badge{position:absolute;left:8px;bottom:8px;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:700;letter-spacing:.2px;padding:3px 9px;border-radius:20px}
.vid-yt-row{display:flex;gap:8px;margin-top:10px}
.vid-yt-row input{flex:1;border:1px solid var(--hair);border-radius:8px;padding:9px 12px;font-size:13px;font-family:inherit;outline:none}
.vid-yt-row input:focus{border-color:var(--red)}
.vid-yt-row button{flex-shrink:0;border:1px solid var(--hair);background:#fff;border-radius:8px;padding:0 16px;font-size:13px;font-weight:700;color:var(--text);cursor:pointer}
.vid-yt-row button:hover{border-color:var(--red);color:var(--red)}
.hint{text-align:center;font-size:12px;color:var(--muted);margin-top:12px}
.btn-ghost{width:100%;height:44px;border:1px solid var(--hair);border-radius:10px;background:#fff;font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px}
.btn-ghost:hover{background:var(--light)}
.btn-ghost .geo-ic{width:15px;height:15px;background:var(--ic-loc) center/contain no-repeat}
.chk{display:flex;align-items:center;gap:8px}
.chk input{width:auto}
.chk label{text-transform:none;letter-spacing:0;font-weight:400;font-size:13px;margin:0}

/* ---------- FOOTER ---------- */
footer{padding:40px 24px 20px;overflow:hidden}
.foot-tag{font-family:'Inter',sans-serif;font-size:200px;font-weight:700;color:#cccccc;letter-spacing:-15px;line-height:1;margin-bottom:13px;user-select:none;position:relative;top:-23px}
.foot-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px}
.foot-logo{width:150px;height:36px;background:var(--logo) left center/contain no-repeat;margin-bottom:12px;position:relative;top:-23px}
/* divider between the logo and the tagline text — same hairline used under
   the For Renters / For Owners / Company column headings (.foot-col h4) */
.foot-brand-hr{border:none;border-top:1px solid var(--hair);margin:0 0 12px;position:relative;top:-23px}
.foot-brand p{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:12px;position:relative;top:-23px}
.soc{display:flex;gap:8px}
.soc a{width:40px;height:40px;border:1px solid var(--hair);border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;transition:color .15s,border-color .15s}
.soc a:hover{color:var(--red);border-color:var(--red)}
.soc a svg{height:15px;width:auto;fill:currentColor;display:block}
/* registration location autocomplete */
.loc-ac{position:relative}
.ac-menu{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--hair);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.13);z-index:210;display:none;overflow:hidden}
.ac-item{padding:9px 12px;font-size:14px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ac-item:hover,.ac-item.on{background:var(--light)}
.foot-col h4{font-size:14px;font-weight:600;border-bottom:1px solid var(--hair);padding-bottom:8px;margin-bottom:8px}
.foot-col a{display:block;font-size:13px;color:var(--muted);text-decoration:none;line-height:2.05}
.foot-col a:hover{color:var(--text)}
.foot-legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding-top:16px;margin-top:16px;border-top:1px solid var(--hair);font-size:12.5px}
.foot-legal a{color:var(--muted);text-decoration:none}
.foot-legal a:hover{color:var(--red)}
.foot-legal button{background:none;border:none;padding:0;margin:0;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}
.foot-legal button:hover{color:var(--red)}
.foot-legal+.foot-bot{border-top:none;padding-top:12px}
.foot-bot{border-top:1px solid var(--hair);padding-top:16px;font-size:14px;color:var(--muted)}

/* ---------- cookie consent (small corner card) ---------- */
.cookie-card{position:fixed;right:20px;bottom:20px;width:340px;max-width:calc(100% - 40px);
  background:#fff;border:1px solid var(--hair);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding:18px;z-index:250;transform:translateY(140%);opacity:0;transition:transform .3s ease,opacity .3s ease}
.cookie-card.show{transform:translateY(0);opacity:1}
.cookie-card p{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0 0 14px}
.cookie-card a{color:var(--red);font-weight:600;text-decoration:none}
.cookie-card a:hover{text-decoration:underline}
.cookie-btns{display:flex;flex-wrap:wrap;gap:8px}
.cookie-btns button{flex:1 1 auto;white-space:nowrap;border-radius:8px;padding:9px 10px;font-size:12.5px;
  font-weight:700;cursor:pointer;border:1px solid var(--hair);background:#fff;color:var(--ink);font-family:inherit}
.cookie-btns button:hover{background:var(--light)}
.cookie-btns button.primary{background:var(--red);color:#fff;border-color:var(--red)}
.cookie-btns button.primary:hover{background:#c51f24}
@media(max-width:480px){.cookie-card{left:12px;right:12px;bottom:12px;width:auto;max-width:none;padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom))}}
/* cookie preferences modal */
.cookie-pref-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--hair)}
.cookie-pref-row:last-of-type{border-bottom:none}
.cookie-pref-txt b{display:block;font-size:13px;margin-bottom:2px}
.cookie-pref-txt span{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.cookie-switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.cookie-switch input{opacity:0;width:0;height:0}
.cookie-slider{position:absolute;cursor:pointer;inset:0;background:#d5d5d5;border-radius:24px;transition:.15s}
.cookie-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.cookie-switch input:checked+.cookie-slider{background:var(--red)}
.cookie-switch input:checked+.cookie-slider::before{transform:translateX(18px)}
.cookie-switch input:disabled+.cookie-slider{opacity:.5;cursor:not-allowed}

/* ---------- DETAIL PAGE ---------- */
#detail-view{display:none}
#content-view{display:none}
/* 28 Jul 2026 fix: these are the other routed "pages" in APP_VIEW_IDS
   (core.js) — each lives as its own always-present div with its own
   hardcoded title. Only detail-view/content-view above were ever hidden
   by default; these relied entirely on showOnlyView() (called near the
   end of bootstrap.js, the LAST script to run) to hide everything except
   the active view — so on every page load, ALL of them (My Listings, Add
   a Listing, Profile, Booking Requests, and Collection once populated)
   were visible together until that JS finally ran. showOnlyView() already
   sets an explicit inline style.display='block' to show whichever one is
   actually active, which overrides this without any change needed there —
   same pattern already proven safe by detail-view/content-view above.
   14 Aug 2026: messages-view/rewards-view/handoff-view were added to
   APP_VIEW_IDS after this rule was written and never got added here —
   messages-view's static markup (its own Menu sidebar box) was flashing
   at the bottom of the homepage on every load/refresh, in the gap before
   showOnlyView() ran. rewards-view has the same markup shape so was
   equally exposed; handoff-view added too for consistency, even though
   its static markup has no visible content yet. */
#collection-view,#my-listings-view,#add-listing-view,#profile-view,#booking-requests-view,#messages-view,#rewards-view,#handoff-view{display:none}
/* CMS content pages (footer/informational) */
.cpage{max-width:1120px;margin:0 auto;padding:34px 24px 60px}
.cpage-head{margin-bottom:22px}
.cpage-head .sec-title{font-size:26px;font-weight:500}
.cpage-grid{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:start}
.cpage-sidecol{display:flex;flex-direction:column;gap:24px;min-width:0}
.cpage-main{min-width:0;border-top:1px solid var(--hair);padding-top:24px}
/* On the 7 account-area pages (My Bookings/My Listings/Add a Listing/
   Profile/Booking Requests/Messages/Rewards) the h1 sits directly inside
   .cpage-main with nothing above it in the grid — unlike CMS content pages,
   where .cpage-main's border-top separates the grid from the .cpage-head
   above it. Without that heading above, the border-top was just a stray
   line at the very top of the page. Padding-top left as-is (unrelated to
   the line, keeps existing vertical spacing). */
#my-listings-view .cpage-main,
#add-listing-view .cpage-main,
#profile-view .cpage-main,
#booking-requests-view .cpage-main,
#messages-view .cpage-main,
#rewards-view .cpage-main,
#collection-view .cpage-main{border-top:none}
.cpage-hero{background:#e6e6e6;border-radius:14px;overflow:hidden;margin-bottom:24px}
.cpage-hero img{display:block;width:100%;height:auto}
.cpage-body{font-size:15px;line-height:1.72;color:#333}
.cpage-body p{margin:0 0 18px}
.cpage-body h2{font-size:20px;font-weight:700;margin:26px 0 12px}
.cpage-body h3{font-size:17px;font-weight:700;margin:22px 0 10px}
.cpage-body h4{font-size:15px;font-weight:700;margin:18px 0 8px}
.cpage-body ul,.cpage-body ol{margin:0 0 18px 20px}
.cpage-body li{margin-bottom:6px}
.cpage-body img{max-width:100%;height:auto;border-radius:10px;margin:8px 0}
.cpage-body a{color:var(--red);text-decoration:underline}
.cpage-body blockquote{border-left:3px solid var(--hair);margin:0 0 18px;padding:2px 0 2px 16px;color:var(--muted)}
.cpage-policy{margin-top:30px;padding-top:16px;border-top:1px solid var(--hair);font-size:13px;color:var(--red)}
.cpage-policy a{color:var(--red);text-decoration:none}
.cpage-policy a:hover{text-decoration:underline}
.cpage-side{border:1px solid var(--hair);border-radius:14px;padding:18px 20px}
.cpage-side h3{font-size:15px;font-weight:700;margin:0 0 10px}
.cpage-navlink{display:block;font-size:14px;color:#333;text-decoration:none;padding:8px 0;border-bottom:1px solid var(--hair)}
.cpage-navlink:last-child{border-bottom:none}
.cpage-navlink:hover{color:var(--red)}
.cpage-navlink.active{color:var(--red);font-weight:600}
.cpage-navlink-ic{display:flex;align-items:center;gap:10px}
.cpage-navlink-ic svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpage-navlink-ic .nav-dot{margin-left:auto;flex-shrink:0}
.cpage-account{margin-top:0}
.cpage-add-listing{display:flex;align-items:center;gap:10px;background:var(--red);color:#fff;border-radius:8px;padding:10px 14px;font-size:14px;font-weight:600;text-decoration:none;margin-top:12px}
.cpage-add-listing:hover{background:var(--red-panel)}
.cpage-add-listing svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cpage-add-listing.active{box-shadow:0 0 0 2px var(--red-panel) inset}
.cpage-load{padding:40px 0;color:var(--muted)}
@media(max-width:820px){
  .cpage-grid{grid-template-columns:1fr;gap:28px}
  .cpage-sidecol{order:-1}
}
/* Account-area Menu sidebar (cpageAccountSideHtml) is redundant on mobile —
   the burger menu already covers the same nav items — so hide it there for
   the 7 account pages specifically. Scoped by view container id rather than
   .cpage-sidecol globally, since content pages (/p/...) use the same class
   for their own sidebar + reuse this same account box, and should keep it. */
@media(max-width:768px){
  #my-listings-view .cpage-sidecol,
  #add-listing-view .cpage-sidecol,
  #profile-view .cpage-sidecol,
  #booking-requests-view .cpage-sidecol,
  #messages-view .cpage-sidecol,
  #rewards-view .cpage-sidecol,
  #collection-view .cpage-sidecol{display:none}
}
#hd .hd-bot{display:none}
body.on-home #hd .hd-bot{display:flex}
.detail{padding:20px 24px 8px}
/* collection / category landing page */
.coll{padding:20px 24px 70px}
.coll-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.coll-back{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--hair);border-radius:24px;padding:8px 16px 8px 12px;font-size:14px;font-weight:600;color:var(--text);font-family:inherit;cursor:pointer}
.coll-back:hover{background:var(--light)}
.coll-back .bk{font-size:18px;line-height:1;color:var(--red)}
.coll-sub{font-size:14px;color:var(--muted);margin:0 0 16px}
.coll-sub b{color:var(--text)}
.coll-chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.coll-chip{background:#fff;border:1px solid var(--hair);border-radius:22px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--text);font-family:inherit;cursor:pointer;white-space:nowrap}
.coll-chip:hover{border-color:var(--red);color:var(--red)}
.coll-chip.on{background:var(--red);border-color:var(--red);color:#fff}
.coll-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
/* coll-grid 3-across tablet fix — MUST stay after the base rule above, see
   the note near the .grid tablet-breakpoint block earlier in this file. */
@media(min-width:769px) and (max-width:900px){
  .coll-grid{grid-template-columns:repeat(3,1fr)}
}
@media(pointer:coarse) and (orientation:portrait) and (min-width:769px) and (max-width:1112px){
  .coll-grid{grid-template-columns:repeat(3,1fr)}
}
.coll-empty{padding:50px 20px;text-align:center;color:var(--muted);font-size:15px;border:1px dashed var(--hair);border-radius:14px}
/* my bookings */
.bk-row{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--hair);border-radius:14px;margin-bottom:10px}
.bk-emoji{width:46px;height:46px;border-radius:10px;background:var(--light);display:flex;align-items:center;justify-content:center;font-size:24px;flex:0 0 auto;overflow:hidden}
.bk-emoji img{width:100%;height:100%;object-fit:cover;display:block}
.bk-main{flex:1 1 auto;min-width:0}
.bk-title{display:block;font-size:15px;font-weight:600;color:var(--text);text-decoration:none}
.bk-title:hover{color:var(--red)}
.bk-meta{font-size:13px;color:var(--muted)}
.bk-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto}
.bk-badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.bk-pending{background:#fff4e5;color:#9a6700}
.bk-confirmed{background:#e8f7ee;color:#1a8a4a}
.bk-completed{background:#eef0f2;color:#555}
.bk-cancelled{background:#fdecec;color:#c0322b}
.bk-scheduled{background:#eef6ff;color:#1c4e80}
.bk-repeat{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--muted);margin-top:3px}
.bk-repeat svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}
.bk-issue{font-size:11.5px;color:#c0322b;background:#fdecec;border-radius:7px;padding:6px 9px;margin-top:6px;line-height:1.45}
.bk-cancel{background:none;border:1px solid var(--hair);border-radius:7px;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--muted)}
/* QR handover/return ticketing (11 Aug 2026) — see [[rentall4u-handoff-ticketing]] */
.bk-handoff{margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-handoff-btn{background:var(--red);color:#fff;border:none;border-radius:7px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}
.bk-handoff-btn:hover{opacity:.9}
.bk-handoff-req{font-size:10.5px;font-weight:700;color:#9a6700;background:#fff4e5;border-radius:999px;padding:2px 8px;text-transform:uppercase;letter-spacing:.3px}
.bk-cancel:hover{border-color:var(--red);color:var(--red)}
.bk-pay{background:var(--red);color:#fff;border:none;border-radius:7px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}
.bk-pay:hover{background:#c51f24}.bk-pay:disabled{opacity:.6;cursor:default}
.bk-rentagain{background:var(--red);color:#fff;border:none;border-radius:7px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}
.bk-rentagain:hover{background:#c51f24}
.bk-sec-head{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:22px 0 12px}
.bk-sec-head:first-child{margin-top:4px}
.bk-sec-empty{font-size:13px;color:var(--muted);padding:2px 0 6px}
.bk-awaiting_approval{background:#fff4e5;color:#9a6700}
@keyframes bkHighlightPulse{0%,100%{box-shadow:0 0 0 0 rgba(226,37,42,0)}20%,60%{box-shadow:0 0 0 4px rgba(226,37,42,.18)}}
/* reviews (My Bookings + Booking Requests) */
.bk-review-btn{background:none;border:1px solid var(--hair);border-radius:7px;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--text);margin-top:6px}
.bk-review-btn:hover{border-color:var(--red);color:var(--red)}
.bk-review-done{margin-top:8px;font-size:13px}
.bk-review-done .st{color:#f5a623;letter-spacing:1px;margin-right:6px}
.bk-review-txt{color:var(--muted)}
.bk-owner-reply{margin-top:6px;padding:8px 10px;background:var(--light);border-radius:8px;font-size:12px;color:#555;line-height:1.5}
.bk-owner-reply b{color:var(--text)}
.bk-renter-rating{font-size:11.5px;color:var(--muted);margin-left:6px}
.bk-progress{margin-top:8px}
.bk-progress-track{height:6px;border-radius:999px;background:var(--light);overflow:hidden}
.bk-progress-fill{height:100%;width:0;background:var(--red);border-radius:999px;transition:width 1s linear}
.bk-progress-label{margin-top:4px}
.rev-form{margin-top:8px;padding:12px;border:1px solid var(--hair);border-radius:10px;max-width:360px}
.rf-stars{display:flex;gap:2px;margin-bottom:8px}
.rf-star{background:none;border:none;font-size:22px;color:#ddd;cursor:pointer;padding:0 1px;line-height:1;font-family:inherit}
.rf-star.on{color:#f5a623}
.rf-text{width:100%;min-height:60px;border:1px solid var(--hair);border-radius:8px;padding:8px;font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box}
.rf-actions{display:flex;gap:8px;margin-top:8px}
.rf-submit{background:var(--red);color:#fff;border:none;border-radius:7px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}
.rf-submit:hover{background:#c51f24}.rf-submit:disabled{opacity:.6;cursor:default}
.rf-cancel{background:none;border:1px solid var(--hair);border-radius:7px;padding:6px 14px;font-size:12px;cursor:pointer;color:var(--muted)}
.rf-cancel:hover{border-color:var(--red);color:var(--red)}
.bk-highlight{animation:bkHighlightPulse 1.8s ease-in-out 1}
.burger-wrap{position:relative;display:inline-flex}
/* 25 Aug 2026: both badges upgraded from plain dots to numbered counts —
   fixed-size circle at 1-2 digits, widens to a pill at 3+ ("99+"). Empty
   until JS sets textContent + display, same as the old dot convention. */
.menu-dot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;background:var(--red);border:2px solid #fff;box-sizing:border-box;color:#fff;font-size:10px;font-weight:700;line-height:12px;text-align:center;padding:0 3px;pointer-events:none}
.nav-dot{display:inline-block;min-width:16px;height:16px;border-radius:8px;background:var(--red);margin-left:7px;vertical-align:middle;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;padding:0 4px;box-sizing:border-box}
.detail-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;margin-left:-50px}
.rev-toggle{margin-top:14px;background:#fff;border:1px solid var(--hair);border-radius:24px;padding:10px 20px;font-size:14px;font-weight:600;color:var(--text);font-family:inherit}
.rev-toggle:hover{background:var(--light)}
.back-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);background:#fff;flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e2252a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.back-btn:hover{background-color:var(--light)}
.detail-title{font-size:26px;font-weight:500;letter-spacing:-.9px;line-height:1.15}
.back-btn-label{display:none}
.detail-top{display:grid;grid-template-columns:1fr 330px;gap:24px;align-items:start}
.gallery{display:grid;grid-template-columns:1fr 220px;gap:12px;grid-column:1}
.gal-main{position:relative;aspect-ratio:4/3;max-height:600px;border-radius:14px;overflow:hidden;background:#eee}
.gal-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:120px;scroll-snap-align:center}
.gal-fav{position:absolute;top:14px;left:14px;width:40px;height:40px;border-radius:50%;z-index:4;background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 1 0-7.8 7.8L12 21.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") center/22px no-repeat;border:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gal-fav.on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23e2252a'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 1 0-7.8 7.8L12 21.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E")}
.gal-share{position:absolute;top:14px;left:64px;width:40px;height:40px;border-radius:50%;z-index:4;background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.6' y1='10.6' x2='15.4' y2='6.4'/%3E%3Cline x1='8.6' y1='13.4' x2='15.4' y2='17.6'/%3E%3C/svg%3E") center/20px no-repeat;border:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.05);border:none;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gal-prev{left:12px}.gal-next{right:12px}
.gal-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.gal-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.6);cursor:pointer}
.gal-dots i.on{background:#fff;width:18px;border-radius:4px}
.gal-thumbs{display:flex;flex-direction:column;gap:12px;overflow-y:auto;min-height:0}
.gal-thumb{flex:0 0 auto;aspect-ratio:4/3;min-height:0;border-radius:10px;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:40px;border:2px solid transparent}
.below-gallery{grid-column:1;padding-top:6px}
.dt-section{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start;border-bottom:1px solid var(--hair);padding-bottom:18px;margin-bottom:18px}
.dt-locrow{font-size:14px;margin-bottom:10px}
.dt-locrow .lab{display:inline-block;width:70px;color:var(--muted)}
.dt-video{margin:2px 0 14px;border-radius:12px;overflow:hidden;background:#000}
.dt-video video{width:100%;max-height:360px;display:block;background:#000}
.dt-video-yt{position:relative;width:100%;padding-top:56.25%}
.dt-video-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.dt-desc{font-size:14px;color:#444;line-height:1.65}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.spec{background:var(--light);border-radius:12px;padding:12px 14px}
.spec .ic{font-size:18px}
.spec .k{font-size:12px;color:var(--muted);margin:6px 0 2px}
.spec .v{font-size:14px;font-weight:600}
.ins-link{color:var(--red);text-decoration:none;font-weight:600;border-bottom:1px solid transparent}
.ins-link:hover{border-bottom-color:var(--red)}
.reviews-blk{margin-bottom:14px}
.reviews-blk h3{font-size:20px;font-weight:600;margin-bottom:8px}
.rev-avg{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:14px}
.rev-avg .stars{color:#f5a623;font-size:15px;letter-spacing:1px}
.rev-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rev-card{border:1px solid var(--hair);border-radius:12px;padding:14px}
.rev-card .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.rev-card .nm{font-weight:600;font-size:13px}
.rev-card .st{color:#f5a623;font-size:12px}
.rev-card .tx{font-size:13px;color:#555;line-height:1.5}
.rev-reply{margin-top:8px;padding:10px 12px;background:var(--light);border-radius:8px;font-size:12px;color:#555;line-height:1.5}
.rev-reply b{color:var(--text)}
.policy-links{font-size:13px;color:var(--red);margin-top:16px}
.policy-links a{color:var(--red);text-decoration:none}.policy-links a:hover{text-decoration:underline}
/* booking card */
.book-card{grid-column:2;grid-row:1 / span 2;position:sticky;top:88px;background:#fff;border:1px solid var(--hair);border-radius:16px;padding:18px;box-shadow:0 4px 20px rgba(0,0,0,.06)}
.book-price{font-size:24px;font-weight:700;margin-bottom:14px}
.book-price span{font-size:15px;font-weight:400;color:var(--muted)}
.book-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px}
.bf-col{position:relative;min-width:0}
.bf-lab{display:block;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--muted);text-transform:uppercase;margin-bottom:4px}
.bf-dv{position:relative;display:flex;align-items:center;gap:6px;cursor:pointer;margin-bottom:2px}
.bf-date{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.bf-cal{width:15px;height:15px;flex:0 0 auto;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23353635' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center/contain no-repeat}
.bf-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:none;padding:0;margin:0;cursor:pointer;font-size:16px}
.bf-time{width:100%;border:none;outline:none;font-family:inherit;font-size:13px;color:var(--muted);background:none;padding:0;margin:0;appearance:none;-webkit-appearance:none}
.gal-back{display:none;position:absolute;top:14px;left:14px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") center no-repeat;border:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:3}
.detail-title-m,.price-m,.msg-m{display:none}
.book-reserve{width:100%;height:48px;background:var(--red);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:700;letter-spacing:.3px}
.book-reserve:hover{background:#c51f24}
/* repeat / recurring booking picker */
.rpt{margin-bottom:14px}
.rpt-sel{width:100%;height:40px;border:1px solid var(--hair);border-radius:8px;padding:0 10px;font-size:13.5px;
  font-family:inherit;color:var(--text);background:#fff}
.rpt-sel:focus{outline:none;border-color:var(--red)}
.rpt-end{display:none;margin-top:8px}
.rpt-end.on{display:block}
.rpt-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.rpt-row label{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.rpt-row input[type=radio]{accent-color:var(--red)}
.rpt-row input[type=number]{width:58px;height:34px;border:1px solid var(--hair);border-radius:7px;padding:0 8px;font-size:13px;font-family:inherit}
.rpt-row input[type=date]{flex:1;height:34px;border:1px solid var(--hair);border-radius:7px;padding:0 8px;font-size:13px;font-family:inherit;color:var(--text)}
.rpt-note{font-size:11.5px;color:var(--muted);margin-top:7px;line-height:1.45}
.book-note{text-align:center;font-size:12px;color:var(--muted);margin:8px 0 12px}
/* fulfilment chooser + cost breakdown */
.ff-choose{display:flex;gap:8px;margin-bottom:12px}
.ff-opt{flex:1;padding:9px 8px;border:1px solid var(--hair);border-radius:10px;background:#fff;font-size:13.5px;font-weight:600;color:var(--ink,#222);cursor:pointer}
.ff-opt.on{border-color:var(--red);background:#fdeaea;color:var(--red)}
.ff-only{font-size:13px;color:var(--muted);padding:2px 0 4px}
.cost-breakdown{border-top:1px solid var(--hair);padding-top:12px;margin-bottom:14px}
.cost-row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:7px;color:#333;gap:12px}
.cost-row span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.cost-total{font-weight:700;font-size:15px;border-top:1px solid var(--hair);padding-top:9px;margin-top:2px}
.cost-dep{color:var(--muted);font-size:12.5px}
.cost-note{font-size:11.5px;color:var(--muted);margin-top:6px;line-height:1.35}
.avail-warn{font-size:12.5px;color:var(--red);margin-bottom:8px;line-height:1.35}
.book-block-m{display:none}
.book-msg{width:100%;height:46px;background:#fff;border:1px solid var(--hair);border-radius:10px;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px}
.book-msg:hover{background:var(--light)}
.book-msg::before{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23353635' stroke-width='2'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat}
.related{padding:8px 0 0}
/* messaging modal */
.msg-head{display:flex;align-items:center;gap:10px}
.msg-head .oa{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.msg-head .on{font-weight:600;font-size:14px}
.msg-head .om{font-size:12px;color:var(--muted)}
.msg-thread{padding:16px 20px;height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;background:var(--light)}
.msg-empty{margin:auto;text-align:center;color:var(--muted);font-size:13px;max-width:240px}
.bubble{max-width:78%;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.45}
.bubble.me{align-self:flex-end;background:var(--red);color:#fff;border-bottom-right-radius:4px}
.bubble.them{align-self:flex-start;background:#fff;border:1px solid var(--hair);border-bottom-left-radius:4px}
.msg-compose{display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--hair)}
.msg-compose input{flex:1;height:42px;border:1px solid var(--hair);border-radius:22px;padding:0 16px;font-size:14px;font-family:inherit;outline:none}
.msg-compose input:focus{border-color:var(--red)}
.msg-send{width:42px;height:42px;border-radius:50%;background:var(--red) var(--ic-arrow) center/12px 18px no-repeat;border:none;flex-shrink:0}
.msg-send:hover{background-color:#c51f24}

/* Rental detail page — iPad portrait (769-900px, same range used for the
   card-grid tablet fix above). Below 769px the mobile detail layout already
   takes over; above 900px there's enough room for the normal desktop
   proportions. In between, the desktop grid's fixed 330px/300px side columns
   squeeze the gallery and force the location/description text beside a
   narrow rental-detail grid instead of above a full-width one — this
   section fixes that specifically for this width range. */
@media(min-width:769px) and (max-width:900px){
  /* 1. Back button: pill with "Back to Listings" text, right of the title
     (was a plain circular icon button pulled into the left margin via a
     negative margin that has no room to breathe at this width). */
  .detail-head{margin-left:0;justify-content:space-between;align-items:center}
  .detail-title{order:1}
  .back-btn{order:2;flex-shrink:0;width:auto;height:auto;display:inline-flex;align-items:center;gap:6px;background:#fff;background-image:none;border:1px solid var(--hair);border-radius:24px;padding:8px 16px 8px 12px;box-shadow:none}
  .back-btn::before{content:'\2039';font-size:18px;line-height:1;color:var(--red)}
  .back-btn-label{display:inline;font-size:14px;font-weight:600;color:var(--text);white-space:nowrap}

  /* 2. Gallery: main image gets the full column width (drop the internal
     220px thumb-strip column) and thumbnails move into a scrollable row
     underneath instead of a vertical strip beside it. */
  .gallery{grid-template-columns:1fr}
  .gal-thumbs{flex-direction:row;overflow-x:auto;overflow-y:visible}
  .gal-thumb{flex:0 0 110px}

  /* Booking card: kept as the desktop default here (sticky, spanning both
     rows) — Liam wants the sticky pin kept as a conversion aid. Since
     below-gallery is narrowed back to the gallery's own column just below
     (not spanning under the card's column), there's no shared space left
     for it to overlap, so no position override is needed here at all. */

  /* 3 & 4. Location/Owner/Description and the rental-detail spec grid:
     stacked (description above the grid), matching the gallery's own
     column width just above them — narrower than the full gallery+card
     row, so they never sit under the (still sticky) booking card. */
  .dt-section{grid-template-columns:1fr}
}

/* Gallery prev/next arrows: hidden on iPad (and tablets generally). Width
   alone can't tell an iPad apart from a desktop browser window that just
   happens to be a similar size — plenty of laptops sit in the 768-1366px
   range too — so this also requires (pointer:coarse), which touchscreens
   report and mouse/trackpad devices don't. Covers iPad portrait AND
   landscape across Mini/Air/Pro 11"/Pro 12.9" (768-1366px); phones are
   already covered separately below via the existing max-width:768px rule. */
@media(min-width:769px) and (max-width:1366px) and (pointer:coarse){
  .gal-nav{display:none}
}

/* 5. The big "Rent everything." watermark text: same idea as the existing
   mobile scaling below, tuned for this width range instead of full mobile
   scale — otherwise it's still the desktop's fixed 200px here.
   Range widened to 1600px (was 1080px): the fixed 200px only actually fits
   on one line on wide desktop monitors — common laptop widths (1366,
   1440, 1512, 1536, 1600) sat just past the old cutoff and wrapped the
   tagline onto two lines. Same vw value carried through since it was
   already comfortably one line at the 1080px end of this range. */
@media(min-width:769px) and (max-width:1600px){
  .foot-tag{font-size:13.2vw;letter-spacing:-.06em;line-height:.95;margin-bottom:20px}
}

/* iPad portrait only: the 13.2vw ratio above was tuned against ~1600px-wide
   laptops, where footer's fixed 24px side padding (see `footer{padding:...}`)
   barely dents the available width. At iPad-portrait's much narrower widths
   that same fixed padding eats a bigger share of the viewport, so "Rent
   everything." wrapped its final "." onto a second line. Same
   feature-detected range already used above for the gallery-arrow/grid-columns
   iPad-portrait fixes (pointer:coarse + orientation:portrait, 769-1112px) —
   scoped to portrait only so iPad landscape (closer to laptop width, already
   fine) is untouched. Nudged the ratio down and tightened letter-spacing
   slightly to bring it back to one line; comes after the rule above so it
   wins on equal specificity. */
@media(pointer:coarse) and (orientation:portrait) and (min-width:769px) and (max-width:1112px){
  .foot-tag{font-size:12vw;letter-spacing:-.08em}
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:768px){
  /* iOS Safari auto-zooms when a focused field's text is under 16px. Keeping every
     real form control at 16px on mobile prevents that zoom without locking the
     viewport (so pinch-to-zoom still works). */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  textarea, select{font-size:16px !important}
  /* 26 Aug 2026: removed the old `html,body{overflow-x:visible}` mobile
     override here. It was cancelling the site-wide `body{overflow-x:clip}`
     (see top of file) specifically on phones — so anything even slightly
     wider than the viewport (e.g. the 19 Aug admin-style page backgrounds'
     100vw/calc(50% - 50vw) breakout on My Listings/Add Listing/Profile/
     Booking Requests/Messages/Rewards) became real, draggable horizontal
     body scroll instead of being safely clipped like it is on desktop.
     That's what let an accidental diagonal swipe pan the whole page
     sideways. Rails/grids/gallery thumbs are untouched — they scroll
     horizontally via their own scoped overflow-x:auto, not the page. */
  .hd-top{padding:10px 16px}
  .logo{width:165px;height:44px}
  .hd-nav{gap:6px}
  /* Support-chat header button mobile ordering (4 Aug 2026) — the button
     itself is visible at all widths (see .hd-icon-btn.chat-btn above); this
     just positions it on mobile: between SIGN IN and the burger when signed
     out, between the search icon and the burger when signed in. Replaces
     the old header .profile-btn entirely (My Profile already lives in the
     burger menu, so that icon was redundant; see drawer-nav's own "Profile"
     link — desktop never had a profile icon to begin with). */
  .hd-nav .search-toggle{order:1}
  .hd-nav .btn-signin{order:1}
  .hd-nav .chat-btn{order:2}
  .hd-nav .burger-wrap{order:3}
  /* SIGN IN narrowed + header-button gap tightened to make room for the new
     chat button alongside it without crowding the burger. */
  .btn-signin{padding:0 12px}
  .hd-search{display:none}
  .hd-search-mobile{display:flex}
  .btn-burger{width:46px;height:42px;border:1px solid var(--hair);border-radius:6px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3E%3Crect width='20' height='2' y='0' fill='%23e2252a'/%3E%3Crect width='20' height='2' y='6' fill='%23e2252a'/%3E%3Crect width='20' height='2' y='12' fill='%23e2252a'/%3E%3C/svg%3E") center/20px no-repeat}
  .btn-burger:hover{background-color:var(--light)}
  /* signed-in: collapse search to a magnify icon, hide name button. Header
     order when signed in is search · chat · burger (set via the shared
     .search-toggle/.chat-btn/.burger-wrap order rules above); signed out is
     SIGN IN · chat · burger. */
  body.signed-in .hd-icon-btn{display:block}
  body.signed-in .btn-signin{display:none}
  body.signed-in .hd-search-mobile{display:none}
  body.signed-in .hd-search-mobile.open{display:flex}
  .hd-bot{padding:8px 16px}
  /* Auto-hide on scroll (see bootstrap.js): tucks the search bar and the
     location/distance/Map-View/List-View bar away under the logo row when
     scrolling down, and brings them straight back on scroll up. overflow
     is only clipped while collapsed so open dropdowns (search results,
     the distance menu) are never cut off while these bars are visible. */
  #hd .hd-search-mobile,#hd .hd-bot{max-height:70px;transition:max-height .25s ease,opacity .2s ease,padding .25s ease}
  body.hd-collapsed #hd .hd-search-mobile,
  body.hd-collapsed #hd .hd-bot{max-height:0;opacity:0;padding-top:0;padding-bottom:0;overflow:hidden;border-top-color:transparent;pointer-events:none}
  .loc-pill{width:34px;height:34px;padding:0;border-radius:50%;justify-content:center;gap:0;flex-shrink:0}
  .loc-pill span.lbl,.loc-pill b{display:none}
  .view-ctrls{flex:1;min-width:0}
  .view-ctrls .dd{flex:1;min-width:0}
  .view-ctrls .dd .pill-select{width:100%;justify-content:space-between}
  .view-btn{flex-shrink:0;padding:0 13px}
  .sec-head{padding:16px 16px 10px}
  .sec-title{font-size:22px}
  .sec-title b{display:block}
  .sblk{padding:16px 16px 10px}
  .sblk>.rail-wrap{order:2;padding:8px 0 0}
  .sblk>.cats-grid{order:2}
  .sblk>.cta-sec{order:3;flex:0 0 100%;width:100%;justify-content:space-between;padding-left:20px;margin-top:8px}
  .sec-cta-below .cta-pill{width:100%;justify-content:space-between;padding-left:20px}
  .rail-wrap{padding:0 16px 8px}
  .grid{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .map-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .grid::-webkit-scrollbar{display:none}
  .grid .card{flex:0 0 260px;scroll-snap-align:start}
  .grid-rail .card{flex:0 0 260px}
  .coll{padding:16px 16px 50px}
  .coll-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .cats{padding:16px}
  .cats-grid{grid-template-columns:1fr}
  .panel p.big{font-size:20px}.panel p.sub{font-size:17px}.panel-c p{font-size:20px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  /* Fluid, not a fixed px: scales with viewport width so the headline spans
     edge-to-edge on any phone size (mirrors the desktop 200px/-15px ratio —
     letter-spacing in em ties it to the element's own font-size, so it stays
     proportionally tight as the vw value changes). Bigger text needs more
     breathing room before the logo, hence the larger margin-bottom here.
     2/3 Aug 2026: was 15.39vw — wrapped to 2 lines on real phones (e.g.
     iPhone 13, 390pt viewport → ~60px text vs only ~358px of room inside
     the footer's 16px side padding). Recalibrated against the 769px anchor
     point of the desktop-range rule above (101.5px font fits comfortably in
     ~721px there), which gives a much safer ratio — 12.5vw keeps a solid
     margin below the wrap threshold across the whole phone-width range
     (~375-430pt) while staying close in scale to the 13.2vw tablet/desktop
     rule just above this breakpoint. */
  .foot-tag{font-size:12.5vw;letter-spacing:-.075em;margin-bottom:22px}
  footer{padding:28px 16px 16px}
  .cta-pill{font-size:13px;padding:5px 5px 5px 16px}
  .cta-pill .arrow{width:34px;height:34px}
  .shuffle-btn{padding:5px}
  .shuffle-ic{width:34px;height:34px;background-size:21px 19px}
  /* Rail "View all rentals" buttons: drop the label on mobile, keep just
     the white circle + red arrow (icon-only), still sitting to the right
     of the section title inside .sec-head. */
  .cta-sec .cta-label{display:none}
  .cta-sec{padding:5px;gap:0}
  .dates{flex-direction:column}
  .map-split{flex-direction:column;padding:0 16px 8px;gap:0}
  .map-stage{flex:none;height:62vh;min-height:340px;max-height:560px}
  .map-count-m{display:block}
  .hide-mobile{display:none}
  .map-side{width:100%;height:auto;max-height:none;flex-direction:column;overflow:visible;gap:14px;padding:0}
  .map-side .card{width:100%;flex:none}
  .map-split.expanded{padding:0;gap:0}
  .map-split.expanded .map-stage{height:80vh;max-height:none;border-radius:0}
  .map-split.expanded .map-chips{display:none}
  .map-split.expanded .map-count-m{display:none}
  .map-split.expanded .map-side{display:none}
  .map-split.expanded .map-legend{display:none}
  body.map-expanded #map-view .sec-head{display:none}
  .map-split.expanded .map-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -6px 24px rgba(0,0,0,.18);padding:10px 14px calc(16px + env(safe-area-inset-bottom));transform:translateY(115%);transition:transform .28s ease;touch-action:none}
  .map-split.expanded .map-sheet.open{transform:translateY(0)}
  .map-split.expanded .map-sheet{max-height:60vh}
  .map-split.expanded .map-sheet.peek .sheet-scroll,
  .map-split.expanded .map-sheet.peek .sheet-empty{display:none}
  .map-split.expanded .map-sheet.peek .sheet-title{margin-bottom:0}
  .map-split.expanded .map-sheet.tall{max-height:88vh}
  .sheet-title{font-weight:700;font-size:15px;color:var(--ink);margin:0 0 12px;padding:0 2px}
  .sheet-showall{margin:0 0 10px;padding-left:2px}
  .sheet-more{font-size:13px;color:var(--muted);text-align:center;padding:12px 0 2px}
  .sheet-empty{font-size:14px;color:var(--muted);padding:8px 2px 4px}
  .sheet-scroll{display:flex;flex-direction:column;gap:16px;overflow-y:auto;max-height:42vh;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .map-sheet.tall .sheet-scroll{max-height:74vh}
  .count-pill{font-size:12px;padding:6px 6px 6px 14px}
  .map-chips{right:60px;overflow-x:auto;flex-wrap:nowrap}
  .detail{padding:0 0 8px}
  .detail-head{display:none}
  .detail-top{grid-template-columns:1fr;gap:0}
  .gallery{grid-template-columns:1fr;grid-column:1}
  .gal-main{aspect-ratio:auto;width:100%;height:320px;min-height:0;max-height:none;border-radius:0}
  .map-expand{display:none}
  .gal-nav{display:none}
  .gal-thumbs{display:none}
  .gal-back{display:block}
  .gal-fav{left:auto;right:14px}
  .gal-share{left:auto;right:14px;top:64px}
  .detail-title-m{display:block;font-size:22px;font-weight:500;letter-spacing:-.9px;padding:14px 0 2px;line-height:1.15}
  .price-m{display:block;font-size:20px;font-weight:700;padding:0 0 4px}
  .price-m span{font-size:14px;font-weight:400;color:var(--muted)}
  .msg-m{display:flex;margin-top:14px}
  .below-gallery{grid-column:1;padding:0 16px 16px}
  .dt-section{grid-template-columns:1fr;gap:18px;padding-top:6px}
  .spec-grid{grid-template-columns:1fr 1fr}
  .rev-cards{grid-template-columns:1fr}
  /* bottom reserve bar — position:fixed (pins natively on the live site) */
  .book-card{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:95;grid-column:1;grid-row:auto;background:#fff;border:none;border-top:1px solid var(--hair);border-radius:16px 16px 0 0;box-shadow:0 -4px 20px rgba(0,0,0,.12);margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));display:flex;align-items:stretch;gap:10px}
  .book-card .book-price,.book-card .book-note,.book-card>.book-msg{display:none}
  .book-card .js-ff-choose,.book-card .js-cost{display:none}
  .book-block-m{display:block;margin-top:16px;padding:14px;border:1px solid var(--hair);border-radius:14px;background:#fafafa}
  .bbm-title{font-weight:700;font-size:15px;margin-bottom:10px}
  .book-fields{flex:1;margin:0;gap:12px}
  .book-reserve{width:auto;flex:0 0 auto;height:auto;align-self:stretch;padding:0 22px;font-size:15px;border-radius:12px}
  body.on-detail{padding-bottom:96px}
  .related{padding:8px 16px 0}
  /* Add a Listing footer buttons at phone widths: with flex:1 buttons get
     squeezed and their labels wrap/cut off. Force two even rows instead —
     giving every button a ~50% flex-basis so the existing flex-wrap:wrap on
     .add-foot naturally breaks after every 2 buttons. Originally just the
     Preview step's 4-button footer (Back, Cancel, Save for Later, Confirm &
     Publish); 25 Aug 2026 broadened from .add-foot-preview to .add-foot so
     the same fix covers the Details/Images/Location/Availability tabs' own
     footers now that Edit mode adds Cancel + Save Changes there too (3
     buttons on Details — Cancel/Save Changes/Next — wraps 2+1; 4 on the
     others — Back/Cancel/Save Changes/Next — wraps 2+2). */
  .add-foot .add-back{flex:1 1 calc(50% - 6px)!important}
  .add-foot .add-next{flex:1 1 calc(50% - 6px)!important}
}
@media(max-width:480px){
  .foot-grid{grid-template-columns:1fr}
  .coll-grid{grid-template-columns:1fr}
  .fg-row{grid-template-columns:1fr}
  .fulfil-grid{grid-template-columns:1fr}
  .add-steps-row{gap:12px}
  .add-tabs{gap:6px}
  .add-tab{padding:4px 10px 4px 4px;font-size:11.5px}
  .add-tab .tn{width:19px;height:19px;font-size:10px}
  .img-grid{grid-template-columns:repeat(3,1fr)}
  .add-back{flex:0 0 96px!important}
}

/* sale badge on cards (automatic / owner-funded price sales) */
.sale-badge{position:absolute;left:10px;bottom:10px;background:var(--red);color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.2px;padding:4px 9px;border-radius:6px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);z-index:2;pointer-events:none}

/* promo deep-link toast */
.promo-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:#111;color:#fff;font-size:14px;font-weight:600;padding:12px 18px;border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,.28);z-index:9999;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;max-width:90vw;text-align:center}
.promo-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* promo code field (booking / reserve panel) */
.promo-field{display:flex;gap:8px;margin:10px 0 16px}
.promo-input{flex:1;min-width:0;height:36px;border:1px solid var(--hair);border-radius:9px;
  padding:0 12px;font-size:13px;font-family:inherit;color:var(--text);outline:none;background:#fff;
  text-transform:uppercase;transition:border-color .15s}
.promo-input::placeholder{text-transform:none;color:var(--muted)}
.promo-input:focus{border-color:var(--red)}
.promo-apply{flex:0 0 auto;height:36px;padding:0 16px;border:none;border-radius:9px;
  background:var(--ink);color:#fff;font-size:13px;font-weight:600;letter-spacing:.2px;
  cursor:pointer;font-family:inherit;transition:background .15s,color .15s}
.promo-apply:hover{background:#000}
/* Greyed + inert until a code is entered, so it doesn't pull focus from RESERVE.
   :placeholder-shown = the input is empty (placeholder visible). */
.promo-input:placeholder-shown + .promo-apply{background:#ededed;color:#a6a6a6;cursor:default;pointer-events:none}
.promo-msg{font-size:13px;margin:-8px 2px 12px;line-height:1.3}
.promo-ok{color:#0a7d33;font-weight:600}
.promo-no{color:var(--red)}

/* My listings (owner promote view) — rebuilt 21 Aug 2026 into a compact
   list row (thumb/title/price+dates + Edit/Duplicate/Pause/Delete/Promote),
   matching ra4u_cms001a_my-listing_list.png. Discount/Boost/Tags — previously
   always visible inline — now live behind the "Promote" toggle per row (see
   mlTogglePromote/mlPromoteBlock in my-listings.js); this is a deliberate
   interim home until the wizard's own Promote step is built. */
.ml-tip-line{font-size:13px;color:var(--muted);margin:0 0 4px;line-height:1.5}
.ml-tip-line:last-child{margin-bottom:0}
.ml-empty{text-align:center;color:var(--muted);padding:40px 20px;font-size:14px;line-height:1.6}
.ml-card{padding:0}
.ml-row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ml-row-txt{flex:1;min-width:180px}
.ml-row-meta{font-size:13px;color:var(--muted);margin-top:3px}
.ml-actions{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.ml-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--light);
  display:flex;align-items:center;justify-content:center;font-size:26px}
.ml-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ml-promote{background:var(--red);color:#fff}
.ml-promote:hover{background:#c51f24}
.ml-promote-body{margin-top:14px}
.ml-promote-body:empty{margin-top:0}
/* More info accordion */
.ml-more{display:flex;align-items:center;gap:6px;width:100%;justify-content:center;margin-top:12px;
  background:none;border:none;border-top:1px solid var(--hair);padding:11px 0 2px;
  font-size:13px;font-weight:600;color:var(--red);font-family:inherit;cursor:pointer}
.ml-more-ic{transition:transform .18s}
.ml-more.open .ml-more-ic{transform:rotate(180deg)}
.ml-more-body{margin-top:4px}
.ml-hist-loading,.ml-hist-empty{font-size:13px;color:var(--muted);padding:10px 2px}
.ml-hist-tbl{display:flex;flex-direction:column;font-size:13px}
.ml-hist-hr,.ml-hist-row{display:grid;grid-template-columns:1.6fr 1fr .8fr .8fr .9fr;gap:8px;align-items:center;padding:8px 2px}
.ml-hist-hr{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--hair)}
.ml-hist-row{border-bottom:1px solid var(--light)}
.ml-hist-row .c-num{text-align:right;font-variant-numeric:tabular-nums}
.ml-hist-hr .c-num{text-align:right}
.ml-hist-dates{display:block;font-weight:600}
.ml-hist-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.ml-hist-cancel-btn{display:inline-block;margin-left:8px;background:none;border:1px solid var(--hair);color:var(--red);font-size:11px;font-weight:600;padding:2px 8px;border-radius:12px;cursor:pointer;font-family:inherit}
.ml-hist-cancel-btn:hover{background:#fdecec;border-color:var(--red)}
.ml-earn{font-weight:700}
.ml-hist-row.cancelled{opacity:.6}
.ml-hist-row.cancelled .ml-earn{color:var(--muted)}
.ml-canc{color:var(--red);font-weight:700}
.ml-hist-tot{margin-top:10px;border-top:2px solid var(--hair);padding-top:10px}
.ml-hist-tot-row{display:flex;justify-content:space-between;font-size:13px;padding:3px 2px;color:var(--muted)}
.ml-hist-tot-row span:last-child{font-variant-numeric:tabular-nums}
.ml-hist-tot-earn{font-size:15px;font-weight:700;color:var(--text);margin-top:2px}
.ml-hist-foot{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.5}
.ml-reviews{margin-top:14px;border-top:2px solid var(--hair);padding-top:10px}
.ml-reviews-hd{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--muted);text-transform:uppercase;margin-bottom:8px}
.ml-review-card{border:1px solid var(--hair);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.ml-review-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px}
.ml-review-nm{font-weight:600;font-size:13px}
.ml-review-st{color:#f5a623;font-size:12px;letter-spacing:1px}
.ml-review-tx{font-size:13px;color:#555;line-height:1.5}
.ml-reply-done{margin-top:8px;padding:8px 10px;background:var(--light);border-radius:8px;font-size:12px;color:#555;line-height:1.5}
.ml-reply-done b{color:var(--text)}
.ml-reply-btn{background:none;border:1px solid var(--hair);border-radius:7px;padding:5px 12px;font-size:12px;cursor:pointer;color:var(--text);margin-top:6px}
.ml-reply-btn:hover{border-color:var(--red);color:var(--red)}
.ml-reply-form{margin-top:8px}
.ml-reply-text{width:100%;min-height:56px;border:1px solid var(--hair);border-radius:8px;padding:8px;font-size:13px;font-family:inherit;resize:vertical;box-sizing:border-box}
.ml-reply-actions{display:flex;gap:8px;margin-top:8px}
.ml-reply-submit{background:var(--red);color:#fff;border:none;border-radius:7px;padding:6px 14px;font-size:12px;font-weight:600;cursor:pointer}
.ml-reply-submit:hover{background:#c51f24}.ml-reply-submit:disabled{opacity:.6;cursor:default}
.ml-reply-cancel{background:none;border:1px solid var(--hair);border-radius:7px;padding:6px 14px;font-size:12px;cursor:pointer;color:var(--muted)}
.ml-reply-cancel:hover{border-color:var(--red);color:var(--red)}
@media(max-width:520px){
  .ml-hist-hr .c-who,.ml-hist-row .c-who{display:none}
  .ml-hist-hr,.ml-hist-row{grid-template-columns:1.5fr .8fr .8fr .9fr}
  .ml-hist-sub .ml-hist-who-m{display:inline}
}
.ml-r1{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ml-title{font-size:15px;font-weight:600;color:var(--text)}
.ml-title-link{color:inherit;text-decoration:none}
.ml-title-link:hover{text-decoration:underline}
/* My Listings search + Add New Listing toolbar (23 Aug 2026) — same row
   layout as Admin/Users' search+action bar; reuses the header's own
   .search-box (pill input + magnifier icon) and the site's .btn-primary
   red CTA style rather than inventing new button chrome. */
.ml-toolbar{display:flex;gap:14px;align-items:center}
.ml-toolbar .search-box{flex:1;max-width:none}
.ml-add-cta{flex:0 0 auto;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
@media (max-width:520px){
  .ml-toolbar{flex-wrap:wrap}
  .ml-toolbar .search-box{flex:1 1 100%}
  .ml-add-cta{flex:1 1 100%;text-align:center}
}
.ml-price{font-size:14px;color:var(--muted);white-space:nowrap}
.ml-status{display:inline-block;margin-top:4px;font-size:12px;color:var(--muted);text-transform:capitalize}
.ml-status-review{color:#8a5a00;background:#fff6e6;border:1px solid #c98a1e;border-radius:20px;padding:2px 10px;text-transform:none}
.ml-r2{display:flex;flex-wrap:wrap;gap:20px;margin-top:14px}
.ml-status-row{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--hair)}
.ml-status-row>label{font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.ml-status-actions{display:flex;flex-wrap:wrap;gap:8px}
.ml-edit{background:none;color:var(--text);border:1px solid var(--hair)}
.ml-edit:hover{background:var(--light)}
.ml-pause{background:none;color:var(--text);border:1px solid var(--hair)}
.ml-pause:hover{background:var(--light)}
.ml-dup{background:none;color:var(--text);border:1px solid var(--hair)}
.ml-dup:hover{background:var(--light)}
.ml-status-row .ml-note{display:block;margin-top:6px}
.ml-disc,.ml-boostwrap{display:flex;flex-direction:column;gap:6px}
.ml-disc{flex:1;min-width:240px}
.ml-r2 label{font-size:12px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--muted)}
.ml-disc-row{display:flex;align-items:center;gap:8px}
.ml-disc-input{width:70px;height:34px;border:1px solid var(--hair);border-radius:8px;padding:0 10px;font-size:14px;font-family:inherit;color:var(--text);outline:none}
.ml-disc-input:focus{border-color:var(--red)}
.ml-pct{font-size:14px;color:var(--muted);margin-left:-4px}
.ml-btn{height:34px;padding:0 14px;border:none;border-radius:8px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s}
/* Mobile: keep Edit/Duplicate/Pause(or Reactivate)/Delete on one line
   rather than wrapping (Delete previously dropped to its own row) —
   shrink the buttons a little, drop the margin-left:auto that would
   otherwise push the once-wrapped row flush right, and add horizontal
   scroll as a safety net for anything that still doesn't fit (longer
   status labels, smaller phones). Same hide-scrollbar pattern as the
   Add-a-Listing mobile step rail. */
@media(max-width:768px){
  .ml-actions{flex-wrap:nowrap;margin-left:0;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
  .ml-actions::-webkit-scrollbar{display:none}
  .ml-btn{flex:0 0 auto;padding:0 10px;font-size:12.5px}
}
.ml-save{background:var(--ink);color:#fff}
.ml-save:hover{background:#000}
.ml-remove{background:none;color:var(--red);border:1px solid var(--hair)}
.ml-remove:hover{background:var(--light)}
.ml-boost{background:var(--red);color:#fff}
.ml-boost:hover{background:#c51f24}
.ml-note{font-size:13px}
.ml-on{color:#0a7d33;font-weight:600}
.ml-boosted{display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:8px;background:#fff5e6;color:#b8791a;font-size:13px;font-weight:600}

/* ---------------------------------------------------------------------------
   Tag chip / typeahead input — used on the Add Listing Details tab and the
   My Listings tag editor. Shares --hair / --red / --muted / --ink with the
   rest of the sheet.
--------------------------------------------------------------------------- */
.tag-input{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  border:1px solid var(--hair);border-radius:12px;padding:8px 10px;min-height:44px;
  background:#fff;cursor:text}
.tag-input:focus-within{border-color:var(--red)}
.tag-chip{display:inline-flex;align-items:center;gap:6px;background:#f4f4f5;
  border-radius:8px;padding:4px 6px 4px 10px;font-size:13px;font-weight:600;color:var(--ink)}
.tag-chip .tc-x{background:none;border:none;font-size:16px;line-height:1;cursor:pointer;
  color:var(--muted);padding:0 2px}
.tag-chip .tc-x:hover{color:var(--red)}
.tag-input input{flex:1;min-width:120px;border:none;outline:none;font:inherit;
  font-size:14px;padding:4px 2px;background:transparent}
.tag-menu{position:absolute;top:calc(100% + 6px);left:0;width:100%;background:#fff;
  border:1px solid var(--hair);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.16);
  padding:6px;z-index:150;max-height:260px;overflow-y:auto;display:none}
.tag-menu.open{display:block}
.tag-opt{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 10px;border-radius:8px;font-size:14px;cursor:pointer}
.tag-opt:hover,.tag-opt.on{background:#f4f4f5}
.tag-opt .tag-uses{font-size:12px;color:var(--muted);font-weight:600}

/* My Listings tag editor extras (the chip input above is shared). */
.ml-tags{margin-top:12px}
.ml-tags>label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.ml-tags-hint{font-weight:400;color:var(--muted)}
.ml-tags-foot{display:flex;align-items:center;gap:10px;margin-top:8px}
.ml-note.ml-err{color:var(--red)}

/* Promote tab redesign (24 Aug 2026) — bulleted "how this works" copy at
   the top of each Discount/Boost/Tags panel, and the Free/Paid Tags
   sub-headings within the Tags panel. */
.promo-bullets{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}
.promo-bullets li{position:relative;padding-left:16px;font-size:13.5px;color:var(--ink);line-height:1.5}
.promo-bullets li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--red)}
.ml-tags-sub h4{margin:0 0 4px;font-size:14px;font-weight:700;color:var(--ink)}
.ml-tags-sub .pf-hint{display:block;margin-bottom:8px}

/* ================= SCROLL-IN MOTION (28 Jul 2026) =================
   Word-mask title reveal, staggered row-by-row card reveal (rails +
   listing grids), and promo-panel line-mask + CTA slide-in. Driven by
   /app/animations.js (new file, no existing file touched). Respects
   prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce){
  .sec-title,.mask-title .wm-inner,.reveal-card,.panel-line .pl-inner,.panel .cta-pill,
  .foot-tag,.foot-tag .lm-inner{
    transition:none!important;opacity:1!important;transform:none!important}
}

/* Hidden by default — this CSS is in place before animations.js ever runs,
   so the plain, un-masked title text can no longer flash into view for a
   moment on page/section load before JS wraps it into the animated version.
   animations.js adds .mask-title AND wraps the words in the same synchronous
   step, so the title reappears already in its masked (word-hidden, ready to
   cascade in on scroll) state — no visible in-between flash. */
.sec-title{opacity:0}
.sec-title.mask-title{opacity:1}
/* Same FOUC-prevention pattern for the big footer tagline below. */
.foot-tag{opacity:0}
.foot-tag.letter-mask{opacity:1}

/* Word-by-word title mask */
.mask-title .wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.mask-title .wm-inner{display:inline-block;transform:translateY(112%);opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.mask-title.in .wm-inner{transform:translateY(0);opacity:1}

/* Footer tagline: letter-by-letter mask (same technique, per-character) */
.foot-tag .lm{display:inline-block;vertical-align:top}
.foot-tag .lm-inner{display:inline-block;transform:translateY(40%);opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.foot-tag.in .lm-inner{transform:translateY(0);opacity:1}

/* Card fade + slide-up, staggered via --stagger-d (set inline per card by
   animations.js). box-shadow kept in the same transition list — un-delayed —
   so the existing hover effect (.card:hover) isn't affected once revealed. */
.reveal-card{opacity:0;transform:translateY(26px);
  transition:opacity .55s cubic-bezier(.16,1,.3,1) var(--stagger-d,0s),
             transform .55s cubic-bezier(.16,1,.3,1) var(--stagger-d,0s),
             box-shadow .15s}
.reveal-card.in{opacity:1;transform:translateY(0)}

/* Promo panel: each direct child of .panel-c masks in as its own line;
   the CTA fades in while sliding left-to-right into full opacity. */
.panel-line{display:block;overflow:hidden}
.panel-line .pl-inner{display:block;transform:translateY(105%);opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.panel.in .panel-line .pl-inner{transform:translateY(0);opacity:1}
.panel .cta-pill{opacity:0;transform:translateX(-28px);
  transition:opacity .6s ease .3s,transform .6s cubic-bezier(.16,1,.3,1) .3s}
.panel.in .cta-pill{opacity:1;transform:translateX(0)}

/* 28 Jul 2026 fix: the 4 built-in home rails (Picked for you/New/Favourites/
   Most popular) render their shell empty and fill it a moment later from an
   async fetch. With no reserved height, the whole homepage briefly collapses
   to just its titles stacked on top of each other — so on first paint several
   sections' titles are ALL already on-screen at once (all mask in together),
   and by the time cards actually arrive the page is short enough that most
   of it is already in view (so the stagger barely reads as scroll-triggered).
   Reserving one row's worth of height while a rail/grid is genuinely empty
   keeps the normal page rhythm from the very first paint — this rule stops
   applying itself the instant real cards land (:empty no longer matches). */
.rail:empty,.grid:empty,.coll-grid:empty,.map-grid:empty{min-height:340px}

/* ---------- REWARDS PAGE (31 Jul 2026) — burger menu → Rewards ----------
   A grid mixing real user data (the Loyalty card) with promo-panel slots.
   The promo panels themselves reuse .panel/.panel-c/.embed-panel above
   unchanged (page=rewards instead of page=home) — .rw-promo-slot just wraps
   one so the grid can size it as a cell; .panel's own margin-top:25px is
   harmless inside a grid cell (grid gap already spaces cards). */
.rw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;align-items:start}
.rw-card{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:22px}
.rw-promo-slot{padding:0;overflow:hidden;display:flex}
.rw-promo-slot .panel{margin-top:0;width:100%;border-radius:14px}
.rw-card-title{margin:0 0 4px;font-size:18px;font-weight:600}
.rw-card-sub{margin:0 0 16px;color:var(--muted);font-size:13px}
.rw-loy-list{display:flex;flex-direction:column;gap:16px}
.rw-loy-row{display:flex;gap:14px;align-items:flex-start}
.rw-thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;flex-shrink:0;background:#f2f2f2}
.rw-thumb-empty{background:#f2f2f2}
.rw-loy-info{flex:1;min-width:0}
.rw-loy-title{font-weight:600;font-size:14px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rw-loy-bar{height:8px;border-radius:5px;background:#f0f0f0;overflow:hidden;margin-bottom:6px}
.rw-loy-fill{height:100%;background:var(--red);border-radius:5px;transition:width .4s ease}
.rw-loy-sub{font-size:12.5px;color:var(--muted)}
.rw-unlocked{color:var(--red);font-weight:600}
.rw-unlocked-line{color:var(--red);font-weight:600}
@media (max-width:520px){
  .rw-grid{grid-template-columns:1fr}
}

/* ============================================================
   ACCOUNT AREA — Admin-style skin, first pass (19 Aug 2026)
   Brings the account-area pages that share the .cpage/.cpage-grid
   layout — My Bookings, My Listings, Booking Requests, Messages,
   Rewards, Profile, Add a Listing — in line with the visual
   language already used in admin.html: light grey page background,
   defined white panels, consistent widths/positioning, clearer
   dropdown/form styling, and hairline-divided list rows instead of
   individually-bordered cards.
   Deliberately CSS-only for this pass — no JS/markup changes. My
   Bookings shares #collection-view with public category pages, so
   it's targeted via :has(#bkList) (same :has() pattern admin.html
   already uses) rather than touching bookings.js.
   ============================================================ */

/* 1) Grey page background behind the panel — admin's exact tone.
   19 Aug follow-up: extended to a full-viewport-width breakout (the view
   containers sit inside .wrap, which caps at 1440px, so a plain background
   colour stopped short of the browser edge on wider screens) — body already
   has overflow-x:clip (site-wide, existing), so this is safe. */
#my-listings-view,#add-listing-view,#profile-view,
#booking-requests-view,#messages-view,#rewards-view,
#collection-view:has(#bkList){
  background:#f8f9fb;
  width:100vw;
  margin-left:calc(50% - 50vw);
}

/* 2) Defined white panel around each page's main content.
   Rewards and Profile are deliberately excluded — Rewards' content
   (.rw-grid of .rw-card boxes) is already its own set of admin-style
   panels, and Profile (19 Aug) was split into its own .pf-panel boxes
   (see below) — an outer panel around either would just nest a box in
   a box. Add/Edit Listing (#addBody) joined this exclusion list 21 Aug
   2026 when it got the same .pf-panel treatment as Profile — see
   [[rentall4u-listing-edit]]. My Listings (#myListingsBody) joined it
   the same day when its list was rebuilt into a Pro-Tip panel + a
   rows panel, both .pf-panel. */
#brBody,#messagesBody,#bkList{
  background:#fff;
  border:1px solid #e6e7e9;
  border-radius:14px;
  padding:22px 24px;
}
@media(max-width:768px){
  #brBody,#messagesBody,#bkList{padding:16px}
}

/* 3) Sub-heading directly under the page title — admin's .lead treatment */
#bkSub,#brSub{color:#7a7a7a}

/* 4) Clear dropdown / form-field styling — brings the existing 8px
   radius on inputs/selects/textareas up to admin's 10px so both
   areas read as one system; nothing else about them changes */
.fg input,.fg select,.fg textarea{border-radius:10px}

/* 5) Menu sidebar — same position as before, moved 20px further
   down the page (applies everywhere it's used, incl. content pages,
   for consistency) */
.cpage-sidecol{margin-top:20px}

/* 6) List rows: hairline dividers inside the new panel instead of
   each row being its own bordered/rounded card — matches admin's
   table.utable row treatment */
#bkList .bk-row,#brBody .bk-row{
  border:none;border-radius:0;margin-bottom:0;padding:16px 2px;
  border-bottom:1px solid #e6e7e9;
}
#bkList .bk-row:first-child,#brBody .bk-row:first-child{padding-top:2px}
#bkList .bk-row:last-child,#brBody .bk-row:last-child{border-bottom:none;padding-bottom:2px}

#myListingsBody .ml-card{
  border:none;border-radius:0;margin-bottom:0;padding:18px 2px;
  border-bottom:1px solid #e6e7e9;
}
#myListingsBody .ml-card:first-child{padding-top:2px}
#myListingsBody .ml-card:last-child{border-bottom:none;padding-bottom:2px}

#messagesBody .pf-msg-list{border:none;border-radius:0;max-width:none}
#messagesBody .pf-msg-row{padding:14px 2px}

/* Upcoming/Past + similar section labels — read as admin's uppercase
   muted .group headings now that they sit inside the panel */
.bk-sec-head{color:#7a7a7a}

/* 19 Aug 2026 follow-up: Menu sidebar background explicitly white (was
   transparent, so it inherited the grey page background added above and
   read as flat/merged instead of a distinct panel) */
.cpage-side{background:#fff}

/* 19 Aug 2026 follow-up #2: match the other 6 account pages' panel width
   and vertical rhythm to My Bookings (which uses .coll — no max-width,
   padding 20px 24px 70px), and pull each page's heading/body up 15px so
   it lines up with the top of the Menu sidebar box. Scoped by view-
   container id only, so CMS content pages (which also use .cpage, at its
   original narrower reading width) are untouched. */
#my-listings-view .cpage,#add-listing-view .cpage,#profile-view .cpage,
#booking-requests-view .cpage,#messages-view .cpage,#rewards-view .cpage{
  max-width:none;
  padding:20px 24px 70px;
}
#my-listings-view .cpage-main,#add-listing-view .cpage-main,#profile-view .cpage-main,
#booking-requests-view .cpage-main,#messages-view .cpage-main,#rewards-view .cpage-main,
#collection-view .cpage-main{
  padding-top:9px; /* was 24px — a 15px reduction, per Liam's ask */
}

/* 19 Aug 2026 follow-up #3: cap the body/submenu at 1392px on desktop
   (was implicitly bounded by .wrap's 1440px, i.e. ~1392px of content once
   padding was subtracted, but only as a side-effect — this makes it an
   explicit, deliberate width with its own centring rather than riding on
   .wrap's cap). */
#my-listings-view .cpage,#add-listing-view .cpage,#profile-view .cpage,
#booking-requests-view .cpage,#messages-view .cpage,#rewards-view .cpage,
#collection-view:has(#bkList) .coll{
  max-width:1392px;
  margin-left:auto;
  margin-right:auto;
}

/* 19 Aug 2026: Profile page split into separate admin-style panels
   (Contact & account / Address / Rental location / Identity verification /
   Two-factor authentication / Payment method / Payouts / Email
   preferences) instead of one continuous flowing form — mirrors admin's
   .group panel treatment on the User detail page (white box, hairline
   border, 14px corners, bold section heading). Replaces the old .pf-sec
   inline dividers for this page; .pf-sec itself is left defined in case
   anything else still references it.
   21 Aug 2026: same .pf-panel treatment extended to Add/Edit Listing
   (address.js/add-listing.js) — Details splits into 4 panels, Images
   into 2, Location into 3, Availability into 2, Preview into 1 (which
   uniquely also contains the Back/Cancel/Save buttons inside it, per
   the reviewed mockup). Also extended the same day to My Listings
   (my-listings.js) — Pro Tip panel + a rows panel (rows themselves
   still hairline-divided inside it, not individually boxed). See
   [[rentall4u-listing-edit]]. */
.pf-panel{background:#fff;border:1px solid #e6e7e9;border-radius:14px;padding:20px 22px;margin-bottom:18px}
.pf-panel:last-child{margin-bottom:0}
.pf-panel h3{margin:0 0 16px;font-size:17px;font-weight:700;color:var(--text)}
.pf-panel .fg:last-child{margin-bottom:0}