.setup-page{
    display:flex;
    justify-content:center;
    padding:40px 0;
}

.field-hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}

.field-hint strong {
    color: #374151;
}

.setup-card{
    width:1100px;
    background:#fff;
    border-radius:24px;
    padding:48px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.setup-progress{
    width:100%;
    height:8px;
    background:#E5E7EB;
    border-radius:999px;
    overflow:hidden;
    margin-bottom:24px;
}

.setup-progress-bar{
    width:25%;
    height:100%;
    background:#324C73;
}

.setup-step{
    color:#324C73;
    font-weight:600;
    margin-bottom:12px;
}

.setup-card h1{
    margin:0;
    font-size:34px;
}

.setup-subtitle{
    color:#64748B;
    margin:12px 0 40px;
}

.setup-grid{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:48px;
    align-items:start;
}

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

.form-group label{
    display:block;
    margin-bottom:10px;
    font-weight:600;
}

.form-group input{
    width:100%;
    padding:14px 16px;
    border:1px solid #D1D5DB;
    border-radius:12px;
    font-size:15px;
    box-sizing:border-box;
}

.form-group small{
    display:block;
    margin-top:8px;
    color:#64748B;
}

.brand-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.brand-card{
    border:2px solid #E5E7EB;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    transition:.2s;
    background:#fff;
}

.brand-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.brand-card.selected{
    border-color:#324C73;
}

.brand-bar{
    height:8px;
}

.brand-seld{
    background:#324C73;
}

.brand-bubble{
    background:#6A267B;
}

.brand-lavo{
    background:#4A215A;
}

.brand-custom{
    background:#CBD5E1;
}

.brand-card strong{
    display:block;
    padding:18px 18px 6px;
    font-size:17px;
}

.brand-card span{
    display:block;
    padding:0 18px 18px;
    color:#64748B;
    font-size:14px;
}

input[type="color"]{
    width:100%;
    height:52px;
    border:none;
    background:none;
    cursor:pointer;
}

.primary-button{
    width:100%;
    margin-top:32px;
    padding:16px;
    border:none;
    border-radius:14px;
    background:#324C73;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.2s;
}

.primary-button:hover{
    opacity:.95;
}

.setup-preview h3{
    margin:0 0 18px;
    color:#475569;
}

.preview-phone{
    border-radius:28px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.10);
    border:1px solid #E5E7EB;
}

.preview-brand{
    height:10px;
    background:#324C73;
}

.preview-content{
    padding:28px;
}

.preview-content h2{
    margin-top:0;
    text-align:center;
    font-size:24px;
}

.preview-machines{
    margin-top:36px;
}

.preview-machines div{
    padding:14px 0;
    border-bottom:1px solid #F1F5F9;
}

.preview-footer{
    margin-top:40px;
    color:#64748B;
    font-size:14px;
    line-height:1.8;
}

@media(max-width:900px){

    .setup-card{
        width:100%;
        padding:32px;
    }

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

    .setup-preview{
        order:-1;
    }

}

.primary-button:disabled{

    pointer-events:none;

}

.upload-area{

    display:block;

    border:2px dashed #CBD5E1;

    border-radius:18px;

    padding:28px;

    text-align:center;

    cursor:pointer;

    transition:.2s;

}

.upload-area:hover{

    border-color:#324C73;

    background:#F8FAFC;

}

.upload-area strong{

    display:block;

    font-size:17px;

}

.upload-area p{

    margin-top:10px;

    color:#64748B;

    font-size:14px;

}

#logoPreview{

    width:120px;

    max-height:80px;

    object-fit:contain;

    margin-bottom:18px;

}

.preview-logo-container{

    text-align:center;

}

#previewLogo{

    max-width:180px;

    max-height:70px;

    object-fit:contain;

    margin:0 auto 18px;

    display:block;

}

/* ===========================
   STEP 2
=========================== */

.address-input{

    width:100%;
    min-height:120px;

    padding:18px;

    border:1px solid #D1D5DB;
    border-radius:14px;

    font-size:15px;

    resize:none;

    box-sizing:border-box;

    transition:.2s;

}

.address-input:focus{

    outline:none;

    border-color:#324C73;

    box-shadow:0 0 0 4px rgba(50,76,115,.08);

}

.operation-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin-top:18px;

}

.operation-card{

    border:2px solid #E5E7EB;

    border-radius:18px;

    padding:22px;

    cursor:pointer;

    transition:.2s;

    background:#fff;

}

.operation-card:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.operation-card.selected{

    border-color:#324C73;

}

.operation-icon{

    font-size:30px;

    margin-bottom:14px;

}

.operation-card strong{

    display:block;

    margin-bottom:8px;

    font-size:18px;

}

.operation-card span{

    display:block;

    color:#64748B;

    line-height:1.6;

}

.hours-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:24px;

}

.hours-grid input{

    width:100%;

    padding:14px;

    border:1px solid #D1D5DB;

    border-radius:12px;

    font-size:15px;

    box-sizing:border-box;

}

.hours-grid input:focus{

    outline:none;

    border-color:#324C73;

}



@media(max-width:900px){

    .operation-grid{

        grid-template-columns:1fr;

    }

    .hours-grid{

        grid-template-columns:1fr;

    }

}

.custom-hours-list{

    display:flex;
    flex-direction:column;
    gap:12px;
    margin-top:24px;

}

.day-row{

    display:grid;
    grid-template-columns:140px 120px auto 120px 100px;

    align-items:center;

    gap:14px;

    padding:14px 18px;

    border:1px solid #E5E7EB;

    border-radius:14px;

    background:#fff;

}

.day-row input[type="time"]{

    width:100%;

}

.day-name{

    font-weight:600;

}

.day-closed{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:14px;

}

.closed-day{

    opacity:.55;

}

.closed-day input[type="time"]{

    background:#F3F4F6;

    cursor:not-allowed;

}

/* ===============================
   Preview - Horários
=============================== */

.preview-hours-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

    margin-top:6px;

    font-size:11px;

}

.preview-hours-row strong{

    font-weight:600;

    color:#24364f;

}

.preview-hours-row span{

    color:#666;

}

.preview-footer{

    display:flex;

    flex-direction:column;

    gap:8px;

}

/* ==========================================================
   STEP 3
========================================================== */

.integration-hero{

    text-align:center;

    margin-bottom:40px;

}

.integration-badge{

    display:inline-block;

    padding:8px 18px;

    background:#EEF5FF;

    color:#2F5DA9;

    border-radius:999px;

    font-size:13px;

    font-weight:600;

    margin-bottom:20px;

}

.integration-hero h2{

    font-size:34px;

    margin-bottom:14px;

}

.integration-hero p{

    max-width:700px;

    margin:auto;

    color:#6D7684;

    line-height:1.7;

}

.integration-time{

    margin-top:20px;

    color:#4F647E;

    font-weight:600;

}

.integration-progress{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:14px;

    margin:50px 0;

}

.progress-line{

    width:70px;

    height:2px;

    background:#E5E7EB;

}

.progress-item{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:#8C97A6;

    font-size:13px;

}

.progress-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#ECEFF3;

    font-weight:700;

}

.progress-item.done .progress-icon{

    background:#22C55E;

    color:white;

}

.progress-item.active .progress-icon{

    background:#324C73;

    color:white;

}

.integration-grid{

    display:grid;

    grid-template-columns:2fr 0.9fr;

    gap:24px;

}

.integration-left{

    display:flex;

    flex-direction:column;

}

.integration-card{

    background:white;

    border:1px solid #E7EBF0;

    border-radius:18px;

    padding:34px;

}

.integration-info{

    background:#F7FAFF;

    border-color:#D8E7FF;

}

.card-icon{

    font-size:34px;

    margin-bottom:16px;

}

.integration-card h3{

    margin-bottom:10px;

}

.integration-card p{

    color:#667085;

    line-height:1.7;

}

.integration-label{

    display:block;

    margin:20px 0 10px;

    font-size:14px;

    font-weight:600;

    color:#344054;

}

.integration-input{

    width:100%;

    min-height:110px;

    padding:18px 20px;

    border:2px solid #D0D5DD;

    border-radius:14px;

    background:#FAFBFC;

    font-size:16px;

    line-height:1.6;

    resize:none;

    box-sizing:border-box;

    font-family:inherit;

    transition:.2s;

}

.integration-input::placeholder{

    color:#98A2B3;

}

.integration-input:focus{

    outline:none;

    border-color:#324C73;

    background:#FFF;

    box-shadow:0 0 0 5px rgba(50,76,115,.10);

}

.saved-box{

    background:white;

    border-radius:10px;

    padding:14px;

    margin:22px 0;

    border:1px solid #DCE7F5;

    font-weight:600;

}

.save-later{

    text-align:center;

    margin-top:36px;

}

.save-later a{

    text-decoration:none;

    color:#6B7280;

    font-weight:600;

}/* ==========================================
   STEP 3 - Layout em coluna única
========================================== */

.setup-grid.single-column{

    grid-template-columns:1fr;

}

.setup-grid.single-column .setup-form{

    max-width:900px;

    margin:0 auto;

}

.setup-grid.single-column .setup-card{

    width:100%;

}

.tutorial-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:20px;

    padding:12px 18px;

    border:1px solid #D7E3F4;

    border-radius:12px;

    background:#F8FBFF;

    color:#324C73;

    font-size:14px;

    font-weight:600;

    text-decoration:none;

    transition:.2s;

}

.tutorial-button:hover{

    background:#EEF5FF;

    border-color:#324C73;

}

.integration-warning{

    align-self:flex-start;

}

#loadingState,
#successState{

    width:100%;

}

/* ==========================================
   Success State
========================================== */

.success-metrics{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

    margin:28px 0;

}

.metric-card{

    background:#F8FAFC;

    border:1px solid #E4E7EC;

    border-radius:16px;

    padding:22px;

    text-align:center;

    transition:.2s;

}

.metric-card:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.metric-icon{

    font-size:28px;

    margin-bottom:8px;

}

.metric-number{

    font-size:36px;

    font-weight:700;

    color:#324C73;

    line-height:1;

}

.metric-label{

    margin-top:8px;

    color:#667085;

    font-size:15px;

    font-weight:600;

}

.last-sale{

    margin:24px 0;

    padding:18px;

    background:#F9FAFB;

    border:1px solid #EAECF0;

    border-radius:14px;

    text-align:center;

}

.last-sale strong{

    display:block;

    margin-top:8px;

    font-size:18px;

    color:#324C73;

}

/* ===== Login ===== */

/* ===== Login ===== */

.login-card{

    display:block;
    width:100%;
    max-width:600px;
    margin:0 auto;
    padding:48px;

}

.login-brand{

    display:flex;
    justify-content:center;
    margin-bottom:32px;

}

.login-logo{

    width:190px;
    max-width:100%;
    height:auto;

}

.login-content{

    width:100%;

}

.login-content h1{

    text-align:center;
    margin-bottom:8px;

}

.login-content .subtitle{

    text-align:center;
    margin-bottom:28px;

}

.forgot-password{

    margin:16px 0 24px;
    text-align:right;

}

.forgot-password a{

    font-size:14px;
    color:#4F46E5;
    text-decoration:none;

}

.forgot-password a:hover{

    text-decoration:underline;

}

.register-link{

    margin-top:24px;
    text-align:center;

}

@media (max-width:700px){

    .login-card{

        padding:32px 24px;

    }

    .login-logo{

        width:160px;

    }

}

.forgot-password{

    margin:16px 0 24px;
    text-align:right;

}

.forgot-password a{

    font-size:14px;
    color:#4F46E5;
    text-decoration:none;

}

.forgot-password a:hover{

    text-decoration:underline;

}

.register-link{

    margin-top:24px;
    text-align:center;

}

@media (max-width:900px){

    .login-card{

        flex-direction:column;
        gap:32px;

    }

    .login-logo{

        width:180px;

    }

}

.password-requirements {
    margin: 0 0 24px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.5;
}

.password-requirements strong {
    display: block;
    margin-bottom: 6px;
    color: #374151;
}

.password-requirements ul {
    margin: 0;
    padding-left: 20px;
}

.interest-success-message {
    margin: 24px 0 30px;
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

.interest-success-message p {
    margin: 0 0 12px;
}

.interest-success-message p:last-child {
    margin-bottom: 0;
}

.interest-home-button {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
}