/* ======================== */
/* Send Bar (desktop/mobile)*/
/* ======================== */

.sbar{
    /* Tokens */
    --sbar-width: 93%;
    --sbar-max-w: 980px;
    --sbar-min-h: 72px;
    --sbar-radius: 9999px;
    --sbar-gap: 16px;

    --sbar-text: #111827;
    --sbar-bg: radial-gradient(ellipse 189% 156% at 97% 15%, #ffffff 0%, #24d3a7 36%, #2d84da 51%, #01509e 100%);
    --sbar-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5),
    inset 0 -2px 2px rgba(255, 255, 255, 0.5);

    --sbar-btn-grad: linear-gradient(180deg,#2390E6 0%, #127fe1 100%);
    --sbar-btn-text: #fff;

    position: relative;
    box-sizing: border-box;
    width: var(--sbar-width);
    max-width: var(--sbar-max-w);
    min-height: var(--sbar-min-h);
    margin-inline: auto;
    background: white;
    border-radius: var(--sbar-radius);
    display: flex;
    align-items: center;
    gap: var(--sbar-gap);
    padding: 10px 14px 10px 10px; /* بالا راست پایین چپ */
    overflow: hidden;
    backdrop-filter: blur(4px);
    -webkit-tap-highlight-color: transparent;
    border: 1px solid white;
}

.sbar::after{
    content: "";
    position: absolute;
    bottom: -136%;
    left: -5%;
    background: var(--sbar-bg);
    z-index: -9;
    width: 408px;
    height: 148px;
    border-radius: 266.62px;
    filter: blur(29.33px);
    box-shadow: inset 0 7.62px 7.62px rgba(255, 255, 255, 0.5), inset 0 -7.62px 7.62px rgba(255, 255, 255, 0.5);
    border: 3.81px solid #FFFFFF63;
}

.sbar::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    box-shadow: var(--sbar-shadow);
}

.sbar__gradient{
    position:absolute; inset:0; pointer-events:none;
    background:
        radial-gradient(500px 180px at 85% 50%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 70%),
        radial-gradient(240px 140px at 15% 10%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 70%);
    mix-blend-mode: screen;
}

.sbar__input-wrap{
    flex: 1 1 auto; min-width: 0;
    padding-inline: 10px 0;
    z-index: 1;
}

.sbar__input{
    width: 100%;
    height: 48px;
    border: none; outline: none; background: transparent;
    font-size: 1.05rem; font-weight: 600; color: var(--sbar-text);
}

.sbar__input::placeholder{ color:#0f172a; opacity:.6; font-weight:500; }

/* Button (desktop default) */
.sbar__btn{
    z-index:1;
    display: inline-flex; align-items:center; justify-content:center;
    padding: 14px 26px;
    background: var(--sbar-btn-grad);
    color: var(--sbar-btn-text);
    border: none; border-radius: 9999px;
    font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 18px rgba(18,128,226,.3), inset 0 1px 0 rgba(255,255,255,.4);
    transition: transform .15s ease, opacity .2s ease;
}

.sbar__btn:hover{ opacity:.94; }

.sbar__btn-text{ display: inline; }
.sbar__btn-icon{ display: none; }

/* ============== Mobile ============== */
@media (max-width: 640px){
    .sbar{
        --sbar-min-h: 40px;
        --sbar-width: 96%;
        padding: 18px 22px;
        font-size: 1.1rem;
        max-height: 60px;
    }

    .sbar__input{
        height: auto; min-height: 56px;
        font-size: 14px; font-weight: 600;
    }

    /* دکمه به حالت دایره‌ای بزرگ با رینگ سفید */
    .sbar__btn{
        position: absolute;
        left: 3px;
        top: 50%;
        transform: translateY(-50%);
        width: 54px;
        height: 54px;
        padding: 0;
        border-radius: 9999px;
        box-shadow: 0 16px 40px rgba(18, 128, 226, .35), inset 0 1px 0 rgba(255, 255, 255, .45);
        border: 2px solid #FFFFFF17;
    }

    .sbar__btn-text{ display: none; }
    .sbar__btn-icon{
        display:flex; align-items:center; justify-content:center;
    }
}