/* Overlay */
#cityOverlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(var(--overlay-blur,6px));
  z-index:9998;
}

/* Popup */
#cityPopup{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:80%;
  max-width:1000px;
  background:var(--popup-bg,#ffffff);
  border-radius:28px;
  padding:48px 40px;
  text-align:center;
  z-index:9999;
  max-height:90vh;
  overflow-y:auto;

  /* 🔑 FONT CONTROL */
  font-family: inherit;
  font-size: var(--popup-font-size);
}

/* Title */
.csp-title{
  font-weight:700;
  margin-bottom:24px;

  /* 🔑 TITLE SIZE = popup font se control */
  font-size: calc(var(--popup-font-size) * 1.8);
}

/* Divider */
.csp-divider{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:28px;
  color:#6b7280;
}
.csp-divider:before,
.csp-divider:after{
  content:'';
  flex:1;
  height:2px;
  background:#e5e7eb;
}

/* City Grid */
.city-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:32px;
  margin-bottom:32px;
}

/* City Card */
.city-card{
  border:2px solid var(--city-border,#e5e7eb);
  border-radius:16px;
  padding:8px 10px;
  cursor:pointer;
  transition:all .2s ease;
}

.city-card:hover{
  background:var(--city-hover-bg,#fef2f2);
  border-color:var(--city-border-hover,#dc2626);
}

.city-card:hover span{
  color:#ffffff;
}

/* City Icon */
.city-icon{
  width:80px;
  height:80px;
  object-fit:contain;
  margin-bottom:6px;
  border:none;
  padding:0;
  background:transparent;
}

.city-card:hover .city-icon{
  filter:brightness(0) invert(1);
}

/* City Name */
.city-card span{
  display:block;
  margin-top:6px;
  color:#667085;

  /* 🔑 CITY FONT CONTROL */
  font-family: inherit;
  font-size: var(--city-font-size);
  font-weight: var(--city-font-weight);
}

/* ============================= */
/* PINCODE + BUTTON CENTER */
/* ============================= */

.pincode-box{
  margin-top:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

/* Input */
.pincode-box input{
  flex:none;
  width:520px;
  height:56px;
  padding:0 18px;
  border-radius:16px;
  border:1px solid #e5e7eb;
  font-size: 1em; /* 🔑 popup font se inherit */
}

/* Button */
.continue-btn{
  height:56px;
  padding:0 48px;
  border-radius:16px;
  border:0;

  background: var(--btn-bg,#2563eb) !important;   /* 🔥 FIX */
  color:#fff;

  font-size: 1em;
  font-weight:600;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease;
}

.continue-btn:hover{
  background: var(--btn-hover-bg,#1d4ed8) !important; /* 🔥 FIX */
}


/* Tablet */
@media(max-width:768px){
  .city-grid{grid-template-columns:repeat(3,1fr)}
  .csp-title{
    font-size: calc(var(--popup-font-size) * 1.4);
  }
}

/* Mobile */
@media(max-width:480px){
  .city-grid{grid-template-columns:repeat(2,1fr)}
  .pincode-box{
    flex-direction:column;
    align-items:center;
  }
  .pincode-box input,
  .continue-btn{
    width:100%;
  }
}