.elementor-524 .elementor-element.elementor-element-a1ae58d{--display:flex;--min-height:90vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-524 .elementor-element.elementor-element-1d2b588{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-1a32b51 */<style>

/* =========================================================
   NEXTLETTER PODCAST
========================================================= */

.nl-podcast-list {
    width: 100%;
    direction: rtl;
    font-family: "Vazirmatn", sans-serif;
}


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

.nl-podcast-card {
    width: 100%;
    margin-bottom: 34px;
    padding: 26px 28px 24px;

    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(29, 53, 87, 0.10);

    border-radius: 22px;

    box-shadow:
        0 8px 30px rgba(29, 53, 87, 0.06);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


.nl-podcast-card:hover {
    transform: translateY(-3px);

    box-shadow:
        0 14px 38px rgba(29, 53, 87, 0.10);

    border-color:
        rgba(29, 53, 87, 0.16);
}


/* =========================================================
   AUTHOR
========================================================= */

.nl-podcast-author {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-bottom: 18px;
}


/* =========================================================
   PHOTO
========================================================= */

.nl-podcast-photo {
    width: 82px !important;
    height: 82px !important;

    min-width: 82px;

    object-fit: cover;

    display: block;

    border-radius: 50%;

    border: 3px solid #ebe3d8;

    box-shadow:
        0 5px 15px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   AUTHOR INFO
========================================================= */

.nl-podcast-author-info {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 6px;

    min-width: 0;
}


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

.nl-podcast-name {
    font-size: 21px !important;

    line-height: 1.5;

    font-weight: 700;

    color: #1d3557 !important;
}


/* =========================================================
   ROLE
   GREEN BADGE + WHITE TEXT
========================================================= */

.nl-podcast-role {
    display: inline-block !important;

    width: fit-content !important;

    max-width: max-content;

    padding: 4px 12px !important;

    margin-top: 1px;

    background: #6b8f71 !important;

    color: #ffffff !important;

    border-radius: 8px;

    font-size: 12px !important;

    line-height: 1.6;

    font-weight: 500;

    white-space: nowrap;

    box-sizing: border-box;

    text-decoration: none !important;
}


/*
   Elementor / Theme override
*/

.nl-podcast-role,
.nl-podcast-role *,
.nl-podcast-role span,
.nl-podcast-role a {
    color: #ffffff !important;

    background-color: transparent;
}


/* =========================================================
   TITLE
========================================================= */

.nl-podcast-title {
    font-size: 18px !important;

    line-height: 1.9;

    font-weight: 600;

    color: #252525 !important;

    margin: 4px 0 18px;

    padding-right: 2px;
}


/* =========================================================
   PLAYER
========================================================= */

.nl-custom-player {
    width: 100%;

    min-height: 68px;

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 10px 12px;

    box-sizing: border-box;

    background: #f8f5f0;

    border: 1px solid #e5ddd2;

    border-radius: 17px;

    direction: ltr;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}


/* =========================================================
   HIDDEN AUDIO
========================================================= */

.nl-custom-player audio {
    display: none;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.nl-play-button {
    width: 48px;
    height: 48px;

    min-width: 48px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: #1d3557 !important;

    color: #ffffff !important;

    font-size: 16px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;

    box-shadow:
        0 5px 14px rgba(29, 53, 87, 0.22);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.nl-play-button:hover {
    background: #29496f !important;

    color: #ffffff !important;

    transform: scale(1.06);

    box-shadow:
        0 7px 18px rgba(29, 53, 87, 0.28);
}


.nl-play-button:active {
    transform: scale(0.96);
}


/* =========================================================
   PLAYER MAIN
========================================================= */

.nl-player-main {
    flex: 1;

    min-width: 80px;
}


/* =========================================================
   PROGRESS
========================================================= */

.nl-progress {
    width: 100%;

    height: 6px;

    background: #ddd6cc;

    border-radius: 20px;

    overflow: hidden;

    cursor: pointer;

    position: relative;
}


.nl-progress-fill {
    width: 0;

    height: 100%;

    background: #1d3557;

    border-radius: 20px;

    transition: width 0.08s linear;
}


/* =========================================================
   TIME
========================================================= */

.nl-time {
    display: flex;

    justify-content: space-between;

    align-items: center;

    direction: ltr;

    margin-top: 6px;

    font-family: Arial, sans-serif;

    font-size: 10px;

    color: #888 !important;
}


.nl-current,
.nl-duration {
    color: #888 !important;
}


/* =========================================================
   VOLUME
========================================================= */

.nl-volume {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #1d3557 !important;

    font-size: 15px;
}


.nl-volume input {
    width: 58px;

    height: 4px;

    cursor: pointer;

    accent-color: #1d3557;
}


/* =========================================================
   DOWNLOAD
========================================================= */

.nl-download {
    width: 42px;
    height: 42px;

    min-width: 42px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #ebe3d8 !important;

    color: #1d3557 !important;

    text-decoration: none !important;

    font-size: 21px;

    font-weight: 700;

    line-height: 1;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.nl-download:hover {
    background: #1d3557 !important;

    color: #ffffff !important;

    transform: translateY(-2px);
}


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

.nl-podcast-empty {
    width: 100%;

    padding: 40px 20px;

    text-align: center;

    color: #777;

    background: rgba(255, 255, 255, 0.6);

    border-radius: 18px;

    border: 1px solid #e5ddd2;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .nl-podcast-card {
        padding: 20px 16px;

        margin-bottom: 24px;

        border-radius: 18px;
    }


    .nl-podcast-author {
        gap: 13px;

        margin-bottom: 15px;
    }


    .nl-podcast-photo {
        width: 68px !important;
        height: 68px !important;

        min-width: 68px;
    }


    .nl-podcast-name {
        font-size: 18px !important;
    }


    .nl-podcast-role {
        padding: 3px 10px !important;

        font-size: 11px !important;

        border-radius: 7px;
    }


    .nl-podcast-title {
        font-size: 16px !important;

        line-height: 1.8;

        margin-bottom: 14px;
    }


    .nl-custom-player {
        min-height: 62px;

        gap: 8px;

        padding: 8px;
    }


    .nl-play-button {
        width: 44px;
        height: 44px;

        min-width: 44px;
    }


    .nl-volume {
        display: none;
    }


    .nl-download {
        width: 38px;
        height: 38px;

        min-width: 38px;

        font-size: 19px;
    }


    .nl-progress {
        height: 6px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .nl-podcast-card {
        padding: 17px 12px;
    }


    .nl-podcast-photo {
        width: 60px !important;
        height: 60px !important;

        min-width: 60px;
    }


    .nl-podcast-name {
        font-size: 17px !important;
    }


    .nl-podcast-role {
        padding: 3px 9px !important;

        font-size: 10px !important;

        border-radius: 7px;
    }


    .nl-podcast-title {
        font-size: 15px !important;
    }


    .nl-custom-player {
        gap: 6px;
    }


    .nl-play-button {
        width: 42px;
        height: 42px;

        min-width: 42px;
    }

}


/* =========================================================
   FINAL ROLE COLOR OVERRIDE
========================================================= */

.nl-podcast-role,
.nl-podcast-role *,
.nl-podcast-role::before,
.nl-podcast-role::after {
    color: #ffffff !important;
}

</style>/* End custom CSS */