/**
 * 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: 10px 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 ----------
   Fourth item in the bar. Built on exactly the same 35x46 icon + floated
   label pattern as points / likes / level so it sits in line with them at
   the same size, and stays last. */
.tr-achievements-link-container { display: inline-block; white-space: nowrap; }
.tr-achievements-link { display: block; text-decoration: none; }
.tr-achievements-link:hover { text-decoration: none; }
.tr-achievements-icon {
    background: url('../images/badge.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;
}
.tr-achievements-text {
    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;
}
.tr-achievements-link-container:hover { cursor: pointer !important; }
.tr-achievements-link:hover .tr-achievements-text { color: #00b6e4; font-weight: bold; }

/* ---------- 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: 14px; }
.vortex-p-like-comment,
.vortex-p-dislike-comment { color: #828384; text-decoration: none; }
/* Like and dislike share one color ramp: the dislike is never red. */
.vortex-p-like-comment:hover      { color: #4898d6; }
.vortex-p-dislike-comment:hover   { color: #4898d6; }
.vortex-p-like-active-comment     { color: #1b7fcc !important; }
.vortex-p-dislike-active-comment  { color: #1b7fcc !important; }
/* Same gap after both thumbs before their count. */
.icon-thumbs-up-1   { margin-right: 7px; }
.icon-thumbs-down-1 { margin-right: 7px; }
.icon-thumbs-down-1:before { vertical-align: -2px; }
.tr-vote-count { margin-left: 2px; }
.vortex-container-vote-comment.tr-loading { opacity: 0.5; 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; }
}

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