/* ============================================================
   LOCATION PAGE — location.css
   Extends home.css; load home.css first.
============================================================ */

#loc-progress {
    position: fixed; top: 0; left: 0; height: 3px;
    background: var(--btn-action); z-index: 9999;
    width: 0; transition: width .1s linear;
}

/* ============================================================
   HERO
============================================================ */
#loc-hero {
    padding: 140px 0 80px;
    background: var(--bg-1);
    position: relative; overflow: hidden;
}

.lh-dots {
    position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(103,58,183,.11) 1.5px, transparent 1.5px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse at 60% 45%, black 30%, transparent 70%);
}

.lh-blob {
    position: absolute; border-radius: 50%;
    filter: blur(110px); opacity: .38; pointer-events: none;
    animation: floatAnim 9s ease-in-out infinite;
}
.lh-blob-1 { width:480px;height:480px; background:radial-gradient(circle,rgba(103,58,183,.22),transparent 70%); top:-180px;right:-90px; }
.lh-blob-2 { width:340px;height:340px; background:radial-gradient(circle,rgba(33,150,243,.18),transparent 70%); bottom:-110px;left:-70px; animation-delay:-4.5s; }
.lh-blob-3 { width:230px;height:230px; background:radial-gradient(circle,rgba(255,31,142,.13),transparent 70%); top:40%;left:38%; animation-delay:-2s; }

@keyframes floatAnim {
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-26px) scale(1.04);}
}

.lh-breadcrumb {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.78); border: 1px solid rgba(103,58,183,.18);
    border-radius: 50px; padding: 7px 18px;
    font-size: .75rem; font-weight: 600; color: var(--text-2);
    letter-spacing: .06em; margin-bottom: 1.5rem;
    backdrop-filter: blur(6px); box-shadow: var(--shadow-sm);
}
.lh-breadcrumb a { color: var(--purple); }
.lh-breadcrumb i { font-size: .55rem; opacity: .55; }

.lh-headline {
    font-size: clamp(2rem,5vw,3.8rem);
    font-weight: 800; color: var(--text); line-height: 1.06; margin-bottom: 1.2rem;
}
.lh-sub {
    font-size: 1.05rem; color: var(--text-2);
    max-width: 600px; line-height: 1.78; margin-bottom: 2.2rem;
}

/* Stats pills */
.lh-stat-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:2rem; }
.lh-stat-pill {
    display:inline-flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.88); border:1.5px solid var(--border);
    border-radius:50px; padding:10px 22px;
    font-size:.84rem; font-weight:600; color:var(--text-2);
    box-shadow:var(--shadow-sm); backdrop-filter:blur(6px);
}
.lh-stat-pill strong {
    font-size:1.2rem; font-weight:800;
    background:var(--btn-action);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ============================================================
   SEARCH & FILTER BAR
============================================================ */
#loc-filter-bar {
    padding: 40px 0 0;
    background: var(--bg-1);
    position: relative; z-index: 2;
}

.loc-search-row {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap; margin-bottom: 20px;
}

.loc-search-wrap {
    display: flex; align-items: center; gap: 0;
    background: rgba(255,255,255,.95); border: 1.5px solid var(--border);
    border-radius: 50px; padding: 6px 6px 6px 20px;
    box-shadow: var(--shadow-sm); flex: 1; max-width: 440px;
    transition: var(--transition);
}
.loc-search-wrap:focus-within { border-color:var(--purple); box-shadow:0 0 0 3px rgba(103,58,183,.1); }
.loc-search-wrap input {
    flex:1; border:none; background:transparent; outline:none;
    font-family:var(--ff-body); font-size:.92rem; color:var(--text);
}
.loc-search-wrap input::placeholder { color:var(--muted); }
.loc-search-icon { color:var(--muted); font-size:.95rem; margin-right:4px; }

.loc-count-badge {
    background:rgba(103,58,183,.1); border:1px solid rgba(103,58,183,.18);
    border-radius:50px; padding:8px 18px;
    font-size:.82rem; font-weight:700; color:var(--purple);
    white-space:nowrap;
}

/* ============================================================
   LOCATION GRID SECTION
============================================================ */
#loc-grid {
    padding: 30px 0 100px;
    background: var(--bg-1);
}

/* City group header */
.city-group { margin-bottom: 50px; }

.city-header {
    display: flex; align-items: center; gap: 16px;
    margin-bottom: 22px; padding-bottom: 14px;
    border-bottom: 2px solid var(--border);
}

.city-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: var(--btn-action);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: #fff; flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(103,58,183,.28);
}

.city-name {
    font-size: 1.25rem; font-weight: 800; color: var(--text);
    margin: 0;
}

.city-count {
    font-size:.72rem; font-weight:700; letter-spacing:.08em;
    text-transform:uppercase; color:var(--muted);
    margin-top:2px;
}

.city-badge {
    margin-left: auto;
    background: rgba(103,58,183,.08); border: 1px solid rgba(103,58,183,.18);
    border-radius: 50px; padding: 5px 14px;
    font-size: .74rem; font-weight: 700; color: var(--purple);
}

/* Location card */
.loc-card {
    background: rgba(255,255,255,.92); border: 1.5px solid var(--border);
    border-radius: var(--r); padding: 0;
    box-shadow: var(--shadow-sm); transition: var(--transition);
    display: flex; flex-direction: column;
    overflow: hidden; height: 100%;
    text-decoration: none; color: inherit;
    position: relative;
}

.loc-card::before {
    content: '';
    display: block; height: 3px;
    background: var(--btn-action);
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease;
}

.loc-card:hover::before { transform: scaleX(1); }

.loc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(103,58,183,.22);
    color: inherit;
}

/* Map thumbnail */
.loc-map-thumb {
    width: 100%; height: 110px;
    object-fit: cover; display: block;
    background: linear-gradient(135deg, rgba(103,58,183,.12), rgba(33,150,243,.1));
    position: relative; overflow: hidden;
}

.loc-map-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s ease; opacity: .75;
    filter: saturate(.7);
}
.loc-card:hover .loc-map-thumb img { transform: scale(1.08); filter: saturate(1); opacity: .85; }

.loc-map-pin {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--btn-action); border: 3px solid #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; color: #fff;
    box-shadow: 0 4px 14px rgba(103,58,183,.4);
    z-index: 1;
    animation: pinBounce 2s ease-in-out infinite;
}
@keyframes pinBounce {
    0%,100%{transform:translate(-50%,-50%) translateY(0);}
    50%{transform:translate(-50%,-50%) translateY(-5px);}
}

/* Card body */
.loc-card-body { padding: 16px 18px 18px; flex: 1; display: flex; flex-direction: column; }

.loc-area-name {
    font-size: .97rem; font-weight: 800; color: var(--text);
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}

.loc-area-name i { color: var(--purple); font-size: .8rem; }

.loc-service-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(103,58,183,.08); border: 1px solid rgba(103,58,183,.15);
    border-radius: 50px; padding: 3px 10px;
    font-size: .68rem; font-weight: 700; color: var(--purple);
    margin-bottom: 10px; width: fit-content;
}

.loc-url {
    font-size: .72rem; color: var(--muted);
    word-break: break-all; line-height: 1.5;
    margin-bottom: 12px; flex: 1;
    font-family: 'Courier New', monospace;
}

.loc-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px; border-top: 1px solid var(--border);
    margin-top: auto;
}

.loc-visit-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .78rem; font-weight: 700; color: var(--purple);
    transition: gap .2s ease;
}
.loc-card:hover .loc-visit-link { gap: 9px; }

.loc-copy-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(103,58,183,.08); border: 1px solid rgba(103,58,183,.15);
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; color: var(--purple); cursor: pointer;
    transition: var(--transition);
}
.loc-copy-btn:hover { background: var(--purple); color: #fff; transform: scale(1.1); }
.loc-copy-btn.copied { background: #20c997; border-color: #20c997; color: #fff; }

/* No results */
.loc-no-results {
    text-align: center; padding: 60px 20px; display: none;
    color: var(--muted);
}
.loc-no-results i { font-size: 2.5rem; display: block; margin-bottom: 1rem; color: var(--border-2); }

/* ============================================================
   CTA BANNER
============================================================ */
#loc-cta { padding: 60px 0; background: var(--bg-2); }
.lc-banner {
    background: var(--btn-action); border-radius: var(--r-xl);
    padding: 72px 60px; position: relative; overflow: hidden; text-align: center;
}
.lc-banner::before { content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1.5px,transparent 1.5px);background-size:26px 26px;pointer-events:none; }
.lc-blob { position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 65%);top:-200px;right:-120px;pointer-events:none; }
.lc-inner { position:relative;z-index:1; }
.lc-banner h2 { font-size:clamp(1.8rem,3.8vw,2.8rem);font-weight:800;color:#fff;margin-bottom:1rem; }
.lc-banner p  { font-size:1rem;color:rgba(255,255,255,.78);max-width:500px;margin:0 auto 2.5rem;line-height:1.72; }
.lc-btn-w { display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--purple);border:none;border-radius:50px;padding:15px 36px;font-family:var(--ff-display);font-weight:700;font-size:1rem;transition:var(--transition);cursor:pointer;text-decoration:none; }
.lc-btn-w:hover { transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.22);color:var(--purple); }
.lc-btn-g { display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.15);color:#fff;border:1.5px solid rgba(255,255,255,.38);border-radius:50px;padding:14px 34px;font-family:var(--ff-display);font-weight:600;font-size:.95rem;transition:var(--transition);cursor:pointer;backdrop-filter:blur(6px);text-decoration:none; }
.lc-btn-g:hover { background:rgba(255,255,255,.26);color:#fff;transform:translateY(-3px); }

/* ============================================================
   RESPONSIVE
============================================================ */
@media(max-width:991.98px) {
    #loc-hero { padding:120px 0 60px; }
    .lc-banner { padding:50px 28px; }
}
@media(max-width:575.98px) {
    .lh-headline { font-size:2rem; }
    .loc-search-row { flex-direction:column; align-items:stretch; }
    .loc-search-wrap { max-width:100%; }
}