body { margin: 0; padding: 0; box-sizing: border-box; background-color: #fff; font-family: Arial, Helvetica, sans-serif; outline: none;}
* {  padding: 0; margin: 0; box-sizing: border-box; outline: none; }

:root {
    --main-color: #27B75D;
    --error-color: #f73e54;
    --blue-color: #005ebc;
    --orage-color: #ff914d;
    --orage-color: #9900ff;
}
main nav.nav-content { width: 100%; display: flex; height: 55px; background-color: #000; align-items: center; justify-content: center;  border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
main nav.nav-content div.conteiner-nav { width: 900px; height: 55px; display: flex; justify-content: space-between;  }
main nav.nav-content div.conteiner-nav div.logo { width: auto; height: 55px; }
main nav.nav-content div.conteiner-nav div.logo img { height: 45px; margin-top: 5px; }

main nav.nav-content div.conteiner-nav div.menu-user { display: flex; align-items: center;}
main nav.nav-content div.conteiner-nav div.menu-user a { padding: 15px; height: 35px; color: #fff; border: 1px solid #000; background-color: #fff; border-radius: 5px; color: #000; text-decoration: none; text-transform: uppercase;
font-size: .7em; display: flex; align-items: center; margin-left: 15px;}
main nav.nav-content div.conteiner-nav div.menu-user a.singup { background-color: transparent; border-color: #fff; color: #fff; }

main nav.nav-content div.conteiner-nav div.menu-user { width: auto; height: 55px; }

main header.header-container { width: 100%; background-color: #000; display: flex; align-items: center; justify-content: center; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
main header.header-container div.box-header { width: 900px; height: 230px; display: flex; }
main header.header-container div.box-header div.content-header { width: calc(100% - 350px); color: #fff;}

main header.header-container div.box-header div.content-header div.title-header h1.title-main { margin-bottom: 5px; font-size: 2.6em; margin-top: 35px; }
main header.header-container div.box-header div.content-header div.title-header h5.desc-main {  font-weight: 100; }

main header.header-container div.box-header div.content-header div.form-header form { width: 100%; display: flex; margin-top: 35px;}
main header.header-container div.box-header div.content-header div.form-header form input { height: 50px; background-color: #fff; border-radius: 5px; border:1px solid var(--main-color); text-indent: 10px; font-size: 1em;
font-weight: 100;}
main header.header-container div.box-header div.content-header div.form-header form input.order_n { width: 112px; margin-right: 10px;}
main header.header-container div.box-header div.content-header div.form-header form input.cod_shipping { width: 222px; margin-right: 15px; }
main header.header-container div.box-header div.content-header div.form-header form button.get-order { padding: 10px; background-color: var(--main-color); color: #fff; border: 1px solid #fff; border-radius: 5px; display: flex;
align-items: center;}
main header.header-container div.box-header div.content-header div.form-header form .or { display: flex; align-items: center; padding-right: 10px; font-size: .9em; }
main header.header-container div.box-header div.content-header div.form-header form button.get-order i { width: 25px; height: 25px; background-image: url(../images/svg/2.svg); background-size: 100%; background-position: center;
background-repeat: no-repeat; margin-right: 5px; } 

main header.header-container div.box-header div.content-header div.form-header div.desc-form { font-size: .70em; margin-top: 10px;}
main header.header-container div.box-header div.content-header div.form-header div.desc-form a { color: var(--main-color); text-decoration: none; }
main header.header-container div.box-header div.content-header div.form-header div.desc-form a:hover { text-decoration: underline;}

main header.header-container div.box-header figure.rastrieo-icon-large { width: 350px; height: 350px; }
main header.header-container div.box-header figure.rastrieo-icon-large img { width: 100%; }
content.page-content { width: 900px; display: block; margin: 0 auto; }
content.page-content div.status-order-desc { width: auto;  display: flex; width: 100%; flex-direction: column; margin-top: 45px;}
content.page-content div.status-order-desc div.header-status { width: 100%; display: flex;}
content.page-content div.status-order-desc div.header-status h4.status { color: #000; margin-right: 10px; }
content.page-content div.status-order-desc div.header-status h4.identy { color: #aaa; font-weight: 100; font-size: .9em;}
content.page-content div.status-order-desc h2 { color: var(--main-color); margin-top: 5px;}

body.is-site content.page-content { width: 100% !important; justify-content: center;}
body.is-site .status-container { justify-content: center; margin-top: 30px;}
body.is-site.hdr-vis .status-container { margin-top: 10px !important; }
body.is-site content.page-content .status-card { width: 100% !important; margin-right: 0; }
body.is-site main header.header-container div.box-header div.content-header { width: 100% !important; padding-left: 15px; max-width: 100% !important;}
body.is-site main header.header-container div.box-header { width: 100%; height: auto; padding-bottom: 15px; }
body.is-site main header.header-container div.box-header div.content-header div.title-header h1.title-main { margin-top: 15px; font-size: 2em; }

body.is-site main { padding: 10px; }
body.is-site main header.header-container {border-radius: 5px;}
body.is-site main .timeline-itens { margin-left: 90px; }
body.is-site main .timeline-itens-time { left: -166px; }

.timeline { display: flex; align-items: center; justify-content: space-between; width: 100%; position: relative; margin-top: 50px; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; background-color: var(--main-color); z-index: 0; border-radius: 9px; margin-top: 50px;}
.timeline-step { display: flex; flex-direction: column; align-items: center; z-index: 1; position: relative; }
.timeline-step.by-nf { padding-top: 19px; }
.icon-circle { background-color: var(--main-color); width: 70px; height: 70px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 52px; position: relative;}
.icon-circle:before { width: 1px; height: 35px; border-left: var(--main-color) 5px dotted; content: ""; position: absolute; top: 100%; }
.icon-circle:after { width: 16px; height: 16px; background-color: #fff; border:3px solid var(--main-color); border-radius: 50%; content: ""; position: absolute; bottom: -47px;  }
.icon-circle i.icon { width: 35px; height: 35px; background-position: center; background-size: 100%;} 
.icon-circle i.icon.pedido-criado { background-image: url(../images/svg/3.svg); }
.icon-circle i.icon.pagamento-aprovado { background-image: url(../images/svg/4.svg); }
.icon-circle i.icon.pedido-faturado { background-image: url(../images/svg/5.svg); }
.icon-circle i.icon.pedido-enviado { background-image: url(../images/svg/6.svg); }
.icon-circle i.icon.pedido-entregue { background-image: url(../images/svg/7.svg); }

.step-title { font-weight: 100; font-size: 14px; color: #999; margin: 5px 0;}
.step-date { font-size: 12px; color: #333; font-weight: bold; }
.nota-fiscal { font-size: 12px; color: #007bff; text-decoration: none; margin-top: 5px; }  
.nota-fiscal:hover { text-decoration: underline; }


.status-container { display: flex; width: 100%; margin-top: 50px;} 
.status-card { width: calc(100% - 350px); margin-right: 30px; display: flex; }
.status-card, .tracking-card {border: 1px solid #28a745; border-radius: 8px; background-color: var(--main-color); display: flex; flex-direction: column; justify-content: space-between; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.status-card .status-icon { width: 100%; display: flex; align-items: center; padding: 15px; background: #fff; border-radius: 7px;}
.status-card .status-icon i.icon {  width: 75px; height: 75px; background-position: center; background-repeat: no-repeat; background-size: 80%;}
.status-card .status-icon i.icon.check-icon { background-image: url(../images/svg/8.svg); }
.status-card .status-icon i.icon.tracking-icon { background-image: url(../images/svg/8.svg); }
.status-card .status-icon .status-content { padding-left: 15px; }
.status-card .status-icon .status-content h2 { font-size: 1.8em; color: #333; margin: 3px 0;}
.status-card .status-icon .status-content p { font-size: 14px; color: #666; }
.status-footer { background-color: transparent; padding: 5px 10px; border-radius: 0 0 8px 8px; color: #fff; font-size: 12px; text-align: left; display: flex;     align-items: center;}
.status-footer p.previsao {
  background-color: rgba(0, 0, 0, 0.5);
    padding: 2px 7px;
    border-radius: 12px;
    font-size: .9em;
    margin-right: 5px;
}
.status-card.error { border-color: var(--error-color); background-color: var(--error-color); }
.status-card.error .status-icon i.icon.check-icon { background-image: url(../images/svg/18.svg); }

.status-card.orange { background-color: var(--orage-color) !important; border-color: var(--orage-color); }
.status-card.blue { background-color: var(--blue-color) !important; border-color: var(--blue-color); }

.tracking-card { width: 350px !important; display: flex; flex-direction: column; transition: background-color 0.3s;}
.tracking-card .tracking-icon { }
.tracking-card i.icon.tracking-icon { width: 75px; height: 75px; background-position: center; background-repeat: no-repeat; background-size: 75%; background-image: url(../images/svg/9.svg);}
.tracking-card:hover { background-color: #218838;}
.tracking-content { display: flex; align-items: center; background-color: #fff; width: 100%; border-radius: 5px; height: 100%; }
.tracking-content h3 { font-size: 1em; margin: 0; color: #999; font-weight: 100;}
.tracking-content p {font-size: 1.6em; font-weight: bold; color: #333; margin: 0; margin-top: 3px;}
.notify-button { display: flex; align-items: center; justify-content: flex-start;  background-color: transparent; color: #fff;
border: none; border-radius: 5px; padding: 10px 15px; font-size: 1em; cursor: pointer; }
.notify-button i.icon {  width: 25px; height: 25px; background-position: center; background-repeat: no-repeat; background-size: 100%; background-image: url(../images/svg/10.svg);
margin-right: 10px;}


.timeline-itens {width: 80%; margin: 0 auto; border-left: 2px dashed #ddd; position: relative; padding-left: 30px; margin-top: 30px; padding-top: 10px;}
.timeline-itens-item { margin-bottom: 30px;  position: relative; }  
.timeline-itens-time { position: absolute; left: -174px; top: 15px; text-align: right; width: 100px;  color: #333; font-size: 14px; display: flex; flex-direction: column;}
.timeline-itens-time span.date { font-weight: bold; color: #666; font-size: .9em;}
.timeline-itens-time span.hour { font-weight: 100; color: #aaa; font-size: .8em;}
.timeline-itens-content { display: flex; gap: 15px; align-items: flex-start;  padding: 15px;  border-radius: 8px;  }
.timeline-itens-icon { width: 50px;height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 50%;  border: none; position: absolute; left: -55px; background-color: #fff; top: 5px;
background-position: center; background-size: 50%; background-repeat: no-repeat; }
.timeline-itens-icon img { width: 24px; height: 24px;} 
.timeline-itens-details h3 { margin: 0;font-size: 14px; color: #666;}
.timeline-itens-details p { margin: 5px 0; font-size: 12px; color: #999;}
.location {font-size: 9px;  color: #888; display: flex; width: 100%; margin-top: 9px; align-items: center;}
.location i { width: 20px; height: 20px; background-position: center; background-size: 100%; background-repeat: no-repeat; display: block; background-image: url(../images/svg/13.svg); margin-right: 5px; display: flex; }
.location div.data-loc { width: 100%; display: flex; flex-direction: column; }
.additional-info { margin-top: 10px; background: #f9f9f9; padding: 10px; border-radius: 8px; border-left: 4px solid #007bff;}  
.additional-info h4 {  margin: 0;  font-size: 10px; color: #007bff; display: flex; align-items: center;}
.additional-info h4::before { width: 15px; height: 15px; background-position: center; background-repeat: no-repeat; background-size: 100%; background-image: url(../images/svg/12.svg); content: ""; margin-right: 5px;}
.additional-info p { margin: 5px 0 0; font-size: 10px; color: #555; }
/* Icon colors */
.timeline-itens-icon.delivered {  }
.timeline-itens-icon.in-transit { background-image: url(../images/svg/14.svg);}
.timeline-itens-icon.posted { background-image: url(../images/svg/15.svg);}


.icon-etiqueta { background-image: url(../images/svg/24.svg); }
.icon-entregue { background-image: url(../images/svg/8.svg); }
.icon-entregue-remetente { background-image: url(../images/svg/23.svg); }
.icon-acaminho {background-image: url(../images/svg/14.svg); }
.icon-saiu-entrega { background-image: url(../images/svg/17.svg); }
.icon-postado { background-image: url(../images/svg/15.svg); }
.icon-retorno { background-image: url(../images/svg/15.svg); }
.icon-transfer { background-image: url(../images/svg/19.svg); background-size: 70%; }
.icon-erro-entrega { background-image: url(../images/svg/21.svg); background-size: 60%; }
.icon-erro-entrega-cateiro { background-image: url(../images/svg/22.svg); background-size: 60%; }
.icon-saiu-entrega-return { background-image: url(../images/svg/20.svg); background-size: 60%; }


body #loading-overlay {
  position: fixed;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.8);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  z-index: 9999;
  color:#333;
  font-family: sans-serif;
  text-align: center;
}

body #loading-overlay .spinner {
  width:50px;
  height:50px;
  border:6px solid #333;
  border-top-color: transparent;
  border-radius:50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}
body #loading-overlay  {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.recent-tracks-box {
  margin-top: 5px;
  padding: 0;
  display: flex;
  position: relative;
  
}

.recent-tracks-box .title-recents {
   flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  padding: 8px 14px;
  background: #000;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
  border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

.recent-tracks-box .title-recents::before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url(../images/svg/history-white.svg);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  margin-right: 5px;
  margin-left: -5px;
}

.recent-tracks-box .recent-tracks-list {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0px 5px;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 50px;
  position: relative;
}
.recent-tracks-box .recent-tracks-list::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* efeito degradê lateral opcional */
.recent-tracks-box::after {
  content: "";
    position: absolute;
    right: -15px;
    top: 0;
    width: 90px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #fff 80%);
}

.recent-tracks-box .recent-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  padding: 8px 14px;
  background: #000;
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}
.recent-tracks-box .recent-chip:hover {
  background: #222;
}

.pickup-address {
  background: #f6f9ff;
  border-left: 3px solid red;
  padding: 4px 10px;
  border-radius: 6px;
  margin-top: 8px;
}
.pickup-address strong {
  color: red;
      font-size: .8em;
}
.pickup-address p {
  font-size: 0.7em;
}

.pickup-address em {
  color: #666;
  font-size: 0.9em;
}