/**
 * TR Achievements - front-end styles.
 *
 * Reproduces the original TechReader comment gamification exactly: the points
 * trophy, the likes/comments reputation, the per-level star with its hover
 * tooltip, the rank pill, and the like/dislike buttons. Self-contained: icons
 * are bundled in the plugin (assets/images, assets/font), so it renders the
 * same on any domain, with or without the theme stylesheet.
 *
 * Brand cyan #00b6e4. Label text #333. Icons are 35x46 background-image spans.
 */

/* ---------- icon font (thumbs) ---------- */
@font-face {
    font-family: 'fontello';
    src: url('../font/fontello.woff') format('woff'),
         url('../font/fontello.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.icon-thumbs-up-1:before   { content: '\e800'; font-family: 'fontello'; font-size: 18px; line-height: 1; font-style: normal; }
.icon-thumbs-down-1:before { content: '\e801'; font-family: 'fontello'; font-size: 18px; line-height: 1; font-style: normal; }

/* ---------- the achievement panel (comment bar) ---------- */
.techreader-achievement-panel {
    background: rgba(0, 0, 0, 0.02) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    display: block !important;
    height: 40px !important;
    margin: 45px 0 10px 5px !important;
    position: relative !important;
    width: calc(100% - 10px) !important;
}
.techreader-achievement-container {
    position: absolute !important;
    left: 0;
    top: 0;
}

/* ---------- rank pill (emitted by the theme; styled here too) ---------- */
.techreader-achievement-rank {
    background: #00b6e4 !important;
    border-radius: 3px !important;
    color: #fff !important;
    display: inline !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: normal !important;
    margin-left: 10px !important;
    padding: 4px 11px !important;
    position: relative;
    z-index: 2;
}
.depth-1 .techreader-achievement-rank.anon-user { background: #e9e9e9 !important; color: #777 !important; }
.depth-2 .techreader-achievement-rank.anon-user { background: #dedede !important; color: #777 !important; }
.depth-3 .techreader-achievement-rank.anon-user { background: #d3d3d3 !important; color: #777 !important; }
.depth-4 .techreader-achievement-rank.anon-user { background: #ddd !important; color: #777 !important; }
.techreader-achievement-rank.anon-user { background: #e9e9e9 !important; color: #777 !important; }

/* ---------- points (trophy) ---------- */
.trophy-points-container { display: inline-block; }
.trophy-points-icon {
    background: url('../images/trophy3.png') no-repeat !important;
    background-position: 10px 11px !important;
    background-size: 16px !important;
    display: block !important;
    float: left !important;
    height: 46px !important;
    width: 35px !important;
}
.trophy-points {
    display: inline-block !important;
    float: left !important;
    padding: 11px 0 0 0 !important;
    font-size: 15px;
    color: #333;
    line-height: 25px;
}
.trophy-points-container:hover .trophy-points { color: #00b6e4; font-weight: bold; }

/* ---------- reputation: likes / comments ---------- */
.votes-rep-container { display: inline-block; position: relative; }
.votes-rep-icon {
    background: url('../images/thumbup.png') no-repeat !important;
    background-position: 10px 11px !important;
    background-size: 17px !important;
    display: block !important;
    float: left !important;
    height: 46px !important;
    margin-top: -1px;
    margin-left: 15px !important;
    width: 35px !important;
}
.votes-rep {
    display: inline-block !important;
    float: left !important;
    margin-left: 3px !important;
    padding: 11px 0 0 0 !important;
    font-size: 14px;
    color: #333;
}
.total-comments-icon {
    background: url('../images/stats2.png') no-repeat !important;
    background-position: 10px 12px !important;
    background-size: 19px !important;
    display: block !important;
    float: left !important;
    height: 46px !important;
    margin-left: 15px !important;
    width: 35px !important;
}
.total-comments {
    display: inline-block !important;
    float: left !important;
    margin-left: 3px !important;
    padding: 11px 0 0 0 !important;
    font-size: 14px;
    color: #333;
}

/* ---------- level star + hover tooltip ---------- */
.star-level-container { display: inline-block; position: relative; }
.star-level-icon {
    background: url('../images/star2.png') no-repeat !important;
    background-position: 10px 11px !important;
    background-size: 18px !important;
    display: block !important;
    float: left !important;
    height: 46px !important;
    margin-left: 15px !important;
    width: 35px !important;
}
.star-level {
    display: inline-block !important;
    float: left !important;
    margin-left: 3px !important;
    padding: 11px 0 0 0 !important;
    font-size: 15px;
    color: #333;
    line-height: 25px;
}
.star-level-container:hover { cursor: pointer !important; }
.star-level-container:hover .star-level { color: #00b6e4; font-weight: bold; }

.star-level-comments,
.comments-hoverlay,
.votes-hoverlay {
    background: #00b6e4 !important;
    border-radius: 3px !important;
    color: #fff !important;
    display: none !important;
    font-family: 'Open Sans', Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: bold !important;
    padding: 4px 7px !important;
    position: absolute !important;
    margin-left: -34px !important;
    margin-top: 6px !important;
    z-index: 9;
    box-shadow: -1px 2px 7px rgba(27, 105, 125, 0.7);
    white-space: nowrap;
}
.star-level-container:hover .star-level-comments,
.star-level-container:hover .comments-hoverlay,
.votes-rep-container:hover .votes-hoverlay { display: block !important; }

/* ---------- anonymous (guest) desaturated ---------- */
.star-level-icon.anon-user,
.votes-rep-icon.anon-user,
.trophy-points-icon.anon-user,
.total-comments-icon.anon-user { filter: grayscale(100%) !important; }

/* ---------- Awards chip (inline-block like its siblings so it renders
   LAST in DOM order; a float here would jump left of the inline items) ---------- */
.tr-achievements-link-container {
    display: inline-block;
    height: 46px;
    margin: 0 0 0 15px;
    vertical-align: top;
}
.tr-achievements-link {
    display: inline-block;
    color: #333 !important;
    font-size: 15px;
    padding: 11px 4px 0 0;
    line-height: 25px;
    text-decoration: none !important;
}
.tr-achievements-link:hover { color: #00b6e4 !important; font-weight: bold; text-decoration: none !important; }
.tr-achievements-icon {
    background: url('../images/badge.png') no-repeat !important;
    background-position: center !important;
    background-size: 16px !important;
    display: inline-block;
    height: 20px;
    width: 18px;
    margin-right: 4px;
    vertical-align: -4px;
}

/* ---------- vote buttons ---------- */
.vortex-container-vote-comment { margin-top: 8px; }
.vortex-container-vote-comment.vortex-align-left { float: left; margin-right: 10px; }
.vortex-container-like-comment,
.vortex-container-dislike-comment { font-size: 13px; }
.vortex-p-like-comment,
.vortex-p-dislike-comment { color: #828384; text-decoration: none; }
.vortex-p-like-comment:hover, .vortex-p-like-comment:focus,
.vortex-p-dislike-comment:hover, .vortex-p-dislike-comment:focus { text-decoration: none !important; }
.vortex-p-like-comment:hover      { color: #4898d6; }
.vortex-p-like-active-comment     { color: #1b7fcc !important; }
.vortex-p-dislike-comment:hover   { color: #0a0101; }
.vortex-p-dislike-active-comment  { color: #0a0101 !important; }
.icon-thumbs-up-1 { margin-right: 10px; }
.icon-thumbs-down-1 { margin-right: 10px; }
.icon-thumbs-down-1:before { vertical-align: -2px; }
.tr-vote-count { margin-left: 2px; font-size: 15px; color: #333 !important; }
.vortex-container-vote-comment.tr-loading { pointer-events: none; }

/* ---------- clear the floats inside the container ---------- */
.techreader-achievement-container:after,
.vortex-container-vote-comment:after { content: ''; display: table; clear: both; }

/* ---------- responsive ---------- */
@media (max-width: 767px) {
    .comment .techreader-achievement-panel { margin-top: 8px !important; font-size: 12px; line-height: 20px; }
    .total-comments span { display: none; }
    .trophy-points-icon { width: 31px !important; }
    .total-comments, .star-level { margin-left: -1px !important; }
    .total-comments-icon, .star-level-icon { margin-left: 5px !important; }
}

/* ---------- user awards page: badge grid inside the bio tabs ---------- */
.tr-badges-box { width: 100% !important; clear: both; }
.tr-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.tr-award-badge {
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    padding: 10px 12px;
}
.tr-award-badge p { margin: 0; }
.tr-award-badge .tr-award-name { font-weight: bold; }
.tr-award-badge .tr-award-name .tr-achievements-icon { margin-right: 6px; vertical-align: -4px; }
.tr-award-badge .tr-award-desc { font-size: 13px; opacity: 0.85; margin: 2px 0 4px 0; }
.tr-award-badge .tr-award-date { font-size: 12px; opacity: 0.6; }

/* ---------- cascade armor ----------
   The bar can render inside .entry-content (comments are nested there by the
   original single template), whose theme link rules outrank the base
   selectors above. Mirror the critical rules at higher specificity. */
.entry-content .tr-achievements-link,
.entry-content .tr-achievements-link .tr-achievements-text,
.techreader-achievement-panel .tr-achievements-link,
.techreader-achievement-panel .tr-achievements-link .tr-achievements-text { color: #333 !important; text-decoration: none !important; }
.entry-content .tr-achievements-link:hover,
.entry-content .tr-achievements-link:hover .tr-achievements-text,
.techreader-achievement-panel .tr-achievements-link:hover,
.techreader-achievement-panel .tr-achievements-link:hover .tr-achievements-text { color: #00b6e4 !important; text-decoration: none !important; }
body.dark .entry-content .tr-achievements-link,
body.dark .entry-content .tr-achievements-link .tr-achievements-text,
body.dark .techreader-achievement-panel .tr-achievements-link,
body.dark .techreader-achievement-panel .tr-achievements-link .tr-achievements-text { color: #fff !important; }
body.dark .entry-content .tr-achievements-link:hover,
body.dark .entry-content .tr-achievements-link:hover .tr-achievements-text,
body.dark .techreader-achievement-panel .tr-achievements-link:hover,
body.dark .techreader-achievement-panel .tr-achievements-link:hover .tr-achievements-text { color: #74e3ff !important; }
.entry-content .vortex-container-vote-comment a,
.entry-content .vortex-container-vote-comment a:hover,
.entry-content .vortex-container-vote-comment a:focus { text-decoration: none !important; }
.entry-content .vortex-container-vote-comment .tr-vote-count { font-size: 15px; color: #333 !important; }
body.dark .entry-content .vortex-container-vote-comment .tr-vote-count { color: #fff !important; }

/* ---------- dark theme (theme adds body.dark or .movies-dark) ---------- */
.dark .star-level, .dark .trophy-points, .dark .votes-rep, .dark .total-comments { color: #fff; }
.dark .tr-vote-count { color: #fff !important; }
.dark .tr-achievements-link { color: #fff !important; }
.dark .tr-achievements-link:hover { color: #74e3ff !important; }
.dark .tr-award-badge { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); }
.dark .star-level-container:hover .star-level,
.dark .trophy-points-container:hover .trophy-points { color: #74e3ff; }
.dark .vortex-p-like-active-comment, .dark .vortex-p-like-comment:hover { color: #6be1ff !important; }
.dark .vortex-p-dislike-active-comment, .dark .vortex-p-dislike-comment:hover { color: #6be1ff !important; }