/* =====================================================
   DORSA SERVICES SECTION  (RTL / Persian)
   ===================================================== */

.dorsa-services{
    --primary:#5188F7;
    --primary-strong:#188AFF;
    --bg-soft:#F8FAFC;
    --border:#E3E8EF;
    --border-soft:#E6E9EE;
    --text:#202939;
    --text-2:#262626;
    --muted:#4B5565;
    --muted-2:#697586;
    --muted-3:#666666;

    display:block;
    width:100%;
    box-sizing:border-box;
    direction:rtl;
    font-family:"Dana", inherit, sans-serif;
    color:var(--text);
    padding:40px 24px;
}
.dorsa-services *{box-sizing:border-box}

/* ---------------------- TAB BAR (DESKTOP) ---------------------- */

.ds-tabbar-wrap{
    width:100%;
    margin:0 auto 12px;
}
.ds-tabbar{
    display:flex;
    align-items:stretch;
    justify-content:flex-end;
    gap:8px;
    width:100%;
    background:var(--bg-soft);
    border:1px solid var(--border);
    border-radius:12px;
    padding:8px;
}
.ds-tab{
    flex:1 0 0;
    min-width:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:16px;
    border:1px solid transparent;
    background:transparent;
    border-radius:8px;
    cursor:pointer;
    font-family:inherit;
    font-size:14px;
    font-weight:400;
    color:#202939;
    line-height:1.5;
    white-space:nowrap;
    transition:color .25s ease, background .25s ease, border-color .25s ease;
}
.ds-tab .ds-ico{
    width:20px;
    height:20px;
    flex-shrink:0;
    background-color:currentColor;
    -webkit-mask-image:var(--ds-icon);
    mask-image:var(--ds-icon);
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
}
.ds-tab .ds-ico img{
    display:none;
}

.ds-tab:hover{
    color:var(--primary);
}

.ds-tab.active{
    background:#fff;
    border-color:var(--border);
    color:var(--primary);
    font-weight:500;
}

/* mobile dropdown header (hidden on desktop) */
.ds-mobile-head{display:none}

/* ---------------------- CONTENT / SLIDER ---------------------- */

.ds-content{display:none}
.ds-content.active{display:block; animation:dsFade .25s ease}

@keyframes dsFade{
    from{opacity:0; transform:translateY(4px)}
    to  {opacity:1; transform:translateY(0)}
}

.ds-slider{
    position:relative;
    padding:8px 0 16px;
    width:100%;
}
.ds-track{
    display:flex;
    gap:24px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    padding:16px 24px 24px;
    align-items:stretch;
    justify-content:safe center;
}
.ds-track::-webkit-scrollbar{display:none}
.ds-track{ -ms-overflow-style:none; scrollbar-width:none }

.ds-slide{
    flex:0 0 calc(33.333% - 16px);
    scroll-snap-align:center;
    min-width:0;
    display:flex;
}

/* tablet: 2 cards visible */
@media(max-width:1100px){
    .ds-track{ gap:18px; padding:16px 16px 24px }
    .ds-slide{ flex:0 0 calc(50% - 9px) }
    .ds-card{ padding:20px }
}

/* ---------------------- CARD ---------------------- */

.ds-card{
    position:relative;
    width:100%;
    min-height:170px;
    background:#fff;
    border:1px solid var(--border-soft);
    border-radius:18px;
    padding:20px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:14px;
    text-align:right;
    transition:.3s ease;
}

.ds-card-text{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:stretch;
    flex:1;
}

.ds-card h3{
    font-size:16px;
    font-weight:500;
    color:var(--text-2);
    margin:0;
    line-height:1.5;
}
.ds-card p{
    font-size:14px;
    font-weight:400;
    color:var(--muted-3);
    margin:0;
    line-height:1.65;
    text-align:justify;
}

/* Hover — scale and highlight only while hovered */
.ds-card:hover{
    border-color:var(--primary-strong);
    border-width:1.5px;
    box-shadow:0 4px 22px rgba(81,136,247,.20);
    transform:scale(1.05);
    z-index:2;
}

/* ---------------------- CARD ACTIONS ---------------------- */

.ds-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex-shrink:0;
    width:100%;
    direction:ltr;
}

.ds-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 14px;
    border-radius:8px;
    font-family:inherit;
    font-size:14px;
    font-weight:500;
    line-height:1.5;
    text-decoration:none;
    cursor:pointer;
    border:0;
    box-shadow:none;
    transition:color .2s ease, background .2s ease;
    white-space:nowrap;
}
.ds-btn-primary{
    background:#000;
    color:#fff;
    flex-shrink:0;
    padding:10px 28px;
}
.ds-btn-primary:hover{
    background:#1a1a1a;
    color:#fff;
}

.ds-btn-ghost{
    background:transparent;
    color:var(--muted);
    flex-shrink:0;
}
.ds-btn-ghost:hover{
    color:var(--primary);
    background:rgba(81,136,247,.08);
}

.ds-btn-ghost .ds-ico{
    width:20px; height:20px;
    color:currentColor;
}
.ds-btn-ghost .ds-ico svg,
.ds-btn-ghost .ds-ico img{
    width:100%;
    height:100%;
    display:block;
}

/* ---------------------- NAV ARROWS ---------------------- */

.ds-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:50%;
    background:#fff;
    border:1px solid var(--border);
    box-shadow:0 4px 14px rgba(15,23,42,.08);
    color:var(--text);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:4;
    transition:.2s ease;
    padding:0;
}
.ds-nav:hover{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
    box-shadow:0 6px 18px rgba(81,136,247,.30);
}
.ds-nav svg{ width:20px; height:20px; display:block }

.ds-nav-prev{ right:12px }
.ds-nav-next{ left:12px }

.ds-nav[disabled]{
    opacity:0;
    pointer-events:none;
    transform:translateY(-50%) scale(.85);
}

/* ---------------------- MOBILE ---------------------- */

@media(max-width:768px){

    .dorsa-services{ padding:24px 16px }

    .ds-tabbar{ display:none }

    .ds-mobile-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        width:100%;
        padding:14px 16px;
        background:#fff;
        border:1px solid var(--border);
        border-radius:12px;
        font-family:inherit;
        font-size:15px;
        font-weight:600;
        color:var(--text);
        cursor:pointer;
    }
    .ds-mobile-head .mh-right{
        display:flex;
        align-items:center;
        gap:10px;
        color:#202939;
    }
    .ds-mobile-head .mh-ico{
        display:inline-flex;
        flex-shrink:0;
    }
    .ds-mobile-head .mh-ico .ds-ico{
        width:20px;
        height:20px;
    }
    .ds-mobile-head .mh-chev{
        width:18px; height:18px; color:#9ca3af;
        transition:.25s;
        flex-shrink:0;
    }
    .dorsa-services.is-open .mh-chev{ transform:rotate(180deg) }

    .ds-tabbar-wrap{
        position:relative;
        margin-bottom:8px;
    }

    .dorsa-services.is-open .ds-tabbar{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        padding:8px;
        background:#fff;
        border:1px solid var(--border);
        border-radius:12px;
        position:absolute;
        top:100%; left:0; right:0;
        margin-top:6px;
        z-index:10;
        box-shadow:0 8px 24px rgba(15,23,42,.08);
    }
    .dorsa-services.is-open .ds-tab{
        flex:0 0 auto;
        justify-content:flex-start;
        padding:12px;
        border-radius:8px;
        font-size:14px;
    }
    .dorsa-services.is-open .ds-tab.active{
        background:#EAF0FF;
        border-color:transparent;
    }

    /* track: stacked cards, no slider */
    .ds-slider{ padding:0 }
    .ds-nav{ display:none }
    .ds-track{
        flex-direction:column;
        gap:12px;
        padding:0;
        overflow:visible;
        scroll-snap-type:none;
    }
    .ds-slide{ flex:0 0 100%; min-width:0; width:100% }

    .ds-card{
        padding:20px;
        gap:12px;
        border-radius:12px;
        border-color:var(--border-soft);
        min-height:auto;
    }
    .ds-card h3{
        font-size:15px;
        font-weight:700;
        color:#000;
        line-height:1.6;
    }
    .ds-card p{
        font-size:13px;
        line-height:1.6;
        text-align:justify;
        color:var(--muted-3);
        display:block;
    }
    .ds-card:hover{
        border-color:var(--primary-strong);
        border-width:1px;
        box-shadow:none;
        transform:none;
    }

    /* mobile: both action links visible */
    .ds-actions{
        justify-content:space-between;
        margin-top:4px;
        direction:ltr;
    }
    .ds-btn{
        padding:10px 14px;
        font-size:14px;
        font-weight:500;
        border-radius:8px;
        box-shadow:none;
    }
    .ds-btn-ghost{ display:inline-flex }
    .ds-btn-primary{
        width:auto;
        gap:8px;
        padding:10px 24px;
    }
}