@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: .3s ease-in-out;
}

/* LIGHT (default) */
body {
    background: #f4f6fb;
    color: #111;
}

/* DARK GLOBAL */
.dark body, .dark section, .dark nav, .dark .menu-panel, .dark .love-card, .dark .page-container, .dark .call-popup, .dark .actions .call, .dark .report-content {
    background: #0f172a;
    color: #e5e7eb;
}

.dark .user-card, .dark .payment-card,  .dark .payment-card h4, .dark .login-container, .dark .modal, .dark #rating-popup, .dark .cancel-card, .dark .notification-info, .dark .selectable-order,.dark .info-notification-order, .dark .container-logo, .dark .register-card, .dark .container-login-work, .dark .container-login-user, .dark .terms-box, .dark .ctn-form-terms, .dark .info-card, .dark .auth-card, .dark .action-buttons .secondary, .dark .container-man-service, .dark .header, .dark .meta, .dark .slider, .dark .slider .slide, .dark .history-detailed-item, .dark #form-cancel, .dark #plain, .dark .notification-card, .dark .rating-box, .dark .container-profile-visit, .dark .report-item, .dark .love-container, .dark .love-title{
    background: #151f36;
    color: #e5e7eb;
}

.dark .bank-selected span, .dark .history-item span,.dark .history-item strong, .dark .form-check-label {
    color: #000000 !important;
}
.dark .bank-selected span.arrow {
    color: orange;
}

.dark .menu-overlay {
    background-color: #dcd9d9;
    backdrop-filter: blur(1px);
}

.dark span , .dark i, .dark #close-menu, .dark .menu-links a, .dark .hero p, .dark #plain h3, .dark .user-info h2, .dark .card h3, .dark #financeChart, .dark .extra-link, .dark .links-policy a, .dark .cancel-message, .order-info p, .dark .call-body p, .dark .call-info span, .dark .call-info strong, .dark .info-notification-order p, .dark .article-init h2, .dark .title, .dark .subtitle, .dark .info-box, .dark .container-login-work p, .dark .container-login-user p, .section-title, .dark .auth-card h2, .dark .btn-close, .dark .modal-body, .dark .modal-header .btn-close, .dark #rating-name, .dark .rating-user-info span, .dark .rating-user-info strong{
    color: #e5e7ebde !important;
}

/* CARDS */
.dark .card-action,
.dark .card-setting, .dark header, .dark .profile-header, .dark .plan-card, .dark .action-buttons, .dark .profile-marketplace, .dark .modal-content, .dark .love-card {
    background: #1e293b;
    color: #e5e7eb;
}
.dark .love-options .love-card .text strong, .dark .love-options .love-card .text small{
    color: #e5e7eb !important;
}
.dark .card,
.dark .card-setting {
    background: #1e293b;
}

.dark .action-buttons .primary {
    background: #ff7a00;
    color: white;
}
.dark .fa-camera {
    color: #ff7a00 !important;
}


/* INPUTS */
.dark input,
.dark select {
    background: #0f172a;
    color: white;
    border: 1px solid #334155;
}

/* =========================
   OVERLAY (FUNDO)
========================= */
.rating-notification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);

  display: flex;
  justify-content: center;

  z-index: 9999;
}


/* =========================
   CAIXA PRINCIPAL
========================= */
.rating-box {
  width: 320px;
  max-width: 90%;
  height: 210px;
  margin-top: 40px;

  background: #fff;
  color: #000;

  border-radius: 18px;
  padding: 22px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.25);

  animation: ratingFade 0.3s ease;
}


/* =========================
   HEADER (FOTO + NOME)
========================= */
.rating-header {
  display: flex;
  align-items: center;
  gap: 12px;

  margin-bottom: 15px;
}

.rating-header img {
  width: 52px;
  height: 52px;

  border-radius: 50%;
  object-fit: cover;

  border: 2px solid rgba(255,255,255,0.1);
}


/* =========================
   INFO DO USUÁRIO
========================= */
.rating-user-info {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.rating-user-info strong {
  font-size: 15px;
  color: var(--text-color);
}

.rating-user-info span {
  font-size: 12px;
  color: var(--text-muted, #888);
}


/* =========================
   ESTRELAS
========================= */
.rating-stars {
  text-align: center;

  font-size: 26px;
  letter-spacing: 2px;

  color: #ff7a00;

  margin: 15px 0;
}


/* =========================
   BOTÃO
========================= */
#rating-ok-form button {
  width: 100%;

  background:  linear-gradient(135deg, #ff9800, #ffb347);
  color: #fff;

  border: none;
  border-radius: 12px;

  padding: 12px;
  font-weight: bold;

  cursor: pointer;

  transition: all 0.2s ease;
}

#rating-ok-form button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

#rating-ok-form button:active {
  transform: scale(0.97);
}


/* =========================
   ANIMAÇÃO
========================= */
@keyframes ratingFade {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.rating-notification {
  animation: fadeOverlay 0.3s ease;
}

@keyframes fadeOverlay {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* TOAST */
.toast-box {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #111;
    color: white;
    padding: 12px 18px;
    border-radius: 10px;
    opacity: 0;
    transform: translateY(20px);
    transition: 0.3s;
    z-index: 10000;
}

.toast-box.show {
    opacity: 1;
    transform: translateY(0);
}
.small-text {
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 10px;
}
/*MENSAGEM QUE APARECE E DESAPARECE NA CRIACAO DE CONTA*/
/* Overlay */
.modal-dinamica-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Modal */
.modal-dinamica {
    width: 90%;
    max-width: 420px;
    padding: 20px;
    border-radius: 16px;
    background: var(--card-bg, #ffffff);
    color: var(--text-color, #222);
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    animation: modalFade 0.3s ease;
}

/* Dark mode automático */
.dark .modal-dinamica {
    background: #1e293b;
    color: #f1f1f1;
}

/* Texto */
.modal-dinamica p {
    font-size: 15px;
    line-height: 1.6;
}
.dark .modal-dinamica p {
    font-size: 15px;
    line-height: 1.6;
    color: #ffffff;
}

/* Botão */
.modal-dinamica button {
    margin-top: 15px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: orange;
    color: white;
    font-weight: 500;
    transition: 0.2s;
}

.modal-dinamica button:hover {
    opacity: 0.9;
}

/* Animação */
@keyframes modalFade {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/*COMEÇA AQUI NOTIFICAÇÃO DE QUEM TRABALHA*/
.notification-call-recieve {
    position: fixed;
    min-width: 100vw;
    min-height: 100vh;
    background-color: #000000c5;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 1000;
}

.notification-call-recieve div {
    margin-top: 40px;
    max-width: 400px;
    max-height: 100px;
    padding: 15px;
    border-radius: 10px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.notification-call-recieve div p {
    text-align: justify;
    text-indent: 10px;
    font-size: .8em;
}

/*COMEÇA AQUI NOTIFICAÇÃO DE QUEM NÃO TRABALHA*/
.notification-call {
    position: fixed;
    min-width: 100vw;
    min-height: 100vh;
    background-color: #000000c5;
    display: flex;
    flex-direction: row;
    justify-content: center;
    z-index: 1000;
}

.notification-call form {
    margin-top: 40px;
    width: 90%;
    height: 200px;
    padding: 15px;
    border-radius: 10px;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}

.notification-call form p {
    text-align: justify;
    text-indent: 10px;
    font-size: .8em;
}

.notification-call form button label {
    width: 100% !important;
    height: 100% !important;
    cursor: pointer;
}

.notification-call form button.yes {
    border: none;
    padding: 6px;
    width: 100px;
    border-radius: 4px;
    cursor: pointer;
    background-color: orange;
}

.notification-call form button.no {
    border: none;
    padding: 6px;
    width: 100px;
    border-radius: 4px;
    cursor: pointer;
    background-color: red;
    color: #FFFFFF;
}

.notification-call form button:hover {
    opacity: .75;
}

/*TERMINA AQUI*/


/*CONFIDURAÇÃOM PARA QUEM TRABALHA FOOTER*/
/* =========================
   FAB (usuário comum)
========================= */
.fab-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 999;
}

.fab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: white;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 1.6rem;
    color: #ff7a00;

    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    transition: 0.3s;
    position: relative;
}

.fab:hover {
    transform: scale(1.1);
}

.fab-notification {
    background: linear-gradient(135deg, #ff7a00, #ffb347);
    color: white;
}

.fab-search {
    background: white;
}

/* BADGE */
.badge {
    position: absolute;
    top: 5px;
    right: 5px;

    background: red;
    color: white;

    width: 20px;
    height: 20px;

    font-size: 0.7rem;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   BOTTOM NAV (worker)
========================= */
.bottom-nav {
    position: fixed;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);

    width: 90%;
    max-width: 420px;
    height: 65px;

    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(10px);

    border-radius: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    display: flex;
    justify-content: space-around;
    align-items: center;

    z-index: 999;
}

/* ITEMS */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-decoration: none;
    color: #555;
    font-size: 0.75rem;

    position: relative;
    transition: 0.2s;
}

.nav-item i {
    font-size: 1.4rem;
}

.nav-item:hover {
    color: #ff7a00;
}

/* BOTÃO CENTRAL */
.nav-item.central {
    background: linear-gradient(135deg, #ff7a00, #ffb347);
    color: white;

    width: 65px;
    height: 65px;
    border-radius: 50%;

    transform: translateY(-20px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.nav-item.central i {
    font-size: 1.6rem;
}

/* BADGE CENTRAL */
.nav-item .badge {
    top: -5px;
    right: -5px;
}

/* RESPONSIVO */
@media (min-width: 768px) {
    .bottom-nav {
        bottom: 25px;
    }

    .fab {
        width: 65px;
        height: 65px;
    }
}




:root {
    --Preto: #000000;
    --Cinza: #808080;
    --cinza-claro: #D3D3D3;
    --Bege: #F5F5DC;
    --Branco: #FFFFFF;
    --Azul-Marinho: #003366;
    --Azul-Escuro: #001325;
    --Bordô: #800000;
    --Vinho: #4B0082;
    --Verde_Escuro: #006400;
    --Azul_Claro: #ADD8E6;
    --Dourado: #FFD700;
    --Vermelho: #FF0000;
    --Laranja: #FFA500;
    --Verde_Limão: #00FF00;
}

html {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.alert-icon {
    font-size: 1em;
    /* Tamanho do ícone */
    color: #FF0000;
    /* Cor do ícone de alerta */
    animation: pulse 1s infinite;
    /* Animação */
    z-index: 12;
}

/* Animação de pulsar */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.Cor-Espera {
    background-color: rgb(255, 221, 51);
}

.Azul-Login {
    background-color: rgb(0, 120, 215);
}

.Verde-Login {
    background-color: rgb(63, 191, 127);
}

.Degrade-Help-Left {
    background-image: linear-gradient(to left, rgba(211, 211, 211, 0.224), rgba(0, 0, 255, 0.534));
}

.Degrade-Help-Top {
    background-image: linear-gradient(to top, rgba(211, 211, 211, 0.224), rgba(0, 0, 255, 0.534));
}

.color-branco {
    color: #FFFFFF;
}

.Preto {
    background-color: #000000;
}

.PretoClaro {
    background-color: #000000e8;
}

.Cinza {
    background-color: #808080;
}

.Cinza-Claro {
    background-color: #D3D3D3;
}

.Verde-Limão {
    background-color: #00FF00;
}

.Vinho {
    background-color: #4B0082;
}

.Bordô {
    background-color: #800000;
}

.Azul-Marinho {
    background-color: #003366;
}

.Azul-Escuro {
    background-color: #001325;
}

.Vinho {
    background-color: #4B0082;
}

.Verde-Escuro {
    background-color: #006400;
}

.Azul-Claro {
    background-color: #ADD8E6;
}

.Lightgrey {
    background-color: lightgrey;
}

.Bege {
    background-color: #F5F5DC;
}

.Vermelho {
    background-color: #FF0000;
}

.Laranja {
    background-color: #FFA500;
}

.Dourado {
    background-color: #FFD700;
}

.Branco {
    background-color: #FFFFFF;
}

.CorBodyClaro {
    background-color: #4f0202;
}

.CorBody {
    background-color: #210101;
}

.Text-Color-Verde-Escuro {
    color: #006400;
}

.Text-Color-Vermelho {
    color: #FF0000;
}

.Text-Color-Preto {
    color: #000000;
}

.Text-Color-Ouro {
    color: #FFD700;
}

.Text-Color-Vere-Limão {
    color: #00FF00;
}

.Text-Color-Prata {
    color: #C0C0C0;
}

.Text-Color-Bronze {
    color: #CD7F32;
}

.Text-Color-Ouro {
    color: #FFD700;
}

.Text-Color-Branco {
    color: #FFFFFF;
}

.Text-Color-Azul {
    color: blue;
}

.Text-Color-Laranja {
    color: #FFA500;
}

.Text-Color-Cinza-Claro {
    color: #D3D3D3;
}


.center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.center-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.center-align {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.center-coluna-justify {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-wrap: nowrap;
}

.center-coluna-align {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}

.center-space-between {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
}

.center-coluna {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.Hover:hover {
    background-color: var(--cinza-claro);
}

.gap10 {
    gap: 10px;
}

.gap20 {
    gap: 20px;
}

.gap30 {
    gap: 30px;
}

.gap50 {
    gap: 50px;
}

.gap08 {
    gap: 8px;
}

.gap09 {
    gap: 9px;
}

.gap05 {
    gap: 5px;
}

.text-indent10 {
    text-indent: 10px;
}

.text-indent20 {
    text-indent: 20px;
}

.text-align-justify {
    text-align: justify;
}

.text-align-left {
    text-align: left;
}

.text-align-start {
    text-align: start;
}

.text-align-end {
    text-align: end;
}

.text-align-center {
    text-align: center;
}

.cursor {
    cursor: pointer !important;
}

.display-flex {
    display: flex;
}

.display-none {
    display: none;
}

.margin-top10 {
    margin-top: 10px;
}

.margin-left10 {
    margin-left: 10px;
}

.margin-left15,
.margin-top15 {
    margin-left: 15px;
}

.margin-left20,
.margin-top20 {
    margin-left: 15px;
}

.margin-left5,
.margin-top5 {
    margin-left: 5px;
}

.margin-left9,
.margin-top9 {
    margin-left: 9px;
}

.margin-left8,
.margin-top8 {
    margin-left: 8px;
}

.margin-rigth10,
.margin-top10 {
    margin-right: 10px;
}

.margin-rigth5 {
    margin-right: 5px;
}

.margin-rigth9 {
    margin-right: 9px;
}

.margin-rigth8 {
    margin-right: 8px;
}

.border-radius50 {
    border-radius: 50%;
}

.border-radius05 {
    border-radius: 5px;
}

.border-radius10 {
    border-radius: 10px;
}

.heigth100vh {
    height: 100vh;
}

.heigth01 {
    height: 1px;
}

.heigth02 {
    height: 2px;
}

.heigth200px {
    height: 200px;
}

.heigth20 {
    height: 20%;
}

.heigth30 {
    height: 30%;
}

.heigth40 {
    height: 40%;
}

.heigth70 {
    height: 70%;
}

.width100vw {
    width: 100vw;
}

.width10 {
    width: 10%;
}

.width20 {
    width: 20%;
}

.width30 {
    width: 30%;
}

.width40 {
    width: 40%;
}

.width50 {
    width: 50%;
}

.width70 {
    width: 70%;
}

.width80 {
    width: 80%;
}

.width90 {
    width: 90%;
}

.width100 {
    width: 100%;
}

.width50px {
    width: 50px;
}

.width100px {
    width: 100px;
}

.width200px {
    width: 200px;
}

.width300px {
    width: 300px;
}

.padding08 {
    padding: 8px;
}

.padding09 {
    padding: 9px;
}

.padding10 {
    padding: 10px;
}

.padding05 {
    padding: 5px;
}

.padding03 {
    padding: 3px;
}

.padding02 {
    padding: 2px;
}

.font-weight-bold {
    font-weight: bold;
}

.font-size2 {
    font-size: 2em;
}

.font-size11 {
    font-size: 1.1em;
}

.font-size12 {
    font-size: 1.2em;
}

.font-size13 {
    font-size: 1.3em;
}

.font-size14 {
    font-size: 1.4em;
}

.font-size15 {
    font-size: 1.5em;
}

.font-size17 {
    font-size: 1.7em;
}

.font-size19 {
    font-size: 1.9em;
}

.font-size20 {
    font-size: 2em;
}

.font-size1 {
    font-size: 1em;
}

.font-size09 {
    font-size: .9em;
}

.font-size08 {
    font-size: .8em;
}

.font-size07 {
    font-size: .7em;
}

.font-size06 {
    font-size: .6em;
}

.font-size05 {
    font-size: .5em;
}




.opacity25 {
    opacity: .25;
}

.opacity50 {
    opacity: .50;
}

.opacity75 {
    opacity: .75;
}

.opacity90 {
    opacity: .90;
}

.opacity100 {
    opacity: 1;
}

.border-bottom-azul {}

.box-shadow {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.098);
}

.border-collapse {
    border-collapse: collapse;
}

tr,
td,
th {
    border-bottom: 1px solid rgba(0, 0, 0, 0.285);
}

.over-y {
    overflow-y: scroll;
    overflow-x: hidden;
}

.hidden-x {
    overflow-x: hidden;
}

/*TELA DE CARREGAMENTO*/


.ContainerSpinner {
    position: absolute;
    top: 0;
    left: 0;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.365);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
}

.ContainerSpinner .spinner {
    height: 40px;
    width: 40px;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    border-left: 4px solid blue;
    border-bottom: 4px solid blue;
}

/*TAMANHO DAS LETRAS DAS MENSAGENS DO JBOX*/
.jBox-Notice {
    text-align: center;
    /* Centraliza o texto dentro da jBox */
}

.jBox-Notice.jBox-Notice-top {
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    /* Centraliza horizontalmente */
    position: fixed !important;
    width: auto;
    /* Ajusta a largura automática conforme o conteúdo */
}

/*CLASSE PARA OFUSCAR A TELA*/

.OfuscarTela {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 9;
    background-color: #000000ea;
    opacity: .90;
    display: none;
}

/*NOTIFICACAO DOS PEDIDOS RECEBIDOS PELOS TRABALHADORES*/

.container-notification-new-order {
    position: relative;
    top: 0;
    left: 0;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.808);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    display: none;
}

.info-notification-order {
    margin-top: 150px;
    width: 250px;
    height: 100px;
    padding: 15px;
    border-radius: 15px;
    background-color: #FFFFFF;
    border: 2.5px solid orange;
}

.info-notification-order p {
    text-align: center;
    font-size: .8em;
}

.notification-order {
    position: relative;
    border-radius: 50%;
    background-color: white;
    padding: 20px;
    width: 70px;
    height: 70px;
    margin-bottom: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

}

.notification-order a {
    border-radius: 50%;
    padding: 20px;
    width: 70px;
    height: 70px;
}

.notification-order a i {
    color: red;
    font-size: 2em;
}

.notification-order::before,
.notification-order::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: orange;
    border-radius: 50%;
    z-index: -1;
    animation: pulsar 2s ease-in-out infinite;
}

.notification-order::before {
    animation: pulsar 2s ease-in-out infinite;
}

.notification-order::after {
    animation: pulsar 2s 1s ease-in-out infinite;
}

@keyframes pulsar {
    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}


/* OVERLAY ESCURO + BLUR */
.overlay {
    top: 0;
    left: 0;
    position: absolute;
    position: fixed;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(5px);
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
}

/* CARD */
.notification-card {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border-radius: 15px;
    width: 320px;
    text-align: center;
    padding: 20px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

/* HEADER */
.notification-header {
    background: orange;
    color: white;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    font-weight: bold;
}

/* FOTO */
.profile-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-top: 15px;
    object-fit: cover;
    border: 3px solid orange;
}

/* TEXTO */
.name {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}

.phone {
    color: gray;
    margin-bottom: 15px;
}

/* BOTÕES */
.actions {
    display: flex;
    flex-direction: row !important;
    justify-content: space-between;
}

.actions .btn {
    width: 130px;
    padding: 5px;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    font-weight: bold;
}

.accept {
    background: orange !important;
}

.reject {
    background: red !important;
}

/**/

.notification {
    width: 100vw;
    height: 100vh;
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #000000ed;
    display: flex;
    flex-direction: row;
    justify-content: center;
    display: none;
    z-index: 20;
}

.sms-notification {
    width: 90%;
    height: 180px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid orange;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.div-span {
    width: 100%;
    padding: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}

.p-sms {
    text-align: justify;
    text-indent: 15px;
    width: 100%;
    padding: 10px;
}

/*  */

/* OVERLAY */
.overlay-cancel {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: 99999;
    display: none;
}

/* CARD */
.cancel-card {
    width: 320px;
    max-height: 320px;
    background: white;
    border-radius: 18px;
    text-align: center;
    padding: 20px;
    margin-top: 60px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    animation: show 0.3s ease;
    z-index: 110;
}

/* HEADER */
.cancel-header {
    background: linear-gradient(135deg, orange, #ff6a00);
    color: white;
    padding: 8px;
    border-radius: 12px;
    font-weight: bold;
}

/* FOTO */
.cancel-img {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    margin-top: 15px;
    border: 3px solid orange;
    object-fit: cover;
}

/* TEXTO */
.cancel-name {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}

.cancel-message {
    color: #555;
    font-size: 14px;
    margin: 10px 0 20px;
}

/* BOTÃO */
.cancel-btn {
    background: orange;
    border: none;
    color: white;
    padding: 8px;
    width: 90%;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.cancel-btn:hover {
    background: #ff8c00;
    transform: scale(1.05);
}

/* ANIMAÇÃO */
@keyframes show {
    from {
        opacity: 0;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

#popup-container {
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99999999999999999;
}

/* Popup base */
.popup {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 280px;
    max-width: 350px;
    padding: 15px;
    border-radius: 10px;
    color: #fff;
    font-family: Arial, sans-serif;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateX(120%);
    opacity: 0;
    animation: slideIn 0.4s forwards;
    position: relative;
}

/* Ícone */
.popup-icon {
    font-size: 18px;
}

/* Mensagem */
.popup-message {
    flex: 1;
    font-size: 14px;
}

/* Botão fechar */
.popup-close {
    cursor: pointer;
    font-weight: bold;
    font-size: 16px;
}

/* Barra de progresso */
.popup-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.7);
    width: 100%;
    animation: progress linear forwards;
}

/* Animações */
@keyframes slideIn {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    to {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes progress {
    from {
        width: 100%;
    }

    to {
        width: 0%;
    }
}
/*AVALIACAO DE 5 ESTRELAS*/


/* Overlay */
.rating-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(6px);

    display: flex;
    flex-direction: row;
    justify-content: center;

    z-index: 99999;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.3s ease;
}

.rating-overlay.show {
    opacity: 1;
    pointer-events: all;
}
.hidden {
    display: none;
}

/* Popup */
.rating-popup {
    margin-top: 40px;
    width: 360px;
    height: 300px;
    background: #fff;
    padding: 20px;
    border-radius: 14px;

    box-shadow: 0 15px 40px rgba(0,0,0,0.25);
    border-top: 5px solid orange;

    transform: scale(0.9);
    transition: all 0.3s ease;
}

.rating-overlay.show .rating-popup {
    transform: scale(1);
}

/* Header */
.rating-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.rating-header img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid orange;
}

.rating-user-info {
    display: flex;
    flex-direction: column;
}
.rating-user-info strong {
    font-size: 15px;
    color: #222;
}

.rating-user-info span {
    font-size: 13px;
    color: #666;
}

/* Stars */
.stars {
    display: flex;
    gap: 10px;
    font-size: 30px;
    cursor: pointer;
    margin-bottom: 15px;
}

.stars span {
    color: #ccc;
    transition: transform 0.2s, color 0.2s;
}

/* Hover preview */
.stars span.hovered {
    color: #ffb347 !important;
    transform: scale(1.2);
}

/* Active selected */
.stars span.active {
    color: #ff7a00 !important;
}

/* Checkbox */
.report-option {
    font-size: 14px;
    margin-bottom: 15px;
    display: block;
}

/* Button */
#submit-rating {
    width: 100%;
    padding: 12px;
    background: orange;
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

#submit-rating:hover {
    background: #e66a00;
}

/* 🎉 Feedback */
.rating-success {
    text-align: center;
    padding: 30px;
    animation: fadeIn 0.4s ease;
}

.rating-success h2 {
    color: #ff7a00;
    margin-bottom: 10px;
}

.rating-success p {
    color: #555;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/*MENSAGEM PARA COMECAR A CHAMADA*/
 /* Overlay com blur (fundo da página desfocado) */
.call-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.4); /* leve escurecimento */

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    display: flex;
    flex-direction: row;
    justify-content: center;
   

    z-index: 99999;
}

/* Popup branco */
.call-popup {
    width: 360px;
    height: 260px;
    background: #ffffff; /* branco como pediste */
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);

    font-family: Arial, sans-serif;

    /* detalhe laranja */
    border-top: 5px solid orange;
}

/* Header */
.call-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.call-header img {
    width: 60px;
    height: 60px;
    border-radius: 50%;

    /* detalhe laranja na foto */
    border: 2px solid orange;
}

/* Info */
.call-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.call-info strong {
    font-size: 16px;
    color: #222;
}

.call-info span {
    font-size: 13px;
    color: #666;
}

/* Corpo */
.call-body {
    font-size: 14px;
    color: #333;
    margin-bottom: 20px;
}

/* Botão vermelho (ação crítica) */
#end-call-btn {
    width: 100%;
    padding: 12px;

    background: #e10219;
    border: none;
    border-radius: 8px;

    color: white;
    font-weight: bold;
    font-size: 15px;

    cursor: pointer;
    transition: 0.3s;
}

#end-call-btn:hover {
    background: #b02a37;
}

/* esconder */
.hidden {
    display: none;
}
/*TERMINA AQUI A ESTILIZACAO DISSO*/

/* Tipos */
.success {
    background: #28a745 !important;
}

.error {
    background: #dc3545 !important;
}

.warning {
    background: #ffc107 !important;
    color: #000 !important;
}

.info {
    background: #007bff !important;
}


.overfllow-hidden {
    overflow: hidden !important;
}

.df {
    display: flex !important;
}

.df-n {
    display: none !important;
}