/* NC Locksmith Location Finder — assets/locksmith-finder.css */

.llfd-wrap { font-family: 'Segoe UI', system-ui, sans-serif; max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; color: #1a1a1a; }

/* Hero */
.llfd-hero { background: linear-gradient(135deg, #1d2d44 0%, #0f1923 100%); border-radius: 16px; margin-bottom: 28px; overflow: hidden; position: relative; }
.llfd-hero::before { content: ''; position: absolute; top: -80px; right: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(232,93,4,.18) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
.llfd-hero-inner { padding: 52px 44px; position: relative; z-index: 1; text-align: left; }
.llfd-title { font-size: 2rem; font-weight: 800; color: #fff !important; margin: 0 0 10px; letter-spacing: -.5px; }
.llfd-subtitle { font-size: 1rem; color: rgba(255,255,255,.6) !important; margin: 0 0 28px; }

/* ── Search Row — pill shape ── */
.llfd-wrap .llfd-search-row {
    display: flex !important;
    max-width: 620px !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 40px rgba(0,0,0,.35) !important;
    margin-bottom: 18px !important;
    background: #fff !important;
    padding: 0 !important;
}

.llfd-wrap .llfd-input-wrap {
    flex: 1 !important;
    background: #fff !important;
    position: relative !important;
    border-radius: 50px 0 0 50px !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

.llfd-wrap .llfd-pin-svg {
    position: absolute !important;
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #FF3C00 !important;
    pointer-events: none !important;
    width: 20px !important;
    height: 20px !important;
}

.llfd-wrap .llfd-address {
    width: 100% !important;
    padding: 18px 18px 18px 52px !important;
    font-size: 1rem !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    color: #1a1a1a !important;
    font-family: inherit !important;
    box-sizing: border-box !important;
    border-radius: 50px 0 0 50px !important;
    box-shadow: none !important;
    margin: 0 !important;
    height: auto !important;
}

.llfd-wrap .llfd-address::placeholder { color: #aaa !important; }

/* ── Find My Location button ── */
.llfd-wrap button#llfd-search-btn,
.llfd-wrap .llfd-search-btn {
    background: #FF3C00 !important;
    background-color: #FF3C00 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 50px 50px 0 !important;
    padding: 16px 28px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    transition: background .2s !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
    outline: none !important;
}

.llfd-wrap button#llfd-search-btn:hover,
.llfd-wrap .llfd-search-btn:hover {
    background: #cc3000 !important;
    background-color: #cc3000 !important;
    color: #fff !important;
}

.llfd-arr { display: none !important; }

/* ── Use My Current Location — small dark pill ── */
.llfd-wrap button#llfd-gps-btn,
.llfd-wrap .llfd-gps-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255,255,255,0.08) !important;
    background-color: rgba(255,255,255,0.08) !important;
    border: 1.5px solid rgba(255,255,255,0.2) !important;
    color: rgba(255,255,255,0.75) !important;
    padding: 10px 22px !important;
    border-radius: 50px !important;
    font-size: .875rem !important;
    cursor: pointer !important;
    font-family: inherit !important;
    letter-spacing: .01em !important;
    transition: all .2s !important;
    box-shadow: none !important;
    text-transform: none !important;
    font-weight: 500 !important;
    line-height: normal !important;
    margin: 0 !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    outline: none !important;
}

.llfd-wrap button#llfd-gps-btn:hover,
.llfd-wrap .llfd-gps-btn:hover {
    background: rgba(255,255,255,.15) !important;
    background-color: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.4) !important;
}

/* Status */
.llfd-status { margin-top: 16px; font-size: .875rem; padding: 9px 18px; border-radius: 8px; display: inline-block; }
.llfd-s-success { background: rgba(46,204,113,.15); color: #2ecc71; }
.llfd-s-error   { background: rgba(220,0,0,.15); color: #ff6b6b; }
.llfd-s-loading { background: rgba(255,255,255,.1); color: rgba(255,255,255,.7); }

/* Map section */
.llfd-map-section { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 32px rgba(0,0,0,.1); margin-bottom: 32px; position: relative; }

#llfd-map,
.llfd-map {
    width: 100% !important;
    height: 420px !important;
    min-height: 420px !important;
    display: block !important;
}

/* Result card */
.llfd-card { position: absolute; top: 20px; right: 20px; background: #fff; border-radius: 12px; padding: 22px; width: 250px; box-shadow: 0 8px 32px rgba(0,0,0,.18); z-index: 10; }
.llfd-card-badge { display: inline-block; background: #FF3C00; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; }
.llfd-card-name { font-size: 1.1rem; font-weight: 800; margin: 0 0 8px; }
.llfd-card-address, .llfd-card-phone { font-size: .82rem; color: #666; margin: 0 0 3px; }
.llfd-card-dist { font-size: .82rem; font-weight: 700; color: #FF3C00; margin: 6px 0 14px; }
.llfd-card-btn { display: block; background: #1d2d44; color: #fff; text-decoration: none; padding: 11px 14px; border-radius: 8px; font-size: .85rem; font-weight: 700; text-align: center; transition: background .2s; }
.llfd-card-btn:hover { background: #FF3C00; color: #fff; }

/* All locations */
.llfd-all-locs { margin-top: 40px; }
.llfd-all-title { font-size: 1.2rem; font-weight: 800; margin: 0 0 18px; padding-bottom: 10px; border-bottom: 3px solid #FF3C00; display: inline-block; }
.llfd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.llfd-loc-card { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #f8f8f6; border: 1px solid #e8e8e4; border-radius: 10px; text-decoration: none; color: #1a1a1a; transition: all .2s; }
.llfd-loc-card:hover { background: #1d2d44; color: #fff; border-color: #1d2d44; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.llfd-loc-pin { font-size: 1rem; flex-shrink: 0; }
.llfd-loc-name { font-size: .92rem; font-weight: 700; flex: 1; }
.llfd-loc-phone { font-size: .75rem; color: #aaa; }
.llfd-loc-arr { opacity: 0; transition: opacity .2s, transform .2s; }
.llfd-loc-card:hover .llfd-loc-arr { opacity: 1; transform: translateX(3px); }

/* Google autocomplete */
.pac-container { border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.12); border: none; font-family: inherit; margin-top: 6px; overflow: hidden; }
.pac-item { padding: 10px 16px; font-size: .88rem; cursor: pointer; }
.pac-item:hover { background: #f5f5f0; }

/* Responsive */
@media (max-width: 768px) {
    .llfd-hero-inner { padding: 36px 22px !important; }
    .llfd-title { font-size: 1.5rem !important; }
    .llfd-wrap .llfd-search-row { flex-direction: column !important; border-radius: 16px !important; max-width: 100% !important; }
    .llfd-wrap .llfd-input-wrap { border-radius: 16px 16px 0 0 !important; }
    .llfd-wrap .llfd-address { border-radius: 16px 16px 0 0 !important; }
    .llfd-wrap button#llfd-search-btn, .llfd-wrap .llfd-search-btn { border-radius: 0 0 16px 16px !important; justify-content: center !important; width: 100% !important; }
    .llfd-card { position: relative !important; top: auto !important; right: auto !important; width: auto !important; border-radius: 0 !important; }
    .llfd-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
    .llfd-grid { grid-template-columns: 1fr; }
}