/*
  The "adotta i tuoi alberi" widget: the aerial-photo map, its legend and
  tooltip, plus the selection summary / reservation form next to it.
  Marker colors are intentionally hard-coded (not theme tokens): they sit
  on top of a real photograph, not on themed UI chrome, so they need to
  read against the photo's own greens and browns in both light and dark
  mode rather than swap with the page.
*/

.grove-layout{display:grid; grid-template-columns:1.3fr 0.9fr; gap:28px; margin-top:36px; align-items:start;}
@media (max-width:900px){ .grove-layout{grid-template-columns:1fr;} }

.grove-panel{background:var(--paper-raised); border:1px solid var(--line); border-radius:8px; padding:16px; position:relative;}
.grove-panel svg{width:100%; height:auto; display:block; touch-action:manipulation; overflow:visible; border-radius:4px;}

.grove-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:0.7rem; color:var(--ink-soft);}
.grove-legend span{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.grove-legend b{font-weight:600; color:var(--ink);}
.grove-caption{margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:0.64rem; letter-spacing:0.02em; color:var(--ink-soft); opacity:0.8;}

.grove-tooltip{
  position:absolute; left:0; top:0; z-index:6; pointer-events:none;
  background:var(--ink); color:var(--paper-raised);
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; line-height:1.4;
  padding:8px 11px; border-radius:5px; max-width:190px;
  opacity:0; transform:translate(-50%,-100%) translateY(-6px) scale(.96);
  transition:opacity .12s ease, transform .12s ease;
}
.grove-tooltip.visible{opacity:1; transform:translate(-50%,-100%) translateY(-12px) scale(1);}
.grove-tooltip b{display:block; font-family:'Jost',sans-serif; font-size:0.85rem; font-weight:600; margin-bottom:2px; letter-spacing:0; text-transform:none;}

/* ---- tree markers, overlaid on the aerial photo ---- */
.tree{transform-box:fill-box; transform-origin:center; transition:transform .15s ease;}
.tree.available{cursor:pointer;}
.tree .halo{fill:none; stroke:rgba(255,255,255,0.85); stroke-width:2.5;}
.tree.available .core{fill:none; stroke:#2f2911; stroke-width:1.4;}
.tree.selected .core{fill:#b3cc02; stroke:none;}
.tree.taken .core{fill:rgba(35,32,18,0.6); stroke:none;}
.tree.available:hover, .tree.available:focus-visible{transform:scale(1.35);}
.tree.available:hover .core, .tree.available:focus-visible .core{stroke:#b3cc02; stroke-width:2;}
.tree:focus-visible{outline:none;}
.tree:focus-visible .halo{stroke:#fff; stroke-width:3.5;}

/* ---- selection summary / reservation ---- */
.summary{background:var(--paper-raised); border:1px solid var(--line); border-radius:8px; padding:24px;}
@media (min-width:901px){ .summary{position:sticky; top:20px;} }
.summary h3{font-family:'Jost',sans-serif; font-weight:700; font-size:1.25rem; color:var(--ink);}
.summary-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-block:12px; border-top:1px solid var(--line);}
.summary-row:first-of-type{border-top:none;}
.summary-row .label{color:var(--ink-soft); font-size:0.85rem;}
.summary-row .value{font-family:'IBM Plex Mono',monospace; font-size:1.1rem;}
.summary-row .value.big{font-size:1.5rem; color:var(--accent-deep);}

.stepper{display:flex; align-items:center; gap:10px; margin-top:6px;}
.stepper button{
  width:36px; height:36px; border-radius:50%; flex:none;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font-size:1.2rem; cursor:pointer; line-height:1;
}
.stepper button:hover{background:var(--ink); color:var(--paper-raised);}
.stepper button:disabled{opacity:0.35; cursor:not-allowed; background:transparent; color:var(--ink);}
.stepper .count{font-family:'IBM Plex Mono',monospace; font-size:1.1rem; min-width:2.5ch; text-align:center;}

.disclaimer{font-size:0.78rem; color:var(--ink-soft); margin-top:14px; line-height:1.5;}

.reserve-form{margin-top:18px; display:none; flex-direction:column; gap:10px;}
.reserve-form.open{display:flex;}
.reserve-form input{
  font-family:'Jost',sans-serif; font-size:0.95rem;
  padding:11px 12px; border:1px solid var(--line); border-radius:4px;
  background:var(--paper); color:var(--ink); width:100%;
}
.reserve-confirm{display:none; margin-top:14px; padding:14px; border:1px dashed var(--ink); border-radius:4px; font-size:0.9rem; color:var(--ink);}
.reserve-confirm.open{display:block;}

@media (prefers-reduced-motion: reduce){ .tree, .grove-tooltip{transition:none;} }