/* ============================================================
   Seletor de Servicos - Elojob Royal
   Barra de navegacao entre servicos nas paginas de checkout
   ============================================================ */
.ejr-selserv{display:flex;justify-content:center;padding:0 15px;margin:6px auto 34px;position:relative;z-index:5}
.ejr-selserv-inner{position:relative;display:inline-flex;gap:6px;padding:10px;border-radius:20px;background:linear-gradient(165deg,rgba(13,17,27,.78) 0%,rgba(8,12,20,.86) 100%),url('../imagens/background/seletor-bg.webp') center/cover no-repeat;border:1px solid rgba(30,224,172,.16);box-shadow:0 20px 55px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.02) inset,0 1px 0 rgba(255,255,255,.06) inset;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden}
.ejr-selserv-inner::before{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent 0%,rgba(30,224,172,.06) 45%,rgba(255,255,255,.05) 50%,rgba(30,224,172,.06) 55%,transparent 100%);transform:skewX(-18deg);animation:ejrShine 5.5s ease-in-out infinite;pointer-events:none}
@keyframes ejrShine{0%,55%{left:-60%}85%,100%{left:130%}}
.ejr-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100px;padding:15px 6px 12px;border-radius:14px;border:1px solid transparent;color:#8a90a6;text-decoration:none!important;transition:color .22s ease,background .22s ease,transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.ejr-tab:hover{color:#fff;background:rgba(255,255,255,.045);transform:translateY(-3px)}
.ejr-tab:focus-visible{outline:2px solid rgba(30,224,172,.7);outline-offset:2px}
.ejr-tab-ico{display:flex;align-items:center;justify-content:center;height:30px;filter:none;transition:filter .25s ease,transform .25s ease}
.ejr-tab-ico svg{width:27px;height:27px;display:block}
.ejr-tab:hover .ejr-tab-ico{transform:scale(1.08)}
.ejr-tab-lbl{font-size:12.5px;font-weight:700;letter-spacing:.45px;white-space:nowrap;text-transform:uppercase}
.ejr-tab.is-active{color:#eafff8;background:linear-gradient(180deg,rgba(30,224,172,.17) 0%,rgba(30,224,172,.05) 70%,rgba(30,224,172,.1) 100%);border-color:rgba(30,224,172,.5);box-shadow:0 0 24px rgba(30,224,172,.28),0 0 46px rgba(30,224,172,.1),inset 0 0 20px rgba(30,224,172,.09)}
.ejr-tab.is-active .ejr-tab-ico{color:#1ee0ac;filter:drop-shadow(0 0 7px rgba(30,224,172,.8))}
.ejr-tab.is-active:hover{transform:translateY(-1px)}
.ejr-tab-badge{position:absolute;top:7px;right:9px;font-size:8.5px;font-weight:800;letter-spacing:.6px;line-height:1;padding:3px 7px;border-radius:20px;color:#fff;text-transform:uppercase}
.ejr-badge-hot{background:linear-gradient(90deg,#ff4d6d,#ff8e53);box-shadow:0 0 12px rgba(255,77,109,.55)}
.ejr-badge-novo{background:linear-gradient(90deg,#6c5ce7,#a29bfe);box-shadow:0 0 12px rgba(108,92,231,.6)}
.ejr-badge-popular{background:linear-gradient(90deg,#0cbf8e,#1ee0ac);box-shadow:0 0 12px rgba(30,224,172,.55);color:#04231a}
@media (max-width:640px){
  .ejr-selserv{margin-bottom:26px}
  .ejr-selserv-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:380px;gap:7px}
  .ejr-tab{width:100%;flex-direction:row;justify-content:flex-start;gap:11px;padding:13px 14px}
  .ejr-tab-ico{height:24px}
  .ejr-tab-ico svg{width:22px;height:22px}
}
@media (prefers-reduced-motion:reduce){
  .ejr-selserv-inner::before{animation:none}
  .ejr-tab,.ejr-tab-ico{transition:none}
}


/* --------------------------------------------- botao Area do Cliente (navbar) */
.ejr-btn-cliente{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ejr-btn-cliente-ico{display:inline-flex}
.ejr-btn-cliente-ico svg{width:17px;height:17px;display:block}