:root{
  --bg:#f3f7f1;
  --card:#ffffff;
  --ink:#10130f;
  --muted:#66705f;
  --line:rgba(16,19,15,.14);
  --soft:#f7f8f3;
  --green:#18864b;
  --shadow:0 14px 34px rgba(28,38,22,.10);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:800;
}
a{color:inherit}

/* Landing */
.landing{min-height:100vh;display:grid;place-items:center;padding:16px;max-width:100%;overflow-x:hidden}
html:has(body.landing),body.landing{max-width:100%;overflow-x:hidden}
.landing-shell{width:min(920px,100%);max-width:100%;background:#fff;border:1px solid var(--line);border-radius:34px;padding:34px;box-shadow:0 18px 60px rgba(28,38,22,.10)}
.landing-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;min-width:0}
.landing-head__actions{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.landing-login-btn{text-decoration:none;color:inherit}
.landing-shell h1{font-size:clamp(26px,6.4vw,54px);line-height:1;letter-spacing:-.04em;margin:20px 0 10px;overflow-wrap:anywhere;word-break:break-word;hyphens:auto;max-width:100%}
.landing-shell p{color:var(--muted);font-weight:850;overflow-wrap:anywhere}
@media(max-width:430px){
  .landing{padding:10px}
  .landing-shell{padding:20px 16px;border-radius:26px}
  .brand-pill{padding:6px 14px 6px 48px;font-size:13px;min-height:38px}
  .brand-flag{font-size:38px}
  img.brand-flag{width:46px;height:46px}
  .landing-head__actions{gap:6px}
  .round-btn{width:36px;height:36px;font-size:19px}
}


.country-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:22px}
.country-card{position:relative;display:grid;gap:7px;text-decoration:none;border:1px solid var(--line);border-radius:24px;padding:24px 110px 24px 22px;background:var(--soft);box-shadow:0 8px 18px rgba(16,19,15,.04);transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease}
.country-card:hover{background:#10130f;color:#fff;transform:translateY(-1px);box-shadow:0 14px 26px rgba(16,19,15,.12)}
.country-card__flag,.country-card__code{display:none}
.country-card__flag-img{position:absolute;right:18px;top:50%;transform:translateY(-50%);width:68px;height:44px;object-fit:cover;border-radius:4px;background:#fff;box-shadow:0 8px 18px rgba(16,19,15,.10);overflow:hidden;border:1px solid rgba(16,19,15,.10)}
.country-card__code-badge{position:absolute;right:92px;top:50%;transform:translateY(-50%);display:block;color:#10130f;font-size:13px;font-weight:1000;letter-spacing:.075em;line-height:1}
.country-card:hover .country-card__code-badge{color:#fff}
.country-card b{font-size:24px;line-height:1.05;padding-right:0}.country-card small{color:var(--muted)}.country-card:hover small{color:rgba(255,255,255,.78)}
@media(max-width:520px){.country-card{padding-right:104px}.country-card__flag-img{right:14px;width:60px;height:38px}.country-card__code-badge{right:80px;font-size:12px}}

/* Brand */
.brand-pill,.logo{
  position:relative;
  overflow:visible;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  background:#10130f;
  color:#fff;
  border-radius:999px;
  padding:8px 18px 8px 54px;
  border:1px solid rgba(255,255,255,.16);
  font-weight:1000;
  text-decoration:none;
  letter-spacing:.045em;
}
.brand-flag{position:absolute;left:-12px;top:50%;transform:translateY(-50%);font-size:44px;line-height:1;z-index:3;filter:drop-shadow(0 5px 10px rgba(0,0,0,.24));pointer-events:none}
img.brand-flag{width:54px;height:54px;font-size:0;border-radius:50%;object-fit:cover}
.logo .brand-flag{font-size:42px;left:-11px}
.logo img.brand-flag{width:50px;height:50px}

/* Header */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  width:100%;
  margin:0;
  display:grid;
  grid-template-columns:auto minmax(220px,1fr) auto auto auto auto;
  gap:10px;
  align-items:center;
  padding:10px 18px;
  background:rgba(255,255,255,.94);
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:0 10px 30px rgba(28,38,22,.08);
  backdrop-filter:blur(12px);
}
.search,.select,input{border:1px solid var(--line);border-radius:999px;background:#fff;padding:11px 13px;font:inherit;font-size:13px;min-width:0}
.admin-btn,.primary,.close-small{border:0;border-radius:999px;background:#10130f;color:#fff;padding:11px 14px;font:inherit;font-size:13px;cursor:pointer}.primary{background:var(--green)}
.round-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-size:22px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0;text-decoration:none}
.dropdown{position:relative}.dropdown-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:300;display:none;min-width:180px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 14px 34px rgba(28,38,22,.16)}.dropdown.open .dropdown-panel{display:grid}.dropdown-panel button,.dropdown-panel a{border:0;background:transparent;text-align:left;border-radius:12px;padding:10px 12px;font:inherit;font-size:13px;text-decoration:none;cursor:pointer}.dropdown-panel button:hover,.dropdown-panel button.active,.dropdown-panel a:hover{background:#10130f;color:#fff}
.dropdown-panel-title{padding:10px 12px 7px;font-size:11px;font-weight:1000;letter-spacing:.08em;text-transform:uppercase;color:#66705f;border-bottom:1px solid var(--line);margin:0 0 4px;pointer-events:none}


/* Main layout */
.wrap{width:min(1500px,calc(100vw - 24px));margin:10px auto 80px}
.public-tabs{display:flex;gap:8px;margin:14px 0}.public-tab,.admin-tab{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 14px;font:inherit;font-size:13px;cursor:pointer}.public-tab.active,.admin-tab.active{background:#10130f;color:#fff}
.view{display:none}.view.active{display:block}h1{font-size:38px;letter-spacing:-.06em;margin:14px 0 14px}
.cards-grid,.events-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}

/* Cards */
.card,.event-card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:var(--shadow);cursor:pointer}
.preview,.event-map{position:relative;height:170px;overflow:hidden;background:#dbe4d3}
.preview img,.event-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card-map-tile{opacity:0;transition:opacity .18s ease}
.card-map-tile.is-ready{opacity:1}
.card-map-tile.is-fallback{filter:saturate(.92) contrast(.98)}
.radar-tile{z-index:2;opacity:.55;mix-blend-mode:multiply;pointer-events:none}
.pin{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-100%) rotate(-45deg);background:#111;border:2px solid #fff;border-radius:50% 50% 50% 0;z-index:5}
.preview .wind-arrow-chip{position:absolute;top:10px;right:10px;left:auto;bottom:auto;z-index:6;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:rgba(255,255,255,.92);border:1px solid rgba(16,19,15,.12);box-shadow:0 6px 14px rgba(0,0,0,.08)}
.wind-arrow{display:inline-block;font-size:18px;line-height:1;color:var(--green);transform:rotate(var(--wind-deg,0deg))}
.caption{position:absolute;left:0;right:0;bottom:0;color:#fff;padding:30px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.68));z-index:5}
.body,.event-body{padding:13px 0 10px}.body h3,.event-body h3{font-size:20px;line-height:1.05;margin:0 0 4px;padding:0 13px}.body p,.event-address{font-size:11px;color:var(--muted);margin:0 0 10px;padding:0 13px}.body .badge-grid,.event-body .badge-grid,.body .forecast-strip,.event-body .forecast-strip{padding:0}

/* Events */
.event-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}.event-link{display:grid;place-items:center;min-height:42px;border-radius:14px;background:#10130f;color:#fff;text-decoration:none;font-size:13px}.event-link.secondary{background:#fff;color:#10130f;border:1px solid #10130f}

/* Rankings */
.rank-panel{background:#fff;border:1px solid var(--line);border-radius:24px;padding:18px}.rank-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.rank-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.rank-box{border:1px solid var(--line);border-radius:18px;overflow:hidden}.rank-box h2{margin:0;padding:12px;background:#10130f;color:#fff;font-size:14px}.rank-row{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:start;padding:10px;border-bottom:1px solid rgba(16,19,15,.08);cursor:pointer}.rank-row:hover{background:#eef9f1}.rank-index{display:flex;flex-direction:column;align-items:center;gap:6px}.rank-index__num{font-weight:700;font-size:14px}.rank-name b,.rank-name span,.rank-address-link{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-name span,.rank-address-link{font-size:11px;color:var(--muted);text-decoration:none}.rank-value{font-size:12px;background:#eef9f1;border:1px solid #bfe3ca;border-radius:999px;padding:5px 8px;text-align:center;display:inline-flex;flex-direction:column;align-items:center;gap:2px}

/* Dialog */
.detail-dialog{width:min(1420px,calc(100vw - 22px));height:min(920px,calc(100vh - 22px));border:0;border-radius:28px;padding:0;overflow:hidden}.detail-dialog::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(5px)}.detail-layout{display:grid;grid-template-columns:1.3fr .7fr;height:100%;background:#fff}.detail-map-side{position:relative;background:#dbe4d3}#detailMap{position:absolute;inset:0}.close-btn{position:absolute;right:14px;top:14px;z-index:600;width:44px;height:44px;border:0;border-radius:16px;background:#fff;font-size:26px}.wind-only{position:absolute;right:14px;top:68px;z-index:600;width:42px;height:42px;background:#fff;border-radius:999px;display:grid;place-items:center;color:var(--green);font-size:24px}.map-caption{position:absolute;left:0;right:0;bottom:0;z-index:600;color:#fff;padding:36px 16px 14px;background:linear-gradient(transparent,rgba(0,0,0,.72))}.detail-info{padding:16px;overflow:auto}.detail-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.summary-cell,.accordion details{border:1px solid var(--line);background:var(--soft);border-radius:13px;padding:8px}.accordion{display:grid;gap:7px}

/* Tables/Admin */
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}.table-wrap.tall{height:calc(100vh - 230px)}table{border-collapse:collapse;min-width:980px;width:100%;font-size:11px}th{background:#111;color:#fff;text-align:left;padding:7px;white-space:nowrap}td{border-bottom:1px solid rgba(16,19,15,.08);padding:7px;white-space:nowrap}.data-table input{width:100%;border-radius:10px;padding:8px 9px;font-size:12px}.data-table input[type="checkbox"]{width:auto}
.admin-panel{position:fixed;inset:8px;z-index:1000;background:#fff;border:1px solid var(--line);border-radius:22px;display:none;overflow:hidden}.admin-panel.open{display:block}body.admin-lock{overflow:hidden;height:100vh}.admin-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}.admin-tabs{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line);overflow:auto}.admin-view{display:none;padding:10px}.admin-view.active{display:block}.admin-actions{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}.admin-notice{margin:8px 10px 0;border:1px solid #f2d48a;background:#fff5d8;border-radius:14px;padding:9px 10px;color:#6d5b2f;font-size:12px}.translation-table th:first-child,.translation-table td:first-child{position:sticky;left:0;background:#fff;z-index:2}.translation-table th:first-child{background:#111}

/* Radar footer */
.radar-footer{position:sticky;bottom:0;z-index:45;width:100%;margin:0;background:rgba(255,255,255,.94);border:0;border-top:1px solid var(--line);border-radius:0;padding:8px 18px;display:grid;gap:6px;box-shadow:0 -8px 26px rgba(28,38,22,.08);backdrop-filter:blur(12px)}.rankings-open .radar-footer{display:none}.radar-footer-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.radar-footer-head b{white-space:nowrap}.radar-time-controls{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;font-size:14px;color:var(--muted)}.radar-time-controls button{border:1px solid var(--line);background:#fff;color:#10130f;border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;font-weight:1000;cursor:pointer}.radar-time-controls button:hover{background:#10130f;color:#fff}.radar-time-controls button:disabled,.radar-time-controls button[disabled]{background:#f1f1f1;color:#9aa0a6;border-color:#e4e4e4;cursor:not-allowed;opacity:.6}.radar-time-controls button:disabled:hover,.radar-time-controls button[disabled]:hover{background:#f1f1f1;color:#9aa0a6}.radar-time-controls strong{color:#10130f}.scale{display:grid;grid-template-columns:repeat(8,1fr);height:10px;border-radius:999px;overflow:hidden;margin:2px 0}.scale span:nth-child(1){background:#cfe8ff}.scale span:nth-child(2){background:#6bbcff}.scale span:nth-child(3){background:#2693ff}.scale span:nth-child(4){background:#31d0bd}.scale span:nth-child(5){background:#69d84a}.scale span:nth-child(6){background:#ffe45c}.scale span:nth-child(7){background:#ffad33}.scale span:nth-child(8){background:#f04b3a}.scale-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;font-size:10px;color:#10130f;font-weight:950}.scale-labels span:nth-child(1){text-align:left}.scale-labels span:nth-child(2),.scale-labels span:nth-child(3){text-align:center}.scale-labels span:nth-child(4){text-align:right}
.radar-footer-handle{display:none;}

@media(max-width:900px){.country-grid{grid-template-columns:1fr}.dropdown{justify-self:end}.radar-footer-head{display:grid;gap:5px}.radar-time-controls{justify-content:flex-start;gap:5px}.scale-labels{font-size:9px;gap:4px}}
@media(max-width:640px){
  .radar-footer-handle{position:absolute;top:6px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;cursor:pointer;padding:0;z-index:2;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.1)}
  .radar-footer-handle__bar{display:none}
  .radar-footer-handle__icon{width:16px;height:16px;color:var(--muted);opacity:.55;transition:transform .25s ease}
  .radar-footer.is-expanded .radar-footer-handle__icon{transform:rotate(180deg)}
  .radar-footer:not(.is-expanded){padding:4px 0 !important;gap:0 !important;max-height:40px !important;min-height:40px !important;overflow:hidden}
  .radar-footer:not(.is-expanded) .radar-footer-head,
  .radar-footer:not(.is-expanded) .forecast-scale-panel{display:none !important}
}
@media(max-width:360px){}

/* Course info blocks in card popup */
.course-info-blocks{
  grid-column:1 / -1;
  display:grid;
  gap:7px;
  margin-top:2px;
}
.course-info-block{
  border:1px solid var(--line);
  background:#fff;
  border-radius:13px;
  padding:9px;
}
.course-info-block h3{
  margin:0 0 4px;
  font-size:13px;
  line-height:1.1;
  letter-spacing:-.02em;
}
.course-info-block p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  white-space:pre-wrap;
}

/* Fixed shell: header and radar footer stay attached to viewport edges */
html{
  overflow-x:hidden;
}
body{
  overflow-x:hidden;
  padding-top:0;
  padding-bottom:0;
}
body:has(.topbar){
  padding-top:62px;
}
body:has(.radar-footer){
  padding-bottom:82px;
}
.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-top:0 !important;
  z-index:1200 !important;
}
.radar-footer{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  border-radius:0 !important;
  border-left:0 !important;
  border-right:0 !important;
  border-bottom:0 !important;
  z-index:1150 !important;
}
.wrap{
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.admin-panel{
  z-index:1300 !important;
}
.detail-dialog{
  max-height:calc(100vh - 92px);
  margin-top:62px;
}
.detail-dialog[open]{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  z-index:60;
}
body.popup-open::before{
  content:"";
  position:fixed;
  inset:0 0 82px 0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(5px);
  z-index:40;
  pointer-events:none;
}
.detail-dialog::backdrop{
  margin-top:62px;
  margin-bottom:82px;
}
@media(max-width:900px){
  body:has(.topbar){
    padding-top:218px;
  }
  body:has(.radar-footer){
    padding-bottom:118px;
  }
  .topbar{
    grid-template-columns:1fr !important;
    align-items:stretch !important;
    border-radius:0 !important;
  }
  .topbar .logo,
  .topbar .search,
  .topbar .select,
  .topbar .admin-btn{
    width:100%;
  }
  .topbar .dropdown{
    justify-self:end;
  }
  .radar-footer{
    max-height:118px;
    overflow:hidden;
  }
  .detail-dialog{
    max-height:calc(100vh - 118px - 218px);
    margin-top:218px;
  }
  .detail-dialog::backdrop{
    margin-top:218px;
    margin-bottom:118px;
  }
}
@media(max-width:520px){
  body:has(.topbar){
    padding-top:236px;
  }
  .detail-dialog{
    margin-top:236px;
    max-height:calc(100vh - 118px - 236px);
  }
  .detail-dialog::backdrop{
    margin-top:236px;
  }
}

/* Keep footer scale compact and readable when fixed */
.radar-footer-head{
  min-width:0;
}
.radar-time-controls{
  min-width:0;
}
.scale-labels{
  white-space:nowrap;
}


/* Radar footer: one badge opens one dropup */
.radar-source-picker{
  position:relative;
  display:inline-block;
}
.radar-source-button{
  border:1px solid var(--line);
  background:#10130f;
  color:#fff;
  border-radius:999px;
  padding:7px 12px;
  font:inherit;
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
  white-space:nowrap;
}
.radar-source-menu{
  position:absolute;
  left:0;
  bottom:calc(100% + 8px);
  z-index:1600;
  min-width:280px;
  max-width:min(440px,calc(100vw - 24px));
  display:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:6px;
  box-shadow:0 -14px 34px rgba(28,38,22,.18);
}
.radar-menu-open .radar-source-menu{
  display:grid;
  gap:4px;
}
.radar-source-menu button{
  border:0;
  background:transparent;
  text-align:left;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  color:#10130f;
}
.radar-source-menu button.active,
.radar-source-menu button:hover{
  background:#10130f;
  color:#fff;
}
.radar-source-menu b{
  display:block;
  font-size:13px;
}
.radar-source-menu small{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
  line-height:1.25;
}
.radar-source-menu button.active small,
.radar-source-menu button:hover small{
  color:rgba(255,255,255,.72);
}

/* Course info must not sit on top of popup badges */
.detail-course-info{
  margin-top:16px;
}
.detail-course-info .course-info-empty,
.detail-course-info .course-info-blocks{
  margin-top:0;
}
.course-info-blocks{
  display:grid;
  gap:10px;
}
.course-info-block,
.course-info-block h3{
  margin:0 0 5px;
  font-size:14px;
  line-height:1.1;
}
.course-info-block p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  white-space:pre-wrap;
}

/* Course info admin: repeatable multilingual rows */
.course-info-table th,
.course-info-table td{
  vertical-align:top;
}
.course-info-table input[type="checkbox"]{
  width:auto;
}
.course-info-table .is-empty-row{
  background:#fbfcf7;
}
.course-info-table small{
  color:var(--muted);
  font-weight:850;
}
.mini-plus{
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:#10130f;
  color:#fff;
  font:inherit;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.mini-plus:hover{
  background:var(--green);
}


/* Course info language-row model */
.course-info-table th,
.course-info-table td{
  vertical-align:top;
}
.course-info-table input[type="checkbox"]{
  width:auto;
}
.course-info-table .is-empty-row{
  background:#fbfcf7;
}
.course-info-table small{
  color:var(--muted);
  font-weight:850;
}
.mini-plus{
  width:34px;
  height:34px;
  border:0;
  border-radius:999px;
  background:#10130f;
  color:#fff;
  font:inherit;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.mini-plus:hover{
  background:var(--green);
}


/* Free-form course info editor */
.admin-inline-help{
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.course-info-admin{
  display:grid;
  gap:12px;
  height:calc(100vh - 182px);
  overflow:auto;
  padding-right:4px;
}
.course-info-course{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}
.course-info-course__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px;
  background:#f7f8f3;
  border-bottom:1px solid var(--line);
}
.course-info-course__head small{
  display:block;
  color:var(--muted);
  font-size:11px;
  margin-top:2px;
}
.course-info-empty-row{
  padding:12px;
  color:var(--muted);
  font-size:12px;
}
.course-info-edit-block{
  padding:10px;
  border-bottom:1px solid rgba(16,19,15,.08);
}
.course-info-edit-block:last-child{
  border-bottom:0;
}
.course-info-edit-block__head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.course-info-edit-block__head label{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  color:var(--muted);
}
.course-info-edit-block__head input{
  max-width:90px;
}
.checkline input{
  width:auto;
}
.danger-small,
.translate-btn{
  border:1px solid var(--line);
  background:#fff;
  color:#10130f;
  border-radius:999px;
  padding:7px 10px;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.danger-small:hover{
  background:#301010;
  color:#fff;
}
.translate-btn:hover{
  background:#10130f;
  color:#fff;
}
.translate-btn:disabled{
  opacity:.55;
  cursor:wait;
}
.course-info-lang-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:10px;
}
.course-info-lang-box{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfcf7;
  padding:10px;
  display:grid;
  gap:8px;
}
.course-info-lang-box__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.course-info-lang-box label{
  display:grid;
  gap:4px;
  font-size:11px;
  color:var(--muted);
}
.course-info-lang-box textarea{
  width:100%;
  min-height:160px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  font:inherit;
  font-size:12px;
  line-height:1.35;
  background:#fff;
  color:#10130f;
  white-space:pre-wrap;
}
.course-info-lang-box input{
  width:100%;
  border-radius:12px;
}
.course-info-lang-box small{
  color:var(--muted);
  font-size:10px;
}

/* Prevent RainViewer unsupported zoom text from visually dominating if a provider returns text instead of a transparent image */
.radar-tile{
  background:transparent;
}


/* Admin weather/radar cache tables */
.admin-cache-note{
  margin:8px 0 10px;
  border:1px solid #f2d48a;
  background:#fff5d8;
  border-radius:14px;
  padding:9px 10px;
  color:#6d5b2f;
  font-size:12px;
}
.admin-view h3{
  margin:10px 0 8px;
  font-size:15px;
  letter-spacing:-.02em;
}
.weather-cache-wrap{
  height:34vh;
}
.radar-cache-wrap{
  height:34vh;
}
.mono-cell{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  max-width:520px;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* Landing page hero background */
.landing{
  position:relative;
  min-height:100vh;
}
.landing::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.28),transparent 28%),
             linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.20));
  pointer-events:none;
}
.landing-shell{
  position:relative;
  z-index:1;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  border-color:rgba(255,255,255,.62);
}

/* Combined weather rows */
.combined-weather-row{
  background:#eaf8ef;
}
.combined-weather-row td{
  font-weight:1000;
}


/* Shared hero background for landing and country pages */
body:not(.landing){
  background:
    linear-gradient(90deg,rgba(243,247,241,.92),rgba(243,247,241,.78),rgba(243,247,241,.92));
}
body:not(.landing)::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.34),transparent 36%);
}
.wrap{
  position:relative;
}
.card,
.event-card,
.rank-panel,
.admin-panel,
.detail-dialog{
  backdrop-filter:blur(2px);
}

/* Country-specific source weighting */
.source-weight-wrap{
  max-height:280px;
}
.source-weight-table input[type="range"]{
  width:180px;
  max-width:100%;
  vertical-align:middle;
}
.source-weight-table td b{
  margin-left:8px;
}
.source-weight-table small{
  color:var(--muted);
  font-size:10px;
}
.source-disabled-row{
  opacity:.62;
}
.source-weight-actions{
  margin:8px 0;
}


/* Rankings: dropdown metric + reversible list */
.rank-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.rank-flip{border:1px solid var(--line);background:#10130f;color:#fff;border-radius:999px;padding:10px 14px;font:inherit;font-size:12px;cursor:pointer;}
.rank-box--single{width:100%;}
.rank-box--single h2{display:flex;align-items:center;min-height:44px;}
@media(max-width:700px){.rank-head{display:grid;align-items:start}.rank-controls{display:grid;grid-template-columns:1fr}}

/* Cards: edge and subtle hover lift */
.cards-grid,.events-grid{
  align-items:start;
}
.card,.event-card{
  border:1.5px solid rgba(16,19,15,.16);
  box-shadow:0 10px 26px rgba(28,38,22,.08);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  will-change:transform;
}
.card:hover,.event-card:hover,
.card:focus-within,.event-card:focus-within{
  transform:translateY(-4px);
  border-color:rgba(24,134,75,.42);
  box-shadow:0 18px 34px rgba(28,38,22,.14), 0 0 0 1px rgba(24,134,75,.12);
}
.card::after,.event-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.card,.event-card{position:relative;}
@media (hover:none){
  .card:hover,.event-card:hover,
  .card:focus-within,.event-card:focus-within{
    transform:none;
    border-color:rgba(16,19,15,.16);
    box-shadow:0 10px 26px rgba(28,38,22,.08);
  }
}


/* Admin radar data is separated from weather data */
#adminRadarcache .radar-cache-wrap{
  height:calc(100vh - 190px);
}
#adminWeather .weather-cache-wrap{
  height:34vh;
}
#adminWeather .source-weight-wrap{
  max-height:260px;
}


/* Course info admin: selected course editor instead of huge empty table/list */
.course-info-admin-shell{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:12px;
  height:calc(100vh - 190px);
  min-height:0;
}
.course-info-course-list{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  overflow:auto;
  padding:8px;
}
.course-info-course-list h3{
  margin:6px 6px 10px;
  font-size:14px;
}
.course-info-course-list button{
  width:100%;
  border:0;
  background:transparent;
  border-radius:12px;
  text-align:left;
  padding:9px 10px;
  cursor:pointer;
  font:inherit;
}
.course-info-course-list button.active,
.course-info-course-list button:hover{
  background:#10130f;
  color:#fff;
}
.course-info-course-list small{
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:2px;
}
.course-info-course-list button.active small,
.course-info-course-list button:hover small{
  color:rgba(255,255,255,.72);
}
.course-info-editor{
  min-width:0;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.course-info-editor .course-info-course__head{
  position:sticky;
  top:0;
  z-index:3;
}
@media(max-width:900px){
  .course-info-admin-shell{
    grid-template-columns:1fr;
    height:auto;
  }
  .course-info-course-list{
    max-height:260px;
  }
}


/* Admin country scope selector */
.admin-head{gap:12px}
.admin-country-scope{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:260px;
  color:var(--muted);
  font-size:12px;
  font-weight:950;
}
.admin-country-scope .select{
  min-width:180px;
  padding:9px 12px;
}
.admin-inline-help{
  display:inline-flex;
  align-items:center;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
@media(max-width:900px){
  .admin-head{
    display:grid;
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .admin-country-scope{
    margin-left:0;
    width:100%;
    justify-content:space-between;
  }
}


/* Ensure admin source-weight and cache tables are visible */
.source-weight-wrap,
.weather-cache-wrap,
.radar-cache-wrap{
  min-height:160px;
}
.source-weight-table td,
.source-weight-table th{
  white-space:nowrap;
}


/* Robust admin tables: visible even when content is generated after tab activation */
#adminWeather .source-weight-wrap,
#adminWeather .weather-cache-wrap,
#adminRadarcache .radar-cache-wrap{
  min-height:220px;
}
#sourceWeightRows:empty::before,
#adminWeatherRows:empty::before,
#radarCacheRows:empty::before{
  content:"";
}


/* Actual weather calculation breakdown */
.actual-weights-cell{
  max-width:620px;
  white-space:normal;
  line-height:1.35;
  font-size:10px;
  color:#233026;
}


/* Robust admin tab activation */
.admin-view.active{
  display:block !important;
}
.course-info-admin{
  min-height:420px;
}
.course-info-editor{
  min-height:360px;
}


/* Kenttätiedot editor visibility safety */
#adminCourseinfo.active #courseInfoRows{
  display:block;
  min-height:420px;
}
.course-info-lang-box textarea{
  pointer-events:auto;
  user-select:text;
}


/* Main country page background: let JS-applied bg show through */
body:not(.landing){
  background:transparent !important;
}
body:not(.landing)::before{
  content:none !important;
  display:none !important;
}
.wrap{
  background:transparent;
}
.topbar,
.radar-footer{
  background:rgba(255,255,255,.92);
}
.card,
.event-card,
.rank-panel{
  background:rgba(255,255,255,.90);
}


/* Admin architecture memo */
.architecture-memo{
  max-width:980px;
  display:grid;
  gap:14px;
  padding:4px;
}
.architecture-memo h2{
  margin:0;
  font-size:22px;
  letter-spacing:-.03em;
}
.architecture-memo section{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  padding:14px;
}
.architecture-memo h3{
  margin:0 0 8px;
  font-size:15px;
}
.architecture-memo ul{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:5px;
  color:#263328;
  font-size:13px;
  line-height:1.35;
}
.architecture-memo p{
  margin:0;
  color:#263328;
  font-size:13px;
  line-height:1.45;
}
.architecture-memo pre{
  margin:0;
  white-space:pre-wrap;
  background:#10130f;
  color:#f5f8ef;
  border-radius:14px;
  padding:12px;
  overflow:auto;
  font-size:12px;
}
.architecture-memo code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}


/* Card radar previews: never let external radar error tiles dominate the card */
.preview .radar-tile{
  pointer-events:none;
}
/* Allow inline radarPreviewAlignStyle() to control size/position; override generic media-img rule */
.card-shell__media > img.radar-tile{
  position:absolute !important;
  inset:auto !important;
  object-fit:fill !important;
}
/* Live-toggle: hide all radar pixels when user disables the radar layer in the footer dropup */
html.radar-layer-off .radar-tile{ display:none !important; }
/* Style the radar layer on/off toggle inside the radar source dropup */
.radar-source-menu .radar-layer-toggle{
  border-bottom:1px solid rgba(0,0,0,.08);
  margin-bottom:4px;
}
.radar-source-menu .radar-layer-toggle.is-off b{ color:#b13a2a; }


/* Architecture memo: lightweight cloud notes */
.architecture-memo li code{
  background:#eef3e9;
  border:1px solid var(--line);
  border-radius:6px;
  padding:1px 4px;
}


/* Multi-select course cards */
.select-course-check{
  position:absolute;
  top:12px;
  left:12px;
  z-index:7;
  width:34px;
  height:34px;
  border-radius:12px;
  border:2px solid rgba(255,255,255,.88);
  background:rgba(255,255,255,.78);
  color:#10130f;
  font-weight:1000;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
  cursor:pointer;
}
.select-course-check.selected{
  background:#10130f;
  color:#fff;
  border-color:#d9f0cf;
}
.selection-bar{
  position:sticky;
  top:52px;
  z-index:40;
  display:none;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  margin:0 0 14px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.94);
  box-shadow:0 16px 34px rgba(28,38,22,.12);
}
.selection-bar.show{display:grid}
.selection-bar b{
  display:block;
  font-size:14px;
}
.selection-bar span{
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
.selection-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.selection-actions button{
  border:1px solid var(--line);
  border-radius:999px;
  background:#10130f;
  color:#fff;
  padding:10px 13px;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.selection-actions button:last-child{
  background:#fff;
  color:#10130f;
}
.multi-map-modal{
  position:fixed;
  inset:0;
  z-index:320;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(7px);
}
.multi-map-modal.open{display:grid}
.multi-map-card{
  width:min(1200px,94vw);
  height:min(760px,88vh);
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.multi-map{
  width:100%;
  height:100%;
  min-height:360px;
}
.multi-map-side{
  padding:20px;
  overflow:auto;
  border-left:1px solid var(--line);
}
.multi-map-side h2{
  margin:0 0 14px;
  font-size:24px;
  letter-spacing:-.04em;
}
.multi-map-list{
  display:grid;
  gap:8px;
}
.multi-map-list button{
  border:1px solid var(--line);
  background:#f8faf5;
  border-radius:14px;
  padding:10px;
  text-align:left;
  cursor:pointer;
  font:inherit;
}
.multi-map-list button:hover{
  background:#10130f;
  color:#fff;
}
.multi-map-list span{
  display:block;
  margin-top:3px;
  font-size:11px;
  color:var(--muted);
}
.multi-map-list button:hover span{color:rgba(255,255,255,.72)}
@media(max-width:800px){
  .selection-bar{
    top:0;
    grid-template-columns:1fr;
  }
  .multi-map-card{
    grid-template-columns:1fr;
    grid-template-rows:1fr 230px;
    height:92vh;
  }
  .multi-map-side{
    border-left:0;
    border-top:1px solid var(--line);
  }
}


/* Mobile header: only brand badge + hamburger visible by default */
.mobile-menu-btn{
  display:none;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#10130f;
  color:#fff;
  font-size:22px;
  line-height:1;
  font-weight:1000;
  cursor:pointer;
}
.mobile-menu-btn.open{
  background:#fff;
  color:#10130f;
}
@media(max-width:1100px){
  .topbar{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    padding:8px 10px;
    align-items:center;
  }
  .topbar .logo{
    min-width:0;
    width:max-content;
    max-width:calc(100vw - 78px);
    min-height:42px;
    padding:8px 16px 8px 48px;
    white-space:nowrap;
  }
  .topbar .logo span[data-i18n="siteName"]{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mobile-menu-btn{
    display:inline-grid;
    place-items:center;
    justify-self:end;
  }

  .topbar > .search,
  .topbar > .select,
  .topbar > .dropdown,
  .topbar > .favorites-btn,
  .topbar > .login-btn{
    display:none;
  }
  .topbar.mobile-open{
    align-items:start;
  }
  .topbar.mobile-open > .search,
  .topbar.mobile-open > .select,
  .topbar.mobile-open > .favorites-btn,
  .topbar.mobile-open > .login-btn{
    display:block;
    grid-column:1 / -1;
    width:100%;
  }
  .topbar.mobile-open > .dropdown{
    display:block;
    grid-column:1 / -1;
    width:100%;
  }
  .topbar.mobile-open > .dropdown .round-btn{
    width:100%;
    border-radius:999px;
    height:44px;
    text-align:center;
  }
  .topbar .dropdown-panel{
    left:0;
    right:0;
    width:100%;
  }

  .wrap{
    padding-top:10px;
  }
  .public-tabs{
    margin-top:0;
  }
}

@media (max-width: 600px) {
  .public-tabs .map-style-picker {
    width: 100%;
    margin-left: 0 !important;
    margin-top: 6px;
    justify-content: center;
  }
}


/* Mobile header one-row collapsed state */
@media(max-width:1100px){
  .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) 48px !important;
    align-items:center !important;
  }
  .topbar .logo{
    grid-column:1;
    grid-row:1;
    justify-self:start;
    max-width:calc(100vw - 74px);
  }
  .topbar .mobile-menu-btn{
    grid-column:2;
    grid-row:1;
    justify-self:end;
    align-self:center;
    margin:0;
  }
  .topbar.mobile-open > .search,
  .topbar.mobile-open > .select,
  .topbar.mobile-open > .dropdown,
  .topbar.mobile-open > .favorites-btn,
  .topbar.mobile-open > .login-btn{
    grid-column:1 / -1;
  }
}

/* Floating selected courses tool, always above radar footer */
.selection-bar{
  position:fixed !important;
  left:50%;
  bottom:74px;
  transform:translateX(-50%);
  width:min(980px,calc(100vw - 28px));
  z-index:305;
  margin:0 !important;
}
.selection-bar.show{
  display:grid !important;
}
.selection-bar.pulse{
  animation:selectionPulse .9s ease;
}
@keyframes selectionPulse{
  0%{transform:translateX(-50%) scale(.985);box-shadow:0 0 0 rgba(29,185,84,0)}
  35%{transform:translateX(-50%) scale(1.01);box-shadow:0 0 0 7px rgba(29,185,84,.17)}
  100%{transform:translateX(-50%) scale(1);box-shadow:0 16px 34px rgba(28,38,22,.12)}
}
@media(max-width:720px){
  .selection-bar{
    bottom:88px;
    width:calc(100vw - 16px);
    grid-template-columns:1fr;
  }
}

/* Stronger wind arrow on cards and popups */
.wind-chip,
.wind-arrow,
.wind-dir,
.preview .wind-chip{
  border:2px solid rgba(16,19,15,.28) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.24) !important;
  font-weight:1000 !important;
}
.wind-chip{
  color:#008f52 !important;
  background:rgba(255,255,255,.98) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.wind-chip span,
.wind-chip b{
  font-weight:1000 !important;
  color:#008f52 !important;
}
.wind-chip::before,
.wind-arrow::before,
.wind-dir::before{
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.35));
}
@media(max-width:720px){
  .wind-chip{
    width:40px !important;
    height:40px !important;
    font-size:21px !important;
  }
}

/* Advertising cards */
.ad-card{
  position:relative;
  min-height:420px;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(27,40,22,.16);
  cursor:pointer;
  background:#10130f;
  border:1px solid rgba(255,255,255,.28);
}
.ad-card>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.ad-card__shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.08) 38%,rgba(0,0,0,.78) 100%);
}
.ad-pill{
  position:absolute;
  left:16px;
  top:16px;
  z-index:2;
  border:1px solid rgba(238,205,145,.85);
  color:#f2d6a2;
  background:rgba(16,19,15,.46);
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
}
.ad-card__content{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:22px;
  color:#fff;
}
.ad-card__content h3{
  margin:0 0 8px;
  font-size:30px;
  line-height:.95;
  letter-spacing:-.05em;
  color:#f4dfad;
}
.ad-card__content p{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.35;
  color:rgba(255,255,255,.9);
}
.ad-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 14px;
}
.ad-tags span{
  border:1px solid rgba(238,205,145,.72);
  border-radius:999px;
  color:#f2d6a2;
  padding:6px 9px;
  font-size:11px;
  font-weight:850;
}
.ad-card__content button,
.ad-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  border:0;
  border-radius:14px;
  background:#efc980;
  color:#111;
  padding:12px;
  font:inherit;
  font-weight:1000;
  text-decoration:none;
}
.ad-detail{
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  width:min(1120px,94vw);
  height:min(760px,90vh);
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  position:relative;
}
.ad-detail__image{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#10130f;
}
.ad-detail__content{
  padding:28px;
  overflow:auto;
}
.ad-detail__content h2{
  margin:42px 0 12px;
  font-size:36px;
  letter-spacing:-.05em;
}
.ad-detail__content p,
.ad-detail__content li{
  color:#314034;
  font-size:14px;
  line-height:1.5;
}
.ad-pill--static{
  position:static;
  display:inline-flex;
  background:#10130f;
}
@media(max-width:800px){
  .ad-detail{
    grid-template-columns:1fr;
    grid-template-rows:48vh 1fr;
  }
  .ad-card{
    min-height:450px;
  }
}


/* Unified wind arrow: same visual strength on desktop and mobile */
.wind-arrow-chip,
.preview .wind-arrow-chip,
.detail .wind-arrow-chip,
.wind-chip,
.wind-arrow,
.wind-dir{
  width:46px !important;
  height:46px !important;
  min-width:46px !important;
  min-height:46px !important;
  border-radius:16px !important;
  border:2.5px solid rgba(16,19,15,.34) !important;
  background:rgba(255,255,255,.98) !important;
  color:#007f49 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.65) !important;
  font-size:25px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  display:grid !important;
  place-items:center !important;
}
.wind-arrow-chip .wind-arrow,
.wind-arrow-chip span,
.wind-arrow{
  font-size:26px !important;
  font-weight:1000 !important;
  color:#007f49 !important;
  text-shadow:0 2px 1px rgba(255,255,255,.9), 0 3px 5px rgba(0,0,0,.28) !important;
}
.preview .wind-arrow-chip{
  right:12px !important;
  top:12px !important;
  z-index:8 !important;
}
@media(max-width:720px){
  .wind-arrow-chip,
  .preview .wind-arrow-chip,
  .detail .wind-arrow-chip,
  .wind-chip,
  .wind-arrow,
  .wind-dir{
    width:46px !important;
    height:46px !important;
    min-width:46px !important;
    min-height:46px !important;
    font-size:25px !important;
  }
}


/* Compact selected-courses tool: fixed just above radar footer, never a large overlay */
.selection-bar{
  position:fixed !important;
  top:auto !important;
  left:50% !important;
  right:auto !important;
  bottom:48px !important;
  transform:translateX(-50%) !important;
  width:auto !important;
  max-width:calc(100vw - 24px) !important;
  min-width:min(420px,calc(100vw - 24px)) !important;
  min-height:0 !important;
  height:auto !important;
  margin:0 !important;
  padding:8px 10px !important;
  display:none !important;
  grid-template-columns:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(16,19,15,.14) !important;
  border-radius:999px !important;
  box-shadow:0 12px 32px rgba(0,0,0,.18) !important;
  z-index:305 !important;
  backdrop-filter:blur(10px);
}
.selection-bar.show{
  display:flex !important;
}
.selection-bar > div:first-child{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  flex:0 1 auto !important;
}
.selection-bar b{
  display:inline-flex !important;
  white-space:nowrap !important;
  font-size:12px !important;
  line-height:1 !important;
}
.selection-bar span{
  display:inline-block !important;
  max-width:260px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  font-size:11px !important;
  line-height:1 !important;
}
.selection-actions{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  flex:0 0 auto !important;
}
.selection-actions button{
  padding:8px 10px !important;
  min-height:30px !important;
  border-radius:999px !important;
  font-size:11px !important;
  line-height:1 !important;
  white-space:nowrap !important;
}
.selection-bar.pulse{
  animation:selectionPulseCompact .75s ease !important;
}
@keyframes selectionPulseCompact{
  0%{transform:translateX(-50%) scale(.98)}
  35%{transform:translateX(-50%) scale(1.04);box-shadow:0 0 0 7px rgba(29,185,84,.17),0 12px 32px rgba(0,0,0,.18)}
  100%{transform:translateX(-50%) scale(1)}
}
@media(max-width:720px){
  .selection-bar{
    bottom:62px !important;
    width:calc(100vw - 14px) !important;
    min-width:0 !important;
    justify-content:space-between !important;
    border-radius:18px !important;
    padding:8px !important;
  }
  .selection-bar span{
    display:none !important;
  }
  .selection-actions button{
    padding:9px 10px !important;
  }
}


/* Wind arrow refinement: no extra square box, only stronger arrow inside the round badge */
.wind-arrow-chip,
.preview .wind-arrow-chip,
.detail .wind-arrow-chip,
.wind-chip,
.preview .wind-chip{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.78) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.16) !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  overflow:hidden !important;
}
.wind-arrow-chip .wind-arrow,
.wind-chip .wind-arrow,
.wind-arrow-chip span,
.wind-chip span,
.wind-arrow{
  color:#008f52 !important;
  font-size:27px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  text-shadow:
    0 1px 0 #ffffff,
    0 0 1px #ffffff,
    0 2px 4px rgba(0,0,0,.28) !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.28)) !important;
}
.wind-dir{
  border-radius:999px !important;
}
@media(max-width:720px){
  .wind-arrow-chip,
  .preview .wind-arrow-chip,
  .detail .wind-arrow-chip,
  .wind-chip,
  .preview .wind-chip{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    min-height:42px !important;
    border-radius:999px !important;
  }
  .wind-arrow-chip .wind-arrow,
  .wind-chip .wind-arrow,
  .wind-arrow-chip span,
  .wind-chip span,
  .wind-arrow{
    font-size:27px !important;
  }
}


/* Wind arrow only: stronger centered glyph, no extra shadow/box */
.wind-arrow-chip{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
}
.wind-arrow-chip .wind-arrow{
  display:block !important;
  position:static !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
  color:#007f49 !important;
  font-size:30px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  transform:rotate(var(--wind-deg)) !important;
  transform-origin:50% 50% !important;
}

/* Selected tool: keep it above the radar footer */
.selection-bar{
  bottom:96px !important;
  z-index:306 !important;
}
@media(max-width:720px){
  .selection-bar{
    bottom:112px !important;
  }
}


/* Ads use the same card proportions as course cards */
.ad-card{
  min-height:0 !important;
  display:block !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
}
.ad-card .preview,
.ad-preview{
  height:170px !important;
}
.ad-card .preview img,
.ad-preview img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.ad-card__shade{display:none !important}
.ad-body h3{
  margin:0 0 6px !important;
  color:#10130f !important;
  font-size:22px !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
}
.ad-body p{
  min-height:34px;
  color:var(--muted) !important;
  margin:0 0 10px !important;
  font-size:12px !important;
  line-height:1.3 !important;
}
.ad-body .ad-tags{
  margin:0 0 10px !important;
}
.ad-tags span{
  border:1px solid var(--line) !important;
  background:#f8faf5 !important;
  color:#566455 !important;
}
.ad-card-cta{
  width:100%;
  border:1px solid #0d2a18;
  background:#10130f;
  color:#fff;
  border-radius:14px;
  padding:10px 12px;
  font:inherit;
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
}
.ad-pill{
  left:auto !important;
  right:12px !important;
  top:12px !important;
  background:rgba(255,255,255,.92) !important;
  color:#10130f !important;
  border:1px solid rgba(16,19,15,.12) !important;
}

/* Ad popup */
.ad-dialog{
  padding:0;
  border:0;
  background:transparent;
}
.ad-popup{
  width:min(1120px,94vw);
  height:min(760px,90vh);
  display:grid;
  grid-template-columns:minmax(0,1fr) 420px;
  background:#fff;
  border-radius:28px;
  overflow:hidden;
  position:relative;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.ad-popup__image{
  width:100%;
  height:100%;
  object-fit:cover;
}
.ad-popup__content{
  padding:32px;
  overflow:auto;
}
.ad-popup__label{
  display:inline-flex;
  border-radius:999px;
  background:#10130f;
  color:#fff;
  padding:7px 12px;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.08em;
}
.ad-popup__content h1{
  margin:18px 0 12px;
  font-size:38px;
  line-height:.95;
  letter-spacing:-.055em;
}
.ad-popup__content p,
.ad-popup__bullets li{
  color:#314034;
  font-size:14px;
  line-height:1.5;
}
.ad-popup__bullets{
  padding-left:18px;
}
.ad-close{
  position:absolute;
  right:16px;
  top:16px;
  z-index:4;
}

/* Selected courses map: map only, no side panel */
.multi-map-card{
  grid-template-columns:1fr !important;
}
.multi-map-side{
  display:none !important;
}
.multi-map{
  min-height:100% !important;
}
@media(max-width:800px){
  .ad-popup{
    grid-template-columns:1fr;
    grid-template-rows:48vh 1fr;
    height:92vh;
  }
}


/* Wind arrow: one centered SVG renderer everywhere */
.wind-arrow-chip{
  position:absolute !important;
  top:12px !important;
  right:12px !important;
  z-index:8 !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.86) !important;
  background:#fff !important;
  box-shadow:none !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  color:#008f52 !important;
}
.wind-arrow-svg{
  width:30px !important;
  height:30px !important;
  display:block !important;
  color:#008f52 !important;
  transform:rotate(var(--wind-deg)) !important;
  transform-origin:50% 50% !important;
}
.wind-only{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.wind-only .wind-arrow-svg{
  width:30px !important;
  height:30px !important;
}

/* Smart ad card height: same grid card, flexible image, admin text controls content */
.cards-grid{
  align-items:stretch !important;
}
.cards-grid > .card,
.cards-grid > .ad-card{
  height:100% !important;
}
.card,
.ad-card{
  display:flex !important;
  flex-direction:column !important;
}
.card .body,
.ad-card .body{
  display:flex !important;
  flex-direction:column !important;
}
.ad-card .preview,
.ad-preview{
  flex:1 1 auto !important;
  min-height:170px !important;
  height:auto !important;
}
.ad-card .body,
.ad-body{
  flex:0 0 auto !important;
}
.ad-body p{
  min-height:0 !important;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ad-card-cta{
  margin-top:auto !important;
}
.ad-card .ad-tags{
  flex-wrap:wrap;
}

/* If text is long, body can grow; image is what gives first */
.ad-card{
  min-height:100% !important;
}
@media(max-width:800px){
  .ad-card{
    min-height:450px !important;
  }
  .ad-card .preview,
  .ad-preview{
    min-height:250px !important;
  }
  .ad-card .preview img,
  .ad-preview img{
    min-height:250px !important;
    object-fit:cover !important;
  }
}


/* Popup positioning: all popups centered by default */
.detail-dialog,
.ad-dialog{
  position:fixed !important;
  inset:50% auto auto 50% !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  max-width:94vw !important;
  max-height:92vh !important;
  background:transparent !important;
}
.detail-dialog::backdrop,
.ad-dialog::backdrop{
  background:rgba(0,0,0,.78) !important;
  backdrop-filter:blur(14px) saturate(.9) !important;
  -webkit-backdrop-filter:blur(14px) saturate(.9) !important;
}
@media(min-width:1025px){
  .detail-dialog,
  .ad-dialog{
    box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) !important;
  }
}
.detail-layout,
.ad-popup{
  max-width:94vw !important;
  max-height:92vh !important;
}
.multi-map-modal{
  place-items:center !important;
}
.multi-map-card{
  max-width:94vw !important;
  max-height:90vh !important;
}
@media(max-width:1024px){
  .detail-dialog{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    margin:0 !important;
    transform:none !important;
    max-width:none !important;
    max-height:none !important;
    width:100vw !important;
    height:calc(100dvh - var(--footer-h, 110px)) !important;
    background:#fff !important;
    border-radius:0 !important;
    overflow:hidden !important;
    z-index:9999 !important;
  }
  .ad-dialog{
    position:fixed !important;
    inset:0 !important;
    margin:0 !important;
    transform:none !important;
    max-width:none !important;
    max-height:none !important;
    width:100vw !important;
    height:100dvh !important;
    background:#fff !important;
    border-radius:0 !important;
    overflow:hidden !important;
    z-index:9999 !important;
  }
  .detail-dialog::backdrop,
  .ad-dialog::backdrop{
    background:rgba(0,0,0,.85) !important;
  }
  body.popup-open .radar-footer{
    position:fixed !important;
    left:0;right:0;bottom:0;
    z-index:10000 !important;
  }
  .detail-layout,
  .ad-popup,
  .multi-map-card{
    max-width:none !important;
    max-height:none !important;
    width:100% !important;
    height:100% !important;
    border-radius:0 !important;
  }
  .detail-layout{
    grid-template-columns:1fr !important;
    grid-template-rows:var(--detail-map-h, 50%) 14px 1fr !important;
    height:100% !important;
  }
  .detail-map-side{
    min-height:0;
    height:100%;
    overflow:hidden;
  }
  .detail-resize-handle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#1a1d20;
    color:#fff;
    touch-action:manipulation;
    user-select:none;
    z-index:10;
    position:relative;
    min-height:34px;
    padding:6px 12px;
    gap:8px;
  }
  .detail-resize-handle .dch-arrow{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    border-radius:999px;
    width:32px;height:32px;
    font-size:20px;line-height:1;
    cursor:pointer;
    display:grid;place-items:center;
  }
  .detail-resize-handle .dch-arrow:disabled{opacity:.3;cursor:default;}
  .detail-resize-handle .dch-label{
    font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
    flex:1;text-align:center;
  }
  .detail-info{
    min-height:0;
    height:100%;
    overflow:hidden;
    position:relative;
  }
  .detail-pages{
    display:flex;
    width:200%;
    height:100%;
    transition:transform .25s ease;
    will-change:transform;
  }
  .detail-page{
    width:50%;
    flex:0 0 50%;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:16px;
    box-sizing:border-box;
  }
  .detail-pager-dots{
    position:absolute;bottom:6px;left:0;right:0;
    display:flex;justify-content:center;gap:6px;pointer-events:none;
  }
  .detail-pager-dots .dot{
    width:6px;height:6px;border-radius:999px;background:rgba(0,0,0,.2);pointer-events:auto;cursor:pointer;
  }
  .detail-pager-dots .dot.is-active{background:#10130f;width:18px;}
}
@media(min-width:1025px){
  /* Desktop: show the same carousel handle above the info column */
  .detail-layout{grid-template-columns:1.3fr .7fr;grid-template-rows:auto 1fr;}
  .detail-map-side{grid-column:1;grid-row:1 / span 2;}
  .detail-resize-handle{
    display:flex;align-items:center;justify-content:space-between;
    grid-column:2;grid-row:1;
    background:#1a1d20;color:#fff;
    min-height:44px;padding:8px 14px;gap:8px;
    user-select:none;position:relative;z-index:10;cursor:default;
  }
  .detail-resize-handle .dch-arrow{
    background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
    color:#fff;border-radius:999px;width:34px;height:34px;
    font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;
  }
  .detail-resize-handle .dch-arrow:disabled{opacity:.3;cursor:default;}
  .detail-resize-handle .dch-label{
    font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
    flex:1;text-align:center;
  }
  .detail-info{grid-column:2;grid-row:2;overflow:hidden;min-height:0;padding:0;}
  .detail-pager-dots{display:none}
  .detail-pages{display:flex;width:200%;height:100%;}
  .detail-page{width:50%;flex:0 0 50%;overflow-y:auto;padding:16px;box-sizing:border-box;}
}
/* Scorecard styles (both mobile and desktop) */
.scorecard-root{display:flex;flex-direction:column;gap:12px;font-size:13px}
.sc-empty{padding:20px;text-align:center;color:#444}
.sc-empty-small{color:#666;font-size:12px;margin:6px 0}
.sc-btn{border:0;border-radius:12px;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer;background:#eee}
.sc-primary{background:#10130f;color:#fff}
.sc-end{background:transparent;border:1px solid #ccc;color:#222;border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer}
.sc-head{display:flex;flex-direction:column;gap:8px}
.sc-head-row{display:flex;justify-content:space-between;align-items:center}
.sc-nav{display:flex;align-items:center;gap:6px}
.sc-nav-btn{background:#eee;border:0;border-radius:999px;width:30px;height:30px;font-size:14px;cursor:pointer;flex:0 0 30px}
.sc-nav-btn:disabled{opacity:.35}
.sc-holes{display:flex;gap:4px;overflow-x:auto;flex:1;padding:2px}
.sc-hole-pill{flex:0 0 auto;min-width:34px;height:34px;border:1px solid #d8d8d8;border-radius:10px;background:#fff;font-weight:700;font-size:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 4px}
.sc-hole-pill small{font-size:9px;color:#666;line-height:1}
.sc-hole-pill.is-active{background:#10130f;color:#fff;border-color:#10130f}
.sc-hole-pill.is-active small{color:#cfd2cc}
.sc-hole-pill.has-score{border-color:#69d84a}
.sc-hole-card{display:flex;flex-direction:column;gap:14px;border:1px solid #e5e5e5;border-radius:14px;padding:12px;background:#fafafa}
.sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sc-grid label{display:flex;flex-direction:column;font-size:11px;color:#555;font-weight:700;letter-spacing:.05em;text-transform:uppercase;gap:4px}
.sc-grid input{border:1px solid #ddd;border-radius:8px;padding:8px;font-size:14px;font-weight:700;text-align:center}
.sc-shots h3{margin:0 0 6px;font-size:13px}
.sc-shot-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.sc-shot-list li{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #eee;border-radius:8px;padding:6px 8px;font-size:12px}
.sc-shot-list .sc-i{color:#888;font-weight:700;width:22px}
.sc-shot-list .sc-gps{font-size:13px}
.sc-shot-list .sc-del{margin-left:auto;background:transparent;border:0;font-size:18px;color:#999;cursor:pointer;padding:0 4px}
.sc-add-shot{display:flex;flex-direction:column;gap:8px;border-top:1px dashed #ddd;padding-top:10px}
.sc-add-shot h4{margin:0;font-size:12px;color:#444;text-transform:uppercase;letter-spacing:.05em}
.sc-add-shot label{display:flex;flex-direction:column;font-size:11px;color:#555;gap:4px}
.sc-add-shot select{border:1px solid #ddd;border-radius:8px;padding:8px;font:inherit}
.sc-rec{margin:0;font-size:11px;color:#2a6e3a;background:#e8f6ec;border-radius:8px;padding:6px 8px}
.sc-lies{display:flex;flex-wrap:wrap;gap:6px}
.sc-lie{border:1px solid #d4d4d4;background:#fff;border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer}
.sc-lie.is-active{background:#10130f;color:#fff;border-color:#10130f}
.sc-save-shot{width:100%;margin-top:4px}
/* Lock background scroll/interaction while a popup is open */
html.popup-open,
body.popup-open{
  overflow:hidden !important;
  overflow-x:hidden !important;
  touch-action:none !important;
  overscroll-behavior:none !important;
}
body.popup-open{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
}
body.popup-open .detail-info,
body.popup-open .ad-popup,
body.popup-open dialog,
body.popup-open dialog *{
  touch-action:pan-y !important;
}
/* Dark background on country/cards pages for mobile + tablet */
@media(max-width:1024px){
  html.country-page,
  html.country-page body:not(.landing){
    background:#1a1d20 !important;
    background-image:none !important;
  }
}

/* Mobile + tablet: selected courses map fullscreen above footer */
@media(max-width:1024px){
  .multi-map-modal.open{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    top:0 !important;
    bottom:0 !important;
    margin:0 !important;
    width:100vw !important;
    height:calc(100dvh - var(--footer-h, 110px)) !important;
    z-index:9999 !important;
    background:rgba(0,0,0,.85) !important;
    place-items:stretch !important;
  }
  .multi-map-card{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
}


/* Selected courses map: full map only, pins + course name badges */
.multi-map-modal{
  display:none;
  place-items:center !important;
}
.multi-map-modal.open{
  display:grid !important;
}
.multi-map-card{
  width:min(1180px,94vw) !important;
  height:min(760px,88vh) !important;
  display:block !important;
  grid-template-columns:none !important;
  grid-template-rows:none !important;
  position:relative !important;
  overflow:hidden !important;
  background:#fff !important;
  border-radius:28px !important;
}
.multi-map{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  z-index:1 !important;
}
.close-multi-map,
#closeMultiMap{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:30 !important;
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  border:1px solid rgba(16,19,15,.18) !important;
  background:#fff !important;
  color:#10130f !important;
  display:grid !important;
  place-items:center !important;
  font-size:28px !important;
  font-weight:1000 !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
  cursor:pointer !important;
}
.multi-map-side{
  display:none !important;
}
.course-map-name-label{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;
}
.course-map-name-label::before{
  display:none !important;
}
.course-map-name-label .course-map-name-pill{
  background:#10130f;
  color:#fff;
  border:1px solid rgba(255,255,255,.75);
  border-radius:999px;
  padding:4px 9px;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  font:900 11px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  white-space:nowrap;
}
.course-map-badges{
  display:inline-flex !important;
  align-items:center;
  gap:4px;
  background:transparent !important;
  margin:0 !important;
  padding:0 !important;
}
.course-map-badges .wind-arrow-chip,
.course-map-badges .weather-icon-chip,
.leaflet-tooltip .wind-arrow-chip,
.leaflet-tooltip .weather-icon-chip{
  width:30px !important; height:30px !important;
  min-width:30px !important; min-height:30px !important;
  max-width:30px !important; max-height:30px !important;
  background:#fff !important; color:#10130f;
  border-radius:999px !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.25) !important;
  position:static !important;
  padding:0 !important;
  border:0 !important;
  top:auto !important; right:auto !important;
  overflow:hidden;
}
.course-map-badges .wind-arrow-chip .wind-arrow-svg{
  width:24px; height:24px;
  display:block;
}
.course-map-badges .weather-icon-chip .weather-icon-svg{
  width:40px; height:40px;
  display:block;
}
@media(max-width:1024px){
  .selection-bar{
    bottom:132px !important;
    width:calc(100vw - 20px) !important;
    max-width:calc(100vw - 20px) !important;
    min-width:0 !important;
    border-radius:18px !important;
    padding:10px 12px !important;
    display:none !important;
    flex-wrap:wrap !important;
    justify-content:space-between !important;
    row-gap:8px !important;
  }
  .selection-bar.show{
    display:flex !important;
  }
  .selection-bar > div:first-child{
    flex:1 1 100% !important;
  }
  .selection-actions{
    width:100% !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }
}
@media(max-width:720px){
  .multi-map-card{
    width:calc(100vw - 14px) !important;
    height:calc(100vh - 92px) !important;
    border-radius:20px !important;
  }
  #closeMultiMap{
    top:10px !important;
    right:10px !important;
  }
}


/* Ad popup centering: exact viewport center */
#adDialog.ad-dialog,
dialog#adDialog{
  position:fixed !important;
  left:50% !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  inset:auto !important;
  transform:translate(-50%,-50%) !important;
  margin:0 !important;
  padding:0 !important;
  width:auto !important;
  height:auto !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  background:transparent !important;
  overflow:visible !important;
}
#adDialog .ad-popup{
  width:min(1120px,94vw) !important;
  height:min(760px,88vh) !important;
  max-width:94vw !important;
  max-height:88vh !important;
  margin:0 !important;
}
#adDialog::backdrop{
  background:rgba(0,0,0,.58) !important;
  backdrop-filter:blur(7px) !important;
}
@media(max-width:800px){
  #adDialog .ad-popup{
    width:calc(100vw - 16px) !important;
    height:calc(100vh - 72px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100vh - 72px) !important;
  }
}


/* PRO CardShell: one card architecture for course, ad and event cards */
.card-shell{
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:24px !important;
  overflow:hidden !important;
  box-shadow:var(--shadow) !important;
  cursor:pointer !important;
}
.card-shell__media{
  position:relative !important;
  height:170px;
  min-height:170px;
  overflow:hidden !important;
  background:linear-gradient(110deg,#dbe4d3 8%,#e8efe2 18%,#dbe4d3 33%) !important;
  background-size:200% 100% !important;
  animation:cardShellShimmer 1.4s linear infinite;
}
@keyframes cardShellShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.card-shell__media{animation:none}}
.card-shell__media > img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
.card-shell__body{
  display:flex !important;
  flex-direction:column !important;
  flex:0 0 auto !important;
  padding:16px 4px 12px !important;
}
.card-shell__body > h3,
.card-shell__body > p{
  padding-left:12px !important;
  padding-right:12px !important;
}
.card-shell__body h3{
  margin:0 0 4px !important;
  color:#10130f !important;
  font-size:22px !important;
  line-height:1.05 !important;
  letter-spacing:-.035em !important;
}
.card-shell__body p{
  margin:0 0 10px !important;
  color:var(--muted) !important;
  font-size:12px !important;
  font-weight:850 !important;
  line-height:1.3 !important;
}
.cards-grid,
.events-grid{
  align-items:stretch !important;
}
.ad-card .card-shell__media{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:170px !important;
}
.ad-card .card-shell__body{
  flex:0 0 auto !important;
}
.ad-card .card-shell__body p{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ad-card-cta{
  margin-top:auto !important;
}
.event-card .event-actions{
  margin-top:auto !important;
}
.lovable-copy-note{
  width:100%;
  min-height:520px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#10130f;
  color:#f5f8ef;
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre;
}
.architecture-memo--lovable{
  max-width:1100px;
}


/* Ad popup overlay: centered by the dialog overlay */
dialog#adDialog.ad-dialog,
#adDialog.ad-dialog{
  position:fixed !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  border:0 !important;
  background:transparent !important;
  overflow:hidden !important;
  align-items:center !important;
  justify-content:center !important;
}
dialog#adDialog.ad-dialog[open],
#adDialog.ad-dialog[open]{
  display:flex !important;
}
#adDialog .ad-popup{
  position:relative !important;
  width:min(1120px,94vw) !important;
  height:min(760px,88dvh) !important;
  max-width:94vw !important;
  max-height:88dvh !important;
  margin:0 !important;
  transform:none !important;
}
#adDialog::backdrop{
  background:rgba(0,0,0,.58) !important;
  backdrop-filter:blur(7px) !important;
}
@media(max-width:800px){
  #adDialog .ad-popup{
    width:calc(100vw - 16px) !important;
    height:calc(100dvh - 72px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 72px) !important;
  }
}
/* Mobile + tablet: ad popup fullscreen */
@media(max-width:1024px){
  #adDialog .ad-popup{
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    border-radius:0 !important;
    grid-template-columns:1fr !important;
    grid-template-rows:45% 55% !important;
    box-shadow:none !important;
  }
  #adDialog .ad-popup__content{
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    min-height:0;
  }
  #adDialog .ad-popup__image{min-height:0}
  .card:hover,.event-card:hover,
  .card:focus-within,.event-card:focus-within{
    transform:none !important;
    box-shadow:0 10px 26px rgba(28,38,22,.08) !important;
  }
}


/* Close buttons: unified focus handling */
.close-btn,
.x,
#adClose,
#detailClose,
#closeMultiMap,
.close-multi-map{
  outline:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
.close-btn:focus,
.close-btn:focus-visible,
.x:focus,
.x:focus-visible,
#adClose:focus,
#adClose:focus-visible,
#detailClose:focus,
#detailClose:focus-visible,
#closeMultiMap:focus,
#closeMultiMap:focus-visible,
.close-multi-map:focus,
.close-multi-map:focus-visible{
  outline:none !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
}
.close-btn::-moz-focus-inner,
.x::-moz-focus-inner,
#adClose::-moz-focus-inner,
#detailClose::-moz-focus-inner,
#closeMultiMap::-moz-focus-inner{
  border:0 !important;
}


/* Full ad admin editor */
#adminAds .table-wrap{
  overflow:auto;
}
#adminAds table{
  min-width:1900px;
}
#adminAds textarea{
  min-width:220px;
  min-height:58px;
  resize:vertical;
}
#adminAds input[data-ad-field="image"],
#adminAds input[data-ad-field="url"]{
  min-width:240px;
}
#adminAds input[data-ad-field="title"],
#adminAds input[data-ad-field="popupTitle"]{
  min-width:190px;
}


/* Front-page ad card: every visible field comes from Admin */
.ad-card .ad-tags{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:7px !important;
  margin:0 0 10px !important;
}
.ad-card .ad-tags span{
  max-width:100%;
  white-space:nowrap;
}
.ad-card .ad-card-cta{
  margin-top:auto !important;
}
.ad-card .card-shell__body{
  min-height:0 !important;
}


/* Ad tracking admin columns */
#adminAds td:nth-last-child(-n+5),
#adminAds th:nth-last-child(-n+5){
  white-space:nowrap;
  text-align:center;
  font-size:12px;
}
#resetAdStats{
  align-self:end;
}


/* Random splash background: chosen once on landing, reused on country pages */
body.landing,
body:not(.landing){
  background-image:var(--site-bg-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
body.landing::before,
body:not(.landing)::before{
  content:none !important;
  display:none !important;
}
.landing-shell{
  background:rgba(255,255,255,.90) !important;
  backdrop-filter:blur(10px);
}


/* Splash background visibility */
html{
  min-height:100%;
  background-image:var(--site-bg-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
body.landing{
  min-height:100dvh !important;
  background-image:var(--site-bg-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
body.landing .landing-shell{
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(9px) saturate(1.15);
}


/* Background flash reduction: early head script sets --site-bg-image before CSS loads */
html,
body{
  background-color:#dfe7d7 !important;
}


/* Background module: final shared styling only. JS chooses and preloads image once. */
html,
body{
  min-height:100%;
  background-color:#dfe7d7 !important;
  background-image:var(--site-bg-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
body.landing,
body:not(.landing){
  background-image:var(--site-bg-image) !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-attachment:fixed !important;
}
body.landing::before,
body:not(.landing)::before{
  content:none !important;
  display:none !important;
}
body.landing .landing-shell{
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(9px) saturate(1.15);
}


/* Radar safety:
   RainViewer direct error tiles are suppressed in maps/cards to avoid visible
   provider messages such as "Zoom Level Not Supported". WMS/FMI layers remain active. */


/* Unified popup/admin close buttons: one round style everywhere */
.close-btn,
.x,
.close-small,
#adClose,
#detailClose,
#closeMultiMap,
.close-multi-map{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  border-radius:50% !important;
  border:1px solid rgba(16,19,15,.18) !important;
  background:#fff !important;
  color:#10130f !important;
  display:grid !important;
  place-items:center !important;
  font-size:28px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
  cursor:pointer !important;
  outline:none !important;
  -webkit-tap-highlight-color:transparent !important;
}
.close-small{
  font-size:0 !important;
}
.close-small::before{
  content:"×";
  font-size:28px;
  font-weight:1000;
  line-height:1;
}
.close-btn:focus,
.close-btn:focus-visible,
.x:focus,
.x:focus-visible,
.close-small:focus,
.close-small:focus-visible,
#adClose:focus,
#adClose:focus-visible,
#detailClose:focus,
#detailClose:focus-visible,
#closeMultiMap:focus,
#closeMultiMap:focus-visible,
.close-multi-map:focus,
.close-multi-map:focus-visible{
  outline:none !important;
  box-shadow:0 8px 22px rgba(0,0,0,.18) !important;
}
.close-btn::-moz-focus-inner,
.x::-moz-focus-inner,
.close-small::-moz-focus-inner,
#adClose::-moz-focus-inner,
#detailClose::-moz-focus-inner,
#closeMultiMap::-moz-focus-inner{
  border:0 !important;
}

/* Keep round close buttons in their own popup positions */
#detailClose,
#adClose,
#closeMultiMap,
.close-multi-map{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  z-index:700 !important;
}
.admin-head .close-small{
  position:static !important;
}
@media(max-width:720px){
  #detailClose,
  #adClose,
  #closeMultiMap,
  .close-multi-map{
    top:10px !important;
    right:10px !important;
  }
}


/* Lovable import architecture tab */
#adminLovable .lovable-copy-note,
#adminArchitecture .lovable-copy-note{
  width:100%;
  min-height:520px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:#10130f;
  color:#f5f8ef;
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre;
}
#adminLovable .lovable-copy-note--json{
  min-height:360px;
}
#adminLovable .architecture-memo,
#adminArchitecture .architecture-memo{
  max-width:1180px;
}


/* Course popup external links: plain vertical rows, not pill badges */
.course-website-block{
  display:grid;
  gap:10px;
  margin:0 0 14px;
  padding:0;
  border:0;
  background:transparent;
}
.course-website-actions{
  display:grid;
  gap:8px;
}
.course-website-action{
  display:grid;
  grid-template-columns:26px minmax(0,1fr);
  align-items:center;
  gap:8px;
  min-height:30px;
  color:#10130f;
  text-decoration:none;
  font-size:13px;
  font-weight:950;
}
.course-website-action:hover .course-website-action-text{
  text-decoration:underline;
}
.course-website-action-icon{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  font-size:15px;
  line-height:1;
}
.course-website-action-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.course-website-block small{
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
  font-weight:850;
}
#adminCourses input[data-field="websiteUrl"]{
  min-width:230px;
}


/* Header feedback icon and feedback dialog */
.header-icon-btn,
.feedback-btn{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  padding:0 !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:999px !important;
  font-size:20px !important;
  line-height:1 !important;
  border:0;
  background:#10130f;
  color:#fff;
  cursor:pointer;
}
.feedback-dialog{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  display:none;
  align-items:center;
  justify-content:center;
}
.feedback-dialog[open]{
  display:flex !important;
}
.feedback-dialog::backdrop{
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(7px);
}
.feedback-box{
  position:relative;
  width:min(560px,calc(100vw - 24px));
  display:grid;
  gap:12px;
  border-radius:26px;
  background:#fff;
  padding:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.feedback-box h2{
  margin:0 52px 4px 0;
  font-size:28px;
  letter-spacing:-.05em;
}
.feedback-box label{
  display:grid;
  gap:6px;
  color:var(--muted);
  font-size:12px;
}
.feedback-box input,
.feedback-box select,
.feedback-box textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  font:inherit;
  font-size:13px;
}
.feedback-box textarea{
  min-height:140px;
  resize:vertical;
}
.feedback-human-check input{
  max-width:180px;
}
.feedback-status{
  min-height:18px;
  margin:0;
  color:var(--green);
  font-size:12px;
}
@media(max-width:720px){
  .topbar.mobile-open > .feedback-btn{
    width:100% !important;
    height:44px !important;
  }
}


/* Course info: no empty placeholder in popup */


/* Admin extra notes explanation */
.course-info-admin-help{
  line-height:1.45;
}
.course-info-admin-help b{
  color:#10130f;
}


/* Card grid performance:
   Cards are rendered in batches of 100. More cards load on scroll. */


/* Pro header layout: desktop icons stay on first row, mobile controls live in hamburger menu */
.topbar{grid-template-columns:auto minmax(180px,1fr) minmax(150px,auto) auto auto auto !important;grid-auto-flow:column}
.topbar .mobile-menu-btn{display:none}
.topbar > .feedback-btn{justify-self:end}
@media(max-width:1100px){
  body:has(.topbar){padding-top:76px}
  .topbar{display:grid !important;grid-template-columns:minmax(0,1fr) 48px !important;grid-auto-flow:row !important;gap:8px !important;padding:8px 10px !important;align-items:center !important}
  .topbar .logo{grid-column:1 !important;grid-row:1 !important;justify-self:start !important;max-width:calc(100vw - 74px) !important}
  .topbar .mobile-menu-btn{display:inline-grid !important;grid-column:2 !important;grid-row:1 !important;justify-self:end !important;align-self:center !important;place-items:center !important}
  .topbar > .search,.topbar > .select,.topbar > .dropdown,.topbar > .favorites-btn,.topbar > .login-btn,.topbar > .feedback-btn{display:none !important}
  .topbar > #openSelectedMap.selection-badge{grid-column:1 !important;grid-row:1 !important;justify-self:end !important;align-self:center !important;margin-right:8px !important}
  .topbar > #openSelectedMap.selection-badge[hidden]{display:none !important}
  .topbar.mobile-open > .search,.topbar.mobile-open > .select,.topbar.mobile-open > .dropdown,.topbar.mobile-open > .favorites-btn,.topbar.mobile-open > .login-btn,.topbar.mobile-open > .feedback-btn{display:grid !important;grid-column:1 / -1 !important;width:100% !important}
  .topbar.mobile-open > .search,.topbar.mobile-open > .select{display:block !important}
  .topbar.mobile-open > .favorites-btn,.topbar.mobile-open > .login-btn,.topbar.mobile-open > .feedback-btn{height:44px !important;min-width:100% !important;justify-self:stretch !important}
  .topbar.mobile-open > .dropdown .round-btn{width:100% !important;height:44px !important;border-radius:999px !important}
  .topbar.mobile-open .dropdown-panel{left:0 !important;right:0 !important;width:100% !important}
}

/* Country + Language pair: side-by-side in mobile hamburger menu, normal flow on desktop */
.menu-pair-row{display:contents}
@media(max-width:1100px){
  .topbar > .menu-pair-row{display:none !important}
  .topbar.mobile-open > .menu-pair-row{display:flex !important;gap:8px !important;grid-column:1 / -1 !important;width:100% !important}
  .topbar.mobile-open > .menu-pair-row > .dropdown{flex:1 1 0;min-width:0}
  .topbar.mobile-open > .menu-pair-row > .dropdown > .round-btn{width:100% !important;height:44px !important;border-radius:999px !important}
  .topbar.mobile-open > .menu-pair-row .dropdown-panel{left:0 !important;right:0 !important;width:100% !important}
  .topbar.mobile-open > .menu-pair-row > .dropdown > .round-btn::after{content:attr(data-mobile-label)}
}


/* Top-list multi-condition controls and responsive two-column results */
.rank-controls--multi{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:10px;
  align-items:end;
}
.rank-control-label{
  display:grid;
  gap:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:1000;
}
.rank-control-label .select{
  width:100%;
}
.rank-hint{
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
}
#rankList{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
}
.rank-row{
  min-width:0;
}
.rank-value{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.rank-value small,
.rank-secondary{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
}
@media(max-width:900px){
  .rank-controls--multi{
    grid-template-columns:1fr 1fr;
  }
  #rankList{
    grid-template-columns:1fr;
  }
}
@media(max-width:620px){
  .rank-controls--multi{
    grid-template-columns:1fr;
  }
}


/* Top-list controls: prevent overflow on desktop/tablet */
.rank-panel{
  overflow:hidden;
}
.rank-head{
  display:grid !important;
  grid-template-columns:minmax(150px,auto) minmax(0,1fr) !important;
  align-items:start !important;
  gap:18px !important;
}
.rank-head h1{
  min-width:0 !important;
}
.rank-controls--multi{
  min-width:0 !important;
  width:100% !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
}
.rank-control-label{
  min-width:0 !important;
}
.rank-control-label .select{
  min-width:0 !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.rank-hint{
  grid-column:2 !important;
  max-width:100% !important;
  min-width:0 !important;
  overflow-wrap:anywhere !important;
}
@media(max-width:1180px){
  .rank-head{
    grid-template-columns:1fr !important;
  }
  .rank-hint{
    grid-column:1 !important;
  }
}
@media(max-width:760px){
  .rank-controls--multi{
    grid-template-columns:1fr 1fr !important;
  }
}
@media(max-width:520px){
  .rank-controls--multi{
    grid-template-columns:1fr !important;
  }
}


/* Weighted Top-list controls */
.rank-controls--weighted{
  grid-template-columns:1.15fr 1fr 1fr 1.15fr 1fr 1fr !important;
}
.rank-weight-slider{
  width:100%;
  accent-color:#10130f;
}
.rank-weight-label b{
  color:#10130f;
}
.rank-value small,
.rank-secondary{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
}
@media(max-width:1280px){
  .rank-controls--weighted{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:760px){
  .rank-controls--weighted{
    grid-template-columns:1fr 1fr !important;
  }
}
@media(max-width:520px){
  .rank-controls--weighted{
    grid-template-columns:1fr !important;
  }
}


/* Top-list single balance slider */
.rank-controls--single-slider{
  grid-template-columns:1.2fr 1fr 1.2fr 1fr minmax(260px,1.4fr) !important;
}
.rank-balance-label{
  min-width:0 !important;
}
.rank-balance-row{
  display:grid;
  grid-template-columns:auto minmax(120px,1fr) auto;
  align-items:center;
  gap:10px;
}
.rank-balance-row b{
  min-width:42px;
  color:#10130f;
  font-size:12px;
  text-align:center;
}
.rank-balance-label small{
  color:var(--muted);
  font-size:10px;
  font-weight:900;
}
.rank-weight-slider:disabled{
  opacity:.45;
}
@media(max-width:1280px){
  .rank-controls--single-slider{
    grid-template-columns:1fr 1fr !important;
  }
  .rank-balance-label{
    grid-column:1 / -1;
  }
}
@media(max-width:620px){
  .rank-controls--single-slider{
    grid-template-columns:1fr !important;
  }
}


/* Top-list slider is staged: list updates only after button click */
.rank-apply-btn{
  width:100%;
  border:0;
  border-radius:999px;
  background:#10130f;
  color:#fff;
  padding:9px 12px;
  font:inherit;
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
}
.rank-apply-btn:disabled{
  opacity:.38;
  cursor:default;
}
.rank-balance-label{
  gap:7px;
}


/* Formula editor */
.formula-admin{display:grid;gap:10px}.formula-card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px;display:grid;gap:8px}.formula-card h3{margin:0;font-size:15px}.formula-card textarea{width:100%;min-height:92px;border:1px solid var(--line);border-radius:12px;padding:10px;font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.formula-card small{color:var(--muted);font-size:11px}.formula-card .formula-actions{display:flex;gap:8px;flex-wrap:wrap}


/* Landing country code badge: stays country-specific when language changes */
.country-card__code-badge{
  position:absolute !important;
  right:88px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  display:grid !important;
  place-items:center !important;
  min-width:42px !important;
  height:32px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  background:#10130f !important;
  color:#fff !important;
  box-shadow:0 10px 18px rgba(16,19,15,.10) !important;
  font-size:13px !important;
  font-weight:1000 !important;
  letter-spacing:.055em !important;
  line-height:1 !important;
}
.country-card:hover .country-card__code-badge{
  background:#fff !important;
  color:#10130f !important;
}
@media(max-width:520px){
  .country-card{
    padding-right:118px !important;
  }
  .country-card__flag-img{
    right:14px !important;
    width:56px !important;
    height:38px !important;
  }
  .country-card__code-badge{
    right:76px !important;
    min-width:38px !important;
    height:30px !important;
    font-size:12px !important;
  }
}


/* Landing country cards: rectangular flags + plain country code text */
.country-card{padding:24px 110px 24px 22px !important}
.country-card__flag-img{right:18px !important;width:68px !important;height:44px !important;border-radius:4px !important;object-fit:cover !important;box-shadow:0 8px 18px rgba(16,19,15,.10) !important;border:1px solid rgba(16,19,15,.10) !important}
.country-card__code-badge{right:92px !important;background:transparent !important;color:#10130f !important;box-shadow:none !important;border-radius:0 !important;min-width:0 !important;height:auto !important;padding:0 !important;font-size:13px !important;font-weight:1000 !important;letter-spacing:.075em !important}
.country-card:hover .country-card__code-badge{background:transparent !important;color:#fff !important}
@media(max-width:520px){
  .country-card{padding-right:104px !important}
  .country-card__flag-img{right:14px !important;width:60px !important;height:38px !important;border-radius:4px !important}
  .country-card__code-badge{right:80px !important;font-size:12px !important}
}

/* v91 performance: invisible lazy-scroll sentinel and off-screen card containment.
   No visual layout change; this only reduces main-thread work while scrolling. */
.card-load-sentinel{width:1px;height:1px;pointer-events:none;opacity:0;}
@supports (content-visibility:auto){
  .card-shell{content-visibility:auto;contain-intrinsic-size:auto 520px;}
  #cards.cards-compact .card-shell{contain-intrinsic-size:auto 620px;}
}
@media (max-width:900px){
  @supports (content-visibility:auto){
    .card-shell{content-visibility:visible;contain-intrinsic-size:auto none;}
    #cards.cards-compact .card-shell{contain-intrinsic-size:auto none;}
  }
}

/* Forecast footer scale: collapsed by default to keep base footer low */
body:not(.landing){
  padding-bottom:54px;
}
.radar-footer{
  padding:6px 18px !important;
  gap:4px !important;
}
.radar-footer.scale-open{
  padding-bottom:8px !important;
}
.forecast-scale-toggle{
  border:1px solid var(--line);
  background:#fff;
  color:#10130f;
  border-radius:999px;
  padding:6px 10px;
  font:inherit;
  font-size:10px;
  font-weight:1000;
  cursor:pointer;
  white-space:nowrap;
}
.forecast-scale-toggle:hover,
.radar-footer.scale-open .forecast-scale-toggle{
  background:#10130f;
  color:#fff;
}
.forecast-scale-panel[hidden]{
  display:none !important;
}
.forecast-scale-panel{
  display:grid;
  gap:3px;
}
@media(max-width:900px){
  body:not(.landing){
    padding-bottom:72px;
  }
  .radar-footer{
    max-height:72px;
  }
  .radar-footer.scale-open{
    max-height:118px;
  }
}

/* Auth, favorites and country markers. Lovable target: Supabase Auth + favorites table. */
.login-btn,.favorites-btn{font-weight:1000}
.login-btn.is-logged-in{box-shadow:0 0 0 2px rgba(29,185,84,.22) inset}
.favorites-btn.active{background:#10130f;color:#fff}
.favorite-toggle{position:absolute;top:10px;left:10px;z-index:7;width:30px;height:30px;border:1px solid rgba(16,19,15,.16);border-radius:10px;background:rgba(255,255,255,.86);color:#9ca197;display:grid;place-items:center;font-size:20px;font-weight:1000;line-height:1;cursor:pointer;box-shadow:0 8px 18px rgba(0,0,0,.12);backdrop-filter:blur(8px)}
.favorite-toggle:hover{background:#fff;color:#10130f}
.favorite-toggle.active{color:#1db954;background:#fff;border-color:rgba(29,185,84,.38)}
.card-map-actions{position:absolute;top:10px;left:10px;z-index:8;display:flex;align-items:center;gap:7px;pointer-events:auto}
.card-map-actions .select-course-check,.card-map-actions .favorite-toggle{position:static!important;inset:auto!important;transform:none!important;margin:0!important;flex:0 0 auto;width:30px;height:30px;border-radius:10px}
.course-country-flag{display:inline-block;width:18px;height:12px;border-radius:2px;background-image:var(--flag-url);background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 1px 4px rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.72);flex:0 0 18px;margin-right:6px}
.preview .course-country-flag{position:static!important;inset:auto!important;width:18px!important;height:12px!important;object-fit:initial!important}
.card .caption{display:flex;align-items:center;min-width:0}
.card .caption span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-dialog{border:0;border-radius:24px;padding:0;max-width:min(440px,calc(100vw - 30px));box-shadow:0 28px 80px rgba(0,0,0,.28)}
.login-dialog::backdrop{background:rgba(16,19,15,.45);backdrop-filter:blur(7px)}
.login-card{position:relative;display:grid;gap:14px;padding:28px;background:#fff;color:#10130f;border-radius:24px;min-width:min(420px,calc(100vw - 34px))}
.login-card h2{margin:0;font-size:24px;letter-spacing:-.03em}.login-card p{margin:0;color:var(--muted);font-weight:800;line-height:1.35}.login-card label{display:grid;gap:7px;font-size:12px;font-weight:1000;color:var(--muted);text-transform:none}.login-card input{border:1px solid var(--line);border-radius:14px;padding:13px 14px;font:inherit;font-weight:900}.login-submit,.logout-submit{border:0;border-radius:999px;padding:13px 16px;background:var(--green);color:#fff;font:inherit;font-weight:1000;cursor:pointer}.logout-submit{background:#10130f}.login-close{right:14px;top:14px}
.login-toggle{border:1px solid var(--line);border-radius:999px;padding:11px 16px;background:#fff;color:#10130f;font:inherit;font-weight:1000;cursor:pointer;transition:background .15s,color .15s}
.login-toggle:hover{background:#10130f;color:#fff}
.login-admin-link{
  width:100%;
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 16px;
  background:#fff;
  color:#10130f;
  font:inherit;
  font-weight:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
}
.login-admin-link:hover{background:#10130f;color:#fff}


/* v97 mobile forecast footer: controls stay visible in base state. */
@media(max-width:1100px){
  body:not(.landing){padding-bottom:106px !important;}
  .radar-footer{max-height:none !important;padding:6px 10px calc(6px + env(safe-area-inset-bottom)) !important;overflow:visible !important;}
  .radar-footer-head{display:flex !important;flex-direction:column;align-items:center !important;justify-content:center !important;gap:6px 8px !important;}
  .radar-source-picker{min-width:0;}
  .radar-source-button{max-width:132px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .forecast-scale-toggle{min-width:0;padding:6px 9px !important;}
  .radar-footer-row-top{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 8px;}
  .radar-time-controls{display:flex !important;flex-wrap:wrap;justify-content:center !important;align-items:center;gap:5px 8px !important;width:auto;font-size:13px !important;grid-template-columns:none !important;}
  .radar-time-controls button{padding:6px 10px !important;font-size:12px !important;min-width:0;}
  .radar-time-controls span{min-width:0;white-space:nowrap;}
  .radar-time-controls small{white-space:nowrap;font-size:12px;}
  .radar-footer.scale-open{max-height:none !important;}
}
@media(max-width:1100px){
  .radar-footer .unit-footer{display:none !important;}
  .radar-footer.units-open .unit-footer{display:flex !important;flex-wrap:wrap;justify-content:center;}
  .units-toggle{min-width:0;padding:6px 9px !important;}
}
@media(max-width:420px){
  body:not(.landing){padding-bottom:124px !important;}
  /* Use flex-wrap so "Ennusteaika ..." and "Sääennuste 2 h välein" fit on the same row when there's space. */
  .radar-time-controls{display:flex !important;flex-wrap:wrap;align-items:center;gap:4px 8px !important;grid-template-columns:none !important;}
  .radar-time-controls button{flex:0 0 auto;}
  .radar-time-controls span{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .radar-time-controls small{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;}
}



/* v100 footer unit badges: card badges stay clean; conversion is display-only. */
.unit-footer{min-width:0;display:flex;align-items:center;justify-content:center;flex:1 1 auto;max-width:520px;}
.unit-controls{display:flex;align-items:center;gap:5px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:1px 0;}
.unit-controls::-webkit-scrollbar{display:none;}
.unit-control-group{display:flex;align-items:center;gap:3px;flex:0 0 auto;padding:2px 3px;border:1px solid rgba(16,19,15,.10);border-radius:999px;background:rgba(255,255,255,.58);}
.unit-control-group>span{font-size:8px;font-weight:1000;color:var(--muted);padding-left:4px;letter-spacing:.01em;}
.unit-control-group>div{display:flex;align-items:center;gap:2px;}
.unit-chip{border:0;background:transparent;color:#10130f;border-radius:999px;padding:4px 6px;font:inherit;font-size:9px;font-weight:1000;line-height:1;white-space:nowrap;cursor:pointer;touch-action:manipulation;}
.unit-chip.active{background:#10130f;color:#fff;box-shadow:0 4px 12px rgba(16,19,15,.15);}
.unit-chip:focus-visible{outline:2px solid rgba(16,19,15,.32);outline-offset:2px;}
.badge-item[data-unit-group] .badge-item__value{white-space:nowrap;}
@media(max-width:1100px){
  body:not(.landing){padding-bottom:136px !important;}
  .unit-footer{max-width:100%;justify-content:center;width:100%;}
  .unit-controls{width:auto;justify-content:center;flex-wrap:wrap;padding-bottom:1px;}
  .unit-control-group>span{display:none;}
  .unit-chip{font-size:9px;padding:5px 7px;}
}
@media(max-width:420px){
  body:not(.landing){padding-bottom:150px !important;}
  .unit-chip{padding:5px 6px;font-size:8.5px;}
}


/* v102 mobile hamburger ownership: auth and favorites live inside the mobile menu. */
@media(max-width:1100px){
  .topbar:not(.mobile-open) > .favorites-btn,
  .topbar:not(.mobile-open) > .login-btn{
    display:none !important;
  }
  .topbar.mobile-open > .favorites-btn,
  .topbar.mobile-open > .login-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    width:100% !important;
    min-width:100% !important;
    height:44px !important;
    border-radius:999px !important;
  }
  .topbar.mobile-open > .favorites-btn::after,
  .topbar.mobile-open > .login-btn::after,
  .topbar.mobile-open > .feedback-btn::after,
  .topbar.mobile-open > .dropdown > .round-btn::after,
  .topbar.mobile-open > .menu-pair-row > .dropdown > .round-btn::after{
    content:attr(data-mobile-label);
    font-size:12px;
    font-weight:1000;
    line-height:1;
    max-width:calc(100vw - 96px);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-left:6px;
  }
  .topbar.mobile-open > .dropdown > .round-btn,
  .topbar.mobile-open > .menu-pair-row > .dropdown > .round-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }
  .topbar.mobile-open > .feedback-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
  }
}


/* v104 radar footer: source and scale belong together; radar scale follows selected provider. */
.radar-footer-head{
  display:grid !important;
  grid-template-columns:auto auto minmax(180px,1fr) auto !important;
  align-items:center !important;
  justify-content:normal !important;
  gap:6px !important;
}
.radar-source-picker{justify-self:start;}
.forecast-scale-toggle{justify-self:start !important;margin-left:0 !important;}
.unit-footer{justify-self:center;}
.radar-time-controls{justify-self:end;}
@media(min-width:1101px){
  #unitsToggle{display:none !important;}
}
.scale span{background:var(--scale-color,#cfe8ff);}
.scale-labels{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) auto !important;
  align-items:center;
}
.scale-labels span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.scale-labels span:nth-child(1){text-align:left}
.scale-labels span:nth-child(2),.scale-labels span:nth-child(3){text-align:center}
.scale-labels span:nth-child(4){text-align:right}
.scale-labels em{font-style:normal;font-size:9px;font-weight:1000;color:var(--muted);text-align:right;white-space:nowrap;}
@media(max-width:700px){
  .radar-footer-head{grid-template-columns:auto auto 1fr !important;gap:5px !important;}
  .unit-footer{grid-column:1/-1;justify-self:stretch;}
  .radar-time-controls{grid-column:1/-1;justify-self:stretch;}
  .scale-labels{grid-template-columns:repeat(2,minmax(0,1fr)) auto !important;font-size:9px;}
  .scale-labels span:nth-child(1){text-align:left;}
  .scale-labels span:nth-child(2){text-align:right;}
  .scale-labels em{grid-column:3;text-align:right;}
}

/* v106 landing FAQ/privacy popup: entry page only, no country-page impact */
body.landing .landing-legalbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-top:22px;
}
body.landing .landing-legalbtn{
  border:1px solid rgba(23,35,22,.14);
  background:#fff;
  color:#101812;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  font-size:14px;
  line-height:1;
  box-shadow:0 8px 24px rgba(28,38,22,.08);
  cursor:pointer;
}
body.landing .landing-legalbtn:hover{transform:translateY(-1px)}
body.landing .landing-consent{
  max-width:760px;
  margin:14px auto 0;
  text-align:center;
  font-size:13px;
  line-height:1.45;
  color:rgba(23,35,22,.68);
  font-weight:800;
}
.landing-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}
.landing-modal.open{display:block}
.landing-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(13,18,13,.58);
  backdrop-filter:blur(10px);
}
.landing-modal__panel{
  position:relative;
  width:min(780px,calc(100vw - 28px));
  max-height:min(82vh,860px);
  margin:8vh auto;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid rgba(23,35,22,.12);
  border-radius:30px;
  padding:28px;
  box-shadow:0 24px 80px rgba(0,0,0,.24);
}
.landing-modal__close{
  position:absolute;
  top:26px;
  right:26px;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#101812;
  color:#fff;
  font-size:28px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  z-index:2;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.landing-modal__panel h2{
  flex:0 0 auto;
  margin:0 58px 18px 0;
  font-size:clamp(28px,4vw,44px);
  line-height:.98;
  letter-spacing:-.055em;
  color:#070b08;
}
.landing-modal__body{
  min-height:0;
  overflow:auto;
  padding-right:8px;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.legal-sections{
  display:grid;
  gap:12px;
}
.legal-section{
  border:1px solid rgba(23,35,22,.12);
  border-radius:18px;
  padding:14px 16px;
  background:#f8faf6;
}
.legal-section h3{
  margin:0 0 5px;
  font-size:16px;
  line-height:1.2;
  color:#101812;
}
.legal-section p{
  margin:0;
  color:rgba(23,35,22,.76);
  font-size:14px;
  line-height:1.45;
  font-weight:750;
}
body.landing-modal-open{overflow:hidden}

/* Guide modal — invitational, structured */
.guide-modal-body .guide-intro{
  margin:0 0 16px;
  font-size:15.5px;
  line-height:1.55;
  color:rgba(23,35,22,.85);
  font-weight:700;
}
.guide-grid{display:grid;grid-template-columns:1fr;gap:10px}
@media (min-width:720px){.guide-grid{grid-template-columns:1fr 1fr;gap:12px}}
.guide-card{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px 16px;border-radius:18px;
  background:linear-gradient(135deg,rgba(255,255,255,.86),rgba(244,250,239,.74));
  border:1px solid rgba(23,35,22,.10);
  box-shadow:0 4px 14px -8px rgba(23,35,22,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.guide-card:hover{transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(23,35,22,.28)}
.guide-card__icon{
  flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#c5f0a5,#7fc665);
  font-size:22px;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(23,35,22,.10);
}
.guide-card__text{flex:1 1 auto;min-width:0}
.guide-card__text h3{
  margin:0 0 4px;font-size:15px;font-weight:850;color:#101812;
  letter-spacing:-.01em;
}
.guide-card__text p{
  margin:0;color:rgba(23,35,22,.78);font-size:13.5px;line-height:1.5;font-weight:650;
}
@media (max-width:640px){
  body.landing .landing-shell{padding:24px 18px;border-radius:26px}
  body.landing .landing-legalbar{justify-content:flex-start}
  body.landing .landing-legalbtn{font-size:13px;padding:10px 12px}
  .landing-modal__panel{width:calc(100vw - 18px);max-height:88vh;margin:6vh auto;padding:22px 12px 22px 16px;border-radius:24px}
  .landing-modal__close{top:18px;right:14px;width:38px;height:38px;font-size:25px}
  .landing-modal__panel h2{margin-right:48px}
  .landing-modal__body{padding-right:4px}
  .legal-section{padding:12px 13px;border-radius:16px}
}


/* v110 landing slogan: small multilingual type-on line, landing page only */
body.landing .landing-slogan{
  max-width:780px;
  margin:0 0 14px;
  color:#101812;
  font-size:clamp(18px,3vw,28px);
  line-height:1.15;
  letter-spacing:-.035em;
  font-weight:1000;
  min-height:1.2em;
  white-space:pre-line;
}

body.landing .landing-slogan::after{display:none}

@media (max-width:640px){
  body.landing .landing-slogan{font-size:18px;margin-bottom:12px}
}


/* v105 mobile+tablet footer: clean 3-row centered layout */
@media(max-width:1100px){
  .radar-footer-head{
    display:grid !important;
    grid-template-columns:auto auto auto !important;
    grid-template-areas:
      "src scale unitsBtn"
      "units units units"
      "time time time" !important;
    justify-content:center !important;
    align-items:center !important;
    row-gap:6px !important;
    column-gap:8px !important;
  }
  .radar-source-picker{grid-area:src !important;justify-self:end !important;}
  #forecastScaleToggle{grid-area:scale !important;justify-self:center !important;}
  #unitsToggle{grid-area:unitsBtn !important;justify-self:start !important;}
  .unit-footer{grid-area:units !important;justify-self:center !important;width:auto !important;max-width:100% !important;}
  .radar-time-controls{grid-area:time !important;justify-self:center !important;width:auto !important;}
}

#radarTimeLabel{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;}
#radarTimeLabel:hover{color:#10130f;}


.detail-sources{font-size:12px;color:#6b7280;margin:6px 0 10px;line-height:1.4}
.detail-radar-notice{font-size:11px;color:#6b7280;margin:4px 0 8px;line-height:1.4;font-style:italic}

/* Admin views scroll + formulas page */
.admin-view.active{overflow-y:auto;max-height:calc(100vh - 160px);}
#adminFormulas{padding-bottom:40px;}
.badge-explanation-langs{display:grid;gap:6px}
.badge-explanation-lang{display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:start}
.badge-explanation-lang span{font-size:11px;color:var(--muted);padding-top:8px;font-weight:700}
.badge-explanation-lang textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px;font:12px/1.4 system-ui,sans-serif;resize:vertical}

/* Detail popup: badge explanations dropdown */
.badge-explanations{margin:10px 0;border:1px solid var(--line);border-radius:14px;background:#fafafa}
.badge-explanations>summary{cursor:pointer;padding:10px 14px;font-weight:800;font-size:13px;list-style:none;display:flex;align-items:center;gap:8px}
.badge-explanations>summary::-webkit-details-marker{display:none}
.badge-explanations>summary::after{content:'▾';margin-left:auto;transition:transform .2s}
.badge-explanations[open]>summary::after{transform:rotate(180deg)}
.badge-explanations-list{display:grid;gap:8px;padding:4px 14px 14px}
.badge-explanation{display:grid;gap:2px;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:12px;line-height:1.45}
.badge-explanation b{font-size:12px;color:#10130f}
.badge-explanation span{color:#3a4138}

/* Weather condition icon chip (sits under the wind arrow chip) */
.weather-icon-chip{position:absolute;top:80px;right:11px;z-index:6;width:42px;height:42px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#fff;border:0;box-shadow:0 6px 14px rgba(0,0,0,.12);pointer-events:none}
.weather-icon-chip .weather-icon-svg{width:32px;height:32px;display:block}
.preview .weather-icon-chip{top:80px;right:11px;width:42px;height:42px;background:#fff;border:0}
.preview .weather-icon-chip .weather-icon-svg{width:32px;height:32px}
.wind-value-chip{position:absolute;top:57px;right:8px;z-index:7;padding:3px 8px;border-radius:999px;background:rgba(16,19,15,.82);color:#fff;font-size:12px;font-weight:600;line-height:1;letter-spacing:.2px;box-shadow:0 4px 10px rgba(0,0,0,.18);pointer-events:none;white-space:nowrap}
.forecast-strip__metric{display:inline-block;font-size:11px;font-weight:700;background:#eef9f1;border:1px solid #bfe3ca;border-radius:999px;padding:2px 6px;margin-bottom:3px;line-height:1.1;color:#10130f}
.forecast-strip__metric small{display:block;font-size:9px;font-weight:600;opacity:.75}
.course-map-badges .wind-value-chip,.leaflet-tooltip .wind-value-chip{display:none}
.detail-map-side{position:relative}
.weather-icon-chip--detail{position:absolute;top:140px;right:14px;width:42px;height:42px;z-index:600;background:#fff;border-radius:999px;display:grid;place-items:center;border:0;box-shadow:0 6px 14px rgba(0,0,0,.12);pointer-events:none}
.weather-icon-chip--detail .weather-icon-svg{width:32px;height:32px}
#detailWind{z-index:600}
.forecast-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px;padding:0;background:transparent;border:0;border-radius:0}
.forecast-strip__cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.forecast-strip__label{font-size:13px;font-weight:600;color:#5b6470;letter-spacing:.02em}
.forecast-strip__icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center}
.forecast-strip__icon .weather-icon-svg{width:30px;height:30px}
.forecast-strip__temp{font-size:16px;font-weight:700;color:#10130f}
.forecast-strip__rain{font-size:14px;font-weight:600;color:#1e7bd9;letter-spacing:.02em}
.forecast-strip__wind{font-size:14px;font-weight:600;color:#5b6470;letter-spacing:.02em}
.forecast-strip--rank{grid-template-columns:repeat(5,1fr);margin-top:8px;max-width:520px}
.forecast-strip--rank .forecast-strip__cell{padding:3px 2px}
.forecast-strip--rank .forecast-strip__label{font-size:11px}
.forecast-strip--rank .forecast-strip__icon{width:24px;height:24px}
.forecast-strip--rank .forecast-strip__icon .weather-icon-svg{width:24px;height:24px}
.forecast-strip--rank .forecast-strip__temp{font-size:13px}
.forecast-strip--rank .forecast-strip__rain,.forecast-strip--rank .forecast-strip__wind{font-size:11px}
@media (max-width:560px){
  .forecast-strip--rank{grid-template-columns:repeat(3,1fr)}
  .forecast-strip--rank .forecast-strip__cell:nth-child(n+4){display:none}
}

/* Detailed forecast grid in popup (+2/+4/+6/+8h) */
.fc-detail{
  margin-top:10px;
  background:rgba(255,255,255,.55);
  border-radius:14px;
  padding:6px 8px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.fc-detail__caption{
  font-size:12px;
  color:#333;
  padding:2px 4px 4px;
  opacity:.85;
}
.fc-detail__row{
  display:grid;
  grid-template-columns:84px repeat(4,1fr);
  gap:4px;
  align-items:center;
}
.fc-detail__row--head{
  margin-bottom:2px;
}
.fc-detail__rowlabel{
  font-size:11px;
  font-weight:700;
  color:#5a6170;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding-left:4px;
}
.fc-detail__cell{
  background:#fff;
  border-radius:8px;
  padding:3px 4px;
  text-align:center;
  font-size:15px;
  font-weight:700;
  color:#10130f;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.fc-detail__cell--head{
  flex-direction:column;
  gap:1px;
  padding:4px 4px;
  min-height:54px;
}
.fc-detail__step{
  font-size:11px;
  color:#5a6170;
  font-weight:700;
  line-height:1;
}
.fc-detail__icon .weather-icon-svg{
  width:24px; height:24px;
}
.fc-detail__temp{
  font-size:14px;
  font-weight:800;
  line-height:1;
}
@media(max-width:520px){
  .fc-detail__row{ grid-template-columns:64px repeat(4,1fr); }
  .fc-detail__rowlabel{ font-size:10px; }
  .fc-detail__cell{ font-size:13px; padding:5px 2px; }
}
.fc-detail__block{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.fc-detail__block:first-of-type{margin-top:0}



/* ===== Selection badge (header) — replaces floating selection bar ===== */
.selection-bar{display:none !important}
.selection-badge{
  position:relative;
  min-width:34px; height:34px; padding:0 10px;
  border-radius:999px;
  background:#10b981; color:#fff;
  border:2px solid #fff;
  font-weight:800; font-size:14px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  cursor:pointer;
}
.selection-badge[hidden]{display:none !important}
.selection-badge.pulse{animation:selBadgePulse .9s ease}
@keyframes selBadgePulse{
  0%{transform:scale(1)}
  40%{transform:scale(1.25);box-shadow:0 6px 18px rgba(16,185,129,.6)}
  100%{transform:scale(1)}
}
.multi-map-clear{
  position:absolute; top:12px; right:56px; z-index:1001;
  background:#fff; color:#10130f;
  border:1px solid rgba(16,19,15,.18);
  border-radius:999px; padding:8px 14px;
  font-weight:700; font-size:13px; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.18);
}
.multi-map-clear:hover{background:#f4f4f4}

/* Card tap hint — visible only on touch/mobile */
.cards-tap-hint{display:none;margin:-4px 0 8px;font-size:11px;color:var(--muted);font-weight:700;text-align:center;opacity:.85}
@media(max-width:1024px){
  .cards-tap-hint{display:block;color:#b8d4c2;margin-top:10px}
  .cards-section > h1,
  main h1:has(#visibleCount){
    color:#eaf5ee !important;
    text-shadow:0 0 1px rgba(140,200,160,.35);
  }
  #visibleCount{color:#b8e0c5}
}

/* Map tool buttons (locate + measure) inside detail dialog */
.map-tool-btn{position:absolute;right:14px;z-index:600;width:42px;height:42px;border:0;background:#fff;border-radius:999px;display:grid;place-items:center;color:var(--green,#0a7a3b);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.18);transition:background .15s,color .15s,transform .1s;touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,0,0,.1);pointer-events:auto}
.map-tool-btn:hover{background:#f1f9f3}
.map-tool-btn:active{transform:scale(.94)}
.map-tool-btn.is-active{background:var(--green,#0a7a3b);color:#fff}
.map-tool-btn--locate{top:190px}
.map-tool-btn--measure{top:240px}
.map-measure-hint{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;z-index:1100;max-width:calc(100% - 32px);background:#000;color:#fff;font-size:13px;line-height:1.35;padding:8px 12px;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap}
.map-measure-hint[hidden]{display:none}
.map-measure-distance{font-weight:700;font-size:14px}
.leaflet-measure-label{background:rgba(0,0,0,.78);color:#fff;border-radius:8px;padding:4px 8px;font-size:13px;font-weight:700;border:0;box-shadow:0 2px 6px rgba(0,0,0,.3);white-space:nowrap}
.leaflet-measure-label::before{display:none}
@media (max-width: 640px){
  .map-measure-hint{left:0;right:0;bottom:0;transform:none;max-width:100%;width:100%;border-radius:0;padding:6px 10px;font-size:12px;text-align:center;white-space:normal;box-shadow:none;display:flex;align-items:center;justify-content:center;gap:8px}
}

/* Wind chip caption ("Tuulen suunta" etc.) */
#detailWind[data-label]::after{
  content:attr(data-label);
  position:absolute;
  right:0;
  top:46px;
  background:rgba(0,0,0,.72);
  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:3px 7px;
  border-radius:6px;
  white-space:nowrap;
  pointer-events:none;
  letter-spacing:.02em;
}
#detailWind{overflow:visible !important}

/* Cards toolbar — compact map toggle */
.cards-toolbar{display:flex;justify-content:flex-start;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 4px;padding:0 4px}
.weather-model-picker{position:relative}
.weather-model-toggle__value{font-weight:700;padding:0 8px;border-radius:999px;background:rgba(16,19,15,.08);color:inherit;line-height:1.2}
.weather-model-toggle[aria-expanded="true"] .weather-model-toggle__caret{transform:rotate(180deg)}
.weather-model-toggle__caret{font-size:11px;line-height:1;transition:transform .15s}
.weather-model-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:50;min-width:180px;background:#fff;border:1px solid rgba(16,19,15,.18);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:6px;display:flex;flex-direction:column;gap:2px}
.weather-model-menu[hidden]{display:none}
.weather-model-menu button{display:flex;align-items:center;gap:8px;padding:8px 12px;border:0;background:transparent;border-radius:8px;font:600 13px/1.2 inherit;color:#10130f;text-align:left;cursor:pointer}
.weather-model-menu button:hover{background:rgba(16,19,15,.06)}
.weather-model-menu button[aria-selected="true"]{background:#10130f;color:#fff}
.compact-cards-toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid rgba(16,19,15,.18);background:rgba(255,255,255,.92);font:600 13px/1.2 inherit;color:#10130f;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.06);transition:background .15s,border-color .15s,transform .1s}
.compact-cards-toggle:hover{background:#fff;border-color:rgba(16,19,15,.32)}
.compact-cards-toggle:active{transform:translateY(1px)}
.compact-cards-toggle[aria-pressed="true"]{background:#10130f;color:#fff;border-color:#10130f}
.compact-cards-toggle__icon{font-size:15px;line-height:1}

/* Compact mode: hide bottom 8 badges, grow map */
#cards.cards-compact .course-card .badge-grid--card .badge-item:nth-child(n+9){display:none}
#cards.cards-compact .course-card .preview{height:270px}
/* Detailed weather (toggle off compact): hide extended forecast cells (5..12) by default; show all in detailed mode */
.course-card .forecast-strip__cell:nth-child(n+5){display:none}
#cards:not(.cards-compact) .course-card .forecast-strip__cell{display:flex}

/* Quick action badges at the bottom of each course card */
.card-quick-actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:8px;
}
.card-quick-action{
  display:flex;align-items:center;justify-content:center;gap:4px;
  padding:6px 4px;border-radius:8px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  color:inherit;text-decoration:none;
  font-size:11px;font-weight:600;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background .15s ease,border-color .15s ease;
}
.card-quick-action:hover{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.24)}
.card-quick-action span[aria-hidden]{font-size:13px}

/* Align bottoms of stacked content across same-row course cards.
   Body is already display:flex column (line 1896). Pin the bottom block
   (quick actions) to the bottom; everything between header (h3/p) and the
   bottom block keeps its natural order, so when one card is forced taller
   by wrapping text, the extra space appears between the address line and
   the first badge row — not at the bottom of the card. */
.cards-grid{align-items:stretch !important}
.course-card{display:flex !important;flex-direction:column !important;height:100% !important}
.course-card .card-shell__body{display:flex !important;flex-direction:column !important;flex:1 1 auto !important}
.course-card .card-shell__body > .badge-grid:first-of-type{margin-top:auto !important}


/* Back-to-top floating button */
.back-to-top{
  position:fixed;right:18px;bottom:62px;z-index:9999;
  width:42px;height:42px;border-radius:999px;border:none;
  background:rgba(20,20,28,.78);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.08) inset;
  opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,background .15s ease;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.back-to-top.is-visible{opacity:1;transform:translateY(0)}
.back-to-top:hover{background:rgba(35,35,48,.9)}
@media(max-width:1024px){.back-to-top{bottom:122px}}
@media (max-width:640px){.back-to-top{right:12px;bottom:122px;width:40px;height:40px}}

/* Card sort selects in toolbar */
.card-sort-row{display:flex;gap:8px;align-items:center}
.card-sort-row .select{max-width:170px;flex:0 1 auto}
@media(max-width:1100px){
  .topbar > .card-sort-row{display:none !important}
  .topbar.mobile-open > .card-sort-row{display:flex !important;grid-column:1 / -1 !important;width:100% !important;gap:8px !important}
  .topbar.mobile-open > .card-sort-row .select{flex:1 1 0 !important;max-width:none !important;width:auto !important;min-width:0 !important}
  .topbar.mobile-open > .card-sort-row #cardSortDir[hidden]{display:none !important}
}

/* Inline search input in cardsView header (mobile/tablet replacement for H1) */
.cards-inline-search{display:none}
@media(max-width:900px){
  #cardsView > h1.cards-title-h1{display:none}
  .cards-inline-search{display:block;width:100%;box-sizing:border-box;margin:6px 0 10px;padding:12px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.45);color:#fff;font-size:15px;font-weight:600;outline:none}
  .cards-inline-search::placeholder{color:rgba(255,255,255,.7);font-weight:500}
  .cards-inline-search:focus{border-color:rgba(255,255,255,.45);background:rgba(0,0,0,.6)}
}

@media (max-width: 600px) {
  .public-tabs{justify-content:center !important}
  .cards-toolbar{justify-content:center !important;padding:0 !important}
}

/* Desktop: multi-map popup uses same dim+blur as FAQ landing modal, and keeps the sticky forecast footer visible */
@media(min-width:1025px){
  .multi-map-modal{
    background:rgba(13,18,13,.58) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    bottom:var(--footer-h, 110px) !important;
  }
}

/* Admin topbar: compact pill (no flag), toggleable dropdown nav on all viewports */
.admin-topbar{
  grid-template-columns:auto 1fr auto !important;
  gap:10px;
  align-items:center;
}
.admin-logo{
  padding:6px 16px !important;
  min-height:34px !important;
  font-size:13px !important;
  letter-spacing:.04em !important;
}
.admin-nav-toggle{
  justify-self:end;
  cursor:pointer;
  font-weight:800;
}
.admin-nav{
  grid-column:1 / -1;
  display:none;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  padding-top:8px;
  border-top:1px solid var(--line, rgba(0,0,0,.08));
  margin-top:4px;
}
.admin-topbar.nav-open .admin-nav{display:flex}
.admin-lock{margin-left:auto}
@media(max-width:900px){
  .admin-topbar{
    grid-template-columns:1fr auto !important;
    gap:8px !important;
    padding:10px 12px !important;
  }
  .admin-topbar.nav-open .admin-nav{
    display:grid !important;
    grid-template-columns:1fr;
    gap:6px;
    width:100%;
  }
  .admin-nav .btn{
    width:100%;
    text-align:center;
  }
  .admin-lock{margin-left:0 !important}
}


/* Desktop popup blur: use a dedicated fixed overlay instead of body::before for reliable rendering. */
.popup-blur-overlay{
  position:fixed;
  inset:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:9000;
}
@media(min-width:1025px){
  body.popup-open::before{
    display:none !important;
  }
  .popup-blur-overlay{
    background:rgba(13,18,13,.58);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:opacity .16s ease, visibility .16s ease;
  }
  body.popup-open .popup-blur-overlay{
    opacity:1;
    visibility:visible;
  }
  body.popup-open .radar-footer{
    z-index:9500 !important;
  }
  body.popup-open .detail-dialog,
  body.popup-open .ad-dialog,
  body.popup-open .multi-map-modal{
    z-index:9999 !important;
  }
}
@media(max-width:1024px){
  body.popup-open::before,
  .popup-blur-overlay{
    display:none !important;
  }
}

/* Admin pages: enable horizontal scroll on tablet/mobile when content overflows */
@media(max-width:1024px){
  body:has(.admin-topbar) main.wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    max-width:100vw;
  }
}


/* Smart Caddie panel — sits high in the detail info sidebar (collapsible, dark) */
.smart-caddie-wrap{margin:8px 0 14px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(15,23,42,.92);color:#e2e8f0;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.smart-caddie-wrap > summary{cursor:pointer;list-style:none;padding:8px 12px;font-weight:600;font-size:14px;background:rgba(255,255,255,.05);color:#f1f5f9;user-select:none;display:flex;align-items:center;justify-content:space-between}
.smart-caddie-wrap > summary::-webkit-details-marker{display:none}
.smart-caddie-wrap > summary::after{content:"▾";opacity:.7;font-size:12px;transition:transform .15s}
.smart-caddie-wrap:not([open]) > summary::after{transform:rotate(-90deg)}
.smart-caddie-presets{display:flex;gap:6px;padding:8px 12px 0;flex-wrap:wrap}
.smart-caddie-presets button{flex:1;min-width:0;background:rgba(255,255,255,.06);color:#cbd5e1;border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:4px 8px;font-size:12px;cursor:pointer;transition:all .15s}
.smart-caddie-presets button:hover{background:rgba(255,255,255,.12);color:#f1f5f9}
.smart-caddie-presets button.is-active{background:#16a34a;border-color:#16a34a;color:#fff}
.smart-caddie{padding:8px 12px 10px;font-size:13px;line-height:1.4}
.smart-caddie .caddie-row{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.smart-caddie .caddie-row:last-child{border-bottom:none}
.smart-caddie .caddie-playas strong{color:#7dd3fc;font-size:15px}
.smart-caddie .caddie-suggest strong{color:#86efac;font-size:14px}
.smart-caddie .caddie-suggest .caddie-delta{color:#cbd5e1;font-weight:500;font-size:12px;margin-left:6px}
.smart-caddie .caddie-hint{font-size:11px;color:#cbd5e1;font-style:italic;border-bottom:none;padding-top:6px;display:block}
.smart-caddie .caddie-breakdown{margin-top:6px;border-top:1px dashed rgba(255,255,255,.15);padding-top:6px}
.smart-caddie .caddie-breakdown > summary{cursor:pointer;list-style:none;font-size:12px;color:#93c5fd;padding:2px 0;user-select:none}
.smart-caddie .caddie-breakdown > summary::-webkit-details-marker{display:none}
.smart-caddie .caddie-breakdown > summary::before{content:"▸ ";font-size:10px}
.smart-caddie .caddie-breakdown[open] > summary::before{content:"▾ "}
.smart-caddie .caddie-eq{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;padding:6px 0 2px;font-size:12px;color:#e2e8f0}
.smart-caddie .caddie-eq em{font-style:normal;color:#94a3b8;font-size:11px}
.smart-caddie .caddie-eq strong{color:#7dd3fc}
.smart-caddie .caddie-link{justify-content:flex-end;border-bottom:none;padding-top:8px}
.smart-caddie .caddie-link a{color:#93c5fd;font-size:12px;text-decoration:none}
.smart-caddie .caddie-link a:hover{text-decoration:underline}
.smart-caddie .caddie-section{margin-top:8px;padding:6px 8px;background:rgba(255,255,255,.04);border-radius:6px;border-left:2px solid rgba(125,211,252,.4)}
.smart-caddie .caddie-section:nth-of-type(2){border-left-color:rgba(134,239,172,.4)}
.smart-caddie .caddie-section:nth-of-type(3){border-left-color:rgba(252,211,77,.5)}
.smart-caddie .caddie-section h4{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:#cbd5e1;font-weight:600}
.smart-caddie .caddie-eq-line{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12px;color:#e2e8f0;padding:2px 0}
.smart-caddie .caddie-eq-line em{font-style:normal;color:#94a3b8;font-size:11px}
.smart-caddie .caddie-eq-line strong{color:#7dd3fc}
.smart-caddie .caddie-tips{flex-direction:column;align-items:flex-start;gap:2px;color:#fbbf24;font-size:11.5px;margin-top:4px}



/* Flag icons inside language/country dropdowns */
.menu-flag{width:20px;height:14px;object-fit:cover;border-radius:2px;flex-shrink:0;vertical-align:middle;margin-right:8px;border:1px solid rgba(0,0,0,.08)}
.dropdown button,.dropdown a{display:flex !important;align-items:center;gap:0}

.card-load-more-btn{display:block;margin:24px auto;padding:14px 28px;font-size:15px;font-weight:600;border:1px solid var(--border,#d1d5db);border-radius:999px;background:var(--card,#fff);color:var(--fg,#111);cursor:pointer;transition:all .15s ease;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card-load-more-btn:hover{background:var(--accent,#f3f4f6);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.card-load-more-btn:active{transform:translateY(0)}