/* 
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
*/
body {
    --element-background: #fff;
    --element-border: #eee;
    --white: #fff;
    --black: #000;
}
/*------------ Comments */
#comments .title-comments {
    margin: 0 0 15px;
}
#comments .comment-list {
    margin-bottom: 15px;
}
#comments .comment-list .comment {
    padding: 10px;
    border: 1px solid var(--element-border);
    border-radius: 10px;
    background-color: var(--element-background);
    margin-bottom: 5px;
} 
#comments .comment .comment-body, #comments .pingback .comment-body {
    border-bottom: 0;
    padding: 0;
}
#comments .comment-meta {
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}
#comments .comment .avatar, #comments .pingback .avatar {
    position: static;
}
#comments .comment-author, #comments .comment-metadata {
    display: flex;
    align-items: center;
}
#comments .reply a {
    display: inline-flex;
    padding: 5px 20px;
    background-color: var(--e-global-color-accent);
    color: var(--white);
    border-radius: 5px;
}
#comments .reply a:hover {
    background-color: var(--e-global-color-primary);
}
#comments .children li {
    margin-top: 5px;
    background-color: var(--element-background)!important;
}
#comments .children li:last-child {
    padding-block-end: 5px;
}
.fn {
    margin: 0 5px;
}
.comment-respond .comment-reply-title {
    font-size: 18px;
    line-height: 1.5;
    margin: 0 0 15px;
}
.comment-respond form {
    background-color: var(--element-background);
    padding: 15px;
    border-radius: 15px;
    border: 1px solid var(--element-border);
}
.comment-respond form input, .comment-respond form textarea {
    background-color: var(--element-background);
    border: 1px solid var(--element-border);
    color: var(--black);
    border-radius: 10px;
    outline: none;
}
.comment-respond form .submit {
    background-color: var(--e-global-color-accent);
    color: var(--white);
    font-weight: 500;
    border: 0;
}
.comment-respond form .submit:hover {
    background-color: var(--e-global-color-primary);
}
.comment-respond form input:focus, .comment-respond form textarea:focus {
    border-color: var(--e-global-color-primary);
}
label {
    margin-bottom: 10px;
    font-weight: 600;
}
#cancel-comment-reply-link {
    display: inline-flex;
    padding: 5px 20px;
    background-color: var(--e-global-color-accent);
    color: var(--white);
    border-radius: 5px;
    font-size: 12px;
    line-height: 1;
    margin: 0 5px;
}
#cancel-comment-reply-link:hover {
    background-color: var(--e-global-color-primary);
}
/* ---- Elementor Carousel Loader ---- */
.carousel-preloader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--element-background);
    border-radius: 10px;
    z-index: 9999;
}
.carousel-preloader::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 4px solid var(--element-border);
    border-top-color: var(--e-global-color-accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* ----------------------------------------------------------- */
@media (max-width: 500px) {
     #comments .comment-metadata {
         width: 100%;
         flex-basis: 100%;
     }
}