/* assets/css/style.css */

/* =================== PALETA ABasteceAí =================== */
:root{
  --brand-orange:#f66a0a;   /* laranja do logo */
  --brand-green:#0ba360;    /* verde do logo   */
  --brand-dark: #1e293b;

  --text:#1f2937;
  --muted:#6b7280;
  --soft:#e6eaf1;
  --bg:#f6f8fc;

  --card-bg:#fff;
  --radius:12px;

  /* Auth (override abaixo) */
  --auth-card-bg: var(--card-bg);
  --auth-card-border: var(--soft);
}
body#bodyRoot{ background:var(--bg); color:var(--text); }

/* =================== NAVBAR / TÍTULO =================== */
.navbar{ background:#fff; border-bottom:1px solid #eef1f6; }
.navbar .container-fluid > :first-child > strong{
  font-weight:800; letter-spacing:.2px;
  background:linear-gradient(90deg,var(--brand-orange), var(--brand-green) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ÍCONES DO TOPO */
.icon-btn{
  width:34px; height:34px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:10px; line-height:1; font-size:16px;
  border:1px solid #dbe2ea; background:#fff; color:#374151;
  box-shadow:0 1px 1.5px rgba(20,20,20,.05);
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.icon-btn:hover{ box-shadow:0 4px 14px rgba(0,0,0,.08); }
.icon-btn:active{ transform:translateY(1px); }
.icon-btn.btn-primary{
  background:linear-gradient(180deg, var(--brand-orange), #ff7d2a);
  border-color:transparent; color:#fff; font-size:18px;
}
.icon-btn.btn-primary:hover{ filter:brightness(.98); }

/* =================== MAPA =================== */
#map{
  height:70vh; min-height:420px;
  border-radius:var(--radius);
  border:1px solid var(--soft);
  background:#e7edf6;
}
.radius-legend{
  position:absolute; left:12px; bottom:12px;
  background:#fff; padding:6px 10px; border-radius:10px;
  font-size:12px; color:#334155; border:1px solid #e5e7eb;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
.leaflet-control-zoom a{
  border-radius:8px !important;
  border-color:#e6ebf2 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.leaflet-control-zoom a:hover{ background:#f3f6fb; }

/* =================== SIDEBAR / LISTAS =================== */
#sidebarCard .card-body{ max-height:none; overflow:visible; }

.section-title{ font-weight:800; margin:.6rem 0 .45rem; color:#111827; }
.section-title::before{
  content:""; display:inline-block; width:6px; height:12px; margin-right:6px;
  border-radius:3px; background:linear-gradient(180deg,var(--brand-orange),var(--brand-green));
}

.station{
  border:1px solid #e8edf5; border-radius:10px; padding:10px 12px;
  background:#fff; transition:box-shadow .15s ease, transform .05s ease;
}
.station:hover{ box-shadow:0 8px 22px rgba(20,20,20,.06); }

/* Preço (listas) */
.price{ font-weight:800; }
.price-badge{
  display:inline-block; font-weight:800; font-size:12px; padding:.15rem .5rem;
  border-radius:.55rem; background:var(--brand-green); color:#fff;
  border:1px solid rgba(0,0,0,.08);
}

/* =================== PINS (DivIcon) =================== */
.leaf-pin{
  width:26px;height:26px;border-radius:50%;
  background:var(--brand-orange); border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.18); position:relative;
}
.leaf-pin::after{
  content:""; position:absolute; left:50%; top:50%;
  width:8px;height:8px; margin:-4px 0 0 -4px; background:#fff; border-radius:50%;
}
.leaf-pin.best{ background:var(--brand-green); }
.leaf-pin.silver{ background:#6c757d; }
.leaf-pin.bronze{ background:#b87333; }
.leaf-pin .price-badge{
  position:absolute; left:18px; top:-6px;
  background:inherit; color:#fff; border:2px solid #fff; border-radius:10px;
  padding:0 6px; font:800 11px/18px system-ui,Segoe UI,Roboto,sans-serif;
  white-space:nowrap; box-shadow:0 1px 3px rgba(0,0,0,.25);
}

/* Sua posição */
.leaf-me{
  display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:#ff4d4f;border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(0,0,0,.25)
}
.leaf-me .car{font-size:16px;line-height:1}

/* Legenda de pins */
#pinLegend .pin-dot{
  display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15)
}

/* =================== POPUP DO POSTO =================== */
.leaflet-popup-content{ margin:.55rem .8rem; }
.popup-actions{ display:flex; gap:.45rem; margin-top:.4rem; }
.popup-actions .btn{
  --bs-btn-padding-y:.22rem; --bs-btn-padding-x:.55rem; --bs-btn-font-size:.82rem;
}
.popup-actions .btn-outline-primary{
  --bs-btn-color:var(--brand-orange);
  --bs-btn-border-color:var(--brand-orange);
  --bs-btn-hover-bg:var(--brand-orange); --bs-btn-hover-border-color:var(--brand-orange);
  --bs-btn-hover-color:#fff;
}
.popup-actions .btn-outline-secondary{
  --bs-btn-color:#334155; --bs-btn-border-color:#c8d1dd;
  --bs-btn-hover-bg:#e9eef7; --bs-btn-hover-border-color:#c8d1dd;
}

/* =================== FILTROS =================== */
.form-select-sm, .form-control-sm{ font-size:.92rem; }
.filters-bar{ display:flex; flex-wrap:wrap; gap:8px 12px; align-items:end; }
.filters-bar .form-group{ min-width:140px; }
.filters-advanced{
  background:#ffffff; border:1px solid #e5e7eb; border-radius:10px; padding:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}

/* Focus e controles com a cor da marca */
.form-select, .form-control{
  border-radius:10px; border-color:#e5e9f0;
}
.form-select:focus, .form-control:focus{
  border-color:var(--brand-orange);
  box-shadow:0 0 0 .25rem rgba(246,106,10,.15);
}

/* Switch */
.form-check-input:checked{
  background-color:var(--brand-green); border-color:var(--brand-green);
}

/* Range (raio) */
input[type="range"]{
  -webkit-appearance:none; height:6px; border-radius:999px;
  background:linear-gradient(90deg, var(--brand-green), var(--brand-orange));
  outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px;height:18px;border-radius:50%;
  background:#fff; border:2px solid var(--brand-orange); box-shadow:0 1px 4px rgba(0,0,0,.15);
}
input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%; background:#fff; border:2px solid var(--brand-orange);
}

/* Badges e chips */
.badge.text-bg-light{
  background:#fff; color:#111827; border:1px solid #e6ebf2;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* Responsivo */
@media (max-width:576px){
  .filters-bar .form-group{ flex:1 1 100%; }
  #map{ height:64vh; }
}

/* =================== DARK THEME — AbasteceAí =================== */
body.aa-dark{
  color-scheme: dark;
  --bg:#0b1220;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --soft:#233046;
  --card-bg:#0f172a;
}
body.aa-dark #map{ border-color:var(--soft); background:#0f172a; }
body.aa-dark .navbar{ background:#0f172a; border-bottom:1px solid var(--soft); }
body.aa-dark .icon-btn{
  background:#0f172a; color:#e5e7eb; border-color:#233046;
  box-shadow:0 1px 1.5px rgba(0,0,0,.35);
}
body.aa-dark .icon-btn:hover{ box-shadow:0 6px 16px rgba(0,0,0,.45); }
body.aa-dark .radius-legend{
  background:#0f172a; color:#cbd5e1; border:1px solid var(--soft);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
body.aa-dark .section-title{ color:#e2e8f0; }
body.aa-dark .station{ background:var(--card-bg); border:1px solid var(--soft); box-shadow:0 8px 18px rgba(0,0,0,.35); }
body.aa-dark .price{ color:#f8fafc; }
body.aa-dark .small, body.aa-dark .text-muted{ color:var(--muted) !important; }
body.aa-dark .form-select, 
body.aa-dark .form-control{
  background:#0f172a; color:#e5e7eb; border-color:#233046;
}
body.aa-dark .form-select:focus, 
body.aa-dark .form-control:focus{
  border-color:var(--brand-orange);
  box-shadow:0 0 0 .25rem rgba(246,106,10,.20);
}
body.aa-dark .form-check-input{ background-color:#1f2937; border-color:#334155; }
body.aa-dark .form-check-input:checked{ background-color:var(--brand-green); border-color:var(--brand-green); }
body.aa-dark input[type="range"]{ filter:brightness(.95) }
body.aa-dark input[type="range"]::-webkit-slider-thumb{ border-color:var(--brand-orange); background:#0f172a; }
body.aa-dark input[type="range"]::-moz-range-thumb{ border-color:var(--brand-orange); background:#0f172a; }
body.aa-dark .badge.text-bg-light{
  background:#0f172a; color:#e5e7eb; border:1px solid var(--soft);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}
body.aa-dark .leaflet-popup-content{ color:#e5e7eb; }
body.aa-dark .popup-actions .btn-outline-secondary{
  --bs-btn-color:#e5e7eb; --bs-btn-border-color:#334155;
  --bs-btn-hover-bg:#1f2937; --bs-btn-hover-border-color:#475569;
}
body.aa-dark .leaflet-control-zoom a{
  background:#0f172a !important; color:#e5e7eb !important;
  border-color:#334155 !important; box-shadow:0 2px 8px rgba(0,0,0,.45);
}
body.aa-dark .leaflet-control-zoom a:hover{ background:#162033 !important; }
body.aa-dark #pinLegend .pin-dot{ box-shadow:0 0 0 1px rgba(255,255,255,.15) }
body.aa-dark .card{ background:var(--card-bg); border-color:var(--soft); }
body.aa-dark .station{ background:#0e172a; border-color:#243045; }
body.aa-dark .station:hover{ border-color:#2f3c56; box-shadow:0 10px 24px rgba(0,0,0,.50); }
body.aa-dark .station .fw-bold{ color:#f8fafc; font-weight:800; letter-spacing:.1px; }
body.aa-dark .station .fw-bold small{ color:#cbd5e1 !important; font-weight:600; }
body.aa-dark .station .small, body.aa-dark .station .text-muted{ color:#9fb0c4 !important; }
body.aa-dark .section-title{ color:#f1f5f9; }
body.aa-dark .price{ color:#ffffff; }

/* attribution */
.leaflet-control-attribution {
  background: transparent !important;
  box-shadow: none !important;
  font-size: 11px;
  color: #7a7a7a;
  opacity: .7;
  padding: 2px 6px;
  margin: 0 6px 6px;
  border-radius: 6px;
}
.leaflet-control-attribution:hover { opacity: 1; }
.leaflet-control-attribution a { color: inherit !important; text-decoration: none; border: 0; }

/* =================== AUTH / LOGIN (cara do app clara) =================== */
body.aa-auth-bg{
  min-height:100vh;
  color:var(--text);
  background:
    radial-gradient(850px 320px at 50% -10%, #ffffff, var(--bg) 60%, #eef2f9 100%),
    radial-gradient(600px 240px at -10% 110%, rgba(246,106,10,.12), transparent 70%),
    radial-gradient(520px 220px at 110% -10%, rgba(11,163,96,.12), transparent 70%);
}

/* shapes suaves */
.aa-shape{position:fixed; filter: blur(70px); opacity:.28; z-index:0; pointer-events:none;}
.aa-shape-1{ width:320px; height:320px; top:-80px; left:-80px; background:conic-gradient(from 0deg, var(--brand-orange), transparent);}
.aa-shape-2{ width:240px; height:240px; right:-50px; bottom:12%; background:conic-gradient(from 120deg, var(--brand-green), transparent);}
.aa-shape-3{ width:180px; height:180px; left:50%; bottom:-40px; transform:translateX(-50%); background:conic-gradient(from 240deg, rgba(0,0,0,.08), transparent);}

.aa-logo{ height:42px; user-select:none; }

/* card branco com a linguagem do app */
.aa-card{
  background: var(--auth-card-bg);
  border: 1px solid var(--auth-card-border);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(16,24,40,.06), 0 2px 8px rgba(16,24,40,.04);
  position: relative;
  z-index: 1;
}

/* botão com gradiente da marca */
.aa-btn{
  background: linear-gradient(90deg, var(--brand-orange), var(--brand-green));
  color:#fff; border:none; border-radius:12px;
  transition: transform .08s ease, filter .2s ease;
}
.aa-btn:hover{ filter:brightness(1.03); }
.aa-btn:active{ transform: translateY(1px) scale(0.998); }

/* inputs claros como no app */
body.aa-auth-bg .input-group-text{
  background:#fff; color:#6b7280; border-color:#e5e9f0;
}
body.aa-auth-bg .form-control{
  background:#fff; color:#111827; border-color:#e5e9f0;
}
body.aa-auth-bg .form-control::placeholder{ color:#9aa3af; }
body.aa-auth-bg .form-control:focus{
  border-color:var(--brand-orange);
  box-shadow:0 0 0 .25rem rgba(246,106,10,.12);
}
body.aa-auth-bg .btn-outline-secondary{
  border-color:#e5e9f0; color:#6b7280; background:#fff;
}
body.aa-auth-bg .btn-outline-secondary:hover{ background:#f9fafb; }

/* título com gradiente como a navbar */
.aa-brand-text{
  background:linear-gradient(90deg,var(--brand-orange), var(--brand-green) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

body.aa-auth-bg .alert{ border: none; border-radius: 12px; }
body.aa-auth-bg footer{opacity:.7}

/* ====== Modais de termos/privacidade ====== */
.modal.aa-policy .modal-content{ border-radius:16px; }
.modal.aa-policy .modal-header{
  border-bottom:0;
  background:linear-gradient(90deg, rgba(246,106,10,.12), rgba(11,163,96,.12));
}
.modal.aa-policy .modal-body{
  max-height:68vh; overflow:auto;
}
.modal.aa-policy h5{ font-weight:800; }
.modal.aa-policy h6{ font-weight:700; margin-top:1rem; }

/* =========================================================
   Marca no topo (versão GLASS p/ PNG com fundo branco)
   ========================================================= */
.aa-mark-badge{
  width:84px; height:64px; border-radius:16px;
  margin-inline:auto; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:
    0 10px 26px rgba(16,24,40,.10),
    0 2px 6px rgba(16,24,40,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.aa-mark{
  width:48px; height:auto; display:block;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:crisp-edges;
}
@media (min-width: 768px){
  .aa-mark-badge{ width:96px; height:72px; border-radius:18px; }
  .aa-mark{ width:56px; }
}

.aa-mark-badge{
  width:72px; height:72px; border-radius:50%;
  margin-inline:auto; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(130% 130% at 30% 10%,
              rgba(246,106,10,.16), rgba(11,163,96,.16));
  box-shadow: 0 6px 18px rgba(16,24,40,.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.aa-mark{ width:56px; }
@media (min-width: 768px){
  .aa-mark-badge{ width:80px; height:80px; }
  .aa-mark{ width:64px; }
}

/* ===== Favoritos: estrela única + alinhamento com preço ===== */
.fav-toggle{
  --fav-size: 28px;
  border: 0;
  background: transparent;
  width: var(--fav-size);
  height: var(--fav-size);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.fav-toggle .bi{ font-size: 18px; vertical-align: -2px; color:#a0a7b1; transition: color .12s ease; }
.fav-toggle .bi-star-fill{ display:none; }
.fav-toggle.is-on .bi-star{ display:none; }
.fav-toggle.is-on .bi-star-fill{ display:inline; color:#f5b301; }
.fav-toggle:hover{ background:rgba(16,24,40,.05); transform:scale(1.04); }
.fav-toggle:active{ transform:scale(.96); }
.fav-toggle:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(245,179,1,.35); }
.fav-toggle.pulse{ animation:favPulse .28s ease; }
@keyframes favPulse{ 0%{transform:scale(.85)} 60%{transform:scale(1.15)} 100%{transform:scale(1)} }
body.aa-dark .fav-toggle:hover{ background:rgba(255,255,255,.06) }
body.aa-dark .fav-toggle .bi{ color:#c2c8d0 }

/* Alinhamento preço + estrela à direita */
.station .right { display:flex; align-items:center; gap:10px; }
.station .price { white-space:nowrap; min-width:76px; text-align:right; font-weight:800; }