*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root {
    --p: #5b4fe8;
    --p2: #7b6ff0;
    --p-light: #eee9ff;
    --p-dark: #3d2fd0;
    --border: #e8ecf4;
    --muted: #9aa5be;
    --text: #1a1d2e;
    --body-bg: #f5f7ff;
    --card-r: 16px;
    --inp-r: 10px;
}
body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background: var(--body-bg);
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    color: var(--text);
}

/* ══ LAYOUT ══ */
.page-wrap {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* ══ LEFT PANEL ══ */
.left-panel {
    width: 360px;
    flex-shrink: 0;
    background: linear-gradient(160deg, #3b1fa8 0%, #1e0d6a 60%, #150a50 100%);
    display: flex;
    flex-direction: column;
    padding: 32px 28px 28px;
    position: relative;
    overflow: hidden;
}
/* subtle dot grid */
.left-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
            circle,
            rgba(255, 255, 255, 0.08) 1px,
            transparent 1px
    );
    background-size: 22px 22px;
    pointer-events: none;
}
/* glow circle */
.left-panel::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    background: radial-gradient(
            circle,
            rgba(120, 90, 255, 0.25) 0%,
            transparent 70%
    );
    bottom: -60px;
    right: -60px;
    pointer-events: none;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}
.logo-box {
    width: 38px;
    height: 38px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo-box span {
    font-size: 20px;
    font-weight: 800;
    color: var(--p);
    font-family: "Plus Jakarta Sans", sans-serif;
}
.logo-name {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
}

.hero-text {
    margin-top: 36px;
    position: relative;
    z-index: 1;
}
.hero-text h2 {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.hero-text p {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 10px;
    line-height: 1.6;
}

/* stat cards */
.stats-row {
    display: flex;
    gap: 12px;
    margin-top: 28px;
    position: relative;
    z-index: 1;
}
.stat-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    padding: 14px 16px;
    flex: 1;
}
.stat-card .s-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 600;
    margin-bottom: 2px;
}
.stat-card .s-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 10px;
}
.stat-card .s-val {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
}
.stat-card .s-badge {
    font-size: 10px;
    font-weight: 700;
    color: #4ade80;
    margin-left: 5px;
}
.mini-chart {
    width: 100%;
    height: 36px;
    margin-bottom: 8px;
}

/* 3D character area */
.char-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-top: 8px;
}

/* city silhouette at bottom */
.city-silhouette {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    opacity: 0.15;
}

/* trust + rating */
.trust-section {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 20px;
}
.avatars {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 12px;
}
.av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #4b2fd4;
    object-fit: cover;
    background: #7b6ff0;
    margin-right: -8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.av-count {
    margin-left: 16px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
.av-count span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
}
.stars {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}
.stars i {
    color: #facc15;
    font-size: 17px;
}
.stars .score {
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    margin-left: 4px;
}
.rating-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}

/* feature row */
.feat-row {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    position: relative;
    z-index: 1;
}
.feat-item {
    text-align: center;
    flex: 1;
}
.feat-item i {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.55);
    display: block;
    margin-bottom: 5px;
}
.feat-item span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
    line-height: 1.3;
    display: block;
}

/* ══ RIGHT PANEL ══ */
.right-panel {
    flex: 1;
    overflow-y: auto;
    padding: 40px 48px 60px;
    background: #fff;
}

.top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.page-title h1 {
    font-size: 26px;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
}
.page-title p {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}
.login-link {
    font-size: 13px;
    color: var(--muted);
    white-space: nowrap;
    padding-top: 4px;
}
.login-link a {
    color: var(--p);
    font-weight: 700;
    text-decoration: none;
}
.login-link a:hover {
    text-decoration: underline;
}

/* ══ FORM SECTIONS ══ */
.form-section {
    border: 1.5px solid var(--border);
    border-radius: var(--card-r);
    padding: 24px;
    margin-bottom: 16px;
    background: #fff;
}
.sec-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.sec-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--p-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sec-icon i {
    font-size: 20px;
    color: var(--p);
}
.sec-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.sec-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 1px;
}

/* ══ INPUTS ══ */
.field-label {
    font-size: 12px;
    font-weight: 600;
    color: #4b5578;
    margin-bottom: 6px;
    display: block;
}
.inp-wrap {
    position: relative;
}
.inp-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 15px;
    pointer-events: none;
}
.form-inp {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--inp-r);
    padding: 12px 14px 12px 40px;
    font-size: 14px;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--text);
    background: #fafbff;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-inp::placeholder {
    color: #c2cadf;
}
.form-inp:focus {
    border-color: var(--p);
    box-shadow: 0 0 0 3px rgba(91, 79, 232, 0.12);
    background: #fff;
}
.form-inp.has-verify {
    padding-right: 100px;
}

.field-note {
    font-size: 11px;
    color: var(--muted);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.field-note i {
    font-size: 11px;
    color: #c2cadf;
}

.open-map-button{
    background:none;
    border:none;
    color:var(--p);
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
    padding:0
}

/* verify btn inside input */
.verify-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--p-light);
    color: var(--p);
    border: 1.5px solid var(--p);
    border-radius: 7px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 700;
    font-family: "Plus Jakarta Sans", sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}
.verify-btn:hover {
    background: var(--p);
    color: #fff;
}

/* password toggle */
.pw-eye {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    transition: color 0.2s;
}
.pw-eye:hover {
    color: var(--p);
}

/* checkbox row */
.check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.check-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--p);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 4px;
}
.check-row label {
    font-size: 13px;
    color: #4b5578;
    cursor: pointer;
}
.check-row label a {
    color: var(--p);
    font-weight: 600;
    text-decoration: none;
}
.check-row label a:hover {
    text-decoration: underline;
}

/* verified badge */
.verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #22c55e;
    font-weight: 700;
    margin-top: 4px;
}

/* ══ SUBMIT BTN ══ */
.submit-btn {
    width: 100%;
    background: var(--p);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 16px;
    font-size: 15px;
    font-weight: 700;
    font-family: "Plus Jakarta Sans", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    margin-top: 8px;
    box-shadow: 0 6px 24px rgba(91, 79, 232, 0.4);
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.submit-btn:hover {
    background: var(--p-dark);
    box-shadow: 0 8px 28px rgba(91, 79, 232, 0.5);
    transform: translateY(-1px);
}
.submit-btn:active {
    transform: translateY(0);
}
.secure-note {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.submit-btn:disabled{
    background: var(--p2);
    color: #fff;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ══ OTP MODAL ══ */
.otp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30,35,64,.45);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.otp-overlay.show { display: flex; }
.otp-modal {
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 24px 60px rgba(80,70,160,.18);
    text-align: center;
    animation: slideUp .25s ease;
}
@keyframes slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.otp-modal .otp-icon {
    width: 58px; height: 58px;
    background: var(--p-light);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
    font-size: 26px; color: var(--p);
}
.otp-modal h5 {
    font-family: 'Sora', sans-serif;
    font-size: 18px; font-weight: 700;
    color: #1e2340; margin: 0 0 6px;
}
.otp-modal p {
    font-size: 13px; color: var(--muted);
    margin: 0 0 24px; line-height: 1.5;
}
.otp-modal p strong { color: #1e2340; }
.otp-boxes {
    display: flex; gap: 10px;
    justify-content: center;
    margin-bottom: 10px;
}
.otp-box {
    width: 46px; height: 52px;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    font-size: 22px; font-weight: 700;
    font-family: 'Sora', sans-serif;
    color: #1e2340;
    text-align: center;
    outline: none;
    background: #fafbfd;
    transition: border-color .2s, box-shadow .2s;
    caret-color: var(--p);
}
.otp-box:focus {
    border-color: var(--p);
    box-shadow: var(--input-focus-shadow);
    background: #fff;
}
.otp-box.filled { border-color: var(--p); background: var(--p-light); }
.otp-box.error  { border-color: #e05252; background: #fff5f5; }
.otp-resend {
    font-size: 12px; color: var(--text-muted-custom);
    margin: 0 0 20px;
}
.otp-resend button {
    background: none; border: none; padding: 0;
    color: var(--p); font-weight: 600;
    font-size: 12px; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
}
.otp-resend button:disabled { color: var(--muted); cursor: default; }
.otp-error-msg {
    font-size: 12px; color: #e05252;
    margin: 0 0 14px; min-height: 16px;
}
.btn-otp-submit {
    width: 100%;
    background: var(--p);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(106,90,205,.35);
    transition: background .2s, transform .15s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-otp-submit:hover { background: var(--p-dark); transform: translateY(-1px); }
.btn-otp-submit:disabled { background: #b0b0d0; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-otp-cancel {
    width: 100%; background: none;
    border: 1.5px solid var(--border);
    border-radius: 12px; padding: 11px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; font-weight: 600;
    color: #8a94a6; cursor: pointer;
    margin-top: 10px;
    transition: border-color .2s, color .2s;
}
.btn-otp-cancel:hover { border-color: #aaa; color: #444; }

/* ══ MAP MODAL ══ */
/*.map-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 15, 60, 0.5);
    backdrop-filter: blur(5px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.map-overlay.show {
    display: flex;
}
.map-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(20, 15, 60, 0.22);
    animation: popUp 0.22s ease;
}
.map-mh {
    padding: 16px 20px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.map-mh .m-htitle {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    flex: 1;
}
.map-mh .m-hsub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
}
.btn-mclose {
    background: #f0f2f8;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #5a6275;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}
.btn-mclose:hover {
    background: #e0e4f0;
}
.map-search-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.map-sw {
    flex: 1;
    position: relative;
}
.map-sw i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 14px;
}
.map-sinp {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px 10px 34px;
    font-size: 13px;
    font-family: "Plus Jakarta Sans", sans-serif;
    color: var(--text);
    outline: none;
    background: #fafbff;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.map-sinp:focus {
    border-color: var(--p);
    box-shadow: 0 0 0 3px rgba(91, 79, 232, 0.12);
    background: #fff;
}
.btn-gps {
    border: 1.5px solid var(--p);
    background: var(--p-light);
    color: var(--p);
    border-radius: 10px;
    padding: 9px 14px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}
.btn-gps:hover {
    background: #ddd6ff;
}
.map-sug {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}
.sug-item {
    padding: 10px 14px;
    font-size: 13px;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-bottom: 1px solid #f0f2f8;
    transition: background 0.15s;
}
.sug-item:last-child {
    border-bottom: none;
}
.sug-item:hover {
    background: var(--p-light);
}
.sug-item i {
    color: var(--p);
    margin-top: 2px;
    flex-shrink: 0;
}
.sug-main {
    font-weight: 600;
    font-size: 13px;
}
.sug-sub {
    font-size: 11px;
    color: var(--muted);
}
#mapContainer {
    flex: 1;
    min-height: 260px;
    position: relative;
}
#leafletMap {
    width: 100%;
    height: 100%;
    min-height: 260px;
}
.map-hint {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(26, 29, 46, 0.75);
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 500;
    white-space: nowrap;
}
.map-preview {
    padding: 12px 16px;
    background: #f8f9ff;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.map-preview .ap-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}
.map-preview .ap-text {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    min-height: 18px;
}
.map-preview .ap-coords {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
.map-mf {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.btn-mconf {
    flex: 1;
    background: var(--p);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(91, 79, 232, 0.3);
    transition: background 0.2s, transform 0.15s;
}
.btn-mconf:hover {
    background: var(--p-dark);
    transform: translateY(-1px);
}
.btn-mconf:disabled {
    background: #b0b0d8;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}
.btn-mcanc {
    border: 1.5px solid var(--border);
    background: #fff;
    color: #5a6275;
    border-radius: 10px;
    padding: 12px 20px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.btn-mcanc:hover {
    border-color: var(--p);
    color: var(--p);
}*/

.map-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(30,35,64,.5);
    backdrop-filter: blur(5px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow-y: auto;
}
.map-overlay.show { display: flex; }
.map-modal {
    background: #fff;
    border-radius: 20px;
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 70px rgba(30,35,64,.22);
    animation: slideUp .25s ease;
}
.map-modal-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.map-modal-header .map-title {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #1e2340;
    flex: 1;
}
.map-modal-header .map-subtitle {
    font-size: 12px;
    color: var(--muted);
    margin-top: 1px;
}
.btn-map-close {
    background: #f0f2f8;
    border: none;
    border-radius: 8px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: #5a6275;
    cursor: pointer;
    transition: background .2s;
    flex-shrink: 0;
}
.btn-map-close:hover { background: #e0e4f0; }

.map-search-row {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.map-search-wrap {
    flex: 1;
    position: relative;
}
.map-search-wrap i {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 15px;
}
.map-search-inp {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px 10px 36px;
    font-size: 13px;
    font-family: 'DM Sans', sans-serif;
    color: #2d3250;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    background: #fafbfd;
}
.map-search-inp:focus {
    border-color: var(--p);
    box-shadow: var(--input-focus-shadow);
    background: #fff;
}
.btn-map-detect {
    border: 1.5px solid var(--p);
    background: var(--p-light);
    color: var(--p);
    border-radius: 10px;
    padding: 9px 14px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    display: flex; align-items: center; gap: 5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
    flex-shrink: 0;
}
.btn-map-detect:hover { background: #ddd6ff; }
.map-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
}
.map-suggestion-item {
    padding: 10px 14px;
    font-size: 13px;
    color: #2d3250;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-bottom: 1px solid #f0f2f8;
    transition: background .15s;
}
.map-suggestion-item:last-child { border-bottom: none; }
.map-suggestion-item:hover { background: var(--p-light); }
.map-suggestion-item i { color: var(--p); margin-top: 2px; flex-shrink: 0; }
.map-suggestion-item .sug-main { font-weight: 600; }
.map-suggestion-item .sug-sub  { font-size: 11px; color: var(--muted); }

#mapContainer {
    flex: 1;
    min-height: 280px;
    position: relative;
    overflow: hidden;
}
#leafletMap {
    width: 100%; height: 100%;
    min-height: 280px;
}
.pac-container{
    z-index: 10000 !important;
}

.map-pin-hint {
    position: absolute;
    bottom: 12px; left: 50%;
    transform: translateX(-50%);
    background: rgba(30,35,64,.75);
    color: #fff;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 20px;
    pointer-events: none;
    z-index: 500;
    white-space: nowrap;
}
.map-addr-preview {
    padding: 12px 16px;
    background: #f8f9ff;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.map-addr-preview .addr-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}
.map-addr-preview .addr-text {
    font-size: 13px;
    color: #1e2340;
    font-weight: 500;
    min-height: 18px;
}
.map-addr-preview .addr-coords {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}
.map-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.btn-map-confirm {
    flex: 1;
    background: var(--p);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(106,90,205,.3);
    transition: background .2s, transform .15s;
}
.btn-map-confirm:hover { background: var(--p-dark); transform: translateY(-1px); }
.btn-map-confirm:disabled { background: #b0b0d0; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-map-cancel-sm {
    border: 1.5px solid var(--border);
    background: #fff;
    color: #5a6275;
    border-radius: 10px;
    padding: 12px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s;
}
.btn-map-cancel-sm:hover { border-color: var(--p); color: var(--p); }

@media (max-width: 900px) {
    .left-panel {
        width: 300px;
        padding: 24px 20px;
    }
    .hero-text h2 {
        font-size: 22px;
    }
    .right-panel {
        padding: 30px 28px 50px;
    }
}
@media (max-width: 700px) {
    .page-wrap {
        flex-direction: column;
    }
    .left-panel {
        width: 100%;
        padding: 24px 20px 20px;
    }
    .char-wrap {
        display: none;
    }
    .trust-section {
        padding-top: 16px;
    }
    .feat-row {
        margin-top: 16px;
    }
    .right-panel {
        padding: 24px 18px 40px;
    }
    .page-title h1 {
        font-size: 20px;
    }
}
@media (max-width: 768px) {

    .map-overlay {
        padding: 0;
        align-items: flex-start;
        overflow-y: auto;
    }

    .map-modal {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #mapContainer {
        flex: none;
        height: 300px;
        min-height: 300px;
    }

    .map-modal-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        z-index: 9999;
    }
}