/* ===========================================================================
   current-location.com — 2026 common skin (applied over Bootstrap; the map
   app itself is untouched). Shares the network's design tokens + dark mode
   (webcamtest.net, aesencryption.net, …) and restyles the map chrome, the
   FAQ/prose, the "more tools" grid and the footer.
   Loaded AFTER bootstrap.min.css + style.css so it wins.
   =========================================================================== */

:root{
  --bg:#f6f7f9;--surface:#ffffff;--surface-2:#f1f3f7;--text:#161a22;--muted:#5b6473;--border:#e4e7ee;
  --accent:#4f46e5;--accent-hover:#4338ca;--accent-contrast:#fff;--ok:#16a34a;--err:#dc2626;
  --radius:14px;--radius-sm:9px;--maxw:900px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.06);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1115;--surface:#171a21;--surface-2:#1e222b;--text:#e7e9ee;--muted:#98a2b3;--border:#262b34;
  --accent:#7c83ff;--accent-hover:#9aa0ff;--accent-contrast:#0f1115;--ok:#4ade80;--err:#f87171;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.35);
}}

/* --- base (drives the below-the-map content) --------------------------- */
body{background:var(--bg);color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;}
/* Full-viewport map. Use dynamic viewport height (dvh) so mobile browsers size
   the map to the *visible* area as the URL bar shows/hides — plain height:100%
   leaves a dark gap under the map on mobile Chrome. 100vh is the fallback. */
#map-canvas{background:#aad3df;height:100vh;height:100dvh;}   /* water colour while tiles load */

/* --- toolbox → modern card ------------------------------------------- */
.toolbox{
  background:var(--surface)!important;color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow)!important;padding:12px!important;
}
.toolbox h1{color:var(--text);font-family:var(--font);font-weight:700;letter-spacing:-.01em;}
.toolbox .beta{color:var(--accent);font-weight:700;}
.toolbox .control-label,.toolbox label{color:var(--muted);}
#markerNr .full-h{color:var(--text);font-weight:600;}
.to-hide,.to-show{color:var(--accent);}
.to-show:hover,.to-hide:hover{color:var(--accent-hover);}

/* toolbox action buttons */
.toolbox .btn-warning.current-location{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);}
.toolbox .btn-warning.current-location:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-contrast);}
.toolbox .btn-info.faq{background:transparent;border:1px solid var(--border);color:var(--text);}
.toolbox .btn-info.faq:hover{background:var(--surface-2);color:var(--text);}

/* source filter buttons */
.filters .btn{border-radius:var(--radius-sm);font-weight:600;border:1px solid var(--border);}
.filters .btn.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);}
.filters .btn.btn-default{background:var(--surface-2);color:var(--muted);}

/* date-range trigger + radius spinbox */
#reportrange{background:var(--surface-2)!important;border:1px solid var(--border)!important;border-radius:var(--radius-sm)!important;color:var(--text)!important;}
.toolbox .spinbox-input{background:var(--surface-2);color:var(--text);border-color:var(--border);}
.toolbox .spinbox .btn-primary{background:var(--accent);border-color:var(--accent);}

/* --- search box + suggestions --------------------------------------- */
#pac-input{
  background:var(--surface);color:var(--text);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  box-shadow:var(--shadow);height:42px;font-family:var(--font);font-size:15px;
}
#pac-input::placeholder{color:var(--muted);}
#pac-input:focus{border-color:var(--accent);outline:none;}
.cl-suggest{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow);border-radius:0 0 var(--radius-sm) var(--radius-sm);}
.cl-suggest li{border-top-color:var(--border);color:var(--text);}
.cl-suggest li:hover{background:var(--surface-2);}

/* --- Leaflet popups (address info + hover preview) ------------------- */
.leaflet-popup-content-wrapper{background:var(--surface);color:var(--text);border-radius:var(--radius-sm);box-shadow:var(--shadow);}
.leaflet-popup-tip{background:var(--surface);}
.leaflet-popup-content{color:var(--text);}
.leaflet-popup-content a{color:var(--accent);}
#infowW b{color:var(--text);}
.leaflet-container a.leaflet-popup-close-button{color:var(--muted);}
.share-bar .s-icon{color:var(--muted);}

/* --- gallery info box ------------------------------------------------ */
.gl .gl-info{background:var(--surface);color:var(--text);border-radius:var(--radius-sm);}
.gl-info .gl-title{color:var(--accent);font-weight:600;}
.gl-info .gl-owner{color:var(--muted);}

/* --- below-the-map content: FAQ prose ------------------------------- */
#description{background:var(--bg);color:var(--text);padding:36px 0 6px;}
#description>.container{max-width:var(--maxw)!important;width:auto!important;margin:0 auto!important;padding:0 20px!important;}
#description .container .container{max-width:100%!important;width:auto!important;padding:0!important;margin:0!important;}
#description h2{font-size:1.35rem;line-height:1.25;letter-spacing:-.01em;margin:1.7rem 0 .5rem;color:var(--text);font-weight:700;}
#description h2:first-child{margin-top:0;}
#description p{color:var(--text);font-size:1.02rem;line-height:1.65;margin:.5rem 0;}
#description i{color:var(--muted);}
#description a{color:var(--accent);}
#description code{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:.1em .4em;font-size:.9em;color:var(--text);}
.faq-top .center-block{margin:18px auto;}

/* --- "more free online tools" grid ---------------------------------- */
#cl-tools{background:var(--bg);padding:6px 0 4px;}
#cl-tools .cl-wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
#cl-tools h2{font-size:1.35rem;margin:0 0 .7rem;color:var(--text);font-weight:700;letter-spacing:-.01em;}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;}
.tool-link{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;color:var(--text);font-weight:600;text-decoration:none;transition:border-color .15s,transform .1s;}
.tool-link:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none;color:var(--text);}
.tool-link span{display:block;color:var(--muted);font-weight:400;font-size:.85rem;margin-top:3px;}

/* --- footer --------------------------------------------------------- */
#footer{background:var(--bg);border-top:1px solid var(--border);margin-top:26px;padding:26px 0;color:var(--muted);text-align:center;font-size:.92rem;}
#footer .container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}
#footer p{margin:.35rem 0;color:var(--muted);}
#footer a{color:var(--muted);}
#footer a:hover{color:var(--accent);text-decoration:none;}

/* --- Leaflet zoom control (moved to bottom-right, clear of the bottom-left
       auto-anchor ad tab). Modern look + dark-mode aware. ------------------ */
.leaflet-control-zoom a{
  background:var(--surface);color:var(--text);border-color:var(--border)!important;
  width:36px;height:36px;line-height:34px;font-size:20px;
}
.leaflet-control-zoom a:hover{background:var(--surface-2);color:var(--accent);}
.leaflet-bar{box-shadow:var(--shadow);border-radius:var(--radius-sm);overflow:hidden;}
/* lift the bottom-right stack a touch so it never sits under a slim bottom ad */
.leaflet-bottom.leaflet-right{margin-bottom:6px;}

/* --- misc chrome ---------------------------------------------------- */
.spin-loader .dialog-loading-icon{background-color:var(--surface)!important;color:var(--accent);}
.modal-content{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);}
.modal-content .modal-title,.modal-content .modal-body{color:var(--text);}

/* Mobile keeps the classic full-screen map: the below-map content
   (#description + #footer) is already hidden by style.css — hide the tools grid
   too. The FAQ still opens via the "Info & F.A.Q" button (modal) and stays in
   the DOM for SEO. */
@media only screen and (max-width:767px){
  #cl-tools{display:none;}
  /* Mobile = full-screen map only (FAQ/tools/footer are hidden). Lock the page
     so nothing scrolls below the map and no dark strip can show. */
  html,body{overflow:hidden;}
}