@import url("https://fonts.googleapis.com/css2?family=Arsenal&display=swap");

body {
    font-family: "Arsenal", sans-serif;
    font-weight: 300;
    margin: 0 auto;
    -webkit-text-size-adjust: 100%;
}

:root {
    --content-width: min(334px, 90vw);
    --main-max-height: 94px;
    --main-font: Regular 14px/21px Arsenal;
    --main-gradient-background: linear-gradient(90deg, #7a8ce5 0%, #49aadb 100%);
    --main-gradient-button: linear-gradient(90deg, #001dac 0%, #0153b5 48%, #0075af 100%);
    --main-gradient-font-color: #ffffff;
    --main-padding: 26px 20px;
    --main-radius: 17px;
    --main-light-gray: #000000b3;
    --main-blue: #519bf4;
    --main-blue-test: #49aadb;
    --main-blue-test-transparent: rgba(73, 170, 219, 0.2);
    --main-black: #000000;
    --main-link: #0084c7;
    --main-alert: #d12c68;
    --prep-step1: #7a8ce5;
    --prep-step1-opacity: rgba(122, 140, 229, 0.3);
    --prep-step2: #519bf4;
    --prep-step2-opacity: rgba(81, 154, 244, 0.3);
    --prep-step3: #49aadb;
    --prep-step3-opacity: rgba(73, 170, 219, 0.3);
}

a {
    color: var(--main-link);
}

button {
    border-radius: 12px;
    background: var(--main-gradient-button);
    border: none;
    color: var(--main-gradient-font-color);
    width: min(240px, 70vw);
    height: 54px;
    text-align: center;
    letter-spacing: 0.95px;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
}

.content-button {
    color: var(--main-light-gray);
    font-size: 10px;
    letter-spacing: 0.51px;
}

.container {
    min-height: 100vh;
    justify-items: center;
    display: grid;
    padding: 0 5vw;
    padding-bottom: env(safe-area-inset-bottom);
    grid-template-areas:
        "header"
        "content-syndrome"
        "icon-container"
        "content-syndrome-more"
        "cart-icon-content"
        "button-examine"
        "content-button"
        "cart-content";
}

.grid-content {
    width: var(--content-width);
}

.header {
    background: var(--main-gradient-background);
    color: var(--main-gradient-font-color);
    font-size: 16px;
    grid-area: header;
    text-align: left;
    max-height: 120px;
    justify-content: center;
    display: flex;
    width: 100vw;
    margin-left: -5vw;
    padding-top: env(safe-area-inset-top);
}

.content-syndrome {
    grid-area: content-syndrome;
    text-align: left;
    padding: 30px 0 14px 0;
    width: var(--content-width);
}

.icon-container {
    grid-area: icon-container;
    display: flex;
    width: var(--content-width);
    justify-content: space-between;
    gap: 8px;
}

.content-syndrome-more {
    grid-area: content-syndrome-more;
    display: flex;
    width: var(--content-width);
    font-size: 14px;
    padding: 30px 0 0 0;
}

.cart-icon-content {
    padding: 30px 0 35px 0;
    grid-area: cart-icon-content;
    text-align: left;
    width: var(--content-width);
    font-size: 14px;
}

.button-examine {
    grid-area: button-examine;
}

.content-button {
    padding: 15px 0 30px 0;
    grid-area: content-button;
    text-align: center;
}

.cart-icon {
    display: flex;
    background-color: var(--main-blue);
    color: var(--main-gradient-font-color);
    border-radius: var(--main-radius);
    width: clamp(74px, 25vw, 94px);
    height: clamp(74px, 25vw, 94px);
    justify-content: center;
    align-items: flex-end;
    font: Bold 13px/21px Arsenal;
    letter-spacing: 0.65px;
    flex-shrink: 0;
}

.cart-container {
    margin: 0 20px;
    display: flex;
    border-radius: var(--main-radius);
    width: var(--content-width);
    min-height: var(--main-max-height);
}

.cart-desc {
    margin: 16px;
    display: flex;
    text-align: left;
    align-items: center;
}

.cart-container .cart-icon {
    margin: 0;
}

.cart-horizontal {
    margin: 16px 0;
    display: flex;
    justify-content: center;
}

.cart-content {
    grid-area: cart-content;
    text-align: left;
    font-size: 14px;
    padding: 30px 0;
    width: var(--content-width);
}

.numbness {
    background-image: url("../img/symptoms/numbness/numbness.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.lack-of-precision {
    background-image: url("../img/symptoms/lack-of-precision/lack-of-precision.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.weakness {
    background-image: url("../img/symptoms/weakness/weakness.png");
    background-repeat: no-repeat;
    background-size: cover;
}
.numbness-small {
    background-image: url("../img/symptoms/numbness/numbness-small.png");
    background-repeat: no-repeat;
    background-size: 74px 74px;
    background-position: top;
}
.lack-of-precision-small {
    background-image: url("../img/symptoms/lack-of-precision/lack-of-precision-small.png");
    background-repeat: no-repeat;
    background-size: 74px 74px;
    background-position: top;
}
.weakness-small {
    background-image: url("../img/symptoms/weakness/weakness-small.png");
    background-repeat: no-repeat;
    background-size: 74px 74px;
    background-position: top;
}

.cart-icon.numbness { background-color: var(--prep-step1); }
.cart-numbness .cart-container { background-color: var(--prep-step1-opacity); }
.cart-icon.lack-of-precision { background-color: var(--prep-step2); }
.cart-lack-of-precision .cart-container { background-color: var(--prep-step2-opacity); }
.cart-icon.weakness { background-color: var(--prep-step3); }
.cart-weakness .cart-container { background-color: var(--prep-step3-opacity); }

/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 10;
    padding-top: 50px;
    left: 0; top: 0;
    width: 100%; height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: min(354px, 90vw);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.19);
    animation: animatetop 0.4s;
}
@keyframes animatetop {
    from { top: -150px; opacity: 0; }
    to { top: 0; opacity: 1; }
}
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}
.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
}
.modal-header {
    padding: 2px 16px;
    background: var(--main-gradient-background);
    color: white;
    font-size: 16px;
}
.modal-body { padding: 0 16px; }
.modal-footer {
    padding: 2px 16px;
    background: var(--main-gradient-background);
    color: white;
}