/* =========================================================
   GLOBAL THEME TOKENS
   ========================================================= */
:root{
  --clr-primary:#e50914;
  --clr-bg:#f4f6f8;
  --clr-card:#fff;
  --clr-txt:#222;
  --clr-muted:#666;
  --rad:16px;
  --shadow:0 4px 12px rgba(0,0,0,.08);
  --font:"Inter","Open Sans",sans-serif;
}

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:var(--font);
  /* transition:background .25s,color .25s,border .25s; */
}

body{
  background:var(--clr-bg);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--clr-txt);
}

/* =========================================================
   TOP NAV BAR
   ========================================================= */
nav{
  display:flex;
  align-items:center;
  gap:1.4rem;
  background:var(--clr-card);
  padding:.75rem 1.8rem;
  box-shadow:var(--shadow);
  z-index:300;
}
nav h1{font-size:1.2rem;font-weight:600;color:var(--clr-txt)}
nav .grow{flex:1}
nav button,
nav .usage{
  display:inline-flex;align-items:center;gap:.4rem;
  border:1px solid #e0e0e0;
  background:transparent;
  padding:.45rem .9rem;
  border-radius:var(--rad);
  /* font-size:.8rem; */
  cursor:pointer;
  /* color:var(--clr-txt); */
  font-weight: 600;
  color: var(--clr-muted);
  font-size: .9rem;
}
nav button:hover{background:rgba(0,0,0,.05)}
nav .usage{cursor:default;border:none}

/* =========================================================
   PROGRESS BAR
   ========================================================= */
#progress{
  position:fixed;top:0;left:0;height:3px;width:0;
  background:var(--clr-primary);z-index:500;
}

/* =========================================================
   LAYOUT
   ========================================================= */
main{
  flex:1;
  display:grid;
  grid-template-columns:420px 1fr;
  gap:1.6rem;
  padding:1.6rem 2rem;
}
@media(max-width:900px){main{grid-template-columns:1fr}}

/* =========================================================
   CARD (generic)
   ========================================================= */
.card{
  background:var(--clr-card);
  box-shadow:var(--shadow);
  border-radius:var(--rad);
  padding:2rem;
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
section.title{
  font-weight:600;
  color:var(--clr-muted);
  font-size:.9rem;
  margin-bottom:-16px;
}

/* =========================================================
   PILLS & TOGGLE PILLS
   ========================================================= */
.pills{
  display:inline-flex;background:#e0e0e0;border-radius:var(--rad);overflow:hidden;width:100%;
}
.pills input{display:none}
.pills label{
  padding:.58rem 1.4rem;cursor:pointer;font-size:.85rem;
  border-right:1px solid #d0d0d0;width:100%;text-align:center;
}
.pills label:last-child{border-right:none}
.pills input:checked+label{background:var(--clr-primary);color:#fff}

.togglePills{display:flex;gap:.8rem;flex-wrap:wrap}
.togglePills input{display:none}
.togglePills label{
  padding:.55rem 1.2rem;border:1px solid #e0e0e0;border-radius:var(--rad);
  cursor:pointer;font-size:.85rem
}
.togglePills label:hover{background:rgba(0,0,0,.03)}
.togglePills input:checked+label{
  background:var(--clr-primary);color:#fff;border-color:var(--clr-primary);
}

/* =========================================================
   INPUTS
   ========================================================= */
label.title{font-weight:600;color:var(--clr-muted);font-size:.9rem}
.input,textarea{
  width:100%;padding:.68rem 1rem;border:1px solid #cfd8dc;
  border-radius:var(--rad);font-size:.9rem;background:var(--clr-card);
}
.input:focus,textarea:focus{
  outline:none;border-color:var(--clr-primary);
  box-shadow:0 0 0 2px rgba(229,9,20,.15);
}
textarea{resize:vertical;min-height:80px}
.input.thin{width:80px;text-align:center}

/* range */
.range-wrap{display:flex;align-items:center;gap:1rem}
input[type=range]{
  -webkit-appearance:none;width:100%;height:6px;border-radius:5px;background:#d0d0d0;outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--clr-primary);cursor:pointer;border:none;
}
input[type=range]::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--clr-primary);cursor:pointer;border:none;
}

/* =========================================================
   ESTIMATE BADGE
   ========================================================= */
#estimate{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:500;
  font-size:.95rem;background:rgba(0,0,0,.04);padding:.6rem 1rem;border-radius:var(--rad);
}

/* =========================================================
   MAIN ACTION BUTTON
   ========================================================= */
#submitBtn{
  background:var(--clr-primary);color:#fff;border:none;border-radius:var(--rad);
  padding:.9rem;font-size:1rem;font-weight:600;cursor:pointer;
}
#submitBtn:disabled{opacity:.45;cursor:not-allowed}
#submitBtn.loading{opacity:.7;pointer-events:none}

/* =========================================================
   MAP
   ========================================================= */
#map{
  height:100%;min-height:460px;width:100%;
  border-radius:var(--rad);box-shadow:var(--shadow);
  background-color: transparent;
}
.leaflet-control-clear{
  background:#fff;border:none;width:35px;height:35px;border-radius:16px;
  font-size:20px;font-weight:700;line-height:33px;text-align:center;color:#444;
}
.leaflet-control-clear:hover{background:#f4f4f4}

/* =========================================================
   MISC UTILS
   ========================================================= */
.hidden{display:none!important}

#maxLabel{
  font-weight:600;color:var(--clr-primary);font-size:.95rem;display:none;
  padding:.68rem 1rem;border:1px solid #cfd8dc;border-radius:var(--rad);
  background:var(--clr-card);width:97px;text-align:center;
}

/* =========================================================
   STATUS BAR
   ========================================================= */
#statusBar{
  position:fixed;bottom:0;left:0;width:100%;
  background:var(--clr-card);padding:.6rem 1rem;
  box-shadow:0 -2px 10px rgba(0,0,0,.12);
  display:flex;align-items:center;gap:.6rem;font-size:.9rem;
  z-index:9999;
  transform:translateY(110%);transition:transform .3s;
}
#statusBar.show{transform:translateY(0)}
#statusBar a{color:var(--clr-primary);text-decoration:underline}

/* =========================================================
   GENERIC BUTTON (.btn) & variants
   ========================================================= */
.btn{
align-items:center;gap:.4rem;
  padding:.6rem 1rem;font-size:.9rem;font-weight:500;
  border:none;border-radius:var(--rad);
  background:var(--clr-primary);color:#fff;cursor:pointer;
  transition:background .25s,opacity .25s;
}
.btn:hover:not(:disabled){background:rgba(229,9,20,.85)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-warning{background:#ffc107;color:#222}
.btn-warning:hover:not(:disabled){background:#e0a800}
.btn-success{background:#28a745}
.btn-success:hover:not(:disabled){background:#218838}

/* =========================================================
   TOOLTIP “?” ICON
   ========================================================= */
.qmark{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;background:#888;color:#fff;border-radius:50%;
  font-size:.65rem;font-weight:700;cursor:default;user-select:none;
  position:relative;
}
.qmark:hover::after{
  content:attr(data-tip);
  position:absolute;bottom:125%;left:50%;transform:translateX(-50%);
  background:#333;color:#fff;padding:.45rem .6rem;border-radius:6px;
  font-size:.75rem;white-space:pre-wrap;max-width:240px;
  z-index:2000;
  width:300px;                     /* ← your requested width */
}

/* =========================================================
   PILL WRAP for Advanced Queries
   ========================================================= */
.pillWrap{
  display:flex;align-items:center;gap:.5rem;margin:.35rem 0;
}
.pillWrap input{display:none}
.pillWrap label{
  padding:.55rem 1.1rem;border:1px solid #e0e0e0;
  border-radius:var(--rad);font-size:.85rem;cursor:pointer;
  user-select:none;
}
.pillWrap input:checked+label{
  background:var(--clr-primary);color:#fff;border-color:var(--clr-primary);
}

/* =========================================================
   ADVANCED-QUERY SECTION WRAPPER
   ========================================================= */
#advQueriesSection{
  margin-top:.6rem;
  display:flex;flex-direction:column;gap:.8rem;
}

/* =========================================================
   MODALS (token + custom-query)
   ========================================================= */
#tokenModal,
#advQueryModal{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:none;align-items:center;justify-content:center;
  z-index:1200;
}
#advQueryModal{z-index:1300}

#tokenModal .box,
#advQueryModal .box,
#checkoutModal .box{
  background:var(--clr-card);padding:2rem;border-radius:var(--rad);
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1.2rem;
}
#advQueryModal .box{width:360px}

#tokenModal input,
#advQueryModal input,
#advQueryModal textarea {
  padding: .75rem;
  border: 1px solid #cfd8dc;
  border-radius: var(--rad);
  width: 50ch;           /* Base width: 50 characters */
  max-width: 60vw;       /* Limit width on smaller screens */
  box-sizing: border-box;
}

#advQueryModal textarea{min-height:60px}

/* =========================================================
   CHECKOUT / PAYWALL MODAL
   ========================================================= */
#checkoutModal{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  display:none;align-items:center;justify-content:center;
  z-index:1400;
}
#checkoutModal.show{display:flex}
.checkout-box{width:380px;max-width:90vw;gap:1rem}
.checkout-sub{font-size:.9rem;color:var(--clr-muted);line-height:1.4}
.checkout-product{
  border:1px solid #e0e0e0;border-radius:var(--rad);padding:1rem;
  display:flex;flex-direction:column;gap:.5rem;
}
body.dark .checkout-product{border-color:#555}
.checkout-line{display:flex;justify-content:space-between;align-items:center;font-size:.92rem}
.checkout-line.muted{color:var(--clr-muted);font-size:.8rem}
.checkout-price{font-weight:700;color:var(--clr-txt)}
.checkout-box .btn{width:100%;padding:.8rem;font-size:1rem;justify-content:center;display:flex}
.checkout-secure{text-align:center;font-size:.75rem;color:var(--clr-muted)}
.checkout-center{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;padding:1rem 0}
.checkout-check{
  width:56px;height:56px;border-radius:50%;background:#28a745;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;
}
.spinner{
  width:40px;height:40px;border:4px solid #e0e0e0;border-top-color:var(--clr-primary);
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   DARK THEME OVERRIDES
   ========================================================= */
body.dark{
  --clr-bg:#202124;
  --clr-card:#2e2f31;
  --clr-txt:#e8eaed;
  --clr-muted:#9aa0a6;
}
body.dark .pills{background:#3b3c3e}
body.dark .pills label{border-color:#444}
body.dark .togglePills label{border-color:#555}
body.dark .togglePills label:hover{background:rgba(255,255,255,.06)}
body.dark .input,
body.dark textarea{background:#202124;border-color:#555}
body.dark input[type=range]{background:#555}
/* instant tile switch, no fade */
.leaflet-tile       { transition: none !important; }

/* =========================================================
   LOGO CIRCLE
   ========================================================= */
.logo{
  display:flex;align-items:center;justify-content:center;
  background:var(--clr-primary);color:#fff;
  min-width:40px;min-height:40px;border-radius:50%;
}

input,
textarea {
  color: var(--clr-txt);
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  min-width: 60px;
}

.switch #input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2196f3;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  z-index: 0;
  overflow: hidden;
}

.sun-moon {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: yellow;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

#input:checked + .slider {
  background-color: black;
}

#input:focus + .slider {
  box-shadow: 0 0 1px #2196f3;
}

#input:checked + .slider .sun-moon {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
  background-color: white;
  -webkit-animation: rotate-center 0.6s ease-in-out both;
  animation: rotate-center 0.6s ease-in-out both;
}

.moon-dot {
  opacity: 0;
  transition: 0.4s;
  fill: gray;
}

#input:checked + .slider .sun-moon .moon-dot {
  opacity: 1;
}

.slider.round {
  border-radius: 34px;
}

.slider.round .sun-moon {
  border-radius: 50%;
}

#moon-dot-1 {
  left: 10px;
  top: 3px;
  position: absolute;
  width: 6px;
  height: 6px;
  z-index: 4;
}

#moon-dot-2 {
  left: 2px;
  top: 10px;
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 4;
}

#moon-dot-3 {
  left: 16px;
  top: 18px;
  position: absolute;
  width: 3px;
  height: 3px;
  z-index: 4;
}

#light-ray-1 {
  left: -8px;
  top: -8px;
  position: absolute;
  width: 43px;
  height: 43px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

#light-ray-2 {
  left: -50%;
  top: -50%;
  position: absolute;
  width: 55px;
  height: 55px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

#light-ray-3 {
  left: -18px;
  top: -18px;
  position: absolute;
  width: 60px;
  height: 60px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

.cloud-light {
  position: absolute;
  fill: #eee;
  animation-name: cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

.cloud-dark {
  position: absolute;
  fill: #ccc;
  animation-name: cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

#cloud-1 {
  left: 30px;
  top: 15px;
  width: 40px;
}

#cloud-2 {
  left: 44px;
  top: 10px;
  width: 20px;
}

#cloud-3 {
  left: 18px;
  top: 24px;
  width: 30px;
}

#cloud-4 {
  left: 36px;
  top: 18px;
  width: 40px;
}

#cloud-5 {
  left: 48px;
  top: 14px;
  width: 20px;
}

#cloud-6 {
  left: 22px;
  top: 26px;
  width: 30px;
}

@keyframes cloud-move {
  0% {
    transform: translateX(0px);
  }

  40% {
    transform: translateX(4px);
  }

  80% {
    transform: translateX(-4px);
  }

  100% {
    transform: translateX(0px);
  }
}

.stars {
  transform: translateY(-32px);
  opacity: 0;
  transition: 0.4s;
}

.star {
  fill: white;
  position: absolute;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  animation-name: star-twinkle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#input:checked + .slider .stars {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}

#star-1 {
  width: 20px;
  top: 2px;
  left: 3px;
  animation-delay: 0.3s;
}

#star-2 {
  width: 6px;
  top: 16px;
  left: 3px;
}

#star-3 {
  width: 12px;
  top: 20px;
  left: 10px;
  animation-delay: 0.6s;
}

#star-4 {
  width: 18px;
  top: 0px;
  left: 18px;
  animation-delay: 1.3s;
}

@keyframes star-twinkle {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.2);
  }

  80% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}