/* ============================================================
   user.css — Likes, Comments, Auth pages, User nav
   Direction: RTL (Arabic). Loaded from _Layout.cshtml.
   ============================================================ */

/* ── Like button ──────────────────────────────────────────── */
.like-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .9rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    background: var(--white);
    color: var(--muted);
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s, color .18s, background .18s, transform .12s;
    user-select: none;
}
.like-btn:hover {
    border-color: var(--red-700);
    color: var(--red-700);
}
.like-btn.liked {
    background: var(--red-700, #c8102e);
    border-color: var(--red-700, #c8102e);
    color: #fff;
}
.like-btn.liked:hover {
    background: var(--red-800, #a50d25);
    border-color: var(--red-800, #a50d25);
}
.like-btn:active { transform: scale(.94); }
.like-btn .like-icon { width: 1rem; height: 1rem; }
.like-btn .like-count { min-width: 1ch; }

/* ── Comments section ─────────────────────────────────────── */
.comments-section {
    margin-top: var(--sp-8);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-6);
}
.comments-section h2 {
    font-size: var(--text-xl);
    font-weight: 800;
    margin-bottom: var(--sp-5);
    color: var(--ink);
}
.comments-section h2 span { color: var(--red-700); }

/* Comment form */
.comment-form {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-4);
    margin-bottom: var(--sp-6);
}
.comment-form textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: var(--sp-3);
    font-family: inherit;
    font-size: var(--text-sm);
    color: var(--ink);
    background: var(--surface);
    transition: border-color .15s;
    box-sizing: border-box;
}
.comment-form textarea:focus {
    outline: none;
    border-color: var(--red-700);
}
.comment-form .comment-form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--sp-2);
}

/* Guest prompt */
.comment-guest-prompt {
    text-align: center;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-6);
    color: var(--muted);
    font-size: var(--text-sm);
}
.comment-guest-prompt a { color: var(--red-700); font-weight: 600; }

/* Comment list */
.comment-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.comment-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--sp-3);
}
.comment-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--red-700);
    color: #fff;
    font-weight: 700;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comment-bubble {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: var(--sp-3) var(--sp-4);
}
.comment-meta {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}
.comment-author { font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.comment-date   { font-size: var(--text-xs); color: var(--muted); }
.comment-body   { font-size: var(--text-sm); color: var(--ink); white-space: pre-line; line-height: 1.6; }

.comment-empty {
    text-align: center;
    color: var(--muted);
    font-size: var(--text-sm);
    padding: var(--sp-6) 0;
}

/* ── Auth pages (login / register) ───────────────────────── */
.auth-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--sp-4);
}
.auth-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg, 16px);
    padding: var(--sp-8) var(--sp-8);
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 24px rgba(0,0,0,.07);
}
.auth-card .auth-logo {
    text-align: center;
    margin-bottom: var(--sp-5);
}
.auth-card .auth-logo img { width: 52px; height: 52px; }
.auth-card h1 {
    text-align: center;
    font-size: var(--text-xl);
    font-weight: 900;
    color: var(--ink);
    margin-bottom: var(--sp-6);
}
.auth-card h1 span { color: var(--red-700); }

.auth-field { margin-bottom: var(--sp-4); }
.auth-field label {
    display: block;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    margin-bottom: var(--sp-1);
}
.auth-field input {
    width: 100%;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    padding: .55rem .8rem;
    font-size: var(--text-sm);
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    transition: border-color .15s;
    box-sizing: border-box;
}
.auth-field input:focus {
    outline: none;
    border-color: var(--red-700);
}

.auth-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--r-sm);
    padding: var(--sp-3) var(--sp-4);
    color: #b91c1c;
    font-size: var(--text-sm);
    margin-bottom: var(--sp-4);
}

.auth-submit {
    width: 100%;
    margin-top: var(--sp-2);
}

.auth-footer {
    text-align: center;
    margin-top: var(--sp-5);
    font-size: var(--text-sm);
    color: var(--muted);
}
.auth-footer a { color: var(--red-700); font-weight: 600; }

/* ── User nav (navbar dropdown) ──────────────────────────── */
.user-nav-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.user-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    background: var(--white);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.user-nav-btn:hover { border-color: var(--red-700); }
.user-nav-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--red-700);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-nav-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    min-width: 160px;
    z-index: 500;
    overflow: hidden;
    display: none;
}
.user-nav-menu:hover .user-nav-dropdown,
.user-nav-menu:focus-within .user-nav-dropdown { display: block; }

.user-nav-dropdown a,
.user-nav-dropdown button {
    display: block;
    width: 100%;
    text-align: right;
    padding: var(--sp-2) var(--sp-4);
    font-size: var(--text-sm);
    color: var(--ink);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background .12s;
}
.user-nav-dropdown a:hover,
.user-nav-dropdown button:hover { background: var(--surface); color: var(--red-700); }

/* Meta counts in video cards */
.vcard-meta .meta-likes { color: var(--red-700); font-weight: 600; }

/* Responsive */
@media (max-width: 640px) {
    .auth-card { padding: var(--sp-6) var(--sp-5); }
    .comment-item { grid-template-columns: 30px 1fr; }
    .comment-avatar { width: 30px; height: 30px; font-size: 11px; }
}