/* Body */
body {
    margin: 0;
    padding: 40px; /* Aumentado para maior espaçamento */
    background-color: #f9f9f9; /* Cor de fundo suave */
}

.shop-container {
    max-width: 960px; /* Um pouco mais largo para mais espaço de conteúdo */
    margin: 0 auto;
    padding: 0 15px; /* Padrão para containers do Bootstrap */
}

/* Titles */
.title-section {
    color: var(--bs-primary);
}
.payment-methods {
    font-size: 1.3rem;
    margin-bottom: 20px;
}
/* Progress */
.progress-title {
    font-weight: 400;
    
}

.partnership{
    margin: 0px;
    font-family: "lft-etica", sans-serif;
    font-weight: 200;
}

@media (max-width: 767.98px) {
    .mobile-margin {
        margin: 10px;
    }
}

/* Plans */
.plans {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.plan {
    flex: 1;
    min-width: 250px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.plan:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.plan.selected {
    border: 2px solid var(--bs-primary);
}

.plan .title {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
}

.plan .price {
    margin: 10px 0;
    font-size: 24px;
    font-weight: bold;
}

.plan .original-price {
    text-decoration: line-through;
    color: #888;
    font-size: 18px;
}

.plan .best-offer {
    position: absolute;
    bottom: -15px;
    padding: 5px 15px;
    border: 1px solid var(--bs-primary);
    border-radius: 15px;
    font-size: 12px;
    font-weight: bold;
    color: var(--bs-primary);
    background-color: #fff;
    display: none;
}

.plan.plan-annual .best-offer {
    display: inline-block;
}

.plan .selected-message {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
    visibility: hidden; /* Escondido, mas mantém o espaço */
}

.plan.selected .selected-message {
    visibility: visible; /* Tornado visível apenas no plano selecionado */
}

.plan.selected .selected-message::before {
    content: "✔";
    margin-right: 5px;
}

/* Ajuste para a visibilidade no plano azul */
.plan.plan-annual .selected-message {
    color: white;
}

.plan.plan-monthly .selected-message {
    color: var(--bs-primary);
}

.plan.plan-monthly {
    background-color: #f8f9fa;
}

.plan.plan-annual {
    background-color: var(--bs-primary);
    color: white;
}

.plan.plan-annual .title,
.plan.plan-annual .price {
    color: white;
}

/* Responsiveness for mobile */
@media (max-width: 576px) {
    .plan {
        flex-basis: 100%; /* Em telas pequenas, planos ocupam 100% da largura */
        min-width: unset; /* Remove o min-width para telas pequenas */
        padding: 10px; /* Diminui o padding para ocupar menos espaço */
    }
    
    /* Move 'plan-info' to be the first item after title on mobile */
    .plan-info {
        order: -1; /* Coloca o bloco 'plan-info' antes dos outros blocos */
    }
}

/* Sidebar - Chosen plan */
.plan-info {
    background-color: #f3f3f3;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.plans-chose {
    font-size: 1rem;
    color: var(--bs-primary);
}

.plans-description li {
    font-size: 0.8rem;
}

.print-message {
    font-size: 1.15rem;
    font-family: "lft-etica", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.service-message {
    font-family: "lft-etica", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1rem;
    margin-bottom: 10px;
}

.service-message a {
color: black;
    text-decoration: none;
}

.icon-text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-text i {
    font-size: 15px;
    margin-right: 10px;
    color: #25D366; /* Cor do ícone do WhatsApp */
}

.icon-text.phone i {
    color: #000; /* Cor do ícone de telefone */
}

service-message i {
    margin-right: 10px;
    margin-top: 10px;
}


.plans-chose-info {
    font-size: 1rem;
    color: var(--bs-primary);
}

.old-price {
    font-size: 1.0rem;
    color: var(--bs-gray);
    font-weight: 400;
    text-decoration: line-through;
}

.price {
    font-size: 1.5rem;
    color: var(--bs-primary);
    font-weight: 700;
}

/* Form */
form {
    display: flex;
    flex-direction: column;
    margin: 0 auto; /* Centraliza o formulário na página */
}

label {
    margin-bottom: 5px;
    font-weight: bold;
}

input {
    margin-bottom: 15px;
    padding: 10px;
    font-size: 16px;
    border: 3px solid var(--bs-primary);
}

button {
    padding: 10px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    background-color: var(--bs-primary);
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    margin-bottom: 15px;
    transition: background-color 0.3s ease; /* Transição suave */
}

button:hover {
    background-color: #004a99; /* Cor alterada para hover */
}


/* Payment Screen */
.pix-box {
    background-color: #f3f3f3;
    border-radius: 20px;
    padding: 15px;
    display: flex; /* Altera para flexbox */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 100%; /* Garante que tenha uma altura suficiente para verticalizar, se necessário */
}

.pix-qrcode {
    background-color: white;
    padding: 5px;
    max-width: 160px;
    border-radius: 10px;
}

/* Finished Screen */
.whatsapp-channel {
    background-color: var(--bs-green);
    color: white;
    border-radius: 20px;
    padding: 15px;
    font-weight: 600;
    width: 100%;
}

.whatsapp-channel:hover {
    background-color: white;
    color: var(--bs-green);
    border-radius: 20px;
    border: solid 3px;
    border-color: var(--bs-green);

    font-weight: 600;
    width: 100%;
}

.news-channel {
    background-color: var(--bs-secondary);
    color: white;
    border-radius: 20px;
    padding: 15px;
    font-weight: 600;
    width: 100%;
}

.news-channel:hover {
    background-color: white;
    color: var(--bs-secondary);
    border-radius: 20px;
    border: solid 3px;
    border-color: var(--bs-secondary);
 
    font-weight: 600;
    width: 100%;
}


.user-info {
line-height: 10px;
}
.name-client {
font-weight: 600;
}
.payment-date {
font-weight: 600;
}
/* Colors and Fonts Default */
:root {
    --bs-primary: #005cb9;
    --bs-secondary: #1a345c;
    --bs-orange: #ff5c35;
    --bs-gray: #545759;
    --bs-purple: #8c1558;
    --bs-yellow: #d69a28;
    --bs-green: #046852;

    --bs-font-sans-serif: "lft-etica", sans-serif;
}

/* Fonts Definitions */
h1, h2, h3, h4, h5, p, a {
    font-family: var(--bs-font-sans-serif);
    font-style: normal;
}

h1, h2, h3, h4, h5 {
    font-weight: 700;
}

p, a {
    font-weight: 400;
}

a:hover {
    font-weight: 400;
}


/* Responsiveness for mobile */
@media (max-width: 576px) {
    .plans {
        flex-direction: column; /* Organiza os planos em coluna no mobile */
        gap: 10px; /* Reduz o espaço entre os planos */
    }

    .plan {
        flex-basis: 100%; /* O plano ocupa toda a largura */
        min-width: unset; /* Remove o min-width */
        padding: 10px; /* Reduz o padding */
        font-size: 14px; /* Reduz a fonte */
    }

    .plan .title {
        font-size: 16px; /* Diminui o tamanho do título no mobile */
    }

    .plan .price {
        font-size: 18px; /* Ajusta o tamanho do preço */
    }

    .plan .best-offer {
        font-size: 10px; /* Reduz o tamanho do selo de melhor oferta */
        padding: 2px 10px;
        bottom: -10px; /* Ajusta o posicionamento do selo */
    }

    .plan .selected-message {
        font-size: 12px; /* Ajusta a mensagem de seleção no mobile */
    }

    .plan-info {
        order: -1; /* Move 'plan-info' para o topo no mobile */
        font-size: 14px; /* Ajusta o tamanho do texto */
    }
}


/* Payment - Methods */
.nav-tabs .nav-link {
    margin-bottom: 0;
    border: 5px solid;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-radius: 30px!important;
}

.nav-link:hover{
    background-color: white!important;
}
.nav-link:focus{
    background-color: var(--bs-primary)!important;
}
.nav-tabs {
    border-bottom: none; /* Remove a borda padrão das tabs */
  }
  
  .nav-link {
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white; /* Fundo branco para abas inativas */
    color: #0056b3; /* Texto e ícone azul para abas inativas */
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s, color 0.3s; /* Animação suave ao trocar de aba */
  }
  
  .nav-link i {
    font-size: 30px;
    margin-bottom: 10px;
    color: #0056b3; /* Ícone azul para abas inativas */
  }
  .nav-link {
    font-size: 13px;
  }

  
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    background-color: #0056b3; /* Fundo azul para a aba ativa */
    color: white; /* Texto e ícone branco para a aba ativa */
    border-color: #0056b3; /* Borda azul permanece */
  }
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: white; /* Ícone branco para a aba ativa */
  }
  
  .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active i{
    color: white; /* Ícone branco para a aba ativa */
  }
  

  .tab-content {
    margin-top: 20px;
  }
  
  .nav-item {
    margin-right: 10px;
  }

  .credit-card-background {
    background-color: #f3f3f3;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 20px;
  }