:root {
    --main: #3d6a4b;
    --dark: #2d5038;
    --pink: #f4a7bb;
    --glass: rgba(255,255,255,0.85);
    --sea: #cfe8ef;
}

body { font-family: 'Quicksand', sans-serif; background: linear-gradient(180deg, #eaf4ec, #f7f2e4 45%, #eef7ea); }

/* navbar */
.navbar { background: rgba(255,255,255,0.5); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,0.05); }

/* map box */
.mapbox {
    position: relative; width: min(94vw,520px); aspect-ratio: 612/696;
    margin: 0 auto 10px; border-radius: 28px; overflow: visible;
    background: var(--sea); border: 2px solid rgba(45,80,56,0.15);
    box-shadow: 0 20px 45px rgba(45,80,56,0.2), inset 0 0 0 6px rgba(255,255,255,0.6);
    animation: fadeInUp .5s ease;
}
.mapclip { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; }
.mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; }

.state {
    fill: #f5f9f6; stroke: var(--dark); stroke-width: .8; stroke-linejoin: round;
    cursor: pointer; transition: all .25s cubic-bezier(.4,0,.2,1);
}
.state:hover, .state:focus, .state.active { fill: var(--pink) !important; filter: brightness(1.05); }

/* search bar above map */
.srchbox {
    width: min(94vw,420px); background: var(--glass);
    backdrop-filter: blur(16px); border-radius: 24px; padding: 12px 16px;
    border: 1px solid white; box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.srchbox .input-group { background: #fff; border-radius: 50px; padding: 4px; overflow: hidden; }
.srchbox .form-control { border: none; height: 44px; padding-left: 18px; font-weight: 600; font-size: .9rem; font-family: 'Quicksand',sans-serif; }
.srchbox .form-control:focus { box-shadow: none; }
.srchbox .form-control::placeholder { color: #bbb; font-weight: 500; }

.btn-go { border-radius: 50px !important; background: var(--main); color: #fff; border: none; padding: 0 22px; transition: .3s; font-weight: 600; }
.btn-go:hover { background: var(--dark); transform: scale(1.05); }

/* compass */
.compass { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; opacity: .65; z-index: 15; pointer-events: none; transition: transform .8s ease; }
.mapbox:hover .compass { transform: rotate(360deg); }

/* pin drop */
.pin {
    position: absolute; width: 28px; height: 35px; transform: translate(-50%,-100%);
    z-index: 25; opacity: 0; pointer-events: none;
    transition: left .5s cubic-bezier(.25,.46,.45,.94), top .5s cubic-bezier(.25,.46,.45,.94);
}
.pin.show { opacity: 1; animation: dropIn .6s cubic-bezier(.34,1.56,.64,1) forwards; }
.pin svg { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)); }

/* popup card on map */
.popup {
    position: absolute; z-index: 28; width: 230px; background: #fff;
    border-radius: 16px; padding: 12px; box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    border-bottom: 5px solid var(--pink); opacity: 0; pointer-events: none;
    transform: translateY(6px); transition: opacity .25s ease, transform .25s ease; text-align: left;
}
.popup.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.popup .xbtn { position: absolute; top: 6px; right: 10px; cursor: pointer; color: #bbb; font-weight: 700; font-size: 1.1rem; z-index: 5; }
.popup .xbtn:hover { color: #888; }
.popup .imgwrap { width: 100%; height: 105px; overflow: hidden; border-radius: 10px; margin-bottom: 8px; background: #eef2ef; border: 1px solid rgba(0,0,0,0.05); }
.popup .imgwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.popup .imgwrap img:hover { transform: scale(1.1); }
.popup .ptitle { font-weight: 700; color: var(--dark); font-size: .9rem; margin-bottom: 2px; }
.popup .pcap { font-size: .75rem; color: #888; font-weight: 600; margin-bottom: 6px; }
.popup .pdesc { font-size: .72rem; color: #555; line-height: 1.35; max-height: 80px; overflow-y: auto; }
.popup .plink { font-size: .65rem; color: var(--main); font-weight: 700; text-transform: uppercase; margin-top: 8px; letter-spacing: .5px; }

/* quick badges */
.qpin {
    background: #fff; border: 1.5px solid #e0e8e2; border-radius: 20px;
    padding: 5px 14px; font-size: .78rem; font-weight: 600; color: var(--main);
    cursor: pointer; transition: all .2s ease; box-shadow: 0 4px 10px rgba(0,0,0,.03);
}
.qpin:hover { background: var(--main); color: #fff; border-color: var(--main); transform: translateY(-1px); }

/* status msgs */
.msg { text-align: center; padding: 14px; border-radius: 16px; margin: 0 auto 20px; max-width: 520px; font-weight: 600; animation: fadeInUp .4s ease; font-size: .9rem; box-shadow: 0 4px 15px rgba(0,0,0,.03); }
.msg.loading { background: linear-gradient(135deg,#e8f5e9,#f1f8e9); color: var(--dark); }
.msg.error { background: linear-gradient(135deg,#fce4ec,#fff3e0); color: #c62828; }
.msg.success { background: linear-gradient(135deg,#e8f5e9,#e0f2f1); color: var(--dark); }

.dots { display: inline-flex; gap: 4px; margin-left: 8px; }
.dots span { width: 6px; height: 6px; background: var(--main); border-radius: 50%; animation: bounce 1.4s infinite ease-in-out; }
.dots span:nth-child(1) { animation-delay: 0s; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }

/* result header */
.rhead { max-width: 520px; margin: 0 auto 20px; text-align: center; animation: fadeInUp .5s ease; }
.rhead .badge-pin {
    display: inline-block; background: linear-gradient(135deg,var(--main),#4a7c59);
    color: #fff; font-size: 1.5rem; font-weight: 700; padding: 6px 26px;
    border-radius: 50px; letter-spacing: 4px; box-shadow: 0 6px 20px rgba(61,106,75,.25); margin-bottom: 6px;
}

/* result cards area */
#resultBox { max-width: 520px; margin: 0 auto; max-height: 400px; overflow-y: auto; padding-right: 4px; padding-bottom: 40px; }
#resultBox::-webkit-scrollbar { width: 6px; }
#resultBox::-webkit-scrollbar-track { background: transparent; }
#resultBox::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }

/* individual post office card */
.pocard {
    background: #fff; border-radius: 20px; padding: 18px 20px; margin-bottom: 15px;
    border-left: 8px solid var(--pink); box-shadow: 0 8px 24px rgba(45,80,56,.06);
    animation: fadeInUp .5s ease forwards; opacity: 0; transition: transform .2s ease, box-shadow .2s ease;
}
.pocard:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(45,80,56,.12); }
.pocard .poname { font-family: 'Caveat',cursive; font-size: 1.45rem; font-weight: 700; color: var(--dark); }
.pocard .potype {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px;
    background: linear-gradient(135deg,#e8f5e9,#f1f8e9); color: var(--main);
    padding: 3px 9px; border-radius: 20px; display: inline-block; margin-bottom: 12px;
}
.pocard .dlabel { font-size: .65rem; text-transform: uppercase; letter-spacing: .5px; color: #aaa; font-weight: 700; line-height: 1; margin-bottom: 2px; }
.pocard .dval { font-size: .82rem; font-weight: 600; color: #444; line-height: 1.3; }

/* stagger delays for cards */
.pocard:nth-child(1){animation-delay:.05s} .pocard:nth-child(2){animation-delay:.1s}
.pocard:nth-child(3){animation-delay:.15s} .pocard:nth-child(4){animation-delay:.2s}
.pocard:nth-child(5){animation-delay:.25s}

/* footer */
.site-footer { background: var(--dark); color: rgba(255,255,255,.7); }
.site-footer a { color: var(--pink); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-brand { font-family: 'Caveat',cursive; font-size: 1.6rem; color: #fff; }

/* intro overlay */
#introOverlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(180deg,#eaf4ec,#f7f2e4 45%,#eef7ea);
    z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity .8s ease, visibility .8s ease;
}
#introOverlay.hide { opacity: 0; visibility: hidden; }

.mail-container { position: relative; width: 200px; height: 140px; margin-bottom: 30px; perspective: 800px; animation: bounceIn 1s cubic-bezier(.175,.885,.32,1.275) forwards; }
.mail-envelope { position: absolute; inset: 0; background: #2d5038; border-radius: 8px; box-shadow: 0 15px 35px rgba(0,0,0,.2); }
.mail-front { position: absolute; bottom: 0; left: 0; width: 0; height: 0; border-left: 100px solid #3d6a4b; border-right: 100px solid #3d6a4b; border-bottom: 70px solid #345c41; border-top: 70px solid transparent; z-index: 3; border-radius: 0 0 8px 8px; pointer-events: none; }
.mail-flap { position: absolute; top: 0; left: 0; width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-top: 80px solid #4a7c59; z-index: 4; transform-origin: top; animation: openFlap .8s ease 1s forwards; }
.mail-letter { position: absolute; top: 10px; left: 15px; right: 15px; bottom: 10px; background: #fff; border-radius: 6px; z-index: 2; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 15px rgba(0,0,0,.1); animation: pullLetter .8s ease 1.6s forwards; }
.welcome-text { font-family: 'Caveat',cursive; font-size: 3.5rem; color: var(--dark); font-weight: 700; opacity: 0; animation: fadeInText 1s ease 2s forwards; text-align: center; padding: 0 20px; }

/* mobile */
@media(max-width:480px) {
    .mapbox { border-radius: 20px; }
    .srchbox { padding: 10px 12px; }
    .srchbox .form-control { height: 38px; font-size: .8rem; padding-left: 14px; }
    .btn-go { padding: 0 16px; font-size: .85rem; }
    .compass { top: 12px; right: 12px; width: 34px; height: 34px; }
    .popup { width: 180px; padding: 10px; }
    .pocard { padding: 14px 16px; }
}