/* LocationInput — shared CSS for prayer-times / qibla-finder */

.loc-input{
    display:flex;
    flex-direction:column;
    gap:12px;
    background:var(--glass);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    padding:12px;
}

.loc-tabs{
    display:flex;
    gap:4px;
    background:var(--bg-secondary);
    border-radius:var(--radius-sm);
    padding:4px;
}
.loc-tab{
    flex:1;
    padding:10px 12px;
    border:0;
    background:transparent;
    color:var(--text-secondary);
    font-size:14px;
    font-weight:500;
    border-radius:calc(var(--radius-sm) - 2px);
    cursor:pointer;
    transition:background .15s, color .15s;
    font-family:inherit;
}
.loc-tab:hover{ color:var(--text-primary); }
.loc-tab.active{
    background:var(--accent);
    color:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.08);
}

.loc-panel{ display:none; flex-direction:column; gap:10px; }
.loc-panel.active{ display:flex; }

/* ── City panel ── */
.loc-search{
    width:100%;
    padding:12px 14px;
    font-size:15px;
    font-family:inherit;
    color:var(--text-primary);
    background:var(--bg-primary);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    outline:none;
    box-sizing:border-box;
    transition:border-color .15s;
}
.loc-search:focus{ border-color:var(--accent); }
.loc-search::-webkit-search-cancel-button{ cursor:pointer; }

.loc-search-hint{
    font-size:12px;
    color:var(--text-muted);
    min-height:0;
}
.loc-search-hint:empty{ display:none; }

.loc-results{
    display:none;
    flex-direction:column;
    gap:2px;
    max-height:360px;
    overflow-y:auto;
    background:var(--bg-primary);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:4px;
}
.loc-results.open{ display:flex; }

.loc-result{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border:0;
    background:transparent;
    color:var(--text-primary);
    text-align:start;
    cursor:pointer;
    border-radius:calc(var(--radius-sm) - 2px);
    font-family:inherit;
    font-size:14px;
    transition:background .1s;
}
.loc-result:hover,
.loc-result:focus{ background:var(--glass-hover); outline:none; }

.loc-flag{
    font-size:18px;
    line-height:1;
    flex-shrink:0;
}
.loc-result-name{
    flex:1;
    font-weight:500;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.loc-result-meta{
    font-size:12px;
    color:var(--text-muted);
    flex-shrink:0;
}
.loc-result-empty{
    padding:12px;
    font-size:13px;
    color:var(--text-muted);
    text-align:center;
}

/* ── Geo panel ── */
.loc-btn{
    padding:12px 18px;
    font-size:15px;
    font-family:inherit;
    font-weight:600;
    color:#fff;
    background:var(--accent);
    border:0;
    border-radius:var(--radius-sm);
    cursor:pointer;
    transition:filter .15s;
}
.loc-btn:hover{ filter:brightness(1.08); }
.loc-btn:active{ filter:brightness(.94); }
.loc-btn.secondary{
    background:var(--bg-secondary);
    color:var(--text-primary);
    border:1px solid var(--border);
}

.loc-manual{
    display:grid;
    grid-template-columns:1fr 1fr auto;
    gap:10px;
    align-items:end;
}
.loc-manual .loc-label{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-size:12px;
    color:var(--text-secondary);
}
.loc-manual input{
    width:100%;
    padding:10px 12px;
    font-size:14px;
    font-family:inherit;
    color:var(--text-primary);
    background:var(--bg-primary);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    outline:none;
    box-sizing:border-box;
}
.loc-manual input:focus{ border-color:var(--accent); }

.loc-ios-hint{
    display:none;
    font-size:12px;
    color:var(--text-muted);
    background:var(--bg-secondary);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:8px 10px;
}
.loc-ios-hint.visible:not(:empty){ display:block; }

.loc-status{
    font-size:13px;
    color:var(--text-secondary);
    min-height:18px;
}
.loc-status.error{ color:var(--danger); }

/* ── Mobile ── */
@media (max-width: 560px){
    .loc-manual{ grid-template-columns:1fr 1fr; }
    .loc-manual .loc-btn.secondary{ grid-column:1 / -1; }
}

/* ── RTL ── */
[dir="rtl"] .loc-result{ text-align:start; }
[dir="rtl"] .loc-result-meta,
[dir="rtl"] .loc-flag{ direction:ltr; unicode-bidi:isolate; }