/* Homepage «شركاء النجاح» (owner design, 2026-10-17): partner logos on the night Sadu ground of
   section 2, opened by the woven band (flipped so its teeth bite up into the white listings section).
   Scoped under #success-partners. */

#success-partners.aqsp {
    --sp-night: #1d1540;
    --sp-g: #f5b942;
    position: relative;
    z-index: 2;
    isolation: isolate;
    background-color: var(--sp-night);
    color: #fff;
}
#success-partners.aqsp[hidden],
#success-partners .aqsp__group[hidden] { display: none !important; }
#success-partners.aqsp::before,
#success-partners.aqsp::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
#success-partners.aqsp::before {
    background: url("/images/Home/sadu-pattern.svg") 0 0 / 100px 160px repeat;
    opacity: 0.2;
}
/* As on «من نحن» (owner, 2026-10-19): the weave stays at the edges, the middle calmed in the same night purple. */
#success-partners.aqsp::after {
    background:
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(245, 185, 66, 0.08) 0, rgba(245, 185, 66, 0) 100%),
        linear-gradient(90deg, rgba(29, 21, 64, 0) 0, rgba(29, 21, 64, 0.85) 18%, rgba(29, 21, 64, 0.85) 82%, rgba(29, 21, 64, 0) 100%);
}

/* The same ribbon that closes section 2, turned over: weave inside, teeth hanging up over the section above. */
#success-partners .aqsp__band {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    z-index: 3;
    height: 80px;
    background: url("/images/Home/sadu-band.svg") 0 0 / 120px 80px repeat-x;
    transform: scaleY(-1);
    pointer-events: none;
}
/* …and the right way up at the bottom, biting down into the white help section below. */
#success-partners .aqsp__band--bottom {
    top: auto;
    bottom: -15px;
    transform: none;
}

#success-partners .aqsp__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 136px 24px 150px; /* room for the bottom band */
}

/* ---------- Head ---------- */
#success-partners .aqsp__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
#success-partners .aqsp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid rgba(255, 210, 166, 0.38);
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.06);
    color: #f8ebdd;
    font-size: 13px !important;
    font-weight: 700;
}
#success-partners .aqsp__eyebrow svg { width: 14px; height: 14px; color: #ffc98b; }
#success-partners .aqsp__head h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(28px, 3.4vw, 42px) !important;
    font-weight: 800 !important;
    line-height: 1.3;
}
/* Night ground: white word over a hand-drawn gold brush stroke (as across the site). */
#success-partners .aqsp__head h2 span {
    padding: 0 0 0.34em; /* the brush sits this far under the letters */
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15C60 6 140 4 296 9' fill='none' stroke='%23f5b942' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M30 20C110 13 190 12 280 16' fill='none' stroke='%23f5b942' stroke-width='4' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center bottom / 100% 0.4em no-repeat;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: #fff;
    -webkit-text-fill-color: #fff;
    filter: none;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
#success-partners .aqsp__lead {
    max-width: 560px;
    color: #c9bfe6;
    font-size: 17px !important;
    line-height: 1.8;
}

/* ---------- Logos ---------- */
#success-partners .aqsp__logos { margin-top: 44px; }
/* «شركاء معتمدون» then «شركاء النجاح»: two heading + strip groups in the one section, parted by a gold
   diamond rule that only shows while both groups do. */
#success-partners .aqsp__divider {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 860px;
    margin: 72px auto;
}
#success-partners .aqsp__divider::before,
#success-partners .aqsp__divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(245, 185, 66, 0), rgba(245, 185, 66, 0.55));
}
#success-partners .aqsp__divider::after { transform: scaleX(-1); }
#success-partners .aqsp__divider svg { flex: none; width: 80px; height: 24px; fill: var(--sp-g); }
#success-partners .aqsp__divider .aqsp__divider-ring { fill: none; stroke: var(--sp-g); stroke-width: 2; }
#success-partners #aqsp-certified[hidden] + .aqsp__divider,
#success-partners .aqsp__divider:has(+ .aqsp__group[hidden]) { display: none; }

/* Static row: centred tiles that wrap. */
#success-partners .aqsp__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
}

/* Loop: a horizontal scroller holding two copies of the row. home-success-partners.js drifts it slowly
   and wraps by exactly one copy's width, so the seam never shows; visitors can also swipe, drag or use a
   trackpad to move it either way. Forced LTR so the maths is the same in both languages (logos carry
   no reading order). It stays inside the section's width with its two ends hidden (owner 2026-10-29). */
#success-partners .aqsp__marquee {
    direction: ltr;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    padding: 12px 0;
}
#success-partners .aqsp__marquee::-webkit-scrollbar { display: none; }
/* The ends sink into the section's own night ground, not grey: a night-coloured veil over each end
   instead of a mask, which faded the white tiles to grey (owner 2026-10-29). */
#success-partners .aqsp__logos:has(> .aqsp__marquee) { position: relative; }
#success-partners .aqsp__logos:has(> .aqsp__marquee)::before,
#success-partners .aqsp__logos:has(> .aqsp__marquee)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 96px;
    pointer-events: none;
}
#success-partners .aqsp__logos:has(> .aqsp__marquee)::before {
    left: 0;
    background: linear-gradient(90deg, var(--sp-night) 10%, rgba(29, 21, 64, 0));
}
#success-partners .aqsp__logos:has(> .aqsp__marquee)::after {
    right: 0;
    background: linear-gradient(270deg, var(--sp-night) 10%, rgba(29, 21, 64, 0));
}
#success-partners .aqsp__marquee.is-dragging { cursor: grabbing; user-select: none; }
#success-partners .aqsp__marquee img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
#success-partners .aqsp__track {
    display: flex;
    gap: 18px;
    width: max-content;
    direction: ltr;
}
#success-partners .aqsp__marquee + .aqsp__marquee { margin-top: 6px; }

#success-partners .aqsp__tile {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 120px;
    padding: 18px 22px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px -12px rgba(8, 4, 24, 0.7);
    text-decoration: none;
    transition: transform 0.25s, box-shadow 0.25s;
}
#success-partners a.aqsp__tile:hover,
#success-partners a.aqsp__tile:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 0 0 3px rgba(245, 185, 66, 0.7), 0 18px 40px -12px rgba(8, 4, 24, 0.8);
    outline: none;
}
#success-partners .aqsp__tile img {
    display: block;
    width: 100%;
    height: 72px;
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
    object-position: center;
}
/* The partner's name where its logo failed to load (and only that: not every span in a card). */
#success-partners .aqsp__tile-fallback {
    color: #3b2a63;
    font-size: 15px !important;
    font-weight: 800;
    text-align: center;
}

/* ---------- «مزودو خدمة موثقون ومعتمدون» (owner 2026-10-31, second round) ---------- */
/* The brush stays under «موثقون ومعتمدون» as one piece when the title wraps on a phone. */
#success-partners #aqsp-certified-title span { white-space: nowrap; }
#success-partners .aqsp__providers { margin-top: 44px; }
/* One row, never two. Cards that fit sit still and centred; the script switches to the loop (.aqsp__marquee, as
   the «شركاء النجاح» strip) when they do not, or to a hand scroller with reduced motion. */
#success-partners .aqsp__cards {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
    padding: 12px 0;
}
#success-partners .aqsp__cards--scroll {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}
#success-partners .aqsp__cards--scroll > .aqsp__card { scroll-snap-align: center; }
#success-partners .aqsp__providers .aqsp__track { gap: 20px; }
/* The loop's ends sink into the night ground, as the logo strip's. */
#success-partners .aqsp__providers:has(> .aqsp__marquee) { position: relative; }
#success-partners .aqsp__providers:has(> .aqsp__marquee)::before,
#success-partners .aqsp__providers:has(> .aqsp__marquee)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 96px;
    pointer-events: none;
}
#success-partners .aqsp__providers:has(> .aqsp__marquee)::before {
    left: 0;
    background: linear-gradient(90deg, var(--sp-night) 10%, rgba(29, 21, 64, 0));
}
#success-partners .aqsp__providers:has(> .aqsp__marquee)::after {
    right: 0;
    background: linear-gradient(270deg, var(--sp-night) 10%, rgba(29, 21, 64, 0));
}

/* Every card the same size, everything centred on one axis. The loop forces its row LTR; the card keeps the
   page's own direction. */
#success-partners .aqsp__card {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 260px;
    margin: 0;
    padding: 20px 18px 18px;
    border: 1px solid #e8e4f1;
    border-radius: 20px;
    background: #fff;
    color: #1d1540;
    text-align: center;
    box-shadow: 0 14px 34px -18px rgba(8, 4, 24, 0.6);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
#success-partners[dir="rtl"] .aqsp__card { direction: rtl; }
#success-partners[dir="ltr"] .aqsp__card { direction: ltr; }
#success-partners .aqsp__card:hover,
#success-partners .aqsp__card:focus-within {
    border-color: var(--sp-g);
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -18px rgba(8, 4, 24, 0.75);
}
/* The whole logo on a light tile, never cropped. Multiply melts a logo's own white box into the tile. */
#success-partners .aqsp__card-logo {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    padding: 10px;
    border: 1px solid #efecf5;
    border-radius: 16px;
    background: #f7f5fb;
    overflow: hidden;
}
#success-partners .aqsp__card-logo img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    mix-blend-mode: multiply;
}
#success-partners .aqsp__card-nologo { display: flex; color: #b3abc9; }
#success-partners .aqsp__card-nologo svg { width: 40px; height: 40px; }
/* Two lines at most, and always two lines tall, so every card lines up. The global type sheet sizes every card
   h3 with !important; the name keeps its own size here. */
#success-partners .aqsp__card-name {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(2 * 1.45em);
    margin: 4px 0 0;
    color: #1d1540;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}
#success-partners .aqsp__card-name span {
    display: -webkit-box;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
#success-partners .aqsp__card-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 99px;
    background: #e7f6ec;
    color: #1f7a44;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
}
#success-partners .aqsp__card-badge svg { width: 14px; height: 14px; }
/* The provider type as a tag beside «موثق ومعتمد», same shape, the platform purple (owner 2026-10-31). */
/* Owner 2026-10-31: the type above, «موثق ومعتمد» under it, the same two lines in every card. */
#success-partners .aqsp__card-tags {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}
#success-partners .aqsp__card-tags > .aqsp__card-badge { flex: none; }
#success-partners .aqsp__card-type.is-empty { visibility: hidden; }
#success-partners .aqsp__card-type {
    display: inline-block;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 2px 10px;
    border-radius: 99px;
    background: #efeaf8;
    color: #4b3a7a;
    font-size: 12px !important;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Five stars, the gold layer cut to the rating from the start side, then «4.8 (12)». */
#success-partners .aqsp__card-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #1d1540;
    font-size: 14px !important;
    line-height: 1.5;
}
#success-partners .aqsp__card-rating b { font-weight: 700; }
#success-partners .aqsp__card-count { color: #7d7598; }
#success-partners .aqsp__stars { position: relative; display: inline-flex; flex: none; }
#success-partners .aqsp__stars-base,
#success-partners .aqsp__stars-fill { display: inline-flex; gap: 2px; white-space: nowrap; }
#success-partners .aqsp__stars-base { color: #dcd6ea; }
#success-partners .aqsp__stars-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 0;
    overflow: hidden;
    color: #e9a92a;
}
#success-partners .aqsp__stars svg { flex: none; width: 16px; height: 16px; }
#success-partners .aqsp__card-joined {
    margin: 0;
    color: #5d5478;
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
}
/* A full-width secondary button at the foot of the card. */
#success-partners .aqsp__card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: auto;
    padding: 0 14px;
    border: 1.5px solid #ddd6ec;
    border-radius: 12px;
    background: #fff;
    color: #3b2a63;
    font-size: 14px !important;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
#success-partners .aqsp__card-link span { color: inherit; }
#success-partners .aqsp__card-link svg { flex: none; width: 16px; height: 16px; }
#success-partners[dir="ltr"] .aqsp__card-link svg { transform: scaleX(-1); }
#success-partners .aqsp__card:hover .aqsp__card-link { border-color: #4c3f72; }
#success-partners .aqsp__card-link:hover,
#success-partners .aqsp__card-link:focus-visible {
    border-color: #4c3f72;
    background: #4c3f72;
    color: #fff;
}
#success-partners .aqsp__card-link:focus-visible { outline: 3px solid var(--sp-g); outline-offset: 3px; }

/* ---------- Phone ---------- */
@media (max-width: 640px) {
    #success-partners .aqsp__inner { padding: 110px 16px 120px; }
    #success-partners .aqsp__logos { margin-top: 32px; }
    #success-partners .aqsp__tile { width: 156px; height: 96px; padding: 14px; }
    #success-partners .aqsp__tile img { height: 56px; max-height: 56px; }
    #success-partners .aqsp__providers { margin-top: 32px; }
    #success-partners .aqsp__cards,
    #success-partners .aqsp__providers .aqsp__track { gap: 14px; }
    #success-partners .aqsp__card { width: 240px; padding: 18px 16px 16px; }
    #success-partners .aqsp__providers:has(> .aqsp__marquee)::before,
    #success-partners .aqsp__providers:has(> .aqsp__marquee)::after { width: 32px; }
    #success-partners .aqsp__divider { margin: 52px auto; }
    #success-partners .aqsp__grid { gap: 12px; }
    #success-partners .aqsp__track { gap: 12px; }
    #success-partners .aqsp__logos:has(> .aqsp__marquee)::before,
    #success-partners .aqsp__logos:has(> .aqsp__marquee)::after { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    #success-partners .aqsp__track { flex-wrap: wrap; justify-content: center; width: auto; }
    #success-partners .aqsp__card:hover,
    #success-partners .aqsp__card:focus-within { transform: none; }
}