/*------------------------------------------------------------------
PADRAO BEGIN - ESTRUTURA CSS

1. CONFIGURAÇÕES HEADER AND FOOTER
    1.0 Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Footer Style
5.  Inject Index Body
-------------------------------------------------------------------*/


/* INICIO CONFIGURAÇÕES HEADER AND FOOTER 1.0 Template default CSS 	1.1	Variables 	1.2	Mixins	1.3	Flexbox	1.4	Reset */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;

}

/* Estilizando o menu */
.header__menu ul {
    list-style: none;
    display: flex;
    align-items: center;
}

/* Links do menu */
.header__menu ul li {
    position: relative;
    margin: 0 15px;
}

/* Estilizando a imagem do perfil */
.profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.3s ease;
}

/* Animação na imagem do perfil ao abrir o dropdown */
.profile-dropdown.active .profile-icon {
    transform: scale(1.1);
}

/* Dropdown oculto inicialmente */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    width: 200px;
    border-radius: 8px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    list-style: none;
    padding: 10px 0;
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Links dentro do dropdown */
.dropdown-menu li {
    font-size: 14px !important;
    padding: 10px 15px;
}

/* Estilo dos links */
.dropdown-menu a {
    font-size: 14px !important;
    text-decoration: none;
    color: #333;
    display: block;
    transition: background 0.3s ease;
}

/* Efeito hover no dropdown */
.dropdown-menu a:hover {
    background: #f1f1f1;
}

/* Quando ativo, mostrar dropdown */
.profile-dropdown.active .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/*----------------------------------------*/
/* Template default CSS
/*----------------------------------------*/

html,
body {
    height: 100%;
    font-family: "Lato", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Garante que apenas elementos não-editáveis fiquem sem cursor */
body * {
	caret-color: transparent;
}

/* Reforça cursor visível em campos editáveis */
input,
textarea,
[contenteditable="true"],
select,
button {
	caret-color: auto !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: #111111;
    font-weight: 400;
    font-family: "Lato", sans-serif;
}

h1 {
    font-size: 70px;
}

h2 {
    font-size: 36px;
}

h3 {
    font-size: 21px;

}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

p {
    font-size: 20px;
    font-family: "Lato", sans-serif;
    color: #5c5c5c;
    font-weight: 400;
    line-height: 25px;
    margin: 0 0 15px 0;
}

img {
    max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
    outline: none;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
    color: #ffffff;
}

ul,
ol {
    padding: 0;
    margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
    margin-bottom: 80px;
    text-align: center;
}

.section-title h2 {
    font-weight: 700;
    color: #323232;
    line-height: 46px;
    margin-bottom: 20px;
}

.section-title P {
    margin-bottom: 0;
}

.set-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.spad {
    padding-top: 100px;
    padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
    color: #fff;
}

/* buttons */


.primary-btn {
    display: inline-block;
    font-size: 15px;
    padding: 14px 40px 12px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 700;
    background: #004aad;
    border-radius: 2px;
    letter-spacing: 1px;
}

.site-btn {
    font-size: 15px;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
    padding: 14px 30px 12px;
    background: #004aad;
    border: none;
    letter-spacing: 1px;
    border-radius: 2px;
}

/* Preloder */

#preloder {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999999;
    background: #000;
}

.loader {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -13px;
    margin-left: -13px;
    border-radius: 60px;
    animation: loader 0.8s linear infinite;
    -webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

@-webkit-keyframes loader {
    0% {
        -webkit-transform: rotate(0deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
    50% {
        -webkit-transform: rotate(180deg);
        border: 4px solid #673ab7;
        border-left-color: transparent;
    }
    100% {
        -webkit-transform: rotate(360deg);
        border: 4px solid #f44336;
        border-left-color: transparent;
    }
}

.spacial-controls {
    position: fixed;
    width: 111px;
    height: 91px;
    top: 0;
    right: 0;
    z-index: 999;
}

.spacial-controls .search-switch {
    display: block;
    height: 100%;
    padding-top: 30px;
    background: #323232;
    text-align: center;
    cursor: pointer;
}

.search-model {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    z-index: 99999;
}

.search-model-form {
    padding: 0 15px;
}

.search-model-form input {
    width: 500px;
    font-size: 40px;
    border: none;
    border-bottom: 2px solid #333;
    background: 0 0;
    color: #999;
}

.search-close-switch {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #333;
    color: #fff;
    text-align: center;
    border-radius: 50%;
    font-size: 28px;
    line-height: 28px;
    top: 30px;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header__top {
    background: #182143;
}

.header__top__widget {
    padding: 11px 0 14px;
}

/* Cor a letra*/
.header__top__widget li {
    font-size: 15px;
    color: #004aad;
    display: inline-block;
    margin-right: 50px;
    position: relative;
    list-style: none;
}

.header__top__widget li::after {
    position: absolute;
    right: -32px;
    top: 0;
    width: 1px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    content: "";
}

.header__top__widget li:last-child {
    margin-right: 0;
}

.header__top__widget li:last-child:after {
    display: none;
}

.header__top__widget li i {
    font-size: 18px;
    color: #004aad;
    margin-right: 8px;
}

.header__logo {
    padding: 5px 0;
}

.header__logo a img {
    max-width: 450px;
    height: auto;
    transition: all 0.3s ease-in-out;
}

.header__logo a {
    display: inline-block;
}

.header__nav {
    text-align: right;
    padding: 18px 0 33px;
}

.header__menu {
    display: inline-block;
    /*text-transform: uppercase;*/
}

.header__menu ul li {
    list-style: none;
    display: inline-block;
    margin-right: 65px;
    position: relative;
}

.header__menu ul li.active a:after {
    width: 100%;
    opacity: 1;
}

.header__menu ul li:hover a:after {
    width: 100%;
    opacity: 1;
}

/*.header__menu ul li:hover .dropdown {*/
/*	top: 36px;*/
/*	opacity: 1;*/
/*	visibility: visible;*/
/*}*/

/* Cor fundo*/
.header__menu ul li .dropdown {
    position: absolute;
    left: 0;
    top: 56px;
    width: 180px;
    background: #FFFFFF;
    text-align: left;
    padding: 5px 0;
    z-index: 9;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
}

.header__menu ul li .dropdown li {
    display: block;
    margin-right: 0;
}


/* Icone Usuario: */
.header__user {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    width: 95%;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 1px;
}

.user-info {
    display: flex;
    flex-direction: column; /* Coloca o nome acima do ícone */
    align-items: flex-start; /* Alinha à esquerda */
    gap: 4px; /* Espaço entre nome e ícone */
    padding-right: 30px;
}

.header__user i {
    font-size: 16px;
}

.user-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.user-name:empty {
    display: none;
}

.user-name.invisible {
    display: none;
}

.user-name.invisible + .user-icon {
    display: none;
}


/*End*/

/* Cor a letra*/
.header__menu ul li .dropdown li a {
    font-size: 14px;
    color: #004aad;
    font-weight: 400;
    padding: 10px 20px;
}

.header__menu ul li .dropdown li a:after {
    display: none;
}

/* Cor a letra*/
.header__menu ul li a {
    font-size: 22px;
    color: #004aad;
    font-weight: 700;
    display: inline-block; /* Altere de block para inline-block */
    padding: 5px 0;
    position: relative;
    white-space: nowrap; /* Impede que quebre para outra linha */
}

/* Cor do fundo*/
.header__menu ul li a:after {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 0%;
    background: white;
    content: "";
    opacity: 0;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
}

.header__search {
    display: inline-block;
}

.header__search i {
    font-size: 18px;
    color: #323232;
    cursor: pointer;
}


.offcanvas-menu-wrapper {
    display: none;
}

.canvas__open {
    display: none;
}


/*---------------------
  Footer
-----------------------*/
/* fundo*/
.footer {
    background: #ffffff;
    padding-top: 40px;
}

.footer__about {
    margin-bottom: 30px;
}

/*letra*/
.footer__about p {
    color: #004aad;
    text-align: center;
}

.footer__logo {
    margin-bottom: 25px;
}

.footer__logo a img {
    width: 262px;
    height: 86px;
}

.footer__logo a {
    display: inline-block;
}

.footer__widget {
    margin-bottom: 30px;
}

.footer__widget.footer__widget--social li a {
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}

/*fundo*/
.footer__widget.footer__widget--social li a:hover {
    color: #ffffff;
}

.footer__widget.footer__widget--address p {
    margin-bottom: 10px;
}

/*letra*/
.footer__widget.footer__widget--address li {
    line-height: 30px;
    font-size: 15px;
    color: #004aad;
}

/*letra*/
.footer__widget h5 {
    font-size: 20px;
    font-weight: 700;
    color: #004aad;
    margin-bottom: 26px;
}

.footer__widget ul li {
    list-style: none;
}

/*letra*/
.footer__widget ul li a {
    font-size: 15px;
    color: #004aad;
    line-height: 38px;
}

.footer__widget ul li a i {
    margin-right: 6px;
}

/*letra*/
.footer__widget p {
    color: #004aad;
}

.footer__copyright {
    border-top: 1px solid rgba(112, 112, 112, 0.1);
    padding: 18px 0 15px;
    margin-top: 20px;
}

.footer__copyright__links li {
    list-style: none;
    display: inline-block;
    line-height: 20px;
    position: relative;
    margin-right: 45px;
}

.footer__copyright__links li:last-child {
    margin-right: 0;
}

.footer__copyright__links li:last-child::after {
    display: none;
}

/*letra*/
.footer__copyright__links li:after {
    position: absolute;
    right: -28px;
    top: 0;
    height: 100%;
    width: 1px;
    background: #004aad;
    content: "";
}

/*letra*/
.footer__copyright__links li a {
    font-size: 15px;
    color: #004aad;
}

.footer__copyright__text {
    text-align: right;
}

.footer__copyright__text p {
    color: #004aad;
    margin-bottom: 0;
}

.footer__copyright__text i {
    color: #941515;
}

.footer__copyright__text a {
    color: #004aad;
}


/*---------------------
 SECTION INDEX DEFAULT
-----------------------*/
/* Reset padrão */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Estrutura do formulário */
.main-container-index {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(to bottom, #004aad, #0b93f2, #ffffff);
    padding: 20px;
}

.form-wrapper-custom {
    max-width: 850px;
    margin: 50px auto;
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.4);
    min-width: 850px;
}

.title-custom {
    font-size: 24px !important;
    font-weight: bold !important;
    text-align: center !important;
    color: #004aad !important;
    font-family: 'Lato', sans-serif !important;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px !important; /* Ajuste o valor conforme necessário */
}

/* Layout dos campos usando Grid */
.fields {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 15px;
    margin-bottom: 20px;
}

.input-field {
    display: flex;
    flex-direction: column;
}

.input-field label {
    font-size: 12px;
    font-weight: 500;
    color: #2e2e2e;
}

.input-field input {
    font-size: 12px;
    color: #0b0b0b;
}

.input-field.small-field {
    width: 60%;
    text-align: center;
}

.input-field input,
.input-field select {
    outline: none;
    font-size: 14px;
    color: #333;
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 10px;
    width: 100%;
}

.input-field input:focus,
.input-field select:focus {
    border-color: #004aad;
    box-shadow: 0 0 5px rgba(0, 74, 173, 0.5);
}

.input-field input::placeholder {
    font-size: 14px; /* Tamanho da fonte do placeholder */
    color: #000; /* Cor do placeholder */
}

/* Botões */

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.backBtn, .nextBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 45px;
    width: 200px;
    border: none;
    color: #fff;
    border-radius: 5px;
    background-color: #004aad;
    transition: background-color 0.3s;
    cursor: pointer;
}

.backBtn:hover, .nextBtn:hover {
    background-color: #003280;
}

.form-wrapper-custom .button-group-custom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 25px !important;
}

.form-wrapper-custom .submit-btn-custom, .back-btn-custom {
    padding: 12px 25px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    cursor: pointer !important;
    transition: background 0.3s, transform 0.2s !important;
}

.form-wrapper-custom .submit-btn-custom {
    background: #007BFF !important;
    color: white !important;
}

.form-wrapper-custom .submit-btn-custom:hover {
    background: #0056b3 !important;
    transform: scale(1.05) !important;
}

.form-wrapper-custom .back-btn-custom {
    background: #004aad !important;
    color: white !important;
}

.form-wrapper-custom .back-btn-custom:hover {
    background: #999 !important;
    transform: scale(1.05) !important;
}

.form-wrapper-custom .section-custom {
    margin-bottom: 20px !important;
    border-bottom: 1px solid #ddd !important;
}


/*Para o Mkae and Model*/

.section-custom {
    display: grid;
    grid-template-columns: 1fr; /* Mantemos apenas 1 coluna principal */
    gap: 20px; /* Espaço entre os elementos */
}

.make-field {
    grid-column: span 1; /* Mantém ocupando toda a largura */
}

.model-year-container {
    display: flex; /* Deixa Model e Year na mesma linha */
    gap: 10px; /* Espaço entre os inputs */
}

.model-field {
    flex: 60%;
}

.year-field {
    flex: 40%;
}

.input-field input {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-sizing: border-box; /* Evita problemas com padding */
}

.bottom-border {
    border-bottom: 1px solid #ddd !important;
}

.subtext-right {
    text-align: left;
    font-size: 12px;
    color: #777;
    margin-top: -10px;
}

/*Fim do Make and Model*/

/*Para o Trim and Style*/
.section-custom-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.section-custom-two h3 {
    grid-column: span 2;
    text-align: left;
    margin-bottom: 10px;
}

.input-field {
    display: flex;
    flex-direction: column;
    width: 100%;
}

select {
    width: 90%;
    padding: 8px;
}

/*Fim do Trim and Style*/

/*Img Step */

.flex-container {
    display: flex;
    align-items: center; /* Mantém alinhamento vertical */
    width: 100%; /* Garante que ocupe todo o espaço disponível */
}

.text-container {
    display: flex;
    justify-content: flex-end; /* Faz o texto ir para a direita dentro do container */
    flex: 1; /* Ocupa o máximo de espaço disponível */
}

.top-left-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0; /* Evita que a imagem encolha */
}

.helper-text {
    margin: 0;
    font-size: 12px;
    text-align: right;
}


/*Fim Img Step*/

/*Check Radio Container Transmission*/

.checkbox-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.checkbox-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

.checkbox-item input[type="radio"] {
    margin-bottom: 10px; /* Ajuste conforme necessário */
}

/*Fim Check Radio do Container Transmission*/

.checkbox-item input[type="checkbox"] {
    margin: 10px;
}

.checkbox-item label {
    font-size: 14px;
    color: #333;
}

.checkbox-item input[type="number"] {
    width: 50px;
    margin-left: 10px;
    padding: 5px;
    border: 1px solid #aaa;
    border-radius: 5px;
    height: 21px;
}

/* Check do Container History*/
.checkbox-group-history {
    display: flex;
    flex-direction: column; /* Itens um abaixo do outro */
    gap: 10px;
    align-items: flex-start; /* Alinhamento à esquerda */
}

.checkbox-item-history {
    display: flex;
    flex-direction: row; /* Input e texto lado a lado */
    align-items: center;
    gap: 8px;
}

.checkbox-item-history label {
    font-size: 14px;
    color: #333;
    font-family: Arial, sans-serif;
}

.checkbox-item-history input[type="checkbox"] {
    margin-bottom: 10px; /* Ajuste conforme necessário */
}

/*Fim Check do Container History* */

/*Input - select do Container Lincense Plate */
.section-custom > .input-field-plate {
    grid-column: span 1 !important;
}


.grid-container {
    display: grid;
    grid-template-columns: 1fr;  /* Um campo por linha, ocupando toda a largura disponível (antes 90% + 30% = 120%, que estourava o container) */
    gap: 15px;
    margin-bottom: 20px;
    width: 100%;
}

.grid-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.grid-item input {
    outline: none;
    font-size: 14px;
    color: #333;
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.grid-item select {
    outline: none;
    font-size: 14px;
    color: #333;
    border-radius: 5px;
    border: 1px solid #aaa;
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
}

.grid-item input:focus,
.grid-item select:focus {
    border-color: #004aad;
    box-shadow: 0 0 5px rgba(0, 74, 173, 0.5);
}

.grid-item input::placeholder {
    font-size: 14px;
    color: #000;
}

/*Trip Duration - Select e Input*/
.d-flex.flex-column {
    font-family: 'Arial', sans-serif; /* Define a fonte */
    color: #333; /* Define a cor do texto */
    font-size: 16px; /* Define o tamanho da fonte */
    margin-bottom: 20px;
}

.d-flex.flex-column h3 {
    font-family: 'Arial', sans-serif; /* Fonte diferente para o título */
    font-size: 21px; /* Tamanho da fonte do <h3> */
    color: #111111; /* Azul Bootstrap */
}

label {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    color: #2e2e2e;
}

.form-select {
    font-family: 'Arial', sans-serif; /* Altere para a fonte desejada */
    font-size: 14px; /* Ajuste o tamanho da fonte */
    color: #212529; /* Cor do texto */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;

}
.form-check {
    display: flex;
    align-items: center; /* Alinha verticalmente */
    gap: 5px;
}

.form-check input,
.form-check label {
    margin-top: 0; /* Remove o espaçamento superior dos itens internos */
}

.form-select option {
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    margin-bottom: 30px;
}

/*Fim Trip Duration - Select e Input*/

/*Fim Input - select do Container Lincense Plate*/

/* Check do Container Features*/
.checkbox-group-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas por linha */
    align-items: start;
    gap: 10px;
}

.checkbox-item-features {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #333;
}

.checkbox-item-features label {
    font-size: 14px;
    color: #333;
}

.input-field-features > label {
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.checkbox-item-features input[type="checkbox"] {
    margin-top: 3px;
}

@media (max-width: 768px) {
    .checkbox-group-features {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas em telas menores */
    }
}

@media (max-width: 480px) {
    .checkbox-group-features {
        grid-template-columns: repeat(1, 1fr); /* 1 coluna em telas muito pequenas */
    }
}

/*Fim Check do Container Features* */

.video-container {
    position: relative;
    width: 80%;
    max-width: 800px;
    margin: 20px auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 30px; /* Reduzi o tamanho do ícone */
    padding: 15px 20px; /* Ajustei o tamanho do botão */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.play-button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px; /* Espaçamento entre os cards */
    max-width: 1200px; /* Largura máxima do container */
    margin: 0 auto; /* Centralizar o container */
}

.card {
    width: 180px; /* Largura reduzida */
    text-align: left; /* Alinhar texto à esquerda */
    position: relative;
    border-radius: 12px; /* Bordas arredondadas */
    overflow: hidden; /* Garantir que nada ultrapasse o card */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Efeito de hover */
}

.card:hover {
    transform: translateY(-4px); /* Levantar o card ao passar o mouse */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Sombra mais forte no hover */
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 120px; /* Altura reduzida para a imagem */
    overflow: hidden;
    border-radius: 12px 12px 0 0; /* Bordas arredondadas apenas no topo */
}

.carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
    height: 100%;
}

.carousel img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garantir que a imagem cubra o espaço */
    flex-shrink: 0;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    cursor: pointer;
    font-size: 14px; /* Tamanho reduzido da fonte */
    color: black;
    z-index: 10;
    transition: opacity 0.3s;
    opacity: 0; /* Esconder por padrão */
    background: rgba(255, 255, 255, 0.9); /* Fundo branco semi-transparente */
    width: 24px; /* Tamanho reduzido do botão */
    height: 24px; /* Tamanho reduzido do botão */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-container:hover .arrow {
    opacity: 1; /* Mostrar ao passar o mouse */
}

.prev {
    left: 8px; /* Posição à esquerda */
    display: none; /* Esconder por padrão */
}

.next {
    right: 8px; /* Posição à direita */
}

.card-body {
    padding: 8px; /* Espaçamento interno */
}

.card-body h5 {
    font-size: 14px; /* Tamanho da fonte reduzido */
    margin: 0 0 4px 0; /* Margem ajustada */
    color: #333; /* Cor do texto */
    font-weight: 600; /* Texto em negrito */
}

.card-body p {
    font-size: 12px; /* Tamanho da fonte reduzido */
    margin: 0; /* Remover margem padrão */
    color: #666; /* Cor do texto mais suave */
}

.card-body p strong {
    color: #000; /* Cor do preço em destaque */
    font-weight: 600; /* Texto em negrito */
}


/* Responsividade */
@media (max-width: 768px) {
    .fields {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-wrapper-custom {
        width: 90%;
        padding: 20px;
    }

    .backBtn, .nextBtn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .fields {
        grid-template-columns: repeat(1, 1fr);
    }

    .title-custom {
        font-size: 18px;
    }
}


/*--------------------------------- Responsive Media Quaries -----------------------------*/
/* Responsividade Index Section RegisterProfile */


/* Responsividade */
@media (max-width: 768px) {
    .form-wrapper-custom {
        width: 90% !important;
        padding: 20px !important;
    }

    .title-custom {
        font-size: 20px !important;
    }
}

/* Consulta de mídia para telas menores */
@media (max-width: 768px) {
    .card {
        padding: 15px;
        border: 2px solid #D3D3D3; /* Reduz a espessura da borda */
    }

    .card h1 {
        font-size: 1rem; /* Reduz o tamanho da fonte */
    }

    .card p {
        font-size: 0.9rem; /* Reduz o tamanho da fonte */
    }
}

/* Responsividade */
@media (max-width: 1024px) {
    .form-wrapper-custom .input-group-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .form-wrapper-custom {
        width: 90% !important;
        padding: 20px !important;
    }

    .form-wrapper-custom .input-group-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .form-wrapper-custom .button-group-custom {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-wrapper-custom .submit-btn-custom, .back-btn-custom {
        width: 100% !important;
        text-align: center !important;
    }
}


@media (max-width: 480px) {
    .form-wrapper-custom .title-custom {
        font-size: 18px !important;
    }

    .form-wrapper-custom .input-group-custom label {
        font-size: 14px !important;
    }

    .form-wrapper-custom .input-group-custom input,
    .form-wrapper-custom .input-group-custom select {
        font-size: 14px !important;
        padding: 10px !important;
    }
}

@media (max-width: 1024px) {
    .form-wrapper-custom .input-group-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .form-wrapper-custom {
        width: 90% !important;
        padding: 20px !important;
    }

    .form-wrapper-custom .input-group-container {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .form-wrapper-custom .button-group-custom {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .form-wrapper-custom .submit-btn-custom, .back-btn-custom {
        width: 100% !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .form-wrapper-custom .title-custom {
        font-size: 18px !important;
    }

    .form-wrapper-custom .input-group-custom label {
        font-size: 14px !important;
    }

    .form-wrapper-custom .input-group-custom input,
    .form-wrapper-custom .input-group-custom select {
        font-size: 14px !important;
        padding: 10px !important;
    }
}


@media only screen and (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/* Medium Device = 1200px */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .header__menu ul li {
        margin-right: 40px;
    }
}

/* Tablet Device = 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .footer__copyright__links li {
        margin-right: 30px;
    }

    .footer__copyright__links li:after {
        right: -20px;
    }

    .header .container {
        position: relative;
    }

    .header__top {
        display: none;
    }

    .header__nav {
        display: none;
    }
}

/* Wide Mobile = 480px */
@media only screen and (max-width: 767px) {
    .footer__copyright__links {
        text-align: center;
        margin-bottom: 20px;
    }

    .footer__copyright__text {
        text-align: center;
    }

    .header .container {
        position: relative;
    }

    .header__top {
        display: none;
    }

    .header__nav {
        display: none;
    }

    @media (max-width: 768px) {
        .header__logo img {
            max-width: 140px;
        }
    }
    @media (max-width: 480px) {
        .header__logo img {
            max-width: 120px;
        }
    }
}

/*  Modal Tap here - VIN*/
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.modal.visible {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    background: linear-gradient(180deg, #ffffff, #f0f0f0, #d4d4d4);

}

.modal-content img.hourglass-gif {
    width: 50px;
    height: auto;
}

.modal-content p {
    margin: 15px 0;
    font-size: 16px;
    color: #333;
    line-height: 1.5;
}

.modal-content input {
    width: 50%;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
    text-align: center;
}

.modal-buttons {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

.modal-content button {
    background-color: #007BFF;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    margin: 0 5px;
    width: auto;
}

#verifyButton {
    background-color: #007BFF !important;
    color: white !important;
}

#reset-button {
    background-color: #007BFF;
    color: white;
}

.modal-content button:hover {
    background: #0056b3;
    transform: scale(1.05);
}


/*  Modal Next - VIN Confirm*/

/* Estilização da Modal */
.modal-vin {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.modal-vin.visible {
    visibility: visible;
    opacity: 1;
}

/* Estilização do Conteúdo da Modal */
.modal-content-vin {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(180deg, #ffffff, #f0f0f0, #d4d4d4);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    max-width: 480px;
    width: 90%;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: "Lato", sans-serif;
}

/* Cabeçalho */
.modal-content-vin h2 {
    font-size: 22px;
    font-weight: bold;
    color: #111;
    margin-bottom: 8px;
}

/* Texto de Aviso */
.modal-content-vin p {
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* Caixa com Detalhes do Carro */
.vehicle-info {
    background: #f5f5f5;
    padding: 16px;
    border-radius: 8px;
}

.vehicle-info h3 {
    font-size: 16px;
    font-weight: bold;
    color: #111;
    margin-bottom: 4px;
}

.vehicle-info p {
    font-size: 14px;
    color: #333;
}

/* Botões */
.modal-buttons-vin {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.modal-buttons-vin button {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
}

#edit-button {
    background: white;
    color: #333;
    border: 1px solid #ccc;
}

#edit-button:hover {
    background: #f0f0f0;
    transform: scale(1.05);
}

#confirm-button {
    background-color: #007BFF !important;
    color: white !important;
}

#confirm-button:hover {
    background: #0056b3 !important;
    transform: scale(1.05) !important;
}

/* Fechar Modal */
.modal-content-vin .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 18px;
    color: red;
    cursor: pointer;
}

.modal-content-vin .close-btn:hover {
    background: #0056b3;
    transform: scale(1.05);
}

/* Responsividade */
@media (max-width: 480px) {
    .modal-content {
        width: 95%;
        padding: 16px;
    }

    .modal-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .modal-buttons button {
        width: 100%;
    }
}

/* Responsividade */
@media (max-width: 768px) {
    .modal-content {
        width: 90%;
        max-height: 80vh;
    }

    .modal-content input {
        width: 70%;
    }
}

@media (max-width: 480px) {
    .modal-content {
        width: 95%;
        max-height: 75vh;
    }

    .modal-content input {
        width: 80%;
    }

    .modal-buttons {
        flex-direction: column;
        gap: 12px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}


/* Style upload Step 9*/

.upload-box {
    width: 90%;
    max-width: 300px; /* Mantém o tamanho máximo do contêiner */
    height: 140px; /* Defina uma altura fixa para as imagens */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    padding: 10px;
    margin: 10px;
}

.upload-box span {
    margin-top: 10px;
}

.upload-box img {
    width: 90%;
    height: 90%; /* Ajuste a altura para preencher o contêiner */
    object-fit: cover; /* Garante que a imagem cubra o contêiner sem distorcer */
    object-position: center; /* Centraliza a imagem */
}

.hidden-input {
    display: none;
}

.upload-box button:hover {
    background-color: #0056b3; /* Cor de fundo ao passar o mouse */
}

.col-md-3 {
    width: 30%;
    margin-right: 10px;
    border: 1px solid #ccc;  /* Defina a cor e a espessura da borda */
    border-radius: 8px;  /* (Opcional) Faz a borda ter cantos arredondados */
}
.custom-text {
    font-size: 14px; /* Ajuste conforme necessário */
}

.custom-button {
    font-size: 12px; /* Ajuste conforme necessário */
    padding: 5px 10px; /* Reduza o padding para diminuir o tamanho do botão */
}


/* INICIO da  Loyalty */

/* ===== CONTEÚDO PRINCIPAL - PADRÃO GLOBAL ===== */
.main-content {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

.loyalty-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.4);
    padding: 30px;
    margin: 50px auto;
}

/* ===== BOTÕES - PADRÃO GLOBAL ===== */

.quick-actions .submit-btn-custom{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

/* ===== MODAL - PADRÃO GLOBAL ===== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.modal.active {
    visibility: visible;
    opacity: 1;
}

.modal-content {
    background: linear-gradient(180deg, #ffffff, #f0f0f0, #d4d4d4);
    padding: 24px;
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 18px;
    color: red;
    cursor: pointer;
}

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

.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: -30px;
}

/* ===== LOYALTY HUB STYLES - PADRÃO GLOBAL ===== */
.lh-screen {
    display: none;
}

.lh-screen.active {
    display: block;
}

.lh-header {
    text-align: center;
    margin-bottom: 2rem;
}

.lh-header h1 {
    color: #007BFF;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.lh-header h2 {
    color: #007BFF;
    font-size: 2rem;
    font-weight: 700;
}

.membership-info {
    text-align: center;
    margin-bottom: 2rem;
}

.membership-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #007BFF 0%, #182143 100%);
    padding: 0.5rem 1.5rem;
    border-radius: 25px;
    margin-bottom: 0.5rem;
}

.badge-icon {
    font-size: 1.2rem;
}

.badge-text {
    font-weight: 600;
    color: white;
}

.membership-since {
    color: #5c5c5c;
    font-size: 0.9rem;
}

.points-display {
    margin-bottom: 2rem;
}

.points-card {
    background: linear-gradient(135deg, #007BFF 0%, #182143 100%);
    color: white;
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 74, 173, 0.3);
}

.points-amount {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.points-value {
    font-size: 1.2rem;
    opacity: 0.9;
}

.progress-section {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: #5c5c5c;
}

.progress-bar {
    background: #e9ecef;
    border-radius: 10px;
    height: 8px;
    overflow: hidden;
}

.progress-fill {
    background: linear-gradient(135deg, #007BFF 0%, #182143 100%);
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.monthly-summary {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}

.monthly-summary h3 {
    color: #007BFF;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.summary-label {
    color: #5c5c5c;
}

.summary-value {
    font-weight: 600;
}

.earning-ways {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}

.earning-ways h3 {
    color: #007BFF;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.ways-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.way-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.way-icon {
    font-size: 1.2rem;
}

.way-info {
    flex: 1;
}

.way-info strong {
    display: block;
    color: #111111;
}

.way-info span {
    color: #5c5c5c;
    font-size: 0.9rem;
}

.catalog-info {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.points-balance {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.balance-label {
    color: #5c5c5c;
}

.balance-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: #007BFF;
}

.balance-value {
    color: #5c5c5c;
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.reward-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.reward-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border-color: #007BFF;
}

.reward-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.reward-card h3 {
    color: #111111;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.reward-description {
    color: #5c5c5c;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.reward-cost {
    color: #007BFF;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.filter-section {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.filter-btn {
    background: white;
    border: 2px solid #007BFF;
    padding: 0.5rem 1rem;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    color: #007BFF;
    font-weight: 600;
}

.filter-btn:hover,
.filter-btn.active {
    background: #007BFF;
    border-color: #007BFF;
    color: white;
}

.info-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 2rem;
    border: 1px solid #ddd;
}

.info-box h3 {
    color: #007BFF;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.info-box ol {
    margin-left: 1.5rem;
    color: #5c5c5c;
}

.info-box li {
    margin-bottom: 0.5rem;
}

.balance-after {
    text-align: center;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    margin: 1rem 0;
    border: 1px solid #ddd;
}

.reward-code {
    margin: 1.5rem 0;
}

.code-box {
    display: flex;
    background: #f8f9fa;
    border: 2px solid #007BFF;
    border-radius: 6px;
    overflow: hidden;
}

.code-box span {
    flex: 1;
    padding: 0.75rem 1rem;
    font-family: monospace;
    font-weight: 600;
    color: #111111;
}

.btn-copy {
    background: #007BFF;
    color: white;
    border: none;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: 600;
}

.btn-copy:hover {
    background: #003280;
}

.btn-copy.small {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    margin-left: 1rem;
}

.code-instructions {
    color: #5c5c5c;
    font-size: 0.9rem;
    text-align: center;
}

.history-filters {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-group label {
    font-weight: 600;
    color: #111111;
    font-size: 0.9rem;
}

.history-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.stat-label {
    color: #5c5c5c;
    font-size: 0.9rem;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.history-item {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid #ddd;
}

.history-date {
    color: #5c5c5c;
    font-size: 0.9rem;
    min-width: 100px;
}

.history-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.history-details {
    flex: 1;
}

.history-description {
    color: #111111;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.history-info {
    color: #5c5c5c;
    font-size: 0.9rem;
}

.history-points {
    font-weight: 600;
    text-align: right;
    min-width: 100px;
}

.history-balance {
    color: #5c5c5c;
    font-size: 0.9rem;
    text-align: right;
    min-width: 100px;
}


.referral-info {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}

.referral-header {
    text-align: center;
    margin-bottom: 2rem;
}

.referral-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.referral-header h2 {
    color: #007BFF;
    margin-bottom: 0.5rem;
    font-size: 2rem;
}

.referral-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step-number {
    width: 40px;
    height: 40px;
    background: #007BFF;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 1rem;
}

.step-content h3 {
    color: #111111;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.step-content p {
    color: #5c5c5c;
    font-size: 0.9rem;
}

.referral-link {
    margin-bottom: 1.5rem;
}

.referral-link label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #111111;
}

.link-box {
    display: flex;
    background: #f8f9fa;
    border: 2px solid #007BFF;
    border-radius: 6px;
    overflow: hidden;
}

.link-box span {
    flex: 1;
    padding: 0.75rem 1rem;
    font-family: monospace;
    color: #111111;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.referral-code {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.share-section {
    text-align: center;
    margin-bottom: 2rem;
}

.share-section p {
    margin-bottom: 1rem;
    font-weight: 600;
    color: #111111;
}

.share-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.share-btn {
    background: white;
    border: 2px solid #007BFF;
    padding: 0.5rem 1rem;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    color: #007BFF;
    font-weight: 600;
}

.share-btn:hover {
    transform: translateY(-1px);
    background: #004aad;
    color: white;
}

.referral-stats {
    margin-bottom: 2rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.stat-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid #ddd;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: #007BFF;
    margin-bottom: 0.5rem;
}

.referral-list {
    margin-bottom: 2rem;
}

.referral-list h3 {
    color: #007BFF;
    margin-bottom: 1rem;
    text-align: center;
    font-size: 1.5rem;
}

.referral-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.referral-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.friend-avatar {
    width: 40px;
    height: 40px;
    background: #007BFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
}

.friend-info {
    flex: 1;
}

.friend-name {
    font-weight: 600;
    color: #111111;
}

.referral-date {
    color: #5c5c5c;
    font-size: 0.9rem;
}

.referral-points {
    font-weight: 600;
    color: #28a745;
}

.referral-terms {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1.5rem;
    border: 1px solid #ddd;
}

.referral-terms h3 {
    color: #007BFF;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.referral-terms ul {
    margin-left: 1.5rem;
    color: #5c5c5c;
}

.referral-terms li {
    margin-bottom: 0.5rem;
}

.quick-actions {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #ddd;
}

.quick-actions h3 {
    color: #007BFF;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border: 2px solid #004aad;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    color: #007BFF;
    font-weight: 600;
}

.action-btn:hover {
    background: #004aad;
    color: white;
    transform: translateY(-2px);
}

.action-icon {
    font-size: 1.5rem;
}

/* ======= SECTION TITLE ======= */
.special-offers {
  max-width: 1100px;
  margin: 0 auto;
}

.special-offers h3 {
  font-size: 1.8rem;
  color: #004aad;
  text-align: center;
  margin-bottom: 25px;
}

/* ======= CAROUSEL CONTAINER ======= */
.offers-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

.offers-carousel::-webkit-scrollbar {
  height: 8px;
}
.offers-carousel::-webkit-scrollbar-thumb {
  background: #004aad;
  border-radius: 4px;
}

/* ======= OFFER CARD ======= */
.offer-card {
  flex: 0 0 320px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  padding: 25px;
  scroll-snap-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* ======= BADGE ======= */
.offer-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  color: #fff;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* ======= CONTENT ======= */
.offer-card h4 {
  margin: 8px 0;
  color: #222;
}

.offer-card p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 15px;
}

.offer-validity {
  display: inline-block;
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

.rules-section {
    margin-bottom: 1.5rem;
}

.rules-section h4 {
    color: #111111;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.rules-section ul {
    margin-left: 1.5rem;
    color: #555;
}

.rules-section li {
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* ===== UTILITY CLASSES ===== */
.text-center {
    text-align: center;
}

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }

.positive {
    color: #28a745 !important;
}

.negative {
    color: #dc3545 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .nav-container {
        flex-direction: column;
        gap: 1rem;
    }

    .main-content {
        padding: 0 1rem;
    }

    .loyalty-container {
        padding: 20px;
        margin: 20px auto;
    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions button {
        width: 100%;
    }

    .history-item {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }

    .history-filters {
        flex-direction: column;
        gap: 1rem;
    }

    .referral-steps {
        grid-template-columns: 1fr;
    }

    .share-buttons {
        flex-direction: column;
    }

    .actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rewards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .lh-header h1 {
        font-size: 2rem;
    }

    .lh-header h2 {
        font-size: 1.5rem;
    }

    .points-amount {
        font-size: 2rem;
    }

    .actions-grid {
        grid-template-columns: 1fr;
    }
}

/* LOYALT ADMIN */

/* ===== ADMIN/BACKOFFICE STYLES ===== */

.form-wrapper-custom{
max-width: 122vh; !important;
}
/* Admin Layout */
.admin-container {
    display: flex !important;
    min-height: 100vh !important;
    background: #f8f9fa !important;
    flex-direction: row !important;
}

/* Sidebar */
.admin-sidebar {
    width: 250px;
    background: #182143;
    color: white;
    padding: 2rem 0;
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}

.admin-brand {
    text-align: center;
    margin-bottom: 2rem;
    padding: 0 1.5rem;
}

.admin-brand h1 {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
}

.admin-nav ul {
    list-style: none;
    padding: 0;
}

.admin-nav li {
    margin-bottom: 0.5rem;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    color: #b8c2cc;
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.admin-nav a:hover,
.admin-nav a.active {
    background: rgba(255,255,255,0.1);
    color: white;
    border-left-color: #004aad;
}

.admin-nav i {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

/* Admin Main Content */
.admin-main {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}


.admin-header h1 {
    margin-bottom:10px;

}

.admin-actions {
    display: flex;
    gap: 1rem;
}

/* Dashboard Stats */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card-admin {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border-left: 4px solid #004aad;
    transition: transform 0.3s ease;
}

.stat-card-admin:hover {
    transform: translateY(-2px);
}

.stat-card-admin h3 {
    color: #5c5c5c;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #182143;
    margin-bottom: 0.5rem;
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.trend-up {
    color: #28a745;
}

.trend-down {
    color: #dc3545;
}

/* Charts */
.charts-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.chart-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.chart-card h3 {
    color: #182143;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.chart-placeholder {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 1.1rem;
}

/* Tables */
.data-table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}


.table-header h3 {
    margin: 0;
    font-size: 1.3rem;
}

.table-actions {
    display: flex;
    gap: 1rem;
}

.table-container {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th {
    background: #f8f9fa;
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: #182143;
    border-bottom: 2px solid #dee2e6;
}

.table td {
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
    vertical-align: middle;
}

.table tr:hover {
    background: #f8f9fa;
}
/* ======= CONTAINER ======= */
.data-table {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  padding: 25px;
  max-width: 1150px;
  margin: 0 auto;
}

/* ======= HEADER ======= */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.table-header h2 {
  font-size: 1.8rem;
  color: #004aad;
  margin: 0;
}

.primary-btn {
  background-color: #004aad;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.primary-btn:hover {
  background-color: #003580;
}

/* ======= CAROUSEL (SAME AS SPECIAL OFFERS) ======= */
.campaigns-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

.campaigns-carousel::-webkit-scrollbar {
  height: 8px;
}
.campaigns-carousel::-webkit-scrollbar-thumb {
  background: #004aad;
  border-radius: 4px;
}

/* ======= CARD (EXACT SAME STYLE AS SPECIAL OFFERS) ======= */
.campaign-card {
  flex: 0 0 320px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  padding: 25px;
  scroll-snap-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.campaign-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* ======= BADGE ======= */
.campaign-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  color: #fff;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* ======= CONTENT ======= */
.campaign-card h4 {
  margin: 8px 0;
  color: #222;
}

.campaign-card p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 15px;
}

.campaign-validity {
  display: inline-block;
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

/* Forms Admin */
.form-section {
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.nice-select{
display:flex !important;
align-items: center !important;
}

.form-section h2 {
    margin-bottom: 20px;
}

.form-section h3 {
    color: #182143;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    margin-top: 10px;
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #182143;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: #004aad;
    box-shadow: 0 0 0 3px rgba(0, 74, 173, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Search Box */

.primary-btn .btn-sm{
    margin-bottom: 10px;
}

.search-box .primary-btn {
       justify-content: center;
}

.search-box {
    background: white;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.search-form {
    display: flex;
    gap: 15px;
    flex-direction: column;

}

/* User Status */
.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-active {
    background: #d4edda;
    color: #155724;
}

.status-inactive {
    background: #f8d7da;
    color: #721c24;
}

.status-suspended {
    background: #fff3cd;
    color: #856404;
}

/* Action Buttons */

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* Reward Cards Admin */
.rewards-grid-admin {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.reward-card-admin {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.reward-card-admin:hover {
    border-color: #004aad;
    transform: translateY(-2px);
}

.reward-header {
    display: flex;
    justify-content: between;
    align-items: start;
    margin-bottom: 1rem;
}

.reward-image {
    width: 80px;
    height: 80px;
    background: #f8f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #6c757d;
}

.reward-actions {
    display: flex;
    gap: 0.5rem;
}

.reward-title {
    color: #182143;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.reward-description {
    color: #5c5c5c;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.reward-meta {
    display: flex;
    justify-content: between;
    align-items: center;
}

.reward-points {
    font-size: 1.5rem;
    font-weight: 700;
    color: #007BFF;
    margin-left: 10px;
}

.reward-stock {
    color: #5c5c5c;
    font-size: 0.9rem;
}

/* Campaign Cards */
/* ======= CONTAINER ======= */
.data-table {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  padding: 25px;
  max-width: 1150px;
  margin: 0 auto;
}

/* ======= HEADER ======= */
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
}

.table-header h2 {
  font-size: 1.8rem;
  color: #004aad;
  margin: 0;
}

.primary-btn {
  background-color: #004aad;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.primary-btn:hover {
  background-color: #003580;
}

/* ======= CAROUSEL (SAME STYLE AS OFFERS) ======= */
.campaigns-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 10px;
}

.campaigns-carousel::-webkit-scrollbar {
  height: 8px;
}
.campaigns-carousel::-webkit-scrollbar-thumb {
  background: #004aad;
  border-radius: 4px;
}

/* ======= CARD ======= */
.campaign-card {
  flex: 0 0 320px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  padding: 25px;
  scroll-snap-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  position: relative;
}

.campaign-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* ======= DISABLED STATE ======= */
.campaign-card.disabled {
  opacity: 0.5;
  filter: grayscale(0.5);
}

/* ======= BADGE ======= */
.campaign-badge {
  display: inline-block;
  background: linear-gradient(135deg, #ff5f6d, #ffc371);
  color: #fff;
  font-weight: bold;
  font-size: 0.9rem;
  padding: 6px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* ======= CONTENT ======= */
.campaign-card h4 {
  margin: 8px 0;
  color: #222;
}

.campaign-card p {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 15px;
}

.campaign-validity {
  display: inline-block;
  font-size: 0.85rem;
  color: #666;
  font-style: italic;
}

/* ======= POWER BUTTON ======= */
.power-btn {
  position: absolute;
  top: 18px;
  right: 18px;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  color: #fff;
}

.power-btn:hover {
  transform: scale(1.1);
}

/* ACTIVE */
.power-btn.active {
  background-color: #007BFF;
}

/* INACTIVE */
.power-btn.inactive {
  background-color: #6c757d;
}

.campaign-card.disabled .check-btn {
  background-color: #6c757d;
}
.campaign-card.disabled .check-btn:hover {
  background-color: #5a6268;
}

.campaign-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.metric {
    text-align: center;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #182143;
    display: block;
}

.metric-label {
    font-size: 0.8rem;
    color: #5c5c5c;
    text-transform: uppercase;
}

/* Responsive Admin */
@media (max-width: 1024px) {
    .charts-grid {
        grid-template-columns: 1fr;
    }

    .admin-container {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        padding: 1rem 0;
    }

    .admin-nav ul {
        display: flex;
        overflow-x: auto;
        padding: 0 1rem;
    }

    .admin-nav li {
        margin-bottom: 0;
        margin-right: 0.5rem;
    }

    .admin-nav a {
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .admin-nav a.active {
        border-left-color: transparent;
        border-bottom-color: #007BFF;
    }
}

@media (max-width: 768px) {
    .admin-main {
        padding: 1rem;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .table-header {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .table-actions {
        justify-content: center;
    }

    .rewards-grid-admin,
    .campaigns-grid {
        grid-template-columns: 1fr;
    }
}

/* Utility Classes Admin */
.text-success { color: #28a745 !important; }
.text-danger { color: #dc3545 !important; }
.text-warning { color: #ffc107 !important; }
.text-info { color: #17a2b8 !important; }

.bg-success { background-color: #28a745 !important; }
.bg-danger { background-color: #dc3545 !important; }
.bg-warning { background-color: #ffc107 !important; }
.bg-info { background-color: #17a2b8 !important; }

.mb-3 { margin-bottom: 1.5rem !important; }
.mt-3 { margin-top: 1.5rem !important; }

/* Loyalt admin */

/* ===== LOYALTY ADMIN STYLES ===== */
/* Container Principal do Admin */
.admin-container {
    display: grid;
    grid-template-columns: 280px 1fr;
    min-height: 100vh;
    background: #f5f7fb;
}

/* Sidebar Admin */
.admin-sidebar {
    background: #007BFF;
    color: white;
    padding: 20px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.admin-brand {
    padding: 0 20px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 20px;
}

.admin-brand h1 {
    font-size: 20px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.admin-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.admin-nav li {
    margin: 0;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    font-size: 14px;
}

.admin-nav a:hover,
.admin-nav a.active {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-left-color: #007BFF;
}

.admin-nav a i {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

/* Main Content Admin */
.admin-main {
    padding: 30px;
    background: #f5f7fb;
    overflow-y: auto;
}
.admin-header{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.admin-header h1 {
    font-size: 28px;
    font-weight: 700;
    color: #182143;
    margin: 10px;
}

.admin-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Botões Admin */
.primary-btn, .site-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Lato', sans-serif;
    text-decoration: none;
}

.primary-btn {
    background: #007BFF;
    color: white;
    margin-top: 10px;
}

.primary-btn:hover {
    background: #003280;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 74, 173, 0.3);
}

.site-btn {
    margin-top: 10px;
    background: #6c757d;
    color: white;
}

.site-btn:hover {
    background: #5a6268;
    transform: translateY(-2px);
}

.btn-icon {
    padding: 10px 15px;
}



/* Stats Cards */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-card-admin {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-card-admin:hover {
    transform: translateY(-5px);
}

.stat-card-admin h3 {
    font-size: 14px;
    color: #5c5c5c;
    margin-bottom: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-number {
    font-size: 32px;
    font-weight: 700;
    color: #182143;
    margin-bottom: 8px;
}

.stat-trend {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.trend-up {
    color: #28a745;
}

.trend-down {
    color: #dc3545;
}

/* Charts */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.chart-card {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-card h2,
.chart-card h3 {
    margin-bottom: 20px;
    color: #182143;
}

.chart-placeholder {
    background: #f8f9fa;
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 60px 20px;
    text-align: center;
    color: #5c5c5c;
    font-size: 16px;
}

/* Tables */
.data-table {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    overflow: hidden;
}

.table-header {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid #e9ecef;
    background: #f8f9fa;
}

.table-header h2,
.table-header h3 {
    margin-right: 20px;
    color: #182143;
}
.table-actions .primary-btn .btn-sm {
    margin-top: 6px;
    }
.table-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.table-container {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table th,
.table td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #182143;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.table th:hover {
    background: #e9ecef;
}

.table th::after {
    content: "↑↓";
    font-size: 10px;
    margin-left: 5px;
    opacity: 0.5;
}

.table tbody tr:hover {
    background: #f8f9fa;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active {
    background: #d4edda;
    color: #155724;
}

.status-inactive {
    background: #f8d7da;
    color: #721c24;
}

/* Form Sections */

.search-box {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

.search-input {
    flex: 1;
    min-width: 250px;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
}

.search-input:focus {
    border-color: #004aad;
    box-shadow: 0 0 5px rgba(0, 74, 173, 0.3);
}

/* Form Controls */
.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    font-family: 'Lato', sans-serif;
}

.form-control:focus {
    border-color: #004aad;
    box-shadow: 0 0 5px rgba(0, 74, 173, 0.3);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

/* Action Buttons */
.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 15px;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    color: #333;
}

.action-btn:hover {
    border-color: #004aad;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-icon {
    font-size: 24px;
}

/* Export Options */
.export-options {
    display: flex;
    gap: 10px;
}

/* Modal Styles para Admin */
.modal {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s, opacity 0.3s;
}

.modal.visible {
    visibility: visible;
    opacity: 1;
}

.modal-actions{
    display: flex;
    justify-content: center !important;
    margin-top: 10px !important;
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 25px 25px 0;
}

.modal-icon {
    font-size: 24px;
}

.modal-body {
    padding: 25px;
}

.modal-actions {
    padding: 20px 25px;
    border-top: 1px solid #e9ecef;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    color: #dc3545;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.close-btn:hover {
    background: #f8d7da;
}

/* Responsividade Admin */
@media (max-width: 768px) {
    .admin-container {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        display: none;
    }


    .admin-actions {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .charts-grid {
        grid-template-columns: 1fr;
    }

    .actions-grid {
        grid-template-columns: 1fr;
    }

    .search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input {
        min-width: auto;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .table-header {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .modal-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .admin-main {
        padding: 15px;
    }

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .export-options {
        flex-wrap: wrap;
    }

    .table-container {
        font-size: 12px;
    }

    .table th,
    .table td {
        padding: 10px 15px;
    }
}
/* ===== LOYALTY SYSTEM STYLES ===== */
/* Baseado no styleGlobalProjeto.css */

/* ... (mantenha todo o CSS anterior que já foi criado) ... */

/* ===== CAMPAIGNS SPECIFIC STYLES ===== */
.campaigns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.campaign-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
}

.campaign-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.campaign-header {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: linear-gradient(135deg, #007BFF 0%, #182143 100%);
    color: white;
    position: relative;
}

.campaign-header h4 {
    margin: 0 0 5px 0;
    color: white;
    font-size: 18px;
}

.campaign-type {
    font-size: 12px;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.campaign-status {
    position: absolute;
    top: 15px;
    right: 15px;
}

.campaign-body {
    padding: 20px;
}

.campaign-description {
    color: #5c5c5c;
    margin-bottom: 15px;
    font-size: 14px;
    line-height: 1.5;
}

.campaign-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: 12px;
    color: #5c5c5c;
}

.campaign-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.campaign-stats {
    background: #f8f9fa;
    padding: 15px 20px;
    border-top: 1px solid #e9ecef;
}

.campaign-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    text-align: center;
}

.stat-item h5 {
    margin: 0 0 5px 0;
    font-size: 11px;
    color: #5c5c5c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-item .stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #182143;
}

.campaign-actions {
    padding: 15px 20px;
    background: #f8f9fa;
    display: flex;
    gap: 10px;
    border-top: 1px solid #e9ecef;
}

/* Rules List */

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bonus-rules-section h2 {
    margin-bottom: 25px;
}

.rule-item {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid #004aad;
    transition: all 0.3s ease;
}

.rule-item:hover {
    background: #e9ecef;
    transform: translateX(5px);
}

.rule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.rule-header h4 {
    margin: 0;
    color: #182143;
    font-size: 16px;
}

.rule-description {
    color: #5c5c5c;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.rule-meta {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: #6c757d;
}

.rule-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Form Rows */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.input-group .form-control {
    flex: 0 0 auto;
    width: auto;
}

.input-group-text {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

/* Program Rules Form */
.program-rules-section {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}


.program-rules-section h3 {
    margin-bottom: 20px;
    color: #182143;
    border-bottom: 2px solid #004aad;
    padding-bottom: 10px;
}

/* Bonus Rules Section */
.bonus-rules-section {
    background: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

/* Responsive adjustments for campaigns */
@media (max-width: 768px) {
    .campaigns-grid {
        grid-template-columns: 1fr;
    }

    .campaign-meta {
        grid-template-columns: 1fr;
    }

    .campaign-stats-grid {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .rule-meta {
        flex-direction: column;
        gap: 10px;
    }

    .rule-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}
/* License Plate: um campo por linha, cada um usando toda a largura do
   container. O título traz `grid-column: span 2` inline (herança do grid de
   duas colunas); com uma coluna só, esse span criaria uma coluna implícita,
   então ele é forçado a ocupar a linha inteira. */
.grid-container > .grid-item,
.grid-container > .subtext-right {
    grid-column: 1 / -1 !important;
    width: 100%;
}

.grid-container > .grid-item input,
.grid-container > .grid-item select {
    width: 100%;
    box-sizing: border-box;
}

/* O bloco da License Plate ocupa a linha inteira do formulário, para os campos
   poderem se esticar até a largura máxima disponível. */
.input-field-plate {
    grid-column: 1 / -1 !important;
    width: 100% !important;
}