:root {
    --bg-behind-notch: var(--color-text-primary);
    --bg-footer: var(--color-text-primary);
    --footer-padding-top: var(--section-padding-y);
    --footer-padding-bottom: var(--spacing-gap-small);
    --footer-padding-horizontal: var(--spacing-wrapper);

    --link-static-color: var(--color-sand);
    --link-hover-color: var(--color-orange);

    --help-link-static-color: var(--color-dark-sand);
    --help-link-hover-color: var(--color-orange);

    --address-color: var(--color-sand);
    --contact-link-color: var(--color-sand);
    --circle-hover-icon: url('../../../images/circle-orange.svg');
    --circle-icon: url('../../../images/circle.svg');
    --footer-grid-gap: var(--spacing-gap-large);
}


/* FOOTER SECTION */

footer {
    container-type: inline-size;
    container-name: footer-content;

    & .notch-left, & .notch-right, & .content {
        background: var(--bg-footer);
    }

    & .notch-center svg path {
	    fill: var(--bg-footer);
    }

    & .content {
        overflow-x: hidden;
        padding: var(--footer-padding-top) 0 var(--footer-padding-bottom) 0;
    }

    & .wrapper {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0 var(--footer-grid-gap);
        padding: 0 var(--spacing-wrapper);
    }

    & .flex.row {
        justify-content: space-between;
    }

    @container footer-content (max-width: 1500px) {
        & .wrapper {
            display: grid;
            grid-template-columns: 1fr 5fr;
            grid-template-rows: auto 1fr;
            gap: 50px 60px;
        }
    }

    @container footer-content (max-width: 1024px) {
        & .content { --footer-padding-top: 60px; }

        & .wrapper {
            grid-template-columns: 1fr;
            grid-template-rows: auto 1fr;
        }
    }

    @container footer-content (max-width: 768px) {
        & .content { padding-top: 50px; padding-bottom: 20px; }
    }
}

.logo-background {
    grid-column: 1;
    grid-row: 1 / -1;
    position: relative;
    height: 100%;
    overflow: visible;

    /* Link wraps img — anchor fills cell so absolute img keeps same containing block */
    & > a {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        display: block;
        width: max-content;
        max-width: 100%;
        height: 100%;
    }

    & > a img {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: auto;
    }

    @container footer-content (max-width: 1500px) {
        grid-column: 1;
        grid-row: 1;
        align-items: flex-start;

        & > a {
            position: relative;
            top: auto;
            right: auto;
            bottom: auto;
            width: 100%;
            height: auto;
        }

        & > a img {
            position: static;
            width: 100%;
            height: auto;
        }
    }

    @container footer-content (max-width: 1024px) {
        display: none;
    }
}

.footer-content-wrapper {
    grid-column: 2 / 5;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 100px;

    @container footer-content (max-width: 1500px) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
        display: contents;
    }
}

.footer-logo-wrapper {
    display: flex;
    flex-direction: column;
    gap: 40px;

    @container footer-content (max-width: 1500px) {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    @container footer-content (max-width: 1024px) {
        grid-column: 1;
        grid-row: 2;

        & .flex.row {
            flex-wrap: wrap;
        }
    }

    @container footer-content (max-width: 768px) {
        width: 100%;
        max-width: 100%;

        & .flex.row {
            flex-direction: column;
            gap: var(--spacing-gap-large);
            width: 100%;
        }
    }
}

.footer-logo-link {
    display: block;
    width: 100%;
    line-height: 0;
}

.footer-logo-link .footer-logo,
.footer-logo {
    width: 100%;
    height: auto;
    display: block;
}

.menu-sections {
    & ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;

        & li a {
            color: var(--link-static-color);
            font-size: clamp(28px, 2.4cqi, 46px);
            font-weight: 400;
            line-height: 20px;
            -webkit-font-smoothing: antialiased;
	        -moz-osx-font-smoothing: grayscale;
        }

        @container footer-content (max-width: 1500px) {
            gap: 20px;
        }
    }

    & a[target="_blank"] {
        & svg {
            height: clamp(14px, 1.05cqi, 20px);
            width: auto;

            & path {
                transition: fill 0.2s ease;
            }
        }

        &:hover svg path {
            fill: var(--link-hover-color);
        }
    }

    @container footer-content (max-width: 768px) {
        display: none;
    }
}

.menu-companies {
    position: relative;

    & span {
        font-size: clamp(12px, 0.73cqi, 14px);
        font-weight: 500;
        line-height: clamp(14px, 0.94cqi, 18px); /* 128.571% */
        letter-spacing: clamp(-0.14px, -0.007cqi, 0px);
        text-transform: uppercase;
        opacity: 0.4;
        color: var(--color-dark-sand);
    }

    & > span {
        position: absolute;
        left: 0;
        bottom: 100%;
        padding: clamp(5px, 0.4cqi, 8px) clamp(5px, 0.4cqi, 8px) clamp(5px, 0.4cqi, 8px) 0;
    }

    & ul {
        column-count: 2;
        column-gap: clamp(32px, 4cqi, 56px);

        & li {
            padding: clamp(5px, 0.4cqi, 8px) clamp(5px, 0.4cqi, 8px) clamp(5px, 0.4cqi, 8px) 0;
            break-inside: avoid;

            & a {
                font-size: clamp(20px, 1.25cqi, 24px);
                font-weight: 400;
                line-height: clamp(20px, 1.35cqi, 26px); /* 108.333% */
                letter-spacing: clamp(-0.6px, -0.03cqi, -0.4px);
                color: var(--link-static-color);
                -webkit-font-smoothing: antialiased;
	            -moz-osx-font-smoothing: grayscale;

                &::before {
	                content: '';
	                display: inline-block;
	                vertical-align: text-bottom;
	                width: auto;
	                height: 0;
	                margin-right: 0;
	                aspect-ratio: 1 / 1;
	                background-image: var(--circle-hover-icon);
	                background-size: contain;
	                background-repeat: no-repeat;
	                background-position: center;
	                transition: height 0.15s ease-out, opacity 0.15s ease-out, margin-right 0.15s ease-out;
	                opacity: 0;
	                overflow: hidden;
	                flex-shrink: 0;
                }

                &:hover::before {
	                height: clamp(18px, 1.35cqi, 26px);
	                opacity: 1;
	                margin-right: clamp(5px, 0.6cqi, 8px);
                }

                &::after {
	                content: '';
	                display: inline-block;
	                vertical-align: text-bottom;
	                width: auto;
	                height: clamp(18px, 1.35cqi, 26px);
	                aspect-ratio: 1 / 1;
	                margin-left: clamp(5px, 0.6cqi, 8px);
	                background-image: var(--circle-icon);
	                background-size: contain;
	                background-repeat: no-repeat;
	                background-position: center;
	                transition: height 0.15s ease-out, opacity 0.15s ease-out, margin-left 0.15s ease-out;
	                opacity: 1;
	                overflow: hidden;
	                flex-shrink: 0;
                }

                &:hover::after {
	                height: 0;
	                opacity: 0;
	                margin-left: 0;
                }
            }
        }
    }

    @container footer-content (max-width: 768px) {
        width: 100%;
        max-width: 100%;

        & ul {
            column-gap: 20px;
        }
    }
}

.sml-column {
    width: 18%;
    max-width: 197px;

    @container footer-content (max-width: 1024px) {
        & .menu-social {
            display: none;
        }
    }

    @container footer-content (max-width: 768px) {
        width: 100%;
        max-width: 100%;
    }
}

.menu-countries {
    margin-bottom: clamp(15px, 1.05cqi, 20px);

    & ul li {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: clamp(15px, 1.25cqi, 17px);
        font-weight: 400;
        line-height: clamp(10px, 1.25cqi, 13px);
        letter-spacing: -0.17px;
        color: var(--link-static-color);
        border: 1px solid transparent;
        background-color: transparent;
        opacity: 0.6;
        border-radius: 10px;
        text-align: right;
        padding: 6px clamp(6px, 1.25cqi, 10px);
        margin: 0;
        transition: border 0.2s ease, background-color 0.2s ease, margin 0.2s ease;

        &:not(.active):hover {
            color: var(--link-hover-color);
            opacity: 1;
            cursor: pointer;
        }

        &.active {
            align-self: stretch;
            margin: 10px 0;
            padding-bottom: 10px;
            border: 1px solid rgba(237, 236, 225, 0.10);
            background: rgba(237, 236, 225, 0.05);
            opacity: 1;

            & .clock-wrapper {
                max-height: calc(2.35em + 15px);
                opacity: 1;
            }
        }
    }

    @container footer-content (max-width: 768px) {
        width: 100cqi;
        max-width: 100cqi;
        margin-left: calc(-1 * var(--spacing-wrapper));
        margin-right: calc(-1 * var(--spacing-wrapper));
        margin-bottom: 0;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        & ul {
            flex-direction: row;
            gap: 15px;
            padding: 0 var(--spacing-wrapper);

            & li {
                flex-shrink: 0;
                width: 40cqi;
                height: auto;
                aspect-ratio: 16 / 9;
                margin: 0 !important;
                padding: 6px 10px;
                padding-bottom: 15px;
                padding-right: 15px;
                font-size: 17px;
                line-height: 17px;
                border: 1px solid rgba(237, 236, 225, 0.10);
                background: rgba(237, 236, 225, 0.05);
                opacity: 1;

                & .clock-wrapper {
                    max-height: calc(2.35em + 15px);
                    opacity: 1;
                }

                &.active { padding: 6px 10px; padding-bottom: 15px; padding-right: 15px; }
            }

            &::after {
                content: '\00a0';
                display: block;
                height: 100%;
                width: 1px;
                flex-shrink: 0;
            }
        }
    }
}

.clock-wrapper {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.2s ease, opacity 0.2s ease;
}

.clock {
    width: 2.35em;
    height: 2.35em;
    margin-bottom: 15px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
    position: relative;
    flex-shrink: 0;
    /* Default rotation variables */
    --hour-rotation: 0deg;
    --minute-rotation: 0deg;

    &::before, &::after {
        content: '';
        position: absolute;
        background-color: #c1c1c1;
        left: 50%;
        bottom: 50%;
        transform-origin: bottom center;
        transform: translateX(-50%) rotate(var(--rotation));
    }

    &::before {
        /* Hour hand */
        width: 1.5px;
        height: 28%;
        --rotation: var(--hour-rotation);
    }

    &::after {
        /* Minute hand */
        width: 1px;
        height: 40%;
        --rotation: var(--minute-rotation);
    }
}


.menu-social {
    justify-content: flex-end;
    gap: 12px;

    & a img {
        transition: opacity 0.2s ease;

        &:hover { opacity: 0.6; }
    }
}

.menu-social-mobile {
    display: none;

    @container footer-content (max-width: 1024px) {
        display: flex;
    }
}

.address {
    font-size: clamp(15px, 0.94cqi, 18px);
    font-weight: 400;
    line-height: clamp(15px, 1.05cqi, 20px); /* 111.111% */
    letter-spacing: clamp(-0.18px, -0.009cqi, 0px);
    color: var(--address-color);

    @container footer-content (max-width: 1024px) {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
    }
}

.contact {
    width: 44%;
    justify-content: space-between;
    gap: 2%;

    & .flex-col {
        width: 48%;
    }

    & span {
        font-size: clamp(13px, 0.73cqi, 14px);
        font-weight: 500;
        line-height: clamp(13px, 0.73cqi, 14px);
        letter-spacing: clamp(-0.14px, -0.007cqi, 0px);
        color: var(--color-dark-sand);
        text-transform: uppercase;
    }

    @container footer-content (max-width: 1024px) {
        &.flex { width: 100%; }
    }
}

.sidecontacts-wrapper {
    gap: 3px;

    @container footer-content (max-width: 1024px) {
        width: 50%;
    }

    @container footer-content (max-width: 768px) {
        gap: 15px;
    }
}

.space {
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.contact a, .help-links a {
    font-size: clamp(15px, 0.83cqi, 16px);
    font-weight: 400;
    line-height: clamp(16px, 1cqi, 19px); /* 118.75% */
    letter-spacing: clamp(-0.16px, -0.008cqi, 0px);
    color: var(--color-sand);

    &:hover {
        color: var(--help-link-hover-color);
    }
}

.contact a {
    color: var(--contact-link-color);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.help-links {
    gap: clamp(25px, 2.1cqi, 40px);

    & a {
        color: var(--help-link-static-color);
    }

    @container footer-content (max-width: 1024px) {
        width: 100%;
        justify-content: space-between;
    }
}

.footer-menus {
    & a:hover {
        color: var(--link-hover-color);
    }

    @container footer-content (max-width: 1500px) {
        grid-column: 2;
        grid-row: 1;
    }

    @container footer-content (max-width: 1024px) {
        grid-column: 1;
        grid-row: 1;
    }

    @container footer-content (max-width: 768px) {
        flex-direction: column;
        gap: 40px;
    }
}

.contact-bottom {
    @container footer-content (max-width: 1024px) {
        gap: 20px;
    }
}

.main-contacts {
    @container footer-content (max-width: 1024px) {
        width: 50%;
    }
}

.contact-information {
    @container footer-content (max-width: 768px) {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
    }
}