/* ==================================================================
   APC — view-post.php
   Design tokens
   ================================================================== */

:root{

    --vp-bg:#f5f7fb;
    --vp-card-bg:#FFFFFF;
    --vp-border:#E7EAF3;

    --vp-text:#181B2E;
    --vp-text-muted:#6B7280;
    --vp-text-soft:#9AA1B4;

    --vp-primary:#2F5EFF;
    --vp-primary-dark:#1E46D6;
    --vp-primary-light:#EAF0FF;

    --vp-danger:#E23E57;
    --vp-danger-light:#FDEBEE;

    --vp-purple:#7C5CFC;
    --vp-purple-light:#F1EDFF;

    --vp-orange:#F59E0B;
    --vp-orange-light:#FFF4E0;

    --vp-green:#16A34A;
    --vp-green-light:#E8F8EE;

    --vp-teal:#0D9488;
    --vp-teal-light:#E4F5F3;

    --vp-pink:#DB2777;
    --vp-pink-light:#FCE7F3;

    --vp-gray:#6B7280;
    --vp-gray-light:#EEF0F5;

    --vp-radius-lg:20px;
    --vp-radius-md:14px;
    --vp-radius-sm:10px;
    --vp-radius-pill:999px;

    --vp-shadow-card: 0 8px 24px rgba(20,20,43,.06);
    --vp-shadow-pop: 0 16px 40px rgba(20,20,43,.18);

    --vp-font-display:'Plus Jakarta Sans', 'Inter', sans-serif;
    --vp-font-body:'Inter', sans-serif;

}

/* ==================================================================
   Base
   ================================================================== */

body{
    background-color: #f5f7fb !important;
    font-family:var(--vp-font-body);
    color:var(--vp-text);
}

.vp-page{
    padding:32px 16px 80px;
}

.vp-container{
    max-width:820px;
    margin:0 auto;
}

/* ==================================================================
   1. Topbar
   ================================================================== */

.vp-topbar{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:20px;
}

.vp-menu-btn{
    width:40px;
    height:40px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--vp-card-bg);
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-sm);
    color:var(--vp-text);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
}

.vp-menu-btn:hover{
    background:var(--vp-gray-light);
}

.vp-breadcrumb{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:8px;
    font-size:.9rem;
    font-weight:500;
    color:var(--vp-text-muted);
    overflow:hidden;
    white-space:nowrap;
}

/*==================================================
Toggle Breadcrumb
==================================================*/

body.vp-nav-open .vp-breadcrumb{

    opacity:0;
    transform:translateX(-20px);
    pointer-events:none;
    visibility:hidden;

}

.vp-breadcrumb a{
    color:var(--vp-text-muted);
    text-decoration:none;
}

.vp-breadcrumb a:hover{
    color:var(--vp-primary);
}

.vp-crumb-sep{
    color:var(--vp-text-soft);
}

.vp-crumb-current{
    color:var(--vp-text);
    font-weight:600;
}

.vp-back-btn{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 16px;
    background:var(--vp-card-bg);
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-pill);
    color:var(--vp-primary);
    font-size:.88rem;
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    transition:background .15s ease, border-color .15s ease;
}

.vp-back-btn:hover{
    background:var(--vp-primary-light);
    border-color:var(--vp-primary-light);
    color:var(--vp-primary-dark);
}

/* ==================================================================
   2. Post card
   ================================================================== */

.vp-post-card{
    background:var(--vp-card-bg);
    border-radius:var(--vp-radius-lg);
    box-shadow:var(--vp-shadow-card);
    padding:28px 28px 24px;
    margin-bottom:28px;
}

.vp-post-head{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
}

.vp-avatar-link{
    flex:0 0 auto;
    line-height:0;
}

.vp-avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--vp-primary-light);
}

.vp-reply-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid var(--vp-gray-light);
}

.vp-post-author,
.vp-reply-author{
    flex:1 1 auto;
    min-width:0;
}

.vp-author-line{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.vp-author-name{
    font-family:var(--vp-font-display);
    font-weight:700;
    font-size:.92rem;
    color:var(--vp-text);
    text-decoration:none;
}

.vp-author-name:hover{
    color:var(--vp-primary);
}

.vp-level-pill{
    display:inline-flex;
    align-items:center;
    padding:2px 8px;
    background:var(--vp-primary-light);
    color:var(--vp-primary-dark);
    font-size:.68rem;
    font-weight:700;
    border-radius:var(--vp-radius-pill);
}

.vp-flag{
    width:22px;
    height:16px;
    object-fit:cover;
    border-radius:2px;
}

.vp-post-meta{
    margin-top:2px;
    font-size:.72rem;
    color:var(--vp-text-muted);
}

/* ---- dropdown menu (post + réponses) ---- */

.vp-menu-wrap{
    position:relative;
    flex:0 0 auto;
}

.vp-menu-toggle{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:50%;
    color:var(--vp-text-muted);
    cursor:pointer;
    transition:background .15s ease;
}

.vp-menu-toggle:hover{
    background:var(--vp-gray-light);
    color:var(--vp-text);
}

.vp-menu-toggle-sm{
    width:28px;
    height:28px;
}

.vp-dropdown{
    position:absolute;
    top:calc(100% + 6px);
    right:0;
    min-width:190px;
    background:var(--vp-card-bg);
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-md);
    box-shadow:var(--vp-shadow-pop);
    padding:6px;
    display:none;
    flex-direction:column;
    z-index:30;
}

.vp-menu-open .vp-dropdown{
    display:flex;
}

.vp-dropdown-item{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    padding:9px 10px;
    background:none;
    border:none;
    border-radius:var(--vp-radius-sm);
    font-size:.88rem;
    font-weight:500;
    color:var(--vp-text);
    text-decoration:none;
    text-align:left;
    cursor:pointer;
}

.vp-dropdown-item:hover{
    background:var(--vp-gray-light);
}

.vp-dropdown-edit:hover{
    background:var(--vp-primary-light);
    color:var(--vp-primary-dark);
}

.vp-dropdown-danger{
    color:var(--vp-danger);
}

.vp-dropdown-danger:hover{
    background:var(--vp-danger-light);
    color:var(--vp-danger);
}

/* ---- type badge (post) ---- */

.vp-type-badge{
    display:inline-flex;
    align-items:center;
    padding:5px 14px;
    border-radius:var(--vp-radius-pill);
    font-size:.82rem;
    font-weight:700;
    margin-bottom:14px;
}

.vp-type-question{ background:var(--vp-purple-light); color:var(--vp-purple); }
.vp-type-post{     background:var(--vp-primary-light); color:var(--vp-primary-dark); }
.vp-type-image{    background:var(--vp-teal-light); color:var(--vp-teal); }
.vp-type-video{    background:var(--vp-pink-light); color:var(--vp-pink); }
.vp-type-link{     background:var(--vp-orange-light); color:var(--vp-orange); }

.vp-post-title{
    font-family:var(--vp-font-display);
    font-size:1.7rem;
    font-weight:800;
    line-height:1.25;
    color:var(--vp-text);
    margin-bottom:14px;
}

.vp-post-content{
    font-size:1.02rem;
    line-height:1.75;
    color:var(--vp-text);
    margin-bottom:6px;
}

/* rich content shared between post + replies */

.vp-post-content h1, .vp-post-content h2, .vp-post-content h3,
.vp-reply-content h1, .vp-reply-content h2, .vp-reply-content h3{
    font-family:var(--vp-font-display);
    margin-top:1rem;
    margin-bottom:.6rem;
}

.vp-post-content p, .vp-reply-content p{
    margin-bottom:.75rem;
}

.vp-post-content ul, .vp-post-content ol,
.vp-reply-content ul, .vp-reply-content ol{
    padding-left:1.4rem;
    margin-bottom:.9rem;
}

.vp-post-content blockquote, .vp-reply-content blockquote{
    border-left:4px solid var(--vp-primary);
    padding-left:15px;
    color:var(--vp-text-muted);
    margin:1rem 0;
}

.vp-post-content img, .vp-reply-content img{
    max-width:100%;
    height:auto;
    border-radius:12px;
}

.vp-post-content a, .vp-reply-content a{
    color:var(--vp-primary);
    text-decoration:none;
}

.vp-post-content a:hover, .vp-reply-content a:hover{
    text-decoration:underline;
}

/* ---- media ---- */

.vp-media-image{
    margin:16px 0 6px;
}

.vp-media-image img{
    width:100%;
    border-radius:var(--vp-radius-md);
    display:block;
}

.vp-media-video{
    margin:16px 0 6px;
}

.vp-video-frame{
    border-radius:var(--vp-radius-md);
    display:block;
}

.vp-media-fallback{
    padding:16px;
    border-radius:var(--vp-radius-md);
    font-weight:600;
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.vp-media-fallback-fb{
    background:var(--vp-primary-light);
    color:var(--vp-primary-dark);
}

.vp-media-fallback-tiktok{
    background:var(--vp-text);
    color:#fff;
}

.vp-fallback-btn{
    padding:8px 18px;
    background:var(--vp-primary);
    color:#fff;
    border-radius:var(--vp-radius-pill);
    text-decoration:none;
    font-size:.85rem;
    font-weight:700;
}

.vp-fallback-btn:hover{
    background:var(--vp-primary-dark);
    color:#fff;
}

.vp-fallback-btn-dark{
    background:#000;
}

.vp-fallback-btn-dark:hover{
    background:#222;
}

/* ---- link card ---- */

.vp-link-card{
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
    margin:16px 0 6px;
    background:var(--vp-bg);
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-md);
    text-decoration:none;
    transition:border-color .15s ease, background .15s ease;
}

.vp-link-card:hover{
    border-color:var(--vp-primary);
    background:var(--vp-primary-light);
}

.vp-link-icon{
    flex:0 0 auto;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--vp-primary-light);
    border-radius:50%;
    font-size:1.1rem;
}

.vp-link-text{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.vp-link-title{
    font-weight:700;
    color:var(--vp-text);
    font-size:.94rem;
}

.vp-link-url{
    font-size:.82rem;
    color:var(--vp-text-muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.vp-link-external{
    flex:0 0 auto;
    color:var(--vp-text-muted);
}

/* ---- footer : stats + actions ---- */

.vp-divider{
    border:none;
    border-top:1px solid var(--vp-border);
    margin:22px 0 18px;
}

.vp-post-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px;
}

.vp-post-stats{
    display:flex;
    align-items:center;
    gap:18px;
    font-size:.9rem;
    font-weight:600;
    color:var(--vp-text-muted);
}

.vp-post-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.vp-action-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 16px;
    background:var(--vp-card-bg);
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-pill);
    font-size:.86rem;
    font-weight:600;
    color:var(--vp-text);
    text-decoration:none;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
}

.vp-action-btn:hover{
    background:var(--vp-gray-light);
}

.vp-action-liked{
    background:var(--vp-danger-light);
    border-color:var(--vp-danger-light);
    color:var(--vp-danger);
}

.vp-action-liked:hover{
    background:var(--vp-danger-light);
    color:var(--vp-danger);
}

/* ==================================================================
   3+4. Replies section
   ================================================================== */

.vp-replies-section{
    background:var(--vp-card-bg);
    border-radius:var(--vp-radius-lg);
    box-shadow:var(--vp-shadow-card);
    padding:26px 28px 28px;
}

.vp-replies-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:18px;
    gap:12px;
    flex-wrap:wrap;
}

.vp-replies-title{
    font-family:var(--vp-font-display);
    font-size:1.2rem;
    font-weight:800;
    color:var(--vp-text);
    margin:0;
}

.vp-sort-select{
    padding:7px 12px;
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-sm);
    background:var(--vp-card-bg);
    font-size:.84rem;
    font-weight:600;
    color:var(--vp-text-muted);
}

.vp-replies-preview{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.vp-no-replies{
    color:var(--vp-text-muted);
    font-size:.92rem;
    padding:12px 0;
}

/* ---- reply card ---- */

.vp-reply-card{
    background:var(--vp-bg);
    border:1px solid var(--vp-border);

    border-radius:14px;

    padding:12px 14px;

    box-shadow:0 2px 8px rgba(15,23,42,.05);
}

.vp-reply-top{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:8px;

}

.vp-reply-badge{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    padding:3px 9px;
    border-radius:var(--vp-radius-pill);
    font-size:.66rem;
    font-weight:700;
    white-space:nowrap;
}

.vp-badge-comment{     background:var(--vp-gray-light);   color:var(--vp-gray); }
.vp-badge-answer{      background:var(--vp-green-light);  color:var(--vp-green); }
.vp-badge-correction{  background:var(--vp-orange-light); color:var(--vp-orange); }
.vp-badge-explanation{ background:var(--vp-purple-light); color:var(--vp-purple); }
.vp-badge-tip{         background:var(--vp-primary-light);color:var(--vp-primary-dark); }
.vp-badge-mini_lesson{ background:var(--vp-teal-light);   color:var(--vp-teal); }

.vp-reply-content{
    font-size:.95rem;
    line-height:1.7;
    color:var(--vp-text);
}

/* ---- load more / divider ---- */

.vp-loadmore-btn{
    display:block;
    width:100%;
    padding:11px;
    margin-top:18px;
    background:var(--vp-card-bg);
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-pill);
    font-size:18px;
    font-weight:700;
    color:var(--vp-primary);
    cursor:pointer;
    transition:background .15s ease;
}

.vp-loadmore-btn:hover{
    background:var(--vp-primary-light);
}

.vp-or-divider{
    display:flex;
    align-items:center;
    text-align:center;
    color:var(--vp-text-soft);
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.04em;
    margin:16px 0;
}

.vp-or-divider::before,
.vp-or-divider::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--vp-border);
}

.vp-or-divider span{
    padding:0 12px;
}

/* ---- add reply form ---- */

.vp-reply-form-card{
    margin-top:6px;
}

.vp-reply-form-title{
    font-family:var(--vp-font-display);
    font-size:1.05rem;
    font-weight:800;
    margin-bottom:14px;
    color:var(--vp-text);
}

.vp-form-row{
    margin-bottom:14px;
}

.vp-form-label{
    display:block;
    font-size:.84rem;
    font-weight:700;
    color:var(--vp-text-muted);
    margin-bottom:6px;
}

.vp-form-select{
    width:100%;
    max-width:220px;
    padding:9px 12px;
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-sm);
    background:var(--vp-card-bg);
    font-size:.88rem;
    font-weight:600;
    color:var(--vp-text);
}

.vp-form-textarea{
    width:100%;
    border:1px solid var(--vp-border);
    border-radius:var(--vp-radius-md);
    padding:12px;
    font-size:.92rem;
    font-family:var(--vp-font-body);
    resize:vertical;
}

.vp-submit-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 26px;
    background:var(--vp-primary);
    border:none;
    border-radius:var(--vp-radius-pill);
    color:#fff;
    font-size:.9rem;
    font-weight:700;
    cursor:pointer;
    transition:background .15s ease;
}

.vp-submit-btn:hover{
    background:var(--vp-primary-dark);
}

/* ==================================================================
   5. Modale — All comments
   ================================================================== */

.vp-modal-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,17,32,.55);
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:1000;
}

.vp-modal-overlay.vp-modal-visible{
    display:flex;
}

body.vp-modal-locked{
    overflow:hidden;
}

.vp-modal{
    width:100%;
    max-width:640px;
    max-height:88vh;
    background:var(--vp-card-bg);
    border-radius:var(--vp-radius-lg);
    box-shadow:var(--vp-shadow-pop);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.vp-modal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 22px;
    border-bottom:1px solid var(--vp-border);
    flex:0 0 auto;
}

.vp-modal-header h3{
    font-family:var(--vp-font-display);
    font-size:1.05rem;
    font-weight:800;
    margin:0;
    color:var(--vp-text);
}

.vp-modal-header-right{
    display:flex;
    align-items:center;
    gap:10px;
}

.vp-modal-close{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-color: #2F5EFF !important;
    border:none;
    border-radius:50%;
    color:white !important;
    font-size:1rem;
    cursor:pointer;
}

.vp-modal-close:hover{
    background:var(--vp-danger-light);
    color:var(--vp-danger);
}

.vp-modal-body{
    flex:1 1 auto;
    overflow-y:auto;
    padding:18px 22px;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.vp-modal-footer{
    flex:0 0 auto;
    padding:18px 22px;
    border-top:1px solid var(--vp-border);
}

.vp-modal-footer .vp-reply-form-card{
    margin-top:0;
}

/* ==================================================================
   Accessibility
   ================================================================== */

a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:2px solid var(--vp-primary);
    outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
    *{
        transition:none !important;
    }
}

/* ==================================================================
   Responsive
   ================================================================== */

@media (max-width:640px){

    .vp-page{
        padding:20px 12px 60px;
    }

    .vp-post-card,
    .vp-replies-section{
        padding:20px;
        border-radius:16px;
    }

    .vp-post-title{
        font-size:1.35rem;
    }

    .vp-breadcrumb{
        display:none;
    }

    .vp-topbar{
        justify-content:space-between;
    }

    .vp-post-footer{
        align-items:flex-start;
        flex-direction:column;
    }

    .vp-modal{
        max-height:92vh;
    }

}  


/*==================================================
Replies Title
==================================================*/

.vp-replies-title-wrap{

    display:flex;

    align-items:center;

    gap:14px;

}

.vp-replies-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#EEF4FF,#DCE8FF);

    color:var(--vp-primary);

    font-size:1.15rem;

    flex-shrink:0;

}

.vp-replies-title{

    margin:0;

    font-size:1.25rem;

    font-weight:800;

    font-family:var(--vp-font-display);

    line-height:1.1;

}

.vp-replies-subtitle{

    margin-top:3px;

    font-size:.82rem;

    color:var(--vp-text-muted);

    font-weight:500;

}


/*==================================================
Collapsible Comment
==================================================*/

.vp-see-more{

    display:inline-block;

    margin-top:8px;

    color:var(--vp-primary);

    font-size:.84rem;

    font-weight:700;

    cursor:pointer;

    text-decoration:none;

}

.vp-see-more:hover{

    text-decoration:underline;

}


/*==================================================
Clickable Stats
==================================================*/

.vp-stat-clickable{

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:4px 10px;

    border-radius:10px;

    transition:all .25s ease;

}

.vp-stat-clickable:hover{

    background:#EEF4FF;

    color:var(--vp-primary);

}