/* open positions */
.positions .positions-title {
    font-size: 3rem;
    line-height: 1.1;
}
.positions-box {
    border-color: var(--border-color) !important;
}

/* reset the global .swiper-slide rule (border, radius, min-height) */
.positions-swiper .swiper-wrapper {
    align-items: flex-start;          /* cards keep their own height when opened */
}
.positions-swiper .swiper-slide {
    border: none;
    border-radius: 0;
    padding: 0;
    min-height: 0;
    height: auto;
}

/* card */
.position-card {
    background-color: var(--bg);
    border-radius: 2.5rem;
    padding: 1.5rem;
    border-inline-start: 2px solid var(--second);
}
.position-name {
    font-size: 1.6rem;
    line-height: 1.15;
}

/* bullets: li is the parent, the dot is positioned inside it */
.position-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.position-list li {
    position: relative;
    padding-inline-start: 1.2rem;
    margin-bottom: .6rem;
    font-size: .85rem;
    line-height: 1.4;
}
.position-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: .25rem;
    top: .55em;
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    background-color: var(--second);
}

/* buttons */

.btn-details {
    background: none;
    border: none;
    font-size: .8rem;
    padding: 0;
}
.btn-details:hover {
    color: var(--main);
}

/* arrows + dots */
.pos-btn {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: .6rem;
    background-color: var(--main);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .7rem;
    transition: background-color .3s ease;
}
.pos-btn:hover {
    background-color: var(--second);
}
.positions-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    gap: .3rem;
}
.positions-pagination .swiper-pagination-bullet {
    width: .4rem;
    height: .4rem;
    margin: 0 !important;
    background: var(--sec-text);
    opacity: .35;
}
.positions-pagination .swiper-pagination-bullet-active {
    background: var(--main);
    opacity: 1;
}

/* flip the icons in Arabic */
[dir="rtl"] .pos-btn i,
[dir="rtl"] .apply-arrow {
    transform: scaleX(-1);
}
[dir="rtl"] .apply-arrow {
    margin-inline: 0 .5rem !important;
}

@media (max-width: 992px) {
    .positions .positions-title {
        font-size: 2.4rem;
    }
}


/* join form */
.join-form{
    background-color: var(--main);
    border-radius: 4rem;
}
/* total roles pill (header) */
.roles-count {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: 2rem;
    background-color: var(--bg);
    color: var(--main);
    font-size: .85rem;
    font-weight: 500;
    white-space: nowrap;
}
.roles-dot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background-color: #25d366;
    animation: rolesPulse 2s infinite;
}
@keyframes rolesPulse {
    0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6); }
    70%  { box-shadow: 0 0 0 .5rem rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* openings badge (on each card) */
.job-count {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    padding: .25rem .7rem;
    border: 1px solid var(--second);
    border-radius: 2rem;
    background-color: var(--white);
    color: var(--main);
    font-size: .75rem;
    font-weight: 500;
    white-space: nowrap;
}
.job-count i {
    color: var(--second);
    font-size: .7rem;
}

/* empty state */
.positions-empty {
    max-width: 36rem;
    margin-inline: auto;
    padding: 2.5rem 1rem 3rem;
}
.empty-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 6rem;
    height: 6rem;
    margin: 0 auto 2.5rem;
    border-radius: 50%;
    background-color: var(--bg);
    color: var(--second);
    font-size: 2rem;
    animation: emptyFloat 4s ease-in-out infinite;
}
.empty-icon::before,
.empty-icon::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.empty-icon::before {                       /* dashed ring that slowly rotates */
    inset: -.9rem;
    border: 1px dashed rgba(48, 139, 210, .5);
    animation: emptySpin 20s linear infinite;
}
.empty-icon::after {                        /* soft outer ring */
    inset: -1.9rem;
    border: 1px solid var(--bg);
}
@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-.5rem); }
}
@keyframes emptySpin {
    to { transform: rotate(360deg); }
}

/* the join section is a scroll target below the sticky navbar */
.join-form {
    scroll-margin-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
    .roles-dot, .empty-icon, .empty-icon::before {
        animation: none;
    }
}