/* ------------------------------------------------------------------- */
/* RESETS ------------------------------------------------------------ */
/* ------------------------------------------------------------------- */

html body {

  margin: 0;
  padding: 0;
  font-size: 0;
  margin-top: 0;
}

/* 
    Hiding everything except the form for signups

    This is the smartest way I could come up with considering these 2 constraints:
    1. No changes to the SPA-Codebase (since we might need an update in the future, this way we can hopefully just pull the updates)
    2. Not overriding any display-properties using !important, since this breaks some styles coming from the SPA (and some of our own in case they need change)

    Basically, we're hiding 6 levels of nested elements that do not contain the form
*/
body * {
    
    display: none;
}

/* Restoring display for wanted elements */
body #subscriptionForm,
body #subscriptionForm *,
body #subscriptionProcess:has(.someFormConfirmationClass),
body #subscriptionProcess:has(.someFormConfirmationClass) *,
body *:has(#subscriptionForm, #subscriptionProcess) {

  display: block;
}

body #subscriptionForm a,
body #subscriptionForm * a,
body *:has(#subscriptionForm, #subscriptionProcess) a {

  display: inline;
}


body #subscriptionForm *.row {

    display: flex;
}

/* Reset negative grid margins */
.uk-scope .uk-grid {
  margin: 0 !important;
}

/* Reset widths, margins and paddings */
#eventList,
#kursausschreibung-root {
  margin: 0;
  padding: 0;
  width: 100%;
}

form > .ember-view {display: flex;}
form > * {padding: 0 !important;}

/* ------------------------------------------------------------------- */
/* Form-Styles ------------------------------------------------------- */
/* ------------------------------------------------------------------- */

/* 
    CSS allows native nesting since approx. 2023 
    -> https://caniuse.com/?search=css%20nesting 
*/
.uk-scope {

    /* Hide navbar */
    .uk-navbar {

        display: none !important;
    }

    .uk-form-label {

        display: block;
        margin-bottom: .5rem !important;
    }

    .uk-button {

        text-transform: capitalize;
        padding: 13px 16px;
        line-height: 1;
        border-radius: 8px;
    }

    /* Submit */
    .uk-button-primary {

        background: linear-gradient(211deg, rgb(43, 110, 180) 0%, rgb(12, 75, 140) 91.12%);
        padding-left: 16px !important;
    }

    /* "Zurück" Button (dont need that here) */
    .uk-button-default {

        display: none !important;
    }

    /* Upload Buttons */
    .js-upload .uk-button-default{
        display: inline-block !important;
    }
    
    
    input,
    select,
    textarea {
    
        border: none !important;
        border-bottom: 1px solid black !important;
        border-color: black !important;
        font-size: 1rem !important;
        padding-left: 0 !important;

        /* &:invalid {

            border-color: black !important;
        }

        &:valid {

            border-color: #36BF8B !important;
        } */
    
        &[type="checkbox"] {
    
            border: 1px solid black !important;
        }
    }

    .uk-select{

        background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj48IS0tIUZvbnQgQXdlc29tZSBQcm8gdjcuMC4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlIChDb21tZXJjaWFsIExpY2Vuc2UpIENvcHlyaWdodCAyMDI1IEZvbnRpY29ucywgSW5jLi0tPjxwYXRoIGQ9Ik0zMzEuMyA0NzUuM0MzMjUuMSA0ODEuNSAzMTQuOSA0ODEuNSAzMDguNyA0NzUuM0wxMDAuNyAyNjcuM0M5NC41IDI2MS4xIDk0LjUgMjUwLjkgMTAwLjcgMjQ0LjdDMTA2LjkgMjM4LjUgMTE3LjEgMjM4LjUgMTIzLjMgMjQ0LjdMMzIwIDQ0MS40TDUxNi43IDI0NC43QzUyMi45IDIzOC41IDUzMy4xIDIzOC41IDUzOS4zIDI0NC43QzU0NS41IDI1MC45IDU0NS41IDI2MS4xIDUzOS4zIDI2Ny4zTDMzMS4zIDQ3NS4zeiIvPjwvc3ZnPg==") !important; 
        background-size: 20px;
    }

    /* Hints */
    .uk-text-meta {

        color: rgb(107, 114, 128);
    }

    /* Labels */
    .uk-form-horizontal .uk-form-label {

        float: none;
        width: fit-content;
    }

    /* Input-Label wrapper */
    .uk-form-controls {

        float: none !important;
        margin: 0 !important;
    }

    .uk-display-inline-block {

        /* Termns and Conditions, so far the only one with a link in the label */
        /* Also checkbox fields*/
        &:has(a) {

            display: flex !important;
            flex-direction: row-reverse;
            align-items: end;
            justify-content: flex-end;
            gap: 20px;

            /* Need this to vertically align */
            input {

                margin-bottom: .75rem !important;

            }
        }
        
        &:has(input[type="checkbox"]) {

            display: flex !important;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: flex-end;
            gap: 20px;

            /* Need this to vertically align */
            input {

                margin-bottom: .75rem !important;

            }
        }
        
        &:has(input[type="file"]) {

            display: flex !important;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 20px;

            /* Need this to vertically align */
            input {

                margin-bottom: .75rem !important;

            }
        }
    }
    
    

    hr {

        margin-bottom: 15px !important;
        opacity: 0;
    }

    /* Display confirmation */
    .uk-sticky-placeholder ~ h2 {

        font-size: 2rem !important;
        display: block !important;
    }

    .uk-sticky-placeholder ~ p,
    .uk-sticky-placeholder ~ p br {

        font-size: 1rem !important;
        display: block !important;
    }

    .uk-sticky-placeholder ~ h2:not(:first-of-type),
    .uk-sticky-placeholder ~ h3.uk-h3 {

        display: none !important;
    }

    .uk-sticky-placeholder ~ table.confirmation-table {

        display: none !important;
    }
}


/* Display error messages when they appear */
.uk-sticky-placeholder ~ span.uk-display-block:has(+ span.technical-reason),
.uk-sticky-placeholder ~ span.technical-reason,
.uk-sticky-placeholder ~ span.technical-reason + .uk-margin {

    display: block !important;
    font-size: 1rem;
}

.uk-sticky-placeholder ~ span.technical-reason + .uk-margin a {

    display: inline-block !important; /* or inline, depending on desired layout */
}

/* Override the rule that hides the default button */
.uk-sticky-placeholder ~ span.technical-reason + .uk-margin .uk-button-default {

    display: inline-block !important;
}