@import url('colors.css');
@import url('fonts.css');

@media screen and (orientation:portrait) {
    body {
        font-family: var(--main-font);
        height: 100dvh;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: auto 100dvh;
        padding: 0;
        margin: 0;
    }

    .main-container {
        display: grid;
        grid-template-rows: 15% 73% 12%;
        height: 100dvh;
        width: 100dvw;
    }

    .header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .logo {
            width: 60%;
        }

        .language {
            margin: auto 1em;

            img {
                height: 40px;
                width: 40px;
            }

            .language-dropdown {
                font-size: 10px;
                border-radius: 0;
                padding: 0;

                .language-list-portrait {
                    padding: 5px;
                    display: flex;
                    flex-direction: column;
                    font-size: 20px;

                    a {
                        max-width: 100%;
                        text-align: start;
                        padding: 5px;
                    }
                }

                .language-list-landscape {
                    display: none;
                }
            }
        }
    }

    .content {
        height: 100%;
    }

    .footer {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .img-footer {
            height: 1.6em;
            margin: 0.3em auto;
        }

        .text-footer {
            font-size: 0.8em;
            text-align: center;
        }

        .info-footer {
            display: flex;
            flex-direction: row;
            justify-content: space-around;

            .means-of-payment {
                height: 2em;
            }

            .info {
                cursor: pointer;
                text-align: end;
            }
        }
    }

    .stay-payment-title {
        text-transform: uppercase;
        font-family: var(--title);
        font-size: 2.3em;
        text-align: center;
        padding: 1em 0.1em 0.1em 0.1em;
    }

    .arrows {
        height: 3em;
        width: 3em;
        margin-bottom: 1em;
    }

    /* LOADER */

    .loading-container {
        display: flex;
        justify-content: center;
        margin-top: 40%;
    }

    .big-circle-loading {
        height: 80px;
        width: 80px;
        border-radius: 80px;
        border-top: 8px solid transparent;
        animation: bigCircleAnimation 2s linear infinite;
    }

    @keyframes bigCircleAnimation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* END LOADER */

    /* PAGE NOT FOUND VIEW */

    .page-not-found {
        display: flex;
        justify-content: center;

        .page-not-found-info {
            width: 70%;
            margin-top: 40%;
            padding: 1.2em;

            .img-container {
                display: flex;
                align-items: baseline;

                .img {
                    height: 3em;
                    width: auto;
                }

                .oops {
                    font-family: var(--title);
                    font-size: 3.6em;
                    margin: 0 0.3em;
                }

            }

            .text-container {
                .text {
                    font-family: var(--main-font);
                    font-size: 1.1em;
                }
            }
        }
    }

    /* END PAGE NOT FOUND VIEW */

    /* LICENSE PLATE AND TICKET (FROM QR) VIEW */

    .license-plate {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 0.6em;

        .license-plate-text {
            font-size: 1.5em;
            text-align: center;
        }

        input {
            font-size: 3em;
            margin-top: 5%;
            height: 60px;
            width: 75%;
            border: none;
            font-family: var(--medium);
            text-transform: uppercase;
            text-align: center;
        }
    }

    .license-plate-button {
        border: none;
        margin-top: 5%;
        min-width: 50%;

        .license-plate-btn {
            display: flex;
            flex-direction: column;
            align-items: start;
            padding: 1em;

            .img-btn-validate {
                width: 3em;
                margin-bottom: 0.5em;
            }

            .img-btn-home {
                width: 3em;
                margin-bottom: 0.8em;
            }

            .text-btn {
                font-family: var(--main-font);
                text-transform: uppercase;
                font-size: 1.2em;
            }
        }
    }

    .license-plate-free {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 0.6em;

        .license-plate-time-free {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 80%;
            height: 160px;
            text-align: left;
            padding: 1.3em;

            .time-free-title {
                text-transform: uppercase;
                font-family: var(--main-font);
                font-size: 1.3em;
                text-align: left;
            }

            .time-free-panel {
                display: flex;
                flex-direction: row;
                justify-content: space-around;

                .time-exit-img {
                    margin: auto 0;
                    height: 2.2em;
                    width: 2.2em;
                }

                .time-free-text {
                    font-family: var(--bold);
                    display: flex;
                    flex-direction: column;
                    font-size: 1em;
                }
            }
        }
    }

    .license-plate-error {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 0.6em;

        .license-plate-error-panel {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 90%;
            padding: 1em;

            .error-img-panel {
                .error-img {
                    margin-right: 1em;
                    height: 1.4em;
                    width: 1.4em;
                }
            }

            .error-panel {

                .error-title {
                    font-family: var(--semiBold);
                    font-size: 1.2em;
                }

                .error-text {
                    font-family: var(--main-font);
                    font-size: 0.9em;
                }
            }
        }
    }

    /* END LICENSE PLATE AND TICKET (FROM QR) VIEW */

    /* PAYMENT VIEW */

    .payment {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .payment-panel {
            font-family: var(--bold);
            display: grid;
            grid-template-columns: 50% 3px 50%;
            align-items: center;
            width: 90%;
            height: 180px;
            text-align: left;
            font-size: 0.9em;

            .line {
                height: 100%;
            }

            .payment-data-panel {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 1.3em;

                .payment-info-title {
                    display: flex;
                    flex-direction: row;
                    font-size: 0.9em;
                }

                .payment-info-label {
                    text-transform: uppercase;
                }

                .payment-amount-panel {
                    display: flex;
                    flex-direction: column;

                    .payment-amount-label {
                        font-size: 0.9em;
                    }

                    .payment-amount {
                        font-size: 1.3em;
                        text-align: center;
                    }
                }

                .duration-panel {
                    display: flex;
                    flex-direction: column;

                    .duration {
                        text-align: center;
                        font-size: 1.2em;
                    }
                }

                .payment-img {
                    height: 1.5em;
                    width: 1.5em;
                    margin-right: 15px;
                    margin-bottom: 15px;
                }
            }
        }

        .payment-btn-container {
            width: 85%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .payment-btn {
                margin-top: 5%;
                width: 48%;
                display: flex;
                flex-direction: column;
                justify-items: start;
                border: none;
                padding: 1em;

                .img-btn-pay {
                    width: 3em;
                }

                .img-btn-cancel {
                    width: 3em;
                }

                .text-btn {
                    width: 100%;
                    text-align: start;
                    font-family: var(--main-font);
                    text-transform: uppercase;
                    font-size: 1.2em;
                }
            }
        }
    }

    /* END PAYMENT VIEW */

    /* PAYMENT DONE VIEW */

    .payment-done {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .payment-done-panel {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 90%;
            height: 100px;
            padding: 1em;
            font-family: var(--main-font);
            font-size: 1em;
            line-height: 1.4em;
            align-items: center;

            .payment-done-img {
                margin-right: 1em;
                height: 1.8em;
                width: 1.8em;
            }
        }

        .payment-done-btn-container {
            width: 85%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 10%;

            .payment-btn {
                width: 48%;
                display: flex;
                flex-direction: column;
                justify-items: start;
                border: none;
                padding: 1em;

                .img-btn-pay {
                    width: 3em;
                }

                .img-btn-home {
                    width: 3em;
                }

                .text-btn {
                    font-family: var(--main-font);
                    text-transform: uppercase;
                    font-size: 1.2em;
                    width: 100%;
                    text-align: start;
                }
            }
        }

        .payment-done-error-panel {
            height: 150px;
            font-size: 1em;

            .semibold {
                font-family: var(--semiBold);
            }
        }

        .payment-done-error-btn-container {
            margin-top: 5%;
            width: 100%;
            justify-content: center;
        }
    }

    /* END PAYMENT DONE VIEW */

    /* PAYMENT ERROR VIEW */

    .payment-error {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;

        .payment-error-panel {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: start;
            width: 90%;
            height: 100px;
            padding: 1em;
            font-family: var(--main-font);
            font-size: 1em;
            line-height: 1.4em;

            .payment-error-img {
                margin-right: 1em;
                height: 1.8em;
                width: 1.8em;
            }
        }

        .payment {
            width: 100%;
        }

        .payment-error-error-panel {
            height: 130px;
        }

        .payment-error-btn-container {
            margin-top: 5%;
            width: 85%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .payment-btn {
                background-color: var(--primary-color);
                margin-top: 5%;
                width: 48%;
                display: flex;
                flex-direction: column;
                justify-items: start;
                border: none;
                padding: 1em;

                .img-btn-pay {
                    width: 3em;
                }

                .img-btn-home {
                    width: 2.5em;
                }

                .text-btn {
                    font-family: var(--main-font);
                    text-transform: uppercase;
                    font-size: 1.2em;
                    width: 100%;
                    text-align: start;
                }
            }
        }

        .payment-error-error-btn-container {
            justify-content: center;
        }
    }

    /* END PAYMENT ERROR VIEW */

    /* THANKS VIEW */

    .thanks {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2em 2em 2em 2em;

        .thanks-title {
            font-family: var(--title);
            font-size: 2.8em;
            line-height: 1em;
            text-align: center;
            width: 80%;
        }

        .arrows {
            margin: 1em 0;
        }

        .logo {
            margin: 1em 0 2em 0;
            width: 60%;
        }

        .mobility-solutions {
            height: 8em;
        }
    }

    /* END THANKS VIEW */

    /* LEGAL INFORMATION */

    .legal-data {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-y: auto;

        .section-list {
            position: sticky;
            top: 0;
            background: var(--panel-color);
            z-index: 100;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            padding: 15px;
        }

        .section-list a {
            cursor: pointer;
            font-weight: 500;
            text-decoration: none;
            border-bottom: 2px solid transparent;
            padding: 4px 8px;
            transition: all 0.2s;
        }

        .section-content {
            padding: 20px;
        }
    }

    /* END LEGAL INFORMATION */
}

@media screen and (orientation:landscape) {
    body {
        height: 100dvh;
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100dvh;
        padding: 0;
        margin: 0;
    }

    .main-container {
        display: grid;
        grid-template-rows: 20% 65% 15%;
        height: 100dvh;
        width: 100dvw;
    }

    .header {
        padding: 0.2em;
        display: grid;
        grid-template-columns: 10% 80% 10%;
        justify-content: center;

        .logo {
            height: 2.8em;
            margin: auto;
        }

        .language {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;

            img {
                height: 40px;
                width: 40px;
            }

            .language-dropdown {
                font-size: 10px;
                border-radius: 0;
                padding: 0;

                .language-list-landscape {
                    padding: 5px;
                    display: flex;
                    flex-direction: row;
                    font-size: 24px;
                    text-transform: uppercase;
                    font-weight: bold;

                    a {
                        width: 70px;
                        text-align: center;
                        padding: 5px;
                        line-height: 25px;
                    }

                    a:first-of-type {
                        border: none;
                    }
                }

                .language-list-portrait {
                    display: none;
                }
            }
        }
    }

    .footer {
        display: flex;
        flex-direction: row;
        justify-content: center;

        .img-footer {
            height: 1.1em;
            margin: auto;
        }

        .text-footer {
            font-size: 0.8em;
            text-align: center;
        }

        .info-footer {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            margin: auto;

            .means-of-payment {
                height: 2em;
                margin: auto;
            }

            .info {
                margin: auto;
            }
        }
    }

    .stay-payment-title {
        text-transform: uppercase;
        font-family: var(--title);
        font-size: 2.3em;
        text-align: center;
        margin-top: 0.1em;
    }

    .arrows {
        display: none;
    }

    /* LOADER */

    .loading-container {
        display: flex;
        justify-content: center;
        margin-top: 5%;
    }

    .big-circle-loading {
        height: 80px;
        width: 80px;
        border-radius: 80px;
        border-top: 8px solid transparent;
        animation: bigCircleAnimation 2s linear infinite;
    }

    @keyframes bigCircleAnimation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    /* END LOADER */

    /* PAGE NOT FOUND VIEW */

    .page-not-found {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .page-not-found-info {
            display: flex;
            flex-direction: row;
            width: 70%;
            height: 60%;
            padding: 2em;
            justify-content: center;
            align-items: center;

            .img-container {
                display: flex;
                align-items: baseline;

                .img {
                    height: 3em;
                    width: auto;
                }

                .oops {
                    font-family: var(--title);
                    font-size: 3.8em;
                    margin: 0 0.3em;
                }
            }

            .text-container {

                .text {
                    font-family: var(--main-font);
                    font-size: 1.4em;
                }
            }
        }
    }

    /* END PAGE NOT FOUND VIEW */

    /* LICENSE PLATE AND TICKET (FROM QR) VIEW */

    .license-plate {
        display: grid;
        grid-template-columns: 20% 40% 40%;
        gap: 1em;
        padding: 0 4em;
        align-content: center;
        height: 75%;

        .license-plate-text {
            font-size: 1.1em;
            margin: auto;
            font-family: var(--main-font);
        }

        input {
            font-size: 3em;
            width: 100%;
            border: none;
            font-family: var(--medium);
            text-transform: uppercase;
            text-align: center;
        }
    }

    .license-plate-button {
        border: none;
        margin-top: 5%;
        min-width: 50%;

        .license-plate-btn {
            display: flex;
            flex-direction: column;
            align-items: start;
            padding: 0.5em 1em 0.1em 1em;
        }

        .img-btn-validate {
            width: 3em;
        }

        .img-btn-home {
            width: 3em;
        }

        .text-btn {
            font-family: var(--main-font);
            text-transform: uppercase;
            font-size: 1.4em;
            text-align: right;
        }
    }

    .license-plate-free {
        display: grid;
        grid-template-columns: 70% 30%;
        gap: 1em;
        padding: 0 4em;
        align-items: center;

        .license-plate-time-free {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: left;
            padding: 0.5em 2em;

            .time-free-title {
                text-transform: uppercase;
                font-family: var(--main-font);
                font-size: 1.2em;
                text-align: left;
            }

            .time-free-panel {
                display: flex;
                flex-direction: row;
                justify-content: start;

                .time-exit-img {
                    margin: auto 1em auto 0;
                    height: 2.2em;
                    width: 2.2em;
                }

                .time-free-text {
                    font-family: var(--bold);
                    font-size: 1em;
                    padding: 0.8em;
                }
            }
        }
    }

    .license-plate-error {
        display: grid;
        grid-template-columns: 70% 30%;
        gap: 1em;
        padding: 0 4em;
        align-items: center;

        .license-plate-error-panel {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding: 1em 2em;

            .error-img-panel {
                .error-img {
                    margin-right: 1em;
                    height: 1.4em;
                    width: 1.4em;
                }
            }

            .error-panel {
                vertical-align: top;
                height: 100%;

                .error-title {
                    font-family: var(--semiBold);
                    font-size: 1.2em;
                }

                .error-text {
                    font-family: var(--main-font);
                    font-size: 0.9em;
                }
            }
        }
    }

    /* END LICENSE PLATE AND TICKET (FROM QR) VIEW */

    /* PAYMENT VIEW */

    .payment {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin: 0 1em 0.4em 1em;

        .payment-panel {
            font-family: var(--bold);
            display: grid;
            grid-template-columns: 50% 3px 50%;
            align-items: center;
            width: 75%;
            text-align: left;
            font-size: 0.8em;
            margin: 0 2em;
            padding: 0 1em;

            .line {
                height: 70%;
            }

            .payment-data-panel {
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 0.2em;

                .payment-info-title {
                    display: flex;
                    flex-direction: row;
                    font-size: 1.1em;
                }

                .payment-info-label {
                    text-transform: uppercase;
                }

                .payment-amount-panel {
                    display: flex;
                    flex-direction: column;

                    .payment-amount {
                        font-size: 1.3em;
                        text-align: center;
                    }
                }

                .duration-panel {
                    display: flex;
                    flex-direction: column;

                    .duration {
                        text-align: center;
                        font-size: 1.2em;
                    }
                }

                .payment-img {
                    height: 1.5em;
                    width: 1.5em;
                    margin-right: 15px;
                    margin-bottom: 15px;
                }
            }
        }

        .payment-btn-container {
            width: 50%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .payment-btn {
                width: 70%;
                display: flex;
                flex-direction: column;
                justify-items: start;
                border: none;
                padding: 0.8em;
                margin-right: 0.4em;

                .img-btn-pay {
                    width: 3em;
                    margin-bottom: 0.5em;
                }

                .img-btn-cancel {
                    width: 3em;
                    margin-bottom: 0.8em;
                }

                .text-btn {
                    font-family: var(--main-font);
                    text-transform: uppercase;
                    font-size: 1.4em;
                }
            }
        }
    }

    /* END PAYMENT VIEW */

    /* PAYMENT DONE VIEW */

    .payment-done {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 0.6em;

        .payment-done-panel {
            display: flex;
            flex-direction: row;
            width: 90%;
            height: 90px;
            font-family: var(--main-font);
            font-size: 0.9em;
            line-height: 1.4em;
            align-items: center;
            padding: 1em;

            .payment-done-img {
                margin-right: 1em;
                height: 1.8em;
                width: 1.8em;
            }
        }

        .payment-done-btn-container {
            width: 85%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-left: 1em;

            .payment-btn {
                width: 45%;
                height: 90px;
                display: flex;
                flex-direction: column;
                justify-items: start;
                border: none;
                padding: 0.4em 0.6em;

                .img-btn-pay {
                    width: 3em;
                    margin-bottom: 0.2em;
                }

                .img-btn-home {
                    width: 3em;
                    margin-bottom: 0.1em;
                }

                .text-btn {
                    font-family: var(--main-font);
                    text-transform: uppercase;
                    font-size: 1.4em;
                }
            }
        }

        .payment-done-error-panel {
            font-size: 0.9em;

            .semibold {
                font-family: var(--semiBold);
            }
        }

        .payment-done-error-btn-container {
            width: 50%;
            justify-content: center;

            .payment-btn {
                width: 100%;
            }
        }
    }

    /* END PAYMENT DONE VIEW */

    /* PAYMENT ERROR VIEW */

    .payment-error {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 0.6em;

        .payment-error-panel {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            width: 90%;
            height: 90px;
            padding: 1em;
            font-family: var(--main-font);
            font-size: 1em;
            line-height: 1.4em;

            .payment-error-img {
                margin-right: 1em;
                height: 1.8em;
                width: 1.8em;
            }
        }

        .payment-error-error-panel {
            height: 130px;
        }

        .payment-error-btn-container {
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            .payment-btn {
                background-color: var(--primary-color);
                width: 100%;
                height: 90px;
                display: flex;
                flex-direction: column;
                justify-items: start;
                border: none;
                padding: 0.8em;
                margin: 0 0.5em;

                .img-btn-pay {
                    width: 3em;
                }

                .img-btn-home {
                    width: 2.5em;
                }

                .text-btn {
                    font-family: var(--main-font);
                    text-transform: uppercase;
                    font-size: 1.4em;
                    width: 100%;
                    text-align: start;
                }
            }
        }

        .payment-error-error-btn-container {
            justify-content: center;
        }
    }

    /* END PAYMENT ERROR VIEW */

    /* THANKS VIEW */

    .thanks {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2em;

        .thanks-title {
            font-family: var(--title);
            font-size: 3em;
            line-height: 1em;
            text-align: center;
            margin-bottom: 0.4em;
        }

        .arrows {
            display: none;
        }

        .logo {
            width: 40%;
        }

        .mobility-solutions {
            display: none;
        }
    }

    /* END THANKS VIEW */


    /* LEGAL INFORMATION */

    .legal-data {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow-y: auto;

        .section-list {
            position: sticky;
            top: 0;
            background: var(--panel-color);
            z-index: 100;
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            padding: 15px;
        }

        .section-list a {
            cursor: pointer;
            font-weight: 500;
            text-decoration: none;
            border-bottom: 2px solid transparent;
            padding: 4px 8px;
            transition: all 0.2s;
        }

        .section-content {
            padding: 20px;
        }
    }

    /* END LEGAL INFORMATION */
}