/* assets/style/base.css */
*{ box-sizing:border-box; }

html,body{
    height:100%;
    margin:0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: var(--text);
    touch-action: manipulation;
    overflow-x: hidden;
}

body, button, p, label, span, h1, h2, h3, h4, h5, h6, input, textarea{
    font-family: var(--app-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#fareBox{
    visibility: hidden;
}

/* Leaflet polish */
.leaflet-control-attribution{ display:none; }
.leaflet-marker-icon{ border-radius: 999px !important; }

.hr{
    height:1px;
    background: rgba(11,15,25,.10);
    margin: 10px 0;
}

.small{
    font-size: 12px;
    opacity: .80;
}

.row{ display:flex; gap:10px; }
.row > *{ flex:1; }

.pill{
    background: rgba(11,15,25,.55);
    color: rgba(255,255,255,.90);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pill.on{ border-color: rgba(46,204,113,.65); }

.status{
    padding: 10px 12px;
    border-radius: var(--r14);
    border: 1px solid rgba(11,15,25,.12);
    background: rgba(11,15,25,.05);
    font-size: 13px;
}

.btn{
    width:100%;
    height: var(--tap);
    border:0;
    border-radius: var(--r14);
    padding: 0 12px;
    font-weight: 900;
    cursor:pointer;
    padding: 10px 14px;
}

.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn.is-loading{
    pointer-events: none;
}

.btn.is-loading::before{
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    border: 2px solid rgba(11,15,25,.28);
    border-top-color: rgba(11,15,25,.85);
    border-radius: 50%;
    animation: movaSpin .75s linear infinite;
}

.btn:active{ transform: translateY(1px); }

.btn-primary{ background: var(--gold); color:#111; }

@keyframes movaSpin{
    to { transform: rotate(360deg); }
}

.btn-ghost{
    background: var(--text);
    border: 1px solid var(--text);
    border-color: var(--text);
    color: rgba(255,255,255,.88);
}

.btn-danger{ background: var(--danger); color:#fff; }

.btnTiny{
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
}

.btnPrimaryFull{
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    border: none;
    font-weight: 1000;
    background: var(--gold, #F9D515);
    color: #111;
    cursor: pointer;
}

.err{
    color:#ff6b6b;
    margin-top: 10px;
    min-height: 18px;
    font-size: 13px;
}

.errText{
    color: #ff6b6b;
}

.linkBtn{
    background: none;
    border: none;
    color: #F9D515;
    font-weight: 900;
    cursor: pointer;
}

.linkBtnInline{
    background: none;
    border: none;
    color: #F9D515;
    cursor: pointer;
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.check{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    opacity: .85;
    user-select: none;
}

.check input{ accent-color: #F9D515; }

.linkMini{
    background: none;
    border: none;
    color: rgba(255,255,255,.75);
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.linkMini:hover{ color: #fff; }