@import 'typography.css';
@import 'menu.css';
@import 'colors-vars.css';
@import 'hero.css';
@import 'payments.css';
@import 'footer.css';

body {
    overflow-x: hidden;
    font-family: "Manrope", sans-serif;
    font-size: var(--fs-size-1);
    background: var(--white-1);

    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-block: 1em;
        text-wrap: balance;
        font-weight: 400;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Inter', sans-serif !important;
        font-weight: 400;
    }

    h1 {
        font-size: var(--fs-size-4);
    }

    .h1 {
        font-size: var(--fs-size-4);
        margin-block: 1em;
    }

    h2 {
        font-size: var(--fs-size-3);
    }

    .h2 {
        font-size: var(--fs-size-3);
        margin-block: 1em;
    }

    h3 {
        font-size: var(--fs-size-2);

    }

    .h3 {
        font-size: var(--fs-size-2);
        margin-block: 1em;
    }

    h4 {
        font-size: var(--fs-size-1);
    }

    .h4 {
        font-size: var(--fs-size-1);
        margin-block: 1em;
    }

    h5 {
        font-size: var(--fs-size-1);
    }


    .fs-0 {
        font-size: var(--fs-size-0) !important
    }

    .fs-1 {
        font-size: var(--fs-size-1) !important
    }

    .fs-2 {
        font-size: var(--fs-size-2) !important
    }

    .fs-3 {
        font-size: var(--fs-size-3) !important
    }

    .fs-4 {
        font-size: var(--fs-size-4) !important
    }

    .fs-5 {
        font-size: var(--fs-size-5) !important
    }

    .fs-6 {
        font-size: var(--fs-size-6) !important
    }
}
.no-case {
    text-transform:none !important;
}
ol, ul {
    padding-left: 23px;
    li {
        margin-bottom:5px;
    }
}

h1, h2, h3, h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.btn.btn-primary {
    background-color: #ff3600;
    color: #fff;
    padding: 0 30px;
    border: 2px solid transparent;
    background-image: linear-gradient(51deg, #fe3966 50%, #ff4538 70%, #ff8a42 100%);
    box-shadow: -5px -5px 15px rgba(255, 255, 255, .9), 5px 5px 15px rgba(163, 39, 0, .3);
    background-origin: border-box;
    background-size: 200%;
    background-position-x: 100%;
    transition: .2s ease-in-out;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow;
    height: 50px;
    border-radius: 100vh;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap:10px;

    &:hover, &:active, &:focus {
        background-color: #ff3600;
        color: #fff;
        border: 2px solid transparent;
        background-image: linear-gradient(51deg, #fe3966 50%, #ff4538 70%, #ff8a42 100%);
        box-shadow: -2px -2px 5px rgba(255, 255, 255, .9), 2px 2px 5px rgba(163, 39, 0, .7);
        background-position-x: 0;
    }

    &.btn-large {
        font-size: var(--fs-size-2);
    }
}
.btn.btn-danger {
    background-color:var(--blue-2);
    color: #fff;
    padding: 0 30px;
    border: 2px solid transparent;

    box-shadow: -5px -5px 15px rgba(255, 255, 255, .9), 5px 5px 15px rgba(163, 39, 0, .3);
    background-origin: border-box;
    background-size: 200%;
    background-position-x: 100%;
    transition: .2s ease-in-out;
    transition-property: color, background-color, background-position, background-size, border-color, box-shadow;
    height: 50px;
    border-radius: 100vh;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    gap:10px;

    &:hover, &:active, &:focus {
        background-color: #ff3600;
        color: #fff;
        border: 2px solid transparent;
        background-image: linear-gradient(51deg, #fe3966 50%, #ff4538 70%, #ff8a42 100%);
        box-shadow: -2px -2px 5px rgba(255, 255, 255, .9), 2px 2px 5px rgba(163, 39, 0, .7);
        background-position-x: 0;
    }
}

.centered {
    margin-inline: auto;
}

.footer {
    background: var(--white-1);
    color: var(--text-1);
    font-size: var(--fs-size-0);

    .mod-copyright {
        a {
            font-family: 'Manrope', sans-serif;
            font-weight: 400;
            text-transform: lowercase;
            color: var(--text-1);
            position: relative;
            transition: all .2s ease-in-out;

            &::after {
                position: absolute;
                border: solid 1px var(--red-1);
                opacity: 0;
                inset: 0 -3px 0 -3px;
                transition: all .2s ease-in-out;
            }

            &:hover {
                color: var(--red-1);

                &::after {
                    position: absolute;
                    border: solid 1px var(--red-1);
                    opacity: 1;
                    content: '';
                }
            }
        }
    }


}

.no-content {
    .container-component {
        display: none;
    }
}

.balanced {
    text-wrap: balance;
}

.pretty {
    text-wrap: pretty;
}

.checked {
    ul li {
        list-style-image: url('/images/elements/check.svg');
        margin-bottom: 10px;
    }
}

.homepage {
    .container-top-b {
        .moduletable {
            h3 {
                position: relative;
                padding-left: 30px;

                &::before {
                    content: '';
                    position: absolute;
                    left: 0px;
                    width: 20px;
                    height: 20px;

                }

                &.trophy-icon {
                    &::before {
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M2.5.5A.5.5 0 0 1 3 0h10a.5.5 0 0 1 .5.5q0 .807-.034 1.536a3 3 0 1 1-1.133 5.89c-.79 1.865-1.878 2.777-2.833 3.011v2.173l1.425.356c.194.048.377.135.537.255L13.3 15.1a.5.5 0 0 1-.3.9H3a.5.5 0 0 1-.3-.9l1.838-1.379c.16-.12.343-.207.537-.255L6.5 13.11v-2.173c-.955-.234-2.043-1.146-2.833-3.012a3 3 0 1 1-1.132-5.89A33 33 0 0 1 2.5.5m.099 2.54a2 2 0 0 0 .72 3.935c-.333-1.05-.588-2.346-.72-3.935m10.083 3.935a2 2 0 0 0 .72-3.935c-.133 1.59-.388 2.885-.72 3.935M3.504 1q.01.775.056 1.469c.13 2.028.457 3.546.87 4.667C5.294 9.48 6.484 10 7 10a.5.5 0 0 1 .5.5v2.61a1 1 0 0 1-.757.97l-1.426.356a.5.5 0 0 0-.179.085L4.5 15h7l-.638-.479a.5.5 0 0 0-.18-.085l-1.425-.356a1 1 0 0 1-.757-.97V10.5A.5.5 0 0 1 9 10c.516 0 1.706-.52 2.57-2.864c.413-1.12.74-2.64.87-4.667q.045-.694.056-1.469z'/%3E%3C/svg%3E");
                    }
                }

                &.key-icon {
                    &::before {
                        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23000'%3E%3Cpath d='M0 8a4 4 0 0 1 7.465-2H14a.5.5 0 0 1 .354.146l1.5 1.5a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0L13 9.207l-.646.647a.5.5 0 0 1-.708 0L11 9.207l-.646.647a.5.5 0 0 1-.708 0L9 9.207l-.646.647A.5.5 0 0 1 8 10h-.535A4 4 0 0 1 0 8m4-3a3 3 0 1 0 2.712 4.285A.5.5 0 0 1 7.163 9h.63l.853-.854a.5.5 0 0 1 .708 0l.646.647l.646-.647a.5.5 0 0 1 .708 0l.646.647l.646-.647a.5.5 0 0 1 .708 0l.646.647l.793-.793l-1-1h-6.63a.5.5 0 0 1-.451-.285A3 3 0 0 0 4 5'/%3E%3Cpath d='M4 8a1 1 0 1 1-2 0a1 1 0 0 1 2 0'/%3E%3C/g%3E%3C/svg%3E");
                        transform: rotate(-45deg);
                        width: 24px;
                        height: 24px;
                        margin-top: 2.5px;
                    }
                }
            }
        }

    }
}
.mod-imagegallery .image-item {
    & .image-caption {
        .caption-title, .caption-text {
            color: var(--caption-color);
            font-size: var(--fs-size-1);
        }
    }
}
.mod-imagegallery .image-item {
    & a {
        .expand-image {
            position: absolute;
            z-index: 5;
            top: 20px;
            left: 20px;
            /* inset: calc(50% - 20px); */
        }
    }
}
.margin-0 {
    margin: 0;
}

.grid-child {
    padding-block: 3rem;
}

.grid-child:has(.moduletable.full-width) {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100vw;
    width: 100vw;
    padding-inline: 3rem;

    .moduletable {
        max-width: 1800px;
        margin-inline: auto;
    }
}

.grid-child:has(.moduletable.blue-bg) {
    background: var(--blue-2);
    color: var(--white-1);

    table {
        tr {
            td:first-child {
                padding-left: 0;
            }

            td:last-child {
                padding-right: 0;
            }
        }

        thead {
            tr {
                th:first-child {
                    padding-left: 0;
                }

                th:last-child {
                    padding-right: 0;
                }

            }
        }

    }

    thead {
        th {
            color: var(--white-1);
        }

        border-bottom: 1px solid var(--white-1-rgba);
    }
}

.grid-child:has(.padding-top-0) {
    padding-top: 0;
}

.site-grid {
    max-width: 1600px;
    margin-inline: auto;
    width: 100%;
}
.grid-child.container-messages {
    grid-area: mess;
}
.container-top-c {
    grid-area: top-c;

    .moduletable {
        width: 100%;
    }
}

.container-top-d {
    grid-area: top-d;

    .moduletable {
        width: 100%;
    }
}

.container-top-e {
    grid-area: top-e;

    .moduletable {
        width: 100%;
    }
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0 0;

    thead {
        border-bottom: 1px solid var(--text-1);
    }

    .btn.btn-primary {
        box-shadow: -5px -5px 15px rgba(0, 0, 0, .9), 5px 5px 15px rgba(0, 0, 0, .3);
        margin-top: 2.5rem;
        &:hover {
            box-shadow: -5px -5px 15px rgba(0, 0, 0, .9), 5px 5px 15px rgba(0, 0, 0, .8);
        }
    }
}

.no-border {
    border: none !important;
}

.comparison-table th {

    color: var(--text-1);
    padding: 1rem;
    text-align: left;
}

.comparison-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--white-1-rgba);
}

.featuregrid {
    --icon-space: 135px;
    display: grid;
    grid-template-columns: var(--icon-space) 1fr;
    gap: 50px;
    align-items: center;

    .featureicon {
        width: var(--icon-space);
        height: var(--icon-space);


        svg {
            width: var(--icon-space);
            height: var(--icon-space);

            path:first-child {
                animation: smokey 3s linear infinite;
            }
        }
    }

    .featuretext {
        max-width: 60ch;

        h3 {
            margin-top: 0;
        }

        p {
            margin-bottom: 0;
        }
    }
}
body.view-profile {
#member-profile {
    fieldset:nth-child(2) {
        display: none;
    }
}
    .com-users-profile__edit-submit {
        .controls {
            display:flex;
            gap:1rem;
            align-items: center;
        }
    }
}
@keyframes smokey {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(0.75px);
    }
    100% {
        transform: translateY(0px);
    }
}

#moneybuddy {
    .paypal-product-info {
        max-width: 750px;
    }

    @media (width >= 576px) {
        .modal-dialog {
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
    }
}

.modal.fade.show {
    .modal-header {
        padding: 0 15px;
        height: 50px;
        border-bottom:none;
    }
    .modals-box {
        height: auto !important;
        width: 100% !important;
    }
}
#login-modal {
.mod-login__options {
    a {
        text-decoration:none;
        font-size:var(--fs-size-0);
    }
}
    .plg_system_webauthn_login_button {
        display:none;
    }
}

.back-to-top-link {
    inset-inline-end: 1rem;
    z-index: 10000;
    color: var(--white-1);
    pointer-events: all;
    background-color: var(--blue-2);
    border: none;
    opacity: 0;
    border-radius: 100vh;
    display:flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    width:48px;
    height:48px;
    transition: opacity .2s ease-in;
    position: fixed;
    bottom: 1rem;
    text-decoration: none;
    &:hover,&:active, &:focus {
        backround-color: var(--blue-3);
    }
    svg {
        margin-top:-6px;
    }
}
.back-to-top-link:hover, .back-to-top-link:focus {

    background-color: rgba(8,8,33,0.8);
    border-color: var(--white, #fff);
    border:none;
}
body.view-contact {
    .page-header, h2 {
        display:none;
    }
    main {
        display:flex;
        gap: 2rem;
        .com-contact__miscinfo, .com-contact {
            width:calc(50% - 1rem);
        }
    }
    @media screen and ( width < 900px ) {
        main {
           display:unset;
            .com-contact__miscinfo, .com-contact {
                width:unset;
            }
        }
    }
}

#contact-form {
    max-width:620px;

    .control-group {
       margin-top: 0rem;
    }
    .control-group.field-spacer {
        visibility: hidden;
        height:0;
        width:0;
    }
    .m-0 {
        .control-group:nth-child(2) {
            width:calc(50% - 1rem);
            display: inline-block;
            float: left;
            margin-right: 2rem;
        }
        .control-group:nth-child(3) {
            width:calc(50% - 1rem);
            display: inline-block;
        }
    }
    @media screen and ( width < 500px ) {
        .m-0 {
            .control-group:nth-child(2) {
                width:unset;
                display: inline-block;
                float: none;
                margin-right:0;
            }
            .control-group:nth-child(3) {
                width:unset;
                display: inline-block;
                float: none;
                margin-right:0;
            }
            input {

            }
        }
    }
}
.form-control {
    width: 100%;
    color: var(--body-color);
    appearance: none;
    background-color: var(--body-bg);
    border: var(--border-width) solid rgba(8,8,33,0.2);
    border-radius: var(--border-radius);
    background-clip: padding-box;
    padding: .6rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    display: block;
}
@media screen and ( width >= 1090px ) {
    .visible-phone {
        display:none;
    }
}
@media screen and ( width < 1090px ) {
    .hidden-phone {
        display:none !important;
    }
}
@media screen and ( width < 481px ) {
  .grid-child.container-nav {
      & > div {
          width:100%;
      }
      .container-search {
          justify-content: center;
      }
      .logoBox {
          text-align:center;
      }
  }
}
@media screen and ( width < 400px ) {
    body .grid-child.container-top-e {
        .mod-imagegallery.image-grid.image-grid {
            grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
        }
    }

}
@supports (display:grid) {
    .site-grid {
        grid-gap: 0 1em;
        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 19.875rem)) [main-end] minmax(0, 1fr) [full-end];
        grid-template-areas:
        ".banner banner banner banner."
        ".mess mess mess mess."
        ".top-a top-a top-a top-a."
        ".top-b top-b top-b top-b."
        ".top-c top-c top-c top-c."
        ".top-d top-d top-d top-d."
        ".top-e top-e top-e top-e."
        ".comp comp comp comp."
        ".side-r side-r side-r side-r."
        ".side-l side-l side-l side-l."
        ".bot-a bot-a bot-a bot-a."
        ".bot-b bot-b bot-b bot-b.";
        display: grid;
    }
}

@supports (display:grid) {
    @media (width >= 992px) {
        .site-grid {
            grid-template-areas:
        ".banner banner banner banner."
        ".mess mess mess mess."
        ".top-a top-a top-a top-a."
        ".top-b top-b top-b top-b."
        ".top-c top-c top-c top-c."
        ".top-d top-d top-d top-d."
        ".top-e top-e top-e top-e."
        ".side-l comp comp side-r."
        ".bot-a bot-a bot-a bot-a."
        ".bot-b bot-b bot-b bot-b.";
        }
    }
}

@media screen and ( width < 980px ) {
    /*.grid-child {
        padding-top: 0rem;
    }
    .grid-child.container-top-a {
        padding-top:3rem;
    }*/
}

@media screen and ( width < 501px ) {
    .featuregrid {
        --icon-space: 135px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
        align-items: center;

        .featureicon {
            width: var(--icon-space);
            height: var(--icon-space);
            margin-inline: auto;
        }
    }
}