.sa-card{

    background:#2F4156;
    border-radius:20px;
    padding:18px 12px;

    width:calc(100% - 24px);
    max-width:760px;

    margin:12px auto;

    box-shadow:0 8px 30px rgba(0,0,0,.06);
}

.sa-card h2{
    margin:0 0 4px;
    text-align:center;
    font-size:20px;
    font-weight:600;
    color:#ddd;
}

.sa-note{
    text-align:center;
    color:#ccc;
    font-size:15px;
    line-height:1.5;
    margin-bottom:10px;
}

/* ======================
   SWITCH
====================== */

.sa-switch{
    display:flex;
    margin-bottom:0;
}

.sa-switch-btn{

    flex:1;

    height:32px;

    border:none;

    background:#2F4156;

    color:#ffc312;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

    border-radius:12px 12px 0 0;border-bottom: 2px solid #111c29!important;border-top: 0px solid #111c29!important;border-left: 0px solid #111c29!important;border-right: 0px solid #111c29!important;

}

.sa-switch-btn.active{

    background:#ffffff;
border: 2px solid #111c29!important;border-bottom: 0!important;
    color:#050505;

}

/* ======================
   SELECT
====================== */
.sa-select-city{

    height:60px;

    background:#ffffff;

    border-radius:0 0 12px 12px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 22px;

    margin-bottom:0px;

    cursor:pointer;

    transition:.18s;border-bottom: 0px solid #111c29!important;border-top: 0px solid #111c29!important;border-left: 2px solid #111c29!important;border-right: 2px solid #111c29!important;

}
.sa-select{

    height:56px;

    background:#ffffff;

    border-radius:0 0 0px 0px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 22px;

    margin-bottom:0px;

    cursor:pointer;

    transition:.18s;border-bottom: 0px solid #111c29!important;border-top: 0px solid #111c29!important;border-left: 2px solid #111c29!important;border-right: 2px solid #111c29!important;

}

.sa-select:hover{

    background:#ECEFF3;

}

.sa-label{

    font-size:13px;

    color:#888;

    margin-bottom:2px;

}

.sa-value{

    font-size:16px;

    font-weight:500;

    color:#050505;

}

.sa-select svg{

    width:22px;

    height:22px;

    color:#666;

}

/* ======================
   TEXTAREA
====================== */

.sa-textarea{

    width:100%;

    min-height:190px;

    border:2px solid #111c29;

    border-radius:12px;

    padding:18px;

    font-size:17px;

    line-height:1.6;

    resize:vertical;

    outline:none;

    box-sizing:border-box;

    transition:.2s;

    margin-bottom:2px;

}

.sa-textarea:focus{

    border-color:#0562df;

    box-shadow:0 0 0 4px rgba(15,91,255,.10);

}

/* ======================
   FILE
====================== */

#images{

    display:none;

}

.sa-upload-btn{

    height:50px;

    border:2px solid #111c29;

    border-radius:50px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    font-weight:700;

    color:#0562df;
background: #ffffff;
    cursor:pointer;

    transition:.2s;

}

.sa-upload-btn:hover{

    background:#F3F7FF;

}

.sa-file-name{

    text-align:center;

    color:#ddd;

    font-size:15px;

    margin:14px 0 18px;

}
#file-name{
    margin-top:2px;
    font-size:18px;
    color:#fff5d7;
    text-align:center;
}
/* ======================
   BUTTON
====================== */

.sa-submit-btn{

    width:100%;

    height:46px;

    border:none;

    border-radius:50px;

        background:#003e7d;

    color:#ffc928;

    font-size:18px;

    font-weight:700;
border: 2px solid #111c29!important;
    cursor:pointer;

    transition:.2s;

}

.sa-submit-btn:hover{

    background:#2d6be9;

}

/* ======================
   ERROR
====================== */

.error-box{

    background:#FFF1F2;

    border:1px solid #FECACA;

    color:#B91C1C;

    border-radius:14px;

    padding:14px;

    margin-bottom:18px;

}

.error-box p{

    margin:6px 0;

}

  /* ===================================
   SUBMIT AD - PART 2
   Bottom Sheet
=================================== */

.sa-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    transition:.25s;
    z-index:9998;
}

.sa-overlay.show{
    opacity:1;
    visibility:visible;
}

/* ======================
   SHEET
====================== */

.sa-sheet{
    position:fixed;
    left:0;
    right:0;
    bottom:0px;
    background:#fff;
    border-radius:22px 22px 0 0;
    transform:translateY(100%);
    transition:transform .28s cubic-bezier(.22,.9,.32,1);
    z-index:9999;
    max-height:90vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.sa-sheet.show{
    transform:translateY(0);
}


/* ======================
   HEADER
====================== */

.sa-header{
    height:56px;
    display:flex;
  margin-left:18px;
    justify-content:left;
    align-items:center;
    border-bottom:1px solid #ECECEC;
    position:relative;
}

.sa-header h3{
    margin:0;
    font-size:20px;
    font-weight:700;
    color:#050505;
}

.sa-close{
    position:absolute;
    right:14px;
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:#E4E6EB;
    color:#050505;
    font-size:18px;
    cursor:pointer;
    transition:.15s;
}

.sa-close:hover{
    background:#D8DADF;
}

/* ======================
   BODY
====================== */

.sa-body{
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:25px;
}

.sa-body::-webkit-scrollbar{
    width:6px;
}

.sa-body::-webkit-scrollbar-thumb{
    background:#D0D0D0;
    border-radius:999px;
}

/* ======================
   ITEM
====================== */

.sa-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    border-bottom:1px solid #F0F2F5;
    cursor:pointer;
    transition:.15s;
    user-select:none;
}

.sa-item:hover{
    background:#F5F7FA;
}

.sa-item:active{
    background:#EAF2FF;
}

.sa-item span{
    font-size:17px;
    font-weight:500;
    color:#050505;
}

.sa-item.active{
    background:#EAF2FF;
}

.sa-item.active span{
    color:#0562df;
    font-weight:700;
}

.sa-item.active::after{
    content:"✓";
    color:#0562df;
    font-size:20px;
    font-weight:bold;
}


.sa-select-input{

width:100%;

border:none;

background:transparent;

font-size:16px;

padding:6px 0;

outline:none;

}
.button-submit-ad{
    display:flex;
    width:100%;
    height:58px;
    margin-top:12px;
}

.button-submit-ad-upload{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    background:#f5efeb;
    color:#1063d1;

    border:2px solid #111c29;
    border-right:none;

    border-radius:40px 0 0 40px;

    font-size:20px;
    font-weight:700;

    cursor:pointer;
}

.button-submit-ad-upload svg{
    width:28px;
    height:28px;
}

.button-submit-ad-send{
    width:50%;

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

    background:#213043;
    color:#FFC928;

    border:2px solid #111c29;

    border-radius:0 40px 40px 0;

    cursor:pointer;
    transition:.2s;
}

.button-submit-ad-send:active{
    transform:scale(.97);
}

.button-submit-ad-send svg{
    width:34px;
    height:34px;
}
.button-submit-ad-info{
    margin-top:10px;
    text-align:center;
    font-size:14px;
    color:#666;
}

.photo-preview{
    display:flex;
    gap:8px;
    margin-top:12px;
    flex-wrap:wrap;
}