@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{ --brand:#006FB9; --brand-alt:#25A1D5; --heading:#1F2C33; --text:#45505F; --primary-bg:#F7FAFD; --white:#FFFFFF; --border:#E7ECEE; --amber:#E6A445; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--white); font-family:'Inter',sans-serif; color:var(--text); font-size:16px; line-height:1.6; }
.bly{ max-width:1180px; margin:0 auto; background:var(--white); }

.bly-hero{ position:relative; height:240px; overflow:hidden; }
.bly-hero img{ width:100%; height:100%; object-fit:cover; object-position:center 62%; display:block; }
.bly-hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(31,44,51,0.10) 0%, rgba(31,44,51,0.62) 100%); }
.bly-hero-content{ position:absolute; left:0; bottom:0; padding:26px 40px; color:white; }
.bly-hero-eyebrow{ font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:#cfe8f7; margin-bottom:7px; }
.bly-hero h1{ font-weight:600; font-size:36px; line-height:1.1; margin:0; letter-spacing:-0.01em; }
.bly-hero-sub{ font-size:16px; margin-top:8px; max-width:620px; color:#eef6fb; }
@media (max-width:700px){ .bly-hero{ height:190px; } .bly-hero-content{ padding:18px 20px; } .bly-hero h1{ font-size:24px; } .bly-hero-sub{ font-size:13.5px; } }

.section{ padding:26px 40px 6px; }
@media (max-width:700px){ .section{ padding:20px 16px 4px; } }
.section h2{ font-weight:600; font-size:22px; color:var(--heading); margin:0 0 4px; letter-spacing:-0.01em; }
.section .sub{ font-size:14.5px; color:var(--text); margin:0 0 16px; }

.trigger-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:800px){ .trigger-grid{ grid-template-columns:1fr; } }
.trigger{ border:1px solid var(--border); border-radius:12px; padding:16px 18px; cursor:pointer; transition:all .15s ease; background:white; }
.trigger:hover{ border-color:var(--brand-alt); box-shadow:0 6px 18px rgba(37,161,213,0.14); }
.trigger.active{ border-color:var(--brand); box-shadow:0 6px 18px rgba(0,111,185,0.16); }
.trigger h3{ font-weight:600; font-size:17px; color:var(--brand); margin:0 0 6px; }
.trigger .meta{ font-size:13px; color:var(--text); }

.builder{ background:var(--primary-bg); border:1px solid var(--border); border-radius:14px; padding:22px 24px; margin-top:8px; }
.builder-row{ display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:11.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--brand); }
.field select{ appearance:none; border:1px solid var(--border); border-radius:9px; padding:11px 36px 11px 14px; font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; color:var(--heading); background:white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%23006FB9" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') no-repeat right 13px center; cursor:pointer; min-width:190px; }
.btn{ font-family:'Inter',sans-serif; font-weight:600; font-size:14px; border-radius:8px; padding:11px 20px; cursor:pointer; border:1.5px solid transparent; transition:all .15s ease; }
.btn-primary{ background:var(--brand); color:white; border-color:var(--brand); box-shadow:0 4px 14px rgba(0,111,185,0.3); }
.btn-primary:hover{ background:#0863a3; }
.btn-secondary{ background:white; color:var(--brand); border-color:var(--brand); }
.btn-secondary:hover{ background:var(--primary-bg); }

.route-summary{ margin-top:16px; font-size:14px; color:var(--heading); background:white; border:1px solid var(--border); border-radius:10px; padding:14px 16px; display:none; }
.route-summary.show{ display:block; }
.route-summary b{ color:var(--brand); }
.route-summary .warn{ color:#a85d1e; }

.bly-map-section{ padding:20px 40px 10px; }
@media (max-width:700px){ .bly-map-section{ padding:14px 16px 6px; } }
.bly-map-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; flex-wrap:wrap; }
.bly-map-toolbar h3{ font-weight:600; font-size:19px; color:var(--heading); margin:0; }
.bly-map-toolbar .hint{ font-size:13.5px; color:var(--text); }
.bly-map-buttons{ display:flex; gap:10px; }
.bly-map{ width:100%; height:560px; border-radius:10px; border:1px solid var(--border); overflow:hidden; }
@media (max-width:820px){ .bly-map{ height:460px; } }
@media (max-width:500px){ .bly-map{ height:420px; } }

.bly-cta{ margin:22px 40px 40px; background:var(--primary-bg); border:1px solid var(--border); border-radius:12px; padding:24px 30px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.bly-cta-text h3{ font-weight:600; font-size:20px; color:var(--heading); margin:0 0 4px; }
.bly-cta-text p{ font-size:15px; color:var(--text); margin:0; }
@media (max-width:700px){ .bly-cta{ margin:18px 16px 30px; padding:20px; } .bly-cta .btn{ width:100%; } }
.bly-note{ padding:0 40px 30px; font-size:12px; color:#8a94a0; }
@media (max-width:700px){ .bly-note{ padding:0 16px 24px; } }

.pin-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; cursor:pointer; }
.pin-dot{ width:26px; height:26px; border-radius:50%; background:var(--brand); border:3px solid white; box-shadow:0 2px 8px rgba(0,111,185,0.5); display:flex; align-items:center; justify-content:center; color:white; font-size:12px; font-weight:700; transition:all .2s ease; }
.pin-wrap:hover .pin-dot, .pin-dot.active{ background:var(--brand-alt); transform:scale(1.18); box-shadow:0 0 0 7px rgba(37,161,213,0.22); }
.pin-label{ position:absolute; top:32px; background:white; border:1px solid var(--border); border-radius:6px; padding:2px 8px; font-size:11.5px; font-weight:600; color:var(--heading); white-space:nowrap; box-shadow:0 2px 6px rgba(31,44,51,0.15); opacity:0; pointer-events:none; transition:opacity .15s ease; }
.pin-wrap:hover .pin-label{ opacity:1; }
.bly-boat-icon{ filter:drop-shadow(0 3px 5px rgba(0,0,0,0.35)); transform-origin:15px 20px; transition:transform .15s linear; }

.leaflet-popup-content-wrapper{ border-radius:12px; padding:0; overflow:hidden; box-shadow:0 8px 30px rgba(31,44,51,0.25); }
.leaflet-popup-content{ margin:0; width:250px !important; font-family:'Inter',sans-serif; }
.pop-photo{ height:130px; width:100%; object-fit:cover; display:block; border-bottom:1px solid var(--border); }
.pop-body{ padding:14px 16px 16px; }
.pop-badge{ display:inline-block; background:var(--amber); color:white; font-size:9.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; border-radius:5px; padding:2px 7px; margin-bottom:7px; }
.pop-body h4{ font-weight:600; font-size:16px; color:var(--heading); margin:0 0 6px; }
.pop-time{ font-size:12.5px; color:var(--brand); font-weight:600; margin:0 0 9px; line-height:1.45; }
.pop-body p{ font-size:13px; color:var(--text); margin:0 0 11px; line-height:1.5; }
.pop-links a{ display:inline-block; font-size:12.5px; color:var(--brand); font-weight:600; text-decoration:none; margin:0 14px 4px 0; }
.pop-links a:hover{ text-decoration:underline; }

/* ---- Open water ---- */
.summary-openwater{ margin-top:12px; padding:12px 14px; background:#fdf4e7; border:1px solid #f0d9b5; border-radius:9px; font-size:13px; color:#8a5a1e; line-height:1.5; }
.ow-badge{ display:inline-block; background:var(--amber); color:white; font-size:11px; font-weight:700; border-radius:5px; padding:2px 8px; margin-right:6px; }
.pop-openwater{ background:#fdf4e7; border:1px solid #f0d9b5; border-radius:7px; padding:7px 9px; font-size:11.5px; color:#8a5a1e; font-weight:600; margin:0 0 9px; line-height:1.4; }
.mini-ow{ color:var(--amber); font-size:14px; }

/* ---- Dagindeling ---- */
.day-plan{ margin-top:16px; }
.day-plan-head{ font-weight:600; font-size:14px; color:var(--heading); margin-bottom:10px; }
.day-note{ font-size:13px; color:var(--text); }
.day-list{ display:flex; flex-direction:column; gap:8px; }
.day-item{ display:flex; gap:12px; align-items:center; background:white; border:1px solid var(--border); border-radius:10px; padding:11px 14px; }
.day-num{ flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--brand); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; }
.day-body{ font-size:13.5px; color:var(--text); line-height:1.45; }
.day-body b{ color:var(--heading); }
.day-route{ color:var(--brand); font-weight:600; font-size:12.5px; }