/* styles.css */
:root {
    --primary-color: #007bff;
    --primary-color-hover: #0067D4;
    --primary-color-active: #0056B3;
    --background-color: #F5FBFB;
    --text-color: #000000;
    --icon-color: #F6F6F6;
    --icon-color-hover: #ECECEC;
    --card-background: #ffffff;
    --card-background-hover: #F6F6F6;
    --hover-background: #e6f2ff;
    --border-color: #0015b4;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --progress-bar-bg: #e0e0e0;
    --overlay-bg: rgba(0, 0, 0, 0.2);
}
	
.station-image {
        width: 100%;        /* Shrinks image proportionally */
        max-width: 400px;  /* Makes it smaller on mobile */
 		margin: 0; /* Remove any extra margin */
        padding: 0; /* Remove padding */
		margin: 20px auto; /* Adds space above & below */
    	border-radius: 10px; /* Optional: Rounded corners */

    }

    .container { /* Ensure the text and image share the same width */
        padding: 0 5%; /* Adjust padding to control the text width */
    }
	

}
.button:focus-visible {
    outline: none;
    box-shadow: none;
  }

  /* CSS */
.hidden {
    display: none;
}

/* Global Styles */
body {
    font-family: 'area-normal', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: flex-start;
    min-height: 100vh;
    width: 100vw;
    margin: 0;
    background-color: var(--background-color);
    overflow-y: auto;
    overflow-x: hidden;
    color: var(--text-color);
}

/* Container and Text Styles */
.container {
    text-align: left;
    margin: 0 auto;
    padding-left: 5vw;
    padding-right: 5vw;
    padding-top: 5vw;
    padding-bottom: 0;
}

.title {
    font-family: 'area-normal', sans-serif;
    font-weight: 800;
    font-size: 12vw;
    line-height: 1.2;
    text-align: left;
    margin: 0;
    padding-bottom: 5vw;
}

h2 {
    font-family: 'area-normal', sans-serif;
    font-weight: 800;
    font-size: 8vw;
    line-height: 1.2;
    text-align: left;
    margin: 0;
    padding-bottom: 5vw;
    padding-top: 7.5vw;
}


.subtitle {
    font-family: 'area-normal', sans-serif;
    font-weight: 600;
    font-size: 6vw;
    line-height: 1.35;
    vertical-align: baseline;
    margin: 0;
    padding-bottom: 5vw;
}

.additional-text {
    font-family: 'area-normal', sans-serif;
    font-weight: 600;
    font-size: 4vw;
    margin: 0;
    margin-bottom: 2vw;
}

p {
    font-family: 'area-normal', sans-serif;
    font-weight: 500;
    font-size: 4vw;
    margin: 0;
    margin-bottom: 2vw;
}

a {
    text-decoration: none;
}

/* Slider Styles */
.slider {
    display: flex;
    overflow-x: auto;
    margin-top: 2em;
    width: 100vw;
    box-sizing: border-box;
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
    cursor: grab;
}

.slider.active {
    cursor: grabbing;
}

.slider::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* Card Styles */
.card-container {
    position: relative;
    margin-left: 5vw;
    padding-bottom: 3vw;
}

.first {
    padding-left: 5vw;
}

.last {
    padding-left: 5vw;
    padding-right: 5vw;
}

.card {
    font-family: 'area-normal', sans-serif;
    background-color: var(--card-background);
    border-radius: 10px;
    box-shadow: 0 4px 8px var(--shadow-color);
    width: 66vw;
    height: 45vw;
    flex: 0 0 auto;
    padding: 1em;
    text-align: left;
    font-weight: 600;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-description {
    margin-bottom: 5vw;
    margin-top: 0;
    text-align: left;
}

/* Card Title and Number */
.card-title-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.card-title {
    font-family: 'area-normal', sans-serif;
    font-weight: 800;
    font-size: 1.2em;
    text-align: left;
    width: 80%;
    margin: 0.25em 0;
}

.card-number {
    width: 2em;
    height: 2em;
    background-color: var(--primary-color);
    color: var(--icon-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'area-normal', sans-serif;
    font-weight: 800;
    font-size: 1em;
    line-height: 1;
    margin-top: 0;
}

/* Button Styles */
.card-buttons {
    display: flex;
    justify-content: flex-end;
    /* Align buttons to the right */
    align-items: center;
    margin-top: auto;
    width: 100%;
    text-align: right;
    /* Ensure the alignment is to the right */
}

.map-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
    border-radius: 7.5vw;
    width: 15vw;
    height: 15vw;
}

.map-button:hover {
    background-color: var(--primary-color-hover);
    color: var(--icon-color-hover);
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    font-size: 1.2em;
    color: var(--icon-color);
    vertical-align: middle;
}

/* Footer Styles */
.footer {
    width: 100%;
    background-color: var(--primary-color);
    color: var(--icon-color);
    text-align: center;
    padding: 1em 0;
    margin-bottom: 0;
    font-family: 'area-normal', sans-serif;
    font-weight: 600;
}

.footer p {
    margin: 0;
}

/* Popup Overlay Styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* Adding Safari compatibility */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.popup-content {
    background-color: var(--card-background);
    border-radius: 10px;
    text-align: center;
    width: 90%;
    max-width: 500px;
    position: relative;
    align-items: center;
}

.popup-content p {
    padding: 0em 1.5em 0em 1.5em;
}

.popup-content h2 {
    text-align: center;
}

.closePopupButton,
.next-station-button {
    font-family: 'area-normal', sans-serif;
    font-weight: 600;
    padding: 0.5em 1em;
    border: none;
    border-radius: 2.5vw;
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    display: flex;
    justify-content: center;
    width: 90%;
    height: 10vw;
    margin: auto;
    margin-top: 0em;
}

.closePopupButton {
    background-color: var(--card-background);
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.closePopupButton:hover {
    background-color: var(--card-background-hover);
    border: 2px solid var(--primary-color-hover);
    color: var(--primary-color-hover);
}

.next-station-button {
    background-color: var(--primary-color);
    color: var(--icon-color);
    margin-top: 1em;
    margin-bottom: 5%;
}

.next-station-button:hover {

    background-color: var(--primary-color-hover);
    color: var(--icon-color-hover);
}

.popup-image {
    width: 100%;
    margin-bottom: 1em;
}

/* Audio Player Styles */
.audio-player {
    position: sticky;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2em;
    background-color: var(--card-background);
    box-shadow: 0 -4px 10px var(--shadow-color);
}

.play-pause-button {
    background-color: var(--primary-color);
    border-radius: 7.5vw;
    width: 15vw;
    height: 15vw;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-top: 1.5em;
    color: var(--icon-color);
}

.play-pause-button:hover {
    background-color: var(--primary-color-hover);
    color: var(--icon-color-hover);
}

.progress-container {
    width: 90%;
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
}

.progress-bar {
    width: auto;
    height: 12vw;

    background-color: var(--progress-bar-bg);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: grab;
    z-index: 1;
}

.progress-bar:active {
    cursor: grabbing;
}

.progress-indicator {
    width: 0%;
    height: 100%;
    background-color: var(--primary-color);
    transition: width 0.1s ease-in-out;
}

.progress-indicator:hover {
    background-color: var(--primary-color-hover);
}

.progress-indicator:active {
    background-color: var(--primary-color-active);
}

.time-container {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    font-family: 'area-normal', sans-serif;
    font-weight: 600;
    color: var(--text-color);
    pointer-events: none;
    z-index: 2;
}

.nextbutton {
    font-family: 'area-normal', sans-serif;
    font-weight: 600;
    padding: 0.5em 1em;
    border: none;
    border-radius: 2.5vw;
    cursor: pointer;
    text-decoration: none;
    align-items: center;
    display: flex;
    color: var(--icon-color);
    background-color: var(--primary-color);
    border-radius: 2.5vw;
    height: 10vw;
    display: flex;
    justify-content: center;
    cursor: pointer;
    margin-bottom: 1.5em;
}

/* Menu Button Styles */
.menu-button {
    position: fixed;
    top: 5vw;
    right: 5vw;
    width: 13vw;
    height: 13vw;
    border-radius: 50%;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 0;
    box-shadow: 0 4px 8px var(--shadow-color);
    color: var(--icon-color);
}

.menu-button:hover {
    background-color: var(--primary-color-hover);
    color: var(--icon-color-hover);
}

.menu-options {
    position: fixed;
    top: 18vw;
    right: 5vw;
    flex-direction: column;
    align-items: center;
    z-index: 1999;
    transition: all 0.3s ease-in-out;
}

.menu-option-button {
    background-color: var(--card-background);
    border-radius: 50%;
    width: 13vw;
    height: 13vw;
    margin-top: 3vw;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 8px var(--shadow-color);
    transform: translateY(-20px);
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.menu-option-button .material-icons {
    color: var(--primary-color);
}

.menu-option-button:hover {
    background-color: var(--card-background-hover);
}

.menu-option-button .material-icons:hover {
    color: var(--primary-color-hover);
}

@media (min-aspect-ratio: .6) or (min-width:700px) {
    .container {
        width: 70vw;
        max-width: 2000px;
        padding-left: 15vw;
        padding-right: 15vw;
        padding-top: 1vh;


    }

    .title {
        font-size: 7vh;
        padding-bottom: 2vh;
        padding-top: 10vh;
    }

    h2 {
        font-size: 3.5vh;
        margin: 0;
        padding-bottom: 2vh;
        padding-top: 2vh;
    }

    .subtitle {
        font-size: 4.5vh;
        margin: 0;
        padding-bottom: 5vh;
    }

    .additional-text {
        font-size: 2.8vh;
        margin: 0;
        margin-bottom: 1vh;
    }

    p {
        font-size: 3vh;
        margin-bottom: 3vh;
    }

    .card-title {
        font-size: 3.5vh;
    }

    .card-number {
        font-size: 3vh;
    }


    .card-container {
        position: relative;
        margin-left: 5vh;
        padding-bottom: 3vh;
        padding-top: 3vh;
    }


    .last {
        padding-right: 15vw;

        padding-top: 3vh;
    }

    .slider{
        height: auto;
    }

    .first {
        margin-left: 15vw;

        padding-top: 3vh;
    }

    .card {
        border-radius: 2vh;
        width: 40vh;
        height: 25vh;
        padding: 2vh;
    }

    .material-icons {
        font-size: 5vh !important;
    }

    .map-button {
        border-radius: 50%;
        width: 7vh;
        height: 7vh;
    }

    .card-description{
        margin-bottom: 0;
    }

    .popup-content {
        max-width: 50vh;
        max-height: 90vh;
        border-radius: 2em;
    }

    .popup-content p{
        font-size: 2.5vh;
    }

    .closePopupButton, .next-station-button{
        height: 5vh;
        border-radius: 1vh;
        font-size: 2vh;
    }

    .popup-image {
        height: 600px;
        max-height: 30vh;
    }

	.footer {
    width: 100%;
    background-color: var(--primary-color);
    color: var(--icon-color);
    text-align: center;
    padding: 1em 0;
    margin-bottom: 0;
    font-family: 'area-normal', sans-serif;
    font-weight: 600;
}

	.footer p {
    margin: 0;
}
    }

    .audio-player{
		position: fixed;
    }

    .play-pause-button, .menu-button, .menu-option-button{
        width: 7vh;
        height: 7vh;
    }

    .menu-options {
        top: 17vh;
    }

    .menu-option-button {
        margin-top: 2vh;
    }

    .menu-button {
        top: 10vh;
    }

    .audio-player{
        padding-top: 1vh;
    }

    .progress-bar{
        height: 5vh;
        border-radius: 1vh;
    }

    .progress-container {
        width: 70vw;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }

    .time-container{
        font-size: 2.5vh;
    }

    .current-time {
        margin-left: 1vh;
    }

    .total-time {
        margin-right: 1vh;
    }


    .nextbutton {
        height: 5vh;
        border-radius: 1vh;
        font-size: 1.8vh;
    }

		/* Other styles */

/* Station Image Styles (Updated) */
.station-image {
    width: 90%;        /* Makes it responsive */
    max-width: 400px;  /* Limits its size on large screens */
    height: auto;      /* Maintains aspect ratio */
    display: block;    /* Centers the image */
    margin: 20px auto; /* Adds space above & below */
    border-radius: 10px; /* Optional: Rounded corners */
}

/* Media Queries */

/* For large screen devices */
@media (min-aspect-ratio: .6) or (min-width: 700px) {
    .container {
        width: 70vw;
        max-width: 2000px;
        padding-left: 15vw;
        padding-right: 15vw;
        padding-top: 1vh;
    }

    .title {
        font-size: 6vh;
        padding-bottom: 2vh;
        padding-top: 10vh;
    }

    h2 {
        font-size: 3.5vh;
        margin: 0;
        padding-bottom: 2vh;
        padding-top: 2vh;
    }

    .subtitle {
        font-size: 4vh;
        margin: 0;
        padding-bottom: 5vh;
    }
	
}


   .station-image {
    width: 90%;        /* Makes it responsive */
    max-width: 400px;  /* Limits its size on large screens */
    height: auto;      /* Maintains aspect ratio */
    display: block;    /* Centers the image */
    margin: 20px auto; /* Adds space above & below */
    border-radius: 10px; /* Optional: Rounded corners */

}