/* =========================================================
   GLP C3.12.23
   MAPA PALETIZADO PREMIUM V2
   ========================================================= */


/* =========================================================
   CARROCERIA
   ========================================================= */

#glpC39 #glpC39Trailer{

  gap:6px !important;

  padding:
    18px 11px 15px !important;

  height:
    225px !important;

  min-height:
    225px !important;

  overflow:
    hidden !important;

  background:

    linear-gradient(
      90deg,
      rgba(181,211,226,.045) 1px,
      transparent 1px
    ),

    linear-gradient(
      180deg,
      #183a4f 0%,
      #153448 100%
    ) !important;

  background-size:
    40px 100%,
    auto !important;

}


/* =========================================================
   PALLET OCUPADO
   ========================================================= */

#glpC39 #glpC39Trailer
.glp-c3123-pallet.occupied,

#glpC39 #glpC39Trailer
.glp-c3123-pallet.partial{

  position:relative !important;

  isolation:isolate !important;

  display:flex !important;

  flex-direction:column !important;

  align-items:center !important;

  justify-content:center !important;

  min-width:0 !important;

  min-height:0 !important;

  box-sizing:border-box !important;

  overflow:visible !important;

  padding:
    5px 3px 12px !important;

  border:
    0 !important;

  border-radius:
    5px !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  transition:
    transform .14s ease,
    filter .14s ease;

}


/*
 * BLOCO DE CARGA.
 *
 * Esse é o elemento principal visual.
 * Não utilizamos mais madeira ocupando
 * a célula inteira.
 */

#glpC39 #glpC39Trailer
.glp-c3123-pallet.occupied::before,

#glpC39 #glpC39Trailer
.glp-c3123-pallet.partial::before{

  content:"" !important;

  position:absolute !important;

  display:block !important;

  left:
    2px !important;

  right:
    2px !important;

  top:
    2px !important;

  bottom:
    9px !important;

  z-index:
    -2 !important;

  border:
    1px solid
    rgba(255,255,255,.24) !important;

  border-radius:
    5px 5px 3px 3px !important;

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.20),
      transparent 32%
    ),

    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--pallet-color, #d72d93),
        white 8%
      ) 0%,

      var(--pallet-color, #d72d93)
      46%,

      color-mix(
        in srgb,
        var(--pallet-color, #d72d93),
        #051d2c 20%
      )
      100%
    ) !important;

  box-shadow:

    inset
    0 0 0 1px
    rgba(0,0,0,.06),

    inset
    0 -6px 9px
    rgba(0,0,0,.10),

    0 2px 4px
    rgba(0,0,0,.20) !important;

}


/*
 * BASE DE MADEIRA.
 *
 * Apenas uma faixa fina sob a carga,
 * semelhante ao mockup aprovado.
 */

#glpC39 #glpC39Trailer
.glp-c3123-pallet.occupied::after,

#glpC39 #glpC39Trailer
.glp-c3123-pallet.partial::after{

  content:"" !important;

  position:absolute !important;

  display:block !important;

  left:
    1px !important;

  right:
    1px !important;

  bottom:
    1px !important;

  height:
    9px !important;

  z-index:
    -1 !important;

  border:
    1px solid
    #8a5a2c !important;

  border-radius:
    1px 1px 4px 4px !important;

  background:

    linear-gradient(
      90deg,

      #9b6835 0 8%,

      #d4a365 8% 27%,

      #845527 27% 33%,

      #c99559 33% 59%,

      #7f5025 59% 65%,

      #d5a66c 65% 91%,

      #8d5b2d 91% 100%
    ) !important;

  box-shadow:

    inset
    0 2px 0
    rgba(255,255,255,.20),

    0 2px 2px
    rgba(0,0,0,.22) !important;

}


/* =========================================================
   IDENTIFICAÇÃO P01 / P02
   ========================================================= */

#glpC39 #glpC39Trailer
.glp-c3123-pallet
.glp-c3123-code{

  position:relative !important;

  inset:auto !important;

  z-index:
    8 !important;

  display:flex !important;

  align-items:center !important;

  justify-content:center !important;

  width:
    auto !important;

  min-width:
    20px !important;

  height:
    auto !important;

  margin:
    0 0 5px !important;

  padding:
    3px 4px !important;

  border:
    0 !important;

  border-radius:
    4px !important;

  background:
    rgba(5,29,42,.58) !important;

  color:
    #fff !important;

  font-size:
    6px !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

  letter-spacing:
    .015em;

  text-shadow:
    none !important;

  box-shadow:
    none !important;

}


/* =========================================================
   CAIXAS
   ========================================================= */

#glpC39 #glpC39Trailer
.glp-c3123-pallet
.glp-c3123-data{

  position:relative !important;

  z-index:
    8 !important;

  display:block !important;

  margin:
    0 !important;

  color:
    rgba(255,255,255,.95) !important;

  font-size:
    6px !important;

  font-weight:
    800 !important;

  line-height:
    1.1 !important;

  text-align:
    center !important;

  text-shadow:
    0 1px 2px
    rgba(0,0,0,.30) !important;

}


#glpC39 #glpC39Trailer
.glp-c3123-material,

#glpC39 #glpC39Trailer
.glp-c3123-weight{

  display:none !important;

}


/* =========================================================
   PALLET PARCIAL
   ========================================================= */

#glpC39 #glpC39Trailer
.glp-c3123-pallet.partial::before{

  left:
    5px !important;

  right:
    5px !important;

  top:
    19% !important;

  border:
    2px solid
    #e9b527 !important;

  background:

    linear-gradient(
      145deg,
      rgba(255,255,255,.12),
      transparent 32%
    ),

    linear-gradient(
      180deg,
      #536878,
      #334b5e
    ) !important;

}


#glpC39 #glpC39Trailer
.glp-c3123-partial-label{

  position:absolute !important;

  left:
    50% !important;

  right:
    auto !important;

  bottom:
    11px !important;

  top:
    auto !important;

  z-index:
    20 !important;

  transform:
    translateX(-50%) !important;

  padding:
    2px 4px !important;

  border:
    0 !important;

  border-radius:
    3px !important;

  background:
    #eab528 !important;

  color:
    #493200 !important;

  font-size:
    4px !important;

  font-weight:
    900 !important;

  line-height:
    1 !important;

}


/* =========================================================
   POSIÇÃO LIVRE
   ========================================================= */

#glpC39 #glpC39Trailer
.glp-c3123-pallet.free{

  position:relative !important;

  box-sizing:
    border-box !important;

  opacity:
    1 !important;

  border:
    1px dashed
    rgba(164,194,211,.26) !important;

  border-radius:
    6px !important;

  background:
    rgba(255,255,255,.012) !important;

  box-shadow:
    none !important;

}


#glpC39 #glpC39Trailer
.glp-c3123-pallet.free
.glp-c3123-code{

  background:
    transparent !important;

  color:
    rgba(173,202,216,.25) !important;

}


#glpC39 #glpC39Trailer
.glp-c3123-free-text{

  display:none !important;

}


/* =========================================================
   HOVER
   ========================================================= */

#glpC39 #glpC39Trailer
.glp-c3123-pallet.occupied:hover,

#glpC39 #glpC39Trailer
.glp-c3123-pallet.partial:hover{

  transform:
    translateY(-2px)
    scale(1.035) !important;

  z-index:
    30 !important;

  filter:
    brightness(1.07);

}


/* =========================================================
   LEGENDA
   ========================================================= */

#glpC39Legend{

  display:flex !important;

  flex-wrap:wrap;

  gap:
    18px !important;

  align-items:center;

  padding:
    12px 4px 2px !important;

}


#glpC39Legend span{

  display:inline-flex;

  align-items:center;

  gap:6px;

  color:
    #647f91;

  font-size:
    8px;

}


#glpC39Legend i{

  width:
    12px !important;

  height:
    12px !important;

  border-radius:
    3px !important;

}


/* =========================================================
   RODAPÉ DO MAPA
   ========================================================= */

#glpC39 .glp-c39-truck-name,

#glpC39 .glp-c39-stage-footer{

  color:
    #f3f8fb !important;

  font-size:
    8px !important;

  font-weight:
    800 !important;

}


/* =========================================================
   VALIDAÇÃO INFERIOR
   ========================================================= */

.glp-v2-validation-card{

  position:relative;

  box-sizing:border-box;

  min-height:
    72px;

  border:
    1px solid
    #dce7ee !important;

  border-radius:
    12px !important;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f8fbfd
    ) !important;

}


.glp-v2-validation-card::before{

  content:"";

  position:absolute;

  left:
    12px;

  top:
    50%;

  width:
    36px;

  height:
    36px;

  transform:
    translateY(-50%);

  border-radius:
    10px;

  background:
    #edf6ff;

  box-shadow:
    inset 0 0 0 1px
    #dcecff;

}


/* espaço para o ícone decorativo */

.glp-v2-validation-card{

  padding-left:
    58px !important;

}


/* caminhão */

.glp-v2-validation-vehicle::after{

  content:"▣";

  position:absolute;

  left:
    23px;

  top:
    50%;

  transform:
    translateY(-50%);

  color:
    #1e79d7;

  font-size:
    17px;

  font-weight:
    900;

}


/* peso */

.glp-v2-validation-weight::after{

  content:"▲";

  position:absolute;

  left:
    24px;

  top:
    50%;

  transform:
    translateY(-50%);

  color:
    #18a37e;

  font-size:
    13px;

}


/* volume */

.glp-v2-validation-volume::after{

  content:"◇";

  position:absolute;

  left:
    22px;

  top:
    50%;

  transform:
    translateY(-50%);

  color:
    #2186dd;

  font-size:
    17px;

  font-weight:
    900;

}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:1000px){

  #glpC39 #glpC39Trailer{

    gap:
      4px !important;

    padding-left:
      8px !important;

    padding-right:
      8px !important;

  }


  #glpC39 #glpC39Trailer
  .glp-c3123-code{

    min-width:
      16px !important;

    padding:
      2px !important;

    font-size:
      5px !important;

  }


  #glpC39 #glpC39Trailer
  .glp-c3123-data{

    font-size:
      5px !important;

  }

}