/*
 * 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-feed-padding       Space between the widget edge and the cards
 * --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-footer-padding     Padding of the bottom timestamp section
 * --ww-cf-footer-border-color Divider colour above the bottom timestamp
 * --ww-cf-footer-border-width Divider thickness above the bottom timestamp
 * --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-item--time-bottom  Card variant with the timestamp in a footer
 * .ww-cf-main               Avatar + body row (bottom-timestamp cards only)
 * .ww-cf-footer             Bottom section holding the 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-feed-padding:       6px 8px 12px;

    --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-footer-padding:      12px 16px;
    --ww-cf-footer-border-color: rgba(0, 0, 0, 0.08);
    --ww-cf-footer-border-width: 1px;

    --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 ─────────── *
 * The load-more button is excluded (via :where, so specificity stays 0,1,1)
 * and gets its own non-!important reset
 * below so the Elementor style controls (background, shadow…) can apply. */
.ww-cf-wrap button:where(:not(.ww-cf-load-more)),
.ww-cf-wrap button:where(:not(.ww-cf-load-more)):hover,
.ww-cf-wrap button:where(:not(.ww-cf-load-more)):focus,
.ww-cf-wrap button:where(:not(.ww-cf-load-more)):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:                    var(--ww-cf-feed-padding);
}

.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;
}

/* ── Bottom timestamp (time_position="bottom") ─────────────────────────
 * The card drops its own padding; .ww-cf-main and .ww-cf-footer carry it
 * instead so the divider runs edge to edge across the card. */
.ww-cf-wrap .ww-cf-item--time-bottom {
    flex-direction: column;
    align-items:    stretch;
    gap:            0;
    padding:        0;
}

.ww-cf-wrap .ww-cf-main {
    display:        flex;
    flex-direction: row;
    align-items:    flex-start;
    gap:            12px;
    padding:        var(--ww-cf-card-padding);
}

.ww-cf-wrap .ww-cf-footer {
    padding:    var(--ww-cf-footer-padding);
    border-top: var(--ww-cf-footer-border-width) solid var(--ww-cf-footer-border-color);
}

.ww-cf-wrap .ww-cf-footer .ww-cf-time {
    display: block;
}

/* ── 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 ────────────────────────────────────────────────────────── *
 * No !important here: the (0,2,0) selectors already beat typical theme and
 * Elementor Kit button rules, while the widget's own style controls
 * ({{WRAPPER}} .ww-cf-wrap .ww-cf-load-more) still win over these defaults. */
.ww-cf-wrap .ww-cf-load-more {
    appearance:         none;
    -webkit-appearance: none;
    display:            block;
    flex-shrink:        0;
    width:              auto;
    min-width:          0;
    min-height:         0;
    margin:             8px auto 0;
    padding:            10px 24px;
    border:             1px none currentColor;
    border-radius:      var(--ww-cf-load-more-radius);
    background:         var(--ww-cf-load-more-bg);
    box-shadow:         none;
    color:              var(--ww-cf-load-more-color);
    font-family:        inherit;
    font-size:          12px;
    font-weight:        600;
    font-style:         normal;
    line-height:        inherit;
    letter-spacing:     0.04em;
    word-spacing:       normal;
    text-align:         center;
    text-transform:     none;
    text-decoration:    none;
    text-shadow:        none;
    cursor:             pointer;
    opacity:            1;
    transform:          none;
    outline:            none;
    transition:         background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.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-color: var(--ww-cf-scrollbar-thumb);
    color:            var(--ww-cf-author-color);
    outline:          none;
}

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