@import url('colors.css');

@media screen and (orientation:portrait) {
    body {
        background-image: url(../img/background.jpg);
    }

    .header {
        background-color: var(--primary-color);

          .logo {
            width: 70%;
        }

        .language {

            .language-dropdown {

                .language-list-portrait {
                    background-color: var(--panel-color);

                    a {
                        color: var(--primary-color);
                    }
                }
            }
        }
    }

    .footer {
        background-color: var(--secondary-color);

        .text-footer {
            color: var(--button-color);
        }
    }

    .stay-payment-title {
        color: var(--secondary-color);
    }

    /* LOADER */

    .big-circle-loading {
        border: 8px solid var(--primary-color);
    }

    /* END LOADER */

    /* PAGE NOT FOUND VIEW */

    .page-not-found {

        .page-not-found-info {
            background-color: var(--panel-color);

            .img-container {

                .oops {
                    color: var(--secondary-color);
                }

            }

            .text-container {
                .text {
                    color: var(--secondary-color);
                }
            }
        }
    }

    /* END PAGE NOT FOUND VIEW */

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

    .license-plate {

        .license-plate-text {
            color: var(--secondary-color);
        }

        input {
            color: var(--secondary-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
        }

        input:-webkit-autofill {
            color: var(--text-color);
            -webkit-text-fill-color: var(--secondary-color);
        }
    }

    .license-plate-button {
        background-color: var(--primary-color);

        .license-plate-btn {
            .text-btn {
                color: var(--button-color);
            }
        }
    }

    .license-plate-free {

        .license-plate-time-free {
            color: var(--secondary-color);
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
        }
    }

    .license-plate-error {

        .license-plate-error-panel {
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);

            .error-panel {

                .error-title {
                    color: var(--error-color);
                }

                .error-text {
                    color: var(--secondary-color);
                }
            }
        }
    }

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

    /* PAYMENT VIEW */

    .payment {

        .payment-panel {
            color: var(--secondary-color);
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);

            .line {
                border-left: dotted 3px var(--line-color);
            }

            .payment-data-panel {

                .payment-info-label {
                    color: var(--primary-color);
                }

                .payment-amount-panel {

                    .payment-amount {
                        color: var(--primary-color);
                    }
                }
            }
        }

        .payment-btn-container {

            .payment-btn {
                background-color: var(--primary-color);

                .text-btn {
                    color: var(--button-color);
                }
            }

            .payment-btn-cancel {
                background-color: var(--secondary-color);
            }
        }
    }

    /* END PAYMENT VIEW */

    /* PAYMENT DONE VIEW */

    .payment-done {

        .payment-done-panel {
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
            color: var(--secondary-color);
        }

        .payment-done-btn-container {

            .payment-btn {
                background-color: var(--primary-color);

                .text-btn {
                    color: var(--button-color);
                }
            }

            .payment-btn-home {
                background-color: var(--secondary-color);
            }
        }
    }

    /* END PAYMENT DONE VIEW */

    /* PAYMENT ERROR VIEW */

    .payment-error {

        .payment-error-panel {
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
            color: var(--secondary-color);
        }

        .payment-error-btn-container {

            .payment-btn {
                background-color: var(--primary-color);

                .text-btn {
                    color: var(--button-color);
                }
            }

            .payment-btn-home {
                background-color: var(--secondary-color);
            }
        }
    }

    /* END PAYMENT ERROR VIEW */

    /* THANKS VIEW */

    .thanks {

        .thanks-title {
            color: var(--secondary-color);
        }
    }

    /* END THANKS VIEW */
}

@media screen and (orientation:landscape) {
    body {
        background-image: url(../img/background.jpg);
    }

    .header {
        background-color: var(--primary-color);

        .language {
            .language-dropdown {
                .language-list-landscape {
                    background-color: var(--panel-color);
                    color: var(--primary-color);

                    a {
                        border-left: 2px solid var(--secondary-color);
                    }
                }
            }
        }
    }

    .footer {
        background-color: var(--secondary-color);

        .text-footer {
            color: var(--button-color);
        }
    }

    .stay-payment-title {
        color: var(--secondary-color);
    }

    /* LOADER */

    .big-circle-loading {
        border: 8px solid var(--primary-color);
    }

    /* END LOADER */

    /* PAGE NOT FOUND VIEW */

    .page-not-found {
        .page-not-found-info {
            background-color: var(--panel-color);

            .img-container {

                .oops {
                    color: var(--secondary-color);
                }
            }

            .text-container {
                .text {
                    color: var(--secondary-color);
                }
            }
        }
    }

    /* END PAGE NOT FOUND VIEW */

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

    .license-plate {

        .license-plate-text {
            color: var(--secondary-color);
        }

        input {
            color: var(--secondary-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
        }

        input:-webkit-autofill {
            color: var(--text-color);
            -webkit-text-fill-color: var(--secondary-color);
        }
    }

    .license-plate-button {
        background-color: var(--primary-color);

        .license-plate-btn {
            .text-btn {
                color: var(--button-color);
            }
        }
    }

    .license-plate-free {
        .license-plate-time-free {
            color: var(--secondary-color);
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
        }
    }

    .license-plate-error {
        .license-plate-error-panel {
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);

            .error-panel {
                .error-title {
                    color: var(--error-color);
                }

                .error-text {
                    color: var(--secondary-color);
                }
            }
        }
    }

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

    /* PAYMENT VIEW */

    .payment {
        .payment-panel {
            color: var(--secondary-color);
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);

            .line {
                border-left: dotted 3px var(--line-color);
            }

            .payment-data-panel {

                .payment-info-label {
                    color: var(--primary-color);
                }

                .payment-amount-panel {
                    .payment-amount {
                        color: var(--primary-color);
                    }
                }
            }
        }

        .payment-btn-container {
            .payment-btn {
                background-color: var(--primary-color);

                .text-btn {
                    color: var(--button-color);
                }
            }

            .payment-btn-cancel {
                background-color: var(--secondary-color);
            }
        }
    }

    /* END PAYMENT VIEW */

    /* PAYMENT DONE VIEW */

    .payment-done {
        .payment-done-panel {
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
            color: var(--secondary-color);
        }

        .payment-done-btn-container {
            .payment-btn {
                background-color: var(--primary-color);

                .text-btn {
                    color: var(--button-color);
                }
            }

            .payment-btn-home {
                background-color: var(--secondary-color);
            }
        }
    }

    /* 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 {
            background-color: var(--panel-color);
            box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.5);
            color: var(--secondary-color);
        }

        .payment-error-btn-container {
            .payment-btn {
                background-color: var(--primary-color);

                .text-btn {
                    color: var(--button-color);
                }
            }

            .payment-btn-home {
                background-color: var(--secondary-color);
            }
        }
    }

    /* END PAYMENT ERROR VIEW */

    /* THANKS VIEW */

    .thanks {
        .thanks-title {
            color: var(--secondary-color);
        }
    }

    /* END THANKS VIEW */
}