/* ============================================================
   KM GUINCHOS — PREMIUM UI LAYER
   Refinamento visual global para todas as telas do produto.
   Mantém a identidade asfalto + beacon e melhora hierarquia,
   contraste, espaçamento, estados e experiência mobile.
   ============================================================ */

:root{
  --surface-0:#0e1013;
  --surface-1:#15171b;
  --surface-2:#1b1f24;
  --surface-3:#22272e;
  --surface-4:#2a3038;
  --line-soft:rgba(255,255,255,.065);
  --line-mid:rgba(255,255,255,.11);
  --line-strong:rgba(255,255,255,.17);
  --text-1:#f7f8fa;
  --text-2:#d5d9df;
  --text-3:#a3aab4;
  --text-4:#747c87;
  --beacon:#ffb020;
  --beacon-soft:rgba(255,176,32,.10);
  --success:#39d98a;
  --success-soft:rgba(57,217,138,.10);
  --danger:#ff6b6b;
  --shadow-sm:0 8px 30px rgba(0,0,0,.16);
  --shadow-md:0 18px 55px rgba(0,0,0,.24);
  --shadow-lg:0 28px 90px rgba(0,0,0,.36);
  --ease:cubic-bezier(.22,1,.36,1);
}

html{background:var(--surface-0);}
body{
  background:
    radial-gradient(900px 480px at 86% -15%, rgba(255,176,32,.045), transparent 60%),
    radial-gradient(800px 520px at 0% 0%, rgba(255,255,255,.018), transparent 62%),
    var(--surface-1);
  color:var(--text-1);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

::selection{background:rgba(255,176,32,.26);color:#fff;}

/* shared shell */
.wrap{max-width:1180px;}
.app-main{padding-top:48px;}

.app-header{
  background:rgba(14,16,19,.82);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}

.app-header .bar{min-height:70px;padding:14px 0;}
.app-header .back{transition:color .18s ease,transform .18s ease;}
.app-header .back:hover{transform:translateX(-2px);}

.progress-steps .dot{position:relative;}
.progress-steps .dot.current::after{
  content:'';
  position:absolute;
  inset:-5px;
  border:1px solid rgba(255,176,32,.16);
  border-radius:50%;
}

/* logo */
.logo{filter:drop-shadow(0 4px 18px rgba(255,176,32,.06));}
.logo .dot-m::after{box-shadow:0 0 10px 2px rgba(255,176,32,.45);}

/* headers */
.app-head{max-width:660px;margin-bottom:30px;}
.app-head .eyebrow{
  background:linear-gradient(180deg,rgba(255,176,32,.11),rgba(255,176,32,.07));
  border-color:rgba(255,176,32,.20);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.app-head h1{font-size:clamp(30px,4.6vw,46px);letter-spacing:.012em;}
.app-head p{color:var(--text-3);line-height:1.65;}

/* cards / panels */
.panel,
.trip-summary,
.driver-card,
.req-item,
.provider-card,
.stats-row,
.auth-wrapper,
.review-card,
.feature-card{
  box-shadow:var(--shadow-sm);
}

.panel,
.req-item,
.driver-card,
.provider-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 40%),
    var(--surface-2);
  border-color:var(--line-soft);
}

.panel:hover,
.req-item:hover,
.driver-card:hover,
.provider-card:hover{
  border-color:var(--line-mid);
}

/* buttons */
.btn{
  min-height:44px;
  border-radius:10px;
  letter-spacing:.005em;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset;
}
.btn-primary{
  background:linear-gradient(180deg,#ffbc3d,#f6a90f);
  box-shadow:0 10px 24px -12px rgba(255,176,32,.7), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover{box-shadow:0 14px 30px -12px rgba(255,176,32,.72),inset 0 1px 0 rgba(255,255,255,.28);}
.btn-ghost{
  background:rgba(255,255,255,.015);
  border-color:var(--line-mid);
}
.btn-ghost:hover{background:var(--beacon-soft);}

/* form controls */
.text-input,
.textarea-input,
.select-input,
.icon-btn{
  background:var(--surface-3);
  border-color:var(--line-mid);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.text-input:focus,
.textarea-input:focus,
.select-input:focus,
.icon-btn:focus{border-color:rgba(255,176,32,.65);box-shadow:0 0 0 3px rgba(255,176,32,.08);}
.text-input::placeholder,.textarea-input::placeholder{color:var(--text-4);}
.field label{color:var(--text-2);}
.field .hint{color:var(--text-4);}

/* segmented controls */
.seg-opt{background:var(--surface-3);border-color:var(--line-soft);}
.seg-opt:hover{background:#262c33;border-color:rgba(255,176,32,.28);}
.seg-opt.active{box-shadow:0 0 0 1px rgba(255,176,32,.10) inset;}

/* trip summary */
.trip-summary{
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent),var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:15px;
}

/* stat cards */
.stats-row{background:transparent;border-color:var(--line-soft);box-shadow:none;gap:8px;}
.stat-box{
  background:linear-gradient(180deg,rgba(255,255,255,.018),transparent 60%),var(--surface-2);
  border:1px solid var(--line-soft);
  border-radius:12px;
}
.stat-box .val{letter-spacing:-.02em;}

/* provider cards — the key commercial surface */
.provider-card{
  position:relative;
  overflow:hidden;
  border-radius:17px;
  padding:18px;
  transition:transform .2s var(--ease),border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.provider-card::after{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,rgba(255,176,32,0),rgba(255,176,32,.8),rgba(255,176,32,0));
  opacity:0;
  transition:opacity .2s ease;
}
.provider-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.provider-card:hover::after{opacity:.8;}
.provider-avatar{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 10px 22px rgba(0,0,0,.22);}
.provider-title h3{letter-spacing:-.01em;}
.provider-meta{color:var(--text-3);}
.provider-meta .rating{font-weight:700;}
.provider-price .val{font-weight:800;letter-spacing:-.035em;}

/* tags */
.badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}

/* loading / skeletons */
.skeleton,
.skeleton-line,
.skel-card{
  background:linear-gradient(90deg,#22272e 25%,#2a3038 37%,#22272e 63%);
  background-size:400% 100%;
  animation:kmg-shimmer 1.35s linear infinite;
}
@keyframes kmg-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* empty state */
.empty-state{
  padding:68px 24px;
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent),var(--surface-2);
  border:1px dashed var(--line-mid);
  border-radius:16px;
}
.empty-state svg{color:var(--text-4);}

/* toast */
.toast{
  background:rgba(27,31,36,.96);
  border-color:var(--line-mid);
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(12px);
}

/* floating WhatsApp */
.wa-float{
  width:52px;height:52px;bottom:20px;right:20px;
  background:linear-gradient(180deg,#ffbd3c,#f5aa12);
  box-shadow:0 14px 30px -10px rgba(255,176,32,.60),inset 0 1px 0 rgba(255,255,255,.22);
}
.wa-float::before{border-color:rgba(255,176,32,.8);}

/* mini footer */
.mini-footer{border-top-color:var(--line-soft);}
.mini-footer .wrap{color:var(--text-4);}

/* dialogs / sheets */
.overlay{
  background:rgba(5,7,9,.72) !important;
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
}
.sheet,
.dispatch-modal{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 30%),
    var(--surface-2) !important;
  border-color:var(--line-mid) !important;
  box-shadow:var(--shadow-lg) !important;
}
.sheet-close,
.dispatch-close-btn{
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.sheet-close:hover,.dispatch-close-btn:hover{transform:rotate(3deg);}

/* login */
.auth-wrapper{
  background:
    radial-gradient(500px 220px at 50% -18%,rgba(255,176,32,.07),transparent 70%),
    var(--surface-2);
  border-color:var(--line-soft);
  box-shadow:var(--shadow-lg);
}
.tabs{background:rgba(0,0,0,.18);border:1px solid var(--line-soft);}
.tab-btn.active{background:var(--surface-3);box-shadow:inset 0 1px 0 rgba(255,255,255,.035);}

/* landing */
.hero{padding-top:102px;}
.hero h1{letter-spacing:.008em;text-shadow:0 12px 42px rgba(0,0,0,.28);}
.hero-card,
.hero-panel,
.proof-card,
.card,
.price-card,
.feature-card{
  box-shadow:var(--shadow-md);
}

/* mobile polish */
@media(max-width:760px){
  .wrap{padding-left:18px;padding-right:18px;}
  .app-main{padding-top:34px;padding-bottom:56px;}
  .app-header .bar{min-height:62px;}
  .app-head{margin-bottom:24px;}
  .app-head h1{font-size:clamp(29px,9vw,38px);}
  .panel{padding:18px;}
  .provider-card{padding:16px;}
  .provider-action{min-width:122px;}
}

@media(max-width:560px){
  .btn{min-height:46px;}
  .provider-card{border-radius:15px;}
  .stats-row{gap:6px;}
  .stat-box{padding:15px 13px;}
  .mini-footer{margin-top:28px;}
}

@media(prefers-reduced-motion:reduce){
  .provider-card:hover{transform:none;}
}