/* =========================================================
   SMART PEKUA
   CONTRIBUTORS / সার্বিক সহযোগিতায়
   PREMIUM PROFILE CARD
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.contributors-page {
    padding-top: 18px;
    padding-bottom: 120px;
}


/* =========================================================
   INTRO
========================================================= */

.contributors-intro {
    text-align: center;
    margin: 8px auto 28px;
    padding: 0 18px;
}

.contributors-intro-icon {
    width: 82px;
    height: 82px;

    margin: 0 auto 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 42px;

    background: linear-gradient(
        145deg,
        #eef8ff,
        #e5f2ff
    );

    border: 1px solid #d8ebfa;

    border-radius: 26px;

    box-shadow:
        0 8px 22px rgba(30, 136, 229, 0.10),
        inset 0 1px 0 rgba(255,255,255,.9);
}

.contributors-intro p {
    margin: 0 auto;

    max-width: 620px;

    color: #6b6b6b;

    font-size: 17px;

    line-height: 1.8;
}


/* =========================================================
   CONTRIBUTORS LIST
========================================================= */

.contributors-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}


/* =========================================================
   PROFILE CARD
========================================================= */

.contributor-card {

    position: relative;

    width: 100%;

    padding: 26px 22px 22px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #ffffff 78%,
            #fafdff 100%
        );

    border: 1px solid #e3e8ed;

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,.07),
        0 2px 8px rgba(30,136,229,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* Top decorative line */

.contributor-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            #1e88e5,
            #42a5f5,
            #64b5f6,
            #1e88e5
        );
}


/* Soft decorative glow */

.contributor-card::after {

    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    top: -75px;
    right: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(30,136,229,.12),
            rgba(30,136,229,0) 70%
        );

    pointer-events: none;
}


/* =========================================================
   PROFILE IMAGE
========================================================= */

.contributor-image-box {

    position: relative;

    width: 142px;
    height: 142px;

    margin: 10px auto 20px;

    padding: 6px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #eaf5ff
        );

    border: 1px solid #dcecf9;

    box-shadow:
        0 8px 20px rgba(30,136,229,.13),
        0 2px 5px rgba(0,0,0,.06);

    z-index: 2;
}


/* Blue decorative ring */

.contributor-image-box::before {

    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 36px;

    border: 2px solid rgba(30,136,229,.18);

    pointer-events: none;
}


/* Image */

.contributor-image {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 26px;

    background: #eef6fc;
}


/* =========================================================
   CONTENT
========================================================= */

.contributor-content {
    position: relative;
    z-index: 3;

    width: 100%;
}


/* =========================================================
   NAME
========================================================= */

.contributor-name {

    margin: 0;

    padding: 0 4px;

    color: #111827;

    font-size: clamp(25px, 6vw, 32px);

    line-height: 1.35;

    font-weight: 700;

    text-align: center;

    letter-spacing: -.3px;
}


/* =========================================================
   DESIGNATION
========================================================= */

.contributor-designation {

    margin: 8px 4px 18px;

    color: #737b85;

    font-size: 16px;

    line-height: 1.75;

    text-align: center;

    position: relative;
}


/* small divider */

.contributor-designation::after {

    content: "";

    display: block;

    width: 55px;
    height: 3px;

    margin: 13px auto 0;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            #90caf9,
            #1e88e5
        );
}


/* =========================================================
   SUPPORT TYPE
========================================================= */

.contributor-support {

    display: flex;

    align-items: center;

    gap: 10px;

    width: 100%;

    min-height: 58px;

    padding: 12px 15px;

    margin: 4px 0 18px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #edf7ff,
            #f5faff
        );

    border: 1px solid #d7eafa;

    color: #1976c8;

    font-size: 16px;

    font-weight: 600;

    line-height: 1.5;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.8);

}


/* First emoji */

.contributor-support span:first-child {

    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background: #ffffff;

    box-shadow:
        0 3px 8px rgba(30,136,229,.08);

    font-size: 20px;
}


/* Text */

.contributor-support span:last-child {

    flex: 1;

}


/* =========================================================
   INFORMATION ROW
========================================================= */

.contributor-info {

    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 13px;

    width: 100%;

    padding: 14px 5px;

    margin-top: 4px;

    color: #30363d;

    font-size: 16px;

    line-height: 1.7;

    border-bottom: 1px solid #edf0f3;
}


/* Icon */

.contributor-info span:first-child {

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    background: #f5f9fc;

    border: 1px solid #e4edf4;

    font-size: 20px;
}


/* Address text */

.contributor-info span:last-child {

    flex: 1;

    padding-top: 4px;

    word-break: break-word;
}


/* =========================================================
   ACTION AREA
========================================================= */

.contributor-actions {

    width: 100%;

    margin-top: 18px;

    padding-top: 2px;
}


/* =========================================================
   CALL BUTTON
========================================================= */

.contributor-call-btn {

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 87%;

    min-height: 30px;

    padding: 13px 18px;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            #1e88e5,
            #42a5f5
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 20px;

    font-weight: 700;

    box-shadow:
        0 7px 16px rgba(30,136,229,.22);

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;

    overflow: hidden;
}


/* Button shine */

.contributor-call-btn::before {

    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.22),
            transparent
        );

    transform: skewX(-20deg);

    transition: left .55s ease;
}


/* Hover */

.contributor-call-btn:hover {

    transform: translateY(-2px);

    box-shadow:
        0 10px 22px rgba(30,136,229,.28);

    filter: brightness(1.03);
}

.contributor-call-btn:hover::before {

    left: 140%;
}


/* Active */

.contributor-call-btn:active {

    transform: scale(.98);

}


/* =========================================================
   LOADING
========================================================= */

.contributors-loading {

    padding: 45px 20px;

    text-align: center;

    color: #6b7280;

    font-size: 16px;

    background: #ffffff;

    border-radius: 22px;

    border: 1px solid #e8edf1;

    box-shadow:
        0 6px 18px rgba(0,0,0,.05);
}


/* =========================================================
   ERROR
========================================================= */

.contributors-error {

    padding: 40px 22px;

    text-align: center;

    background: #fff;

    border: 1px solid #ffd8d8;

    border-radius: 22px;

    box-shadow:
        0 6px 18px rgba(0,0,0,.05);
}

.contributors-error-icon {

    font-size: 42px;

    margin-bottom: 10px;
}

.contributors-error h3 {

    margin: 0 0 8px;

    color: #d32f2f;

    font-size: 21px;
}

.contributors-error p {

    margin: 0;

    color: #777;

    line-height: 1.7;
}


/* =========================================================
   EMPTY
========================================================= */

.contributors-empty {

    padding: 45px 22px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #e5ebf0;

    border-radius: 22px;

    box-shadow:
        0 6px 18px rgba(0,0,0,.05);
}

.contributors-empty-icon {

    font-size: 44px;

    margin-bottom: 10px;
}

.contributors-empty h3 {

    margin: 0 0 8px;

    color: #333;

    font-size: 20px;
}

.contributors-empty p {

    margin: 0;

    color: #777;

    line-height: 1.7;
}


/* =========================================================
   TABLET / LARGER MOBILE
========================================================= */

@media (min-width: 600px) {

    .contributors-page {
        max-width: 760px;
        margin: 0 auto;
    }


    .contributor-card {

        padding: 30px;

    }


    .contributor-image-box {

        width: 155px;
        height: 155px;

    }


    .contributor-name {

        font-size: 32px;

    }


    .contributor-designation {

        font-size: 17px;

    }


    .contributor-support,
    .contributor-info {

        font-size: 17px;

    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 360px) {

    .contributors-page {

        padding-left: 10px;
        padding-right: 10px;

    }


    .contributor-card {

        padding: 22px 16px 18px;

        border-radius: 24px;

    }


    .contributor-image-box {

        width: 120px;
        height: 120px;

        border-radius: 27px;

    }


    .contributor-image {

        border-radius: 21px;

    }


    .contributor-name {

        font-size: 23px;

    }


    .contributor-designation {

        font-size: 14px;

    }


    .contributor-support {

        font-size: 14px;

        padding: 10px 11px;

    }


    .contributor-info {

        font-size: 14px;

        gap: 9px;

    }


    .contributor-call-btn {

        min-height: 50px;

        font-size: 15px;

    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .contributor-card,
    .contributor-call-btn {

        transition: none;

    }

    .contributor-call-btn::before {

        display: none;

    }

}

/* =========================================================
   CONTRIBUTORS PAGE
   FINAL FIX FOR BOTTOM NAVIGATION
========================================================= */

html,
body {
    overflow-x: hidden;
}


/* Navigation must belong to viewport */

body > .bottom-nav {
    position: fixed !important;

    left: 12px !important;
    right: 12px !important;
    bottom: 10px !important;

    width: auto !important;
    height: 68px !important;

    z-index: 2147483647 !important;

    margin: 0 !important;

    /* IMPORTANT:
       remove transform from fixed navigation */
    transform: none !important;
    -webkit-transform: none !important;

    /* Avoid creating strange mobile rendering layers */
    filter: none !important;
    -webkit-filter: none !important;

    box-sizing: border-box !important;
}


/* Mobile */

@media (max-width: 600px) {

    body > .bottom-nav {
        position: fixed !important;

        left: 12px !important;
        right: 12px !important;
        bottom: 10px !important;

        width: auto !important;

        transform: none !important;
        -webkit-transform: none !important;

        z-index: 2147483647 !important;
    }

}


/* Small phones */

@media (max-width: 360px) {

    body > .bottom-nav {

        left: 8px !important;
        right: 8px !important;
        bottom: 7px !important;

        height: 64px !important;

    }

}


/* Content must remain behind navigation */

.contributors-page {
    padding-bottom: 125px !important;
}

/* =========================================
   CONTRIBUTORS CARD
   Mobile Width Fix
========================================= */

.contributors-list {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 12px;
}

.contributor-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    margin-left: 0;
    margin-right: 0;
}

.contributor-content {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.contributor-image-box {
    max-width: 100%;
    box-sizing: border-box;
}

.contributor-image {
    max-width: 100%;
    box-sizing: border-box;
}

.contributor-info,
.contributor-support,
.contributor-designation,
.contributor-name {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    overflow-wrap: anywhere;
    word-break: break-word;
}