/*
* ----------------------------------------------
* Registration styles
* Depends on: reset.css type.css and form.css
* ----------------------------------------------
* 01 - Globals
* 02 - Layout
* 03 - Form
* ----------------------------------------------
*/

/*
* ----------------------------------------------
* 01 - Globals
* ----------------------------------------------
*/
:root {
    --primary-color: hsl(18, 89%, 62%);
    --text-color: hsl(200, 2%, 26%);
    --accent-color: hsl(12, 73%, 64%);
    --accent-dark-color: hsl(150, 2%, 22%);
    --accent-light-color: hsl(45, 17%, 95%);
    --layout-width: 43.75rem;
    --swiper-theme-color: hsl(0, 0%, 100%);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/*
* ----------------------------------------------
* 02 - Layout
* ----------------------------------------------
*/
.section {
    width: auto;
    padding: 0 1rem;
}

.section__center {
    width: 100%;
    max-width: var(--layout-width);
    margin: 0 auto;
    padding: 0 1rem;
}


/*
* ----------------------------------------------
* 03 - Elements
* ----------------------------------------------
*/
.button,
input.button {
    display: inline-block;
    padding: 1.5rem 2rem;
    background-color: #ffffff;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 1.4rem;
    color: var(--primary-color);
    border-radius: 0.5rem;
    filter: drop-shadow(2px 2px 4px var(--accent-dark-color));
    appearance: none;
}

.button__highlight,
input.button__highlight {
    background-color: var(--primary-color);
    color: #ffffff;
    filter: drop-shadow(4px 4px 4px var(--accent-dark-color));
}


/*
* ----------------------------------------------
* 03 - background logo
* ----------------------------------------------
*/
.bglogo {
    height: 150vh;
    position: absolute;
    right: -5%;
    top: -20%;
    z-index: -1;
    transform: rotate(10deg);
}

/*
* ----------------------------------------------
* 03 - Form
* ----------------------------------------------
*/
.form {
    margin: 4rem 0;
}

.form h1 {
    margin-bottom: 2rem;
}

.form__checks {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.form__check {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1rem;
    border-radius: 0.5rem;
    background-color: #fff;
    --accent-dark-color: hsl(150, 2%, 50%);
    filter: drop-shadow(2px 2px 4px var(--accent-dark-color));
}
.form__check-input {
    position: relative;
}
.form__check-input input[type='radio'] {
    width: 1.6rem;
    height: 1.6rem;
    border: solid 1px var(--accent-color);
    border-radius: 0.3rem;
    appearance: none;
    -webkit-appearance: none;
}
.form__check-input svg {
    display: none;
    width: 2rem;
    height: 2rem;
    position: absolute;
    left: 0.1rem;
    top: -0.4rem;
}
.form__check-input input[type='radio']:checked ~ svg {
    display: block;
}
.form__check-input svg path {
    fill: var(--accent-color);
}

.form input[type="button"] {
    margin-top: 1rem;
}


@media screen and ( max-width: 1024px ) {
}

@media screen and ( max-width: 810px ) {

}

@media screen and ( max-width: 568px ) {
    .form__checks {
        display: block;
    }
}

/*
* ----------------------------------------------
* 12 - Footer
* ----------------------------------------------
*/
.cart {
    margin: 4rem auto;
}

.cart__table {
    width: 100%;
}
.cart__table th {
    padding: 0.5rem;
    border-bottom: solid 1px silver;
    text-align: left;

}
.cart__table th span {
    font-weight: bold;
}
.cart__table th:nth-of-type(2) {
    text-align: right;
    width: 30%;
}
.cart__table td {
    padding: 0.5rem;
}
.cart__table .cartline td {
    border-bottom: solid 1px silver;
}

.cart__table .totalline td:nth-of-type(2) {
    border-bottom: solid 1px silver;
}

.cart__table tr td:nth-of-type(2) {
    text-align: right;
}


/*
* ----------------------------------------------
* 12 - Footer
* ----------------------------------------------
*/
footer {
    --text-color: #ffffff;
    background-color: var(--accent-dark-color);
}

.footer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: 1000px;
}

.footer > div {
    padding: 2rem 0;
}

.footer > div a {
    text-decoration: none;
}

.footer svg {
    height: 100px;
}

.footer__socials svg {
    display: inline-block;
    margin: 0 0.5rem 0 0;
    height: 25px;
}

@media screen and ( max-width: 1024px ) {
}

@media screen and ( max-width: 810px ) {
}

@media screen and ( max-width: 568px ) {
    .footer {
        grid-template-columns: 1fr;
        gap: 0rem;
        padding: 2rem 0;
    }

    .footer > div {
        padding: 1rem 0;
        text-align: center;
    }
}