/*
 * Wedwebs Comment Feed — default styles.
 *
 * Every rule is scoped under .ww-cf-wrap so specificity beats
 * common theme selectors without needing !important.
 *
 * Override any custom property via Elementor Custom CSS on the widget:
 *
 * .ww-cf-wrap {
 *   --ww-cf-card-bg: #fff;
 *   --ww-cf-card-radius: 14px;
 *   ... etc
 * }
 *
 * Available custom properties:
 * ──────────────────────────────────────────────────────────────────────
 * --ww-cf-card-bg            Card background colour
 * --ww-cf-card-shadow        Card box-shadow
 * --ww-cf-card-shadow-hover  Card box-shadow on hover
 * --ww-cf-card-radius        Card border-radius
 * --ww-cf-card-gap           Vertical gap between cards
 * --ww-cf-card-padding       Inner padding of each card
 * --ww-cf-avatar-size        Width & height of the avatar circle
 * --ww-cf-avatar-font-size   Initial letter size inside the avatar
 * --ww-cf-avatar-color       Initial letter colour
 * --ww-cf-author-color       Author name colour
 * --ww-cf-author-font-size   Author name font size
 * --ww-cf-author-weight      Author name font weight
 * --ww-cf-text-color         Comment body colour
 * --ww-cf-text-font-size     Comment body font size
 * --ww-cf-text-line-height   Comment body line height
 * --ww-cf-time-color         Timestamp colour
 * --ww-cf-time-font-size     Timestamp font size
 * --ww-cf-readmore-color     "Read more / Show less" colour
 * --ww-cf-readmore-font-size "Read more / Show less" font size
 * --ww-cf-scrollbar-thumb    Scrollbar thumb colour
 * --ww-cf-load-more-bg       Load-more button background
 * --ww-cf-load-more-color    Load-more button text colour
 * --ww-cf-load-more-radius   Load-more button border-radius
 *
 * Available classes for Elementor Custom CSS:
 * ──────────────────────────────────────────────────────────────────────
 * .ww-cf-wrap               Outer container
 * .ww-cf-feed               Scrollable inner list
 * .ww-cf-item               Single comment card
 * .ww-cf-item--new          Applied for 2 s on freshly prepended comments
 * .ww-cf-avatar             Initials circle
 * .ww-cf-body               Content column beside the avatar
 * .ww-cf-header             Row holding author name + timestamp
 * .ww-cf-author             Author name
 * .ww-cf-time               Timestamp
 * .ww-cf-content            Comment text
 * .ww-cf-content--truncated Applied when text is clipped
 * .ww-cf-readmore           "Read more / Show less" toggle
 * .ww-cf-empty              Shown when there are no comments yet
 * .ww-cf-load-more          "Load more" button at the bottom
 */

/* ── Custom-property defaults ────────────────────────────────────────── */
.ww-cf-wrap {
    --ww-cf-card-bg:            #ffffff;
    --ww-cf-card-shadow:        0 2px 10px rgba(0, 0, 0, 0.06);
    --ww-cf-card-shadow-hover:  0 4px 18px rgba(0, 0, 0, 0.10);
    --ww-cf-card-radius:        14px;
    --ww-cf-card-gap:           10px;
    --ww-cf-card-padding:       14px 16px;

    --ww-cf-avatar-size:        40px;
    --ww-cf-avatar-font-size:   16px;
    --ww-cf-avatar-color:       #ffffff;

    --ww-cf-author-color:       #2d2a27;
    --ww-cf-author-font-size:   16px;
    --ww-cf-author-weight:      700;

    --ww-cf-text-color:         #5a534c;
    --ww-cf-text-font-size:     14px;
    --ww-cf-text-line-height:   1.6;

    --ww-cf-time-color:         #b5aca3;
    --ww-cf-time-font-size:     11px;

    --ww-cf-readmore-color:     #c9956a;
    --ww-cf-readmore-font-size: 12px;

    --ww-cf-scrollbar-thumb:    #e8ddd6;
    --ww-cf-load-more-bg:       #f5f0ec;
    --ww-cf-load-more-color:    #8a7e75;
    --ww-cf-load-more-radius:   999px;
}

/* ── Box-sizing reset for all children ───────────────────────────────── */
.ww-cf-wrap,
.ww-cf-wrap * {
    box-sizing: border-box;
}

/* ── Blanket button reset — neutralises any theme button rule ─────────── */
.ww-cf-wrap button,
.ww-cf-wrap button:hover,
.ww-cf-wrap button:focus,
.ww-cf-wrap button:active {
    appearance:         none !important;
    -webkit-appearance: none !important;
    display:            inline !important;
    width:              auto !important;
    min-width:          0 !important;
    min-height:         0 !important;
    margin:             0 !important;
    padding:            0 !important;
    border:             none !important;
    border-radius:      0 !important;
    background:         none !important;
    box-shadow:         none !important;
    color:              inherit !important;
    font-family:        inherit;
    font-size:          inherit !important;
    font-weight:        inherit !important;
    line-height:        inherit !important;
    letter-spacing:     normal !important;
    text-align:         left !important;
    text-transform:     none !important;
    cursor:             pointer !important;
    transition:         none !important;
    opacity:            1 !important;
    transform:          none !important;
    outline:            none !important;
}

/* ── Outer wrap ───────────────────────────────────────────────────────── */
.ww-cf-wrap {
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
}

/* ── Scrollable feed ──────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-feed {
    flex:                       1 1 auto;
    overflow-y:                 auto;
    -webkit-overflow-scrolling: touch;
    display:                    flex;
    flex-direction:             column;
    gap:                        var(--ww-cf-card-gap);
    padding:                    6px 8px 12px;
}

.ww-cf-wrap .ww-cf-feed::-webkit-scrollbar       { width: 4px; }
.ww-cf-wrap .ww-cf-feed::-webkit-scrollbar-track { background: transparent; }
.ww-cf-wrap .ww-cf-feed::-webkit-scrollbar-thumb {
    background:    var(--ww-cf-scrollbar-thumb);
    border-radius: 2px;
}

/* ── Comment card ─────────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-item {
    display:        flex;
    flex-direction: row;
    align-items:    flex-start;
    gap:            12px;
    padding:        var(--ww-cf-card-padding);
    background:     var(--ww-cf-card-bg);
    border-radius:  var(--ww-cf-card-radius);
    box-shadow:     var(--ww-cf-card-shadow);
    transition:     box-shadow 0.2s ease, transform 0.2s ease;
}

.ww-cf-wrap .ww-cf-item:hover {
    box-shadow: var(--ww-cf-card-shadow-hover);
    transform:  translateY(-1px);
}

@keyframes ww-cf-slide-in {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ww-cf-wrap .ww-cf-item--new {
    animation: ww-cf-slide-in 0.35s ease-out;
}

/* ── Avatar ───────────────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-avatar {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           var(--ww-cf-avatar-size);
    height:          var(--ww-cf-avatar-size);
    border-radius:   50%;
    font-size:       var(--ww-cf-avatar-font-size);
    font-weight:     700;
    color:           var(--ww-cf-avatar-color);
    line-height:     1;
    user-select:     none;
    /* background colour set inline by JS per name */
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-body {
    flex:           1 1 0;
    min-width:      0;
    display:        flex;
    flex-direction: column;
    gap:            4px;
}

/* ── Header row ───────────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-header {
    display:     flex;
    align-items: baseline;
    gap:         8px;
    flex-wrap:   wrap;
}

.ww-cf-wrap .ww-cf-author {
    display:        inline;
    font-size:      var(--ww-cf-author-font-size);
    font-weight:    var(--ww-cf-author-weight);
    color:          var(--ww-cf-author-color);
    word-break:     break-word;
    overflow-wrap:  break-word;
    margin:         0;
    padding:        0;
}

/* time elements are sometimes hidden or given odd margins by themes */
.ww-cf-wrap .ww-cf-time {
    display:     inline;
    font-size:   var(--ww-cf-time-font-size);
    color:       var(--ww-cf-time-color);
    white-space: nowrap;
    margin:      0;
    padding:     0;
}

/* ── Comment text ─────────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-content {
    display:     block;
    font-size:   var(--ww-cf-text-font-size);
    color:       var(--ww-cf-text-color);
    line-height: var(--ww-cf-text-line-height);
    white-space: pre-wrap;
    word-break:  break-word;
    margin:      0;
    padding:     0;
}

/* ── Read more ────────────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-readmore,
.ww-cf-wrap .ww-cf-readmore:hover,
.ww-cf-wrap .ww-cf-readmore:focus,
.ww-cf-wrap .ww-cf-readmore:active {
    display:     inline !important;
    font-size:   var(--ww-cf-readmore-font-size) !important;
    font-weight: 600 !important;
    color:       var(--ww-cf-readmore-color) !important;
    line-height: 1.4 !important;
    transition:  opacity 0.15s !important;
}

.ww-cf-wrap .ww-cf-readmore:hover { opacity: 0.7 !important; }

/* ── Empty state ──────────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-empty {
    text-align: center;
    font-size:  13px;
    color:      var(--ww-cf-time-color);
    padding:    24px 0;
    font-style: italic;
    margin:     0;
}

/* ── Error state ──────────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-error {
    text-align: center;
    font-size:  13px;
    color:      #c94a4a;
    padding:    24px 0;
    font-style: italic;
    margin:     0;
}

/* ── Load more ────────────────────────────────────────────────────────── */
.ww-cf-wrap .ww-cf-load-more,
.ww-cf-wrap .ww-cf-load-more:hover,
.ww-cf-wrap .ww-cf-load-more:focus,
.ww-cf-wrap .ww-cf-load-more:active {
    display:        block !important;
    width:          auto !important;
    margin:         8px auto 0 !important;
    flex-shrink:    0;
    border-radius:  var(--ww-cf-load-more-radius) !important;
    font-size:      12px !important;
    font-weight:    600 !important;
    letter-spacing: 0.04em !important;
    text-align:     center !important;
    cursor:         pointer !important;
    transition:     background 0.2s, color 0.2s !important;
    padding:        10px 24px !important;
}

.ww-cf-wrap .ww-cf-load-more {
    background: var(--ww-cf-load-more-bg) !important;
    color:      var(--ww-cf-load-more-color) !important;
}

.ww-cf-wrap .ww-cf-load-more:hover,
.ww-cf-wrap .ww-cf-load-more:focus,
.ww-cf-wrap .ww-cf-load-more:active {
    background: var(--ww-cf-scrollbar-thumb) !important;
    color:      var(--ww-cf-author-color) !important;
}

.ww-cf-wrap .ww-cf-load-more[hidden] { display: none !important; }