/* ============================================================
   The event page: diamond-cut tender coconut for weddings.

   Built on the same tokens as the rest of the site (site.css owns
   --forest, --leaf, --mist, --line, the button and the section
   rhythm). Nothing here restyles a shared class; everything is
   prefixed ev- so the page cannot reach back into the others.
   ============================================================ */

/* ---------- Hero ---------- */
.ev-hero{padding-top:34px;background:linear-gradient(170deg,#F4F9F0,#FBFDF9 62%,#fff)}
.ev-hero-grid{
  display:grid;grid-template-columns:1fr;gap:30px;align-items:center;margin-top:18px
}
.ev-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  background:rgba(125,184,62,.12);border:1px solid rgba(79,138,38,.24);
  color:#3F6B1E;font:600 12.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase
}
html[lang="bn"] .ev-eyebrow{letter-spacing:0;text-transform:none;font-size:13px}
.ev-h1{margin:16px 0 0}
.ev-lead{margin-top:14px;max-width:46ch}

.ev-occ{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0}
.ev-occ li{
  padding:7px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);
  font:500 13.4px/1.3 var(--sans);color:var(--ink)
}
.ev-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

.ev-shot{position:relative;margin:0;border-radius:20px;overflow:hidden;background:var(--mist)}
.ev-shot img{width:100%;height:100%;display:block;object-fit:cover;aspect-ratio:9/11}

/* The slideshow. Slides are stacked and crossfaded rather than slid, so
   nothing moves and the caption pinned over them never shifts. The first
   slide holds the box open; the rest are taken out of the flow. */
.ev-sl{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease,ease)}
.ev-sl:first-child{position:relative}
.ev-sl.on{opacity:1}
.ev-shot[data-ev-slider] .ev-sl img{height:100%}

.ev-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:7px}
.ev-dots button{
  width:7px;height:7px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.5);box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:width .4s var(--ease,ease),background-color .4s
}
.ev-dots button.on{width:20px;background:#fff}

@media (prefers-reduced-motion:reduce){
  .ev-sl{transition:none}
  .ev-dots button{transition:none}
}
/* The price rides on the photograph, which is where the eye already is. */
.ev-shot-tag{
  position:absolute;left:16px;bottom:16px;z-index:2;
  display:flex;align-items:baseline;gap:7px;
  padding:11px 16px;border-radius:14px;
  background:rgba(15,51,37,.86);backdrop-filter:blur(6px);color:#fff;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.8)
}
.ev-shot-tag b{font:800 25px/1 var(--disp);color:#C9EDA4;font-variant-numeric:tabular-nums}
.ev-shot-tag span{font-size:13px;opacity:.85}

/* ---------- The four numbers ---------- */
.ev-facts{padding-top:0}
.ev-fact-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px
}
.ev-fact{
  padding:20px 18px 18px;border-radius:16px;background:#fff;
  border:1px solid var(--line);box-shadow:0 2px 12px rgba(15,51,37,.04)
}
.ev-fact b{
  display:block;font:800 27px/1 var(--disp);color:var(--forest);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em
}
.ev-fact span{display:block;margin-top:5px;font:600 13.4px/1.35 var(--sans);color:#3F6B1E}
.ev-fact small{display:block;margin-top:9px;font-size:12.8px;line-height:1.5;color:var(--muted)}

/* ---------- Book ---------- */
.ev-book{background:linear-gradient(180deg,#fff,#F7FAF4)}
.ev-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}

.ev-step{
  padding:20px 18px 20px;border-radius:16px;background:#fff;
  border:1px solid var(--line);box-shadow:0 2px 12px rgba(15,51,37,.04);
  margin-bottom:14px
}
.ev-step:last-child{margin-bottom:0}
.ev-step-h{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.ev-step-n{
  flex:none;display:grid;place-items:center;width:27px;height:27px;border-radius:8px;
  background:rgba(125,184,62,.14);color:#3F6B1E;
  font:700 12px/1 var(--sans);font-variant-numeric:tabular-nums
}
.ev-step-h h3{flex:1;margin:0;font:600 16px/1.3 var(--disp);color:var(--ink)}
.ev-step-v{
  font:600 14px/1 var(--sans);color:#3F6B1E;text-align:right;
  white-space:nowrap;max-width:45%;overflow:hidden;text-overflow:ellipsis
}
.ev-step-v.num{font-family:var(--disp);font-size:21px;letter-spacing:-.01em}

/* the quantity slider, in the page's own hand rather than the browser's */
.ev-range{
  -webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:linear-gradient(90deg,var(--leaf) var(--p,0%),rgba(15,51,37,.1) var(--p,0%));
  outline:none;cursor:pointer
}
.ev-range::-webkit-slider-thumb{
  -webkit-appearance:none;width:24px;height:24px;border-radius:50%;
  background:#fff;border:2px solid var(--forest);cursor:grab;
  box-shadow:0 3px 10px rgba(15,51,37,.25);transition:transform .2s ease
}
.ev-range::-webkit-slider-thumb:active{transform:scale(1.12);cursor:grabbing}
.ev-range::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:#fff;
  border:2px solid var(--forest);box-shadow:0 3px 10px rgba(15,51,37,.25)
}
.ev-ticks{
  display:flex;justify-content:space-between;margin-top:9px;
  font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums
}

.ev-two{display:grid;grid-template-columns:1fr;gap:12px}
.ev-fld{display:block;margin-top:12px}
.ev-fld:first-child{margin-top:0}
.ev-two .ev-fld{margin-top:0}
.ev-fld>span{
  display:block;margin-bottom:6px;
  font:600 12.4px/1.4 var(--sans);color:var(--muted)
}
.ev-fld input,.ev-fld select,.ev-fld textarea{
  width:100%;height:48px;padding:0 14px;border-radius:11px;
  border:1.5px solid var(--line);background:#FDFCFA;color:var(--ink);
  font:500 14.6px/1 var(--sans);
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease
}
.ev-fld textarea{height:auto;padding:12px 14px;line-height:1.55;resize:vertical}
.ev-fld input:focus,.ev-fld select:focus,.ev-fld textarea:focus{
  outline:none;border-color:#4F8A26;background:#fff;
  box-shadow:0 0 0 3px rgba(125,184,62,.16)
}
/* the browser's own arrow, replaced so the select matches the inputs */
.ev-fld select{
  appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3325' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px
}
.ev-fld.bad input,.ev-fld.bad select,.ev-fld.bad textarea{
  border-color:#D8593F;background:#FFF7F5
}

/* ---------- The running figure ---------- */
.ev-rcpt{
  position:relative;border-radius:18px;overflow:hidden;min-width:0;
  background:linear-gradient(160deg,#123C2B,#0F3325 60%);
  color:#EAF3E4;box-shadow:0 14px 40px rgba(15,51,37,.28)
}
.ev-rc-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:17px 20px;border-bottom:1px solid rgba(255,255,255,.1)
}
.ev-rc-head b{font:700 16.5px/1.2 var(--disp)}
.ev-rc-head span{font-size:12.5px;opacity:.72}
.ev-rc-body{padding:18px 20px 20px}

.ev-rc-line{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;
  margin-bottom:11px;font-size:13.8px;opacity:.94
}
.ev-rc-line b{font-variant-numeric:tabular-nums}
.ev-rc-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:14px 0 0;padding-top:14px;border-top:1px dashed rgba(255,255,255,.18);
  font:600 15px/1.2 var(--sans)
}
.ev-rc-total b{font:800 23px/1 var(--disp);font-variant-numeric:tabular-nums}

.ev-rc-now{
  margin:15px 0 12px;padding:14px 16px;border-radius:13px;
  background:linear-gradient(135deg,rgba(125,184,62,.22),rgba(125,184,62,.08));
  border:1px solid rgba(143,210,106,.3)
}
.ev-rc-now small{
  display:block;font-size:11.4px;letter-spacing:.05em;text-transform:uppercase;opacity:.8
}
html[lang="bn"] .ev-rc-now small{letter-spacing:0;text-transform:none;font-size:12.2px}
.ev-rc-now b{
  display:block;margin-top:4px;font:800 30px/1 var(--disp);color:#C9EDA4;
  font-variant-numeric:tabular-nums
}
.ev-rc-bal{opacity:.8;font-size:13px;margin-bottom:16px}

.ev-send{width:100%;margin-top:2px;background:var(--leaf);color:#0B2318;border:0}
.ev-send:hover{background:#8FD26A}
.ev-send[disabled]{opacity:.6;pointer-events:none}

.ev-rc-talk{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:11px}
.ev-rc-talk a{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:44px;border-radius:11px;text-decoration:none;
  border:1px solid rgba(255,255,255,.22);color:#EAF3E4;
  font:600 13.4px/1 var(--sans);transition:background-color .2s ease
}
.ev-rc-talk a:hover{background:rgba(255,255,255,.08)}
.ev-rc-talk svg{width:16px;height:16px;fill:currentColor}
.ev-wa svg{fill:#8FD26A}
.ev-rc-note{margin:14px 0 0;font-size:11.6px;line-height:1.55;opacity:.62;text-align:center}

/* the notice, which says nothing until there is something to say */
.ev-flash[hidden]{display:none}
.ev-flash{
  display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;
  padding:11px 13px;border-radius:11px;font-size:13px;line-height:1.5;
  background:rgba(255,120,90,.16);border:1px solid rgba(255,120,90,.4);color:#FFD9CE
}
.ev-flash svg{width:15px;height:15px;stroke:currentColor;fill:none;flex:none;margin-top:2px}

.ev-done[hidden]{display:none}
.ev-done{padding:30px 22px 26px;text-align:center}
.ev-done-tick{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;
  border-radius:50%;background:var(--leaf);color:#0B2318
}
.ev-done-tick svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:3}
.ev-done b{display:block;font:700 19px/1.3 var(--disp)}
.ev-done p{margin:10px 0 0;font-size:14px;line-height:1.6;opacity:.86}
.ev-done-adv{font-weight:700;color:#C9EDA4}
.ev-done .btn{margin-top:18px}

/* ---------- The map ---------- */
.ev-map-wrap{margin-top:20px}
.ev-map{
  position:relative;height:340px;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);background:var(--mist)
}
.ev-map-skel{position:absolute;inset:0;display:grid;place-items:center;background:var(--mist)}
.ev-map-skel span{
  width:34px;height:34px;border-radius:50%;
  border:3px solid rgba(15,51,37,.15);border-top-color:var(--forest);
  animation:ev-spin .9s linear infinite
}
@keyframes ev-spin{to{transform:rotate(360deg)}}
.ev-map.ready .ev-map-skel{opacity:0;pointer-events:none;transition:opacity .4s ease}
.ev-map-hint{margin:10px 0 0;font-size:12.6px;color:var(--muted);text-align:center}

/* The map underneath is turned down, not the pins up. Every road and river
   stays where it was; they simply stop shouting over the two colours that
   carry meaning. */
.ev-map .leaflet-tile-pane{filter:saturate(.28) brightness(1.07) contrast(.9)}

/* The yard, and the districts arriving one after another. */
.ev-pin{
  /* display:block matters more than every other line here. These are
     <i> elements, and width and height do nothing to an inline box, so
     each pin was drawn as a 6px speck made of nothing but its own border
     no matter what size was asked for. */
  /* Centred on the point it marks. Leaflet anchors the icon box at the
     coordinate and the pins are wider than that box, so left alone the
     depot sat five pixels south-east of the yard. The centring uses the
     translate property rather than transform, which the drop animation
     owns. */
  display:block;position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:17px;height:17px;border-radius:50%;
  background:var(--leaf);border:3px solid #fff;
  box-shadow:0 0 0 1px rgba(15,51,37,.3),0 4px 12px rgba(15,51,37,.45);
  transform:scale(0);animation:ev-drop .45s cubic-bezier(.34,1.56,.64,1) forwards
}
.ev-pin.ev-depot{
  width:25px;height:25px;background:var(--forest);border-color:#fff;
  box-shadow:0 0 0 1px rgba(15,51,37,.35),0 0 0 6px rgba(124,184,62,.28),0 6px 16px rgba(15,51,37,.5)
}
.ev-pin.ev-depot::after{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:2px solid rgba(15,51,37,.45);animation:ev-ping 2.6s ease-out infinite
}
.ev-pin.on{background:#F2A03D;transform:scale(1.3);box-shadow:0 0 0 1px rgba(15,51,37,.3),0 0 0 6px rgba(242,160,61,.3),0 4px 14px rgba(15,51,37,.5)}

/* The yard says so without being hovered — it is the one pin on the map
   that a reader needs before they have touched anything. */
.ev-map .leaflet-tooltip.ev-here{
  padding:3px 9px;border:0;border-radius:999px;
  background:var(--forest);color:#fff;
  font-family:var(--disp);font-size:11.5px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 4px 12px rgba(15,51,37,.45)
}
.ev-map .leaflet-tooltip.ev-here::before{border-top-color:var(--forest)}
@keyframes ev-drop{
  0%{transform:scale(0) translateY(-12px);opacity:0}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes ev-ping{
  0%{transform:scale(.7);opacity:.7}
  70%,100%{transform:scale(2.1);opacity:0}
}

.ev-area-list{
  list-style:none;margin:18px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px
}
.ev-area-list button{
  width:100%;text-align:left;cursor:pointer;
  padding:12px 13px;border-radius:12px;background:#fff;
  border:1.5px solid var(--line);
  transition:border-color .2s ease,transform .25s cubic-bezier(.19,.86,.24,1),background-color .2s
}
.ev-area-list button:hover{border-color:#B9C6BE;transform:translateY(-2px)}
.ev-area-list button.on{border-color:#4F8A26;background:rgba(125,184,62,.1)}
.ev-area-list b{display:block;font:600 13.8px/1.3 var(--sans);color:var(--ink)}
.ev-area-list span{display:block;margin-top:3px;font-size:12.2px;color:var(--muted)}
.ev-area-list small{display:block;margin-top:2px;font-size:12px;font-weight:600;color:#4F8A26}
.ev-none{
  margin:0;padding:26px;border-radius:16px;background:var(--mist);
  border:1px dashed var(--line);text-align:center;color:var(--muted)
}

/* ---------- How it works ---------- */
.ev-how-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:14px;counter-reset:ev
}
.ev-how-grid li{
  padding:22px 20px;border-radius:16px;background:#fff;
  border:1px solid var(--line);box-shadow:0 2px 12px rgba(15,51,37,.04)
}
.ev-how-n{
  display:grid;place-items:center;width:32px;height:32px;margin-bottom:12px;
  border-radius:10px;background:var(--forest);color:#C9EDA4;
  font:700 14px/1 var(--disp);font-variant-numeric:tabular-nums
}
.ev-how-grid b{display:block;font:600 16px/1.35 var(--disp);color:var(--ink)}
.ev-how-grid p{margin:7px 0 0;font-size:14px;line-height:1.6;color:var(--muted)}

/* ---------- The sealed cup ---------- */
.ev-cup{background:linear-gradient(180deg,#F7FAF4,#fff)}
.ev-cup-card{
  display:grid;grid-template-columns:1fr;gap:22px;align-items:center;
  padding:26px 22px;border-radius:20px;background:#fff;
  border:1px solid var(--line);box-shadow:0 14px 40px -28px rgba(15,51,37,.5)
}
.ev-flag{
  display:inline-block;padding:6px 13px;border-radius:999px;
  background:linear-gradient(135deg,#4CAF50 0%,#2E8B3E 50%,#1E6B30 100%);
  color:#fff;font:700 12px/1.3 var(--sans);letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 6px 14px -6px rgba(30,107,48,.65)
}
html[lang="bn"] .ev-flag{letter-spacing:0;text-transform:none;font-size:12.8px}
.ev-cup-card h2{margin:14px 0 0}
.ev-cup-card .lead{margin-top:12px}
.ev-cup-facts{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;padding:0}
.ev-cup-facts b{
  display:inline-block;padding:9px 15px;border-radius:12px;
  background:var(--mist);color:var(--forest);
  font:700 14px/1.3 var(--sans);font-variant-numeric:tabular-nums
}
.ev-cup-soon{margin:16px 0 0;font-size:13.6px;line-height:1.6;color:var(--muted)}
.ev-cup-card .btn{margin-top:18px}
.ev-cup-shot{margin:0;border-radius:16px;overflow:hidden;background:var(--mist)}
.ev-cup-shot img{width:100%;display:block;aspect-ratio:1;object-fit:cover}

/* ---------- Questions ---------- */
.ev-faq-list{display:grid;gap:10px}
.ev-q{
  border:1px solid var(--line);border-radius:14px;background:#fff;
  padding:0 18px;overflow:hidden
}
.ev-q summary{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:17px 0;cursor:pointer;list-style:none;
  font:600 15.4px/1.4 var(--disp);color:var(--ink)
}
.ev-q summary::-webkit-details-marker{display:none}
.ev-q summary svg{
  width:18px;height:18px;flex:none;stroke:var(--forest);fill:none;
  transition:transform .3s var(--ease)
}
.ev-q[open] summary svg{transform:rotate(180deg)}
.ev-q p{margin:0;padding:0 0 18px;font-size:14.2px;line-height:1.7;color:var(--muted)}

/* ---------- Wider ---------- */
@media (min-width:760px){
  .ev-fact-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .ev-two{grid-template-columns:1fr 1fr}
  .ev-how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ev-map{height:420px}
}
@media (min-width:1000px){
  .ev-hero{padding-top:44px}
  .ev-hero-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px}
  .ev-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:26px}
  .ev-rcpt{position:sticky;top:104px}
  .ev-step{padding:24px 26px}
  .ev-how-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .ev-cup-card{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);padding:34px 36px;gap:40px}
  .ev-map{height:480px}
}

@media (prefers-reduced-motion:reduce){
  .ev-pin{animation:none;transform:scale(1)}
  .ev-pin.ev-depot::after{animation:none}
  .ev-map-skel span{animation:none}
  .ev-area-list button:hover{transform:none}
}