/* ============================================================
   Music Comments Plugin v2.0 — Estilo Facebook Comments
   Tema: Light / Clean / Social Feed
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');

.mc-wrapper *,
.mc-wrapper *::before,
.mc-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.mc-wrapper {
    --mc-bg:           #f0f2f5;
    --mc-white:        #ffffff;
    --mc-blue:         #1877f2;
    --mc-blue-dark:    #166fe5;
    --mc-blue-light:   #e7f3ff;
    --mc-text:         #050505;
    --mc-text-sec:     #65676b;
    --mc-text-link:    #1877f2;
    --mc-border:       #ced0d4;
    --mc-border-lt:    #e4e6ea;
    --mc-bubble:       #f0f2f5;
    --mc-green:        #42b72a;
    --mc-radius:       8px;
    --mc-radius-bubble:18px;
    --mc-font:         'Nunito', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    font-family:    var(--mc-font);
    background:     var(--mc-white);
    border:         1px solid var(--mc-border);
    border-radius:  var(--mc-radius);
    overflow:       hidden;
    max-width:      620px;
    width:          100%;
    margin:         0 auto;
    color:          var(--mc-text);
    font-size:      15px;
    line-height:    1.34;
}

/* ── Header Bar ── */
.mc-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             8px;
    padding:         10px 14px;
    background:      var(--mc-white);
    border-bottom:   1px solid var(--mc-border-lt);
}
.mc-header-left {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.mc-count-label {
    font-size:   15px;
    font-weight: 800;
    color:       var(--mc-text);
}
.mc-mod-link {
    font-size:   13px;
    font-weight: 700;
    color:       var(--mc-blue);
    cursor:      pointer;
    text-decoration: none;
}
.mc-mod-link:hover { text-decoration: underline; }
.mc-sort-wrap {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   13px;
    color:       var(--mc-text-sec);
}
.mc-sort-select {
    border:        1px solid var(--mc-border);
    border-radius: 4px;
    padding:       3px 6px;
    font-size:     13px;
    font-family:   var(--mc-font);
    background:    var(--mc-white);
    color:         var(--mc-text);
    cursor:        pointer;
    outline:       none;
}

/* ── New Comment Row ── */
.mc-new-comment-row {
    display:     flex;
    align-items: center;
    gap:         8px;
    padding:     10px 14px 8px;
    background:  var(--mc-white);
    border-bottom: 1px solid var(--mc-border-lt);
    cursor:      text;
}
.mc-fake-input {
    flex:          1;
    border:        1px solid var(--mc-border);
    border-radius: var(--mc-radius-bubble);
    padding:       9px 16px;
    font-size:     15px;
    color:         var(--mc-text-sec);
    background:    var(--mc-bubble);
    cursor:        text;
    transition:    border-color .15s;
    user-select:   none;
}
.mc-fake-input:hover { border-color: var(--mc-blue); }

/* ── Avatar ── */
.mc-avatar {
    width:           38px;
    height:          38px;
    min-width:       38px;
    border-radius:   50%;
    background:      linear-gradient(135deg, #1877f2, #42b8f7);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     800;
    font-size:       15px;
    color:           #fff;
    flex-shrink:     0;
}
.mc-avatar.sm { width: 32px; height: 32px; min-width: 32px; font-size: 13px; }
.mc-avatar.xs { width: 28px; height: 28px; min-width: 28px; font-size: 11px; }

/* ── Expanded Form ── */
.mc-form-expanded {
    background:    var(--mc-white);
    border-bottom: 1px solid var(--mc-border-lt);
    padding:       0 14px 14px;
    display:       none;
}
.mc-form-expanded.open { display: block; }

.mc-type-pills {
    display:       flex;
    gap:           8px;
    padding:       10px 0 10px;
    flex-wrap:     wrap;
}
.mc-pill {
    display:       flex;
    align-items:   center;
    gap:           5px;
    padding:       5px 13px;
    border-radius: 20px;
    border:        1.5px solid var(--mc-border);
    background:    var(--mc-white);
    font-size:     13px;
    font-weight:   700;
    color:         var(--mc-text-sec);
    cursor:        pointer;
    transition:    all .15s;
    font-family:   var(--mc-font);
}
.mc-pill:hover  { border-color: var(--mc-blue); color: var(--mc-blue); }
.mc-pill.active { background: var(--mc-blue-light); border-color: var(--mc-blue); color: var(--mc-blue); }

.mc-form-inner {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
}
.mc-form-fields {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            7px;
}
.mc-input-name,
.mc-textarea {
    border:        1.5px solid var(--mc-border);
    border-radius: var(--mc-radius-bubble);
    padding:       9px 14px;
    font-size:     14px;
    font-family:   var(--mc-font);
    background:    var(--mc-bubble);
    color:         var(--mc-text);
    outline:       none;
    width:         100%;
    transition:    border-color .15s, box-shadow .15s;
}
.mc-textarea {
    resize:     none;
    min-height: 64px;
    font-size:  15px;
}
.mc-input-name:focus, .mc-textarea:focus {
    border-color: var(--mc-blue);
    background:   var(--mc-white);
    box-shadow:   0 0 0 2px rgba(24,119,242,.15);
}
.mc-input-name::placeholder, .mc-textarea::placeholder { color: #bcc0c4; }

.mc-form-actions {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      5px;
}
.mc-char-hint { font-size: 12px; color: var(--mc-text-sec); }
.mc-char-hint span { color: var(--mc-blue); font-weight: 700; }

.mc-submit-btn {
    padding:       8px 20px;
    background:    var(--mc-blue);
    color:         #fff;
    border:        none;
    border-radius: 6px;
    font-family:   var(--mc-font);
    font-size:     15px;
    font-weight:   700;
    cursor:        pointer;
    transition:    background .15s;
}
.mc-submit-btn:hover    { background: var(--mc-blue-dark); }
.mc-submit-btn:disabled { opacity: .55; cursor: not-allowed; }

.mc-feedback {
    margin-top:    8px;
    border-radius: 6px;
    padding:       9px 13px;
    font-size:     13px;
    font-weight:   600;
    display:       none;
}
.mc-feedback.success { background: #e7f7e0; color: #1a7f37; }
.mc-feedback.error   { background: #fde8e8; color: #c0392b; }

/* ── Filter Bar ── */
.mc-filter-bar {
    display:       flex;
    gap:           4px;
    padding:       8px 14px 4px;
    border-bottom: 1px solid var(--mc-border-lt);
}
.mc-filter {
    padding:       5px 12px;
    border-radius: 16px;
    border:        1.5px solid transparent;
    background:    transparent;
    font-family:   var(--mc-font);
    font-size:     13px;
    font-weight:   700;
    color:         var(--mc-text-sec);
    cursor:        pointer;
    transition:    all .15s;
}
.mc-filter:hover  { background: var(--mc-bubble); }
.mc-filter.active { background: var(--mc-blue-light); border-color: var(--mc-blue); color: var(--mc-blue); }

/* ── Comments List ── */
.mc-comments-body { background: var(--mc-white); padding: 4px 14px 0; }

.mc-comment {
    display:   flex;
    gap:       8px;
    padding:   7px 0;
    animation: mc-fade-in .2s ease both;
}
@keyframes mc-fade-in {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mc-comment-right { flex: 1; min-width: 0; }

.mc-bubble {
    display:    inline-block;
    background: var(--mc-bubble);
    border-radius: var(--mc-radius-bubble);
    padding:    8px 12px;
    max-width:  100%;
    word-break: break-word;
}
.mc-comment.is-reply .mc-bubble {
    background:  #fff;
    border:      1px solid var(--mc-border-lt);
}

.mc-comment-author {
    font-size:   13px;
    font-weight: 800;
    color:       var(--mc-text);
    display:     block;
    margin-bottom: 1px;
}
.mc-comment-author:hover { text-decoration: underline; cursor: pointer; }

.mc-comment-text {
    font-size:   15px;
    color:       var(--mc-text);
    line-height: 1.4;
    display:     inline;
}

.mc-comment-badge {
    display:        inline-block;
    font-size:      10px;
    font-weight:    700;
    padding:        1px 7px;
    border-radius:  10px;
    margin-left:    6px;
    vertical-align: middle;
    position:       relative;
    top:            -1px;
}
.mc-badge-saludo { background: #e7f7e0; color: #1a7f37; }
.mc-badge-pedido { background: #fff4e0; color: #b85e00; }

.mc-comment-meta {
    display:      flex;
    align-items:  center;
    gap:          8px;
    margin-top:   3px;
    padding-left: 4px;
}
.mc-meta-like, .mc-meta-reply {
    font-size:   12px;
    font-weight: 700;
    color:       var(--mc-text-sec);
    cursor:      pointer;
}
.mc-meta-like:hover, .mc-meta-reply:hover { text-decoration: underline; }
.mc-meta-sep { color: var(--mc-border); font-size: 10px; }
.mc-meta-time { font-size: 12px; color: var(--mc-text-sec); }

/* Replies indent */
.mc-replies { margin-left: 46px; margin-top: 0; }

/* ── Load More ── */
.mc-load-more-wrap { padding: 10px 14px 12px; background: var(--mc-white); }
.mc-load-more-btn {
    display:      block;
    width:        100%;
    padding:      12px;
    background:   var(--mc-blue);
    color:        #fff;
    border:       none;
    border-radius:6px;
    font-family:  var(--mc-font);
    font-size:    15px;
    font-weight:  700;
    cursor:       pointer;
    text-align:   center;
    transition:   background .15s;
}
.mc-load-more-btn:hover    { background: var(--mc-blue-dark); }
.mc-load-more-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Empty ── */
.mc-empty { padding: 28px 16px; text-align: center; color: var(--mc-text-sec); font-size: 14px; }
.mc-empty-icon { font-size: 2rem; display: block; margin-bottom: 8px; }

/* ── Footer ── */
.mc-footer {
    display:      flex;
    align-items:  center;
    gap:          6px;
    padding:      8px 14px;
    background:   var(--mc-white);
    border-top:   1px solid var(--mc-border-lt);
    font-size:    12px;
    color:        var(--mc-text-sec);
}
.mc-footer a { color: var(--mc-blue); text-decoration: none; font-weight: 700; }
.mc-footer a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 480px) {
    .mc-header, .mc-new-comment-row, .mc-form-expanded,
    .mc-filter-bar, .mc-comments-body, .mc-load-more-wrap, .mc-footer {
        padding-left: 10px; padding-right: 10px;
    }
    .mc-replies { margin-left: 36px; }
}