/* ===== Writers Section ===== */
.writerSection {
    padding: 80px 0;
}

/* ===== Section Head ===== */
.writerSecHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 57px;
}
.writerSecHead .sectionHeadwrap {
    max-width: 747px;
    text-align: left;
    margin: 0;
}

/* ===== Swiper Nav Buttons ===== */
.writerSwiperNav {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.swiper-button-prev-writer,
.swiper-button-next-writer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--color-border-light, #D8E7FF);
    color: var(--color-primary, #3A66D4);
    cursor: pointer;
    background: transparent;
    overflow: hidden;
    transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.swiper-button-prev-writer:hover,
.swiper-button-next-writer:hover {
    border-color: var(--color-primary, #3A66D4);
    background: var(--color-primary-lighter, #EEF3FC);
    box-shadow: 0 4px 12px rgba(58,102,212,0.15);
    transform: translateY(-4px) scale(1.02);
}

.swiper-button-prev-writer.swiper-button-disabled,
.swiper-button-next-writer.swiper-button-disabled {
    color: #C4C8D8;
    border-color: #EAECF5;
    cursor: default;
    pointer-events: none;
}

/* ===== Swiper Pagination ===== */
.swiper-pagination-writer {
    margin-top: 32px;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.swiper-pagination-writer .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #C4C4C4;
    opacity: 1;
    border-radius: 100px;
    transition: all 0.3s ease;
}

.swiper-pagination-writer .swiper-pagination-bullet-active {
    background: var(--color-primary);
    width: 20px;
}

.expertsWrapper .swiper-slide {
    padding: 32px 0 10px;
}

/* ===== Writer Card ===== */
.writerCard {
    width: 100%;
    padding: 15px 23px 15px;
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-xl, 16px);
    border: 1px solid var(--color-card-border, #E2E8F0);

    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.writerCard:hover {
    border-color: var(--color-primary, #3A66D4);

    transform: translateY(-6px);
}

/* ===== Badge ===== */
@keyframes badgeShine {
    0%   { left: -100%; }
    100% { left: 150%; }
}

.writerBadge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 0;
    border-radius: var(--radius-full, 100px);
    font-family: var(--font-primary);
    font-weight: var(--fw-semibold);
    font-size: 12px;
    line-height: 100%;
    margin-bottom: 16px;
    position: absolute;
    top: -17px;
    max-width: 140px;
    width: 100%;
    height: 32px;
    justify-content: center;
    border: 1px solid #F8EDC2;
    background: linear-gradient(90deg, #FEF1BD 0%, #FEE996 100%);
    overflow: hidden;
}

.writerBadge::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, hsla(0,0%,100%,0.6), transparent);
    animation: badgeShine 2.5s infinite;
}

.writerBadge::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(../../../images/badge-star.svg) no-repeat center / contain;
}

.badge-top-writer,
.badge-rising-talent,
.badge-rush-expert,
.badge-client-favorite,
.badge-top-10 {
    background: linear-gradient(90deg, #FEF1BD 0%, #FEE996 100%);
    color: #92400E;
}

.badge-rush-expert::before {
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.08829 13C5.91083 12.9994 5.73562 12.9602 5.57479 12.8852C5.31209 12.7682 5.1011 12.5594 4.98143 12.2979C4.86175 12.0364 4.84162 11.7402 4.92479 11.4649L5.77033 8.66669H3.77808C3.52426 8.667 3.27389 8.60784 3.04705 8.49396C2.82021 8.38008 2.6232 8.21465 2.47181 8.01091C2.32042 7.80718 2.21886 7.57082 2.17527 7.32077C2.13168 7.07071 2.14727 6.81393 2.22079 6.57099L3.85879 1.15432C3.95864 0.819287 4.16445 0.525674 4.44534 0.317547C4.72622 0.10942 5.06704 -0.00199422 5.41662 2.70234e-05H7.417C7.64437 0.000217226 7.86831 0.0554536 8.06968 0.161016C8.27106 0.266578 8.44388 0.419327 8.57339 0.606208C8.70289 0.79309 8.78522 1.00855 8.81334 1.23417C8.84146 1.45979 8.81454 1.68887 8.73488 1.90182L7.82325 4.33336H9.20829C9.50353 4.33334 9.7932 4.41375 10.0462 4.56596C10.2992 4.71816 10.5059 4.93642 10.6442 5.19727C10.7824 5.45812 10.847 5.75172 10.831 6.04652C10.815 6.34132 10.719 6.62619 10.5533 6.87053L7.08658 12.4497C6.97942 12.6175 6.8319 12.7558 6.65751 12.852C6.48312 12.9481 6.28742 12.999 6.08829 13Z' fill='%2392400E'/%3E%3C/svg%3E");
}

.badge-client-favorite::before {
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.74889 2C8.18609 2.0083 7.63557 2.15731 7.15292 2.43196C6.67026 2.70662 6.27257 3.09721 6 3.56428C5.72743 3.09721 5.32974 2.70662 4.84708 2.43196C4.36443 2.15731 3.81391 2.0083 3.25111 2C2.35394 2.03697 1.50866 2.4092 0.899949 3.03538C0.291233 3.66155 -0.031442 4.49077 0.00241958 5.34186C0.00241958 7.49724 2.39445 9.85124 4.40065 11.4473C4.84857 11.8043 5.41491 12 6 12C6.58509 12 7.15143 11.8043 7.59935 11.4473C9.60555 9.85124 11.9976 7.49724 11.9976 5.34186C12.0314 4.49077 11.7088 3.66155 11.1001 3.03538C10.4913 2.4092 9.64606 2.03697 8.74889 2Z' fill='%2392400E'/%3E%3C/svg%3E");
}

/* ===== Avatar ===== */
.wc-avatar {
    position: relative;
    width: 90px;
    height: 90px;
    margin: 0 auto 13px;
    flex-shrink: 0;
}

.wc-avatar img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 6px 18px rgba(58,102,212,0.18);
}

.writerskelton {
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #EEEEEE 47.92%, #F6F6F6 60.42%, #EEEEEE 72.92%);
    animation: shine-header 1s 0s infinite linear;
    background-size: 650px;
}

@keyframes shine-header {
    0%   { background-position: 0px; }
    50%  { background-position: 325px; }
    100% { background-position: 630px; }
}

.wc-check {
    position: absolute;
    bottom: 2px;
    right: 2px;
    display: block;
    line-height: 0;
}

/* ===== Writer Initials fallback ===== */
.writerInitials {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-primary);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl, 20px);
    color: var(--color-white);
    background-color: var(--color-primary, #3A66D4);
    text-transform: uppercase;
    line-height: 1;
}

/* ===== Name ===== */
.wc-name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-heading, inherit);
    font-size: 20px;
    font-weight: 500;
    color: var(--color-heading, #1F2937);
    margin: 0 0 7px;
    padding: 0;
    line-height: 100%;
}

.wc-name .verifyBadge {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===== Degree ===== */
.wc-degree {
    display: inline-block;
    background: var(--color-primary-lighter, #EEF3FC);
    color: var(--color-primary, #3A66D4);
    font-size: 14px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 20px;
    margin-bottom: 18px;
}

/* ===== Stats ===== */
.wc-stats {
    display: flex;
    width: calc(100% + 40px);
    margin-left: -20px;
    margin-right: -20px;
    border-top: 1px solid #E4F2FF;
    border-bottom: 1px solid #E4F2FF;
    padding: 12px;
    margin-bottom: 16px;
}

.wc-stat {
    flex: 1;
    text-align: center;
    padding: 0 6px;
    border-right: 1px solid #E4F2FF;
}

.wc-stat:last-child {
    border-right: none;
}

.wc-stat strong {
    display: block;
    font-size: 22px;
    font-weight: 500;
    color: var(--color-heading);
    line-height: 100%;
    margin-bottom: 3px;
}

.wc-stat span {
    display: block;
    font-size: 14px;
    color: var(--color-text-secondary, #5F6C72);
    line-height: 1.3;
}

/* ===== Bio ===== */
.wc-bio {
       font-size: 14px;
    line-height: 180%;
    color: var(--color-text-secondary);
    text-align: left;
    margin: 0 0 15px;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Competencies ===== */
.wc-competencies {
    width: 100%;
    text-align: left;
    margin-bottom: 14px;
}

.wc-comp-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-heading, #1F2937);
    margin: 0 0 12px;
    padding: 0;
    line-height: 100%;
}

.wc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
}

.wc-tags span {
    background: var(--color-primary-lighter, #EEF3FC);
    color: var(--color-primary, #3A66D4);
    font-size: 14px;
    padding: 7px 10px;
    border-radius: 10px;
    border:  1px solid #E4EAFB;
    line-height: 1.4;
    transition: background 0.2s ease, transform 0.2s ease;
}

.wc-tags span:hover {
    background: var(--color-bg-lighter, #D8E7FF);
    transform: translateY(-2px);
}

/* ===== Hire Button ===== */
@keyframes wc-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(58,102,212,0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(58,102,212,0); }
    100% { box-shadow: 0 0 0 0 rgba(58,102,212,0); }
}

.wc-hire {
       display: block;
    position: relative;
    width: 100%;
    background: var(--color-primary, #3A66D4);
    color: #fff;
    text-align: center;
    padding: 9px 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    margin-top: auto;
    overflow: visible;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    animation: wc-pulse 2s ease-out infinite;
}

.wc-hire:hover {
    background: var(--color-primary-hover, #2d54b8);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(58,102,212,0.32);
}

.wc-hire-pulse {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    animation: btn-pulse 2s ease infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
    .writerSecHead {
        flex-direction: column;
        align-items: flex-start;
    }

    .writerSwiperNav {
        align-self: flex-start;
    }
}

@media (max-width: 575px) {
    .writerSection {
        padding: 50px 0;
    }

    .writerSecHead {
        margin-bottom: 28px;
    }

    .wc-stat strong {
        font-size: 13px;
    }

    .writerSwiperNav {
        display: none;
    }

    .swiper-pagination-writer {
        display: flex;
    }
}