/* CSS RESET: The new CSS reset - version 1.8.4 (last updated 14.2.2023) */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
    all: unset;
    display: revert;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}
a, button {
    cursor: revert;
}
ol, ul, menu {
    list-style: none;
}
img {
    max-inline-size: 100%;
    max-block-size: 100%;
}
table {
    border-collapse: collapse;
}
input, textarea {
    -webkit-user-select: auto;
}
textarea {
    white-space: revert;
}
meter {
    -webkit-appearance: revert;
    appearance: revert;
}
:where(pre) {
    all: revert;
}
::placeholder {
    color: unset;
}
::marker {
    content: initial;
}
:where([hidden]) {
    display: none;
}
:where([contenteditable]:not([contenteditable="false"])) {
    -moz-user-modify: read-write;
    -webkit-user-modify: read-write;
    overflow-wrap: break-word;
    -webkit-line-break: after-white-space;
    -webkit-user-select: auto;
}
:where([draggable="true"]) {
    -webkit-user-drag: element;
}
:where(dialog:modal) {
    all: revert;
}

/* FONTS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

/* VARIABLES */
:root {
    --main-color: #66aaeb;
    --main-color-soft: #e9f4ff;
    --main-color-bright: #3d98ef;
    --main-color-gray-soft: #e7e7e7;
    --color-text: #333333;
    --color-text-soft: #8C8C8C;
    --color-operative: #98EF2A;
    --color-operative-soft: #F4FFE5;
    --color-not-operative: #EF2A2A;
    --color-not-operative-soft: #FFF5F5;

    --display-height: 315px;
    --footer-height: 32px;

    --main-font: 'Inter', sans-serif
}

/* GENERAL */
html {
    overflow-x: hidden;
}
body {
    font-family: var(--main-font);
    color: var(--color-text);
    overflow-x: hidden;
}
strong {
    font-weight: 700;
}
main {
    min-height: calc(100vh - var(--footer-height));
    background-color:white;
}
.container {
    width: 100%;
    max-width: 600px;
}
a {
    color: var(--main-color);
    transition: color 250ms linear;
}
a:hover {
    color: var(--main-color-bright);
    transition: color 250ms linear;
}
.button {
    display: inline-block;
    background-color: var(--main-color);
    color: white;
    border-radius: 20px;
    font-size: 90%;
    text-align: center;
    padding: 0.75rem 1rem;
    transition: background-color 250ms ease-in-out;
    cursor: pointer;
}
.button:hover {
    background-color: var(--main-color-bright);
    transition: background-color 250ms ease-in-out;
}

/* DISPLAY AREA */
.display {
    position: relative;
    background-color:var(--main-color);
    min-height: 0px;
    transition: min-height 500ms cubic-bezier(0.165, 0.84, 0.44, 1)
}
.display.expanded {
    min-height: var(--display-height);
    transition: min-height 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* COUNTDOWN AREA */
.countdownDisplay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.countdownDisplay .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    transform: translateY(100px);
}
.display.expanded .countdownDisplay .container {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1), transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-delay: 300ms;
}
.timer {
    font-size: 100px;
    color: white;
}
.busArrivalText {
    color: white;
    font-size: 110%;
}

/* DISPLAY ANIMATION AREA*/
.animationDisplay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.animationDisplay .container {
    overflow-y: clip;
    position: relative;
}
.animationDisplay svg {
    display: inline-block;
}
.svgCloud {
    fill: white;
    width: 150px;
    height: 150px;
    position: absolute;
}
.svgCloud-1 {
    bottom: 170px;
    right: -50px;
}
.svgCloud-2 {
    bottom: 220px;
    left: -50px;
}
.svgBusStop {
    position: absolute;
    width: 110px;
    bottom: 0;
    right: 40px;
}
.svgBusStop .st0 {
    opacity: 0.25;
    fill: white;
}
.svgBusStop .st1 {
    fill: white;
}
svg.svgBus {
    position: absolute;
    fill: white;
    bottom: 0;
    width: 220px;
    display: none;
}
.svgBus-body {    
    animation-name: wobblingBus;
    animation-duration: 300ms;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
.svgBus-body-windows {
    fill: var(--main-color);
}
@keyframes wobblingBus {
    0% { transform: translateY(0);}
    100% { transform: translateY(-0.25px);}
}

/* INFO AREA */
.info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.info > .container {
    padding: 2rem 1.5rem;
}
.lineInfoBox {
    position: relative;
    width: 100%;
    max-height: 0;
    transition: max-height 250ms linear 0s;
}
.lineInfoBox.expanded {
    max-height: 500px;
    transition: max-height 250ms linear 0s;
}
.lineInfoBox-content {
    overflow: hidden;
    opacity: 0;
    animation: fadeIn 250ms ease-in 500ms forwards;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* WELCOME MESSAGE */
.welcome {
    max-height: 500px;
}
.welcome.hidden {
    max-height: 0;
    transition: max-height 250ms cubic-bezier(0.165, 0.84, 0.44, 1) 250ms;
}
.logo {
    fill: white;
    width: 42px;
    margin-bottom: 10px;
}
.welcome-message {
    background-color: var(--main-color);
    color: white;
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 2rem;
    font-size: 90%;
    line-height: 1.4rem;
}
.welcome.hidden .welcome-message {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 250ms;
}
.welcome-message-title {
    font-size: 110%;
    display: block;
    margin-bottom: 0.5rem;
}

/* FORM & LINE INFO*/
.form {
    border-radius: 20px;
    width: 100%;
}
.form .fieldBox {
    position: relative;
    margin-bottom: 3rem;
}
.form label,
.lineInfoTitle {
    position: absolute;
    display: inline-block;
    padding: 0px 5px;
    left: calc(2rem - 5px);
    top: -6px;
    background-color: white;
    font-size: 80%;
    margin-bottom: 0.7rem;
    color: var(--color-text-soft);
}
.form select,
.lineInfo {
    display: block;
    width: 100%;
    border: 1px solid var(--main-color-gray-soft);
    background-color: white;
    box-shadow: 0px 2px 8px -6px #00000080;
}
.form select {
    border-radius: 40px;
    padding: 1rem 2rem;
}
.lineInfo {
    border-radius: 20px;
    padding: 2rem 2rem;
    margin-bottom: 10px;
}
.lineInfo-field:not(:last-child) {
    margin-bottom: 1.2rem;
}
.lineInfo .lineInfo-field-operation:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    height: 0.7rem;
    width: 0.7rem;
    margin-right: 0.3rem;
}
.lineInfo[data-operative="false"] .lineInfo-field-operation:before {
    background-color: var(--color-not-operative);
}
.lineInfo[data-operative="true"] .lineInfo-field-operation:before {
    background-color: var(--color-operative);
}
.lineInfo .lineInfo-field-message {
    border-radius: 5px;
    padding: 1rem;
}
.lineInfo[data-operative="false"] .lineInfo-field-message {
    border:1px solid var(--color-not-operative);
    background-color: var(--color-not-operative-soft);
}
.lineInfo[data-operative="true"] .lineInfo-field-message {
    border:1px solid var(--color-operative);
    background-color: var(--color-operative-soft);
}

/* ERROR BOX */
.errorBox {
    display: none;
}
.errorBox.visible {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    background-color: #ffffff80;
    justify-content: center;
    align-items: center;
}
.errorBox-content {
    text-align: center;
    max-width: 350px;
    border-radius: 20px;
    padding: 1rem;
    border: 1px solid var(--color-not-operative);
    background-color: var(--color-not-operative-soft);
}
.errorBox-icon {
    fill: var(--color-not-operative);
    width: 42px;
}
.errorMessage {
    font-size: 90%;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}
.errorCode {
    font-size: 70%;
    color: var(--color-not-operative);
    margin-bottom: 1rem;
}

/* FOOTER*/
footer {
    display: flex;
    height: var(--footer-height);
    align-items: center;
    justify-content: center;
    font-size: 12px;
    text-align: center;
}