/* ==========================================================
   Courier Express — tema do site público (pedido / meus pedidos)
   Carregado DEPOIS de external.css. Para desfazer: remova a linha que inclui este arquivo.
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root{
  --ce-blue:#46A7DE; --ce-blue-2:#7CC4EC; --ce-blue-d:#2479B3; --ce-navy:#071B29;
  --ce-sand:#FADABC; --ce-black:#0C092A; --ce-g1:#49465F; --ce-g2:#858494; --ce-g4:#E6E6E6;
  --ce-bg:#F4F7FC; --ce-green:#2E9E5B; --ce-red:#E5484D;
  --ce-grad:linear-gradient(90deg,#46A7DE 0%,#7CC4EC 100%);
  --ce-shadow:0 10px 30px rgba(7,27,41,.07);
}
body, h1,h2,h3,h4,h5,h6, p, a, label, input, select, textarea, button, .btn, .lead{
  font-family:'Nunito',-apple-system,Segoe UI,Roboto,sans-serif !important;
}
body{ background:var(--ce-bg) !important; color:var(--ce-black); }

/* ---------- Topo ---------- */
.navbar.bg-light{
  background:rgba(255,255,255,.95) !important; backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ce-g4); padding:12px 28px !important; position:sticky; top:0; z-index:1000;
}
.navbar-brand{ font-weight:900 !important; color:var(--ce-black) !important; font-size:20px !important; display:flex !important; align-items:center; gap:10px; }
.navbar-brand img{ height:40px !important; border-radius:12px; }
.navbar .nav-link{ color:var(--ce-g1) !important; font-weight:700 !important; padding:8px 14px !important; border-radius:10px; }
.navbar .nav-link:hover{ color:var(--ce-blue) !important; background:var(--ce-bg); }
.navbar .nav-item.active .nav-link{ color:var(--ce-blue) !important; background:rgba(70,167,222,.10); }
.dropdown-menu{ border:1px solid var(--ce-g4) !important; border-radius:12px !important; box-shadow:0 12px 32px rgba(7,27,41,.12) !important; }
.dropdown-item:hover{ background:var(--ce-bg) !important; color:var(--ce-blue) !important; }

/* ---------- Hero ---------- */
#app{
  background-image:
    radial-gradient(900px 420px at 85% -10%, rgba(70,167,222,.22), transparent 70%),
    radial-gradient(600px 300px at 0% 10%, rgba(250,218,188,.45), transparent 70%) !important;
  background-color:var(--ce-bg) !important; background-size:auto !important; min-height:100vh;
}
.headerText{
  font-weight:900 !important; font-size:44px !important; letter-spacing:-.5px;
  color:var(--ce-black) !important; margin-top:12px;
}
.subheader{ color:var(--ce-g2) !important; font-weight:600 !important; font-size:18px !important; margin-bottom:28px !important; }

/* ---------- Cartão do pedido ---------- */
.newOrderContainer{
  background:#fff !important; border:1px solid var(--ce-g4) !important; border-radius:24px !important;
  box-shadow:var(--ce-shadow) !important; padding:28px 28px 24px !important; max-width:860px;
}
.green-text{ color:var(--ce-black) !important; font-weight:900 !important; font-size:22px !important; }
.what-we-can-do-today{ color:var(--ce-g2) !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.8px; font-size:12px !important; margin:14px 0 12px !important; }

/* Tipos de veículo / categorias */
ul.orderingTypes{ display:flex !important; gap:12px; flex-wrap:wrap; justify-content:center; padding:0 !important; margin:0 !important; background:transparent !important; }
ul.orderingTypes li, .vehicle_type_cards, .orderingType{
  list-style:none; width:132px !important; min-height:120px; padding:14px 8px !important; margin:0 !important;
  background:var(--ce-bg) !important; border:1.5px solid transparent !important; border-radius:18px !important;
  box-shadow:none !important; transition:transform .15s, border-color .15s, background .15s; float:none !important;
}
ul.orderingTypes li:hover{ transform:translateY(-2px); border-color:rgba(70,167,222,.45) !important; background:#fff !important; }
ul.orderingTypes li.active, ul.orderingTypes li.selected, ul.orderingTypes li[class*="active"], ul.orderingTypes li[class*="select"]{
  border-color:var(--ce-blue) !important; background:rgba(70,167,222,.08) !important; box-shadow:0 6px 16px rgba(70,167,222,.18) !important;
}
ul.orderingTypes li img{ width:64px !important; height:64px !important; object-fit:contain; filter:none !important; }
ul.orderingTypes li h6{ font-weight:800 !important; color:var(--ce-black) !important; font-size:14px !important; margin-top:8px !important; }

/* Ícones novos dos veículos (mesmos dos apps) */
.vehicle_type_cards img[alt="Car" i]{ content:url('ce-car.png'); }
.vehicle_type_cards img[alt="Motorcycle" i]{ content:url('ce-motorcycle.png'); }
.vehicle_type_cards img[alt="Luxury Car" i]{ content:url('ce-luxury_car.png'); }
.vehicle_type_cards img[alt="SUV" i]{ content:url('ce-suv.png'); }

/* ---------- Formulário ---------- */
label{ color:var(--ce-g1) !important; font-weight:700 !important; font-size:13px !important; }
.form-control{
  border:1px solid var(--ce-g4) !important; border-radius:12px !important; min-height:48px;
  box-shadow:none !important; color:var(--ce-black) !important; background:#fff !important;
}
.form-control:focus{ border-color:var(--ce-blue) !important; box-shadow:0 0 0 3px rgba(70,167,222,.15) !important; }
.btn{ border-radius:12px !important; font-weight:800 !important; }
.btn-primary, .btn-success{
  background:var(--ce-grad) !important; border:none !important; color:#fff !important;
  box-shadow:0 6px 16px rgba(70,167,222,.30) !important;
}
.btn-primary:hover, .btn-success:hover{ filter:brightness(.96); }
.table{ border-radius:12px; overflow:hidden; }
.table-striped tbody tr:nth-of-type(odd){ background:var(--ce-bg) !important; }
.selectedPaymentMethod{ border-radius:16px !important; border:1.5px solid var(--ce-g4) !important; box-shadow:none !important; transition:border-color .15s; }
.selectedPaymentMethod:hover{ border-color:var(--ce-blue) !important; }

/* ---------- Como funciona ---------- */
.card.card-success{
  border:1px solid var(--ce-g4) !important; border-radius:24px !important; box-shadow:var(--ce-shadow) !important;
  max-width:860px; margin:28px auto 40px !important; background:#fff !important;
}
.card.card-success .card-body{ padding:32px !important; }
.card.card-success h4{ font-weight:900 !important; font-size:22px !important; color:var(--ce-black) !important; }
.stepper .rounded-circle.bg-primary{
  min-width:40px; flex:0 0 40px;
  background:var(--ce-grad) !important; width:40px; height:40px; padding:0 !important;
  display:flex; align-items:center; justify-content:center; font-weight:900; box-shadow:0 6px 14px rgba(70,167,222,.3);
}
.stepper .line{ border-left:2px dashed rgba(70,167,222,.35) !important; background:none !important; width:0 !important; }
.stepper h5.text-dark{ font-weight:800 !important; color:var(--ce-black) !important; }
.stepper .lead.text-muted{ color:var(--ce-g2) !important; font-size:15px !important; line-height:1.6; }

/* ---------- Rodapé / modais ---------- */
.simple-footer{ color:var(--ce-g2) !important; padding:24px 0 !important; }
.modal-content{ border:none !important; border-radius:20px !important; box-shadow:0 24px 60px rgba(7,27,41,.18) !important; }
.modal-header{ border-bottom:1px solid var(--ce-g4) !important; }
.modal-title{ font-weight:900 !important; }
.card{ border-radius:16px; }
@media (max-width:576px){ .headerText{ font-size:32px !important; } ul.orderingTypes li{ width:44% !important; } }

/* ---------- Marca: logo + "CourierExpress" ---------- */
.navbar-brand{ font-size:0 !important; }
.navbar-brand img{ order:0; height:42px !important; width:42px; border-radius:12px; }
.navbar-brand::before{ content:"Courier"; order:1; font-size:21px; font-weight:900; color:var(--ce-black); margin-left:2px; }
.navbar-brand::after{ content:"Express"; order:2; font-size:21px; font-weight:600; color:var(--ce-blue); margin-left:-10px; }