:root {
    --orange: hsl(24 100 50);
    --bruise: hsl(211 31 32);

    --primary: hsl(from var(--orange) h calc(s - 6) calc(l + 9));
    --secondary: var(--bruise);

    --green-fg: #00c519;
    --white: #ffffff;
    --almost-white: #dddddd;
    --deco: #888888;
    --red: hsl(0, 80%, 30%);

    --orange-fg: #e88519;

    --bg: var(--white);
    --bg2: var(--almost-white);
    --fg: var(--secondary);
    --fg-button: var(--white);
    --fg-NOTE: var(--green-fg);
    --fg-WARNING: var(--orange-fg);
    --fg-highlight: var(--orange-fg);
    --fg-SUCCESS: var(--green-fg);
    --fg-ERROR: var(--red);

    scroll-behavior: smooth;
}

/*******************************************************************************
	* Override Pico light colours
	* Note that dark theme is disabled for now.
	* It can be enabled by overriding each color, as detailed here: https://picocss.com/docs/css-variables
	*****************************************************************************/
[data-theme=light],
:root:not([data-theme=dark]),
:host:not([data-theme=dark]) {
    --pico-primary-background: var(--primary);
    --pico-primary-hover-background: hsl(from var(--pico-primary-background) h s calc(l + 8));
    --pico-background-color: var(--bg);
    --pico-color: var(--fg);
    --pico-muted-color: var(--deco);
    --pico-border-color: var(--deco);

    --pico-primary: var(--primary);
    --pico-primary-hover: hsl(from var(--pico-primary-background) h s calc(l + 8));
    --pico-primary-focus: hsl(from var(--pico-primary-background) h s calc(l - 8));
    --pico-primary-inverse: var(--fg-button);
    --pico-primary-underline: var(--pico-primary);

    --pico-secondary: var(--secondary);
    --pico-secondary-hover: var(--secondary);
    --pico-secondary-focus: var(--secondary);
    --pico-secondary-inverse: var(--fg-button);
    --pico-text-selection-color: hsl(from var(--primary) h s l / 25%);
}

/* Good for headings in German */
h1, h2, h2 {
    hyphens: auto;
}

/* Solves footer on the bottom issue */
body {
    --pico-border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/*******************************************************************************
	* Messages and popups
	*****************************************************************************/
.Highlight {
    border-left-width: 3px;
    border-left-style: solid;
    padding: 0.1ex 1rem;
    margin-top: 1ex;
}
.Highlight h3 {
    display: block;
    margin: 0.5em 0;
    font-weight: 900;
}
.Highlight h3::before {
    /*noinspection CssNoGenericFontName*/
    font-family: "Font Awesome 6 Free";
}

.Highlight.NOTE {
    border-left-color: var(--fg-NOTE);
}
.Highlight.NOTE h3 {
    color: var(--fg-NOTE);
}
.Highlight.NOTE h3::before {
    content: "\f05a\00a0";
}

.Highlight.WARNING {
    border-left-color: var(--fg-WARNING);
}
.Highlight.WARNING h3 {
    color: var(--fg-WARNING);
}
.Highlight.WARNING h3::before {
    content: "\f071\00a0";
}

.success-message {
    color: var(--fg-SUCCESS);
}

.error-message {
    color: var(--fg-ERROR);
}

header, footer {
    text-align: center;
    padding: 1rem;
    background-color: var(--bg2);
}

footer {
    position: page;
    left: 0;
    right: 0;
    bottom: 0;
}

aside {
    padding-left: 1em;
}

header nav {
    --pico-primary: var(--secondary);
}
/*******************************************************************************
	* Tickets list
	*****************************************************************************/
.tickets {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;

    --pico-form-element-spacing-vertical: 0.5rem;
    --pico-form-element-spacing-horizontal: 0.6rem;
}

.ticket {
    padding: 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;

    background-color: hsl(0 0 94);
    border-radius: 12px;
    /*border: 1px solid var(--pico-border-color);*/
}

.ticket img {
    height: 80px;
    width: 84px;
    object-fit: contain;
    border-radius: 12px;
    padding: 4px;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
    background-color: var(--bg);
}

.ticket div {
    flex-grow: 1;
    align-self: start;
    margin-top: 8px;

    /*display: flex;*/
    /*flex-direction: column;*/
    /*justify-content: space-around;*/
    /*gap: 0.25em;*/
}
.ticket div p {
    margin: 0;
}
.ticket .name {
    font-weight: bold;
}
.ticket .description {
    color: #aaa;
    font-size: 0.9em;
}
.ticket .price {
    font-size: 1.1em;
}
.ticket  button[type="submit"] {
    align-self: center;
    height: auto;
    font-weight: bold;
    font-size: 1.1em;
}

.ticket select {
    max-width: fit-content;
    --pico-spacing: 0.1em;
}

.ticket button[type="submit"] {
    /* Because inputs in forms take up the entire width, by Pico */
    width: fit-content;
}

/*******************************************************************************
	* Show password buttons
	*****************************************************************************/
i.fas {
    /*noinspection CssNoGenericFontName*/
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

input[type="password"] + i.fas::before {
    content: '\f070';
}

input[type="text"] + i.fas::before {
    content: '\f06e';
}

.input-with-icon {
    position: relative;
    display: flex;
    width: 100%;
}

.input-with-icon > input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0; /* Allegedly a safari fix */
    padding-right: 3rem;       /* keep text clear of the icon */
}

input + i.fas {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 1rem;
    width: 3rem;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
}

.main-form {
    max-width: 650px;
    margin-inline: auto;
}

.subscription-actions {
    flex-direction: row;
    gap: 1rem;
    display: flex;
    max-width: 500px;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.subscription-actions button {
    margin: 0;
}

.register {
    flex: 1;
}

/*.subscription-actions > form {*/
/*    flex: 1;*/
/*}*/

button {
    white-space: nowrap;
}

/*.subscription-actions button {*/
/*    padding-inline: 0.2em;*/
/*}*/

nav > ul:last-child {
    flex-wrap: wrap;
}

/* Burger button */
.burger {
    display: none;
    /* hidden on desktop */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    align-self: center;
}

.burger div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.burger div span {
    display: block;
    width: 24px;
    height: 3px;
    background: var(--pico-color);
    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

.burger.open div span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger.open div span:nth-child(2) {
    opacity: 0;
}

.burger.open div span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Hide the real checkbox */
.burger input {
    display: none;
}
/* Mobile menu */
@media (max-width: 768px) {

    .menu > li {
        margin-left: 2rem;
        align-self: flex-start;
    }

    .burger {
        display: flex;
        flex-direction: row;
        gap: 0.5em;
        align-items: center;
    }

    .menu {
        flex-direction: column;
        background: var(--bg2);
        position: absolute;
        top: 5.45rem;
        padding-right: 2rem;
        left: 0;
        z-index: 10;
        border-top: 1px solid #ccc;

        /* start hidden off-screen */
        transform: translateX(-120%);
        pointer-events: none;

        transition: transform 0.4s ease;
        box-shadow: 8px 8px 12px rgba(0,0,0,0.2);
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .menu[aria-checked='true'] {
        transform: translateX(0px);
        pointer-events: auto;
    }

}

/*******************************************************************************
	* Image behind D-Ticket
	* Simple, for now.
	*****************************************************************************/
.hero {
    padding-block: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.87) 75%),
        url('./train-station-scaled.jpg') no-repeat center / cover;
}

.login h1,
.login h2,
.login h3,
.login h4 {
    --pico-color: white;
}

.login {
    --pico-background-color: var(--fg);
    background-color: var(--fg);
    --pico-color: white;
}

:root {
    --scale: clamp(0.6, 1vw + 0.5, 1);
}

.login header {
    padding: 0;
    text-align: start;
    --pico-background-color: var(--fg);
    background-color: var(--fg);

    display: flex;
    gap: 1.2rem;
    margin-top: 3.5rem;
}

/* Scales the login header, image and headings. */
:root {
    --login-header-scale: clamp(0.42rem, calc(2vw), 0.6rem);
}

.login header h1 {
    font-size: calc(5 * var(--login-header-scale));
    margin-bottom: 0.5rem;
}

.login h4 {
    font-size: calc(3 * var(--login-header-scale));
    font-weight: 400;
}

.eticket-wallet-logo {
    height: calc(12 * var(--login-header-scale));
    background-color: var(--orange);
    border-radius: 100%;
    margin-left: 1rem;
}

.login p {
    font-size: 1.2rem;
}

.login-form-container {
    margin-top: 1.2rem;
}

.login-form-container > p {
    padding-inline: 1.2rem;
    font-weight: 300;
    margin-bottom: 2rem;
}

.login-container {
    padding: 1rem;
    max-width: 60ch;
    margin-inline: auto;
}

.login-container form {
    padding-inline: 1.2rem;
}

.login footer {
    background-color: var(--fg);
    --readable-orange: hsl(from var(--primary) h s calc(l + 10));
    --pico-primary: var(--readable-orange);
    --pico-primary-underline: var(--readable-orange);
}

.ticket input[type='submit'] {
    margin: 0;
}

button[type='submit'] {
    display: flex;
    gap: 0.2em;
    justify-content: center;
    align-items: center;
}

.ticket button[type='submit']{
    margin-bottom: 0;
}

.subscription-actions legend {
    border: none;
    padding-inline: 0.5rem;
}

@media (max-width: 768px) {
    .hide-sm {
        display: none;
    }
}

.regtoken {
    background: hsl(0 0 94);
    border-radius: var(--pico-border-radius);
    height: calc(1rem + 3 * var(--pico-spacing));
    display: flex;
    align-items: center;
    border: 1px solid var(--pico-border-color);
}

.regtoken > * {
    margin-left: 1rem;
}

.regtoken button {
    padding-block: 0.4rem; margin-left: 0.5rem;
}

.controls {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
}

.controls p {
    margin: 0;
}

.controls p:first-child {
    font-weight: bold;
}

.controls form {
    width: fit-content;
}

.danger {
    --pico-primary: hsl(10 75 40);
}

.controls button {
    padding-block: 0.5rem;
}