/* ==============================
LOGIN / AUTH ONCHAIR PREMIUM
============================== */

.onchair-auth-wrapper {
    max-width: 420px;
    margin: 60px auto;
    padding: 28px;

    background: linear-gradient(145deg, #0F0F0F, #1A1A1A);
    border: 1px solid rgba(200,161,63,.35);
    border-radius: 24px;

    box-shadow: 0 20px 50px rgba(0,0,0,.3);

    color: #F2F2F2;
}

/* ==============================
TABS
============================== */

.onchair-auth-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 22px;
}

.tab-btn {
    flex: 1;
    padding: 12px;

    border-radius: 12px;
    border: 1px solid rgba(200,161,63,.3);

    background: rgba(200,161,63,.08);
    color: #E6C878;

    cursor: pointer;
    font-weight: 700;
    transition: .2s;
}

.tab-btn:hover {
    background: rgba(200,161,63,.2);
}

.tab-btn.active {
    background: linear-gradient(135deg, #C8A13F, #E6C878);
    color: #0F0F0F;
}

/* ==============================
TABS CONTEÚDO
============================== */

.auth-tab {
    display: none;
}

.auth-tab.active {
    display: block;
}

/* ==============================
INPUTS
============================== */

.auth-tab input {
    width: 100%;
    padding: 14px;
    margin-bottom: 12px;

    border-radius: 12px;
    border: 1px solid rgba(200,161,63,.3);

    background: #fff;
    color: #111;

    font-size: 15px;
    box-sizing: border-box;
}

.auth-tab input:focus {
    outline: none;
    border-color: #C8A13F;
    box-shadow: 0 0 0 3px rgba(200,161,63,.2);
}

/* ==============================
BOTÕES
============================== */

.auth-tab button {
    width: 100%;
    padding: 14px;

    border-radius: 14px;
    border: none;

    background: linear-gradient(135deg, #C8A13F, #E6C878);
    color: #0F0F0F;

    font-weight: 800;
    font-size: 15px;

    cursor: pointer;
    transition: .2s;
}

.auth-tab button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(200,161,63,.3);
}

/* ==============================
BOTÃO PROFISSIONAL
============================== */

.btn-profissional {
    display: block;
    text-align: center;

    margin-top: 14px;
    padding: 12px;

    border-radius: 12px;

    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: white;

    font-weight: 700;
    text-decoration: none;
    transition: .2s;
}

.btn-profissional:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(46,204,113,.3);
}

/* ==============================
MOBILE
============================== */

@media (max-width: 600px) {
    .onchair-auth-wrapper {
        margin: 30px 12px;
        padding: 20px;
        border-radius: 18px;
    }

    .tab-btn {
        font-size: 14px;
        padding: 10px;
    }
}

.onchair-password-field {
    position: relative;
}

.onchair-password-input {
    padding-right: 45px !important;
}

.onchair-toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 16px;
    color: #999;
    transition: .2s;
}

.onchair-toggle-password:hover {
    color: #C8A13F;
}

.onchair-toggle-password {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onchair-toggle-password svg {
    display: none;
}

.onchair-toggle-password .icon-eye {
    display: block;
}

.onchair-toggle-password.active .icon-eye {
    display: none;
}

.onchair-toggle-password.active .icon-eye-off {
    display: block;
}

.onchair-toggle-password:hover {
    color: #C8A13F;
}

.onchair-termos-box {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 10px 0 18px !important;
}

.onchair-termos-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    color: #E6C878 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    text-align: left !important;
}

.onchair-termos-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 18px !important;
    accent-color: #C8A13F !important;
}

.onchair-termos-label span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    white-space: normal !important;
    text-align: left !important;
}

.onchair-termos-label a {
    color: #E6C878 !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
}
/* ==============================
BOTÃO DESABILITADO
============================== */

button:disabled,
#btn-submit:disabled {

    background: #555 !important; /* cinza */
    color: #999 !important;

    cursor: not-allowed !important;

    opacity: 0.7;

    box-shadow: none !important;
    transform: none !important;

}

.onchair-esqueci-senha {
    text-align: right;
    margin-top: -4px;
    margin-bottom: 14px;
}

.onchair-esqueci-senha a {
    color: #E6C878 !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
}

.onchair-esqueci-senha a:hover {
    text-decoration: underline !important;
}

@media (max-width: 600px) {
    .onchair-esqueci-senha {
        text-align: center;
    }
}

/* ESCOLHA DE CADASTRO CLIENTE / PROFISSIONAL */

.onchair-cadastro-escolha{
    text-align:center;
}

.onchair-cadastro-escolha h3{
    color:#F2F2F2;
    font-size:26px;
    margin:0 0 8px;
}

.onchair-cadastro-escolha p{
    color:#aaa;
    font-size:14px;
    margin:0 0 22px;
}

.onchair-cadastro-opcoes{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.onchair-cadastro-opcoes{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
    align-items:stretch;
}

.onchair-cadastro-opcao{
    min-height:150px;

    padding:18px;

    border-radius:24px;

    background:
    linear-gradient(145deg,#1d1d1d,#121212);

    border:1px solid rgba(200,161,63,.18);

    color:#F2F2F2 !important;
    text-decoration:none !important;

    cursor:pointer;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;

    text-align:left;

    transition:.22s ease;

    position:relative;

    overflow:hidden;
}

.onchair-cadastro-opcao::before{
    content:'';
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(200,161,63,.10),
    transparent 50%);

    pointer-events:none;
}

.onchair-cadastro-opcao:hover{
    border-color:rgba(200,161,63,.45);
    transform:translateY(-2px);
}

.onchair-cadastro-opcao span{
    width:52px;
    height:52px;

    border-radius:18px;

    background:rgba(200,161,63,.14);

    color:#E6C878;

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

    font-size:24px;

    margin-bottom:18px;
}

.onchair-cadastro-opcao strong{
    display:block;

    color:#F2F2F2;

    font-size:24px;
    line-height:1.1;

    margin-bottom:10px;
}

.onchair-cadastro-opcao small{
    display:block;

    color:#A9A9A9;

    font-size:14px;
    line-height:1.5;
}

/* PROFISSIONAL */

.onchair-cadastro-opcao.profissional{
    border-color:rgba(200,161,63,.18);
}

/* MOBILE */

@media(max-width:640px){

    .onchair-cadastro-opcoes{
        grid-template-columns:1fr;
        gap:12px;
    }

    .onchair-cadastro-opcao{
        min-height:130px;
        padding:16px;
        border-radius:22px;
    }

    .onchair-cadastro-opcao strong{
        font-size:18px;
    }

    .onchair-cadastro-opcao small{
        font-size:13px;
    }

    .onchair-cadastro-opcao span{
        width:46px;
        height:46px;
        font-size:21px;
        margin-bottom:14px;
    }
}

/* CORREÇÃO FINAL - CARDS DE ESCOLHA DE CADASTRO */

.auth-tab .onchair-cadastro-opcao,
.auth-tab button.onchair-cadastro-opcao{
    width:auto !important;
    min-height:135px !important;
    padding:18px !important;

    background:linear-gradient(145deg,#1d1d1d,#121212) !important;

    border:1px solid rgba(200,161,63,.20) !important;
    border-radius:22px !important;

    color:#F2F2F2 !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:flex-start !important;

    text-align:left !important;
    box-shadow:none !important;
}

.auth-tab .onchair-cadastro-opcao:hover{
    border-color:rgba(200,161,63,.45) !important;
    transform:translateY(-2px) !important;
}

.auth-tab .onchair-cadastro-opcao span{
    width:46px !important;
    height:46px !important;
    border-radius:16px !important;
    background:rgba(200,161,63,.14) !important;
    color:#E6C878 !important;
    margin-bottom:16px !important;
    font-size:22px !important;
}

.auth-tab .onchair-cadastro-opcao strong{
    color:#F2F2F2 !important;
    font-size:19px !important;
    line-height:1.15 !important;
    margin-bottom:8px !important;
}

.auth-tab .onchair-cadastro-opcao small{
    color:#A9A9A9 !important;
    font-size:13px !important;
    line-height:1.45 !important;
}

@media(min-width:641px){
    .onchair-cadastro-opcoes{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:640px){
    .onchair-cadastro-opcao{
        min-height:118px !important;
    }
}