/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* =========================================
   GROWLY COMMENTS
========================================= */

selector {
    width: 100%;
}


/* =========================================
   SUCCESS MESSAGE
========================================= */

selector .growly-comment-success {
    width: 100%;

    margin: 0 0 56px;

    padding: 28px 32px;

    background: #F4FAF7;

    border: 1px solid #E7F3ED;
    border-radius: 16px;

    direction: rtl;
    text-align: right;
}


selector .growly-comment-success-title {
    margin: 0 0 6px;

    font-family: "IRANSansXV", sans-serif !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 36px;

    color: #0B834F;
}


selector .growly-comment-success-text {
    margin: 0;

    font-family: "IRANSansXV", sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;

    color: #303030;
}


/* =========================================
   COMMENT LIST
========================================= */

selector .growly-comments-list-section {
    width: 100%;
    margin-bottom: 72px;
}


selector .growly-comments-list-title {
    margin: 0 0 36px;

    font-family: "IRANSansXV", sans-serif !important;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;

    color: #141414;

    direction: rtl;
    text-align: right;
}


selector .growly-comment-list,
selector .growly-comment-list .children {
    margin: 0 !important;
    list-style: none !important;
}


selector .growly-comment-list {
    padding: 0 !important;
}


selector .growly-comment-list .children {
    padding: 0 48px 0 0 !important;
    margin-top: 18px !important;
}


selector .growly-comment-list li {
    list-style: none !important;
}


selector .growly-comment-list li::marker {
    content: "" !important;
}


selector .growly-comment-list li::before,
selector .growly-comment-list li::after {
    content: none !important;
    display: none !important;
}


/* =========================================
   COMMENT ITEM
========================================= */

selector .growly-comment-item {
    margin: 0 0 20px !important;
    padding: 0 !important;
}


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

selector .growly-comment-card {
    width: 100%;

    padding: 24px 28px;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E7E7E7;
    border-radius: 16px;

    direction: rtl;
}


/* پاسخ کاربر عادی */

selector .growly-comment-card.growly-is-reply {
    background: #FFFFFF;
    border-color: #E7E7E7;
}


/* پاسخ رسمی Growly */

selector .growly-comment-card.growly-is-official {
    background: #F4FAF7;

    border-color: #D9ECE3;

    box-shadow:
        inset -3px 0 0 #0B834F;
}


/* =========================================
   OFFICIAL BADGE
========================================= */

selector .growly-official-badge {
    display: inline-flex;

    align-items: center;

    min-height: 24px;

    padding: 2px 9px;

    background: #E7F3ED;

    border-radius: 20px;

    color: #0B834F;

    font-family: "IRANSansXV", sans-serif !important;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
}


/* =========================================
   COMMENT HEADER
========================================= */

selector .growly-comment-header {
    display: flex;

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

    gap: 20px;

    margin-bottom: 18px;
}


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

selector .growly-comment-author-area {
    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 0;
}


selector .growly-comment-avatar {
    width: 48px;
    height: 48px;

    flex: 0 0 48px;
}


selector .growly-comment-avatar img {
    display: block;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    object-fit: cover;
}


selector .growly-comment-author-meta {
    display: flex;

    flex-direction: column;

    gap: 3px;

    min-width: 0;
}


selector .growly-comment-author-row {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;
}


selector .growly-comment-author-name {
    color: #303030;

    font-family: "IRANSansXV", sans-serif !important;

    font-size: 16px;
    font-weight: 600;
    line-height: 28px;
}


/* =========================================
   REPLY CONTEXT
========================================= */

selector .growly-comment-context {
    color: #A0A0A0;

    font-family: "IRANSansXV", sans-serif !important;

    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
}


selector .growly-comment-context span {
    color: #606060;

    font-weight: 500;
}


/* =========================================
   COMMENT DATE
========================================= */

selector .growly-comment-date {
    color: #A0A0A0;

    font-family: "IRANSansXV", sans-serif !important;

    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
}


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

selector .growly-comment-content {
    padding-right: 62px;

    color: #303030;

    font-family: "IRANSansXV", sans-serif !important;

    font-size: 16px;
    font-weight: 400;
    line-height: 32px;

    text-align: right;
}


selector .growly-comment-content p {
    margin: 0 !important;
}


/* =========================================
   REPLY BUTTON
========================================= */

selector .growly-comment-reply {
    flex-shrink: 0;
}


selector .growly-comment-reply a {
    display: inline-flex;

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

    min-height: 38px;

    padding: 6px 16px;

    background: #FFFFFF;

    border: 1px solid #E7E7E7;
    border-radius: 10px;

    color: #0B834F !important;

    font-family: "IRANSansXV", sans-serif !important;

    font-size: 13px;
    font-weight: 500;
    line-height: 24px;

    text-decoration: none !important;

    transition:
        background-color .2s ease,
        border-color .2s ease;
}


selector .growly-comment-reply a:hover {
    background: #F4FAF7;

    border-color: #D4EADF;
}


/* =========================================
   NORMAL FORM TITLE
========================================= */

selector .growly-comment-form-title {
    margin: 0 0 48px !important;
    padding: 0;

    color: #141414;

    font-family: "IRANSansXV", sans-serif !important;

    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;

    direction: rtl;
    text-align: right;
}


/* =========================================
   REPLY MODE
========================================= */

/*
 * وقتی کاربر روی «پاسخ» کلیک کرده
 */

selector #respond.growly-reply-mode {
    margin-top: 24px;
}


/*
 * عنوان «پاسخ به زینب حیدری»
 *
 * دیگه H2 بزرگ نیست.
 * به شکل یک نوار جمع‌وجور نمایش داده میشه.
 */

selector #respond.growly-reply-mode
.growly-comment-form-title {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;

    width: fit-content;

    max-width: 100%;

    margin: 0 0 28px !important;

    padding: 12px 18px;

    background: #F4FAF7;

    border: 1px solid #DCEDE5;
    border-radius: 12px;

    color: #303030;

    font-size: 18px;
    font-weight: 600;
    line-height: 30px;
}


/*
 * small پیش‌فرض WordPress
 */

selector #respond.growly-reply-mode
.growly-comment-form-title small {
    display: inline-flex;

    align-items: center;

    margin: 0;

    font-size: inherit;
}


/*
 * لغو پاسخ
 */

selector #respond.growly-reply-mode
#cancel-comment-reply-link {
    display: inline-flex !important;

    align-items: center;

    margin: 0;

    padding: 3px 9px;

    background: #FFFFFF;

    border: 1px solid #DCEDE5;
    border-radius: 8px;

    color: #0B834F !important;

    font-family: "IRANSansXV", sans-serif !important;

    font-size: 12px;
    font-weight: 500;
    line-height: 22px;

    text-decoration: none !important;
}


selector #respond.growly-reply-mode
#cancel-comment-reply-link:hover {
    background: #E7F3ED;
}


/* =========================================
   FORM
========================================= */

selector .growly-comment-form {
    display: grid;

    width: 100%;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    grid-template-areas:
        "author email"
        "comment comment"
        "submit submit";

    column-gap: 32px;
    row-gap: 28px;

    margin: 0;

    direction: rtl;
}


selector .growly-comment-form p {
    margin: 0 !important;
    padding: 0 !important;
}


selector .growly-comment-author {
    grid-area: author;
}


selector .growly-comment-email {
    grid-area: email;
}


selector .growly-comment-message {
    grid-area: comment;
}


/* =========================================
   INPUTS
========================================= */

selector .growly-comment-form input[type="text"],
selector .growly-comment-form input[type="email"] {
    display: block;

    width: 100%;
    height: 74px;

    padding: 0 30px;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E7E7E7;
    border-radius: 14px;

    outline: none;
    box-shadow: none;

    color: #303030 !important;

    font-family: "IRANSansXV", sans-serif !important;

    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 36px !important;

    text-align: right;
}


/* =========================================
   TEXTAREA
========================================= */

selector .growly-comment-form textarea#comment {
    display: block;

    width: 100%;

    height: 155px;
    min-height: 155px;

    padding: 26px 30px;

    box-sizing: border-box;

    background: #FFFFFF;

    border: 1px solid #E7E7E7;
    border-radius: 14px;

    outline: none;
    box-shadow: none;

    resize: none;

    color: #303030 !important;

    font-family: "IRANSansXV", sans-serif !important;

    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 36px !important;

    text-align: right;
}


/* =========================================
   PLACEHOLDER
========================================= */

selector .growly-comment-form input#author::placeholder,
selector .growly-comment-form input#email::placeholder,
selector .growly-comment-form textarea#comment::placeholder {
    color: #A0A0A0 !important;

    -webkit-text-fill-color: #A0A0A0 !important;

    opacity: 1 !important;

    font-family: "IRANSansXV", sans-serif !important;

    font-weight: 600 !important;
    font-size: 20px !important;
    line-height: 36px !important;

    text-align: right;
}


selector .growly-comment-form input#author::-webkit-input-placeholder,
selector .growly-comment-form input#email::-webkit-input-placeholder,
selector .growly-comment-form textarea#comment::-webkit-input-placeholder {
    color: #A0A0A0 !important;

    -webkit-text-fill-color: #A0A0A0 !important;

    opacity: 1 !important;
}


/* =========================================
   FOCUS
========================================= */

selector .growly-comment-form input:focus,
selector .growly-comment-form textarea:focus {
    border-color: #0B834F;

    outline: none;

    box-shadow:
        0 0 0 1px rgba(11, 131, 79, .08);
}


/* =========================================
   SUBMIT
========================================= */

selector .growly-comment-form .form-submit {
    grid-area: submit;

    display: flex;

    justify-content: flex-start;

    margin: 8px 0 0 !important;

    direction: rtl;
}


selector .growly-comment-submit {
    min-width: 144px;
    min-height: 60px;

    padding: 14px 26px !important;

    background: #0B834F !important;

    border: 0 !important;
    border-radius: 12px !important;

    color: #FFFFFF !important;

    font-family: "IRANSansXV", sans-serif !important;

    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 28px !important;

    cursor: pointer;
}


selector .growly-comment-submit:hover {
    background: #096F43 !important;
}


/* =========================================
   CLEANUP
========================================= */

selector .comment-notes,
selector .comment-form-url,
selector .comment-form-cookies-consent,
selector .akismet-fields-container {
    display: none !important;
}


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

@media (max-width: 767px) {

    selector .growly-comment-success {
        margin-bottom: 40px;

        padding: 22px 20px;

        border-radius: 12px;
    }


    selector .growly-comments-list-section {
        margin-bottom: 48px;
    }


    selector .growly-comments-list-title,
    selector .growly-comment-form-title {
        margin-bottom: 28px !important;

        font-size: 24px;
    }


    selector .growly-comment-card {
        padding: 18px;

        border-radius: 14px;
    }


    selector .growly-comment-list .children {
        padding-right: 18px !important;

        margin-top: 14px !important;
    }


    selector .growly-comment-header {
        align-items: flex-start;

        gap: 12px;

        margin-bottom: 14px;
    }


    selector .growly-comment-avatar,
    selector .growly-comment-avatar img {
        width: 42px;
        height: 42px;
    }


    selector .growly-comment-avatar {
        flex-basis: 42px;
    }


    selector .growly-comment-author-name {
        font-size: 15px;
        line-height: 26px;
    }


    selector .growly-comment-context,
    selector .growly-comment-date {
        font-size: 11px;
        line-height: 20px;
    }


    selector .growly-official-badge {
        min-height: 22px;

        padding: 1px 7px;

        font-size: 10px;
    }


    selector .growly-comment-content {
        padding-right: 0;

        font-size: 15px;
        line-height: 30px;
    }


    selector .growly-comment-reply a {
        min-height: 34px;

        padding: 5px 11px;

        font-size: 12px;
    }


    /* Reply title mobile */

    selector #respond.growly-reply-mode
    .growly-comment-form-title {
        gap: 8px;

        margin-bottom: 20px !important;

        padding: 10px 14px;

        border-radius: 10px;

        font-size: 15px;
        line-height: 26px;
    }


    selector #respond.growly-reply-mode
    #cancel-comment-reply-link {
        padding: 2px 7px;

        font-size: 11px;
        line-height: 20px;
    }


    selector .growly-comment-form {
        grid-template-columns: 1fr;

        grid-template-areas:
            "author"
            "email"
            "comment"
            "submit";

        row-gap: 16px;
    }


    selector .growly-comment-form input[type="text"],
    selector .growly-comment-form input[type="email"] {
        height: 60px;

        padding: 0 20px;

        font-size: 16px !important;
        line-height: 28px !important;
    }


    selector .growly-comment-form textarea#comment {
        height: 140px;
        min-height: 140px;

        padding: 20px;

        font-size: 16px !important;
        line-height: 28px !important;
    }


    selector .growly-comment-form input::placeholder,
    selector .growly-comment-form textarea::placeholder {
        font-size: 16px !important;
        line-height: 28px !important;
    }


    selector .growly-comment-submit {
        min-width: 130px;
        min-height: 52px;

        padding: 11px 20px !important;

        font-size: 14px !important;
    }
}