@import url('karma-header.css');
@import url('karma-icons.css');

/* Base styles */
:root {
    /* Main color scheme */
    --primary-bg: #18407f;
    --secondary-bg: #335993;
    --dark-bg: #082045;
    --light-text: #fff;

    /* Season colors */
    --winter-bg: #6ec1df;
    --winter-text: #d5fefa;
    --winter-contrast-bg: #d6fffb;
    --winter-contrast-text: #70c2df;

    --spring-bg: #ace781;
    --spring-text: #61aa27;
    --spring-contrast-bg: #61aa27;
    --spring-contrast-text: #ace781;

    --summer-bg: #d8c033;
    --summer-text: #cf7130;
    --summer-contrast-bg: #cf7130;
    --summer-contrast-text: #d8c033;

    --fall-bg: #b36a1c;
    --fall-text: #80262c;
    --fall-contrast-bg: #80262c;
    --fall-contrast-text: #b36a1c;

    /* Status colors */
    --positive-color: #fc672b;
    --negative-color: #926cca;
    --neutral-color: gray;
    --new-entry-color: #18b418;
    --poll-blue: #6ec1df;
    --spring-episode: var(--spring-contrast-text); 
}

/* Reset */
body {
    margin: 0;
    line-height: 1;
    font-family: "Sora", sans-serif;
}

body.edit-mode .editable-text {
    outline: 1.5px dashed #4299e1;
    background: #fffbe6;
    cursor: text;
    transition: outline 0.18s;
}

body.edit-mode .editable-text[contenteditable="true"]:focus {
    outline: 2.5px solid #1e40af;
    background: #e0f2fe;
}

/* Main container */
.container {
    color: var(--light-text);
    width: 930px;
    height: 2440px;
    background-color: var(--primary-bg);
    display: flex;
    flex-direction: column;
    line-height: 1;
}



/* Episode container */
.episode-container {
    background-color: var(--secondary-bg);
}

.row {
    margin-top: -1px;
    height: 151px;
    display: flex;
    flex-direction: row;
}

.episode-container>.divider {
    height: 10px;
    width: 877px;
    background-color: var(--dark-bg);
    position: relative;
    clip-path: polygon(0% 0%, 75% 0%, 77% 50%, 75% 100%, 0% 100%);
    box-shadow: inset 0px 8px 15px -4px black;
}

.episode-container>.divider:last-of-type {
    width: 100%;
    clip-path: none;
    height: 3px;
}

/* Left side entry styles */
.karma-entry {
    display: flex;
    height: 100%;
}

.karma-entry .ranking {
    width: 43px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto 0;
}

.karma-entry .ranking .rank {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 3px;
}

.karma-entry .ranking .rank-change {
    font-weight: bold;
    font-size: 20px;
    display: flex;
}

.karma-entry .ranking .rank-change.new-entry {
    line-height: 0.7;
    font-size: 25px;
}

.karma-entry .ranking .rank-change svg.arrow {
    width: 15px;
    margin-right: 2px;
}

/* Entry details */
.karma-entry .details {
    width: 425px;
    display: flex;
    flex-direction: row;
    padding: 0px 5px;
    background-size: cover;
    background-position: center;
    height: 100%;
    position: relative;
    /* filter: drop-shadow(2px 4px 6px black); */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.karma-entry .details:hover {
    transform: scale(1.3);
    z-index: 99;
    background-position: 0px 0px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

.karma-entry .details:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0;
    right: 0;
    background: radial-gradient(circle, transparent 80%, black 95%);

}

.edit-banner-button {
    position: absolute;
    
    bottom: 10px;
    
    left: 50%;
    
    transform: translateX(-50%);
    
    padding: 8px 15px;
    background-color: rgba(0, 0, 0, 0.7);
    
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    
    visibility: hidden;
    
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
    
}
.karma-entry .details:hover .edit-banner-button {
    opacity: 1;
    visibility: visible;
    z-index: 100;
   
}

body.edit-mode .edit-banner-button {
    opacity: 1 !important;
    pointer-events: auto !important; 
    visibility: visible;
    z-index: 100 !important;
}

.karma-entry .details>* {
    z-index: 1;
}


/* Details layout */
.karma-entry .details .part-1 {
    margin: 2px 0;
    display: flex;
    flex-direction: column;
}

.karma-entry .details .part-1 .karma-change {
    display: flex;
    position: absolute;
    font-weight: 500;
    font-style: italic;
    font-size: 20px;
    padding: 0px 5px;
    line-height: 1;
    /* background: rgba(0,0,0,0.65); */
    text-shadow: 0.75px 0 0.8px black, 0 0.75px 0.8px black, -0.75px 0 0.8px black, 0 -0.75px 0.8px black;
}

.karma-entry .details .part-1 .karma-change .caret {
    margin-right: 5px;
}

.karma-entry .details .part-1 .karma {
    font-style: italic;
    font-weight: bold;
    font-size: 44px;
    margin-right: auto;
    line-height: 1;
    margin-top: auto;
    margin-bottom: -5px;
    text-shadow: 0.75px 0 0.8px black, 0 0.75px 0.8px black, -0.75px 0 0.8px black, 0 -0.75px 0.8px black;
}

.karma-entry .details .part-2 {
    margin: 0 0 2px auto;
    display: flex;
    flex-direction: column;
    margin-left: auto;
}

.karma-entry .details .part-2 .title {
    max-height: 40px;
    text-align: end;
    /* margin-left: 51px; */
    text-transform: uppercase;
    font-style: italic;
    line-height: 1;
    font-size: 15px;
    font-weight: bold;
    text-shadow: 0.75px 0 0.8px black, 0 0.75px 0.8px black, -0.75px 0 0.8px black, 0 -0.75px 0.8px black;

}

.karma-entry .details .part-2 .title>span {
    padding: 1px;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.karma-entry .details .part-2 .pod-container {
    margin-top: auto;
    margin-left: auto;
    margin-bottom: 3px;
    display: inline-grid;
    justify-items: start;
}

.karma-entry .details .part-2 .episode-number {
    margin-right: 5px;
}

.karma-entry .details .part-2 .episode-number,
.karma-entry .details .part-2 .poll-score {
    margin-top: auto;
    border-radius: 100px;
    font-size: 16px;
    font-weight: bold;
    padding: 1px 6px;
    background-color: rgba(25, 36, 45, 1);
    line-height: 1;
}

/* Additional details section */
.karma-entry .details-2 {
    display: flex;
    margin-left: 0.5rem;
}

.karma-entry .details-2>* {
    margin-top: auto;
    margin-bottom: auto;
}

/* Comments section */
.karma-entry .details-2 .comments {
    background-color: #fff;
    width: 40px;
    height: 30px;
    color: var(--secondary-bg);
    font-size: 11px;
    font-weight: bold;
    margin-left: 5px;
    margin-right: 5px;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    display: flex;
    flex-direction: column;
}

.karma-entry .details-2 .comments:hover {
    transform: scale(1.3);
    z-index: 99;
    background-position: 0px 0px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.karma-entry .details-2 .comments-wrapper {
    filter: drop-shadow(3px 1px 1px rgba(0, 0, 0, 0.8));
}

.karma-entry .details-2 .comments span {
    margin: auto;
}

/* MAL ratings */
.karma-entry .details-2 .mal-ratings {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100px;
    align-items: center;
    flex-wrap: wrap;
}

.karma-entry .details-2 .mal-ratings>span {
    background-color: rgba(25, 36, 45, 0.9);
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    padding: 4px 7px;
    position: relative;
    overflow: hidden;
}

.karma-entry .details-2 .mal-ratings>span:hover {
    transform: scale(1.3);
    z-index: 99;
    background-position: 0px 0px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

/* Poll entries */
.poll-entry {
    background-color: rgba(101, 119, 134, 0.08);
    position: relative;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 12% 50%);
    box-shadow: inset 0px 8px 15px -4px black;
    align-items: flex-end;
    width: 320px;
    margin-left: auto;
    display: flex;
    height: 120px;
}

.poll-entry>div {
    margin-top: auto;
    margin-bottom: auto;
}

.poll-entry .score-container {
    display: flex;
    flex-direction: column;
    margin: auto 5px auto -16px;
}

.poll-entry .score-container .score {
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
}

.poll-entry .score-container .rank-change {
    margin-top: 5px;
    margin-left: auto;
    font-size: 12px;
    font-weight: bold;
}

.poll-entry .score-container .rank-change.new-entry {
    line-height: 0.7;
    font-size: 25px;
}

.poll-entry .score-container .rank-change svg.arrow {
    width: 10px;
    margin-right: 2px;
}

.poll-entry .details {
    max-width: 90px;
    display: flex;
    flex-direction: column;
    margin: auto 6px;
}

.poll-entry .image {
    width: 115px;
    height: 115px;
    border-radius: 100px;
    background-size: cover;
}

.poll-entry .details .title {
    max-height: 40px;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 11px;
    font-style: italic;
    text-transform: uppercase;
}

.poll-entry .bottom-bar {
    display: flex;
    align-items: center;
}

.poll-entry .bottom-bar>span {
    margin-top: 4px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: bold;
    padding: 2px 2px;
    background-color: #061936;
    line-height: 1;
    position: relative;
    right: 5px;
}

.poll-entry>.details>.bottom-bar>span.votes {
    background-color: #ffffff;
    color: var(--secondary-bg);
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
    border-radius: 0px;
    top: 1.5px;
    position: relative;
    font-size: 10px;
    height: 14px;
}

.poll-entry .bottom-bar>span:first-of-type {
    margin-right: 5px;
}

.poll-entry .rank {
    height: 15px;
    width: 30px;
    background-color: var(--secondary-bg);
    position: absolute;
    bottom: 0;
    right: 0;
    clip-path: polygon(53% 0, 100% 0%, 100% 100%, 0% 100%);
    display: flex;
}

.poll-entry .rank span {
    font-size: 9px;
    font-weight: bold;
    margin: auto;
}


/* RIGHT SIDE STYLES - Fully separated from left side */
.rightSide {
    margin: 2px 0px 0px -13px;
    display: flex;
    justify-content: center;
    filter: drop-shadow(2px 6px 1px rgba(0, 0, 0, 0.8));

}

/* Override the normal details styles for right side */
.rightSide .details {
    width: 305px;
    height: 145px;
    background-size: cover;
    background-position: center;
    position: relative;
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 12% 50%);
    padding: 0;
    display: block;
    /* Override the flex layout */
}

/* Reset styles for part-1 and part-2 on right side */
.rightSide .details .part-1,
.rightSide .details .part-2 {
    margin: 0;
    position: static;

}

/* Style for the karma count
.rightSide .details .part-1 {
    /* position: absolute; */
    /* right: 20px; */
    /* bottom: 35px; */
    /* z-index: 2; } */

.rightSide .details .part-2 .karma {
    font-size: 26px;
    font-style: italic;
    font-weight: bold;
    text-shadow: 0.75px 0 0.8px black, 0 0.75px 0.8px black, -0.75px 0 0.8px black, 0 -0.75px 0.8px black;
    color: white;
    text-align: end;
    margin-top: auto;
    margin-right: 5px;

}

/* Style for the title */
.rightSide .details .part-2 {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    /* right: 0; */
    z-index: 4;
    height: 100%;
    display: flex;

}

.rightSide .details .part-2 .title {
    font-size: 12px;
    max-height: 40px;
    text-align: end;
    /* margin: 10px 40px 0 40px; */
    line-height: 1.2;
    width: 70%;
    display: flex;
    /* justify-self: unset; */
    justify-content: flex-end;
    margin-left: auto;
    padding: 1px 3px;

}

/* Container for the bottom details */
.rightContainer {
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    /* right: 0; */
    background-color: rgba(0, 0, 0, 0.71);
    /* height: 15%; */
    width: 80%;
    display: flex;
    flex-direction: row;
    align-content: center;
    z-index: 2;
    justify-content: start;
    /* margin-top: auto; */
    margin-left: auto;

}

/* Streaming service logo for right side */
[class$="-logo"] {
    padding: 4px 8px;
    display: flex;
    height: 100%;
    width: auto;
    /* min-width: 80px; */
    font-size: 12px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-right: 5px;

}

.rightRank {
    height: 100%;
    width: 12%;
    background-color: #fff;
    position: relative;
    clip-path: polygon(53% 0, 100% 0%, 100% 100%, 0% 100%);
   
    font-size: 12px;
    
    justify-content: center;
    
    z-index: 3;
    display: flex;
    
    margin-left: auto;
    flex-direction: column;
}

.rightRank>span {
    margin-right: 2px;
    text-align: end;
    font-weight: bold;
    color: #335993;
}

/* Right side components */
.details-container {
    display: flex;
    height: 100%;
    /* width: calc(100% - 85px); */
    align-items: center;
    gap: 6px;
    /* padding-left: 5px; */

}

.comments-wrapper {
    filter: drop-shadow(3px 1px 1px rgba(0, 0, 0, 0.8));
}

.right-comments {
    background-color: #fff;
    width: 30px;
    height: 18px;
    color: var(--secondary-bg);
    font-size: 10px;
    text-align: center;
    font-weight: bold;
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

.right-comments > span{
    vertical-align: middle;
}

.rightEpisode {
    color: white;
    font-size: 10px;
    /* font-weight: bold; */
    /* display: flex; */
    /* align-items: center; */
    /* white-space: nowrap; */

}

.rightChange {
    display: flex;
    align-items: center;
    font-size: 12px;
    line-height: 1;
    gap: 2px;
    /* white-space: nowrap; */

}

.rightChange .caret {
    width: 10px;
    height: 10px;
}


.right-ranking .right-rank-change {
    font-weight: bold;
    font-size: 12px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    gap: 2px;

}

.right-ranking .right-rank-change svg.arrow {
    width: 10px;
    height: 10px;

}

.right-ranking .right-rank-change.new-entry {
    color: var(--new-entry-color);
}

span[class="right-rank-change neutral"] {
    color: gray;
}

.karma-entry.rightSide .details:after {
    background: none;
}

/* Username styles */
.username::first-letter {
    color: #1da1f2;
}

.username:before {
    content: '@';
    color: #1da1f2;
}

.username {
    color: black !important;
    background-color: white !important;
    border-radius: 100px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    padding: 4px 7px !important;
}

.rightUsername::first-letter {
    color: #1da1f2;
}

.rightUsername:before {
    content: '@';
    color: #1da1f2;
}

.rightUsername {
    color: black !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

.rightEntry {
    margin: 0 0 2px auto;
    display: flex;
    flex-direction: column;
    margin-left: auto;
}

.rightTotal {
    padding: 9px 7px !important;
    line-height: 0 !important;
    font-size: 12px !important;
    margin-top: -1px !important;
    margin-bottom: 0px !important;
    margin-right: 1px !important;
    border-top-left-radius: 0px !important;
    border-top-right-radius: 358px !important;
    border-bottom-right-radius: 0px !important;
}

/* External link styles */
.external-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 5 !important;
}

/* Logo styles for left side */
.karma-entry:not(.rightSide) [class$="-logo"] {
    padding: 10px 12px;
    display: flex;
    width: 30%;
    font-size: 8px;
    height: 0px;
    border-radius: 0 358px 0 0 !important;
    align-items: center;
    justify-content: center;
}

/* Logo styles for right side */
.rightSide [class$="-logo"] {
    padding: 10px 12px;
    display: flex;
    height: 0px;
    /* width: 20%; */
    min-width: 25%;
    font-size: 12px;
    /* text-align: -webkit-center; */
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 0 358px 0 0 !important;

}

/* Streaming service colors */
:root {
    --crunchyroll-color: rgb(244, 117, 33);
    --hidive-color: rgb(0, 174, 240);
    --netflix-color: rgb(219, 0, 0);
    --hulu-color: rgb(102, 170, 51);
    --disney-color: #113CCF;
    --prime-color: rgb(60, 120, 180);
    --twitter-color: rgb(20, 23, 26);
    --samsung-color: #1428A0;
    --max-color: #870AB2;
    --none-color: #000000;
    --studio-color: white;
}

/* Streaming service background colors */
.Crunchyroll {
    background-color: var(--crunchyroll-color) !important;
}

.Hidive {
    background-color: var(--hidive-color) !important;
}

.Netflix {
    background-color: var(--netflix-color) !important;
}

.Hulu {
    background-color: var(--hulu-color) !important;
}

.Disney {
    background-color: var(--disney-color) !important;
}

.Prime {
    background-color: var(--prime-color) !important;
}

.Twitter {
    background-color: var(--twitter-color) !important;
}

.Samsung {
    background-color: var(--samsung-color) !important;
}

.Max {
    background-color: var(--max-color) !important;
}

.None {
    background-color: var(--none-color);
}

.Studio {
    background-color: var(--studio-color) !important;
    max-width: 100%;
}

/* Logo background colors */
.Crunchyroll-logo {
    background-color: var(--crunchyroll-color);
}

.Hidive-logo {
    background-color: var(--hidive-color);
}

.Netflix-logo {
    background-color: var(--netflix-color);
}

.Disney-logo {
    background-color: var(--disney-color);
}

.Prime-logo {
    background-color: var(--prime-color);
}

.Samsung-logo {
    background-color: var(--samsung-color);
}

.Max-logo {
    background-color: var(--max-color);
}

.None-logo {
    background-color: var(--none-color);
}

@media (max-width: 300px) {
    .right-toolbar {
        display: none;
    }
}