/* ---------------------------------------------------------- */
/*                       Table of Contents                    */
/* ---------------------------------------------------------- */
/*
    1.  General Styles
    2.  Header Section
    3.  Notification Area
    4.  Logo
    5.  Draft Info Section
    6.  Round Cards
    7.  Card Styles
    8.  Draft History
    9.  Modals
    10. How it Works Modal Styles
    11. General Button Styling
    12. Draft Rounds Box
    13. Bat Icon
*/

/* ---------------------------------------------------------- */
/*                      1. General Styles                     */
/* ---------------------------------------------------------- */

body {
    background-color: #1C2B4B;
    color: white;
    font-family: Arial, sans-serif; /* Added a default font for better consistency */
    line-height: 1.6;             /* Improves readability */
    margin: 0;                   /* Reset default margin */
}

/* ---------------------------------------------------------- */
/*                      2. Header Section                     */
/* ---------------------------------------------------------- */

#header-container {
    display: flex;
    align-items: center;
    padding: 5px;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle background to the header */
}

#header-container h1 {
    margin: 0;
    font-size: 2em;              /* Adjust size as needed */
}

/* ---------------------------------------------------------- */
/*                    3. Notification Area                   */
/* ---------------------------------------------------------- */

#notification-area {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 10px;
    width: 100%;
}

#notification-area button {
    margin-left: 10px;
}

.notification-box {
    color: white;
    padding: 10px 15px;
    border-radius: 5px;
    font-weight: bold;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* ---------------------------------------------------------- */
/*                           4. Logo                          */
/* ---------------------------------------------------------- */

#logo img {
    width: 150px;
    height: auto;
}

/* ---------------------------------------------------------- */
/*                    5. Draft Info Section                  */
/* ---------------------------------------------------------- */

#draft-info {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-top: 15px;           /* Added some top margin for spacing */
}

#draft-info h2 {
    margin: 0 10px;
    font-size: 1.2em;          /* Adjust size as needed */
}

/* ---------------------------------------------------------- */
/*                       6. Round Cards                      */
/* ---------------------------------------------------------- */

#round-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;   /* Centers the cards horizontally */
    padding: 20px 0;            /* Adds padding top and bottom */
}

/* ---------------------------------------------------------- */
/*                        7. Card Styles                      */
/* ---------------------------------------------------------- */

.card {
    width: 150px;
    height: 275px;
    border: 3px solid #ccc;
    padding: 10px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: translateY(-5px); /* Optional: Card lifts up slightly on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Optional: Adds shadow on hover */
}

.card p {
    margin-top: 5px;
    font-size: clamp(12px, 1.2vw, 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
}

/* ---------------------------------------------------------- */
/*                  8. Card Image Container                 */
/* ---------------------------------------------------------- */

.card-image-container {
    width: 125px;
    height: 175px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    border: 10px solid transparent;
    border-image: linear-gradient(45deg, var(--gradient-color1), var(--gradient-color2)) 1;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.card-image-container img {
    width: 240%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
    vertical-align: middle;
    backface-visibility: hidden;
}

/* ---------------------------------------------------------- */
/*                      9. Draft History                     */
/* ---------------------------------------------------------- */

#draft-history {
    margin-top: 20px;
    padding: 20px;              /* Added padding around the draft history */
    background-color: rgba(0, 0, 0, 0.05); /* Optional: Subtle background for the section */
}

.draft-columns {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;            /* Allows columns to wrap on smaller screens */
}

.draft-column {
    flex: 1;
    margin: 0 10px;
    min-width: 200px;          /* Ensures columns don't get too narrow */
}

.draft-column h3 {
    margin-bottom: 10px;
    font-size: 1.1em;          /* Adjust size as needed */
}

.draft-column ul {
    list-style-type: none;
    padding: 0;
}

.draft-column li {
    margin-bottom: 5px;
}

/* ---------------------------------------------------------- */
/*                          10. Modals                        */
/* ---------------------------------------------------------- */

/* General Modal Styles (popup-modal) */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.8);
    z-index: 1000;
    color: black;
}

.modal .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    position: relative;
    color: #000;
}

.modal .close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

.modal .close-button:hover,
.modal .close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#popup-image {
    max-width: 100%;
    max-height: 80vh;
    display: block;
    margin: 0 auto;
}

/* End-of-Draft Modal (Results Modal) */
#results-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 1001; /* Ensure it's above the "How it Works" modal */
    color: black;
}

#results-modal .modal-content {
    background: white;
    padding: 10px;
    border: 1px solid #888;
    width: 80%;
    max-width: 600px;
    margin: 50px auto;
    border-radius: 5px;
    text-align: center;
    max-height: 90vh;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: black;
}

#results-modal .modal-content * {
    color: black;
}

#results-modal .modal-content h2 {
    margin: 2px 0;
}

#results-modal .modal-content .modal-buttons {
    margin-top: 10px;
}

#results-modal .modal-content h1 {
    margin: 2px 0;
    font-size: 1.2em;
}

#results-modal .modal-content canvas {
    margin-top: 10px;
}

#results-modal .modal-content button {
    margin: 2px;
    width: 200px;
}

#roster-canvas {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: 50vh;
}

/* ---------------------------------------------------------- */
/*              11. How it Works Modal Styles                */
/* ---------------------------------------------------------- */

/* Slideshow Styles */
.slides-container {
    position: relative;
    min-height: 400px; /* Adjust based on content */
}

.guide-section {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-in-out;
    pointer-events: none;
}

.guide-section.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
}

.guide-section.inactive {
    transform: translateX(-100%);
}

.slide-nav {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.prev-btn, .next-btn {
    background: none;
    border: 2px solid #2d3436;
    color: #2d3436;
    font-size: 24px;
    padding: 8px 16px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 5px
}

.prev-btn:hover, .next-btn:hover {
    background: #2d3436;
    color: white;
}

.prev-btn.hidden {
    visibility: hidden;
}

.prev-title, .next-title {
    font-size: 14px;
    color: #2d3436;
    text-align: center;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The z-index of 1000 ensures that it is below the Results Modal, if ever shown simultaneously */
/* -- Modal Styles with Animation -- */
.guide-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    color: #000;
}

.guide-modal .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.guide-modal .modal-content {
    position: relative;
    background: #f8f9fa;
    max-width: 800px;
    margin: 20px auto;
    padding: 30px;
    border-radius: 15px;
    transform: translateY(-50px);
    opacity: 0;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);

    /* Ensure all text inside the modal is black */
    color: #000 !important;

    /* Set a maximum height and enable scrolling */
    max-height: 80vh; /* Adjust as needed */
    overflow-y: auto; /* Enable vertical scrolling */
}

.guide-modal.active {
    display: block;
}

.guide-modal.active .modal-overlay {
    opacity: 1;
}

.guide-modal.active .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.guide-modal .modal-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #FF6B6B;
    padding-bottom: 15px;
}

.guide-modal .guide-section {
    margin: 20px 0;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.guide-modal .close-guide {
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    color: #2d3436;
    cursor: pointer;
    transition: color 0.2s ease;
}

.guide-modal .close-guide:hover {
    color: #FF6B6B;
}

/* Add emoji styling */
.guide-section h3::before {
    content: "✨";
    margin-right: 10px;
}

/* ---------------------------------------------------------- */
/*               12. General Button Styling                  */
/* ---------------------------------------------------------- */

button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #45a049;
}

/* Animated Button Styles */
.animated-button {
    background: linear-gradient(45deg, #FF6B6B, #FFE66D);
    border: none;
    padding: 12px 25px;
    color: #2d3436;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
    margin: 15px 0;
}

.animated-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
}

/* ---------------------------------------------------------- */
/*                   13. Draft Rounds Box                     */
/* ---------------------------------------------------------- */

.draft-rounds-box {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    padding: 15px;
    border-radius: 10px;
    margin-top: 20px;
    text-align: left; /* Align text to the left */
    width: fit-content; /* Make the div as wide as its content */
    margin: 20px auto; /* Center the box horizontally */
}

.draft-rounds-box p {
    margin: 0;
    text-align: center; /* Center-align title */
}

.draft-rounds-box ol {
    padding-left: 20px; /* Indent ordered list */
}

.draft-rounds-box li {
    margin-bottom: 5px;
}

/* ---------------------------------------------------------- */
/*                         14. Bat Icon                       */
/* ---------------------------------------------------------- */

.bat-icon {
    width: 100px; /* Adjust width as needed */
    height: auto;
    margin: 10px auto;
    transform: rotate(180deg); /* Rotate the bat to lay horizontally */
    display: block;
}