*{margin:0;padding:0;box-sizing:border-box;}

html,body{
  height:100%;
  font-family: 'Outfit', sans-serif;
  color:var(--light-text-primary, #110b08);
  animation: pageFade 0.8s ease;
}

@keyframes gradientMove{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

@keyframes pageFade{
  from{opacity:0;transform:translateY(12px);}
  to{opacity:1;transform:translateY(0);}
}


.page{
  display:flex;justify-content:center;
  gap:28px;
  padding:80px 50px 40px;
  height:100vh;
  position:relative;z-index:1;
}

@media(max-width:1000px){
  .page{flex-direction:column;height:auto;padding:80px 20px 40px;}
  .left-panel,.right-panel{width:100%!important;height:auto!important;}
}


.left-panel,.right-panel{
  width:580px;height:80vh;
  padding:32px;border-radius:24px;
  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,0.5);
  box-shadow:0 8px 32px rgba(0,0,0,0.06),inset 0 1px 0 rgba(255,255,255,0.8);
  overflow-y:auto;
  transition:all 0.35s ease;
  display:flex;flex-direction:column;
  scroll-behavior:smooth;
}

.left-panel:hover,.right-panel:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.8);
}

.left-panel h2,.right-panel h2{
  margin-top:0;margin-bottom:22px;
  font-family:'Fredoka',cursive;
  color:#2f7a4f;font-size:22px;
}


#map {
  width: 100%;
  height: 280px;
  border-radius: 18px;
  margin-bottom: 18px;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  border: 2px solid rgba(255,255,255,0.5);
}


.search-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  animation: fieldSlideIn 0.5s ease backwards;
}

.search-container input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 50px;
  border: 1.5px solid rgba(90, 61, 43, 0.08);
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  color: var(--light-text-primary, #110b08);
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.search-container input:focus {
  outline: none;
  border-color: #5fbf8f;
  background: white;
  box-shadow: 0 0 0 4px rgba(47, 122, 79, 0.1);
}

#searchBtn {
  background: transparent;
  color: white;
  padding: 0 24px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

#searchBtn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(47, 122, 79, 0.3);
}


.map-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  gap: 12px;
}


.form{display:flex;flex-direction:column;gap:14px;}


.input-group{position:relative;}

.input-group input{
  width:100%;padding:16px 18px;
  border-radius:16px;
  border:1.5px solid rgba(90,61,43,0.08);
  background:rgba(255,255,255,0.8);
  font-size:14px;font-family: 'Outfit', sans-serif;
  color:var(--light-text-primary, #110b08);
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
  transition:all 0.3s;
}

.input-group input:focus{
  outline:none;border-color:#5fbf8f;
  background:white;
  box-shadow:0 0 0 4px rgba(47,122,79,0.08),0 4px 14px rgba(47,122,79,0.06);
}

.input-group label{
  position:absolute;left:14px;top:16px;
  font-size:14px;color:var(--light-accent, #c0651a);
  pointer-events:none;
  transition:0.2s ease;
  background:transparent;padding:0 4px;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label{
  top:-8px;font-size:12px;
  color:#2f7a4f;font-weight:600;
  background:rgba(255,255,255,0.9);
}


button{
  padding:12px 24px;border:none;
  border-radius:50px;
  font-weight:600;font-family: 'Outfit', sans-serif;
  cursor:pointer;transition:all 0.3s ease;
}

button:hover{transform:translateY(-2px);}


.label-buttons{display:flex;gap:10px;margin-top:5px;}

.label-btn{
  border:none;border-radius:50px;
  padding:10px 18px;
  background:rgba(255,255,255,0.5);
  border:1px solid rgba(255,255,255,0.4);
  cursor:pointer;font-size:13px;font-weight:600;
  transition:all 0.25s;color:var(--light-text-primary, #110b08);
}

.label-btn:hover{background:rgba(233,246,236,0.6);}

.label-btn.active{
  background:linear-gradient(135deg,#2f7a4f,#5fbf8f);
  color:white;
  box-shadow:0 4px 14px rgba(47,122,79,0.25);
}


#locateBtn{
  background:linear-gradient(135deg,#2f7a4f,#5fbf8f);
  color:white;font-size:14px;
  padding:12px 24px;
  box-shadow:0 6px 18px rgba(47,122,79,0.3);
}

#locateBtn:hover{box-shadow:0 10px 26px rgba(47,122,79,0.4);}


#saveAddress{
  align-self:center;padding:14px 30px;
  font-size:15px;margin-top:16px;
  background:linear-gradient(135deg,#ffc078,#ffd6a5);
  color:var(--light-text-primary, #110b08);font-family:'Fredoka',cursive;
  box-shadow:0 6px 18px rgba(255,192,120,0.3);
}

#saveAddress:hover{box-shadow:0 10px 26px rgba(255,192,120,0.4);}

#saveMsg{margin-top:8px;font-size:14px;color:#2f7a4f;text-align:center;font-weight:600;}


#addressList{display:flex;flex-direction:column;gap:16px;margin-top:10px;}


.address-card{
  background:rgba(255,255,255,0.5);
  padding:22px;border-radius:20px;
  border:1px solid rgba(255,255,255,0.4);
  box-shadow:0 4px 16px rgba(0,0,0,0.04);
  transition:all 0.3s ease;
  animation:slideCard 0.5s ease forwards;
  opacity:0;
}

.address-card:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 28px rgba(0,0,0,0.08);
}

.address-card.default-card{
  border:2px solid rgba(47,122,79,0.3);
  box-shadow:0 0 14px rgba(47,122,79,0.1);
}

.address-card.default-card h3{color:#2f7a4f;}


.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.card-footer{display:flex;justify-content:flex-end;margin-top:12px;}

.address-card h3{margin:0;font-size:18px;font-family:'Fredoka',cursive;color:var(--light-heading, #1e8449);}
.address-card p{margin:5px 0;font-size:14px;color:#6b4a36;}


.delete-btn{
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  color:white;padding:6px 16px;
  border-radius:50px;font-size:12px;
  box-shadow:0 4px 12px rgba(231,76,60,0.3);
}

.delete-btn:hover{box-shadow:0 6px 18px rgba(231,76,60,0.4);}


.default-btn{
  background:linear-gradient(135deg,#2f7a4f,#5fbf8f);
  color:white;padding:6px 16px;
  border-radius:50px;font-size:12px;
  box-shadow:0 4px 12px rgba(47,122,79,0.25);
}

.default-btn:hover{box-shadow:0 6px 18px rgba(47,122,79,0.35);}

.distance{font-size:13px;color:var(--light-accent, #c0651a);opacity:1;margin-top:4px;}



.address-card:nth-child(1){animation-delay:0.05s;}
.address-card:nth-child(2){animation-delay:0.1s;}
.address-card:nth-child(3){animation-delay:0.15s;}
.address-card:nth-child(4){animation-delay:0.2s;}
.address-card:nth-child(5){animation-delay:0.25s;}
.address-card:nth-child(6){animation-delay:0.3s;}

@keyframes slideCard{
  from{transform:translateY(20px);opacity:0;}
  to{transform:translateY(0);opacity:1;}
}

.address-card.removing{animation:deleteCard 0.35s forwards;}

@keyframes deleteCard{
  from{opacity:1;transform:scale(1);}
  to{opacity:0;transform:scale(0.9) translateX(40px);}
}


.left-panel::-webkit-scrollbar,.right-panel::-webkit-scrollbar{width:8px;}
.left-panel::-webkit-scrollbar-track,.right-panel::-webkit-scrollbar-track{background:rgba(231,184,140,0.1);border-radius:10px;}
.left-panel::-webkit-scrollbar-thumb,.right-panel::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5fbf8f,#2f7a4f);border-radius:10px;}

.back-btn {
  position: absolute;
  top: 15px; left: 15px;
  padding:4px 10px;
  font-size:11px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  color: var(--light-text-primary, #110b08);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  z-index: 1000;
}
.back-btn:hover {
  transform: translateX(-3px);
  background: white;
}

@media (max-width: 600px) {
  .page { padding: 75px 12px 30px !important; }
  .left-panel, .right-panel { padding: 20px 16px !important; border-radius: 20px !important; }
  .left-panel h2, .right-panel h2 { font-size: 18px !important; margin-bottom: 15px !important; }
  #map { height: 200px !important; margin-bottom: 12px !important; }
  .search-container { gap: 6px !important; margin-bottom: 15px !important; }
  .search-container input { padding: 10px 14px !important; font-size: 13px !important; }
  #searchBtn { padding: 0 16px !important; height: 38px !important; font-size: 13px !important; }
  .map-controls { margin-bottom: 12px !important; }
  #locateBtn { padding: 10px 16px !important; font-size: 13px !important; }
  .input-group input { padding: 12px 14px !important; font-size: 13px !important; }
  .input-group label { left: 12px !important; top: 12px !important; font-size: 13px !important; }
  .input-group input:focus + label,
  .input-group input:not(:placeholder-shown) + label { top: -8px !important; font-size: 11px !important; }
  .label-buttons { flex-wrap: wrap !important; gap: 8px !important; }
  .label-btn { padding: 8px 14px !important; font-size: 12px !important; flex: 1 1 calc(50% - 8px); text-align: center; }
  #saveAddress { width: 100% !important; padding: 12px 20px !important; font-size: 14px !important; }
  .address-card { padding: 16px !important; border-radius: 16px !important; }
  .address-card h3 { font-size: 16px !important; }
  .address-card p { font-size: 13px !important; }
  .delete-btn, .default-btn { padding: 6px 12px !important; font-size: 11px !important; }
}