*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: #ededed;
}

*::-webkit-scrollbar {
    display: none;
}

.blackBar {
    background-color: black;
    color: white;
}

.videoContainerBox {
    display: grid;
    grid-template-columns: 21vw 76vw;
    grid-template-rows: 100%;
}

    .songThumbnailLeft {
        grid-column-start: 1;
        grid-column-end: 2;
        width: 320px;
        height: 180px;
        object-fit: cover;
    }

    .dataContainerBox {
        text-align: left;
        grid-column-start: 2;
        grid-column-end: 3;
    }

        .dataContainerBox--split {
            display: grid;
            grid-template-columns: 30% 70%;
            grid-template-rows: 100%;
        }

            .dataContainerBox--split__left {
                grid-column-start: 1;
                grid-column-end: 2;
                text-align: left;
            }
            .dataContainerBox--split__right {
                text-align: left;
                margin-top: auto;
                margin-bottom: auto;
                grid-column-start: 2;
                grid-column-end: 3;
            }

                .commentBox {
                    width: 600px;
                    height: 100px;
                }

.btnGrade {
    width: 17px;
    height: 17px;
}

.gradeInput {
    width: 100%;
}

.gradeInputNew {
    width: 50px;
}

.newScore {
    display: none;
}

.dataContainer--gradeContainer {
    margin: 5px;
    display: flex;
}

    .dataContainer--gradeContainer label {
        width: 60%;
    }

    .selectBox {
        width: 100%
    }

.optionsHeader {
    color: white;
    background-color: black;
    position: fixed;
    width: 100vw;
    height: 54px;
}

.optionsURL {
    display: inline-block;
    text-decoration: none;
    background-color: black;
    color: white;
    margin: 10px;
    padding: 5px;
    border: 1px solid aqua;
    border-radius: 15px;
}

    .optionsRight {
        float: right;
    }

.optionsSearchLabel {
    background-color: black;
}

.playlists {
    display: grid;
    grid-template-columns: 10vw 39vw 39vw 10vw;
    text-align: center;
}

        .playlist {
            grid-column: 2/4;
            display: grid;
            grid-template-columns: 50% 50%;
            grid-template-rows: 35vh;
            text-align: center;
        }

                .playlist--odd {
                    grid-column-start: 1;
                    grid-column-end: 3;
                    display: grid;
                    grid-template-columns: 50% 50%;
                    text-align: center;
                }

                        .playlist--odd__left {
                            grid-column-start: 1;
                            grid-column-end: 2;
                        }

                        .playlist--odd__right {
                            grid-column-start: 2;
                            grid-column-end: 3;
                        }

                .playlist--even {
                    grid-column-start: 1;
                    grid-column-end: 3;
                    display: grid;
                    grid-template-columns: 50% 50%;
                    text-align: center;
                }

                        .playlist--even__left {
                            grid-column-start: 1;
                            grid-column-end: 2;
                        }

                        .playlist--even__right {
                            grid-column-start: 2;
                            grid-column-end: 3;
                        }

.playlist__url {
    text-decoration: none;
    font-size: 24px;
}

.container {
    width: 100%;
    height: 100%;
}

.songsForm {
    display: block;
}

.gradeCategory {
    font-size: 25px;
    margin: 35px;
    margin-left: 13vw;
}

.omniNav {
    color: white;
    background-color: black;
    width: 98vw;
    height: 50px;
}

.omniNav--Option {
    display: inline-block;
    text-decoration: none;
    background-color: black;
    color: white;
    margin: 10px;
    padding: 5px;
    border: 1px solid aqua;
    border-radius: 15px;
}

.reviewBox, .reviewBoxDate {
    margin: 10px;
    display: block;
}

.reviewBoxTitle {
    height: 25px;
    font-size: 1.2em;
    margin: 10px;
    display: block;
}

.gradeInputReview {
    width: 50px;
    margin: 5px;
}

.titleInputReview {
    width: 500px;
    margin: 5px;
    height: 25px;
    font-size: 1.2em;
}

.reviewSuccess {
    color: #009900;
    margin: 15px;
    font-size: 1.5em;
}

.reviewError {
    color: #CC0000;
    margin: 15px;
    font-size: 1.3em;
}

.reviewBox, .reviewBoxDate {
    font-size: 1.2em;
}

.btnSaveReview {
    margin: 10px;
    font-size: 1.2em;
    background-color: lawngreen;
}

.btnCancel {
    margin: 10px;
    font-size: 1.2em;
    background-color: red;
    color: white;
}

.reviewBox input {
    height: 25px;
    width: 65px;
    font-size: 1.2em;
}

.reviewBoxDate input {
    width: 180px;
    height: 25px;
    font-size: 1.2em;
}

.averagesBar {
    display: grid;
    grid-template-columns: 90% 10%;
    background-color: black;
}

    .averagesBar--left {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .averagesBar--right {
        grid-column-start: 2;
        grid-column-end: 3;
        margin: auto;
    }

        .settings_cog {
            width: 60px;
            height: 50px;
            background-color: black;
            cursor: pointer;
        }

        .closing_cog {
            width: 60px;
            height: 50px;
            background-color: black;
            cursor: pointer;
        }

.redirectsBox option {
    background-color: black;
}

.menu {
    position: fixed;
    transform: translateX(1500%);
    transition: transform 0.2s;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background-color: black;
    color: white;
    list-style: none;
    padding-top: 4rem;
    max-width: 17vw;
    text-align: center;
}

.showMenu {
    transform: translateX(83vw);
}

.ToSParagraph {
    display: block;
    font-weight: bold;
    margin: 10px;
    font-size: 1.1em;
}

.registrationError {
    color: red;
    font-size: 15px;
    margin-top: 10px;
    margin-bottom: 30px;
    font-weight: bold;
}

.registrationBox {
    display: block;
    height: 20vh;
    width: 100vw;
    background-color: black;
    text-align: center;
}

    .successfulRegistration {
        background-color: black;
        color: white;
        font-size: 30px;
        padding-top: 8vh;
    }

.successMessage {
    color: #009900;
    margin: 15px;
    font-size: 2em;
}

/* Main container: 70% width, border, subtle background, shadow */
.song-container {
    width: 700px;
    margin: 20px auto;
    border: 2px solid #000;
    padding: 20px;
    background: linear-gradient(135deg, #ff8d8d 0%, #ffffff 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    font-size: 18px;
}

/* Song header: title/authors on left, awards on right */
.song-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.song-title {
    margin: 0;
    font-size: 1.7rem;
}

.song-awards {
    text-align: right;
    font-size: 1rem;
    color: #000000;
    font-family: 'Cinzel', serif; /* elegant, special font */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* adds a subtle glow */
    white-space: nowrap;
}

/* Song content: thumbnail on left, grades on right, center them vertically */
.song-content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.song-thumbnail {
    width: 320px;
    height: 180px;
    object-fit: fill;
    border: 2px solid #000;
}

.song-grades {
    text-align: center;
    flex: 1;
}

.song-grades p {
    margin-bottom: 8px;
    font-size: 1.2rem; /* slightly larger text for grades */
}

#previewContainer {
    width: 320px;
    height: 180px;
    border: 1px solid #ccc;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8f8f8;
}

#previewImage {
    max-width: 100%;
    max-height: 100%;
    object-fit: fill;
}

.song-meta {
    display: flex;
    gap: 0.25em; /* odstęp między autorami a rokiem */
    flex-wrap: wrap; /* zabezpiecza przed wychodzeniem poza kontener */
}

.song-authors,
.song-year {
    display: inline;
    font-size: 1rem;
    color: #555;
}

.errorMessage {
    color: red;
    font-size: 1.5em;
    margin: 5px;
    font-weight: bold;
}

.reviews-container {
    width: 700px;
    margin: 20px auto;
    border: 2px solid #000;
    padding: 20px;
    font-family: Arial, sans-serif;
    font-size: 18px;
}

.redirectError {
    font-size: 2em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 7vh;
}

.my-review-section {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.review-excerpt-wrap{
  position: relative;
  background: #eee;
}

/* soft fade so text doesn't clash with the link */
.review-excerpt-wrap::before{
  content: "";
  position: absolute;
  right: 5.5em;               /* leaves room for the link width */
  bottom: 0;
  width: 6em;
  height: 1.2em;
  background: linear-gradient(to right, rgba(238,238,238,0), #eee 70%);
  pointer-events: none;
}

.review-excerpt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* the inline-looking link */
.read-more{
  position: absolute;
  right: 0;
  bottom: 0;
  padding-left: .4em;
  background: #eee; /* cover any clipped text behind it */
  text-decoration: underline;
}

/* ==========================
   SLIDER + LABEL ALIGNMENT
   ========================== */

/*
   CSS variables for your formula-based approach:
   --thumb-size: the diameter of the slider thumb
   --thumb-center: half the thumb size (to center it)
   --offset-adjust: final nudge for perfect alignment
*/
:root {
    --thumb-size: 20px;
    --thumb-center: calc(var(--thumb-size) / 2);
    --offset-adjust: 0px; /* tweak this if labels are off by a pixel or two */
}

/*
   Container for the slider input and the labels
   (similar to your "slider-container" class).
*/
.song-slider {
    width: 100%;
    position: relative;
    /*
      If you want the slider narrower,
      you can set e.g. width: 80%; margin: 0 auto;
      but we'll keep it 100% of the .song-container's width for now.
    */
    margin-bottom: 1rem;
}

/* The range input itself */
.song-slider input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}

/* Track (WebKit) */
.song-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    background: #ddd;
    border-radius: 3px;
}
.song-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: #007BFF; /* color for the thumb */
    border-radius: 50%;
    margin-top: -7px; /* vertically center on a 6px track */
    cursor: pointer;
}

/* Track (Firefox) */
.song-slider input[type="range"]::-moz-range-track {
    height: 6px;
    background: #ddd;
    border-radius: 3px;
}
.song-slider input[type="range"]::-moz-range-thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    background: #007BFF;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

/* Container for integer labels 1..10 */
.slider-labels {
    position: relative;
    width: 100%;
    height: 20px;
    margin-top: 8px;
}

/* Each label is absolutely positioned using the formula approach:
   left = (n/9)*(100% - thumb-size) + thumb-center - offset-adjust
*/
.slider-labels span {
    position: absolute;
    transform: translateX(-50%);
    font-size: 14px;
}

table {
    width: 100%;
    border-collapse: separate; /* Allows border-spacing to work */
    border-spacing: 10px;      /* Creates space between cells (simulating row margins) */
}

th, td {
    padding: 8px;
    text-align: center;        /* Centers the text */
    border: 1px solid #ccc;    /* Optional: visible borders for clarity */
}

th {
    background-color: #f2f2f2;
}

.centered {
    text-align: center;
}

.big-button {
    font-size: 22px;
    width: 20vw;
    height: 8vh;
    font-weight: bold;
}