/* ==========================================================
   Delhi25 · Results Area Selector (LEFT + MODAL)
   File: static/css/area.css
   ========================================================== */


/* ==========================================================
   Left trigger button (results filters only)
   ========================================================== */

.d25-page--results .d25-areaPick{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  width: 100%;
  padding: 12px 24px;
  border-radius: 12px;
  border: 0;
  background: none;

  color: var(--grey-09);
  font: inherit;
  font-size: 1rem;
  line-height: 1.2;
  text-align: left;

  cursor: pointer;
  user-select: none;

  transition:
    border-color var(--dur-1) var(--ease-out),
    background-color var(--dur-1) var(--ease-out);
}

.d25-page--results .d25-areaPick:hover{
  background: var(--grey-01);
}

.d25-page--results .d25-areaPick:focus-visible{
  outline: 2px solid rgba(170,196,45,0.35);
  outline-offset: 3px;
}

.d25-page--results .d25-areaPick__label{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.d25-page--results .d25-areaPick__chev{
  flex: 0 0 auto;
  font-size: .7rem;
  color: var(--grey-05);
}


/* ==========================================================
   Modal overlay
   ========================================================== */

.d25-areasOverlay[hidden]{ display: none !important; }

.d25-areasOverlay{
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  isolation: isolate;

  display: grid;
  place-items: center;

  padding: 20px;
  background: rgba(25,25,25,0.42);
}


/* ==========================================================
   Dialog card
   ========================================================== */

.d25-areasDlg{
  position: relative;
  z-index: 1;

  width: min(92vw, 820px);
  max-height: min(80vh, 760px);

  display: flex;
  flex-direction: column;

  overflow: hidden;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: none;
}


/* ==========================================================
   Modal header
   ========================================================== */

.d25-areasDlg__hd{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 24px;
  background: var(--grey-01);
}

.d25-areasDlg__title{
  font-size: 1rem;
}

.d25-areasDlg__x{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--grey-09);
}

.d25-areasDlg__x:hover{
  background: #fff;
}


/* ==========================================================
   Search row
   ========================================================== */

.d25-areasDlg__search{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 24px;
  background: var(--surface);
}

.d25-areasDlg__input{
  width: 100%;
  border-radius: 10px;
  padding: 10px 24px;
  background: var(--surface);
  color: var(--grey-09);
  border: var(--b1) solid var(--grey-02);
}

.d25-areasDlg__input:focus{
  outline: none;
  border-color: var(--grey-03);
}


/* Search button inside modal */
.d25-areasDlg__search .d25-btn{
  border: var(--b1) solid var(--grey-02);
  border-radius: 10px;
  padding: 10px 18px;
  background: var(--grey-01);
  color: var(--grey-09);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}

.d25-areasDlg__search .d25-btn:hover{
  border-color: var(--grey-03);
  background: #fff;
}

.d25-areasDlg__search .d25-btn:focus-visible{
  outline: 2px solid rgba(170,196,45,0.35);
  outline-offset: 3px;
}


/* ==========================================================
   Picked chips
   ========================================================== */

.d25-areasDlg__picked{
  padding: 12px 24px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--surface);
}

.d25-areasChip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  background: var(--grey-01);
  color: var(--grey-09);
  font-size: .9rem;
}

.d25-areasChip__x{
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 8px;
  color: var(--grey-09);
}

.d25-areasChip__x:hover{
  background: #fff;
}


/* ==========================================================
   Body + Scrollbar
   ========================================================== */

.d25-areasDlg__body{
  padding: 12px 24px 6px;
  overflow: auto;
  background: var(--surface);

  /* Firefox: prevent thin scrollbar */
  scrollbar-width: auto !important;
  scrollbar-color: var(--grey-05) transparent;
}

/* Chrome / Edge / Safari */
.d25-areasDlg__body::-webkit-scrollbar{
  width: 14px;
}

.d25-areasDlg__body::-webkit-scrollbar-track{
  background: transparent;
}

.d25-areasDlg__body::-webkit-scrollbar-thumb{
  background-color: var(--grey-05);
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: content-box;
}

.d25-areasDlg__body::-webkit-scrollbar-thumb:hover{
  background-color: var(--grey-06);
}


/* ==========================================================
   Area list
   ========================================================== */

.d25-areasDlg__list{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 6px 0 10px;
  gap: 10px 40px;
}

.d25-areasRow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  cursor: pointer;
}

.d25-areasRow.is-parent{
  flex: 0 0 100%;
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  background: var(--grey-01);
  border-radius: 6px;
}

.d25-areasRow.is-parent .d25-areasRow__label{
  font-weight: 600;
  color: var(--grey-09);
}

.d25-areasRow__box{
  width: 14px;
  height: 14px;
  border-radius: 2px;
  border: var(--b1) solid var(--grey-03);
  background: var(--surface);
  position: relative;
}

.d25-areasRow.is-checked .d25-areasRow__box{
  border-color: var(--grey-09);
}

.d25-areasRow.is-checked .d25-areasRow__box::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--grey-09);
  border-bottom: 2px solid var(--grey-09);
  transform: rotate(45deg);
}

.d25-areasRow__label{
  font-size: 1rem;
  line-height: 1.25;
  color: var(--grey-08);
  white-space: nowrap;
}

.d25-areasRow.is-child:hover .d25-areasRow__label{
  color: var(--grey-09);
}


/* ==========================================================
   Footer actions (Apply + Clear)
   ========================================================== */

.d25-areasDlg__ft{
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px;
  background: var(--grey-01);
}

/* Clear button */
.d25-areasDlg__ft .d25-btn.d25-btn--ghost{
  border: var(--b1) solid var(--grey-02);
  border-radius: 6px;
  padding: 6px 24px;
  background: var(--grey-01);
  color: var(--grey-09);
  cursor: pointer;
  line-height: 1;

}

.d25-areasDlg__ft .d25-btn.d25-btn--ghost:hover{
  border-color: var(--grey-03);
  background: #fff;
}

/* Apply button */
.d25-areasDlg__ft .d25-btn:not(.d25-btn--ghost){
  border: 0;
  border-radius: 6px;
  padding: 6px 24px;
  background: var(--logo-green, #aac42d);
  color: #fff;
  cursor: pointer;

}

.d25-areasDlg__ft .d25-btn:not(.d25-btn--ghost):hover{
  filter: brightness(0.8);
}

.d25-areasDlg__ft .d25-btn:focus-visible{
  outline: 2px solid rgba(170,196,45,0.35);
  outline-offset: 3px;
}