@font-face {
    font-family: 'WorkSansRegular';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/WorkSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'WorkSansSemiBold';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/WorkSans-SemiBold.ttf') format('truetype');
}

*{padding: 0px; margin: 0px; list-style: none; border: 0px; -o-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -khtml-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-modify: read-only; outline: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}

  :root{
    --ink:#2A2230; --ink-dim:#8B8290;
    --panel:#FFFFFF; --line:#EDE4EB;
    --rose:#E8477A; --rose-deep:#C93465; --rose-tint:#FDEDF3; --rose-clear:#fff5f9;
  }

  html,body{height:100%;background:#F7F3F6;}
  body{font-family:'WorkSansRegular'; color:var(--ink); overflow:hidden;}

  .nav{
    position:absolute; top:0; left:0; right:0; height: 50px; z-index:1000;
    background:#1B1520; display: flex; align-items: center; justify-content:space-between; padding:0 25px;
  }
  .logo{font-family:'WorkSansSemiBold'; font-size:18px; color:#fff;}
  .logo i{color:var(--rose); font-size:18px; margin-right: 5px;}
  .logo span{color:var(--rose); font-family:'WorkSansSemiBold'; font-size:18px;}
  .nav-links{display:flex; gap: 25px;}
  .nav-links a{color:#B9AFC0; text-decoration:none; font-size: 15px;}
  .nav-links a.active{ color:#fff;}

  #map{position:absolute; top:50px; left:0; right:0; bottom:0;}
  .leaflet-control-zoom{display:none;}
  .leaflet-control-attribution{font-size:9px!important; background:rgba(255,255,255,0.7)!important;}

  .zoom-ctrl{
    position: absolute; left: 15px; bottom: 20px; z-index:900;
    display:flex; flex-direction:column; gap:1px;
    background:var(--panel); border-radius: 8px; overflow:hidden; box-shadow: 0 4px 16px rgba(42,34,48, 0.4);
  }
  .zoom-ctrl button{ width:38px; height:38px; border:none; background:var(--panel); color:var(--ink); font-size: 20px; cursor:pointer;}
  .zoom-ctrl button:hover{ background:var(--rose-tint); }
  .zoom-ctrl button:first-child{ border-bottom: 1px solid var(--line); }

  .stats{
    position: absolute; top: 68px; left: 15px; z-index:900;
    background: var(--rose-clear); border-radius: 12px; box-shadow: 0 8px 24px rgba(42,34,48, 0.3);
    padding: 15px; width: 180px;
  }
  .stat-row{display: flex; align-items:flex-start; gap: 8px; margin-bottom:16px;}
  .stat-row:last-child{margin-bottom:0;}
  .stat-icon{width: 25px; color:var(--rose-deep); font-size: 22px; }
  .stat-num{font-family:'WorkSansSemiBold'; font-size: 20px; line-height:1.1;}
  .stat-label{font-size:13px; color:var(--ink-dim); margin-top:3px;}
  .stat-label b{color:var(--rose-deep);}

  .legend{
    position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:900;
    background: var(--panel); border-radius: 100px; box-shadow:0 8px 24px rgba(42,34,48,0.2);
    padding: 10px 20px; display:flex; align-items:center; gap:20px; font-size:12px; color:var(--ink-dim);
  }
  .legend-item{display:flex; align-items:center; gap:8px;}
  .swatch{width: 10px; height: 10px; border-radius:50%;}
  .swatch.many{background:var(--rose-deep);}
  .swatch.some{background:#F6B9CF;}

  .leaflet-popup-content-wrapper{border-radius:12px; box-shadow:0 14px 32px rgba(42,34,48,0.2);}
  .leaflet-popup-content-wrapper .leaflet-popup-content{width: 100% !important;}
  .popup-love{font-family:'WorkSansRegular'; display: flex; align-items: center; gap: 14px; white-space: nowrap;}
  .popup-love img{width:110px; height: 110px; border-radius: 100%; object-fit: cover;}
  .popup-love .names{font-family:'WorkSansSemiBold'; font-size:16px; margin-bottom: 11px;}
  .popup-love .names i{color:var(--rose); font-size:14px;}
  .popup-love .meta{font-size:12px; color:var(--ink-dim); margin-bottom:5px;}
  .popup-love .meta i{font-size:13px; width: 16px; color:var(--rose);}
  .popup-love .view-link{display: block; margin-top: 11px; font-size:12px; font-weight:600; color:var(--rose-deep); text-decoration:none;}

  .pin-single{color:var(--rose-deep); font-size:20px; filter:drop-shadow(0 3px 4px rgba(0,0,0,0.2));}

  /* ---- Cluster styling (Leaflet.markercluster overrides) ---- */
  .marker-cluster{
    background:rgba(232,71,122,0.18) !important;
  }
  .marker-cluster div{
    background:var(--rose-deep) !important;
    color:#fff !important;
    font-family:'WorkSansRegular' !important;
    font-weight:700 !important;
    box-shadow:0 4px 10px rgba(201,52,101,0.4);
  }
  .marker-cluster.small div{background:#F6B9CF !important; color:var(--rose-deep) !important;}
  .marker-cluster span{line-height:inherit !important;}

  /* modal */
  .overlay{
    position:fixed; inset:0; z-index:2000; background:rgba(27,21,32,0.5); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .overlay.open{opacity:1; pointer-events:all;}
  .memory-card{
    width:430px; max-width:90vw; max-height:88vh; overflow-y:auto;
    background:var(--panel); border-radius: 6px; transform:translateY(16px) scale(0.98); transition:transform .25s ease;
  }
  .overlay.open .memory-card{transform:translateY(0) scale(1);}

  .mc-header{padding: 16px 15px 14px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between;}
  .mc-header .title{text-align: center; width: 100%;}
  .mc-header h2{font-family:'WorkSansSemiBold'; font-size:17px;}
  .mc-header .close{color:var(--ink-dim); cursor:pointer; font-size:18px;}
  .mc-body{padding:18px 16px 20px;}
  .step-label{font-size:12px; font-weight:600; color:var(--rose-deep); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;}
  .location-chip{
    display:flex; align-items:center; gap:10px; background:var(--rose-tint); border:1px solid #F4CFDE;
    border-radius:8px; padding:12px 14px; margin-bottom:10px;
  }
  .location-chip .pin{color:var(--rose-deep); font-size:18px;}
  .location-chip .coords{font-family:'WorkSansSemiBold'; font-size:13px;}
  .location-chip .place{font-size:13px; color:var(--ink-dim); margin-top:1px;}

  .field-row{display:flex; gap:10px; margin-bottom:18px;}
  .field{flex:1;}
  .field label{display:block; font-size:11.5px; color:var(--ink-dim); margin-bottom:6px;}
  .field input{width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px; font-family:'WorkSansRegular'; color:var(--ink);}
  .field input:focus{outline:none; border-color:var(--rose);}

  .date-hint{font-size:10.5px; color:var(--ink-dim); margin-top:5px;}
  .price-row{background:var(--rose-tint); border-radius:8px; padding:14px; margin-bottom:18px;}
  .price-row .top-line{display:flex; align-items:center; justify-content:space-between;}
  .price-row .lbl{font-size:12px; color:var(--ink-dim);}
  .price-row .amt{font-family:'WorkSansSemiBold'; font-size:18px; color:var(--rose-deep);}
  .price-row .sub{font-size:10.5px; color:var(--ink-dim); margin-top:2px;}
  .price-row .why-price{font-size:11px; line-height:1.5; color:var(--rose-deep); margin-top:10px; padding-top:10px; border-top:1px dashed #F0C3D6;}
  .btn-continue{width:100%; padding: 15px; border:none; border-radius:8px; background:var(--rose); color:#fff;
    font-size:15px; font-weight:600; cursor:pointer;}
  .btn-continue:hover{background:var(--rose-deep);}
  .btn-continue:disabled{opacity:0.6; cursor:not-allowed;}
  .error-msg{text-align: center; color:#C93465; font-size:14px; margin: 5px 0 20px; display:none;}

  @media (max-width: 820px){
    .nav{ width: 100%;
      display: block;
      height: 50px;
      padding: 14px 0;
    }
    .nav-links{display:none;}
    .logo{text-align: center;}
  }