/* =========================================
   Custom Comment Form v3.0.0
   ========================================= */

/* فونت IranSansX */
@font-face {
    font-family: 'IranSansX';
    src: url('https://cdn.fontcdn.ir/Font/Persian/IranSansX/IranSansX.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'IranSansX';
    src: url('https://cdn.fontcdn.ir/Font/Persian/IranSansX/IranSansX-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

/* متغیرها */
.ccf-wrapper {
    --g1: #238971;
    --g2: #006B65;
    --grad: linear-gradient(135deg, #238971 0%, #006B65 100%);
    --grad-h: linear-gradient(135deg, #1d7461 0%, #005651 100%);
    --bd: #e2e2e2;
    --bg: #f8f8f6;
    --wh: #ffffff;
    --tx: #1e1e1e;
    --muted: #6e6e6e;
    --err: #e53935;
    --r: 14px;
    --rs: 9px;
    --rp: 100px;
    --sh: 0 2px 14px rgba(0,0,0,.07);
    --sh2: 0 5px 22px rgba(35,137,113,.13);
    --tr: .2s ease;
    /* فونت - ابتدا IranSansX، fallback به فونت المنتور */
    --font: 'IranSansX', var(--e-global-typography-primary-font-family, 'Vazirmatn'), Tahoma, sans-serif;
}

/* ریست */
.ccf-wrapper, .ccf-wrapper *, .ccf-wrapper *::before, .ccf-wrapper *::after {
    box-sizing: border-box;
}

.ccf-wrapper {
    font-family: var(--font);
    font-size:   1rem;
    direction:   rtl;
    max-width:   760px;
    margin:      0 auto;
    color:       var(--tx);
    line-height: 1.75;
}

/* همه المان‌ها فونت را ارث ببرند */
.ccf-wrapper button,
.ccf-wrapper input,
.ccf-wrapper textarea,
.ccf-wrapper label,
.ccf-wrapper span,
.ccf-wrapper p {
    font-family: var(--font);
}

/* =========================================
   هدر
   ========================================= */
.ccf-header {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-bottom: 24px;
    font-size:   1.15rem;
    font-weight: 700;
}

.ccf-header-icon {
    width: 26px; height: 26px;
    object-fit: contain;
    flex-shrink: 0;
}

/* =========================================
   کارت دیدگاه
   ========================================= */
.ccf-comments-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
}

.ccf-comment-item {
    background:    var(--wh);
    border:        1px solid var(--bd);
    border-radius: var(--r);
    padding:       22px 24px;
    box-shadow:    var(--sh);
    transition:    box-shadow var(--tr);
}
.ccf-comment-item:hover { box-shadow: var(--sh2); }

/* هدر کارت */
.ccf-card-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    margin-bottom:   16px;
}

.ccf-meta {
    display:     flex;
    align-items: center;
    gap:         13px;
    flex:        1;
    min-width:   0;
}

/* آواتار */
.ccf-avatar {
    width:           50px;
    height:          50px;
    border-radius:   50%;
    background:      var(--grad);
    color:           var(--wh);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.3rem;
    font-weight:     700;
    flex-shrink:     0;
    user-select:     none;
    box-shadow:      0 2px 10px rgba(35,137,113,.28);
    line-height:     1;
}
.ccf-avatar-sm { width:38px; height:38px; font-size:1rem; }

.ccf-author-info {
    display:        flex;
    flex-direction: column;
    gap:            4px;
    min-width:      0;
}

.ccf-author-label {
    font-size: .8rem;
    color:     var(--muted);
    line-height: 1;
}

.ccf-author-name {
    font-size:     1rem;
    font-weight:   700;
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}

/* لایک */
.ccf-like-btn {
    display:      inline-flex;
    align-items:  center;
    gap:          6px;
    background:   none;
    border:       none;
    cursor:       pointer;
    color:        var(--muted);
    font-size:    1rem;
    font-weight:  700;
    padding:      7px 12px;
    border-radius: 22px;
    transition:   color var(--tr), background var(--tr);
    flex-shrink:  0;
    line-height:  1;
}
.ccf-like-btn:hover:not([disabled]) {
    color: var(--g1);
    background: rgba(35,137,113,.08);
}
.ccf-like-btn[disabled] { cursor: default; }

.ccf-like-icon {
    width:      22px; height: 22px;
    object-fit: contain;
    display:    block;
    flex-shrink:0;
    transition: filter var(--tr);
    filter:     grayscale(1) opacity(.4);
}
.ccf-like-btn:hover:not([disabled]) .ccf-like-icon,
.ccf-like-btn.liked .ccf-like-icon { filter: none; }

.ccf-like-count { min-width:20px; text-align:center; }

/* متن */
.ccf-body {
    font-size:   1rem;
    line-height: 1.95;
    margin-bottom: 16px;
    word-break:  break-word;
}

/* فوتر */
.ccf-card-footer { display:flex; align-items:center; }

.ccf-reply-toggle {
    background: none;
    border:     none;
    color:      var(--g1);
    cursor:     pointer;
    font-size:  1rem;
    font-weight:700;
    padding:    0;
    transition: opacity var(--tr);
}
.ccf-reply-toggle:hover { opacity:.7; }

/* =========================================
   پاسخ‌ها (نمایشی)
   ========================================= */
.ccf-replies-list {
    margin-top:  16px;
    border-top:  1px dashed var(--bd);
    padding-top: 16px;
    display:     flex;
    flex-direction: column;
    gap:         13px;
}

.ccf-reply-item {
    background:    rgba(35,137,113,.035);
    border-radius: var(--rs);
    padding:       15px 17px;
    border-right:  3px solid var(--g1);
}
.ccf-reply-item .ccf-card-header { margin-bottom:10px; }
.ccf-reply-item .ccf-body { font-size:.95rem; margin-bottom:0; }

/* =========================================
   فرم پاسخ (inline)
   ========================================= */
.ccf-reply-wrap {
    margin-top:    18px;
    background:    rgba(35,137,113,.04);
    border:        1px solid rgba(35,137,113,.18);
    border-radius: var(--rs);
    padding:       18px 17px;
    animation:     ccfSlide .22s ease both;
}

@keyframes ccfSlide {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
}

.ccf-reply-head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   15px;
    font-size:       1rem;
    font-weight:     700;
    color:           var(--g2);
}

.ccf-reply-close {
    background: none;
    border:     none;
    color:      var(--muted);
    cursor:     pointer;
    font-size:  .9rem;
    padding:    0;
    transition: color var(--tr);
}
.ccf-reply-close:hover { color: var(--err); }

/* پیام فرم پاسخ */
.ccf-reply-msg {
    font-size:     .95rem;
    padding:       10px 14px;
    border-radius: var(--rs);
    margin-bottom: 13px;
    font-weight:   500;
    display:       none;
}
.ccf-reply-msg.ok  { background:#e8f5e9; border:1px solid #a5d6a7; color:#2e7d32; display:block; }
.ccf-reply-msg.bad { background:#ffebee; border:1px solid #ef9a9a; color:#c62828; display:block; }

.ccf-reply-fields { display:flex; flex-direction:column; gap:13px; }

.ccf-reply-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
}

/* ورودی‌های پاسخ */
.ccf-ri, .ccf-rt {
    width:         100%;
    border:        1.5px solid var(--bd);
    border-radius: var(--rs);
    padding:       12px 14px;
    font-size:     1rem;
    font-family:   var(--font);
    color:         var(--tx);
    background:    var(--wh);
    outline:       none;
    direction:     rtl;
    transition:    border-color var(--tr), box-shadow var(--tr);
    appearance:    none;
    -webkit-appearance: none;
}
.ccf-ri[type="tel"] { direction:ltr; text-align:right; }
.ccf-ri::placeholder, .ccf-rt::placeholder { color:#b5b5b5; font-size:.9rem; }
.ccf-ri:focus, .ccf-rt:focus { border-color:var(--g1); box-shadow:0 0 0 3px rgba(35,137,113,.13); }
.ccf-ri.err, .ccf-rt.err    { border-color:var(--err); box-shadow:0 0 0 3px rgba(229,57,53,.1); }
.ccf-rt { resize:vertical; min-height:95px; }

.ccf-reply-actions { display:flex; justify-content:flex-end; }

/* دکمه ارسال پاسخ */
.ccf-reply-send {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    background:    var(--grad);
    color:         var(--wh);
    border:        none;
    border-radius: var(--rp);
    padding:       12px 26px;
    font-size:     1rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    opacity var(--tr), transform var(--tr), box-shadow var(--tr);
    line-height:   1;
}
.ccf-reply-send img {
    width:13px; height:13px;
    object-fit:contain;
    flex-shrink:0;
    filter:brightness(0) invert(1);
}
.ccf-reply-send:hover:not([disabled]) {
    opacity:.88; transform:translateY(-1px);
    box-shadow:0 5px 16px rgba(35,137,113,.32);
}
.ccf-reply-send[disabled] { opacity:.65; cursor:not-allowed; }

/* =========================================
   خالی
   ========================================= */
.ccf-empty {
    text-align:    center;
    padding:       36px 20px;
    color:         var(--muted);
    background:    var(--wh);
    border-radius: var(--r);
    border:        1px dashed var(--bd);
    margin-bottom: 26px;
    font-size:     1rem;
}

/* =========================================
   فرم اصلی
   ========================================= */
.ccf-form-wrap {
    background:    var(--bg);
    border:        1px solid var(--bd);
    border-radius: var(--r);
    padding:       30px 26px 32px;
    box-shadow:    var(--sh);
}

.ccf-subtitle {
    text-align:    center;
    color:         var(--muted);
    font-size:     1rem;
    margin-bottom: 24px;
}

.ccf-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   18px;
    margin-bottom:         18px;
}

.ccf-field { display:flex; flex-direction:column; gap:8px; }
.ccf-field-full { margin-bottom:18px; }

.ccf-field label { font-size:1rem; font-weight:700; color:var(--tx); line-height:1; }
.ccf-req { color:var(--err); margin-right:2px; }

/* ورودی‌های اصلی */
.ccf-field input[type="text"],
.ccf-field input[type="tel"],
.ccf-field textarea {
    width:         100%;
    border:        1.5px solid var(--bd);
    border-radius: var(--rs);
    padding:       13px 15px;
    font-size:     1rem;
    font-family:   var(--font);
    color:         var(--tx);
    background:    var(--wh);
    outline:       none;
    direction:     rtl;
    transition:    border-color var(--tr), box-shadow var(--tr);
    appearance:    none;
    -webkit-appearance: none;
}
.ccf-field input[type="tel"] { direction:ltr; text-align:right; }
.ccf-field input::placeholder, .ccf-field textarea::placeholder { color:#b5b5b5; font-size:.9rem; }
.ccf-field input:focus, .ccf-field textarea:focus { border-color:var(--g1); box-shadow:0 0 0 3px rgba(35,137,113,.14); }
.ccf-field input.err, .ccf-field textarea.err { border-color:var(--err); box-shadow:0 0 0 3px rgba(229,57,53,.11); }
.ccf-field textarea { resize:vertical; min-height:130px; }

/* اکشن */
.ccf-actions { display:flex; justify-content:flex-end; margin-top:8px; }

/* =========================================
   دکمه ارسال اصلی
   متن → آیکون کوچک سمت چپ
   ========================================= */
.ccf-btn-submit {
    display:        inline-flex;
    align-items:    center;
    flex-direction: row;          /* متن ابتدا */
    gap:            10px;
    background:     var(--grad);
    color:          var(--wh);
    border:         none;
    border-radius:  var(--rp);
    padding:        14px 34px;
    font-size:      1.05rem;
    font-weight:    700;
    cursor:         pointer;
    transition:     opacity var(--tr), transform var(--tr), box-shadow var(--tr);
    line-height:    1;
}

/* آیکون - کوچک و بعد از متن (در RTL = سمت چپ) */
.ccf-btn-icon {
    width:       14px;
    height:      14px;
    object-fit:  contain;
    flex-shrink: 0;
    filter:      brightness(0) invert(1);
    display:     block;
}

.ccf-btn-submit:hover:not([disabled]) {
    opacity:.88; transform:translateY(-1px);
    box-shadow:0 6px 22px rgba(35,137,113,.36);
}
.ccf-btn-submit:active:not([disabled]) { transform:translateY(0); }
.ccf-btn-submit[disabled] { opacity:.65; cursor:not-allowed; }

/* =========================================
   پیام اصلی
   ========================================= */
.ccf-alert {
    border-radius: var(--rs);
    padding:       13px 17px;
    margin-bottom: 20px;
    font-size:     1rem;
    font-weight:   500;
    line-height:   1.6;
    animation:     ccfFade .28s ease both;
}
.ccf-alert.ok  { background:#e8f5e9; border:1px solid #a5d6a7; color:#2e7d32; }
.ccf-alert.bad { background:#ffebee; border:1px solid #ef9a9a; color:#c62828; }

@keyframes ccfFade {
    from { opacity:0; transform:translateY(-5px); }
    to   { opacity:1; transform:translateY(0); }
}

/* =========================================
   اسپینر
   ========================================= */
.ccf-spin {
    display:          inline-block;
    width:            16px; height:16px;
    border:           2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius:    50%;
    animation:        ccfSpin .65s linear infinite;
    flex-shrink:      0;
}
@keyframes ccfSpin { to { transform:rotate(360deg); } }

/* =========================================
   ریسپانسیو
   ========================================= */
@media (max-width: 680px) {
    .ccf-row, .ccf-reply-row { grid-template-columns:1fr; gap:14px; }
    .ccf-form-wrap { padding:22px 18px 26px; }
    .ccf-comment-item { padding:18px 16px; }
}

@media (max-width: 480px) {
    .ccf-wrapper  { font-size:.95rem; }
    .ccf-form-wrap { padding:18px 14px 22px; }
    .ccf-comment-item { padding:15px 13px; }
    .ccf-avatar { width:42px; height:42px; font-size:1.1rem; }
    .ccf-actions { justify-content:stretch; }
    .ccf-btn-submit { width:100%; justify-content:center; padding:13px 20px; }
    .ccf-reply-actions { justify-content:stretch; }
    .ccf-reply-send { width:100%; justify-content:center; }
    .ccf-header { font-size:1.05rem; }
    .ccf-reply-wrap { padding:15px 13px; }
}

@media (max-width: 360px) {
    .ccf-card-header { flex-wrap:wrap; }
}