/* Reset padding and margin for all elements */
* {
    padding: 0;
    margin: 0;
}

/* Set root font size */
:root {
    font-size: 16px;
}

/* Body styles: full width and center alignment */
body {
    font-family: 'Poppins'; /* Use Poppins font */
    width: 100%;
    height: fit-content; /* Height adjusts to content */
    display: flex; /* Flexbox layout for center alignment */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    transition: 0.5s ease; /* Smooth transitions for animations */
}

/* Heading styles */
h1 {
    font-size: 1.8rem; /* Example font size */
    font-weight: 700; /* Bold text */
    color: #000; /* Black text color */
}

h2 {
    font-size: 1.5rem; /* Example font size */
    font-weight: 700; /* Bold text */
    color: #000; /* Black text color */
}

/* Section layout and styling */
section {
    display: flex;
    max-width: 100vw; /* Full viewport width */
    max-height: 100vh; /* Full viewport height */
    height: fit-content; /* Adjust height based on content */
    justify-content: top; /* Align content at the top */
    align-items: center; /* Center content horizontally */
    flex-direction: column; /* Stack children vertically */
    padding: 1rem; /* Add padding inside the section */
}

/* Card container styling */
.card-container {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    height: fit-content; /* Height adjusts to content */
    width: 35rem; /* Fixed width */
    border-radius: 0.5rem; /* Rounded corners */
    resize: both; /* Allow resizing */
    overflow: auto; /* Scrollable content */
    margin-bottom: 2rem; /* Space below the container */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; /* Subtle shadow */
}

/* Adjust card container for smaller screens */
@media (max-width: 600px) {
    .card-container {
        width: 23rem; /* Smaller width for narrow screens */
    }
}

/* Card image placeholder styling */
.card-image {
    height: 7rem; /* Fixed height */
    background-color: #f79413; /* Background color */
}

/* Info container styling */
.info-container {
    padding: 2.5rem 2.5rem 0rem; /* Padding inside the container */
    max-height: 100%; /* Limit height to parent */
    display: flex;
    flex-direction: column; /* Stack children vertically */
    gap: 2rem; /* Space between items */
    transition: 0.5s ease; /* Smooth transitions */
    position: relative;
    overflow: scroll; /* Scrollable content */
}

/* Adjust info container for smaller screens */
@media (max-width: 600px) {
    .info-container {
        padding: 1.5rem 1.5rem 0rem; /* Reduced padding */
    }
}

/* Symbol info wrapper styling */
#symbol-info-wrapper {
    display: flex;
    flex-direction: column; /* Stack children vertically */
    justify-content: center; /* Center content vertically */
}

/* Clock container styling */
#clock {
    padding: 1rem;
    display: flex;
    gap: 0.05rem; /* Small gap between items */
    flex-direction: column; /* Stack items vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    margin-left: auto; /* Align to the right */
    width: fit-content; /* Adjust width to content */
    border-radius: 0.5rem; /* Rounded corners */
}

/* Date, time, and timezone sections styling */
#date-div,
#time-div,
#timezone-div {
    display: flex; /* Horizontal layout */
}

#date-div,
#timezone-div {
    font-size: 0.8rem; /* Smaller font size */
}

/* Button for updating prices */
#update-price-btn {
    -webkit-appearance: none; /* Remove default styling */
    display: flex;
    justify-content: center; /* Center text */
    align-items: center; /* Center vertically */
    padding: 1rem; /* Inner padding */
    border-radius: 0.25rem; /* Rounded corners */
    background-color: rgb(0, 0, 0); /* Black background */
    color: white; /* White text */
    border: 0.0625rem rgba(255, 255, 255, 0); /* Transparent border */
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0.0625rem 0.25rem; /* Subtle shadow */
    cursor: pointer; /* Pointer cursor on hover */
    width: fit-content; /* Adjust width to content */
    height: 1rem; /* Fixed height */
    transition: 0.2s; /* Smooth hover transition */
    padding: 1.1rem 1.2rem; /* Adjusted padding */
    margin-left: auto; /* Align to the right */
}

/* Button hover effect */
#update-price-btn:hover {
    transition: 0.2s;
    scale: 1.05; /* Slightly enlarge button */
}

/* Wrapper for horizontal layout */
.wrapper-h {
    display: flex;
    flex-wrap: wrap; /* Wrap content */
    align-items: center; /* Align vertically */
}

/* Wrapper for vertical layout */
.wrapper-v {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    flex-wrap: wrap;
    border-radius: 0.25rem; /* Rounded corners */
    cursor: default; /* Default cursor */
    font-size: smaller; /* Smaller font size */
}


/* The wrapper for the chart, ensuring full width */
.chart-wrapper {
    min-width: 100%;  /* Minimum width set to 100% */
    max-width: 100%;  /* Maximum width set to 100% */
}

/* The container for the chart with rounded corners, scrollable content, and shadow */
#chart-container {
    border-radius: 0.25rem;  /* Rounded corners for the container */
    min-height: 23rem;  /* Minimum height for the container */
    max-width: 100%;  /* Maximum width is set to 100% */
    overflow-x: scroll;  /* Allows horizontal scrolling */
    overflow-y: hidden;  /* Hides vertical scrolling */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px;  /* Adds shadow effect to the container */
    margin-bottom: 1rem;  /* Adds space below the container */
}

/* The buttons section for the chart, with flexible layout and spacing */
.chart-buttons{
    display: flex;  /* Enables flexbox layout */
    flex-direction: row;  /* Aligns buttons in a row */
    flex-wrap: wrap;  /* Allows wrapping of buttons if necessary */
    width: 100%;  /* Takes full width of the container */
    height: fit-content;  /* Height adjusts to content */
    justify-content: space-between;  /* Distributes buttons with space between */
    gap:0.5rem;  /* Adds space between buttons */
    background-color: #F1F5F9;  /* Light gray background */
    border-radius: 0.25rem 0.25rem 0 0;  /* Rounded corners at the top */
    padding-top: 0.25rem;  /* Padding at the top */
    padding-bottom: 0.25rem;  /* Padding at the bottom */
    padding-left:0.5rem;  /* Padding on the left */
    padding-right:0.5rem;  /* Padding on the right */
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 2px;  /* Adds shadow effect */
}

/* Flexbox layout for the time frame and graph buttons sections */
#timeframe-buttons,
#graph-buttons {
    display: flex;
    flex-direction: row;  /* Align buttons in a row */
    flex-wrap: wrap;  /* Wrap buttons if necessary */
    gap: 1rem;  /* Adds space between buttons */
}

/* Aligns timeframe buttons to the right */
#timeframe-buttons {
    justify-content: end;  /* Aligns buttons to the right */
}

/* Style for each chart button */
.chart-button {
    padding:0.5rem;  /* Padding inside the button */
    font-size: smaller;  /* Smaller font size */
    display: flex;  /* Uses flexbox for content alignment */
    justify-content: center;  /* Centers the button's content */
    align-items: center;  /* Vertically centers the content */
    border-radius: 0.5rem;  /* Rounded corners for buttons */
}

/* Hover effect for chart buttons */
.chart-button:hover {
    background-color: rgb(255, 255, 255);  /* Changes background color on hover */
}

/* Style for clicked state of buttons */
.clicked {
    background-color: rgb(255, 255, 255);  /* Background changes when clicked */
}

/* Custom font for SVG elements */
svg {
    font-family: 'Poppins';  /* Applies Poppins font */
}

/* Custom scrollbar style (no scrollbar visible) */
::-webkit-scrollbar {
    width: 0rem;  /* Hides the scrollbar */
}

/* The wrapper for stock search, with flexible layout */
.stock-wrapper {
    position: relative;  /* Allows positioning within the parent */
    display: flex;  /* Uses flexbox layout */
    flex-direction: column;  /* Stacks child elements vertically */
    gap:1rem;  /* Adds space between child elements */
}

/* Style for the search input field */
input[type=search] {
    border: 0.5px solid;  /* Thin border around the search input */
    border-radius: 0.25rem ;  /* Rounded corners */
    padding: 1rem 0.5rem;  /* Padding inside the input */
    height: 2rem;  /* Defines the height of the input */
    width: 100%;
}

.wrapper-input {
    width: 100%;
    position: relative;
}

.tooltip-custom {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 75%;
}

#tooltip-input {
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    justify-content: center; /* Center text */
    align-items: center; /* Center vertically */
    border-radius: 0.25rem; /* Rounded corners */
    background-color: #F1F5F9; /* Black background */
    color: rgb(118, 118, 118); /* White text */
    border: 0.0625rem rgba(255, 255, 255, 0); /* Transparent border */
    box-shadow: rgba(0, 0, 0, 0.4) 0px 0.0625rem 0.25rem; /* Subtle shadow */
    text-align: center;
    padding: 0.5rem 0.3rem;
}

/* Custom style for the search cancel button inside the input */
#stock-input::-webkit-search-cancel-button{
    -webkit-appearance: none;  /* Hides the default appearance */
    height: 20px;  /* Sets the height */
    width: 20px;  /* Sets the width */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%30777'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/></svg>");  /* Custom cancel button icon */
}

/* Positioning of the stock input field */
#stock-input {
    z-index: 2;  /* Ensures it's above other elements */
}

/* The list that shows stock search results */
.search-list {
    border-top: none;  /* No top border */
    max-height: 50vh;  /* Limits the height to 50% of the viewport */
    position: absolute;  /* Positioning of the list */
    border-radius: 0 0 0.25rem 0.25rem;  /* Rounded bottom corners */
    top: 2.1rem;  /* Position the list below the input field */
    z-index: 1;  /* Ensure it appears below the input field */
    overflow: scroll;  /* Allows scrolling within the list */
    background-color: white;  /* White background */
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px; /* Subtle shadow */
}

/* Hide the scrollbar for Chrome, Safari, and Opera */
.search-list::-webkit-scrollbar {
    display: none;
}
  
/* Hide scrollbar for IE, Edge, and Firefox */
.search-list {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Style for the list of search results */
ul {
    list-style: none;  /* Removes default list styling */
    max-height: 100vh;  /* Maximum height to fill viewport */
    display: grid;  /* Uses grid layout */
    gap: 0.5rem;  /* Space between items */
}

/* Hover effect for search result items */
#stock-search-results li:hover {
    background-color: rgb(225, 225, 225);  /* Light background on hover */
}

/* Hover effect for search result spans */
#stock-search-results span:hover {
    background-color: rgba(225, 225, 225, 0);  /* No change on span hover */
}

/* Style for individual list items */
li,
lh {
    cursor: default;  /* Default cursor style */
    border-radius: 0.25rem;  /* Rounded corners */
    background-color: rgb(255, 255, 255);  /* White background */
    display: flex;  /* Uses flexbox layout */
    flex-wrap: wrap;  /* Allows wrapping of content */
    align-items: baseline;  /* Aligns items at baseline */
    justify-content: space-between;  /* Distributes items with space between */
    padding:0.5rem 1rem;  /* Padding inside the item */
    width: 100%;  /* Full width */
    max-width: 100%;  /* No maximum width limit */
    text-align: center;  /* Centers text */
    overflow-x: scroll;  /* Horizontal scrolling if content overflows */
}

/* Style for header list items */
lh {
    background-color: black;  /* Black background */
    color:white;  /* White text */
}

/* Hide scrollbar for list items */
li::-webkit-scrollbar,
lh::-webkit-scrollbar {
    display:none;  /* Hide scrollbars */
}

/* Style for the search result symbol names */
.search-symbol-name {
    font-size: 0.8rem;  /* Smaller font size */
}

/* Grid layout for search result items */
.stock-search-item {
    grid-template-columns: 0.5fr 1fr;  /* Defines column sizes */
}

/* HIDE elements*/
.hide {
    visibility: hidden;
    opacity: 0;
  }


/* HTML: <div class="loader"></div> */
.loader {
    width: 50px;
    scale: 0.5;
    aspect-ratio: 1;
    border-radius: 50%;
    background: 
      radial-gradient(farthest-side,#ffa516 94%,#0000) top/8px 8px no-repeat,
      conic-gradient(#0000 30%,#ffa516);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: l13 1s infinite linear;
  }
  @keyframes l13{ 
    100%{transform: rotate(1turn)}
  }