@font-face {
  font-family: 'Satoshi';
  src: url("../fonts/Satoshi-Variable.woff2") format('woff2') tech('variations'),
       url("../fonts/Satoshi-Variable.woff2") format('woff2 supports variations'),
       url('../fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('../fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
}

$montonio-font-family: Satoshi, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

.montonio-has-tooltip {
    position: relative;

    &::after,
    &::before {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.12s ease-out, visibility 0s linear 0.12s;
    }

    &::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
        background: #1B1B1B;
        color: #fff;
        padding: 8px 12px;
        border-radius: 6px;
        font-family: $montonio-font-family;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.4;
        text-align: center;
        width: max-content;
        max-width: 260px;
        white-space: normal;
        z-index: 10000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &::before {
        content: '';
        position: absolute;
        bottom: calc(100% + -4px);
        left: 50%;
        transform: translateX(-50%);
        border: 6px solid transparent;
        border-top-color: #1B1B1B;
        z-index: 10000;
    }

    &:hover::after,
    &:hover::before,
    &:focus-visible::after,
    &:focus-visible::before {
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }
}

@keyframes montonio-spinner {
  0% {
    transform: rotate(-43deg);
  }

  100% {
    transform: rotate(317deg);
  }
}

.montonio-button {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: 0;
    display: inline-block;
    background: #260071;
    color: #fff !important;
    padding: 8px 12px;
    text-align: center;
    text-decoration: none !important;
    border: none;
    border-radius: 4px;
    cursor: pointer; 
    box-shadow: 0px 1px 2px 0px rgba(15, 26, 42, 0.08);

    &:hover {
        background: #5c14eb;
        color: #fff !important;
    }

    &:active {
        background: #1b0547;
    }

    &:focus {
        background: #260071;
        outline: none;
        box-shadow: none;
    }

    &:focus-visible {
        outline: 2px solid #5c14eb;
        outline-offset: 2px;
    }

    &__icon {
        width: 20px;
        height: 20px;
        padding: 2px 0;

        &::before {
            content: '';
            display: block;
            width: 20px;
            height: 20px;
            mask-image: var(--icon-url);
            -webkit-mask-image: var(--icon-url);
            mask-repeat: no-repeat;
            -webkit-mask-repeat: no-repeat;
            mask-position: center;
            -webkit-mask-position: center;
            mask-size: contain;
            -webkit-mask-size: contain;
            background-color: currentColor;
        }
    }

    &--secondary {
        background: #fff;
        padding: 7px 11px;
        color: #3C3C3C !important;
        border: 1px solid #ADADB0;

        &:hover {
            background: #fff;
            border-color: #94A3B8;
            color: #3C3C3C !important;
        }

        &:active,
        &.button--active {
            background: #fff;
            border-color: #260071;
            color: #260071 !important;
            box-shadow: none;
        }

            &:focus {
                background: #fff;
            }
    }

    &--beige {
        background: #F9E0C0;
        color: #260071 !important;

        &:hover {
            background: #E2BF92;
            color: #260071 !important;
        }

        &:active {
            background: #E2BF92;
        }

        &:focus {
            background: #E2BF92;
        }
    }    
    
    &--transparent {
        background: rgba(27, 5, 71, 0.50);
        color: #fff !important;

        &:hover {
            background: rgba(27, 5, 71, 0.80);
            color: #fff !important;
        }

        &:active {
            background: rgba(27, 5, 71, 0.80);
        }

        &:focus {
            background: rgba(27, 5, 71, 0.80);
        }
    }

    &--disconnect {
        &:hover {
            background: #E9283F;
            border-color: #E9283F;
            color: #fff !important;
        }
    }

    &--sm {
        padding: 4px 12px;
    }

    &--lg {
        font-size: 16px;
        padding: 12px 24px;
        letter-spacing: -0.16px; 

        .montonio-button--secondary {
            padding: 14px 23px;
        }
    }

    &:disabled,
    &[disabled] {
        background: #F8F6F4 !important;
        color: #94A3B8 !important;
        border-color: #E2E8F0 !important;
    }
}

.montonio-notice {
    background: #F0EEFB;
    padding: 8px 12px 8px 12px !important;

    strong {
        color: #442DD2;
    }

    &--success {
        background: #EDFBEC;

        strong {
            color: #098F04;
        }
    }

    &--warning {
        background: #fff6da;

        strong {
            color: #e3a500;
        }
    }

    &--error {
        background: #ffebeb;

        strong {
            color: #ce0920;
        }
    }
}

.montonio-icon {
    &--circle {       
        display: inline-flex;
        align-items: center; 
        background: #F0EBFF;
        padding: 12px;
        border: 3px solid #F5F1FF;
        border-radius: 40px;
    }
}

.montonio-badge {
    display: inline-block;
    padding: 4px 8px;
    background-color: #F0EBFF;
    color: #260071;
    font-weight: 500;
    margin-left: 5px;
    font-size: 13px;
    line-height: 1;
    border-radius: 90px;
    letter-spacing: 0;

    &--neutral {
        background-color: #F8F6F4;
        color: #3C3C3C;
    }    

    &--neutral-inverted {
        background-color: #3C3C3C;
        color: #F8F6F4;
    }    
    
    &--success {
        background-color: #edfbec;
        color: #20b01b;
    }

    &--warning {
        background-color: #fff6da;
        color: #bf8b00;
    }

    &--error {
        background: #ffebeb;
        color: #E9283F;
    }    
    
    &--error-inverted {
        background: #E9283F;
        color: #ffebeb;
    }

    @media only screen and (max-width: 1240px) {
        padding: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;

        &__text {
            display: none;
        }

        &--live {
            background-color: #6DD06A;
        }

        &--sandbox {
            background-color: #FFD460;
        }
    }
}

.montonio-spinner {
    width: 32px;
    height: 32px;
    pointer-events: none;
    animation: montonio-spinner 1s infinite cubic-bezier(.65,.05,.36,.95);
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path opacity="0.16" d="M30 16C30 17.8385 29.6379 19.659 28.9343 21.3576C28.2308 23.0561 27.1995 24.5995 25.8995 25.8995C24.5995 27.1995 23.0561 28.2307 21.3576 28.9343C19.659 29.6379 17.8385 30 16 30C14.1615 30 12.341 29.6379 10.6424 28.9343C8.94387 28.2307 7.40052 27.1995 6.1005 25.8995C4.80048 24.5995 3.76925 23.0561 3.06569 21.3576C2.36212 19.659 2 17.8385 2 16C2 14.1615 2.36212 12.341 3.06569 10.6424C3.76926 8.94387 4.80049 7.40052 6.10051 6.1005C7.40053 4.80048 8.94388 3.76925 10.6424 3.06568C12.341 2.36212 14.1615 2 16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76926 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16L30 16Z" stroke="%23260071" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2308 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16" stroke="%23260071" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transform: rotate(-43deg);
}

.montonio-logo {
    max-width: 130px;
    margin-bottom: 30px;
}

.montonio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-family: $montonio-font-family;
    cursor: pointer;

    &__input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    &__switch {
        position: relative;
        display: inline-block;
        flex-shrink: 0;
        width: 24px;
        height: 16px;
        background: #ffffff;
        border: 1px solid #ADADB0;
        border-radius: 999px;
        transition: background-color 0.1s ease-out;
        box-sizing: border-box;

        &::before {
            content: "";
            position: absolute;
            top: 3px;
            left: 3px;
            width: 8px;
            height: 8px;
            background: #A3A3A2;
            border-radius: 50%;
            transition: transform 0.1s ease-out, background-color 0.1s ease-out;
        }
    }

    &__label {
        font-size: 15px;
        line-height: 24px;
        font-weight: 500;
        color: #27364B;
    }

    &__input:checked + &__switch {
        background: #260071;
        border-color: #260071;

        &::before {
            transform: translateX(8px);
            background: #ffffff;
        }
    }

    &__input:not(:checked):hover + &__switch {
        border-color: #7c7c7b;

        &::before {
            background: #7c7c7b;
        }
    }

    &__input:focus-visible + &__switch {
        outline: 2px solid #5c14eb;
        outline-offset: 2px;
    }

    &__input:disabled + &__switch {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

.montonio-menu {
    ul {
        display: flex;
        flex-direction: column;
        gap: 8px 10px;
        margin: 0;
        padding: 0;

        @media only screen and (max-width: 1240px) {
            flex-direction: row;
            flex-wrap: wrap;
        }

        li {
            display: flex;
            align-items: center;
            margin: 0;

            a {
                width: 100%;
                margin: 0;
                padding: 7px 8px;
                font-weight: 500;
                text-decoration: none;
                color: #1b1b1b;
            }

            &.active {
                background: #f0ebff;
                border-radius: 4px;
                
                a {
                    color: #1b1b1b;
                }
            }            
        }
    }
}

.montonio-options-title {
    margin-bottom: 10px !important;
}

.montonio-options {
    font-family: $montonio-font-family;
    background: #fff;
    color: #1b1b1b;
    padding: 40px;
    border-radius: 14px;

    @media only screen and (max-width: 1240px) {
        padding: 40px 20px;
    }

    a {
        color: #260071;
        text-decoration: none;

        &:hover {
            color: #5c14eb;
        }
    }

    input[type=text],
    input[type=password] {
        padding: 4px 10px !important;
        background-color: #fff;
        border: 1px solid #ADADB0;
        border-radius: 4px;
    }    
    
    textarea{
        padding: 4px 10px !important;
        background-color: #fff;
        border: 1px solid #ADADB0;
        border-radius: 4px;
    }

    select {
        border-color: #ADADB0 !important;
        line-height: 36px !important;
        border-radius: 4px;
    }

    .select2-container .select2-selection--single {
        height: 38px !important;
        border-color: #ADADB0 !important;

        .select2-selection__rendered {
            line-height: 36px !important;
        }

        .select2-selection__arrow {
            height: 36px !important;
        }
    }

    h3.wc-settings-sub-title {
        font-size: 1.2em;
        margin: 7px 0 6px;
    }

    &__container {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        gap: 40px;

        @media only screen and (max-width: 1240px) {
            flex-direction: column;
        }
    }

    .montonio-sidebar {
        min-width: 210px;
    }

    .montonio-card {
        background: #fff;
        padding: 16px 24px;
        margin-bottom: 32px;
        border-radius: 8px;

        &:last-child {
            margin-bottom: 10px;
        }
        
        &--border {
            border: 1px solid #E1DDDB;
        }

        &--notice {
            font-size: 15px;
            font-style: normal;
            font-weight: 500;
            line-height: 24px;
            color: #27364B; 
        }

        h4 {
            margin-top: 0;
            margin-bottom: 10px;
        }

        &__body {
            p {
                margin: 0;
            }
        }

        &--store-info {
            background: #FCFBFB;
        }

        &--icon {
            padding: 12px 24px;

            .montonio-card__body {
                display: flex;
                align-items: center;
                gap: 10px;    
            }
        }

        &__icon {
            width: 20px;
            height: 20px;
            flex-shrink: 0;

            &::before {
                content: '';
                display: block;
                width: 20px;
                height: 20px;
                mask-image: var(--icon-url);
                -webkit-mask-image: var(--icon-url);
                mask-repeat: no-repeat;
                -webkit-mask-repeat: no-repeat;
                mask-position: center;
                -webkit-mask-position: center;
                mask-size: contain;
                -webkit-mask-size: contain;
                background-color: currentColor;
            }
        }

        &--purple {
            background: #F0EEFB;

            strong {
                color: #260071;
            }

            .montonio-card__icon {
                &:before {
                    background-color: #260071;
                }
            }
        }

        &--blue {
            background: #E7EFFF;

            strong {
                color: #0A4DDE;
            }
        }

        &--yellow {
            background: #fff6da;

            strong {
                color: #e3a500;
            }
        }

        &--red {
            background: #ffebeb;

            strong {
                color: #ce0920;
            }
        }

        .description {
            font-size: 12px;
            margin-top: 5px;
        }

        #woocommerce_wc_montonio_api_general_title {
            border-top: 1px solid #E1DDDB;
            padding-top: 30px;
            margin-top: 1.7em;
        }
    }

    .api-keys {
        font-family: $montonio-font-family;
        margin: 10px 0 20px;

        &__title {
            line-height: 28px;
            font-weight: 700;
            letter-spacing: -2%;
            margin: 0 0 5px;
        }

        &__description {
            font-size: 14px;
            color: #7C7C7B;
            margin: 0 0 20px;
        }

        &__button {
            display: inline-flex;
            align-items: center;
            gap: 10px;

            &::before {
                content: "";
                display: inline-block;
                width: 25px;
                height: 15px;
                background-color: #ffffff;
                -webkit-mask-image: url('../images/montonio-logo-mark.svg');
                mask-image: url('../images/montonio-logo-mark.svg');
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-size: contain;
                mask-size: contain;
                flex-shrink: 0;
            }
        }

        &__forms {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        &__fields {
            display: grid;
            grid-template-columns: max-content 1fr;
            align-items: center;
            gap: 16px 25px;

            input {
                background: #F8F6F4 !important;
                color: #000000 !important;
                padding: 7px 16px !important;
                font-size: 15px !important;
                border: none !important;
                border-radius: 4px !important;
                box-shadow: none !important;

                &[readonly] {
                    color: #ADADB0 !important;
                }

                &:disabled,
                &:read-only {
                    color: #ADADB0 !important;
                }
            }
        }

        &__field {
            display: contents;

            label {
                font-size: 15px;
                line-height: 24px;
                font-weight: 500;
                letter-spacing: -1%;
                color: #000000;
                white-space: nowrap;
            }

            input[type="text"],
            input[type="password"] {
                width: 100%;
            }
        }

        &__group {
            padding: 24px;
            background: #FCFBFB;
            border-radius: 8px;

            &--live {
                background: #F7F5FF;

                input {
                    background: #ffffff !important;
                }
            }

            &--pending {
                background: #FFEBEB;
            }
        }

        &__group-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
        }

        &__group-title {
            color: #000000;
            font-size: 21px;
            line-height: 37px;
            font-weight: 700;
            letter-spacing: -2%;
            margin: 0 0 5px;
        }

        &__group-description {
            color: #7C7C7B;
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            letter-spacing: -1%;
            margin: 0 0 24px;
        }

        &__connect {
            position: relative;
            display: flex;
            align-items: stretch;
            gap: 28px;
            padding: 24px;
            background: #F7F5FF;
            border-radius: 8px;

            &-title {
                font-size: 24px;
                line-height: 40px;
                font-weight: 700;
                margin: 0 0 15px;
                letter-spacing: -1%;;
            }

            &-icon {
                display: flex;
                align-items: center;
                gap: 10px;
                background-color: #F0EBFF;
                padding: 29px;
                border-radius: 12px;

                span {
                    width: 38px;
                    height: 12px;
                    border-top: 1px dashed #8779FF;
                    border-bottom: 1px dashed #8779FF;
                    stroke-dasharray: 2, 2;
                }

                img {
                    width: 48px;
                }
            }                
            
            &-body {
                flex: 1 1 0%;
            }

            &-text {
                font-size: 14px;
                line-height: 22px;
                font-weight: 500;
                color: #7C7C7B;
                letter-spacing: -1%;;
            }

            &-list {
                font-size: 14px;
                line-height: 22px;
                font-weight: 500;
                list-style: none;
                padding: 0;
                margin: 20px 0 25px;
            }

            &-item {
                position: relative;
                padding-left: 25px;
                margin-bottom: 10px;

                &::before {
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 18px;
                    height: 18px;
                    background-color: #EDFBEC;
                    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17L4 12' stroke='%2320B01B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                    background-repeat: no-repeat;
                    background-size: 12px;
                    background-position: center;
                    border-radius: 50%;
                }
            }
        }

        &__separator {
            display: flex;
            align-items: center;
            text-align: center;
            padding: 20px 0;
            color: #7c7c7b;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;

            &::before,
            &::after {
                content: '';
                flex: 1;
                width: 100%;
                height: 1px;
                background: rgb(225 221 219);
            }
        
            &:not(:empty)::before {
            margin-right: 15px;
            }

            &:not(:empty)::after {
            margin-left: 15px;
            }
        }

        &__manual {
            &-toggle {
                display: flex;
                align-items: center;
                gap: 14px;
                background: #FCFBFB;
                padding: 14px 20px;
                border-radius: 8px;
                cursor: pointer;

                &::after {
                    content: '';
                    display: block;
                    width: 16px;
                    height: 16px;
                    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M0.664978 0.665039L4.66498 4.66504L8.66498 0.665039" stroke="%233C3C3C" stroke-width="1.33" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center;
                    background-size: 10px 6px;
                    margin-left: auto;
                }

                &:hover {
                    background: #f9f9f9;
                }

                &--open {
                    border-bottom-left-radius: 0;
                    border-bottom-right-radius: 0;

                    &::after {
                        transform: rotate(180deg);
                    }
                }

                &-icon {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 36px;
                    height: 36px;
                    background: #f7f7f7;
                    border: 1px solid #E1DDDB;
                    border-radius: 6px;

                    img {
                        width: 18px;
                        height: 18px;
                        display: block;
                    }
                }
            }

            &-title {
                font-size: 14px;
                font-weight: 600;
                margin: 0 0 2px;
            }

            &-description {
                font-size: 12px;
                font-weight: normal;
                color: #7c7c7b;
                margin: 0;
            }

            &-content {
                display: none;
                padding: 20px 20px 10px;
                background: #fcfbfb;
                border-top: none;
                border-bottom-right-radius: 6px;
                border-bottom-left-radius: 6px;

                &--open {
                    display: block;
                }

                .api-keys__group-title {
                    font-size: 17px;
                    line-height: 23px;
                }
            }

            &-form {
                display: flex;
                gap: 20px;
            }

            &-field {
                flex: 1;
                margin-bottom: 20px;

                label {
                    display: block;
                    margin-bottom: 5px;
                }

                input {
                    width: 100%;
                }
            }
        }
    }

    .montonio-connected-store {
        font-family: $montonio-font-family;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &__header {
            display: flex;
            align-items: center;
        }

        &__title {
            font-size: 17px;
            line-height: 23px;
            color: #1B1B1B !important;
            font-weight: 700;
            text-decoration: none;
            letter-spacing: -2%;

            &:hover {
                color: #5c14eb;
            }

            &--not-synced {
                color: #CE0920 !important;
            }
        }

        &__uuid {
            margin-top: 8px;
            font-size: 13px;
            line-height: 1;
            font-weight: 500;
            color: #7C7C7B;
        }

        &__actions {
            display: flex;
            gap: 8px;
        }
    }

    .submit {
        margin-bottom: 0;
        padding: 0;

        .montonio-button {
            padding: 13px 19px;
        }
    }

    ~ p.submit {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 8px;
        max-width: 1000px !important;
        margin: 0 auto;
    }
}

.montonio-shipping-panel {
        max-width: 500px;
        position: relative;
        margin-bottom: 10px;
        clear: both;
        container-type: inline-size;
        container-name: montonio-shipping-panel;

        &__body {
            padding: 17px 20px 18px;
            background-color: #fff;
            background: #fff;
            border: 1px solid #E2E8F0;
            color: #1b1b1b;
            border-radius: 6px;
            box-shadow: 0 2px 9px rgba(0, 0, 0, 0.07);
        }

        h4 {
            color: #777 !important;
            font-weight: normal;
            margin: 0 0 2px !important;
        }

        &__header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px 15px;
            border-bottom: 1px dashed #E1DDDB;
            padding-bottom: 10px;
            margin-bottom: 20px;

            &-content {
                display: flex;
                align-items: center;
                gap: 10px;
            }
        }

        &__title {
            font-size: 14px;
            line-height: 16px;
            color: #1b1b1b !important;
            margin: 0 !important;
            text-transform: capitalize;

            span {
                display: block;
                color: #3c3c3c;
                font-size: 12px;
                font-weight: normal;
            }
        }

        &__logo {
            max-height: 32px !important;
            max-width: 60px !important;
            display: inline-block !important;
        }

        &__notice {
            background: #e7efff;
            padding: 14px 16px;
            overflow-wrap: break-word;
            border-radius: 6px;

            strong {
                color: #0A4DDE;
            }

            &--yellow {
                background: #fff6da;
                border-color: #fad791;
                color: #1b1b1b;

                strong {
                    color: #e3a500;
                }
            }

            &--red {
                background: #ffebeb;

                strong {
                    color: #ce0920;
                }
            }

            p {
                color: inherit !important;
                margin: 0;
            }
        }

        &__row {
            margin-bottom: 10px;

            &:last-child {
                margin-bottom: 0;
            }

            a {
                color: #1b1b1b;
                font-weight: 600;
                text-decoration: none;

                &:hover {
                    color: #5c14eb;
                }
            }
        }

        &__blocker {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(1px);
            border-radius: 6px;
            opacity: 0;
            visibility: hidden;
            transition: visibility 0s linear 0.3s, opacity 0.3s linear;
        }

        &--loading {
            .montonio-shipping-panel__blocker {
                opacity: 1;
                visibility: visible;
                transition: visibility 0s linear 0s, opacity 0.3s linear;
            }
        }

        &__actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }
    
}

@container montonio-shipping-panel (max-width: 340px) {
    .montonio-shipping-panel__actions {
        .montonio-button {
            width: 100%;
        }
    }
}

label[for*=montonio_shipping_sender] {
    &::after {
        content: '*';
        color: #E9283F;
    }
}

.montonio-connect-notice {
    max-width: 680px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 20px !important;
    font-family: $montonio-font-family;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: #3C3C3C;
    margin-bottom: 15px;
    border: none;
    box-shadow: none;
    border-radius: 8px;

    &__body {
        display: flex;
        gap: 20px;
        font-size: 14px;
    }

    &__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        background: #F7F5FF;
        padding: 30px;
        border-radius: 12px;
        margin-bottom: 0;

        span {
            width: 48px;
            height: 12px;
            border-top: 1px dashed #8779FF;
            border-bottom: 1px dashed #8779FF;
            stroke-dasharray: 2, 2;
        }

        img {
            display: block;
            width: 45px;
            margin: 0;
        }
    }

    &__title {
        font-family: $montonio-font-family;
        font-size: 24px;
        line-height: 40px;
        font-weight: 700;
        margin: 0 0 5px 0;
        color: #1B1B1B;
    }

    &__description {
        font-size: inherit;
        margin: 0 0 15px 0 !important;
    }

    &__button {
        padding: 12px 24px;
    }

    &__help {
        margin-top: 20px;
    }

    &__help-title {
        font-family: $montonio-font-family;
        font-size: 15px;
        line-height: 23px;
        font-weight: 700;
        margin: 0;
        color: #1B1B1B;
    }

    &__help-link {
        font-size: inherit;
    }

    @media only screen and (max-width: 640px) {
        padding: 15px !important;

        &__body {
            flex-direction: column;
        }

        &__icon {
            padding: 20px;

            img {
                width: 38px;
            }
        }

        &__title {
            font-size: 20px;
            line-height: 28px;
        }

        &__button {
            display: block;
        }
    }
}

.order-status.status-mon-label-printed {
    background: #f0ebff;
    color: #260071;
}

.montonio-admin-pickup-point-country-select,
.montonio-admin-pickup-point-select,
.montonio_carrier_country {
    width: 100% !important;
    margin: 0 0 0.5em;
}

.montonio-banner-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.woocommerce-admin-page #wpcontent .montonio-banner-wrapper {
    padding-left: 20px;
}

.woocommerce-admin-page #wpcontent #wpadminbar + .montonio-banner-wrapper {
    margin-top: 90px;
}

.montonio-options-loader {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    vertical-align: middle;
    margin-left: 10px;
    padding: 8px 15px 8px 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 500;
    color: #1B1B1B;
    border-radius: 5px;

    &::before {
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path opacity="0.16" d="M15 8C15 8.91925 14.8189 9.82951 14.4672 10.6788C14.1154 11.5281 13.5998 12.2997 12.9497 12.9497C12.2997 13.5998 11.5281 14.1154 10.6788 14.4672C9.82951 14.8189 8.91925 15 8 15C7.08075 15 6.17049 14.8189 5.32122 14.4672C4.47194 14.1154 3.70026 13.5998 3.05025 12.9497C2.40024 12.2997 1.88463 11.5281 1.53284 10.6788C1.18106 9.8295 1 8.91925 1 8C1 7.08074 1.18106 6.17049 1.53284 5.32121C1.88463 4.47193 2.40024 3.70026 3.05025 3.05025C3.70027 2.40024 4.47194 1.88462 5.32122 1.53284C6.1705 1.18106 7.08075 1 8 1C8.91926 1 9.82951 1.18106 10.6788 1.53284C11.5281 1.88463 12.2997 2.40024 12.9498 3.05026C13.5998 3.70027 14.1154 4.47194 14.4672 5.32122C14.8189 6.1705 15 7.08075 15 8L15 8Z" stroke="%23260071" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 1C8.91925 1 9.82951 1.18106 10.6788 1.53284C11.5281 1.88463 12.2997 2.40024 12.9497 3.05025C13.5998 3.70026 14.1154 4.47194 14.4672 5.32122C14.8189 6.1705 15 7.08075 15 8" stroke="%23260071" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        background-size: contain;
        background-repeat: no-repeat;
        animation: montonio-spinner 1s infinite cubic-bezier(.65,.05,.36,.95);
        transform: rotate(-43deg);
    }
}

.montonio-resync-status {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F8F6F4;
    margin-top: 20px;
    padding: 16px 24px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;

    &::before {
        content: '';
        display: none;
        width: 20px;
        height: 20px;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-position: center;
        mask-size: contain;
        -webkit-mask-size: contain;
        background-color: currentColor;
        flex-shrink: 0;
    }

    &.is-success {
        background: #EDFBEC;
        color: #098F04;

        &::before {
            display: inline-block;
            mask-image: url('../images/check-circle-broken.svg');
            -webkit-mask-image: url('../images/check-circle-broken.svg');
        }
    }

    &.is-error {
        background: #FFEBEB;
        color: #CE0920;

        &::before {
            display: inline-block;
             mask-image: url('../images/alert-octagon.svg');
            -webkit-mask-image: url('../images/alert-octagon.svg');
        }
    }

    .montonio-options-loader {
        background: none;
        color: inherit;
        padding: 0;
        margin: 0;
    }
}

.montonio-shipping-panel__status {
    position: relative;
    font-size: 13px;
    line-height: 1;
    font-weight: normal;
    padding: 5px 8px;
    border-radius: 40px;
    display: inline-block;    
    background-color: #f8f6f4;
    color: #3c3c3c;

    & span {
        transition: opacity 0.2s ease;
    }
}

#montonio-shipping-sync-shipment {
    cursor: pointer;

    &::after {
        content: attr(data-hover);
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    &:hover::after {
        opacity: 1;
    }

    &:hover span {
        opacity: 0;
    }
}

.order-status.montonio-shippment-status,
.montonio-shipping-panel__status {
    &--registered {
        background-color: #e7efff;
        color: #2366f9;
    }

    &--creationFailed,
    &--registrationFailed {
        background-color: #ffebeb;
        color: #e9283f;
    }    
    
    &--labelsCreated {
        background-color: #f0ebff;
        color: #260071;
    }    
    
    &--inTransit,
    &--awaitingCollection {
        background-color: #fff6da;
        color: #bf8b00;
    }    
    
    &--delivered {
        background-color: #edfbec;
        color: #20b01b;
    }
}

.wc-action-button-montonio_print_label {
    background: #260071 !important;
    border-color: #260071 !important;
    color: #fff !important;

    &:hover {
        background: #5c14eb !important;
        border-color: #5c14eb !important;
    }

    &::after {
        font-family: Dashicons;
        content: "\f193" !important;
    }
}

.montonio-banner {
    font-family: $montonio-font-family;
    max-width: 912px;
    position: relative;
    background-color: var(--montonio-banner-bg, #E4DBFA);
    color: #260071;
    border: none;
    box-shadow: none;
    padding: 24px !important; 
    border-radius: 16px;
    box-sizing: border-box;
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background-color: var(--montonio-banner-pattern, #FFFFFF);
        -webkit-mask: url('../images/banner_pattern.svg') no-repeat right bottom;
                mask: url('../images/banner_pattern.svg') no-repeat right bottom;
        -webkit-mask-size: auto 100%;
                mask-size: auto 100%;
    }

    @media screen and (max-width: 810px) {
        padding: 32px 24px !important;
    }

    .montonio-badge {
        margin-bottom: 8px;
    }

    img {
        max-width: 100%;
        max-height: 169px;
        height: auto;
        display: block;
        margin: 0;

        @media screen and (max-width: 819px) {
            display: none;
        }
    }

    &__logo {
        margin-bottom: 16px;

        svg {
            max-width: 115px;
        }
    }
    
    &__close {
        display: block;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 20;

        span {
            display: none;
        }

        svg {
            padding: 4px;
        }

        @media screen and (max-width: 810px) {
            right: 19px;
            top: 20px;
        }
    }

    &__row {
        display: flex;
        align-items: center;
        gap: 28px;
    
        @media screen and (max-width: 810px) {
            flex-direction: column;
        }
    }
    
    &__content {
        max-width: 1600px;
        margin: 0 auto;
        position: relative;
        z-index: 2;

        h2 {
            color: #260071;
            font-size: 32px;
            font-style: normal;
            font-weight: 700;
            line-height: 40px;
            letter-spacing: -1.28px;
            margin: 0 0 16px;
            display: flex;
            gap: 16px;
            align-items: center;

            span {
                background: #389D9D;
                color: #fff;
                font-size: 12px;
                font-weight: 500;
                line-height: 116.667%;
                letter-spacing: -0.24px;
                padding: 8px 10px;
                justify-content: center;
                align-items: center;
                flex-shrink: 0;
                border-radius: 24px;
            }
        }

        p {
            color: #fff;
            font-size: 13px;
            font-style: normal;
            font-weight: 400;
            line-height: 138.462%;
        }

        ul {
            display: flex;
            gap: 14px 24px;
            margin: 0;
            padding: 0;
            list-style: none;

            @media screen and (max-width: 819px) {
                flex-direction: column;
            }

            li {
                background: #E4DBFA;
                flex: 1;
                padding: 24px;
                margin: 0;
                border-radius: 16px;

                .montonio-icon {
                    margin-bottom: 8px;
                }

                h3 {
                    font-size: 24px;
                    font-style: normal;
                    font-weight: 700;
                    line-height: 150%;
                    letter-spacing: -0.48px;
                    color: #260071;
                    margin: 0 0 4px;
                }

                p {
                    font-size: 15px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 160%;
                    color: #260071;
                }
            }
        }
    }

    &__actions {
        display: flex;
        gap: 16px;
        margin-top: 16px;
    
        @media screen and (max-width: 465px) {
            flex-direction: column;
        }
    }
    
    &__button {
        a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
    }
}

.montonio-international-shipping-description-title {
    display: none;

    & + p:empty {
        display: none;
    }
}

.montonio-international-shipping-description {
    background: #f0ebff;
    border: 1px solid #E4DBFA;
    color: #1b1b1b;
    padding: 24px;
    border-radius: 6px;
    line-height: 1.5;

    ul {
        margin: 7px 0 0;
        display: flex;
        flex-direction: column;
        gap: 8px;

        li {
            margin: 0;
        }
    }
}

.montonio-disabled-reason {
    background: #fff6da;
    color: #1b1b1b;
    padding: 13px 16px;
    font-size: 12px;
    border-radius: 6px;
}

// For modal-based settings (shipping zone method modal)
// Target only the container that comes after the default dimensions title
[id*="default_dimensions_title"] + p + .wc-shipping-zone-method-fields {
    // Use CSS Grid to arrange label+fieldset pairs in columns
    display: grid;
    grid-template-columns: repeat(4, auto);
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    gap: 0 15px;
    align-items: start;

    label[for*="default_length"],
    label[for*="default_width"],
    label[for*="default_height"],
    label[for*="default_weight"] {
        display: block;
        margin-bottom: 5px;
        font-weight: 500;
    }

    fieldset {
        display: block;
        margin: 0;
        padding: 0;
        border: none;
    }

    // Hide descriptions for first 3 fields
    label[for*="default_length"] + fieldset .description,
    label[for*="default_width"] + fieldset .description,
    label[for*="default_height"] + fieldset .description {
        display: none;
    }

    // Show description only on weight field, positioned below the grid
    label[for*="default_weight"] + fieldset .description {
        display: block;
        grid-column: 1 / -1;
        margin-top: 10px;
        font-size: 12px;
        color: #666;
    }
}

// Montonio Shipping - Carriers Table
.montonio-carriers-table {
  td {
    vertical-align: middle;
  }

  &__logo {
    width: 100px;
    text-align: center;

    img {
      max-height: 24px;
      max-width: 80px;
      width: auto;
    }
  }

  &__name {
    font-weight: 500;
  }

  &__contracts {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 6px;

    li {
      display: inline-block;
      font-size: 12px;
      line-height: 1;
      padding: 4px 8px;
      border-radius: 90px;
      background-color: #f0ebff;
      color: #260071;
    }
  }
}

// Montonio Shipping - Setup Routes Trigger
.montonio-setup-routes-trigger {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 10px;

  .description {
    color: #646970;
  }
}

// Montonio Shipping - Setup Wizard
.montonio-setup-loading {
  padding: 20px;
  text-align: center;

  .spinner {
    float: none;
    margin: 0 10px 0 0;
    vertical-align: middle;
  }
}

.montonio-setup-preview-table {
  thead th {
    font-weight: 600;
  }

  .montonio-zone-first-row {
    td {
      border-top: 1px solid #c3c4c7;
    }

    &:first-child td {
      border-top: none;
    }
  }

  tr.montonio-setup-skipped {
    opacity: 0.5;
  }
}

.montonio-setup-dimensions {
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #e1dddb;

  h3 {
    margin-top: 0;
    font-size: 1.1em;
  }

  .form-table {
    margin: 0;
  }
}

.montonio-setup-actions {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;

  .spinner {
    float: none;
    margin: 0;
    vertical-align: middle;
  }
}

.montonio-setup-summary {
  .notice {
    margin: 0 0 16px;
  }

  ul {
    list-style: disc;
    margin-left: 20px;
  }

  .montonio-setup-actions {
    margin-top: 16px;
  }
}

// Montonio Shipping - Setup Routes Modal
body.montonio-modal-open {
  overflow: hidden;
}

.montonio-shipping-setup-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100050;
  display: flex;
  justify-content: center;
  align-items: center;
}

.montonio-shipping-setup-modal {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-width: 800px;
  max-height: 80vh;
  margin: 20px;
  display: flex;
  flex-direction: column;

  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid #e1dddb;
    flex-shrink: 0;

    h2 {
      margin: 0;
      font-size: 1.2em;
      line-height: 1.4;
      color: #1b1b1b;
    }
  }

  &__close {
    background: none;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #3c3c3c;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;

    &:hover {
      background: #f0ebff;
      color: #260071;
    }

    &:disabled {
      color: #94a3b8;
      cursor: default;
      background: none;
    }
  }

  &__body {
    padding: 24px;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
  }

  &__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid #e1dddb;
    flex-shrink: 0;

    .spinner {
      float: none;
      margin: 0;
      vertical-align: middle;
    }
  }
}